/*
// © 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 — Session 0102 layer (glossary page + header fit)
 * Project: Paul Lambourn Web Site (PLWS) — www.plazdiez.co.za
 * Generated/Updated on: 2026-09-17T11:05:57+10:00
 * Audience: Jacques (hardware/C background), Ryan (14), Ava (9), Students,
 *           and the Master's-level reader who wants the "why" of every rule.
 *
 * WHY THIS FILE EXISTS (two jobs, both additive — no old file was changed,
 * because /css/* is served "immutable" for a year and an old file would keep
 * serving the old bytes):
 *
 *   JOB 1 — THE NINTH TAB MUST FIT (SECTION 1 below)
 *     The header menu now has nine tabs (Glossary was added between Case
 *     Studies and About). Measured in a real browser at 1366x768, 1024x768,
 *     900x800 and 821x800: with nine tabs the inline row is WIDER than the
 *     header between 821px and about 1199px, in every language except
 *     Chinese, so the page grew a horizontal scrollbar and the menu ran
 *     under the globe button. The site already owns the right answer for
 *     "the menu does not fit": the slide-over drawer used on phones and
 *     tablets (styles_004.css SECTION 14, ceiling 820px). SECTION 1 raises
 *     that ceiling to 1199px. Above 1200px the inline row is kept and its
 *     letter size/padding are trimmed a little so nine tabs of the longest
 *     language still fit.
 *
 *     -- Ava: when the nine names are too wide for the bar, they move
 *        behind the little hamburger button, exactly like on a phone.
 *     -- Jacques: this is a comparator with one threshold — 1200px. Below
 *        it the drawer is selected, at or above it the inline row.
 *     -- Students: a @media query cannot widen another file's @media query,
 *        so the drawer rules are repeated for the new width band. That is
 *        duplication by necessity, not by accident.
 *
 *   JOB 2 — THE GLOSSARY PAGE (SECTIONS 2 to 8 below)
 *     The table of terms, the "Customers Talks" table, the search box, the
 *     category chips, the phone layout (each row becomes a little card) and
 *     the print rules. Every value uses the site's existing design tokens
 *     (--clr-ink, --clr-paper, --clr-brand, --clr-steel) so the page cannot
 *     drift away from the rest of the site.
 */

/* ===========================================================================
   SECTION 0: ONE LOCAL COLOUR TOKEN
   --clr-steel (#8a94a6) is the site's secondary text colour ON DARK surfaces.
   On the white table background it measures only 3.06:1 — under the WCAG AA
   requirement of 4.5:1 for normal text. So this layer defines its own muted
   grey for LIGHT contexts: #5f6774 measures 5.71:1 on white and 5.34:1 on the
   warm paper background. Every grey word on this page uses it.
   -- Jacques: same rule as the amber — a colour is only valid for the surface
      it was chosen for. Deep brass for light, amber for dark.
   =========================================================================== */
:root {
  --gl-muted: #5f6774;     /* light-context secondary text: 5.71:1 on white */
  --gl-rule: rgba(20, 22, 26, 0.10);
}

/* ===========================================================================
   SECTION 1: HEADER FIT FOR NINE TABS (821px – 1199px)
   One-to-one copy of the drawer rules in styles_004.css SECTION 14, widened.
   =========================================================================== */
@media screen and (min-width: 821px) and (max-width: 1199px) {
  /* The hamburger becomes the menu button again... */
  .hamburger { display: flex; position: relative; z-index: 1600; }

  /* ...and the menu itself is the same full-height right-hand panel. */
  /* The phone pill is shown at <=820px; in this band the menu moved into the
     drawer, so without this line BOTH visible calls to action would vanish
     (Contact rides inside the drawer). Measured: the pill fits with room to
     spare in this band. */
  .header-cta-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--clr-brand);
    color: var(--clr-brand-ink);
    border-radius: 999px;
    flex: none;
  }
  .header-cta-mobile svg { width: 20px; height: 20px; }

  /* The drawer locks the page behind it. styles_004.css defines this rule only
     inside its own <=820px block, so the copied drawer needs its own copy or a
     visitor can scroll the page behind the open panel. */
  body.no-scroll { overflow: hidden; }

  .header-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 320px;
    max-width: 85vw;
    width: min(320px, 85vw);
    background: var(--clr-ink);
    padding: 86px 24px 24px;
    padding: calc(var(--header-height) + var(--sp-md)) var(--sp-lg) var(--sp-lg);
    gap: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--trans-normal), visibility 0s;
    z-index: 1500;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  .header-nav.mobile-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--trans-normal), visibility 0s;
  }
  @supports (transform: translateX(1px)) {
    .header-nav { transition: transform var(--trans-normal), visibility 0s linear 0.3s; }
  }

  .header-nav a {
    color: var(--clr-paper);
    padding: var(--sp-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1rem;
    border-radius: 0;
  }
  .header-nav a:hover,
  .header-nav a:focus { background-color: rgba(232, 160, 32, 0.12); color: var(--clr-brand); }
  .header-nav a.active { color: var(--clr-brand); }
  .header-nav a.active::after { left: 0; right: auto; width: 3px; height: 60%; bottom: 20%; }
  .header-nav a.nav-cta {
    margin: var(--sp-md) 0 0;
    text-align: center;
    padding: var(--sp-sm) var(--sp-md);
  }
}

/* Above the drawer ceiling the nine tabs stay inline: trim the letter size
   and the padding just enough that the longest language still fits, and keep
   the Contact pill comfortable to tap (min-height 40px).
   white-space: nowrap is the important line: without it a long label such as
   the Spanish "Estudios de Caso" wraps onto a second line INSIDE its own box
   at about 1200px, which doubles the height of the menu row (measured
   1200x800: nav 52px tall in Spanish, Dutch and Portuguese, 40px in the
   others). With nowrap every tab is one line and either it fits or the
   drawer band above takes over. */
@media screen and (min-width: 1200px) {
  .header-nav { gap: var(--sp-xs); }
  .header-nav a {
    font-size: 0.8rem;
    padding: 5px 7px;
    letter-spacing: 0.3px;
    white-space: nowrap;
  }
  .header-nav a.nav-cta { padding: 6px 13px; min-height: 40px; display: inline-flex; align-items: center; }
  .site-header .header-logo img { height: 52px; } /* 30% larger since 0115 */
}

/* From 1340px up there is room again for the slightly more generous spacing. */
@media screen and (min-width: 1340px) {
  .header-nav a { font-size: 0.82rem; padding: 5px 10px; }
  .header-nav a.nav-cta { padding: 6px 15px; }
}

/* ===========================================================================
   SECTION 2: PAGE FRAME — the glossary page intro band
   =========================================================================== */
.gl-hero .gl-hero-note {
  max-width: 62ch;
  color: var(--gl-muted);
  font-size: 0.95rem;
  margin-top: var(--sp-sm);
}
.gl-hero .gl-hero-title {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: var(--sp-sm);
}

/* ===========================================================================
   SECTION 3: THE TOOLBAR — search box + category chips
   -- Jacques: one input and a row of push-buttons, like a front panel.
   =========================================================================== */
.gl-tools {
  max-width: var(--max-width, 1200px);
  margin: 0 auto var(--sp-lg);
  padding: 0 var(--sp-lg);
}
.gl-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
  margin-bottom: var(--sp-md);
}
.gl-search {
  flex: 1 1 260px;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--clr-ink);
  background: #fff;
  border: 2px solid rgba(20, 22, 26, 0.18);
  border-radius: var(--radius-sm, 6px);
}
.gl-search:focus {
  outline: 2px solid var(--clr-brand);
  outline-offset: 1px;
  border-color: var(--clr-brand);
}
.gl-clear {
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  color: var(--clr-ink);
  background: transparent;
  border: 2px solid rgba(20, 22, 26, 0.18);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
}
.gl-clear:hover, .gl-clear:focus { border-color: var(--clr-brand); }

.gl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gl-chip {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 13px;
  min-height: 40px;
  color: var(--clr-ink);
  background: rgba(20, 22, 26, 0.05);
  border: 1px solid rgba(20, 22, 26, 0.12);
  border-radius: 999px;
  cursor: pointer;
}
.gl-chip:hover, .gl-chip:focus { border-color: var(--clr-brand); }
.gl-chip[aria-pressed="true"] {
  background: var(--clr-ink);
  border-color: var(--clr-ink);
  color: var(--clr-paper);
}
.gl-count {
  margin-top: var(--sp-sm);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gl-muted);
}

/* ===========================================================================
   SECTION 4: THE TWO DATA TABLES (glossary terms + Customers Talks)
   =========================================================================== */
.gl-table-wrap {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}
.gl-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid rgba(20, 22, 26, 0.10);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
}
.gl-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--sp-sm);
  font-size: 0.9rem;
  color: var(--gl-muted);
}
.gl-table th, .gl-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(20, 22, 26, 0.08);
}
.gl-table thead th {
  position: sticky;
  top: var(--header-height-shrink, 56px);
  z-index: 2;
  background: var(--clr-ink);
  color: var(--clr-paper);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: none;
}
.gl-table tbody tr:nth-child(even) { background: rgba(20, 22, 26, 0.025); }
.gl-table tbody tr:hover { background: rgba(232, 160, 32, 0.10); }
.gl-term {
  font-weight: 700;
  color: var(--clr-ink);
  width: 22%;
}
.gl-mean { width: 56%; }
.gl-cat-col { width: 22%; color: var(--gl-muted); font-size: 0.9rem; }

/* Rows the filter has hidden (JS adds .is-hidden; print shows them again) */
.gl-table tr.is-hidden { display: none; }
.gl-empty {
  padding: var(--sp-lg);
  text-align: center;
  color: var(--gl-muted);
}

/* ===========================================================================
   SECTION 5: "CUSTOMERS TALKS" — the second table
   Column 1 is what the customer said (a quote), column 2 what he meant,
   column 3 what it demands of the professional.
   =========================================================================== */
.gl-talks { margin-top: var(--sp-2xl, 3rem); }
.gl-talks-head { max-width: 70ch; }
.gl-talk-asked {
  width: 30%;
  font-style: italic;
  color: var(--clr-ink);
}
.gl-talk-meant { width: 32%; font-weight: 600; }
.gl-talk-demand {
  width: 38%;
  border-left: 3px solid var(--clr-brand);
  padding-left: 14px;
  color: #2b2f36;
}
.gl-talk-demand::before {
  content: "→ ";
  color: var(--clr-brand-deep, #8f5d00);
  font-weight: 700;
}

/* ===========================================================================
   SECTION 6: PHONE / NARROW SCREEN (<= 820px)
   A three-column table cannot be read on a phone, so every row becomes a
   little card: the header text of each column is printed in front of the
   cell with ::before, taken from the cell's data-label attribute.
   =========================================================================== */
@media screen and (max-width: 820px) {
  .gl-table thead { display: none; }
  .gl-table, .gl-table tbody, .gl-table tr, .gl-table td { display: block; width: auto; }
  .gl-table tbody tr {
    border-bottom: 1px solid rgba(20, 22, 26, 0.12);
    padding: 10px 12px;
  }
  .gl-table td {
    border-bottom: none;
    padding: 4px 0;
  }
  .gl-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gl-muted);
    margin-bottom: 2px;
  }
  .gl-talk-demand { border-left: 3px solid var(--clr-brand); padding-left: 10px; }
  .gl-term, .gl-mean, .gl-cat-col, .gl-talk-asked, .gl-talk-meant, .gl-talk-demand { width: auto; }
}

/* ===========================================================================
   SECTION 7: PRINT — a filter must never hide rows on paper
   =========================================================================== */
@media print {
  .gl-tools, .site-header, .site-footer, .skip-link { display: none !important; }
  .gl-table tr.is-hidden { display: table-row !important; }
  .gl-table thead th { position: static; background: #fff; color: #000; }
  .gl-table { border-color: #999; }
  .gl-table td, .gl-table th { page-break-inside: avoid; }
}

/* ===========================================================================
   SECTION 8: SMALL PRINT AND SAFETY
   -- Reduced motion and the "no JavaScript" case stay calm and readable.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gl-table tbody tr:hover { background: inherit; }
}
.gl-nojs {
  max-width: 70ch;
  margin: var(--sp-lg) auto;
  padding: var(--sp-md);
  border: 1px solid rgba(20, 22, 26, 0.15);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  color: var(--clr-ink);
}

/* Content continues in css/styles_011.css if this file ever reaches 480 lines. */