/*
// © Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of
// this document 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
 */
/*
 * PLWS :: Plazdiez Website — "GO BOKKIES" theme-toggle tab (session 0108)
 * Project: Paul Lambourn Web Site (PLWS) — www.plazdiez.co.za
 * Generated/Updated on: 2026-09-18T08:10:00+10:00
 * Audience: Jacques (French, hardware/C bg), Ryan (14), Ava (9), Students
 *
 * WHAT THIS FILE IS
 *   The look of the new "GO BOKKIES" tab — a real <button> that sits to the
 *   right of CONTACT in the header and switches the whole site between the
 *   Bokkies (Springbok green + gold) and Classic (charcoal + amber) colour
 *   schemes. The button's own look is theme-aware, so the state is visible in
 *   BOTH schemes:
 *     * Bokkies active  — a solid deep-green pill with a gold badge.
 *     * Classic active  — a charcoal outline with a HOLLOW badge.
 *   The state reads in colour AND in shape, so it survives greyscale and
 *   colour-blindness too.
 *
 *   -- Ava: the little green-and-gold shield with the jumping buck. When the
 *      site is in the green-and-gold colours the button is filled in; when
 *      you switch back to the old colours the button becomes an outline.
 *   -- Jacques: a comparator with a visible output. The badge is OUR OWN
 *      drawing of a leaping springbok (the official team emblem is a
 *      registered trade mark and is deliberately not copied).
 *
 *   The colour VALUES live in css/styles_015.css (the generated palette
 *   layer) as the --clr-bok-* tokens, so this file stays theme-agnostic and
 *   the verifier can re-check the contrast from the shipped hex values.
 */

/* ===========================================================================
   SECTION 1: THE "GO BOKKIES" THEME-TOGGLE TAB
   =========================================================================== */

/* ---- 1.1 Base look (applies everywhere, then the bands refine it) ---- */
.nav-bok {
  /* Tab-like: the same vertical rhythm as the other nav items, but a button. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                       /* air between the badge and the label */
  height: 40px;                   /* matches the Contact pill's min-height */
  padding: 0 12px 0 5px;          /* badge hugs the left, label on the right */
  border-radius: 10px;            /* a soft tab, not a full pill */
  border: 2px solid currentColor;  /* the outline doubles as the state cue */
  background: transparent;
  color: var(--clr-charcoal);     /* Classic default: charcoal on beige */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;              /* same size as the 1200px-band tabs */
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--trans-fast), color var(--trans-fast),
              border-color var(--trans-fast);
}
.nav-bok .bok-badge { width: 30px; height: 30px; flex: none; }
.nav-bok .nav-bok-label { line-height: 1; }

/* Badge colours — the SAME markup, two looks via the theme. */
.nav-bok .bk-shield { fill: currentColor; }
.nav-bok .bk-field  { fill: var(--bok-field, transparent); }
.nav-bok .bk-fig    { fill: currentColor; stroke: currentColor; }

/* ---- 1.2 Hover ---- */
.nav-bok:hover {
  background-color: rgba(232, 160, 32, 0.15);  /* amber wash, matches the site */
  color: var(--clr-brand-deep);
  border-color: var(--clr-brand-deep);
}

/* ---- 1.3 Keyboard focus: a visible ring in BOTH themes ---- */
.nav-bok:focus-visible {
  outline: 3px solid var(--clr-focus);   /* --clr-focus, the site-wide ring */
  outline-offset: 2px;
  border-radius: 10px;
}

/* ---- 1.4 THE TWO THEME STATES (the visible difference) ----
   WHY this survives both colour schemes: the state is carried by the FILL of
   the badge field and the button's background, not by a colour that could
   collide with either palette.
   * Bokkies active (aria-pressed="true", the new default): a solid deep-green
     pill with a gold badge — unmistakably "on".
   * Classic active (aria-pressed="false"): a charcoal outline with a HOLLOW
     badge — unmistakably "off" (the green is gone). */
html[data-theme="bokkies"] .nav-bok[aria-pressed="true"] {
  background-color: var(--clr-bok-green);   /* deep Springbok green */
  color: var(--clr-bok-gold);              /* Springbok gold label */
  border-color: var(--clr-bok-gold-deep);  /* darker gold rim for contrast */
}
html[data-theme="bokkies"] .nav-bok[aria-pressed="true"] .bk-field {
  fill: var(--clr-bok-green-deep);         /* darker green behind the gold figure */
}
html[data-theme="bokkies"] .nav-bok[aria-pressed="true"]:hover {
  background-color: var(--clr-bok-green-hover);
}
/* Classic active: the base look above already gives the charcoal outline +
   hollow badge, so no extra rule is needed here — the base IS the classic
   state. (Kept explicit below for the reader.) */
html[data-theme="classic"] .nav-bok[aria-pressed="false"] {
  background-color: transparent;
  color: var(--clr-charcoal);
  border-color: var(--clr-steel);          /* grey outline, softer than ink */
}
html[data-theme="classic"] .nav-bok[aria-pressed="false"] .bk-field {
  fill: transparent;                       /* hollow badge */
}

/* ---- 1.5 Phone / tablet drawer (<=1199px) ----
   The drawer (styles_004 SECTION 14 + styles_010 SECTION 1) is a full-height
   right-hand panel; the button becomes a full-width row like the links. */
@media screen and (max-width: 1199px) {
  .nav-bok {
    width: 100%;
    justify-content: flex-start;
    height: auto;
    min-height: 48px;               /* comfortable tap target in the drawer */
    padding: var(--sp-sm) var(--sp-md);
    border-radius: 8px;
    border: 2px solid currentColor;
    margin-top: var(--sp-md);       /* same rhythm as the Contact pill */
    font-size: 1rem;                /* drawer links are 1rem */
  }
  .nav-bok .bok-badge { width: 34px; height: 34px; }
  /* In the drawer the panel background is dark (--clr-ink); the button must
     stay readable there in BOTH themes. */
  .nav-bok { color: var(--clr-paper); }
  html[data-theme="bokkies"] .nav-bok[aria-pressed="true"] {
    background-color: var(--clr-bok-green);
    color: var(--clr-bok-gold);
    border-color: var(--clr-bok-gold-deep);
  }
  html[data-theme="classic"] .nav-bok[aria-pressed="false"] {
    color: var(--clr-paper);
    border-color: var(--clr-steel);
  }
}

/* ---- 1.6 The 1200px-plus inline band ----
   The row is tight (see the spec's risk section): keep the button compact.
   Below 1440px the words are hidden and only the badge shows, so the 10th
   tab never overflows the row in the longest languages (measured: Spanish
   overflowed by 69px at 1200px with the full label). The badge alone is
   still a clear, recognizable "GO BOKKIES" button, and the aria-label keeps
   the full name for screen readers. */
@media screen and (min-width: 1200px) and (max-width: 1439px) {
  .nav-bok .nav-bok-label { display: none; }
}
@media screen and (min-width: 1200px) {
  .nav-bok { height: 40px; padding: 0 12px 0 5px; font-size: 0.8rem; }
}
@media screen and (min-width: 1340px) {
  .nav-bok { height: 44px; padding: 0 14px 0 6px; font-size: 0.82rem; }
  .nav-bok .bok-badge { width: 36px; height: 36px; }
}

/* ---- 1.7 Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .nav-bok { transition: none; }
}

/* ---- 1.8 Print ---- */
@media print {
  .nav-bok { display: none; }   /* a theme switch is meaningless on paper */
}

/* ---------------------------------------------------------------------------
   REPAIR (session 0111) — two "active" states the 0108 palette generator
   could not carry. Their colours are var() tokens, so they were never
   re-emitted under the html[data-theme="bokkies"] prefix. Without the rules
   below, the palette sheet's generic .gl-chip / .gl-index-key background
   override (near-white) wins on specificity while the pressed text colour
   (near-white paper) survives -- white on white, invisible.

   Specificity here: html (type) + [data-theme] + [aria-pressed] or .is-*
   (attribute/class level) + class -- one class-level MORE than the palette
   sheet's overrides, so these win the cascade with no !important.
   -- Jacques: "All categories" and the A-Z letter you jumped to were
      invisible in GO BOKKIES. This puts them back: ink background, paper
      letter, exactly like the classic sheet promises.
--------------------------------------------------------------------------- */
html[data-theme="bokkies"] .gl-chip[aria-pressed="true"] {
  background: var(--clr-ink);
  border-color: var(--clr-ink);
  color: var(--clr-paper);
}
html[data-theme="bokkies"] .gl-index-key[aria-pressed="true"],
html[data-theme="bokkies"] .gl-index-key.is-active,
html[data-theme="bokkies"] .gl-index-key.is-on {
  color: var(--clr-paper);
  background: var(--clr-ink);
  border-color: var(--clr-ink);
}