/* TWSS_site/css/TWSS_styles_007.css — www.toptronicwebsites.com
   Generated/Updated on: 2026-09-16T19:30: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
     The third small set of rules added after the site was already dressed:
     the fixes that the MEASUREMENTS of session 0098 forced. Nothing here is
     decoration; every block answers a number.

   WHY IT EXISTS (and why it is not an edit to the earlier files)
     Two rules of this project meet here. First: every file stays below 500
     lines, and TWSS_styles_004.css (499) and TWSS_styles_006.css (481) are
     both full - so a fix ROLLS OVER into the next numbered file instead of
     being squeezed in. Second: never edit a file in a way that hides what
     changed; a new numbered file with a note in the handover is the honest
     way round.

   1. THE HEADER
      Session 0098 added an eighth tab (Features) and measured the result in a
      real browser. With eight tabs the brand, the menu and the globe no longer
      fitted on one 1,100-pixel row: the globe wrapped onto a second line at
      EVERY desktop width, and landed on the LEFT of that line, which is not
      "the top right" Jacques asked for. Measured, in English, at 1280 px:
      brand 102 + menu 756 + globe 224 + the gaps = 1,130 px of content in a
      1,100 px row - 30 px too much.
      The cure is smaller, not different: the menu links lose 4 px of padding
      on each side (64 px in total), the menu's own gap halves, and below
      1,500 px the globe shows its flag and its language but not the country
      NAME (the name is inside the panel anyway, and the flag says it faster).
      Re-measured after this file: one row at 1,152 / 1,280 / 1,366 / 1,512 /
      1,920 px.

   2. THE FIGURES ON A LIGHT SECTION
      The Features page opens on the site's LIGHT background, and the three
      figures there (nine languages, fourteen live sites, zero frameworks) come
      from the shared .stat block, which is written for the DARK hero of the
      home page: near-white text. Near-white on near-white is an invisible
      number. The four rules at the bottom of this file put those three figures
      back in the ink colour, on the two light heads only.

   3. RIGHT TO LEFT
      Both fixes use logical properties only (padding-inline, margin-inline),
      so they mirror in Arabic exactly like the rest of the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE HEADER HOLDS EIGHT TABS AND THE GLOBE ON ONE ROW
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  /* The menu: 4 px less padding on each side of every link (8 links = 64 px
     saved) and a 2 px gap instead of 4 px (14 px more). The links stay a
     comfortable 44 px tall to press: only the horizontal padding moved. */
  .site-nav { gap: 2px; }
  .nav-link { padding-inline: 10px; }
  /* The underline of the page you are on is drawn inside the link, so it must
     follow the new padding or it would stick out past the text. */
  .nav-link.is-active::after { inset-inline: 10px; }
}

@media (min-width: 1000px) {
  /* 16 px between the three groups instead of 24 px, and NO COUNTRY NAME in the
     globe once the menu is a full row of tabs: the flag already says which
     country, and the name is the first line inside the panel.
     MEASURED, and the reason the name is hidden at EVERY desktop width rather
     than above some threshold: the header's content column is 1,180 px wide
     however wide the screen is, and the long German and French tab names
     ("So arbeiten wir", "Notre méthode") need about 100 px more than the
     English ones. With a threshold, German at 1,512 px pushed the globe onto a
     second row again - measured: header 87 px, globe at y=47. A hidden name
     cannot be pushed onto a second row by a language nobody has translated yet. */
  .header__in { column-gap: var(--sp-4); }
  .geo-current { display: none; }
}

@media (max-width: 999px) {
  /* On a phone the menu is behind the button, so the globe shares the row with
     the brand: pushing it to the far end keeps it where a visitor looks for it
     (top right) instead of leaving it next to the brand. */
  .geo { margin-inline-start: auto; }
}

/* --------------------------------------------------------------------------
   2. THE THREE FIGURES ON THE LIGHT HEADS OF THE FEATURES PAGES
   --------------------------------------------------------------------------
   #ft-top is the head of every Features page (features.html, and the three
   pages under the same tab). The shared .stat block is written for a dark
   surface; here it is on paper, so it takes the ink colours. It is the one
   deliberate id selector in this project, and it is used because the head of
   the page is a single element that no class can identify on its own. */
#ft-top .stat__num { color: var(--ink); }
#ft-top .stat__label { color: var(--muted); }
#ft-top .hero__stats { border-color: var(--line); }
#ft-top .stat + .stat { border-inline-start-color: var(--line); }

/* --------------------------------------------------------------------------
   3. THE REUSED PACKAGES BLOCK INSIDE A DEMONSTRATION
   --------------------------------------------------------------------------
   The three price cards are reused on the Features page, where they sit inside a
   panel that has its own padding on top of the page's. MEASURED at 1,152 px, in
   German and French: a card reached 1,166 px, i.e. 14 px past the window edge,
   and the page scrolled sideways. Three fixes, all of them the same idea - let
   the cards shrink:
     * a fluid column rule, so the row drops from three cards to two or one
       whenever there is not room for three;
     * min-inline-size: 0, because a grid item refuses to shrink below its
       content unless it is told to;
     * overflow-wrap, so a long price or a long German word breaks instead of
       pushing the card wider than the screen.
   Nothing here changes the packages page itself: every rule is scoped to the
   demonstration. */
.ft-demo#ft-demo-plans .plans {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.ft-demo#ft-demo-plans .plan {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  padding: clamp(18px, 2.2vw, 30px);
}

/* --------------------------------------------------------------------------
   4. THE ONE CHIP THAT PAYS FOR THE PAGE
   --------------------------------------------------------------------------
   The row of chips at the top of every Features page now ends with the PRICES,
   because the marketing review of this session measured the distance to them:
   with thirty-one demonstrations on four pages and no chip pointing at the
   packages, the only price link sat at the very bottom of the third page.
   The chip is a real link to the packages page, so it is marked as the action it
   is: a slightly filled pill, the same treatment the primary button gets, but no
   louder than the page's own heading. */
.ft-jump__link--cta {
  border-color: var(--brand);
  color: var(--brand);
  /* The brand blue at 8 per cent, written as plain rgba on purpose: color-mix()
     is too new to rely on, and a browser that does not understand it would drop
     the whole declaration. */
  background: rgba(0, 113, 227, .08);
}
.ft-jump__link--cta:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
.ft-jump__link.is-here { border-color: var(--line-2); color: var(--text); background: transparent; }