/*
 * Global navigation: let the header wrap instead of pushing the page wide.
 *
 * The header overflows horizontally at 834 px in German and Dutch - measured
 * on 4 of 22 routes against e7a7086, before any of this release existed. Site
 * search adds a trigger button to `.globalNav`, and the trust page adds a nav
 * link, so the release had to fix the bar before it could add to it.
 *
 * Letting the nav wrap and shrink is the smallest change that stops it: the
 * header grows a little taller on a tablet instead of the page growing wider.
 * Nothing is hidden and nothing has to be scrolled to reach, which is why this
 * is preferred over `overflow-x: auto` on the nav.
 *
 * This is a header fix, not a search feature, so it lives in its own file and
 * loads on EVERY page - including /checkout/, /payment/ and /payment-test/,
 * which deliberately do not load the search bundle. `/payment/` was the one
 * route still overflowing while this rule shipped inside site-search.v1.css.
 */
@media (max-width: 1024px) {
  .globalNav {
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

/*
 * Header cart button: size the label to the button, in every language.
 *
 * The compiled header chunk gives `.globalCart` a 42 px pill but only a 10 px
 * label, so on a 1440 px desktop the word floats inside the blue button
 * (measured on / RO, /en/, /de/, /nl/, /it/ guides: button 42 px tall, label
 * 10 px, "Cart" 20.5 px wide in a 75.5 px button). The owner reported it from
 * the English header. This block scales the label with the button; it touches
 * nothing else - colour, height, radius and the count badge stay as built.
 *
 * Two constraints decide the numbers, both measured against this tree:
 *
 * 1. The longest label is Dutch "Winkelwagen" (61.7 px at 10 px), then German
 *    "Warenkorb" (51.2 px). Both are single words, so they cannot wrap, but a
 *    wider button steals width from `.globalNav`.
 * 2. `.globalNav` only wraps at 1024 px and below. Between 1025 px and about
 *    1115 px the Dutch header already pushes the page wider than the viewport
 *    (75 px of horizontal overflow at 1025 px before this block existed), and
 *    from there to 1240 px the auto margin in front of `.globalActions` is
 *    already down to 0. So the button may only get wider above 1240 px.
 *
 * Hence: full 13.5 px from 1241 px up, where there is 33 px of slack even in
 * Dutch; 12 px with tighter side padding below that, which keeps the Dutch
 * button within ~3 px of the width it has today; and 13 px on phones, where
 * the header is a two-row grid and the actions sit beside a 135 px logo with
 * ~37 px to spare at 390 px. Under 381 px the 12 px step takes over again,
 * because at ~353 px and below the Dutch button already fills the row. The
 * label is never hidden, truncated or allowed to wrap at any width.
 *
 * `.globalActions` is in the selector on purpose: on the homepage the compiled
 * chunk is linked AFTER this file, so a bare `.globalCart` would lose to it.
 */
.globalActions .globalCart {
  font-size: 12px;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 7px;
}

/* The count badge keeps its built size; it must not inherit the bigger label. */
.globalActions .globalCart span {
  flex-shrink: 0;
  align-self: center;
  font-size: 10px;
  line-height: 1;
}

@media (min-width: 1241px) {
  .globalActions .globalCart {
    font-size: 13.5px;
    padding: 0 12px;
  }
}

@media (min-width: 381px) and (max-width: 720px) {
  .globalActions .globalCart {
    font-size: 13px;
    padding: 0 11px;
  }
}

/*
 * Header rows: let the bar get taller instead of getting wider.
 *
 * Two defects, both measured on 16 Sep 2026 against this tree, with the seven
 * nav items that are actually live (the runtime script adds guides, the quota
 * calculator and "about" to the five that are in the HTML) plus the search
 * trigger - eight children in `.globalNav` on every page in every language.
 *
 * 1. Phones. The compiled chunk builds a two-row grid at 720px and below -
 *    `grid-template-rows: 70px 48px; height: 118px` - and the wrap rule at the
 *    top of this file then lets `.globalNav` spill onto a second nav row
 *    inside a grid row that is only 48px tall. At 360px the nav laid out four
 *    items at y50-94 and four more, the search trigger last, at y96-140, while
 *    the header ended at y118 and the breadcrumb started there: the second nav
 *    row sat 22px inside the page content, with the trigger on top of it.
 *    Identical at 390 and 430px, on /, /ghiduri/, /nl/, /de/, /it/ guides and
 *    /en/contact/.
 *
 * 2. Tablets and laptops. `.globalNav` only wrapped at 1024px and below, so
 *    from 1025px up to about 1105px the bar had nowhere to go but sideways:
 *    the document came out +78px wider than the viewport at 1025 and +44px at
 *    1060 on /nl/guides/ and /de/guides/ (which coincidentally lay out to the
 *    same 867px of nav plus actions), +10px at 1025 on /en/contact/ and +3px
 *    on / in Romanian. Between 1025 and 1115px the same squeeze also broke the
 *    two-word items - "Over ons", "Über uns", "Calcolatore quote" - onto a
 *    second line 92px tall inside an 88px header, which again landed on the
 *    breadcrumb even where the page itself did not overflow.
 *
 * Both are the same mistake and get the same answer, the one this file already
 * argues for at the top: the nav may wrap, and the header grows with it.
 * Nothing is hidden, nothing has to be scrolled to reach, no item is dropped
 * and no colour moves.
 *
 * Why 1240px for the upper edge: it is where the cart block above stops
 * needing its tighter step, i.e. the width from which the auto margin in front
 * of `.globalActions` is no longer at 0, so above it the bar has real slack and
 * the built spacing can stand. Below it the gaps are pulled in on a viewport
 * curve rather than a step, which is what keeps Dutch and German on one row:
 * at 1025px the 28px gap becomes 15.9px (7 gaps, 85px back), the 30px nav
 * margin 13.3px, and the 30.8px header padding 20.5px - about 135px recovered
 * against the 124px those two headers were over by. The wrap is still there as
 * the backstop for the language or width where that is not quite enough.
 *
 * `.globalHeader` leads every selector on purpose, and `header.globalHeader`
 * where a one-class rule has to lose: on the homepage the compiled chunk and
 * homepage-v2 are both linked AFTER this file, so a bare `.globalNav` would
 * not win.
 */

@media (min-width: 721px) and (max-width: 1240px) {
  header.globalHeader {
    height: auto;
    min-height: 88px;
    padding-left: clamp(14px, 2vw, 32px);
    padding-right: clamp(14px, 2vw, 32px);
  }

  .globalHeader .globalNav {
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: clamp(10px, 1.55vw, 24px);
    margin-left: clamp(10px, 1.3vw, 24px);
  }

  /* Items keep their own width and move to the next row whole, rather than
     being squeezed until the text breaks mid-item and outgrows the header. */
  .globalHeader .globalNav > * {
    flex: 0 0 auto;
  }

  /*
   * 44px is the touch target the compiled chunk already asks for on phones;
   * using it here too means two wrapped rows come to 90px, so the header grows
   * by 2px rather than by the 154px two rows of the built 34/30 padding would
   * have cost.
   */
  .globalHeader .globalNav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
    letter-spacing: .025em;
    white-space: nowrap;
  }

  .globalHeader .globalActions {
    gap: 6px;
  }
}

@media (max-width: 720px) {
  /*
   * The grid keeps its 70px logo row and its 118px resting height; only the
   * nav row is freed to measure itself. One row of nav still renders at 118px
   * exactly as built, because the auto row stretches into the min-height.
   * Two rows take the header to 158px instead of hanging 22px into the page.
   */
  header.globalHeader {
    grid-template-rows: 70px auto;
    height: auto;
    min-height: 118px;
  }

  .globalHeader .globalNav {
    min-width: 0;
    flex-wrap: wrap;
    align-content: center;
    row-gap: 0;
    column-gap: 0;
  }

  .globalHeader .globalNav > * {
    flex: 0 1 auto;
  }

  /*
   * 9px is the site's floor and what every localised page already uses here;
   * the homepage alone dropped to 8px to buy room inside the fixed 48px row,
   * which this block no longer needs. Side padding goes to the 5px the
   * homepage was already using, which fits one more item per row at 360px.
   */
  .globalHeader .globalNav a {
    font-size: 9px;
    padding-left: 5px;
    padding-right: 5px;
  }
}

/*
 * ...and the logo row, which is what is actually left over at 320px.
 *
 * With the nav free to wrap, the narrow end of the range is decided by the
 * first grid row instead: the 135px logo track plus the widest `.globalActions`
 * - 195px in Dutch, where the cart says "Winkelwagen" - plus the 13px of header
 * padding on each side comes to 356px, and the nav row spans both tracks, so
 * everything below that width pushes the document wide. Measured on
 * /nl/guides/ against a border-box header: +23px at 320, +3px at 340, and it
 * clears at 356 and up (360 has 13px to spare, 390 more).
 *
 * This is not new and it is not the nav's doing - it is the same arithmetic at
 * the old 118px header - but 320px is inside the range this pass has to leave
 * clean, so the logo is allowed to give way, and only when it must: the track
 * may now shrink below 135px and the image rides it down, so from 356px up
 * nothing moves at all and at 320px the mark renders at 99px instead of
 * hanging 23px off the side of the page. It is never clipped and never hidden.
 */
@media (max-width: 720px) {
  .globalHeader .globalLogo {
    width: auto;
    max-width: 135px;
    min-width: 0;
  }

  .globalHeader .globalLogo img {
    width: 100%;
    max-width: 132px;
    height: auto;
  }
}

/*
 * Font variables for the core routes (16 Sep 2026).
 *
 * The compiled chunk sets `body{font-family:var(--font-geist-sans),"Segoe UI",sans-serif}`
 * and defines the three variables only on the module classes the generated
 * pages put on <body> (geist_…__variable, geist_mono_…__variable,
 * chakra_petch_…__variable). The 24 core routes (/, /bulk/, /contact/,
 * /delivery/, /documents/ in every language) ship <body> without those
 * classes, so the variable is undefined, the declaration is dropped at
 * computed-value time and the whole page — header, nav, copy, footer —
 * rendered in the browser's default serif (measured: "Times New Roman").
 * Declaring the same values on :root makes the base rule resolve everywhere;
 * pages that carry the classes are unaffected (identical values, higher
 * specificity). The @font-face rules live in the base chunk every page loads.
 */
:root {
  --font-geist-sans: "Geist", "Geist Fallback";
  --font-geist-mono: "Geist Mono", "Geist Mono Fallback";
  --font-display: "Chakra Petch", "Chakra Petch Fallback";
}