/* ============================================
   Dhi Money - Advisor-request form (shared by every /advisor/ page)
   --------------------------------------------
   Styles the block that js/advisor-form.js renders into
   <div class="advisor-form" data-experiment="...">. Colours, spacing,
   radius and type all come from the ds.css tokens (--surface, --text,
   --accent, --s-*, --r-* ...), which ds.css redefines under
   [data-theme="dark"], so light and dark mostly need no separate rules
   here. The two exceptions are marked: the error red (--af-err) and the
   selected chip.

   Every selector is prefixed with .advisor-form because the block sits
   inside .article-body, whose `.article-body p` / `h2` rules (article.css)
   would otherwise restyle the form's text.

   Contrast (WCAG AA, 4.5:1 for text): small text here uses --text-2, never
   --text-3 (--text-3 is about 3:1 on the light page).
   ============================================ */

.advisor-form {
    /* the closing "back to the form" link scrolls here; clear the fixed header */
    scroll-margin-top: 96px;
    margin: var(--s-8) 0 var(--s-10);
    /* Error text. --loss (#D64545) is about 4.0:1 on the light page, under
       AA for small text, so light mode uses --loss-500 darkened 20% toward
       black (#AB3737: 5.8:1 on the page, 5.5:1 on the --loss-soft status
       box). Dark mode's --loss already passes (6.2:1 on the card). */
    --af-err: #AB3737;
}

[data-theme="dark"] .advisor-form { --af-err: var(--loss); }

/* Section links ("#tax-on-sale") land below the fixed header, not under it */
.article-body [id] { scroll-margin-top: 96px; }

.advisor-form .af-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    box-shadow: var(--shadow-sm);
}

.advisor-form .af-title {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 var(--s-2);
}

.advisor-form .af-lede {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0 0 var(--s-5);
}

/* ---------- Text fields ---------- */
.advisor-form .af-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}

/* No flex gap: the help + error lines stay rendered (zero height) while
   empty so screen readers announce them, and a gap would leave holes. */
.advisor-form .af-field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--s-4);
    min-width: 0;
}

.advisor-form .af-label,
.advisor-form .af-legend {
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding: 0;
}

.advisor-form .af-label { margin-bottom: 6px; }

.advisor-form .af-opt {
    font-weight: 400;
    color: var(--text-2);
}

.advisor-form .af-input {
    width: 100%;
    min-width: 0;
    /* 16px stops iOS Safari zooming the page when a field gets focus */
    font-size: 16px;
    font-family: var(--font-text);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 12px 14px;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}

.advisor-form .af-input::placeholder { color: var(--text-3); }

.advisor-form .af-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.advisor-form .af-input[aria-invalid="true"] {
    border-color: var(--loss);
}

/* While fixing a field, show the normal focus colour, not the error red */
.advisor-form .af-input[aria-invalid="true"]:focus {
    border-color: var(--accent);
}

/* ---------- Chip questions (single-select, real radios underneath) ---------- */
.advisor-form .af-q {
    border: 0;
    margin: 0 0 var(--s-4);
    padding: 0;
    min-width: 0;   /* a fieldset defaults to min-content width and would push the page sideways */
}

.advisor-form .af-legend { margin-bottom: var(--s-2); }

.advisor-form .af-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.advisor-form .af-chip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

/* The radio stays in the page (keyboard + screen readers use it) but is
   invisible; the span next to it is the visible chip. */
.advisor-form .af-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.advisor-form .af-chip span {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-2);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    /* 12px + 18px line + 12px + 2px border = 44px tap height */
    padding: 12px 16px;
    transition: border-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard);
}

.advisor-form .af-chip:hover span {
    border-color: var(--accent-line);
    color: var(--text);
}

.advisor-form .af-chip input:checked + span {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-strong);
    font-weight: 600;
}

/* Dark: --accent-soft (16%) on the dark card barely differs from an
   unselected chip, so a selected chip gets a stronger accent tint and a
   2px accent ring (1px border + 1px inset shadow, no layout shift). */
[data-theme="dark"] .advisor-form .af-chip input:checked + span {
    background: rgba(144, 138, 247, 0.28);   /* --accent (dark) at 28% */
    box-shadow: inset 0 0 0 1px var(--accent);
    color: var(--text);
}

.advisor-form .af-chip input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Consent ---------- */
.advisor-form .af-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
    cursor: pointer;
    margin: var(--s-2) 0 var(--s-1);
}

.advisor-form .af-consent input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ---------- Honeypot: off-screen for people, still in the DOM for bots ---------- */
.advisor-form .af-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Help, errors + status ----------
   All of these are live regions (or read through aria-describedby). They
   are NEVER display:none while empty: a live region that only enters the
   page when its text arrives is often not announced. Empty, they collapse
   to zero height; the spacing appears with the text. */
.advisor-form .af-help {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text-2);
    margin: 0;
}

.advisor-form .af-err {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--af-err);
    margin: 0;
}

.advisor-form .af-help:not(:empty),
.advisor-form .af-err:not(:empty) { margin-top: 6px; }

/* The phone field's message appears on blur, often while the visitor is
   mid-click on the consent box or the submit button. Its one-line slot is
   reserved up front so nothing below moves under the pointer (a shift
   between mousedown and mouseup made that click miss). min-height = the
   6px gap + one 13.5px x 1.4 line; the field's own bottom margin shrinks
   to keep the spacing close to the other fields. */
.advisor-form .af-field-msgs { margin-bottom: var(--s-2); }

.advisor-form .af-msgs {
    font-size: 13.5px;
    line-height: 1.4;
    min-height: calc(6px + 1.4em);
}

.advisor-form .af-status {
    font-size: 14.5px;
    line-height: 1.5;
    margin: var(--s-3) 0 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    color: var(--af-err);
    background: var(--loss-soft);
}

.advisor-form .af-status:empty {
    margin: 0;
    padding: 0;
}

/* ---------- Submit ---------- */
.advisor-form .af-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--s-4);
    min-width: 220px;
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-on-accent);
    background: var(--accent);
    border: none;
    border-radius: var(--r-md);
    padding: 14px 26px;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard),
                opacity var(--dur-fast) var(--ease-standard);
}

.advisor-form .af-submit:hover { background: var(--accent-press); }

.advisor-form .af-submit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.advisor-form .af-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---------- Success (replaces the form) ---------- */
.advisor-form .af-success {
    padding: var(--s-2) 0;
}

.advisor-form .af-success-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 var(--s-2);
    outline: none;
}

.advisor-form .af-success-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0;
}

/* ---------- Small print under the card ----------
   Carries SEBI's investor-protection text, which must be legible: at
   least 14px and AA contrast. */
.advisor-form .af-fineprint {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-2);
    margin: var(--s-3) var(--s-1) 0;
}

.advisor-form .af-fineprint a {
    color: var(--text);
    text-decoration: underline;
}

/* ---------- Closing line that points back up to the form ---------- */
.article-body .advisor-back {
    padding: var(--s-5) var(--s-6);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
    margin: var(--s-8) 0 0;
    color: var(--text);
}

.article-body .advisor-back a {
    font-weight: 600;
    color: var(--accent-strong);
    text-decoration: underline;
}

/* "General information, not advice" line at the foot of each guide
   (this file loads only on /advisor/ pages, so the rule stays scoped) */
.article-body .article-note {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-2);
    margin-top: var(--s-8);
}

/* ---------- Phone width ---------- */
@media (max-width: 600px) {
    .advisor-form .af-card { padding: var(--s-5) var(--s-4); }
    .advisor-form .af-row { grid-template-columns: 1fr; gap: 0; }
    .advisor-form .af-title { font-size: 20px; }
    .advisor-form .af-submit { width: 100%; min-width: 0; }
    .article-body .advisor-back { padding: var(--s-4); }
}