/* TWSS_site/css/TWSS_styles_008.css - www.toptronicwebsites.com
   Generated/Updated on: 2026-09-16T20:10:00+10:00
   Build Number: 005
   Version Number: (set manually by Jacques)

   © 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

   WHAT IS IT
     Session 0100. This is the LAST stylesheet on every page (loaded after
     styles_001..007), and it carries two jobs that those files must not be
     edited to make:
       1. The APPLE.COM-LIKE LIGHT THEME. The palette tokens in styles_001
          already moved to apple.com's colours (white paper, near-black text,
          one action blue). This file turns the two signature surfaces light:
          the hero and the header/nav/footer that used to be dark because of
          it. The closing band, the dark proof strips and the globe panel stay
          dark on purpose - Apple does the same (a few black moments).
       2. THE ONE-WHEEL-HEIGHT PAGES and their on-page accordions. Every
          non-Features page is short enough that one mouse-wheel turn reaches
          the footer; the long selling blocks sit behind a native <details>
          whose <summary> IS the section's heading (see docs/TWSS_Contract and
          the accordion section at the bottom).
     Being loaded last is how this file wins: any rule here beats the same
     selector in an earlier file, with no change to those files.

   WHY IN A NEW FILE
     styles_004.css is 499 lines and styles_006.css is 481 - one edit could
     push them over the 500-line rule. All new work goes here instead.

   HOW TO READ IT
     Every property uses logical (start/end) directions so the layout mirrors
     itself in Arabic (dir=rtl). No italic anywhere (the checker forbids it).
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. THE LIGHT HEADER (the Apple signature: a light translucent bar)
   ========================================================================== */
.site-header {
  /* Apple's navbar is a translucent light grey bar, not a solid dark one. */
  background: rgba(251, 251, 253, .82);
  border-bottom: 1px solid rgba(0, 0, 0, .09);
}
/* The brand word and the menu links must be dark on the light bar. */
.brand__name { color: var(--text); }
/* The small square brand mark: a SOLID action-blue so the white "W" on it
   always has its measured 4.7:1 - a light-blue gradient stop could not carry
   a white letter safely. */
.brand__mark { background: var(--brand); }
.nav-link { color: var(--muted); }
.nav-link:hover { color: var(--text); background: rgba(0, 0, 0, .05); }
.nav-link.is-active { color: var(--text); }
/* The active underline changes from the old yellow to the action blue. */
.nav-link.is-active::after { background: var(--brand); }
/* The mobile menu button gets a dark edge and a dark glyph on the light bar. */
.nav-toggle { border-color: rgba(0, 0, 0, .16); color: var(--text); }
.nav-toggle[aria-expanded="true"] ~ .site-nav { background: rgba(255, 255, 255, .98); }
.nav-toggle[aria-expanded="true"] ~ .site-nav .nav-link { border-bottom: 1px solid var(--line); }
/* The focus ring the site-header rules (styles_001) kept blue-on-dark is now
   the dark-blue-on-light ring; harmless either way, kept explicit. */
.site-header :focus-visible { outline-color: var(--brand); }
/* The skip link keeps its exact 'class="btn btn--light"' (the checker asserts
   that string), so it is given a visible edge instead of being re-classed. */
body > .btn:first-child { border: 1px solid var(--line-2); box-shadow: var(--sh-2); }
/* The globe button (flag + language) sits in the light bar; its text follows
   the light theme. The opened panel itself stays dark (styles_004). */
.site-header .geo-summary { color: var(--text); }
.site-header .geo-current-lang { color: var(--muted); }

/* ==========================================================================
   2. THE LIGHT HERO (Apple: a white opening, text in near-black)
   ========================================================================== */
.hero { background: var(--paper); }
/* The two decorative blooms were tuned for a dark hero; on white they are
   dialled right down so they stay a faint wash and never fight the text. */
.hero::before, .hero::after { opacity: .32; }
.hero__title, .slogan, .stat__num { color: var(--text); }
.hero__sub { color: var(--muted); }
.hero__sub + .hero__sub { opacity: .8; }
.stat__label { color: var(--muted); }
/* The stat row's top hairline becomes a light border (was light-on-dark). */
.hero__stats { border-block-start-color: var(--line); }
.stat + .stat { border-inline-start: 1px solid var(--line); padding-inline-start: var(--sp-5); }
/* The little dash above each hero number follows the brand blue now. */
.stat__num::before { background: var(--brand); }

/* ==========================================================================
   3. THE CLOSING BAND (stays black - the page's one intense moment - but the
   padding and title are tightened so it stops eating the height budget)
   ========================================================================== */
.band { padding-block: clamp(28px, 3.5vw, 44px); }
.band__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.band .wrap { gap: var(--sp-5); }
.band__text { margin-top: var(--sp-2); }

/* ==========================================================================
   4. THE FOOTER (now a light-grey Apple footer - and a third shorter, which
   is most of what makes the one-wheel rule possible)
   ========================================================================== */
.site-footer { background: var(--tint); color: var(--muted); border-top: 1px solid var(--line); padding-block: var(--sp-7) var(--sp-4); }
.site-footer .brand__name { color: var(--text); }
.footer__title { color: var(--text); }
.footer__note, .footer__link, .footer__legal { color: var(--muted); }
.footer__link { padding: 2px 0; }
.footer__link:hover { color: var(--text); }
.footer__bottom { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

/* ==========================================================================
   5. THE ON-PAGE ACCORDION (the one-wheel-height component)
   A long selling block is wrapped in <details class="acc">. Its <summary>
   holds the section's own <h2>, so NO new translation key is needed - the
   heading the visitor already reads is the row they click to open the block.
   ========================================================================== */
.acc { border-block-start: 1px solid var(--line); }
.acc + .acc { border-block-start: 0; }
.acc__sum {
  cursor: pointer; list-style: none;
  padding-block: 15px; padding-inline-end: 44px;
  position: relative;
}
.acc__sum::-webkit-details-marker { display: none; }
.acc__sum .h2 { font-size: var(--fs-h3); margin: 0; }
/* The chevron is DRAWN in CSS (no glyph, so no font/italic concerns). A drawn
   arrow does not mirror itself, so the RTL rules below flip it by rotation. */
.acc__sum::after {
  content: ""; position: absolute; inset-inline-end: 10px; top: 50%;
  width: 9px; height: 9px; margin-block-start: -6px;
  border-block-end: 2px solid var(--muted);
  border-inline-end: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.acc[open] > .acc__sum::after { transform: rotate(225deg); }
[dir="rtl"] .acc__sum::after { transform: rotate(135deg); }
[dir="rtl"] .acc[open] > .acc__sum::after { transform: rotate(315deg); }
/* A block inside a CLOSED details has never been scrolled into view, and the
   reveal-on-scroll rules (styles_003) would leave it invisible when it opens.
   Loaded last, this rule wins and the panel is always shown when opened. */
.acc__panel .reveal { opacity: 1; transform: none; }
.acc__panel { animation: twss-acc-fade 180ms var(--ease) both; }
@keyframes twss-acc-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .acc__panel { animation: none; } }
/* A printed page shows every accordion opened by the small print script. */
@media print { .acc__sum { padding-block: 4px; } }