/*
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this file may be
reproduced, modified or stored in a retrieval system, or transmitted in any form or by any
means, electronic, mechanical, photocopying, recording or otherwise, without the prior
written permission of Toptronic® Limited.
For copyright inquiries: jacques@toptronic.com

Generated/Updated on: 2026-08-06T19:30:00+1000

styles_002.css — file 2 of 6 (loaded after styles_001.css)

WHAT this file does:
  Styles the chrome that frames every page: the sticky header with logo and
  navigation, the hamburger button for small screens, the language switcher
  with its dropdown, the skip-to-content link for keyboard users, and the footer.

WHY it works this way (for Ryan, 14, and Ava, 9):
  The header is like the frame of a picture — it stays perfectly still at the
  top while you scroll (it NEVER hides; that is a house rule). The skip link is
  a secret shortcut: it is invisible until someone tabs to it with a keyboard,
  then it pops out so they can jump past the menu straight to the content.
  The language switcher is a round pill with a globe; tapping it opens a little
  list of languages. Languages we do not speak yet are shown greyed-out with a
  tiny "soon" tag — honest, never a fake button.
*/

/* ============================================================================
   SECTION 6 — SKIP LINK (keyboard shortcut past the menu)
   Visually hidden until focused, then it appears top-left, yellow with ink
   text, above EVERYTHING (--z-skip is the top rung of the z ladder).
   ========================================================================== */

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--clr-yellow);
  color: var(--clr-ink);
  font-weight: 600;
  font-size: var(--fs-button);
  border-radius: var(--r-2);
  /* Hidden off-screen until focus — never display:none, so it can BE focused. */
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--clr-ink);
}

/* ============================================================================
   SECTION 7 — HEADER (design §3.1)
   72px tall, sticky, never hides on scroll. The dark frame of every page.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-h);          /* 72px token from styles_001.css */
  background-color: var(--clr-surface);
  border-bottom: 1px solid var(--clr-hairline);
}

.header-inner {
  max-width: 1200px;
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* ---- 7.1 Brand: logo badge + wordmark --------------------------------------
   Badge is 40px tall (design §6); clearspace ≈25% of badge width is kept by
   the flex gap — nothing else may crowd the badge. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);                 /* 16px gap badge → wordmark */
  color: var(--clr-text);
  text-decoration: none;
  flex-shrink: 0;
  /* Brand link keeps a comfortable touch target too. */
  min-height: var(--touch);
}

.brand:hover {
  color: var(--clr-text);           /* wordmark stays put; only nav links tint */
}

.brand-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.brand-name {
  font-weight: 700;
  font-size: var(--fs-body-l);
  letter-spacing: -0.02em;
  color: var(--clr-text);
  white-space: nowrap;
}

/* ============================================================================
   SECTION 8 — NAVIGATION
   Links are muted until hovered (yellow, 150ms) or active (full text color +
   a STATIC 2px yellow underline — no sliding animation, house rule).
   ========================================================================== */

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;                /* push nav to the right of the brand */
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);         /* 44px touch target via padding */
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-button);
  font-weight: 600;
  color: var(--clr-muted);
  text-decoration: none;
  border-radius: var(--r-2);
  /* The active underline is drawn with a border on a transparent base so the
     layout never shifts between active and inactive states. */
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease);
}

.nav-links a:hover {
  color: var(--clr-yellow);
}

/* Current page: full text color + static 2px yellow underline (2px offset). */
.nav-links a.active {
  color: var(--clr-text);
  border-bottom-color: var(--clr-yellow);
}

/* ============================================================================
   SECTION 9 — HAMBURGER TOGGLE (mobile only)
   44×44px, three bars that turn into an X when the menu is open. Hidden on
   desktop by styles_006.css's 768px breakpoint (default state here is the
   MOBILE state: the button shows, the panel is closed).
   ========================================================================== */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--touch);
  height: var(--touch);
  margin-left: auto;                /* sits right when nav panel is hidden */
  border-radius: var(--r-2);
  color: var(--clr-text);
}

.nav-toggle .bar,
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

/* Open state: bars fold into an X. JS toggles .open on the nav + aria-expanded. */
.nav-toggle[aria-expanded="true"] .bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(2),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(3),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav panel: under 768px the links become a full-width dropdown panel
   directly under the header. Appears instantly — no slide animation (§3.1).
   The 768px-and-up override (inline row, toggle hidden) lives in
   styles_006.css — mobile-first, one direction of travel. */
@media (max-width: 767.98px) {
  .nav-links {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
    background-color: var(--clr-surface);
    border-bottom: 1px solid var(--clr-hairline);
    box-shadow: var(--sh-2);
    display: none;                  /* closed until JS adds .open */
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    min-height: 48px;               /* stacked rows at 48px (design §3.1) */
    border-bottom: none;
    border-radius: var(--r-2);
  }

  .nav-links a.active {
    border-bottom: none;
    /* On stacked rows the active marker becomes a left yellow bar instead. */
    box-shadow: inset 3px 0 0 var(--clr-yellow);
  }
}

/* ============================================================================
   SECTION 10 — LANGUAGE SWITCHER (design §3.1, D2, D7)
   Pill button with a globe + current language; dropdown lists 13 live
   languages as links and 12 "soon" languages as disabled entries with a small
   .lang-tag chip. JS (i18n_002.js) builds the list and toggles .open.
   ========================================================================== */

.lang-switch {
  position: relative;               /* dropdown anchors to this */
  flex-shrink: 0;
}

#lang-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;                 /* design §3.1: 48px total pill height */
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--clr-muted);
  font-size: var(--fs-button);
  font-weight: 600;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

#lang-btn:hover {
  color: var(--clr-yellow);
  border-color: var(--clr-yellow);
}

#lang-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#lang-btn .lang-current {
  white-space: nowrap;
}

/* The dropdown: hidden by default, .open shows it (JS toggles). Positioned
   absolutely right under the button, above page content (--z-overlay 200). */
#lang-dropdown {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  z-index: var(--z-overlay);
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--sp-2);
  background-color: var(--clr-surface);
  border: 1px solid #2B2B2B;            /* brighter separation hairline (0034) */
  border-radius: var(--r-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), var(--sh-3);
  display: none;
}

#lang-dropdown.open {
  display: block;
}

/* Live languages are real links. Rows are tall enough to tap comfortably. */
#lang-dropdown a,
#lang-dropdown span[aria-disabled] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
  border-radius: var(--r-2);
  white-space: nowrap;
}

#lang-dropdown a {
  color: var(--clr-text);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}

#lang-dropdown a:hover {
  color: var(--clr-yellow);
  background-color: var(--clr-surface-2);
}

/* Current language is marked in yellow so you can see where you are. */
#lang-dropdown a[aria-current="true"] {
  color: var(--clr-yellow);
}

/* "Soon" languages: greyed out, not clickable, honest about coming later. */
#lang-dropdown span[aria-disabled="true"] {
  color: var(--clr-muted);
  cursor: default;
  opacity: 0.7;
}

/* The tiny "soon" chip inside disabled entries. */
.lang-tag {
  font-size: 0.75rem;                 /* 12px — chrome label exception (0034,
                                         design §2: the 15px law governs
                                         reading text, not tracked labels) */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px var(--sp-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-1);
  color: var(--clr-muted);
}

/* ============================================================================
   SECTION 11 — FOOTER (design §3.8)
   The quiet copyright lockup at the bottom of every page. Small muted text,
   links tint yellow on hover (150ms). Logo badge at its minimum size, 24px.
   ========================================================================== */

.site-footer {
  background-color: var(--clr-surface);
  border-top: 1px solid var(--clr-hairline);
  padding-block: var(--sp-7);     /* inline gutters live on .footer-inner so
                                     header, content and footer share one edge
                                     (session 0034) */
}

.footer-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.footer-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--clr-muted);
}

.footer-lockup img {
  width: 24px;                      /* logo minimum size (design §6) */
  height: 24px;
  margin-bottom: var(--sp-2);
}

.footer-lockup a {
  color: var(--clr-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast) var(--ease);
}

.footer-lockup a:hover {
  color: var(--clr-yellow);
}

/* Nav repeat + language text links. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-small);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);         /* touch-friendly even in the footer */
  color: var(--clr-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.footer-links a:hover {
  color: var(--clr-yellow);
}

.footer-links a.active {
  color: var(--clr-text);
}

/* Footer language text links (footer-lang, D7): plain inline text links. */
.footer-lang {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-small);
}

.footer-lang a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--clr-muted);
  transition: color var(--t-fast) var(--ease);
}

.footer-lang a:hover {
  color: var(--clr-yellow);
}

.footer-lang a[aria-current="true"] {
  color: var(--clr-yellow);
}

/* End of styles_002.css — header, nav, language switcher, skip link, footer.
   Next: styles_003.css (buttons, focus ring, hero, TPEE featured card). */