/**
 * IB Math Master — Contact Page
 * Page-specific CSS (loads only on /contact/)
 *
 * Dependencies: tokens.css, shared.css (loaded globally)
 * Astra owns: body, headings, links, container width
 * This file: ct-* scoped classes only
 */


/* =========================================
   HERO
   ========================================= */

.ct-hero {
    background: linear-gradient(135deg, var(--ib-navy) 0%, #1c4070 50%, #1e4a7a 100%);
    overflow: hidden;
    padding: 80px 0 70px;
    position: relative;
    text-align: center;
}

.ct-hero::before {
    background: radial-gradient(circle, rgba(56, 189, 248, .08) 0%, transparent 65%);
    border-radius: 50%;
    content: '';
    height: 450px;
    position: absolute;
    right: -80px;
    top: -120px;
    width: 450px;
}

.ct-hero::after {
    background: radial-gradient(circle, rgba(56, 189, 248, .05) 0%, transparent 65%);
    border-radius: 50%;
    bottom: -60px;
    content: '';
    height: 280px;
    left: 8%;
    position: absolute;
    width: 280px;
}

.ct-hero .ib-container {
    position: relative;
    z-index: 1;
}

.ct-hero-tag {
    background: rgba(56, 189, 248, .12);
    border-radius: 6px;
    color: #7dd3fc;
    display: inline-block;
    font-size: var(--ib-font-size-sm);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: var(--ib-space-20);
    padding: var(--ib-space-6) var(--ib-space-16);
    text-transform: uppercase;
}

.ct-hero h1 {
    color: var(--ib-white);
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 var(--ib-space-14);
}

.ct-hero-sub {
    color: rgba(255, 255, 255, .72);
    font-size: var(--ib-font-size-body);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 520px;
}


/* =========================================
   CONTACT OPTIONS
   ========================================= */

.ct-options {
    background: var(--ib-white);
    border-bottom: 1px solid var(--ib-border);
    padding: 70px 0;
}

.ct-layout {
    display: grid;
    gap: var(--ib-space-40);
    grid-template-columns: 320px 1fr;
    margin: 0 auto;
    max-width: 940px;
}


/* --- Sidebar cards --- */

.ct-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--ib-space-20);
}

.ct-card-icon {
    align-items: center;
    background: var(--ib-white);
    border: 1px solid var(--ib-accent-soft);
    border-radius: 10px;
    color: var(--ib-accent-hover);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    margin-bottom: var(--ib-space-16);
    width: 40px;
}

.ct-card-btn {
    border: none;
    border-radius: var(--ib-radius-xs);
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 11px var(--ib-space-24);
    text-align: center;
    text-decoration: none;
    transition: all var(--ib-transition-fast);
}


/* Email card */

.ct-card-email {
    background: var(--ib-accent-bg);
    border: 1px solid var(--ib-accent-soft);
    border-radius: var(--ib-radius-sm);
    padding: var(--ib-space-28) var(--ib-space-24);
}

.ct-card-email h3 {
    color: var(--ib-navy);
    font-size: var(--ib-font-size-body);
    font-weight: 700;
    margin: 0 0 var(--ib-space-12);
}

.ct-email-address {
    color: var(--ib-navy);
    display: block;
    font-size: var(--ib-font-size-body);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--ib-space-20);
    text-decoration: none;
}

.ct-email-address:hover {
    color: var(--ib-accent-hover);
}

.ct-card-email .ct-card-btn {
    background: var(--ib-navy);
    color: var(--ib-white);
}

.ct-card-email .ct-card-btn:hover {
    background: var(--ib-navy-light);
}


/* WhatsApp card */

.ct-card-whatsapp {
    background: var(--ib-accent-bg);
    border: 1px solid var(--ib-accent-soft);
    border-radius: var(--ib-radius-sm);
    padding: var(--ib-space-28) var(--ib-space-24);
}

.ct-card-whatsapp h3 {
    color: var(--ib-navy);
    font-size: var(--ib-font-size-body);
    font-weight: 700;
    margin: 0 0 var(--ib-space-8);
}

.ct-card-whatsapp p {
    color: #475569;
    font-size: var(--ib-font-size-base);
    line-height: 1.6;
    margin: 0 0 var(--ib-space-16);
}

.ct-card-whatsapp .ct-card-btn {
    background: #25d366;
    color: var(--ib-white);
}

.ct-card-whatsapp .ct-card-btn:hover {
    background: #20bd5a;
}


/* Consultation card */

.ct-card-consult {
    background: var(--ib-accent-bg);
    border: 1px solid var(--ib-accent-soft);
    border-radius: var(--ib-radius-sm);
    padding: var(--ib-space-28) var(--ib-space-24);
}

.ct-card-consult h3 {
    color: var(--ib-navy);
    font-size: var(--ib-font-size-body);
    font-weight: 700;
    margin: 0 0 var(--ib-space-8);
}

.ct-card-consult p {
    color: #475569;
    font-size: var(--ib-font-size-base);
    line-height: 1.6;
    margin: 0 0 var(--ib-space-16);
}

.ct-card-consult .ct-card-btn {
    background: transparent;
    border: 2px solid var(--ib-navy);
    color: var(--ib-navy);
}

.ct-card-consult .ct-card-btn:hover {
    background: var(--ib-navy);
    color: var(--ib-white);
}


/* =========================================
   FORM AREA
   ========================================= */

.ct-form-wrap {
    background: var(--ib-white);
    border: 1px solid var(--ib-border);
    border-radius: var(--ib-radius-sm);
    box-shadow: 0 4px 16px rgba(15, 42, 92, 0.06);
    overflow: hidden;
}

.ct-form-header {
    border-bottom: 1px solid var(--ib-border);
    padding: var(--ib-space-24) var(--ib-space-28);
}

.ct-form-header h2 {
    color: var(--ib-navy);
    font-size: var(--ib-font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--ib-space-4);
}

.ct-form-header p {
    color: var(--ib-text-muted);
    font-size: 14px;
    margin: 0;
}

.ct-form-body {
    padding: var(--ib-space-28);
}


/* --- WPForms overrides (scoped) --- */

#ct-form-target .wpforms-container {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    visibility: visible !important;
    width: 100% !important;
}

#ct-form-target .wpforms-title,
#ct-form-target .wpforms-description {
    display: none !important;
}

#ct-form-target .wpforms-field {
    margin-bottom: var(--ib-space-16) !important;
}

#ct-form-target .wpforms-field-label {
    color: var(--ib-navy) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: var(--ib-space-6) !important;
}

#ct-form-target input[type="text"],
#ct-form-target input[type="email"],
#ct-form-target input[type="tel"],
#ct-form-target textarea,
#ct-form-target select {
    border: 1px solid var(--ib-border) !important;
    border-radius: var(--ib-radius-xs) !important;
    font-size: var(--ib-font-size-base) !important;
    padding: 11px 14px !important;
    transition: border-color var(--ib-transition-fast), box-shadow var(--ib-transition-fast);
    width: 100% !important;
}

#ct-form-target input:focus,
#ct-form-target textarea:focus,
#ct-form-target select:focus {
    border-color: var(--ib-accent) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .1) !important;
    outline: none !important;
}

#ct-form-target textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

#ct-form-target .wpforms-submit-container button {
    background: var(--ib-navy) !important;
    border: none !important;
    border-radius: var(--ib-radius-xs) !important;
    color: var(--ib-white) !important;
    cursor: pointer;
    font-size: var(--ib-font-size-base) !important;
    font-weight: 600 !important;
    padding: 13px var(--ib-space-28) !important;
    transition: background var(--ib-transition-fast);
    width: 100% !important;
}

#ct-form-target .wpforms-submit-container button:hover {
    background: var(--ib-navy-light) !important;
}


/* --- Form footer --- */

.ct-form-footer {
    border-top: 1px solid #f1f5f9;
    margin-top: var(--ib-space-20);
    padding-top: var(--ib-space-16);
    text-align: center;
}

.ct-form-response {
    align-items: center;
    color: var(--ib-text-muted);
    display: inline-flex;
    font-size: var(--ib-font-size-sm);
    font-weight: 500;
    gap: var(--ib-space-6);
}

.ct-form-response svg {
    color: var(--ib-accent);
    flex-shrink: 0;
}

.ct-form-note {
    color: #94a3b8;
    font-size: var(--ib-font-size-xs);
    margin-top: var(--ib-space-8);
}


/* =========================================
   QUICK LINKS
   ========================================= */

.ct-links {
    background: var(--ib-light);
    padding: 60px 0;
}

.ct-links-inner {
    margin: 0 auto;
    max-width: var(--ib-content-medium);
}

.ct-links-header {
    margin-bottom: var(--ib-space-32);
    text-align: center;
}

.ct-links-header h2 {
    color: var(--ib-navy);
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.ct-links-grid {
    display: grid;
    gap: var(--ib-space-20);
    grid-template-columns: 1fr 1fr;
}

.ct-link-card {
    background: var(--ib-white);
    border: 1px solid var(--ib-border);
    border-radius: var(--ib-radius-sm);
    color: var(--ib-text);
    display: flex;
    flex-direction: column;
    padding: var(--ib-space-28) var(--ib-space-24);
    text-decoration: none;
    transition: all var(--ib-transition-fast);
}

.ct-link-card:hover {
    border-color: var(--ib-accent-soft);
    box-shadow: var(--ib-shadow-md);
    color: var(--ib-text);
    transform: translateY(-2px);
}

.ct-link-icon {
    align-items: center;
    background: var(--ib-accent-bg);
    border-radius: 10px;
    color: var(--ib-navy);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    margin-bottom: var(--ib-space-16);
    width: 40px;
}

.ct-link-card h3 {
    color: var(--ib-navy);
    font-size: var(--ib-font-size-body);
    font-weight: 700;
    margin: 0 0 var(--ib-space-8);
}

.ct-link-card p {
    color: var(--ib-text-muted);
    flex: 1;
    font-size: var(--ib-font-size-base);
    line-height: 1.6;
    margin: 0 0 var(--ib-space-16);
}

.ct-link-arrow {
    color: var(--ib-accent-hover);
    font-size: 14px;
    font-weight: 600;
}

.ct-link-card:hover .ct-link-arrow {
    color: var(--ib-navy);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {
    .ct-hero {
        padding: 60px 0 50px;
    }

    .ct-hero h1 {
        font-size: 30px;
    }

    .ct-hero-sub {
        font-size: var(--ib-font-size-base);
    }

    .ct-options {
        padding: 48px 0;
    }

    .ct-layout {
        gap: var(--ib-space-24);
        grid-template-columns: 1fr;
    }

    .ct-form-wrap {
        order: -1;
    }

    .ct-form-header,
    .ct-form-body {
        padding: var(--ib-space-20);
    }

    .ct-card-email,
    .ct-card-whatsapp,
    .ct-card-consult {
        padding: 22px var(--ib-space-20);
    }

    .ct-links {
        padding: 48px 0;
    }

    .ct-links-header h2 {
        font-size: 24px;
    }

    .ct-links-grid {
        grid-template-columns: 1fr;
    }

    .ct-link-card {
        padding: var(--ib-space-24) var(--ib-space-20);
    }

    /* FIX: prevent mobile browser auto-zoom on input focus.
     * iOS/Opera WebKit zooms when input font-size is below 16px.
     * .wpforms-container beats Astra body-level font-size rule. */
    #ct-form-target .wpforms-container input[type="text"],
    #ct-form-target .wpforms-container input[type="email"],
    #ct-form-target .wpforms-container input[type="number"],
    #ct-form-target .wpforms-container input[type="password"],
    #ct-form-target .wpforms-container input[type="search"],
    #ct-form-target .wpforms-container input[type="tel"],
    #ct-form-target .wpforms-container input[type="url"],
    #ct-form-target .wpforms-container select,
    #ct-form-target .wpforms-container textarea {
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-card-btn,
    .ct-link-card {
        transition-duration: 0.01ms !important;
    }
}