@import url('../shared/design-system.css');

/* ==========================
   CONTACT PAGE
   Layers on top of ../home/style.css, reusing .btn and .form-group.
   Everything below is namespaced with "ct-" so it can never clash with
   home/style.css or navbar.css/footer.css selectors.
   ========================== */

:root {
    --ct-pad: clamp(36px, 4.4vw, 60px);
}

/* ==========================
   SUPPORT PAGE
   Layers on top of ../home/style.css — reuses .primary-btn, .secondary-btn,
   .form-group, .faq-*, .cards/.card, .smart-matching, .buddy-* wholesale.
   Everything below is namespaced with "ct-" so it can never clash with
   home/style.css or navbar.css/footer.css selectors.
========================== */

html, body { width:100%; max-width:100%; min-height: 100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
img, video, svg, canvas { max-width:100%; }
img { height:auto; }

/* ---------- HERO ---------- */
/* The hero was bottom-tight: clamp(3rem,10vh,5rem) of top padding against a
   flat 2rem underneath, so the page felt airy at the top and crowded exactly
   where the contact cards begin. The three content blocks now share one
   --ct-pad rhythm, and the card band takes its spacing from that instead of
   from a hard-coded margin. */
.ct-hero{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding: clamp(40px, 5.5vw, 64px) var(--container-px) var(--ct-pad);
    background: transparent;
}

.ct-hero-blob{ position:absolute; border-radius: var(--radius-pill); pointer-events:none; }
.ct-hero-blob-a{ width:300px; height:300px; top:-150px; left:-80px; background:rgba(13,110,253,.08); }
.ct-hero-blob-b{ width:240px; height:240px; bottom:-130px; right:-70px; background:rgba(114,145,210,.1); }

.ct-hero-inner{ position:relative; z-index:1; width:min(700px, 100%); margin:0 auto; }

.ct-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size: var(--text-xs); font-weight:700; letter-spacing:.04em;
    color: var(--tb-primary); background: var(--tb-primary-light); border:1px solid var(--border-color);
    padding:8px 16px; border-radius: var(--radius-pill); margin-bottom:22px;
}
.ct-eyebrow i{ font-size:7px; color: var(--tb-success); animation:ct-blink 2s ease-in-out infinite; }
@keyframes ct-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.ct-hero h1{
    font-size:clamp(30px, 5vw, 46px);
    line-height:1.18; color: var(--text-primary); font-weight:700; margin-bottom:16px;
}
.ct-hero h1 .text-blue{ color: var(--tb-primary); }
.ct-hero-inner > p{
    color: var(--text-secondary); font-size: var(--text-md); line-height:1.75;
    max-width:560px; margin:0 auto;
}

/* ---------- CONTACT CHANNELS ---------- */
/* No margin-top here on purpose. This band used to carry a hard-coded
   margin-top:50px on top of the space already left by the section above it,
   which is what pushed the email/help cards visibly lower than the hero
   implied they should be. Rhythm now comes from the hero's bottom padding. */
.ct-channels-wrap{ padding:0 var(--container-px); position:relative; z-index:2; }
.ct-channels{
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px;
}
@media(max-width:900px){
    .ct-channels{ grid-template-columns:1fr; }
}

.ct-card{
    display:flex; flex-direction:column; align-items:flex-start;
    background:#fff; border:1px solid var(--border-color); border-radius: var(--radius-lg);
    padding:30px 28px; text-decoration:none;
    box-shadow: var(--tb-shadow-l1);
    transition: transform .3s var(--tb-transition), box-shadow .3s var(--tb-transition), border-color .3s var(--tb-transition);
    height: 100%;
}
.ct-card:hover{ transform:translateY(-5px); box-shadow: var(--tb-shadow-l2); border-color: rgba(13,110,253,.35); }
/* The third card is informational, not a link, so it must not look clickable. */
.ct-card-static{ cursor: default; }
.ct-card-static:hover{ transform:none; box-shadow: var(--tb-shadow-l1); border-color: var(--border-color); }

.ct-card-icon{
    width:52px; height:52px; border-radius: var(--radius-md); margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    background: var(--tb-primary-light); color: var(--tb-primary); font-size:20px;
}
.ct-card h2{ font-size: var(--text-md); color: var(--text-primary); margin-bottom:6px; font-weight: 700; }
.ct-card p{ color: var(--text-secondary); font-size: var(--text-sm); margin-bottom:16px; flex: 1; }
.ct-card-cta{
    display:inline-flex; align-items:center; gap:7px;
    color: var(--tb-primary); font-weight:700; font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ct-card-cta i{ transition:transform .25s ease; }
.ct-card:hover .ct-card-cta i{ transform:translateX(4px); }
.ct-card-cta-muted{ color: var(--text-muted); font-weight:600; letter-spacing:0; text-transform:none; }

/* ---------- MAIN: FORM + SIDE ---------- */
.ct-main{ padding: var(--ct-pad) var(--container-px); background: transparent; }
.ct-main-inner{
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:1.6fr 1fr; gap: clamp(32px, 5vw, 64px); align-items:start;
}
@media(max-width:900px){ .ct-main-inner{ grid-template-columns:1fr; } }

.ct-form-card{
    background:#fff; border:1px solid var(--border-color); border-radius: var(--radius-xl);
    padding:clamp(28px, 4vw, 42px);
    box-shadow: var(--tb-shadow-l1);
}
.ct-form-card h2{ font-size: var(--text-xl); color: var(--text-primary); margin-bottom:8px; font-weight: 700; }
.ct-form-sub{ color: var(--text-secondary); font-size: var(--text-sm); margin-bottom:28px; }

.ct-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:560px){ .ct-field-row{ grid-template-columns:1fr; } }

.ct-field label {
    font-size: var(--text-xs); font-weight: 700; color: var(--text-primary);
    margin-bottom: 8px; display: block;
}
.ct-field input, .ct-field select {
    width: 100%; height: 46px; padding: 0 16px;
    border-radius: var(--radius-md); border: 1.5px solid var(--border-color);
    font-family: inherit; font-size: var(--text-sm); outline: none;
    transition: all 0.2s ease;
}
.ct-field input:focus, .ct-field select:focus {
    border-color: var(--tb-primary);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

/* 0.9em of a 12px label rendered at 10.8px, which is below a readable
   floor. Deprioritise with colour/weight rather than by shrinking. */
.ct-optional{ font-weight:400; color: var(--text-muted); text-transform:none; margin-left: 4px; }

.ct-field textarea{
    width:100%; min-height:130px; resize:vertical;
    padding:13px 16px; border:1.5px solid var(--border-color); border-radius: var(--radius-md);
    font:400 var(--text-sm) 'Poppins',sans-serif; color: var(--text-primary); outline:none;
    transition:border-color .25s ease;
}
.ct-field textarea::placeholder{ color: var(--text-muted); }
.ct-field textarea:focus{ border-color: var(--tb-primary); }

.ct-field.ct-error input,
.ct-field.ct-error select,
.ct-field.ct-error textarea{ border-color: var(--text-danger); background:#fff6f6; }
.ct-field-msg{ display:block; min-height:16px; margin-top:6px; font-size: var(--text-xs); color: var(--text-danger); }

.ct-submit-btn{ position:relative; margin-top:6px; }
.ct-spinner{
    display:none; width:15px; height:15px; border-radius:50%;
    border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
    animation:ct-spin .7s linear infinite;
}
.ct-submit-btn.ct-loading{ opacity:.85; cursor:progress; }
.ct-submit-btn.ct-loading .ct-btn-text{ display:none; }
.ct-submit-btn.ct-loading .ct-spinner{ display:inline-block; }
@keyframes ct-spin{ to{ transform:rotate(360deg); } }

.ct-success{
    display:none; align-items:flex-start; gap:10px; margin-top:18px;
    padding:14px 16px; border-radius: var(--radius-md); background:#eafaf1; border:1px solid #bdeecd;
    color: var(--text-success); font-size: var(--text-sm); line-height:1.6;
}
.ct-success.ct-show{ display:flex; animation:ct-rise .35s ease; }
.ct-success i{ font-size:17px; margin-top:1px; }
@keyframes ct-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- SIDE ---------- */
.ct-side{ display:flex; flex-direction:column; gap:20px; }
.ct-side-card{
    background: var(--text-primary); border-radius: var(--radius-xl); padding:32px 24px; color: var(--text-inverse);
}
.ct-side-title{
    display:block; font-size: var(--text-sm); text-transform:uppercase; letter-spacing:.08em;
    color: rgba(255,255,255,0.5); font-weight:800; margin-bottom:16px;
}
.ct-side-row{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.ct-side-row:last-child{ margin-bottom:0; }
.ct-side-row i{ width:20px; text-align:center; color: var(--tb-accent); font-size:14px; margin-top:3px; flex:0 0 20px; }
.ct-side-row p{ margin:0; font-size: var(--text-sm); line-height:1.7; color: rgba(255,255,255,0.8); }

.ct-social-card{ padding:26px 24px; }
.ct-socials{ display:flex; gap:12px; justify-content: flex-start; }
.ct-socials a{
    width:42px; height:42px; border-radius: var(--radius-pill); background:rgba(255,255,255,.08);
    color: var(--text-inverse); display:flex; align-items:center; justify-content:center;
    text-decoration:none; transition: all 0.25s var(--tb-transition);
    border: 1px solid rgba(255,255,255,0.1);
}
.ct-socials a:hover{ background: var(--tb-primary); transform:translateY(-3px); border-color: transparent; }

/* ---------- TOAST ----------
   Live: contact.js calls ctShowToast() from the form's two failure paths
   (API error and network error), so this must stay styled. */
.ct-toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(16px);
    background: var(--text-primary); color: var(--text-inverse); padding:12px 24px; border-radius: var(--radius-pill);
    font:600 var(--text-sm) 'Poppins',sans-serif; display:flex; align-items:center; gap:9px;
    opacity:0; pointer-events:none; z-index:3000;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    transition: all 0.25s ease;
}
.ct-toast.ct-show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- SCROLL REVEAL ---------- */
.ct-reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.ct-reveal.ct-in-view{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
    .ct-reveal{ opacity:1; transform:none; transition:none; }
    .ct-eyebrow i{ animation:none; }
}

@media(max-width:560px){
    .ct-hero, .ct-channels-wrap, .ct-main { padding-inline:16px; }
    .ct-form-card, .ct-side-card { padding-inline:18px; }
    .ct-submit-btn { width:100%; }
    .ct-socials { justify-content:flex-start; }
    .ct-toast { left:12px; right:12px; width:auto; transform:translateY(16px); border-radius: var(--radius-md); }
    .ct-toast.ct-show { transform:translateY(0); }
}