/* ============================================================================
 * La2etlak — PUBLIC SHELL, as rendered by the locked Homepage board
 * ============================================================================
 * Ported by HOMEPAGE-PILOT-PORT-001.
 *
 * Authority composition (docs/design/IMPLEMENTATION_LEDGER.md §3.2):
 *   structure + token values + drawer geometry
 *       → docs/design/locked/2026-08-11/phase-4a-public-shell.html
 *   rendered light / RTL / mobile header + footer
 *       → docs/design/locked/2026-08-11/phase-3-homepage-redesign-v3.html
 *   breakpoint activation widths (NEVER a specimen frame width)
 *       → FINAL_DESIGN_FOUNDATION.md §7  (ledger §10)
 *
 * Loaded only by pages carrying `.la2-pg` on <body>. Every other page keeps
 * components/navbar.blade.php + components/footer.blade.php and
 * public/css/la2etlak.css exactly as they were: the Public shell family
 * (ledger row 2) is not globally converted by this task.
 * ========================================================================== */


/* ============================================================================
 * 1. HEADER — true 3-zone centred grid   (proof lines 100-121)
 * ========================================================================== */
.la2-pg .hd {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    position: relative;
    z-index: 5;
}

.la2-pg .hdi {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    height: 80px;
    display: grid;
    /* SHELL + FALLBACK POLISH 001 §A — OPTICAL CENTRING.
       The two side clusters are permanently unequal (brand ~103px against
       ~394px guest / ~439px auth), so an absolutely shell-centred nav can only
       ever sit `utilWidth − brandWidth` closer to the utilities than to the
       brand — the residual reported in ledger §17.4 and only narrowed by §18.
       The owner has now chosen optical balance over absolute centre: the two
       side tracks are exactly their own content, the middle track takes ALL the
       remaining space, and `.mainnav` is centred inside THAT. The whitespace
       either side of the nav is then equal by construction at every width where
       the header fits.

       The overflow floor from OWNER REVISION 001 §1A is unchanged: every track
       still bottoms out at its own max-content, so a cluster can never be sized
       below its contents — past that point the nav is displaced, never
       overlapped. No negative margin, no transform, no absolute positioning,
       no per-viewport nudge; the gap is the shell's own 20px. */
    grid-template-columns:
        max-content
        minmax(max-content, 1fr)
        max-content;
    align-items: center;
    gap: 20px;
}

.la2-pg .brand {
    justify-self: start;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-inline-end: 24px;
}
/* HEADER BALANCE 001 — BRAND PRESENCE.
   The locked board draws the lockup at 38px, where it renders only 58px wide
   (the mark is a 1.526:1 crop, not a wide wordmark) against a utility cluster
   of ~410px guest / ~451px auth. With `.mainnav` on its structural centre the
   two side tracks are equal by construction, so that mass difference is exactly
   what makes the centred nav read as pushed right (ledger §17.4 residual). The
   owner-approved lever is the brand's own presence: 38 → 52px, which is 79px
   wide at the mark's REAL ratio — no stretch, no distortion, no second asset,
   and 14px of clearance top and bottom inside the unchanged 80px header. */
.la2-pg .brand img { height: 52px; width: auto; }
.la2-pg .brand a { display: inline-flex; align-items: center; min-height: 48px; }

.la2-pg .mainnav {
    /* Centred inside the middle track — i.e. inside the available span between
       the two clusters, not on the shell centre. See `.hdi` §A. */
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
}
.la2-pg .mainnav a,
.la2-pg .mainnav .drop {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--body);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
}
.la2-pg .mainnav a:hover,
.la2-pg .mainnav .drop:hover {
    background: var(--band);
    color: var(--act);
    text-decoration: none;
}
/* Current item — the bordered pill, NOT an inset underline. `phase-4a-public-shell.html`
   is the dedicated Public Shell family and therefore owns its own shared component;
   `phase-3-homepage-redesign-v3.html`'s inset underline is an artifact-level divergence
   superseded for this shared region (ledger §25, SHARED-COMPONENT-AUTHORITY-002). 4A
   line 87 and 5A line 93 declare this identically, character for character.

   The 13px padding is the board's own: with border-box the 1px border adds back the
   14px the base rule sets, so the current item does not reflow its neighbours. */
.la2-pg .mainnav a[aria-current],
.la2-pg .mainnav .drop[aria-current] {
    color: var(--head);
    font-weight: 600;
    border: 1px solid var(--curEdge);
    background: var(--curFaint);
    padding: 0 13px;
}
.la2-pg .mainnav .drop { gap: 6px; }
.la2-pg .mainnav .dropdown { display: inline-flex; align-items: center; }

/* Theme toggle — one control, two glyphs. ID specificity (1,0,0) makes the
   locked design's visibility rule deterministic against la2etlak.css. */
.la2-pg #theme-toggle .icon-sun  { display: none; }
.la2-pg #theme-toggle .icon-moon { display: inline-block; }
[data-bs-theme="dark"] .la2-pg #theme-toggle .icon-sun  { display: inline-block; }
[data-bs-theme="dark"] .la2-pg #theme-toggle .icon-moon { display: none; }
.la2-pg [data-theme-toggle] .icon-sun  { display: none; }
.la2-pg [data-theme-toggle] .icon-moon { display: inline-block; }
[data-bs-theme="dark"] .la2-pg [data-theme-toggle] .icon-sun  { display: inline-block; }
[data-bs-theme="dark"] .la2-pg [data-theme-toggle] .icon-moon { display: none; }

/* Social glyphs stay on the Bootstrap Icons family the runtime already ships:
   the proof draws exactly three platform marks (Facebook, Instagram, X) while
   the runtime supports nine, and DESIGN_RULES forbids a mixed glyph family.
   The 44px plaque geometry below is the proof's. */
.la2-pg .soc .bi { font-size: 18px; line-height: 1; }

/* The runtime Categories destination is a real dropdown trigger (<button>),
   not the proof's plain anchor. Neutralise the browser button chrome so it is
   visually identical to its sibling links. */
.la2-pg .mainnav button.drop {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
[dir="rtl"] .la2-pg .mainnav button.drop { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* OWNER REVISION 001 §1A — UTILITY CLUSTER DENSITY.
   The cluster is tightened onto the design's own tighter spacing steps so it
   claims less of the header, keeping the whole three-zone composition compact
   and leaving the middle track as much room as possible. Utilities stay hard
   against the outer edge, and every value below is an existing step of the
   FOUNDATION §4 spacing scale the shell already uses. Since SHELL + FALLBACK
   POLISH 001 §A the cluster's width no longer decides where the nav sits — the
   nav is centred in the span between the clusters — but a narrower cluster
   still buys the nav a wider span to breathe in. */
.la2-pg .util {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Scoped to the header utility cluster ONLY — the page's own `.btn.sm`
   geometry (foundation.css §3) is untouched.
   HEADER BALANCE 001 — second density step, 14 → 12 and 10 → 8, both canonical
   FOUNDATION §4 spacing values. Only horizontal padding moves: `.btn.sm` keeps
   its 44px min-height and every action stays well above the 44px target
   floor (Log in 56px, Register 80px, Post a Report 113px). */
.la2-pg .util .btn.sm { padding: 0 12px; }
.la2-pg .util .btn.sm.b-quiet { padding: 0 8px; }
/* The desktop utility group is a transparent wrapper so its children stay
   direct flex items of `.util`; below 1080 the whole group is replaced by the
   drawer trigger. Kept in CSS, never as an inline style, so the media query can
   actually switch it. */
.la2-pg .util .util-desktop { display: contents; }
.la2-pg .util > *,
.la2-pg .util .util-desktop > * { flex: none; }
.la2-pg .ubtn-wrap { position: relative; display: inline-flex; align-items: center; }
.la2-pg .util .sep {
    width: 1px;
    height: 28px;
    background: var(--line);
    margin: 0 4px;
}

.la2-pg .ubtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 48px;
    height: 48px;
    /* OWNER REVISION 001 §1A, tightened again by HEADER BALANCE 001 (10 → 8,
       a canonical FOUNDATION §4 value). Icon-only utilities are unaffected —
       their 48px min-width already dominates — so this only tightens the
       controls that carry a label (the language switch, the account menu). */
    padding: 0 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--body);
    font: 500 14px/1 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    text-decoration: none;
}
[dir="rtl"] .la2-pg .ubtn { font-family: 'IBM Plex Sans Arabic', sans-serif; }
/* EXC-FONT-1 (tests/Design/exceptions.json — RESOLVED 2026-08-12).
   An Arabic UI label on a utility button inside an LTR surface must resolve to
   IBM Plex Sans Arabic. The locked proof scopes the Arabic face to
   `.pg[dir=rtl] .ubtn` only and therefore falls through to an OS fallback; the
   rule layer (DESIGN_RULES.md § Typography: "no sixth family", "buttons use the
   UI face") sits above the artifact and wins. The selector is deliberately
   NARROW — the exception is recorded for this element, not generalised.
   Lives here, with `.ubtn` itself: it is a Public Shell control, so a
   foundation stylesheet must not own a rule about it. */
.la2-pg .ubtn[lang="ar"] { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .ubtn:hover { background: var(--band); color: var(--head); text-decoration: none; }
.la2-pg .ubtn svg,
.la2-pg .ubtn .ico { width: 20px; height: 20px; flex: none; }

.la2-pg .avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--nav);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}
[data-bs-theme="dark"] .la2-pg .avatar { background: var(--navSoft); }

/* Unread indicator. The plain 8px dot stays --act (FOUNDATION §1 recorded
   boundary: #F49B23 at 8px misses the 3:1 non-text floor). Where the runtime
   supplies a count, the capped orange count badge renders instead (5F, C13). */
.la2-pg .dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--act);
    border: 2px solid var(--bg);
}
[dir="rtl"] .la2-pg .dot { right: auto; left: 9px; }

.la2-pg .cnt-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--orn);
    color: var(--ornInk);
    border: 2px solid var(--bg);
    font: 700 11.5px/1 'IBM Plex Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[dir="rtl"] .la2-pg .cnt-badge { right: auto; left: 4px; }

/* Brand mark — two independent axes, resolved by two independent rule sets so
   neither can cancel the other.

   THEME axis. RULE OVERRIDES ARTIFACT: the locked 3-v3 dark frame wraps the
   navy lockup in a white `.plateLogo`. DESIGN_RULES.md § Brand and
   FINAL_DESIGN_FOUNDATION.md §9 (owner decision D5) both state the dark-surface
   colourway is the blue lockup with NO white plate behind the navy logo.
   DESIGN_AUTHORITY.md §1 places the rule layer above the artifact, so
   production ships the blue lockup and no plate. Recorded as a divergence.

   FORM axis. The proof's mobile header carries the icon crop, not a shrunken
   lockup (proof line 451 vs line 409), so the asset itself swaps at the 1080
   header collapse — see §6. */
.la2-pg .bm-form { display: inline-flex; align-items: center; }
.la2-pg .bm-form--icon { display: none; }

.la2-pg .brand-mark--dark { display: none; }
[data-bs-theme="dark"] .la2-pg .brand-mark--light { display: none; }
[data-bs-theme="dark"] .la2-pg .brand-mark--dark { display: block; }


/* ============================================================================
 * 2. HEADER DROPDOWN MENUS
 * ----------------------------------------------------------------------------
 * L1+L2-RULES. 3-v3 renders no open header menu, so anatomy comes from the
 * foundation contract (surface --bg, hairline --edge, radius --r2, overlay
 * elevation --sh, 44px targets) rather than from a fabricated frame.
 * Bootstrap owns `.dropdown-menu` / `.dropdown-item`; `.la2-pg` prefixes give
 * (0,2,0) over its (0,1,0).
 * ========================================================================== */
.la2-pg .dropdown-menu {
    background: var(--bg);
    border: 1px solid var(--edge);
    border-radius: var(--r2);
    box-shadow: var(--sh);
    padding: 6px;
    min-width: 240px;
    color: var(--body);
    font-size: 14.5px;
}
.la2-pg .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--ink);
    white-space: normal;
    background: transparent;
}
.la2-pg .dropdown-item:hover,
.la2-pg .dropdown-item:focus {
    background: var(--band);
    color: var(--act);
    text-decoration: none;
}
.la2-pg .dropdown-divider {
    border-top: 1px solid var(--line);
    margin: 6px 0;
    opacity: 1;
}


/* ============================================================================
 * 2b. HEADER DROPDOWNS IN THE AUTHENTICATION SHELL (no Bootstrap runtime)
 * ----------------------------------------------------------------------------
 * MOBILE-NAV-AUTH-CATEGORIES-PRIVACY-001 (B). Login and Registration render the
 * SAME header, the SAME category dataset and the SAME links as every other page,
 * but they deliberately load no Bootstrap (CLAUDE.md §8.1 · 4C). On every other
 * page Bootstrap supplies the three things below and la2etlak.css §6 supplies the
 * category-menu structure; here, under the `.la2-au` body class ONLY (so no other
 * page's cascade can change), the same behaviour is restated from the foundation
 * tokens:
 *   · `.dropdown-menu` is hidden until `.show`, positioned under its trigger, with
 *     the list reset Reboot would have given it;
 *   · the category row = link + caret toggle, and the submenu is a side flyout;
 *   · the open/close behaviour is design-shell.js (initDropdownFallback), which
 *     stands down whenever Bootstrap's own Dropdown is present.
 * The surface itself (background, hairline, radius, shadow, item targets) is the
 * `.la2-pg .dropdown-menu` / `.dropdown-item` block above — not repeated.
 * ========================================================================== */
/* The no-JavaScript destination for Categories. Hidden on every page; in the authentication shell,
   and ONLY while JavaScript is unavailable (no `js` class on <html>), it replaces the dropdown that
   shell can only open with design-shell.js. */
.la2-pg .mainnav a.nav-cats-link { display: none; }
html:not(.js) .la2-au .mainnav a.nav-cats-link { display: inline-flex; }
html:not(.js) .la2-au .mainnav .dropdown { display: none; }

.la2-au .dropdown { position: relative; }
.la2-au .dropdown-menu {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 1000;
    display: none;
    margin: 0;
    list-style: none;
}
.la2-au .dropdown-menu.show { display: block; }
.la2-au .dropdown-menu-end { inset-inline-start: auto; inset-inline-end: 0; }
.la2-au .dropdown-item { width: 100%; text-decoration: none; }
.la2-au hr.dropdown-divider { height: 0; border: 0; border-top: 1px solid var(--line); }

.la2-au .la2-navbar__cat-menu { min-width: 15rem; overflow: visible; }
.la2-au .la2-navbar__cat-head,
.la2-au .la2-navbar__cat-link { font-weight: 600; }
.la2-au .la2-navbar__cat-item { position: relative; }
.la2-au .la2-navbar__cat-row { display: flex; align-items: stretch; }
.la2-au .la2-navbar__cat-link { flex: 1 1 auto; }
.la2-au .la2-navbar__cat-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: .85rem;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
}
.la2-au .la2-navbar__cat-toggle:hover,
.la2-au .la2-navbar__cat-toggle:focus-visible { background: var(--band); }
.la2-au .la2-navbar__cat-caret { flex-shrink: 0; }
[dir="rtl"] .la2-au .la2-navbar__cat-caret { transform: scaleX(-1); }

/* The submenu is a side flyout that escapes the main list; it opens from the caret
   (.is-open) and, as everywhere else, on hover. */
.la2-au .la2-navbar__submenu {
    display: none;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 100%;
    z-index: 1001;
    margin: 0;
    margin-inline-start: -.25rem;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    list-style: none;
}
.la2-au .la2-navbar__cat-item.is-open > .la2-navbar__submenu,
.la2-au .la2-navbar__cat-item:hover > .la2-navbar__submenu { display: block; }
.la2-au .la2-navbar__cat-sub { font-size: 14px; }

/* ============================================================================
 * 3. MOBILE NAVIGATION DRAWER
 * ----------------------------------------------------------------------------
 * Geometry: phase-4a-public-shell.html lines 170-185, ported verbatim except
 * `position: absolute` → `position: fixed`. The absolute positioning is
 * specimen scaffolding (the drawer lives inside a fixed-size `.pg` frame in
 * the board); in a real viewport the overlay must be fixed.
 *
 * There is NO rendered proof of the open drawer anywhere in the locked package
 * (ledger §3.3 / §9). It is `L1+L2-RULES`: verify against rules, and never
 * fabricate a Layer-3 screenshot target for it.
 *
 * Progressive enhancement: `:target` opens the drawer with JavaScript disabled;
 * resources/js/design-shell.js upgrades the trigger to a real button with
 * aria-expanded, Escape and focus handling.
 * ========================================================================== */
.la2-pg .scrim {
    position: fixed;
    inset: 0;
    background: rgba(9, 13, 26, .55);
    z-index: 1080;
}
.la2-pg .drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: 330px;
    max-width: 92%;
    background: var(--bg);
    z-index: 1081;
    box-shadow: var(--sh);
    display: flex;
    flex-direction: column;
}
.la2-pg .dhd {
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 16px;
    border-bottom: 1px solid var(--line);
}
[dir="rtl"] .la2-pg .dhd { padding: 0 16px 0 8px; }
.la2-pg .dhd span.t {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--muted);
}
[dir="rtl"] .la2-pg .dhd span.t { letter-spacing: 0; text-transform: none; font-size: 13px; }
.la2-pg .dbody { flex: 1; overflow: auto; padding: 10px 12px 18px; }
.la2-pg .dnav { display: flex; flex-direction: column; gap: 2px; }
.la2-pg .dnav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}
.la2-pg .dnav a:hover { background: var(--band); text-decoration: none; }
.la2-pg .dnav a[aria-current] {
    border: 1px solid var(--curEdge);
    background: var(--curFaint);
    color: var(--head);
    font-weight: 600;
    padding: 0 11px;
}
/* Drawer categories (MOBILE-NAV-AUTH-CATEGORIES-PRIVACY-001 B). A category that has
   subcategories is a row — its link, which still navigates, and a caret toggle — over
   an indented list of its subcategory destinations. Without JavaScript every
   destination is simply listed; design-shell.js marks the group `data-enhanced`,
   which collapses the list until the caret opens it. The link rules above
   (`.dnav a`) already give every entry its 52px target; the sub-links are a touch
   lighter and indented, nothing else. */
.la2-pg .dcat-row { display: flex; align-items: stretch; gap: 2px; }
.la2-pg .dcat-row > a { flex: 1 1 auto; min-width: 0; }
.la2-pg .dcat-toggle {
    display: none;
    flex: none;
    width: 52px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.la2-pg .dcat[data-enhanced] .dcat-toggle { display: inline-flex; }
.la2-pg .dcat-toggle:hover { background: var(--band); }
.la2-pg .dcat-toggle .ico { width: 18px; height: 18px; transition: transform .15s ease; }
.la2-pg .dcat.is-open .dcat-toggle .ico { transform: rotate(180deg); }
.la2-pg .dcat-subs { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 16px; }
.la2-pg .dcat[data-enhanced]:not(.is-open) .dcat-subs { display: none; }
.la2-pg .dnav .dcat-subs a { min-height: 46px; font-size: 15px; font-weight: 400; color: var(--body); }

/* Unread state on the mobile surfaces (MOBILE-NAV-AUTH-CATEGORIES-PRIVACY-001 A). The hamburger reuses the
   shell's plain unread dot (above); the drawer reuses the capped count badge, set in the row instead of over
   an icon. `[hidden]` is declared here because both rules set `display`/position and a script toggles the
   attribute (CLAUDE.md §6: an author `display` defeats the UA `[hidden]` rule). */
.la2-pg .util-drawer .dot[hidden],
.la2-pg .dnav .dcnt[hidden] { display: none; }
.la2-pg .dnav .cnt-badge.dcnt {
    position: static;
    flex: none;
    margin-inline-start: auto;
}
.la2-pg .dsep { height: 1px; background: var(--line); margin: 12px 0; }
.la2-pg .dact { display: flex; flex-direction: column; gap: 10px; }
.la2-pg .dact > .btn,
.la2-pg .dact form .btn { width: 100%; }
.la2-pg .dact form { margin: 0; }
.la2-pg .dtog { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.la2-pg .dtog button,
.la2-pg .dtog a {
    min-height: 48px;
    border: 1px solid var(--edge);
    border-radius: 10px;
    background: var(--bg);
    color: var(--body);
    font: 600 14px/1 'IBM Plex Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
}
[dir="rtl"] .la2-pg .dtog button,
[dir="rtl"] .la2-pg .dtog a { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .dtog button:hover,
.la2-pg .dtog a:hover { border-color: var(--act); color: var(--act); text-decoration: none; }
.la2-pg .dtog .ico { width: 18px; height: 18px; }
/* The mobile drawer has no locked artifact at all (ledger §3.3, L1+L2-RULES),
   so its Arabic language control is not an artifact conflict — the same
   typography rule (DESIGN_RULES.md § Typography) simply applies directly. */
.la2-pg .dtog [lang="ar"] { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* Closed by default; `:target` (no JS) or `[data-open]` (JS) opens it. */
.la2-pg .drawer-shell { display: none; }
.la2-pg .drawer-shell:target,
.la2-pg .drawer-shell[data-open] { display: block; }


/* ============================================================================
 * 4. FOOTER   (proof lines 264-278)
 * ========================================================================== */
.la2-pg .ftr {
    background: var(--band2);
    border-top: 1px solid var(--line);
    padding: 44px 0 22px;
}
.la2-pg .ftri {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px;
}
.la2-pg .ftr h2 {
    font-size: 12px;
    font-family: 'IBM Plex Sans', sans-serif;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
    font-weight: 700;
}
[dir="rtl"] .la2-pg .ftr h2 {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
}
.la2-pg .ftr ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.la2-pg .ftr a { color: var(--body); font-size: 14px; }
.la2-pg .ftr a:hover { color: var(--act); }
.la2-pg .fbrand img { height: 34px; width: auto; margin-bottom: 12px; }
.la2-pg .fbrand p { margin: 0; font-size: 13.5px; color: var(--muted); max-width: 34ch; }
.la2-pg .soc { display: flex; gap: 8px; }
.la2-pg .soc a {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--edge);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--body);
}
.la2-pg .soc .ico { width: 18px; height: 18px; }
/* Footer social platform identities (HOME-BRANDING-CMS-001 Phase 6, P6-VISUAL-CORR-01).
   Each platform is a recognisable BRAND BADGE AT REST: the platform colour is the tile
   surface and the glyph is white. Code-owned, scoped to this component, never a
   foundation token. An unknown platform keeps the neutral control above. Brand identity
   is the same in light and dark; only the neutral edge and the focus ring are theme tokens. */
.la2-pg .soc a[data-platform] {
    color: var(--soc-fg, #FFFFFF);
    background: var(--soc-bg, var(--bg));
    border-color: var(--soc-border, var(--soc-bg, var(--edge)));
}
.la2-pg .soc a[data-platform] .bi { color: inherit; }
/* Facebook, YouTube, LinkedIn and WhatsApp: the Bootstrap glyph IS the real logo shape (a filled
   circle / plate with the mark cut out), so it is shown bare - no tile, no frame - in the brand
   colour. A small white fill behind the glyph's centre shows through the cut-out: blue circle +
   white f, red plate + white play. It sits inside the shape, so nothing white spills outside it. */
.la2-pg .soc a[data-platform="facebook"] .bi,
.la2-pg .soc a[data-platform="youtube"] .bi,
.la2-pg .soc a[data-platform="linkedin"] .bi,
.la2-pg .soc a[data-platform="whatsapp"] .bi { font-size: 34px; background-repeat: no-repeat; background-position: center; }
.la2-pg .soc a[data-platform="facebook"] .bi { background-image: radial-gradient(circle, #FFFFFF 49%, transparent 50%); }
.la2-pg .soc a[data-platform="youtube"] .bi { background-image: linear-gradient(#FFFFFF, #FFFFFF); background-size: 84% 62%; }
.la2-pg .soc a[data-platform="linkedin"] .bi { background-image: linear-gradient(#FFFFFF, #FFFFFF); background-size: 84% 84%; }
.la2-pg .soc a[data-platform="whatsapp"] .bi { background-image: radial-gradient(circle closest-side at 50% 49%, #FFFFFF 86%, transparent 87%); }
.la2-pg .soc a[data-platform]:hover {
    color: var(--soc-fg, #FFFFFF);
    background: var(--soc-bg, var(--bg));
    filter: brightness(.92);
    text-decoration: none;
}
.la2-pg .soc a[data-platform]:focus-visible {
    color: var(--soc-fg, #FFFFFF);
    outline: 2px solid var(--act);
    outline-offset: 3px;
}
.la2-pg .soc a[data-platform="facebook"] { --soc-bg: transparent; --soc-fg: #1877F2; --soc-border: transparent; }
.la2-pg .soc a[data-platform="instagram"] { --soc-bg: linear-gradient(135deg, #833AB4 0%, #C13584 35%, #E1306C 60%, #F77737 82%, #FCAF45 100%); --soc-border: transparent; }
.la2-pg .soc a[data-platform="twitter"] { --soc-bg: #000000; --soc-border: var(--edge); }
.la2-pg .soc a[data-platform="youtube"] { --soc-bg: transparent; --soc-fg: #FF0000; --soc-border: transparent; }
.la2-pg .soc a[data-platform="linkedin"] { --soc-bg: transparent; --soc-fg: #0A66C2; --soc-border: transparent; }
.la2-pg .soc a[data-platform="tiktok"] { --soc-bg: #000000; --soc-border: var(--edge); }
.la2-pg .soc a[data-platform="whatsapp"] { --soc-bg: transparent; --soc-fg: #25D366; --soc-border: transparent; }
.la2-pg .soc a[data-platform="app_store"] { --soc-bg: #0D96F6; }
/* Single-colour Bootstrap glyph on a Google Play brand-green tile: the existing icon family is intentionally retained. */
.la2-pg .soc a[data-platform="google_play"] { --soc-bg: #34A853; }
.la2-pg .fbot {
    max-width: 1240px;
    margin: 26px auto 0;
    padding: 16px 40px 0;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.la2-pg .fbot p { margin: 0; }


/* ============================================================================
 * 5. SKIP LINK — inherited behaviour, ported surface
 * ========================================================================== */
.la2-pg .la2-skip-link {
    background: var(--pri);
    color: var(--priInk);
    border-radius: 0 0 var(--r2) var(--r2);
}


/* ============================================================================
 * 6. RESPONSIVE ACTIVATION
 * ----------------------------------------------------------------------------
 * FINAL_DESIGN_FOUNDATION.md §7 is the ONLY breakpoint authority. The board's
 * 390px frame is evidence of the mobile composition, never of its activation
 * width (ledger §10).
 * ========================================================================== */

/* 1320 — the guest Register action leaves the public header (FOUNDATION §7).
   The action is not duplicated elsewhere in the header: below this width the
   registration destination is reached from the Log in page, and from the
   drawer once the header collapses. */
@media (max-width: 1319.98px) {
    .la2-pg .util .util-register { display: none; }
}

/* 1080 — the public header collapses to the drawer (FOUNDATION §7).
   Mobile header composition: proof line 281 (`.pg.m .hdi`). */
@media (max-width: 1079.98px) {
    .la2-pg .hdi {
        padding: 0 16px;
        height: 64px;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }
    .la2-pg .brand { padding-inline-end: 0; }
    .la2-pg .brand img { height: 30px; }
    .la2-pg .bm-form--lockup { display: none; }
    .la2-pg .bm-form--icon { display: inline-flex; }

    .la2-pg .mainnav,
    .la2-pg .util .util-desktop { display: none; }
    .la2-pg .util .util-drawer { display: inline-flex; }

    /* PARITY FIX (HOMEPAGE-PILOT-PARITY-VALIDATE-001, mobile axes).
       `display: none` removes `.mainnav` from the box tree entirely, so it stops
       being a grid item — and with only two items left, auto-placement dropped
       the utility cluster into the MIDDLE track. `justify-self: end` then pinned
       it to the end of `1fr` instead of the end of the header, leaving the whole
       cluster 8px (one grid gap) inside the gutter. The board's own mobile frame
       keeps three tracks because it carries a middle element; the runtime cannot
       add a spacer div for layout, so the last track is claimed explicitly.

       Measured at 390: utilities move 266 -> 274, right edge 366 -> 374, hard
       against the 16px gutter exactly as the board draws them. No negative
       margin, no transform, no per-viewport nudge. Mobile-scoped, so the desktop
       three-item auto-placement is untouched. */
    .la2-pg .util { grid-column: 3; }
}

@media (min-width: 1080px) {
    .la2-pg .util .util-drawer { display: none; }
    /* The drawer is a below-1080 composition only (ledger §9 footnote 2). */
    .la2-pg .drawer-shell:target { display: none; }
}

/* 768 — footer recomposition (proof line 312, `.pg.m .ftri`).
   The narrow `.wrap` gutter that used to sit here is a FOUNDATION content
   measure, not a shell rule, and moved to foundation.css unchanged. */
@media (max-width: 767.98px) {
    .la2-pg .ftri { grid-template-columns: 1fr 1fr; padding: 0 16px; gap: 24px; }
    .la2-pg .fbot { padding: 14px 16px 0; }
}