/* Soldiers' Angels — Treats for Troops 2026 front-end styles.
   Enqueued on the front end by sa-treats-for-troops; the same rules serve the
   form (steps strip, choice sub-copy), the handoff page and the step pages. */

/* Steps strip ---------------------------------------------------------- */
.satft-steps { margin: 0 0 1.5em; }
.satft-steps ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.satft-step { flex: 1 1 0; text-align: center; font-size: .85em; line-height: 1.3; position: relative; padding-top: 2px; }
.satft-step__num { display: inline-block; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; background: #e6e9ee; color: #5c6670; font-weight: 700; margin-bottom: .35em; }
.satft-step__label { display: block; color: #5c6670; }
.satft-step--done .satft-step__num { background: #2e7d32; color: #fff; }
.satft-step--current .satft-step__num { background: #1f3b73; color: #fff; }
.satft-step--current .satft-step__label { color: #1f3b73; font-weight: 700; }
/* The theme paints a navy block behind hovered links in .entry-content and underlines them; neither suits the strip. */
.hentry .entry-content .satft-steps a.satft-step__link, .satft-steps a.satft-step__link,
.hentry .entry-content .satft-steps a.satft-step__link:hover, .satft-steps a.satft-step__link:hover,
.hentry .entry-content .satft-steps a.satft-step__link:focus, .satft-steps a.satft-step__link:focus { display: block; color: inherit; background: none !important; text-decoration: none !important; border: 0; box-shadow: none; padding: 2px 0; }
.satft-steps a.satft-step__link .satft-step__label { text-decoration: none !important; }
.satft-steps a.satft-step__link:hover .satft-step__label, .satft-steps a.satft-step__link:focus-visible .satft-step__label { color: #1f3b73; }
.satft-steps a.satft-step__link:hover .satft-step__num, .satft-steps a.satft-step__link:focus-visible .satft-step__num { box-shadow: 0 0 0 3px #dfe6f3; }
.satft-steps a.satft-step__link:focus-visible { outline: 2px solid #1f3b73; outline-offset: 2px; border-radius: 6px; }
.satft-step__locked { display: block; cursor: not-allowed; }
.satft-step__pages { display: flex; gap: 4px; justify-content: center; margin: .5em auto 0; width: 88px; }
.satft-step__pages i { flex: 1 1 0; height: 6px; border-radius: 3px; background: #c9d0d9; }
.satft-step__pages i.is-done { background: #1f3b73; opacity: .5; }
.satft-step__pages i.is-current { background: #1f3b73; }
.satft-steps__sub { margin: .7em 0 0; font-size: .95em; color: #1f3b73; font-weight: 700; text-align: center; }
.satft-steps__note { margin: .4em 0 0; font-size: .8em; color: #5c6670; text-align: center; }
@media (max-width: 480px) { .satft-step__label { font-size: .9em; } }

/* Branch question sub-copy (form) ----------------------------------------- */
.gform_wrapper .gchoice:has(.satft-choice-sub) label { font-weight: 700; line-height: 1.4; }
.gform_wrapper .satft-choice-sub { display: block; font-weight: 400; font-size: .9em; line-height: 1.4; opacity: .8; margin: .15em 0 .6em; }
/* Radio sits centred on the FIRST line of the label ("Yes…" / "No…"), not on the block — Mat, 15 Sep (clarified). */
.gform_wrapper .gchoice:has(.satft-choice-sub) { display: flex; align-items: flex-start; }
.gform_wrapper .gchoice:has(.satft-choice-sub) input[type=radio] { margin-top: calc(.7em - 6px); margin-bottom: 0; flex: 0 0 auto; } /* 2px lower than the line-box centre: bold caps sit low in the line box, so this is what reads as centred */
.gform_wrapper .gchoice:has(.satft-choice-sub) .satft-choice-sub { margin-bottom: 0; }
.gform_wrapper .gchoice:has(.satft-choice-sub) + .gchoice { margin-top: .6em; }

/* Buttons ----------------------------------------------------------------- */
/* Class contains "button": the theme's .entry-content a:not([class*="button"])
   underline rule then leaves these alone, so no specificity war is needed. */
.satft-button, button.satft-button { display: inline-block; padding: .7em 1.3em; border-radius: 4px; background: #1f3b73; color: #fff; text-decoration: none; font-weight: 700; border: 2px solid #1f3b73; cursor: pointer; font-size: 1em; line-height: 1.2; box-shadow: none; }
.satft-button:hover { background: #17305e; color: #fff; text-decoration: none; }
.satft-button--secondary, button.satft-button--secondary { background: #fff; color: #1f3b73; }
.satft-button--secondary:hover, button.satft-button--secondary:hover { background: #eef2f8; color: #1f3b73; }
.satft-button:focus-visible { outline: 3px solid #f5b400; outline-offset: 2px; }

/* Handoff page ------------------------------------------------------------ */
.satft-handoff { max-width: none; }
.satft-handoff h2 { margin: .2em 0 .4em; }
.satft-handoff__lede { font-size: 1.05em; }
.satft-branch { margin: 1.5em 0; padding: 1.25em 1.5em; border: 1px solid #dfe3e8; border-radius: 6px; background: #fafbfc; }
.satft-branch h3 { margin-top: 0; }
.satft-username { margin-top: 1.25em; padding-top: 1em; border-top: 1px dashed #cfd5dc; }
.satft-draft-flag { display: inline-block; font-size: .7em; letter-spacing: .06em; text-transform: uppercase; background: #fff3cd; color: #7a5a00; padding: .2em .6em; border-radius: 3px; margin-bottom: .5em; }
.satft-checklist { padding-left: 1.2em; }
.satft-checklist li { margin: .4em 0; }
.satft-handoff__choices details { margin: .75em 0; border: 1px solid #dfe3e8; border-radius: 6px; padding: 0 1em; }
.satft-handoff__choices summary { cursor: pointer; font-weight: 700; font-size: 1.05em; padding: .75em 0; }
.satft-handoff__choices .satft-branch { border: 0; background: transparent; padding: 0 0 1em; margin: 0; }
.satft-next { margin-top: 2em; }
.satft-next__list { list-style: none; padding-left: 0; margin-left: 0; }
.satft-next__list li { margin: .5em 0; }
.satft-next__materials { color: #5c6670; font-size: .95em; }
.satft-notice { padding: 1em 1.25em; border-radius: 6px; margin: 0 0 1.25em; }
.satft-notice--ok { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }

/* Step pages -------------------------------------------------------------- */
.satft-profile-box { margin-top: 2.5em; }
.satft-profile-box .satft-button { margin: 0 .5em .5em 0; }
.satft-step-nav { display: flex; flex-wrap: wrap; gap: .75em 2em; justify-content: space-between; margin: 2em 0 0; padding-top: 1em; border-top: 1px solid #dfe3e8; }
.satft-step-nav { align-items: center; }
.satft-step-nav--forward { justify-content: flex-end; }
.satft-step-nav .satft-step-nav__next { margin-left: auto; }
.satft-step-page { max-width: none; }
.satft-step-page ol { padding-left: 1.2em; }
.satft-step-page li { margin: .4em 0; }
.satft-video { margin: 1.5em 0; }
.satft-video iframe, .satft-video video { max-width: 100%; }
.satft-video--scribe iframe { width: 100%; aspect-ratio: 16 / 12; min-height: 480px; border: 0; }
.satft-video--placeholder { border: 2px dashed #cfd5dc; border-radius: 6px; padding: 2.5em 1em; text-align: center; color: #5c6670; background: #fafbfc; }

/* Unlisted materials page (Michelle, 21 Sep). The theme paints navy behind a hovered file link, but each
   label sits in a gold <mark>, so hover read as gold on navy. Hover now matches the button: the whole
   row turns navy and the label turns white. Scoped by the body class Materials_Delivery adds. */
.satft-materials .hentry .entry-content .wp-block-file { transition: background-color .15s ease, border-color .15s ease; }
.satft-materials .hentry .entry-content .wp-block-file > a:not(.wp-block-file__button) { flex: 1 1 auto; text-decoration: none; }
/* White text and the navy row are tied to the SAME states (hover, or keyboard focus), so one can never show
   without the other. Bea, 23 Sep: after clicking a file and pressing Back, the browser restores plain :focus,
   which made the label white on a white row — the file "disappeared". Plain :focus now changes nothing. */
.satft-materials .hentry .entry-content .wp-block-file > a:not(.wp-block-file__button):focus { color: #004e75 !important; background: none !important; }
.satft-materials .hentry .entry-content .wp-block-file > a:focus mark { color: #917124 !important; }
.satft-materials .hentry .entry-content .wp-block-file > a:not(.wp-block-file__button):hover,
.satft-materials .hentry .entry-content .wp-block-file > a:not(.wp-block-file__button):focus-visible { color: #fff !important; }
.satft-materials .hentry .entry-content .wp-block-file > a:hover mark,
.satft-materials .hentry .entry-content .wp-block-file > a:focus-visible mark { color: #fff !important; }
.satft-materials .hentry .entry-content .wp-block-file:has(> a:hover),
.satft-materials .hentry .entry-content .wp-block-file:has(> a:focus-visible) { background-color: #004e75; border-color: #004e75; }
.satft-materials .hentry .entry-content .wp-block-button .wp-block-button__link:hover,
.satft-materials .hentry .entry-content .wp-block-button .wp-block-button__link:focus { background: #004e75; color: #fff !important; }
.satft-materials .hentry .entry-content .wp-block-button .wp-block-button__link:focus-visible { outline: 2px solid #917124; outline-offset: 2px; }

/* Profile confirmation gate (Michelle, 22 Sep) — a declaration, not a check: the site cannot see Salesforce. */
.satft-gate { flex-direction: column; align-items: flex-start; gap: 1em; }
.satft-gate__label { display: flex; gap: .6em; align-items: flex-start; max-width: 60ch; font-weight: 600; cursor: pointer; }
.satft-gate__box { margin: .25em 0 0; flex: none; width: 1.1em; height: 1.1em; }
.satft-gate .satft-gate__next { margin-left: 0; }
.satft-gate .satft-gate__next[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.satft-gate--nudge .satft-gate__label { color: #963338; }
.satft-step-page--gated { max-width: 44em; }