/**
 * Patriot University — Theme Stylesheet
 * Global typography, layout, and base element styles.
 * Loads after tokens.pu.css.
 */

/* ── Text size adjust ─────────────────────────────────────────────────────
   iOS Safari inflates text on rotation to landscape unless this is pinned,
   which silently breaks a type scale that was measured in portrait. Both the
   prefixed and unprefixed forms are needed: WebKit still only honours the
   prefixed one. This is NOT `user-scalable=no` by another name — pinch-zoom
   stays available, which WCAG 1.4.4 requires. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ── Self-hosted Inter Variable (woff2 only, no CDN) ─────────────────── */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ── Base Reset ──────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Screen Reader Only (ITI shared convention) ──────────────────────── */

.iti-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Body ────────────────────────────────────────────────────────────── */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.pu-body {
    font-family: var(--pu-font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pu-ink);
    /* The page ground, matched to the House Style homepage. Not parchment —
       see the --pu-ground note in tokens.pu.css. */
    background-color: var(--pu-ground, #EFEDE4);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Skip Link ───────────────────────────────────────────────────────── */

.pu-skip-link {
    position: absolute;
    top: -100%;
    left: var(--iti-space-md);
    z-index: 100001;
    padding: var(--iti-space-sm) var(--iti-space-md);
    background: var(--pu-navy);
    color: #fff;
    border-radius: var(--pu-radius);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-skip-link:focus {
    top: var(--iti-space-sm);
    outline: 3px solid var(--pu-gold);
    outline-offset: 2px;
}

/* ── Typography ──────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pu-font-body);
    font-weight: 600;
    line-height: 1.25;
    color: var(--pu-ink);
}

h1 { font-size: 1.75rem; letter-spacing: -0.015em; margin-bottom: var(--iti-space-lg); }
h2 { font-size: 1.375rem; letter-spacing: -0.01em; margin-bottom: var(--iti-space-md); }
h3 { font-size: 1.125rem; margin-bottom: var(--iti-space-sm); }
h4 { font-size: 1rem; margin-bottom: var(--iti-space-sm); }

p {
    margin-bottom: var(--iti-space-md);
    max-width: var(--iti-max-line-length);
}

a {
    color: var(--pu-navy);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--iti-duration-fast) var(--iti-ease-standard);
}

a:hover { color: var(--pu-navy-dark); }

a:focus-visible {
    outline: 3px solid var(--pu-navy);
    outline-offset: 2px;
    border-radius: 2px;
}

code, pre {
    font-family: var(--pu-font-mono);
    font-size: 0.875rem;
}

code {
    background: var(--pu-gray-100);
    padding: 0.125em 0.375em;
    border-radius: var(--iti-radius-sm);
}

pre {
    background: var(--pu-gray-100);
    padding: var(--iti-space-md);
    border-radius: var(--pu-radius);
    overflow-x: auto;
    border: 1px solid var(--iti-border);
}

pre code {
    background: none;
    padding: 0;
}

blockquote {
    border-left: 3px solid var(--pu-gold);
    padding: var(--iti-space-sm) var(--iti-space-md);
    margin: var(--iti-space-md) 0;
    color: var(--pu-gray-600);
    background: var(--pu-gold-light);
    border-radius: 0 var(--pu-radius) var(--pu-radius) 0;
}

hr {
    border: none;
    border-top: 1px solid var(--iti-border);
    margin: var(--iti-space-xl) 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Layout ──────────────────────────────────────────────────────────── */

.pu-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--iti-surface);
    border-bottom: 1px solid var(--iti-border);
    box-shadow: var(--pu-shadow);
}

.pu-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--iti-space-sm) var(--iti-space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iti-space-md);
    min-height: 56px;
}

/* The mark is letterboxed inside the box the PNG used to occupy, so the
   header stays 95px and `scroll-padding-top` keeps pointing at the right
   place (P1.10). `contain` reproduces the whitespace the PNG had baked in. */
.pu-header__logo-img {
    width: 120px;
    height: 78px;
    object-fit: contain;
    display: block;
}

.pu-header__brand a {
    text-decoration: none;
    color: var(--pu-navy);
    font-weight: 600;
    font-size: 1.125rem;
}

.pu-header__menu-toggle {
    display: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--iti-space-sm);
    min-width: var(--pu-touch);
    min-height: var(--pu-touch);
    color: var(--pu-ink);
}

.pu-header__menu-toggle .pu-icon--close { display: none; }
.pu-header__menu-toggle[aria-expanded="true"] .pu-icon--menu { display: none; }
.pu-header__menu-toggle[aria-expanded="true"] .pu-icon--close { display: block; }

.pu-nav-list {
    list-style: none;
    display: flex;
    gap: var(--iti-space-xs);
    align-items: center;
}

.pu-nav-list li a {
    display: block;
    padding: var(--iti-space-sm) var(--iti-space-md);
    text-decoration: none;
    color: var(--pu-gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--pu-radius);
    transition: background var(--iti-duration-fast) var(--iti-ease-standard),
                color var(--iti-duration-fast) var(--iti-ease-standard);
    min-height: var(--pu-touch);
    display: flex;
    align-items: center;
}

.pu-nav-list li a:hover,
.pu-nav-list li.current-menu-item a {
    background: var(--pu-navy-light);
    color: var(--pu-navy);
}

/* ── Sub-menus (dropdown children) ───────────────────────────────────── */

.pu-nav-list li {
    position: relative;
}

.pu-nav-list .sub-menu {
    list-style: none;
    padding: var(--iti-space-xs) 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--iti-surface);
    border: 1px solid var(--iti-border);
    border-radius: var(--pu-radius);
    box-shadow: var(--pu-shadow-lg);
    /* `display: none` while closed, not merely visibility:hidden.
     *
     * A visibility:hidden element is still LAID OUT, and these dropdowns are
     * absolutely positioned 220px wide under nav items near the right edge, so
     * their boxes extended past the viewport and gave every Surface A page a
     * horizontal scrollbar — 821px at a 768px viewport and 1293px at 1280px.
     * Desktop, not just tablets.
     *
     * Two rejected alternatives, both measured on the live page first:
     *   - right-aligning the last items fixed 768 but not 1280, because which
     *     item overflows depends on how the nav wraps at that width;
     *   - `overflow-x: clip` on body did nothing, because <html> is the scroll
     *     container, so clipping <body> cannot contain it.
     *
     * The animation is preserved via allow-discrete + @starting-style below
     * (Baseline 2024). Where those are unsupported the menu simply appears
     * instantly, which is a fair degradation; the overflow fix works
     * everywhere regardless. */
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--iti-duration-fast) var(--iti-ease-standard),
                visibility var(--iti-duration-fast) var(--iti-ease-standard),
                transform var(--iti-duration-fast) var(--iti-ease-standard),
                display var(--iti-duration-fast) var(--iti-ease-standard);
    transition-behavior: allow-discrete;
    z-index: 100;
}

.pu-nav-list li:hover > .sub-menu,
.pu-nav-list li:focus-within > .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Entry animation for a element that starts at display:none. Without this the
   dropdown would pop in fully formed rather than fading. */
@starting-style {
    .pu-nav-list li:hover > .sub-menu,
    .pu-nav-list li:focus-within > .sub-menu {
        opacity: 0;
        transform: translateY(4px);
    }
}

.pu-nav-list .sub-menu li a {
    padding: var(--iti-space-xs) var(--iti-space-md);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.pu-nav-list .sub-menu li a:hover,
.pu-nav-list .sub-menu li.current-menu-item a {
    background: var(--pu-navy-light);
    color: var(--pu-navy);
}

/* ── Main Content ────────────────────────────────────────────────────── */

.pu-main {
    min-height: 50vh;
}

.pu-content-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--iti-space-xl) var(--iti-space-md);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--iti-space-xl);
}

/* THE RAIL IS CONDITIONAL MARKUP, SO THE COLUMN HAS TO BE TOO. (P1.13)
 *
 * `sidebar.php` returns BEFORE emitting anything when `sidebar-1` has no
 * widgets, and the KB taxonomy template does the same for `sidebar-kb`. The
 * grid did not know that: the 768px band below reserves `1fr 280px` and the
 * 1024px band `1fr 300px` unconditionally, so on every page with no widgets
 * assigned — which today is all of them — the second track was empty.
 *
 * Measured at 834px (iPad portrait) before this rule: `.pu-content-area` was
 * `490px 280px` with exactly ONE child, so 280px of an 834px viewport, 34% of
 * the screen, was reserved for an element that does not exist. The article ran
 * at a 490px measure instead of ~800px. Same on the KB taxonomy, glossary and
 * privacy templates, so scoping this to `--kb-article` would have fixed two
 * pages of five and looked complete.
 *
 * `:has()` states the actual intent — two columns when there IS a rail. It
 * beats the media-query rules below without `!important` because
 * `:not(:has(> .pu-sidebar))` scores (0,2,0) against their (0,1,0), and
 * specificity outranks source order across media queries.
 *
 * A browser without `:has()` support keeps today's two-column behaviour, which
 * is a graceful no-op rather than a broken layout.
 *
 * WHY IT STOPS AT 1023px, WHEN THE EMPTY RAIL DOES NOT.
 *
 * The same phantom column exists on desktop: at 1280px the KB taxonomy,
 * privacy, terms, glossary and search templates all reserve `836px 300px` for
 * one child. Unscoped, this rule fixes those too — and reflows the taxonomy
 * card grid from 836px to 1168px, a visible desktop change on five templates.
 * KB articles and profiles are unaffected either way; they already carry the
 * `--kb-article` override at 1024.
 *
 * This workstream's hard constraint is zero desktop regression, so the fix is
 * deliberately scoped to the widths that had the defect anyone reported. The
 * desktop rail is real and is recorded as follow-up work, not fixed by
 * accident on the way past.
 */
.pu-content-area:not(:has(> .pu-sidebar)) {
    grid-template-columns: 1fr;
}

.pu-content-area--front {
    display: block;
}

.pu-content-area--kb-article {
    max-width: 100%;
    padding: var(--iti-space-md) var(--iti-space-md);
    grid-template-columns: 1fr;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.pu-hero {
    background: var(--pu-navy);
    color: #fff;
    padding: var(--iti-space-3xl) var(--iti-space-md);
    text-align: center;
}

.pu-hero__inner {
    max-width: 700px;
    margin: 0 auto;
}

.pu-hero__title {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #fff;
    margin-bottom: var(--iti-space-md);
}

.pu-hero__desc {
    font-size: 1.125rem;
    opacity: 0.9;
    margin-bottom: var(--iti-space-lg);
    max-width: none;
}

.pu-hero__search {
    max-width: 500px;
    margin: 0 auto;
}

.pu-hero .pu-search-form__input {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.pu-hero .pu-search-form__input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Section ─────────────────────────────────────────────────────────── */

.pu-section {
    margin-bottom: var(--iti-space-3xl);
}

.pu-section__title {
    display: flex;
    align-items: center;
    gap: var(--iti-space-sm);
    font-size: 1.375rem;
    margin-bottom: var(--iti-space-lg);
    padding-bottom: var(--iti-space-sm);
    border-bottom: 2px solid var(--pu-navy);
}

.pu-section__title .pu-icon {
    width: 24px;
    height: 24px;
    color: var(--pu-navy);
}

.pu-section__subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: var(--iti-space-lg);
    margin-bottom: var(--iti-space-md);
    color: var(--pu-gray-600);
}

/* ── Article ─────────────────────────────────────────────────────────── */

.pu-article {
    max-width: 800px;
}

.pu-article__header {
    margin-bottom: var(--iti-space-xl);
    padding-bottom: var(--iti-space-md);
    border-bottom: 1px solid var(--iti-border);
}

.pu-kb-article .pu-article__header {
    margin-bottom: var(--iti-space-sm);
    padding-bottom: var(--iti-space-sm);
    border-bottom: none;
}

.pu-article__meta {
    display: flex;
    gap: var(--iti-space-md);
    color: var(--pu-gray-600);
    font-size: 0.875rem;
    margin-top: var(--iti-space-sm);
}

/* ── Prose (long-form content) ───────────────────────────────────────── */

.pu-prose {
    max-width: var(--iti-max-line-length);
    line-height: 1.7;
}

.pu-prose h2 {
    margin-top: var(--iti-space-2xl);
}

.pu-prose h3 {
    margin-top: var(--iti-space-xl);
}

.pu-prose ul,
.pu-prose ol {
    margin: 0 0 var(--iti-space-md) var(--iti-space-lg);
}

.pu-prose li {
    margin-bottom: var(--iti-space-xs);
}

.pu-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--iti-space-md) 0;
    font-size: 0.9375rem;
}

.pu-prose th {
    text-align: left;
    vertical-align: top;
    padding: var(--iti-space-sm) var(--iti-space-md);
    background: var(--iti-surface-2);
    font-weight: 600;
    border: 1px solid var(--iti-border-strong);
}

.pu-prose td {
    text-align: left;
    vertical-align: top;
    padding: var(--iti-space-sm) var(--iti-space-md);
    border: 1px solid var(--iti-border-strong);
}

.pu-prose tr:hover {
    background: var(--pu-navy-light);
}

/* ── Archive Header ──────────────────────────────────────────────────── */

.pu-archive-header {
    margin-bottom: var(--iti-space-xl);
    padding-bottom: var(--iti-space-md);
    border-bottom: 1px solid var(--iti-border);
}

.pu-archive-header__desc {
    color: var(--pu-gray-600);
    margin-top: var(--iti-space-sm);
}

/* ── Empty State ─────────────────────────────────────────────────────── */

.pu-empty-state {
    text-align: center;
    padding: var(--iti-space-3xl) var(--iti-space-md);
}

/* `min(100%, 300px)`, not `300px`.
 *
 * A bare `max-width: 300px` outranks the global `img { max-width: 100% }` above
 * — same property, higher specificity — so the image stopped being responsive
 * and became 300px wide always. Its container carries 32px of side padding, so
 * it starts at x=32 and ends at 332: measured 12px of horizontal overflow at a
 * 320px viewport, on every viewport narrower than 332px.
 *
 * That is not a rare page. The empty state is used by 404.php, search.php,
 * page-search.php, index.php, archive.php and the KB taxonomy template — so it
 * was every 404 and every no-results search on a 320px phone.
 *
 * §13.3's first checklist item is exactly this measurement
 * (`scrollWidth === clientWidth` at 320px) and it had never been ticked, which
 * is how a fixed px cap on our own component outlived the whole P1 overflow
 * sweep. `min()` keeps the 300px design cap where there is room for it.
 */
.pu-empty-state__image {
    max-width: min(100%, 300px);
    margin: 0 auto var(--iti-space-lg);
}

.pu-empty-state__title {
    margin-bottom: var(--iti-space-sm);
}

.pu-empty-state__desc {
    color: var(--pu-gray-600);
    margin-bottom: var(--iti-space-lg);
    max-width: none;
}

.pu-empty-state__actions {
    margin-bottom: var(--iti-space-lg);
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.pu-footer {
    background: var(--pu-navy-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: var(--iti-space-2xl) var(--iti-space-md);
    margin-top: var(--iti-space-3xl);
}

.pu-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.pu-footer-nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--iti-space-md);
    margin-bottom: var(--iti-space-lg);
}

.pu-footer-nav-list a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.875rem;
}

.pu-footer-nav-list a:hover {
    color: #fff;
}

.pu-footer-legal-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--iti-space-xs) var(--iti-space-md);
    padding: 0;
    margin-bottom: var(--iti-space-md);
}

.pu-footer-legal-list a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.75rem;
}

.pu-footer-legal-list a:hover {
    color: #fff;
    text-decoration: underline;
}

.pu-footer__meta {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: var(--iti-space-md);
}

.pu-footer__notice {
    font-size: 0.8125rem;
    opacity: 0.7;
    margin-bottom: var(--iti-space-xs);
    max-width: none;
}

.pu-footer__copyright {
    font-size: 0.75rem;
    opacity: 0.5;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.pu-sidebar {
    font-size: 0.875rem;
}

.pu-widget {
    margin-bottom: var(--iti-space-xl);
}

.pu-widget__title {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pu-gray-600);
    margin-bottom: var(--iti-space-sm);
    padding-bottom: var(--iti-space-xs);
    border-bottom: 1px solid var(--iti-border);
}

/* ── Pagination ──────────────────────────────────────────────────────── */

.nav-links {
    display: flex;
    gap: var(--iti-space-xs);
    justify-content: center;
    margin-top: var(--iti-space-xl);
}

.nav-links a,
.nav-links span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pu-touch);
    min-height: var(--pu-touch);
    padding: var(--iti-space-sm) var(--iti-space-md);
    border-radius: var(--pu-radius);
    font-size: 0.875rem;
    text-decoration: none;
}

.nav-links a {
    background: var(--iti-surface);
    border: 1px solid var(--iti-border);
    color: var(--pu-navy);
}

.nav-links a:hover {
    background: var(--pu-navy-light);
}

.nav-links .current {
    background: var(--pu-navy);
    color: #fff;
    border: 1px solid var(--pu-navy);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .pu-content-area {
        grid-template-columns: 1fr 280px;
    }
}

@media (max-width: 767px) {
    .pu-header__menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pu-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--iti-surface);
        border-bottom: 1px solid var(--iti-border);
        box-shadow: var(--pu-shadow-lg);
        padding: var(--iti-space-md);

        /* THE DRAWER MUST NOT BE TALLER THAN WHAT IS LEFT OF THE VIEWPORT.
         *
         * It had neither a height constraint nor a scroll container, so a menu
         * longer than the space below the header was simply cut off with no way
         * to reach the rest. Measured on a live KB article: 31px lost at
         * 390x844, and 208px at SE-class 390x667 — where the menu is genuinely
         * unusable. This is §9.2's missing "real off-canvas geometry", in its
         * cheapest honest form.
         *
         * `100%` here is the containing block's height — the header this drawer
         * hangs from — so the expression reads "the viewport, less whatever
         * header I am below" and needs no token and no JS. NOTE it is the
         * ancestor's PADDING box, so a header with a top border needs that
         * border subtracted too; House Style does exactly that, in
         * house-style.css.
         *
         * `overscroll-behavior: contain` stops a scroll that reaches the end of
         * the menu from chaining to the page behind it.
         *
         * Safe against the submenu rule below: it makes second-level menus
         * `position: static` on phones, so nothing inside this new scroll
         * container is absolutely positioned and nothing gets clipped by it.
         *
         * `overflow-x` BECOMES `auto` HERE, AND THAT IS DELIBERATE. A computed
         * `visible` on one axis is not permitted beside a non-`visible` other
         * axis, so the used value becomes `auto` — 88 cells of
         * `check_computed_styles.py` report it, all of them at 320–767 and none
         * above, which is how we know the change cannot reach desktop.
         *
         * `hidden` was the alternative and is worse here: if anything inside the
         * drawer is ever wider than the drawer, `auto` leaves it reachable and
         * shows a scrollbar that says so, while `hidden` clips it silently.
         * Horizontal overflow is a recurring defect class in this theme, and the
         * house preference is a visible defect over an invisible one.
         */
        max-height: calc(100dvh - 100%);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .pu-header__nav.is-open {
        display: block;
    }

    .pu-nav-list {
        flex-direction: column;
        align-items: stretch;
    }

    .pu-nav-list .sub-menu {
        /* The drawer shows submenus inline. This override never set `display`,
           so the base rule's new `display: none` would have hidden every
           second-level item on phones — a functional regression, not a
           cosmetic one. */
        display: block;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding-left: var(--iti-space-md);
        min-width: 0;
        background: transparent;
    }

    .pu-hero__title {
        font-size: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .pu-content-area {
        grid-template-columns: 1fr 300px;
    }
    .pu-content-area--kb-article {
        max-width: 100%;
        grid-template-columns: 1fr;
    }
}

/* ── Standalone HTML Legal Pages ─────────────────────────────────────── */
/* Cookie Policy, Privacy Policy, Terms of Use, and DMCA were authored as
   standalone HTML documents. When pasted into WP, wpautop wraps the
   <head> contents in <p> tags and injects </p><p> inside <style> blocks,
   breaking all inline CSS. The theme supplies all structural & colour
   rules itself. Three class-name variants exist across the four pages:
     Terms of Use   → legal-layout   / legal-toc   / legal-section   / legal-footer
     Privacy Policy → privacy-layout / privacy-toc / privacy-section / privacy-footer
     Cookie & DMCA  → policy-layout  / .toc        / policy-section  / legal-footer  */

/* — wpautop garbage suppression ---------------------------------------- */

.pu-article:has(.page-header) .pu-article__header {
    display: none;
}

.pu-article__body:has(> .page-header) > p:first-child {
    display: none;
}

.pu-article__body:has(> .page-header) > style + p {
    display: none;
}

.pu-article__body:has(> .page-header) > style + p + p {
    display: none;
}

.pu-article__body > .legal-footer + p,
.pu-article__body > .privacy-footer + p {
    display: none;
}

.legal-layout > p:not([class]),
.privacy-layout > p:not([class]),
.policy-layout > p:not([class]) {
    display: none;
}

/* — Article width override (let internal grids breathe) ---------------- */

.pu-article:has(.legal-layout) .pu-article__body,
.pu-article:has(.privacy-layout) .pu-article__body,
.pu-article:has(.policy-layout) .pu-article__body {
    max-width: none;
}

.pu-article:has(.legal-layout),
.pu-article:has(.privacy-layout),
.pu-article:has(.policy-layout) {
    max-width: none;
}

/* — Page header hero --------------------------------------------------- */

.pu-article__body > .page-header {
    background: var(--pu-navy-dark, #0f2447);
    color: #fff;
    padding: 56px 24px 48px;
    border-bottom: 4px solid var(--pu-gold, #B8860B);
}

.pu-article__body > .page-header .page-header-inner {
    max-width: 760px;
    margin: 0 auto;
}

.pu-article__body > .page-header .site-label {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 12px;
    display: block;
}

.pu-article__body > .page-header .page-title {
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 12px;
}

.pu-article__body > .page-header .page-meta {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.pu-article__body > .page-header .page-meta a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

/* — Two-column grid layout (Terms of Use, Privacy Policy) -------------- */

.pu-article__body > .legal-layout,
.pu-article__body > .privacy-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 80px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}

/* THE SIDEBAR LAYOUT IS THE ENHANCEMENT.
   Mobile-first (spec §4.1), inverted from `@media (max-width: 768px)`. The base
   above is now what a phone gets — one column — and this restores the 220px
   sidebar when there is room.

   768.02px, not 768: `max-width: 768px` INCLUDES 768, so its complement starts
   just above it. px, not em: a px query does not scale with the user's root
   font size and an em one does, so converting would change behaviour under font
   zoom (the em scale is the breakpoint-consolidation change, spec §5). */
@media (min-width: 768.02px) {
    .pu-article__body > .legal-layout,
    .pu-article__body > .privacy-layout {
        grid-template-columns: 220px 1fr;
        gap: 48px;
    }
}

/* GRID ITEMS NEED `min-width: 0` OR THEY REFUSE TO SHRINK. (P1.13)
 *
 * The same rule `.pu-content-area > *` already carries, one level down. A grid
 * item's default `min-width: auto` is its content's MIN-CONTENT width, so the
 * `1fr` track above sizes to the widest thing inside it rather than to the
 * space available. On the privacy page that is a data table whose min-content
 * is 603px: the track refused to go below it, and 220 + 48 + 603 + padding
 * overflowed the column.
 *
 * Found by the overflow invariant when P1.13 widened the content area at 834px
 * — the layout then had room to be two columns where it previously was not, and
 * the latent defect surfaced as 77px of horizontal scroll. `.data-table-wrapper`
 * has had `overflow-x: auto` all along; it could never act on it, because an
 * ancestor that cannot shrink never gives it the chance.
 *
 * It also fixes a PRE-EXISTING 323px horizontal overflow on the privacy page at
 * 320px, present with the CSS live today and unrelated to P1.13.
 *
 * WHY IT IS SCOPED BELOW 1024px, LIKE THE RULE ABOVE.
 *
 * On desktop this layout is ALREADY overflowing and has been all along: at
 * 1024px `.privacy-layout` computes `220px 603px` inside a 612px container. It
 * never showed as page-level scroll because the empty 300px rail beside it
 * absorbed the spill — one defect concealing another. Correcting it there is
 * right, but it renders the content column NARROWER than it appears today
 * (603px -> 344px), which is a visible desktop change on the privacy and terms
 * pages. Desktop is out of scope by decision, so both belong in the same
 * follow-up that fixes the desktop rail.
 */
.pu-article__body > .legal-layout > *,
.pu-article__body > .privacy-layout > * {
    min-width: 0;
}

/* — Single-column layout (Cookie Policy, DMCA) ------------------------- */

.pu-article__body > .policy-layout {
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

/* — Sidebar TOC (legal-toc, privacy-toc) ------------------------------- */

.pu-article__body .legal-toc,
.pu-article__body .privacy-toc {
    background: var(--iti-surface, #fff);
    border: 1px solid var(--iti-border, #d4d0c8);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 32px;
    position: static;
    top: 24px;
}

/* AND ITS ENHANCEMENT SITS HERE, immediately after the base it modifies —
   not beside the grid rule above.

   A media query adds NO specificity. These selectors are identical to the
   base's, so the winner is decided by SOURCE ORDER alone, and the first
   arrangement of this change put both enhancements at the old grid query's
   position — above this rule. The grid half worked because its base precedes
   it; this half was simply dead, and the TOC stayed static at every width.
   Measured: `page-terms@1024 .legal-toc position 'sticky' -> 'static'`.

   `margin-bottom: 0` and `position: sticky` are stated explicitly: the base now
   carries the stacked values, so "unset" has to be said rather than inherited
   from a desktop-first default. */
@media (min-width: 768.02px) {
    .pu-article__body .legal-toc,
    .pu-article__body .privacy-toc {
        margin-bottom: 0;
        position: sticky;
        /* Clear the 95px sticky header (see apparatus.css). */
        top: calc(var(--pu-header-h) + var(--iti-space-sm));
    }
}



/* — Inline TOC (Cookie Policy, DMCA — .toc class) ---------------------- */

.pu-article__body .toc {
    background: var(--iti-surface, #fff);
    border: 1px solid var(--iti-border, #d4d0c8);
    border-radius: 8px;
    padding: 20px 28px;
    margin-bottom: 40px;
}

.pu-article__body .toc-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--pu-navy, #1a3a6b);
    margin-bottom: 12px;
}

.pu-article__body .toc ol {
    padding-left: 20px;
    margin: 0;
}

.pu-article__body .toc li {
    font-size: 0.875rem;
    line-height: 2;
}

.pu-article__body .toc a {
    color: var(--pu-navy, #1a3a6b);
    text-decoration: none;
}

.pu-article__body .toc a:hover {
    text-decoration: underline;
}

/* — TOC headings and lists (shared between sidebar variants) ----------- */

.pu-article__body .toc-heading {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pu-subtle, #6b7280);
    margin-bottom: 12px;
}

.pu-article__body .toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 0;
}

.pu-article__body .toc-list a {
    font-size: 0.8125rem;
    color: var(--pu-ink, #1A1A2E);
    text-decoration: none;
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}

.pu-article__body .toc-list a:hover,
.pu-article__body .toc-list a:focus {
    background: var(--pu-navy-light, #e8eef8);
    color: var(--pu-navy, #1a3a6b);
    outline: none;
}

/* — Content sections (all three variants) ------------------------------ */

.pu-article__body .legal-section,
.pu-article__body .privacy-section,
.pu-article__body .policy-section {
    margin-bottom: 48px;
    scroll-margin-top: 24px;
}

.pu-article__body .legal-section h2,
.pu-article__body .privacy-section h2,
.pu-article__body .policy-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--pu-navy, #1a3a6b);
    border-bottom: 2px solid var(--iti-border, #d4d0c8);
    padding-bottom: 10px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.pu-article__body .section-number {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--pu-subtle, #6b7280);
    margin-right: 8px;
}

.pu-article__body .legal-section h3,
.pu-article__body .privacy-section h3,
.pu-article__body .policy-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pu-ink, #1A1A2E);
    margin: 24px 0 12px;
}

.pu-article__body .legal-section p,
.pu-article__body .privacy-section p,
.pu-article__body .policy-section p {
    font-size: 1rem;
    margin-bottom: 16px;
    line-height: 1.75;
}

.pu-article__body .legal-section ul,
.pu-article__body .legal-section ol,
.pu-article__body .privacy-section ul,
.pu-article__body .privacy-section ol,
.pu-article__body .policy-section ul,
.pu-article__body .policy-section ol {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.pu-article__body .legal-section li,
.pu-article__body .privacy-section li,
.pu-article__body .policy-section li {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 6px;
}

.pu-article__body .legal-section a,
.pu-article__body .privacy-section a,
.pu-article__body .policy-section a {
    color: var(--pu-navy, #1a3a6b);
    text-decoration: underline;
}

.pu-article__body .legal-section a:hover,
.pu-article__body .privacy-section a:hover,
.pu-article__body .policy-section a:hover {
    color: var(--pu-navy-dark, #0f2447);
}

/* — Summary / notice boxes --------------------------------------------- */

.pu-article__body .summary-box,
.pu-article__body .privacy-summary-box {
    background: var(--pu-navy-light, #e8eef8);
    border-left: 4px solid var(--pu-navy, #1a3a6b);
    border-radius: 0 8px 8px 0;
    padding: 20px 24px;
    margin-bottom: 40px;
}

.pu-article__body .summary-box h2,
.pu-article__body .privacy-summary-box h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--pu-navy, #1a3a6b);
    margin-bottom: 8px;
}

.pu-article__body .summary-box p,
.pu-article__body .privacy-summary-box p {
    font-size: 1rem;
    color: var(--pu-ink, #1A1A2E);
    line-height: 1.6;
}

.pu-article__body .summary-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.pu-article__body .notice-box {
    background: var(--pu-navy-light, #e8eef8);
    border-left: 4px solid var(--pu-navy, #1a3a6b);
    border-radius: 0 8px 8px 0;
    padding: 20px 24px;
    margin-bottom: 40px;
}

/* — Data tables (Cookie Policy) ---------------------------------------- */

.pu-article__body .data-table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
}

.pu-article__body .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pu-article__body .data-table th {
    background: var(--pu-navy, #1a3a6b);
    color: #fff;
    font-weight: 600;
    text-align: left;
    vertical-align: top;
    padding: 10px 14px;
    border: 1px solid var(--iti-border-strong, #94a3b8);
}

.pu-article__body .data-table td {
    text-align: left;
    vertical-align: top;
    padding: 10px 14px;
    border: 1px solid var(--iti-border-strong, #94a3b8);
}

.pu-article__body .data-table tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.02);
}

.pu-article__body .data-table code {
    font-size: 0.8125rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
}

/* — Alert boxes -------------------------------------------------------- */

.pu-article__body .alert-box {
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.pu-article__body .alert-box-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    line-height: 1.6;
}

.pu-article__body .alert-box-body p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.pu-article__body .alert-green {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #15803d;
}

.pu-article__body .alert-blue {
    background: var(--pu-navy-light, #e8eef8);
    border: 1px solid #93c5fd;
    color: var(--pu-navy-dark, #0f2447);
}

.pu-article__body .alert-gold {
    background: #fef9c3;
    border: 1px solid #fde047;
    color: #854d0e;
}

/* — Contact card ------------------------------------------------------- */

.pu-article__body .contact-card {
    background: var(--iti-surface, #fff);
    border: 1px solid var(--iti-border, #d4d0c8);
    border-radius: 8px;
    padding: 24px;
    margin-top: 16px;
}

.pu-article__body .contact-card dt {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pu-subtle, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 12px;
    margin-bottom: 4px;
}

.pu-article__body .contact-card dt:first-child {
    margin-top: 0;
}

.pu-article__body .contact-card dd {
    font-size: 1rem;
}

.pu-article__body .contact-card a {
    color: var(--pu-navy, #1a3a6b);
}

/* — Page footer (all variants) ----------------------------------------- */

.pu-article__body > .legal-footer,
.pu-article__body > .privacy-footer {
    background: var(--pu-navy-dark, #0f2447);
    color: rgba(255, 255, 255, 0.7);
    padding: 32px 24px;
    text-align: center;
    font-size: 0.875rem;
    border-top: 4px solid var(--pu-gold, #B8860B);
}

.pu-article__body > .legal-footer a,
.pu-article__body > .privacy-footer a {
    color: rgba(255, 255, 255, 0.85);
}

/* — Print -------------------------------------------------------------- */

@media print {
    .pu-article__body .legal-toc,
    .pu-article__body .privacy-toc,
    .pu-article__body .toc,
    .pu-article__body .page-header .site-label {
        display: none;
    }
    .pu-article__body .legal-layout,
    .pu-article__body .privacy-layout {
        grid-template-columns: 1fr;
    }
    .pu-article__body > .page-header {
        background: none;
        color: var(--pu-ink, #1A1A2E);
        border-bottom: 2px solid var(--pu-navy, #1a3a6b);
    }
    .pu-article__body > .page-header .page-title {
        color: var(--pu-ink, #1A1A2E);
    }
}

/* ── Reduced Motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ── Responsive containment ───────────────────────────────────────────────
 *
 * Added 2026-08-13. Echo KB pages required horizontal scrolling on every
 * phone: a KB article measured 496px inside a 320px viewport and a profile
 * 544px — 55% and 70% wider than the screen. Measured on production, not
 * inferred.
 *
 * Three causes, all of which the House Style surface had already hit:
 *
 *  1. `.pu-content-area` is a grid (above), so `.pu-content-area__main` is a
 *     grid item and grid items default to `min-width: auto` — they refuse to
 *     shrink below their content's min-content width. This is the whole
 *     defect for articles and profiles.
 *  2. Nothing in this theme ever set `overflow-wrap`, so a long title, URL or
 *     identifier had no break opportunity and widened the column.
 *  3. Wide tables had no scroll box, so they pushed the page instead.
 *
 * Verified by injecting these exact rules into the live pages before shipping:
 * article 496 -> 320, profile 544 -> 320, taxonomy unchanged at 324 (a 4px
 * overflow from Echo KB's own `.epkbfa-spinner`, not ours), home and Pages
 * unchanged. No regressions.
 *
 * NOT fixed here, deliberately: a ~821px overflow at 768px on every surface,
 * caused by absolutely-positioned depth-2 nav submenus that are laid out while
 * `visibility: hidden`. Every remedy is a behaviour change to the dropdown —
 * clipping it, or repositioning it near the viewport edge — so it belongs in a
 * change that decides that, not in an overflow patch.
 */

.pu-content-area > * { min-width: 0; }

.pu-prose,
.pu-article__body,
.pu-hero-band__title,
.pu-breadcrumb { overflow-wrap: break-word; }

/* `display: block` is what makes a table scrollable; row and cell children
   keep their own display types and the table renders normally inside it. */
.pu-prose table,
.pu-article__body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}