/*
Theme Name: Fidelity Ground
Theme URI: https://fidelitylive.com/
Author: Mark Shenton
Description: The Fidelity Live platform theme. A HYBRID theme — PHP template hierarchy plus theme.json — so every rule lives in a file in git rather than a wp_template_part row in the database. Deliberately holds no colours: fidelity-theme (the plugin) publishes those.
Version: 0.1.3
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: fidelity-ground
*/

/*
 * THIS FILE IS THE THEME HEADER, NOT THE STYLESHEET.
 *
 * WordPress requires style.css to exist and reads the block above to identify
 * the theme. Almost nothing else belongs here.
 *
 * WHERE THE STYLING ACTUALLY LIVES, and why it is not here:
 *
 *   --fl-* / --clin-* / --acad-*  → fidelity-theme (the PLUGIN), which is Layer 0
 *                                   and publishes every colour token on wp_head.
 *   Site-wide corrections          → the Additional CSS box in that same plugin.
 *   Per-surface styling            → each plugin's own stylesheet.
 *
 * So this theme owns LAYOUT AND STRUCTURE and hands colour to the plugin. Two
 * things named "fidelity" and both about appearance is a real risk of confusion,
 * so the split is worth stating plainly: the PLUGIN decides what colour a thing
 * is, the THEME decides where it sits.
 *
 * Rules below are the minimum needed to place the header, footer and skip link.
 * If you are about to add a colour here, it belongs in the plugin.
 */

/* ---- Typography -------------------------------------------------------
 * THE PLATFORM FONT, set once on body so everything inherits it.
 *
 * This exact stack is already declared independently in lksa (.lksa-wrap),
 * overview-page (.ovp-wrap), help-page (.hlp-wrap), institution-admin
 * (.instadm) and privacy-terms (.fl-policy-wrap) — so the plugin surfaces have
 * always looked right, and only the theme chrome around them was wrong.
 *
 * ⚠️ It is therefore the SIXTH copy of a value, which is exactly the problem
 * fidelity-theme was built to end for colour. The proper fix is a --fl-font
 * token published alongside the colour tokens, with all six referencing it.
 * That is a separate change across six plugins; this line makes the header and
 * footer match today.
 * -------------------------------------------------------------------- */

body {
    font-family: var(--fl-font);
}

/* ---- The platform edge inset ------------------------------------------
 * 50px is NOT a fresh choice — it is the inset the pinned strips already use,
 * and the header and footer are being made to agree with them.
 *
 *   launch-credit-strip   padding: 6px 50px 6px 6px   (right inset)
 *   session-status-strip  padding: 8px 16px 8px 50px  (left inset, and its own
 *                                                      comment says it mirrors
 *                                                      the top strip)
 *
 * Both strips are full-bleed and fixed, so their text sits a constant distance
 * from the window edge at any width. The header and footer were instead capped
 * at 1340px and centred, which puts the logo at (viewport − 1340) / 2 — a
 * distance that CHANGES with the window and matches the strips at exactly one
 * width. Full width plus a constant inset is what makes them line up.
 *
 * ⚠️ If this value changes, change it in the two strips too, or the alignment
 * silently drifts apart again.
 * -------------------------------------------------------------------- */

:root {
    --fg-edge: 50px;
}

/* ---- Skip link: visible only when focused ---------------------------- */

.fg-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 0.75rem 1.25rem;
    background: var(--fl-foam);
    color: var(--fl-ink);
    border: 2px solid var(--fl-wave);
    text-decoration: none;
}

.fg-skip-link:focus {
    left: 0;
}

/* ---- Header ---------------------------------------------------------- */

.fg-header {
    padding: 1.5rem var(--fg-edge);
}

.fg-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.fg-header__logo img,
.fg-header__logo .custom-logo {
    display: block;
    height: auto;
    max-width: 260px;
}

.fg-header__title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
}

.fg-header__title a {
    color: var(--fl-wave);
    text-decoration: none;
}

/* ---- Navigation ------------------------------------------------------
 * NO OVERLAY, NO HAMBURGER, ON PURPOSE. The pills WRAP to a second line at
 * narrow widths. A session needs a large screen, but the account surfaces —
 * login, the policy documents, and especially feedback — must stay readable on
 * a phone, so the nav has to work there without JavaScript, a focus trap or an
 * aria-expanded state to maintain.
 * -------------------------------------------------------------------- */

.fg-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fg-nav a {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--fl-wave);
    border-radius: 50px;
    background: transparent;
    color: var(--fl-wave);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fg-nav a:hover,
.fg-nav a:focus {
    background-color: var(--fl-wave);
    color: var(--fl-foam);
}

/* The page you are on, announced to everyone rather than only to screen
   readers — aria-current alone is invisible to sighted users. */
.fg-nav .current-menu-item > a,
.fg-nav [aria-current="page"] {
    background-color: var(--fl-wave);
    color: var(--fl-foam);
}

/* ---- Main ------------------------------------------------------------ */

.fg-main {
    margin-top: 0;
}

/* ---- Footer -----------------------------------------------------------
 * ⚠️ THE HEIGHT IS A FEATURE. DO NOT "TIDY" IT AWAY.
 *
 * This footer is deliberately far taller than its content needs, and the reason
 * is not visible from the markup — which is exactly how it got deleted once
 * already. Twenty Twenty-Five expressed it as a bare 320px spacer block; that
 * read as leftover, was removed as cruft on 2026-08-11, and had to be restored
 * the same day.
 *
 * WHY IT EXISTS. On /v/ the LiveKit embed pops up over the lower part of the
 * page and covers the Clinical Actions panel. There is no way to dismiss it and
 * still be in the session. The footer's height is the SCROLL ROOM that lets a
 * student scroll the popup up the viewport far enough to see the avatar and
 * every clinical action at once. Without it the actions are unreachable while
 * the session is live — the platform's whole point, silently broken.
 *
 * WHY IT IS GLOBAL rather than scoped to /v/. Scoping would mean the theme
 * knowing which page is the viewer, and the theme is deliberately ignorant of
 * that (see page.php). Mark also prefers the taller footer everywhere, so the
 * simple rule is the correct one.
 *
 * THE BOTTOM PADDING IS SEPARATE and solves a different problem: the Session
 * Status Strip is `position: fixed; bottom: 0`, so it floats above the document
 * and would otherwise sit on top of the footer text at the end of a scroll.
 * -------------------------------------------------------------------- */

.fg-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 480px;
    padding: 3rem var(--fg-edge) calc(2rem + var(--fg-strip-clearance));
}

:root {
    /* Session Status Strip: 8px padding top and bottom around ~1.4 line-height
       text. Generous rather than exact, so a wrapped line still clears. */
    --fg-strip-clearance: 56px;
}

/* Full width and space-between, so the three items sit at the left edge, the
   centre and the right edge — the arrangement the old footer had. Capped and
   centred, they clustered in the middle of a wide screen instead. */
.fg-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fg-footer__inner p {
    margin: 0;
}

.fg-footer a {
    color: inherit;
}

/* The footer links are a menu, so the em dash that used to be typed between
   them is drawn between list items instead — it belongs to the separator, not
   to either link's text. */
.fg-nav--footer ul {
    gap: 0.5rem;
}

.fg-nav--footer a {
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-decoration: underline;
}

.fg-nav--footer a:hover,
.fg-nav--footer a:focus {
    background: transparent;
    color: inherit;
    text-decoration: none;
}

.fg-nav--footer li + li::before {
    content: "\2014";
    margin-right: 0.5rem;
}

/* ---- Focus visibility -------------------------------------------------
 * Carried over from the Additional CSS box, where it was the only part not
 * fighting Twenty Twenty-Five. It belongs with the templates that own the
 * focusable chrome.
 * -------------------------------------------------------------------- */

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--fl-wave);
    outline-offset: 2px;
}