/* =============================================================================
   CONTACT PAGE — contact.css
   Scoped styles for page-contact.php template.

   All classes use the .ck-contact-* prefix.
   Reusable utilities (eyebrow, section-title) are duplicated here so this
   file works standalone without depending on about.css.

   Depends on: main.css (CSS variables, fonts, reset)
   ============================================================================= */


/* ── Shared Utilities (contact-scoped copies) ────────────────────────────────
   Mirrors .ck-about-eyebrow / .ck-about-section-title so contact.css
   is fully self-contained and works without about.css loaded.
   ──────────────────────────────────────────────────────────────────────────── */

.ck-contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-primary);
}

.ck-contact-eyebrow__line {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--clr-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.ck-contact-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--clr-text);
}

.ck-contact-section-title--lg {
    font-size: clamp(1.8rem, 4vw, 3rem);
}


/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.site-main--contact {
    overflow-x: hidden;
}


/* =============================================================================
   SECTION 1 — HERO
   ============================================================================= */
.ck-contact-hero {
    position: relative;
    border-bottom: 1px solid var(--clr-border);
    overflow: hidden;
}

.ck-contact-hero__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding: 5rem var(--sp-6) 4rem;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    position: relative;
    z-index: 1;
    max-width: 760px;
}

/* Headline — short and punchy */
.ck-contact-hero__headline {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 9vw, 7.5rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.95;
    color: var(--clr-text);
}

.ck-contact-hero__sub {
    font-family: var(--font-ui);
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.7;
    color: var(--clr-text-muted);
    max-width: 540px;
}

/* Decorative accent — lime corner block */
.ck-contact-hero__accent {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at bottom right, rgba(183, 236, 52, 0.12), transparent 70%);
    pointer-events: none;
}

@media (min-width: 1024px) {
    .ck-contact-hero__accent {
        width: 500px;
        height: 500px;
    }
}


/* =============================================================================
   SECTION 2 — INFO CARDS
   ============================================================================= */
.ck-contact-info {
    background: var(--clr-surface-alt);
    border-bottom: 1px solid var(--clr-border);
}

.ck-contact-info__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding: var(--sp-10) var(--sp-6);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

@media (min-width: 600px) {
    .ck-contact-info__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ck-contact-info__inner {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Info card */
.ck-contact-info-card {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    padding: var(--sp-6);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--md);
    transition: border-color 0.2s;
}

.ck-contact-info-card:hover {
    border-color: var(--clr-primary);
}

/* Icon box */
.ck-contact-info-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--clr-primary) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ck-contact-info-card__icon .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--clr-primary);
}

/* Text stack */
.ck-contact-info-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ck-contact-info-card__label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
}

.ck-contact-info-card__value {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--clr-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-contact-info-card__value--link {
    color: var(--clr-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.ck-contact-info-card__value--link:hover {
    color: var(--clr-primary-dark);
}

.ck-contact-info-card__hint {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--clr-text-dim);
    line-height: 1.4;
}


/* =============================================================================
   SECTION 3 — FORM + SIDEBAR
   ============================================================================= */
.ck-contact-form-section {
    padding: var(--sp-20) 0;
    border-bottom: 1px solid var(--clr-border);
}

.ck-contact-form-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding: 0 var(--sp-6);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-20);
}

@media (min-width: 1024px) {
    .ck-contact-form-section__inner {
        grid-template-columns: 1.5fr 1fr;
        gap: calc(var(--sp-20) + var(--sp-10));
        align-items: start;
    }
}

/* ── Form head ─────────────────────────────────────────────────────────────── */
.ck-contact-form-head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-bottom: var(--sp-10);
}

/* ── The form ──────────────────────────────────────────────────────────────── */
.ck-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

/* Two-column row */
.ck-contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

@media (min-width: 600px) {
    .ck-contact-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Field group */
.ck-contact-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    position: relative;
}

/* Honeypot — visually hidden */
.ck-contact-form__group--hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Label */
.ck-contact-form__label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ck-contact-form__required {
    color: var(--clr-primary);
    font-size: 0.8rem;
    line-height: 1;
}

/* Input + textarea shared styles */
.ck-contact-form__input,
.ck-contact-form__textarea,
.ck-contact-form__select {
    width: 100%;
    padding: 13px 16px;
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--clr-text);
    outline: none;
    border-radius: var(--radius-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.ck-contact-form__input::placeholder,
.ck-contact-form__textarea::placeholder {
    color: var(--clr-text-dim);
    font-style: italic;
}

.ck-contact-form__input:focus,
.ck-contact-form__textarea:focus,
.ck-contact-form__select:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(183, 236, 52, 0.12);
}

.ck-contact-form__input:valid:not(:placeholder-shown),
.ck-contact-form__textarea:valid:not(:placeholder-shown) {
    border-color: rgba(183, 236, 52, 0.5);
}

/* Textarea */
.ck-contact-form__textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.65;
}

/* Character hint */
.ck-contact-form__char-hint {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    color: var(--clr-text-dim);
    text-align: right;
}

/* Custom select with arrow */
.ck-contact-form__select-wrap {
    position: relative;
}

.ck-contact-form__select {
    cursor: pointer;
    padding-right: 40px;
}

.ck-contact-form__select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1.2rem;
    color: var(--clr-text-dim);
}

/* Form footer (submit + privacy) */
.ck-contact-form__footer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}

/* Submit button */
.ck-contact-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 15px 32px;
    background: var(--clr-primary);
    color: var(--clr-primary-text);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, gap 0.2s;
    width: fit-content;
}

.ck-contact-form__submit:hover {
    background: var(--clr-primary-dark);
    gap: var(--sp-4);
}

.ck-contact-form__submit:active {
    transform: scale(0.98);
}

.ck-contact-form__submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.ck-contact-form__submit-icon {
    font-size: 1rem;
    color: inherit;
}

/* Privacy note */
.ck-contact-form__privacy {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    color: var(--clr-text-dim);
}

.ck-contact-form__privacy a {
    color: var(--clr-primary);
    text-decoration: none;
}

.ck-contact-form__privacy a:hover {
    text-decoration: underline;
}

/* Status message (success / error) */
.ck-contact-form__status {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: var(--sp-4);
}

.ck-contact-form__status--success {
    background: rgba(183, 236, 52, 0.1);
    border: 1px solid rgba(183, 236, 52, 0.4);
    color: var(--clr-primary);
}

.ck-contact-form__status--error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.ck-contact-form__status .material-symbols-outlined {
    font-size: 1.1rem;
    flex-shrink: 0;
    color: inherit;
}


/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.ck-contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    position: sticky;
    top: 100px;
}

/* Sidebar box */
.ck-contact-sidebar__box {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--md);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.ck-contact-sidebar__box-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--clr-text);
}

.ck-contact-sidebar__box-title .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--clr-primary);
}

/* Quick links */
.ck-contact-sidebar__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.ck-contact-sidebar__links a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid var(--clr-border-dim);
    transition: color 0.2s;
}

.ck-contact-sidebar__links li:last-child a {
    border-bottom: none;
}

.ck-contact-sidebar__links a:hover {
    color: var(--clr-primary);
}

.ck-contact-sidebar__links a .material-symbols-outlined {
    font-size: 1rem;
    color: inherit;
    flex-shrink: 0;
}

/* Social links in sidebar */
.ck-contact-sidebar__social {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.ck-contact-sidebar__social-link {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid var(--clr-border-dim);
    transition: color 0.2s;
}

.ck-contact-sidebar__social-link:last-child {
    border-bottom: none;
}

.ck-contact-sidebar__social-link:hover {
    color: var(--clr-primary);
}

.ck-contact-sidebar__social-link img {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    filter: grayscale(1);
    transition: opacity 0.2s, filter 0.2s;
}

.ck-contact-sidebar__social-link:hover img {
    opacity: 1;
    filter: grayscale(0);
}

/* Note box */
.ck-contact-sidebar__note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    background: color-mix(in srgb, var(--clr-primary) 8%, transparent);
    border: 1px solid rgba(183, 236, 52, 0.25);
    border-radius: var(--md);
    padding: var(--sp-4) var(--sp-6);
}

.ck-contact-sidebar__note .material-symbols-outlined {
    font-size: 1rem;
    color: var(--clr-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.ck-contact-sidebar__note p {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    line-height: 1.55;
}

.ck-contact-sidebar__note strong {
    color: var(--clr-text);
    font-weight: 700;
}


/* =============================================================================
   SECTION 4 — FAQ ACCORDION
   ============================================================================= */
.ck-contact-faq {
    padding: var(--sp-20) 0;
    background: var(--clr-surface-alt);
}

.ck-contact-faq__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding: 0 var(--sp-6);
}

.ck-contact-faq__head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-bottom: var(--sp-10);
    max-width: 560px;
}

.ck-contact-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--clr-border);
    max-width: 800px;
}

/* FAQ item */
.ck-faq-item {
    border-bottom: 1px solid var(--clr-border);
}

/* Question button */
.ck-faq-item__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-6) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.ck-faq-item__q-text {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--clr-text);
    line-height: 1.3;
    transition: color 0.2s;
    flex: 1;
}

.ck-faq-item__btn:hover .ck-faq-item__q-text,
.ck-faq-item--open .ck-faq-item__q-text {
    color: var(--clr-primary);
}

/* Toggle icon */
.ck-faq-item__icon {
    font-size: 1.2rem;
    color: var(--clr-primary);
    flex-shrink: 0;
    transition: transform 0.25s;
}

.ck-faq-item--open .ck-faq-item__icon {
    transform: rotate(45deg);
}

/* Answer panel */
.ck-faq-item__answer {
    overflow: hidden;
    margin: 0;
}

.ck-faq-item__answer-inner {
    padding: 0 0 var(--sp-6) 0;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--clr-text-muted);
    line-height: 1.7;
}

.ck-faq-item__answer-inner p {
    margin: 0 0 var(--sp-4);
}

.ck-faq-item__answer-inner p:last-child {
    margin-bottom: 0;
}


/* =============================================================================
   DARK MODE OVERRIDES
   ============================================================================= */
[data-theme="dark"] .ck-contact-info-card,
[data-theme="dark"] .ck-contact-sidebar__box {
    background: var(--clr-surface);
}

[data-theme="dark"] .ck-contact-form__input,
[data-theme="dark"] .ck-contact-form__textarea,
[data-theme="dark"] .ck-contact-form__select {
    background: var(--clr-surface);
}