/*
TITLE: WordPress-only additions to the Direction C styles
Executive Summary: The rules WordPress needs that the static design doesn't: the form states
  (inline errors, sent confirmation, send failure) drawn with the system's own tokens, a plain
  content area for pages outside our set (the fallback template), and fixes for CCEE's plugins.
Last Updated: 2026-10-16
Tags: ccee, secondary-school-redesign, wordpress, sureforms, form-states
*/

/* ---- Form states (proposed library addition: see WP-BUILD-NOTES.md "Form states") ----
   The form is the design's own markup; the sign-up band (.join-form, once opened) takes the same states. These states are drawn by wp-forms.js, or by the theme (forms.php)
   when a visitor without JavaScript is sent back to the page. */

/* Error, per field: plain words under the field in red with a red dot, and the field's edge turns red over a
   faint red ground (Saul #173, 2026-10-18: "using red somehow"). The words still carry the meaning. */
:is(.c-form, .join-form) .f-error { display: block; margin-top: .45rem; font-size: var(--t-small); font-weight: 600; line-height: 1.4; color: var(--error); }
:is(.c-form, .join-form) .f-error::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%; background: var(--error); vertical-align: .1em; }
/* As specific as the field's own rule (.inner .c-form input[type="email"]) and more, so the red edge wins. */
:is(.inner .c-form .f-field, .join-more .f-field) :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--error); background-color: var(--error-ground); box-shadow: inset 0 0 0 1px var(--error); }
:is(.inner .c-form .f-field, .join-more .f-field) :is(input, select, textarea)[aria-invalid="true"]:focus-visible { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error), 0 0 0 4px var(--focus-glow); }

/* The sign-up band's email row: the row itself takes the red edge. */
.join-form .pill-field:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--error); }

/* By the button, when a send is stopped for missing or wrong answers: one short red line saying so (Saul #173).
   For sighted visitors; screen readers hear the summary at the top of the form, which links to each field. */
:is(.c-form, .join-form) .f-alert { display: flex; align-items: center; gap: .5rem; margin: calc(var(--s4) * -0.5) 0 0; font-size: var(--t-small); font-weight: 600; line-height: 1.4; color: var(--error); }
:is(.c-form, .join-form) .f-alert[hidden] { display: none; }
:is(.c-form, .join-form) .f-alert::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--error); }
/* The screen-reader summary at the top of the form (.f-summary.sr) lists each problem as a link, and its links
   are in the Tab order. While one has focus the summary shows, in the red of the line by the button, so focus is
   never invisible (WCAG 2.4.7; QA F1, 2026-10-19). Otherwise it stays hidden. */
:is(.c-form, .join-form) .f-summary:focus-within { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0 0 var(--s3); font-size: var(--t-small); font-weight: 600; line-height: 1.4; color: var(--error); }
:is(.c-form, .join-form) .f-summary:focus-within p { margin: 0; }
:is(.c-form, .join-form) .f-summary:focus-within ul { margin: .35rem 0 0; padding-left: 1.25rem; }
:is(.c-form, .join-form) .f-summary:focus-within a { color: var(--error); }

/* Sent: a calm confirmation in ink, with a lit node, replacing the form. */
:is(.c-form, .join-form).is-sent > :not(.f-done) { display: none; }
:is(.c-form, .join-form) .f-done { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: var(--s3) 0 var(--s3) 7px; font-family: var(--serif); font-weight: 500; font-size: var(--t-mid, 1.4rem); line-height: 1.3; color: var(--ink); outline: 0; }
:is(.c-form, .join-form) .f-done::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--mist), 0 0 0 7px var(--signal-ring); }
.g-white :is(.c-form, .join-form) .f-done::before { box-shadow: 0 0 0 4px var(--white), 0 0 0 7px var(--signal-ring); }

/* Couldn't send (server or network trouble): a plain note under the button, in ink, with an ink node. */
:is(.c-form, .join-form) .f-note { display: flex; align-items: center; gap: .7rem; margin: 0; padding: .9rem 1.1rem; border: var(--line) solid var(--ink); border-radius: 1.2rem; background: var(--white); color: var(--ink); font-weight: 600; }
:is(.c-form, .join-form) .f-note[hidden] { display: none; }
:is(.c-form, .join-form) .f-note::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ink); }

/* The honeypot: a field only bots fill in. Out of sight and out of the layout. */
:is(.c-form, .join-form) .f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* While sending: the button dims and ignores clicks; no spinner. */
:is(.c-form, .join-form).is-sending .f-submit .btn { opacity: .6; pointer-events: none; }

/* ---- Fallback template: WordPress pages outside our set ---- */

.page-wp .wp-content { max-width: 44rem; }
.page-wp .wp-content > * + * { margin-top: var(--s2); }
.page-wp .wp-content h2, .page-wp .wp-content h3 { margin-top: var(--s4); }
.page-wp .wp-content a { color: var(--ink); }
.page-wp .wp-content img { max-width: 100%; height: auto; }
.page-wp .wp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-width: 44rem; }

/* ---- Logged-in editors: WordPress's admin toolbar ---- */

/* The toolbar is fixed at the top (32px, or 46px below 783px wide); stick the header below it.
   Under 601px WordPress lets the toolbar scroll away, so the design's top: 0 stands. */
.admin-bar .site-head { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-head { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar .site-head { top: 0; }
}

/* ---- Plugins CCEE runs ---- */


/* The 404's "Go to the home page" button sits in its intro, as a hero's buttons do (QA, 2026-10-15),
   with the same space above it as Home's: an inner hero's line has no space below it of its own. */
.hero-in .hero-copy .sub + .actions { margin-top: var(--s4); }