/* ============================================================
   VāstuSāra — Connect Page
   Shares the --vs-* tokens defined in /css/welcome.css so this
   page matches the homepage exactly. If welcome.css isn't loaded
   on this route, the :root block below still provides the same
   values as a fallback.
============================================================ */
:root {
    --vs-sand:      #ECE4D4;
    --vs-sand-deep: #DDD1B8;
    --vs-ink:       #2A2420;
    --vs-ink-soft:  #55493F;
    --vs-red:       #7A2E24;
    --vs-red-deep:  #5C2119;
    --vs-brass:     #A9793C;
    --vs-line:      #CBBF9F;
    --vs-white:     #FBF8F2;
    --font-display: 'Marcellus', serif;
    --font-label:   'Tenor Sans', sans-serif;
    --font-body:    'Inter', sans-serif;
}

/* ------------------------------------------------------------
   HARD RESET — kills every default-blue source on this page,
   regardless of what the base layout (Bootstrap, etc.) ships.
   This is what caused the blue last time: native checkbox/radio
   accent-color defaults to blue, and Bootstrap's .form-control
   focus state uses a blue ring/border unless overridden.
------------------------------------------------------------ */
#connect-page a:hover { color: var(--vs-red-deep); }

#connect-page input,
#connect-page textarea,
#connect-page select {
    accent-color: var(--vs-red) !important;
}

#connect-page .form-control:focus,
#connect-page input:focus,
#connect-page textarea:focus,
#connect-page select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--vs-red) !important;
}

#connect-page *:focus-visible {
    outline: 2px solid var(--vs-brass) !important;
    outline-offset: 2px;
}

#connect-page { background: var(--vs-sand); }

/* ============================================================
   HERO BAND
============================================================ */
.connect-hero {
    position: relative;
    text-align: center;
    overflow: hidden;
    margin-top: 40px;
}
.connect-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(169,121,60,0.16), transparent 55%);
}
.connect-hero .container { position: relative; z-index: 1; }
.connect-hero .label-caps { color: var(--vs-brass); }
.connect-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.9rem);
    color: #b31312;
    margin: 10px 0 26px;
}
.connect-hero p {
    max-width: 700px;
    margin: 0 auto 16px;
    line-height: 1.8;
    font-size: 1.02rem;
}
.connect-hero .tagline {
    margin-top: 30px;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--vs-brass);
    font-size: 1.15rem;
}

/* ============================================================
   PATHWAYS OF COMMUNICATION — same card language as the homepage
============================================================ */
.section-pathways { background: var(--vs-sand); }
.section-pathways .label-caps { display: block; text-align: center; }
.section-pathways h2 {
    font-family: var(--font-display);
    text-align: center;
    font-size: 2rem;
    color: var(--vs-ink);
    margin-bottom: 50px;
}
.connect-pathway-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.connect-pathway-card {
    background: var(--vs-white);
    border: 1px solid var(--vs-line);
    border-radius: 3px;
    padding: 38px;
}
.connect-pathway-card h3 {
    font-family: var(--font-display);
    color: var(--vs-red);
    font-size: 1.3rem;
    margin-bottom: 14px;
}
.connect-pathway-card p {
    color: var(--vs-ink-soft);
    line-height: 1.75;
    margin-bottom: 22px;
}

/* ============================================================
   CONSULTATION PROTOCOL — a real sequence, numbers earn their keep
============================================================ */
.section-protocol { padding: 90px 0; }
.section-protocol .label-caps { color: var(--vs-brass); display: block; text-align: center; }
.section-protocol h2 {
    font-family: var(--font-display);
    text-align: center;
    color:#b31312;
    font-size: 2rem;
    margin-bottom: 50px;
}
.protocol-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.protocol-node { text-align: center; }
.protocol-node .num {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid var(--vs-brass);
    color: var(--vs-brass);
    font-family: var(--font-label);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.protocol-node p {
    color: #b31312;
    font-size: 0.92rem;
    line-height: 1.5;
}
.protocol-note {
    max-width: 700px;
    margin: 0 auto 0;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.8;
}

/* ============================================================
   FORM SECTIONS
============================================================ */
.form-section { max-width: 860px; margin: 0 auto;scroll-margin-top: 100px; }
.form-section .label-caps { display: block; }
.form-section h2 {
    font-family: var(--font-display);
    color: var(--vs-ink);
    font-size: 1.9rem;
    border-bottom: 1px solid var(--vs-line);
    padding-bottom: 16px;
    margin-bottom: 10px;
}
.form-section .form-intro { color: var(--vs-ink-soft); }

.form-fieldset {
    border: 1px solid var(--vs-line);
    border-radius: 4px;
    padding: 28px 30px;
    margin-bottom: 22px;
    background: var(--vs-white);
}
.form-fieldset legend {
    font-family: var(--font-label);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--vs-red);
    padding: 0 8px;
}

.field-group { margin-bottom: 20px; }
.field-group label {
    display: block;
    font-weight: 600;
    color: var(--vs-ink);
    margin-bottom: 7px;
    font-size: 0.92rem;
}
.field-group .hint { display: block; font-weight: 400; color: #8a7f73; font-size: 0.8rem; margin-top: 4px; }

.form-control {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--vs-line);
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--vs-white);
    color: var(--vs-ink);
}
textarea.form-control { resize: vertical; min-height: 90px; }

.checkbox-grid, .radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
.checkbox-grid label, .radio-grid label {
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    border: 1px solid var(--vs-line);
    border-radius: 3px;
    padding: 10px 12px;
    background: var(--vs-white);
    font-size: 0.92rem;
    color: var(--vs-ink-soft);
}
.checkbox-grid input, .radio-grid input { width: auto; }

.conditional-field { display: none; margin-top: 10px; }
.conditional-field.active { display: block; }

.declaration-box {
    background: var(--vs-sand-deep);
    border: 1px solid var(--vs-line);
    border-radius: 4px;
    padding: 20px 22px;
    margin-bottom: 20px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--vs-ink-soft);
}

.error-text { color: var(--vs-red); font-size: 0.8rem; margin-top: 5px; display: block; }

.alert-vastu { border-radius: 4px; padding: 16px 20px; margin-bottom: 24px; font-size: 0.92rem; }
.alert-success-vastu { background: #EAF0E4; border: 1px solid #BFD4AE; color: #3E5C2C; }
.alert-error-vastu { background: #F5E4DF; border: 1px solid #E0B3A4; color: var(--vs-red-deep); }

.vs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-label);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--vs-red);
    border: 1px solid var(--vs-red);
    padding: 13px 26px;
    border-radius: 2px;
    background: transparent;
    transition: background .25s ease, color .25s ease;
    cursor: pointer;
}
.vs-btn:hover { background: var(--vs-red); color: var(--vs-white) !important; }
.vs-btn-dark { background: var(--vs-ink); border-color: var(--vs-ink); color: var(--vs-white); }
.vs-btn-dark:hover { background: var(--vs-red-deep); border-color: var(--vs-red-deep); }

.closing-line {
    max-width: 640px;
    margin: 0 auto 90px;
    padding: 0 20px;
    text-align: center;
    color: var(--vs-ink-soft);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .connect-pathway-grid { grid-template-columns: 1fr; }
    .protocol-track { grid-template-columns: repeat(2, 1fr); }
}