/* Telos Family Assessment — scoped styles. Travels with the plugin so the form
   looks right inside any theme (built for Avada on the live site). */

/* Color variables live on :root, not .gform_wrapper.telos-assessment_wrapper:
   the confirmation/results page is Gravity Forms confirmation-message output
   and replaces .gform_wrapper entirely after submission (confirmed via
   computed-style inspection: no .gform_wrapper element exists on the results
   page at all), so a var() scoped to that wrapper silently resolves to
   nothing everywhere the zone colors matter most — .telos-report's
   border/background, .telos-score-highlight, .telos-distress-scale's
   current-item color, .telos-crisis, and .telos-red-override-note. */
:root {
    --telos-accent: #3b82f6;
    --telos-green:  #16a34a;
    --telos-yellow: #ca8a04;
    --telos-red:    #dc2626;
}

/* 44rem was right for stacked full-width answers (round 1-3). The table needs
   room for five answer columns AND a question column wide enough that items
   don't wrap to four lines — at 44rem the question column collapsed to 144px.
   Client: "I'm sure we can make it a little wider and more open. Especially if
   you're only going to use one section per page." */
.gform_wrapper.telos-assessment_wrapper {
    max-width: 62rem;
    margin-inline: auto;
}

.gform_wrapper.telos-assessment_wrapper h2,
.gform_wrapper.telos-assessment_wrapper h3,
.gform_wrapper.telos-assessment_wrapper .gsection_title {
    font-family: "Merriweather", Georgia, serif;
}
.gform_wrapper.telos-assessment_wrapper,
.gform_wrapper.telos-assessment_wrapper .gfield_label,
.gform_wrapper.telos-assessment_wrapper .gchoice label,
.gform_wrapper.telos-assessment_wrapper p,
.gform_wrapper.telos-assessment_wrapper li {
    font-family: "Source Sans 3", -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------------
   QUESTION TABLE (round 4, variant B — client picked it from the 2026-07-15
   mockup: banded rows, no vertical rules, whole row lights up on hover).

   Questions are rows, answers are columns, one section per page — the shape of
   the GAD-7 mockup and Bipolar-2 checklist the client sent as references.

   Two structural facts drive the whole approach:

   1. GF renders each radio field as `fieldset.gfield > legend.gfield_label +
      div.gfield_radio > div.gchoice` (modern markup — see markupVersion in
      generate-form-json.php). A <fieldset> wraps its contents in an anonymous
      content box and renders its <legend> OUTSIDE it, so `display: grid` on the
      fieldset applies to the anonymous box and subgrid cannot resolve through
      it: the legend can never be the row's first cell. Measured — the legend
      landed a full row above its own choices. Hence `display: contents` on the
      fieldset, which is the only thing that puts legend and choices in one grid.

   2. `display: contents` does NOT strip the fieldset's a11y semantics here.
      Checked against the real accessibility tree rather than assumed: the tree
      still reports `group "Seems sad, discouraged…" > radio "Never or not at
      all"`. (Chromium verified. Firefox/Safari still to confirm.)
   --------------------------------------------------------------------------- */

/* The 6-column table: question + five answers.
   GF's own grid ships column-gap:16px / row-gap:40px, which a stacked form wants
   and a table does not: the column gap punches a white stripe through each
   banded row (the band reads as two blocks instead of one row), and the row gap
   adds 40px of air per question across 45 of them. Cells carry their own
   padding, so zero both and let the banding and borders define the rows. */
.gform_wrapper.telos-assessment_wrapper .gform_fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(5, minmax(3.25rem, 6rem));
    align-items: stretch;
    column-gap: 0;
    row-gap: 0;
}
/* Anything that is not a question spans the full width. */
.gform_wrapper.telos-assessment_wrapper .gsection,
.gform_wrapper.telos-assessment_wrapper .gfield--type-page,
.gform_wrapper.telos-assessment_wrapper .gfield--type-html:not(.telos-header-field),
.gform_wrapper.telos-assessment_wrapper .gfield--type-text,
.gform_wrapper.telos-assessment_wrapper .gfield--type-email,
.gform_wrapper.telos-assessment_wrapper .gfield--type-phone,
.gform_wrapper.telos-assessment_wrapper .gfield--type-checkbox,
.gform_wrapper.telos-assessment_wrapper .gfield--type-hidden {
    grid-column: 1 / -1;
}

/* Sticky column headers.
   Sticky lives on GF's .gfield wrapper, never on an inner div: a sticky element
   only travels inside its parent's box, and an inner div's wrapper is exactly
   its own height — it would unstick immediately and scroll away (seen in the
   browser). The wrapper's parent is the field grid, which spans the question
   list, so that is the box we want.
   `top` comes from --telos-sticky-top, measured at runtime by
   progressbar-scroll.js from whatever fixed header the theme puts on screen.
   Avada's is 28px locally and 90px on staging — same theme, different options —
   so a hardcoded offset would be wrong in both places. 0px fallback keeps the
   header usable if the JS never runs. */
.gform_wrapper.telos-assessment_wrapper .gfield.telos-header-field {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    position: sticky;
    top: var(--telos-sticky-top, 0px);
    z-index: 5;
    /* GF ships .gfield_html with padding-right:16px, which would leave the
       headers 16px short of the columns they label. */
    padding: 0;
    background: #fff;
}
.telos-recall {
    grid-column: 1 / -1;
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #4b5563;
}
.telos-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
    border-bottom: 2px solid #d1d5db;
}
.telos-header__cell {
    padding: 0.4rem 0.25rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
    color: #6b7280;
}

/* Each question becomes a row of the parent grid. */
.gform_wrapper.telos-assessment_wrapper .gfield.telos-item {
    display: contents;
}
/* Every wrapper between the fieldset and the .gchoice cells must be box-less,
   or the choices stay trapped inside one grid cell. GF nests them two deep:
   fieldset.telos-item > legend + div.ginput_container > div.gfield_radio >
   div.gchoice. Missing .ginput_container is not hypothetical — it put all five
   answers in column 2, stacked. Both are plain divs, so there are no semantics
   to lose here (unlike the fieldset above, which was checked against the a11y
   tree). */
.gform_wrapper.telos-assessment_wrapper .telos-item .ginput_container,
.gform_wrapper.telos-assessment_wrapper .telos-item .gfield_radio {
    display: contents;
}

/* Question label = column 1.
   !important is load-bearing, not laziness: Avada's compiled fusion-styles ship
   `.gform_wrapper .top_label .gfield_label{margin-bottom:0!important}`, which
   jams every question into its answers (client: "making the questions really
   tiny and pushing into the answer text"). Reproduced on a stock Avada install
   with zero Telos config, so it is core theme CSS, not a stray plugin — and it
   hits Avada's own contact form the same way. Specificity alone cannot beat an
   !important declaration; only another one can. */
.gform_wrapper.telos-assessment_wrapper .telos-item .gfield_label {
    grid-column: 1;
    display: flex;
    align-items: center;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    padding: 0.85rem 1rem 0.85rem 0;
    line-height: 1.4;
    text-wrap: pretty;
}

/* Answer cell. */
.gform_wrapper.telos-assessment_wrapper .telos-item .gchoice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0.5rem 0.25rem;
}

/* The choice word is the radio's ACCESSIBLE NAME — the column header is purely
   visual and a screen reader user never sees it. Clip it, never display:none or
   visibility:hidden, or the radios go back to being announced as bare numbers. */
.gform_wrapper.telos-assessment_wrapper .telos-item .gchoice label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    max-width: none;
}

/* Square inputs: checkbox LOOK, radio BEHAVIOR (client: "these are checkboxes
   because you can only pick one… check would be better, as long as you can only
   pick one"). They stay real radios — the browser enforces one-per-question. */
.gform_wrapper.telos-assessment_wrapper .telos-item .gchoice input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    border: 1.5px solid #d1d5db;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: border-color 0.12s, background-color 0.12s;
}
/* GF's Orbital theme draws the radio's checked indicator as a ::before dot
   (7px, blue) and locks the input's own background-color — on staging even an
   inline `background-color !important` could not override it, so our blue fill
   lost and only Orbital's dot showed through (client: "a dark blue dot… the
   radio button bleeding through"). Kill the ::before, and fill the box with an
   inset box-shadow, which paints over the locked background regardless of the
   cascade. We keep the plain `background` too — it wins on setups where the
   background ISN'T locked (e.g. the local Avada build), so both are belt-and-
   braces. Our checkmark is ::after, so killing ::before is safe. */
.gform_wrapper.telos-assessment_wrapper .telos-item .gchoice input[type="radio"]::before {
    display: none !important;
    content: none !important;
}
.gform_wrapper.telos-assessment_wrapper .telos-item .gchoice input[type="radio"]::after {
    content: "";
    width: 0.68rem;
    height: 0.38rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
    z-index: 1;   /* above the box-shadow fill */
}
.gform_wrapper.telos-assessment_wrapper .telos-item .gchoice input[type="radio"]:checked {
    background: var(--telos-accent);
    box-shadow: inset 0 0 0 20px var(--telos-accent);
    border-color: var(--telos-accent);
}
.gform_wrapper.telos-assessment_wrapper .telos-item .gchoice input[type="radio"]:checked::after {
    opacity: 1;
}
.gform_wrapper.telos-assessment_wrapper .telos-item .gchoice input[type="radio"]:hover {
    border-color: var(--telos-accent);
}
/* appearance:none removes the native focus ring — put one back. The form must be
   operable by keyboard-only users, so this is a requirement, not a nicety. */
.gform_wrapper.telos-assessment_wrapper .telos-item .gchoice input[type="radio"]:focus-visible {
    outline: 2px solid var(--telos-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .gform_wrapper.telos-assessment_wrapper .telos-item .gchoice input[type="radio"] {
        transition: none;
    }
}

/* Variant B: banded rows, no vertical rules. The fieldset is box-less, so
   per-row treatment lands on the cells it contains, not on .telos-item.
   nth-of-type counts fieldsets — GF renders questions as <fieldset> and
   headers/sections as <li>, so this naturally counts questions only. */
.gform_wrapper.telos-assessment_wrapper .telos-item .gfield_label,
.gform_wrapper.telos-assessment_wrapper .telos-item .gchoice {
    border-bottom: 1px solid #f3f4f6;
}
.gform_wrapper.telos-assessment_wrapper .telos-item:nth-of-type(even) .gfield_label,
.gform_wrapper.telos-assessment_wrapper .telos-item:nth-of-type(even) .gchoice {
    background: #f9fafb;
}
/* Row highlight. :focus-within is not decoration — hover is what lets a mouse
   user track one row across five columns, and a keyboard-only user would get
   nothing without this. Same cue, both input methods. */
.gform_wrapper.telos-assessment_wrapper .telos-item:hover .gfield_label,
.gform_wrapper.telos-assessment_wrapper .telos-item:hover .gchoice,
.gform_wrapper.telos-assessment_wrapper .telos-item:focus-within .gfield_label,
.gform_wrapper.telos-assessment_wrapper .telos-item:focus-within .gchoice {
    background: color-mix(in srgb, var(--telos-accent) 7%, white);
}

/* GF scrolls a field into view on validation errors and page changes, and
   browsers scroll a focused element into view — either can park a question
   underneath the sticky header. Keep a header-sized gap above it. */
.gform_wrapper.telos-assessment_wrapper .gfield.telos-item {
    scroll-margin-top: calc(var(--telos-sticky-top, 0px) + 5.5rem);
}

/* ---------------------------------------------------------------------------
   Phones: the table folds into one question at a time. Five columns across 45
   questions does not fit a phone — squeezing it is what produced the cramped
   headings in the client's own reference mockup.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .gform_wrapper.telos-assessment_wrapper .gform_fields {
        display: block;
    }
    /* The column headers go, but the recall window must NOT — it is the only
       thing telling a parent which 7 days they are rating. */
    .gform_wrapper.telos-assessment_wrapper .gfield.telos-header-field {
        display: block;
        position: static;
        margin-bottom: 0.5rem;
    }
    .telos-header { display: none; }
    .telos-recall { margin-bottom: 0; }

    /* The fieldset takes its box back — which also restores the UA's default
       groove border, hence border: 0. */
    .gform_wrapper.telos-assessment_wrapper .gfield.telos-item {
        display: block;
        margin: 0;
        padding: 0.85rem 0;
        border: 0;
        border-bottom: 1px solid #f3f4f6;
    }
    .gform_wrapper.telos-assessment_wrapper .telos-item:nth-of-type(even) .gfield_label,
    .gform_wrapper.telos-assessment_wrapper .telos-item:nth-of-type(even) .gchoice,
    .gform_wrapper.telos-assessment_wrapper .telos-item:hover .gfield_label,
    .gform_wrapper.telos-assessment_wrapper .telos-item:hover .gchoice,
    .gform_wrapper.telos-assessment_wrapper .telos-item:focus-within .gfield_label,
    .gform_wrapper.telos-assessment_wrapper .telos-item:focus-within .gchoice {
        background: none;
    }
    .gform_wrapper.telos-assessment_wrapper .telos-item .gfield_label {
        display: block;
        border: 0;
        padding: 0 0 0.6rem;
        margin-bottom: 0 !important;
        font-size: 1.05rem !important;
    }
    /* flex-direction is explicit because GF's Orbital theme sets column via a
       custom property (the same trick as --gf-local-font-size). Declaring
       `display: flex` alone leaves the axis to GF and the five answers stack
       full-width instead of forming a row. */
    .gform_wrapper.telos-assessment_wrapper .telos-item .gfield_radio {
        display: flex;
        flex-direction: row;
        gap: 0.3rem;
    }
    .gform_wrapper.telos-assessment_wrapper .telos-item .gchoice {
        flex: 1 1 0;
        flex-direction: column;
        gap: 0.35rem;
        min-width: 0;
        padding: 0.4rem 0.1rem;
        border: 0;
    }
    /* Wording returns per-question once the header row is gone. */
    .gform_wrapper.telos-assessment_wrapper .telos-item .gchoice label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        clip: auto;
        overflow: visible;
        white-space: normal;
        font-size: 0.7rem;
        line-height: 1.15;
        text-align: center;
        color: #6b7280;
    }
}

/* Hide "Previous" on the final page. The class is toggled from JS
   (progressbar-scroll.js) onto the last page's previous button — deterministic,
   and avoids depending on a `:not(:has(.gform_next_button))` selector that
   matched but wouldn't reliably apply here.
   !important because GF's Orbital theme styles the button's display and wins on
   specificity/load order otherwise — verified in the browser (without it the
   class applied but the button stayed `display: flex`). */
.gform_wrapper.telos-assessment_wrapper .telos-hide-previous {
    display: none !important;
}

/* Progress bar */
.gform_wrapper.telos-assessment_wrapper .gf_progressbar {
    border-radius: 999px;
    overflow: hidden;
    background: #e5e7eb;
}
.gform_wrapper.telos-assessment_wrapper .gf_progressbar_percentage {
    background: var(--telos-accent);
}

/* Section headings */
.gform_wrapper.telos-assessment_wrapper .gsection .gsection_title {
    font-size: 1.3rem;
}

/* Intro page: tighter type so the instructions read as a quick intro, not a
   wall of text (client: "seems too long and busy... worry it will dissuade
   parents from continuing"). */
.telos-intro h2 { margin-top: 0; }
.telos-intro p,
.telos-intro li { font-size: 0.92rem; line-height: 1.5; }

/* Results panels (confirmations) */
.telos-report {
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 2px solid;
    color: inherit;
}
.telos-report ul { list-style: none; margin: 0; padding: 0; }
.telos-report li { padding-block: 0.25rem; font-size: 1.05rem; }
.telos-report--green  { border-color: var(--telos-green);  background: color-mix(in srgb, var(--telos-green) 8%, white); }
.telos-report--yellow { border-color: var(--telos-yellow); background: color-mix(in srgb, var(--telos-yellow) 10%, white); }
.telos-report--red    { border-color: var(--telos-red);    background: color-mix(in srgb, var(--telos-red) 8%, white); }
.telos-crisis {
    border-left: 4px solid var(--telos-red);
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--telos-red) 6%, white);
}

/* Confirmation-page fonts: the confirmation message (this whole results
   panel, including the interpretation narrative) is Gravity Forms
   confirmation-message output and renders OUTSIDE .gform_wrapper entirely,
   so it can't rely on the .gform_wrapper.telos-assessment_wrapper-scoped
   font rules above — these must stay bare/unscoped like .telos-report. */
.telos-confirmation h2,
.telos-confirmation h3 {
    font-family: "Merriweather", Georgia, serif;
}
.telos-confirmation,
.telos-confirmation p,
.telos-confirmation li {
    font-family: "Source Sans 3", -apple-system, sans-serif;
}

/* Score highlight: the prominent "149 — High Distress" display that replaces
   the old plain "Zone: RED" line. */
.telos-score-highlight {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-block: 0.75rem;
    font-weight: 700;
}
.telos-score-value { font-size: 2rem; }
.telos-score-descriptor { font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.telos-score-highlight--green  { color: var(--telos-green); }
.telos-score-highlight--yellow { color: var(--telos-yellow); }
.telos-score-highlight--red    { color: var(--telos-red); }

/* Distress scale legend under the score highlight */
.telos-distress-scale { list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: 0.95rem; }
.telos-distress-scale__item { padding-block: 0.15rem; opacity: 0.6; }
.telos-distress-scale__item--current { opacity: 1; font-weight: 700; }
.telos-distress-scale__item--green.telos-distress-scale__item--current  { color: var(--telos-green); }
.telos-distress-scale__item--yellow.telos-distress-scale__item--current { color: var(--telos-yellow); }
.telos-distress-scale__item--red.telos-distress-scale__item--current    { color: var(--telos-red); }

/* Red-flag override note — only rendered on the telos-conf-red_override confirmation */
.telos-red-override-note {
    font-size: 0.92rem;
    font-style: italic;
    color: #4b5563;
    border-left: 3px solid var(--telos-red);
    padding-left: 0.75rem;
    margin-block: 1rem;
}

/* Image placeholder — visible marker for a future client-supplied image */
.telos-image-placeholder {
    border: 2px dashed #9ca3af;
    border-radius: 0.5rem;
    padding: 2rem 1rem;
    margin-block: 1.5rem;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

/* Short viewports (landscape phones): a sticky header would eat too much of the
   screen to be worth it — let it scroll away instead of fighting for room. */
@media (max-height: 520px) {
    .gform_wrapper.telos-assessment_wrapper .gfield.telos-header-field { position: static; }
}

/* Phone widths */
@media (max-width: 640px) {
    .gform_wrapper.telos-assessment_wrapper .gform_page_footer .gform_button,
    .gform_wrapper.telos-assessment_wrapper .gform_page_footer .gform_next_button,
    .gform_wrapper.telos-assessment_wrapper .gform_page_footer .gform_previous_button {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}