/* ============================================================
   Nordic Wristbands — typography modernisation layer
   Drop-in override. Load AFTER css/styles.css:
     <link rel="stylesheet" href="/css/nw-modern-type.css">
   Nothing here changes markup. Remove the file to revert.
   ============================================================ */

/* ---- 1. FONT -----------------------------------------------
   One variable family with real weights, replacing the three
   faux families ('Roboto', 'Roboto Medium', 'Roboto Black').

   Self-hosted — no request ever leaves the server, so there is
   no Google Fonts / GDPR exposure. Files live in
   /fonts/archivo/ alongside the SIL Open Font Licence the
   typeface ships under (LICENSE.txt, must stay there).

   One variable file covers weights 100–900, so 400/500/600/700
   /800 all come from a single 35 KB download rather than five
   separate static files.
   ------------------------------------------------------------ */
@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;          /* variable weight axis */
  font-display: swap;
  src: url('/fonts/archivo/archivo-latin-wght-normal.woff2') format('woff2-variations'),
       url('/fonts/archivo/archivo-latin-wght-normal.woff2') format('woff2');
  /* Latin: covers English, Finnish (ä ö å) and German (ü ß) */
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                 U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
                 U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/archivo/archivo-latin-ext-wght-normal.woff2') format('woff2-variations'),
       url('/fonts/archivo/archivo-latin-ext-wght-normal.woff2') format('woff2');
  /* Latin Extended — only downloaded if a page actually uses it */
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                 U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                 U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --nw-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Ink instead of #333 — darker reads as more deliberate */
  --nw-ink:      #0B1416;
  --nw-muted:    #5C6660;
  --nw-line:     rgba(11,20,22,.12);

  /* Existing brand green, plus a deeper tone for text on white
     (#54c048 fails contrast at body size) */
  --nw-green:      #54c048;
  --nw-green-text: #3F8F2E;
}

/* ---- 2. BASE ------------------------------------------------
   The live site sets  body { font: 400 14px/14px 'Roboto' }.
   A 14px line-height on 14px text is the single biggest reason
   everything feels cramped.
   ------------------------------------------------------------ */
body{
  font-family: var(--nw-sans) !important;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--nw-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.header, .main-image .text .head{
  font-family: var(--nw-sans) !important;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;      /* stops orphan words on headlines */
  /* NO color here on purpose: the site puts white headings over
     photos (.header is white by default). Setting a colour here
     turns the hero and every product tile title dark. */
}

p{ line-height: 1.65; }
p + p{ margin-top: 1em; }

/* Measure: no line of body copy longer than ~70 characters */
.home-introduction p,
.news-detail-page p,
.content p{ max-width: 68ch; }

/* ---- 3. HERO ------------------------------------------------
   Currently 72px/59px ALL CAPS Roboto Black, full bleed.
   Caps + 0.82 leading is what dates the page hardest.
   ------------------------------------------------------------ */
.main-image .text .head{
  font: 800 clamp(30px, 4.2vw, 52px)/1.08 var(--nw-sans) !important;
  letter-spacing: -0.025em;
  text-transform: none;          /* sentence case */
  /* 22ch, not the ~17ch that suits English alone: the hero box
     is a fixed height and Finnish and German run much longer.
     At 17ch the Finnish headline hit five lines and jammed up
     against the navbar. 22ch keeps all three languages at
     three lines or fewer. */
  max-width: 22ch;
  margin: 0 auto;
}

/* Sub-headline should be clearly secondary, not a second H1.
   On the live page this is  .main-image .text .accent  — currently
   rendered at nearly the same size as the H1, in caps. */
.main-image .text .accent,
.main-image .text .head.small,
.main-image .text p{
  font: 400 clamp(16px, 1.7vw, 19px)/1.55 var(--nw-sans) !important;
  letter-spacing: 0;
  text-transform: none;
  max-width: 46ch;
  margin: 18px auto 0;
  opacity: .88;
}

/* City strip → small caps label, not a headline */
.main-image .text ul.cities,
.main-image .text ul.cities li,
.main-image .text .locations{
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .78;
}

/* Optional but recommended: a scrim behind the hero text.
   Smaller, lighter type needs help against a busy photo. */
.main-image{ position: relative; }
.main-image > *{ position: relative; z-index: 1; }
.main-image::after{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
              rgba(11,20,22,.55) 0%,
              rgba(11,20,22,.30) 55%,
              rgba(11,20,22,.60) 100%);
  pointer-events: none;
}

/* ---- 4. SECTION HEADINGS ------------------------------------ */
.header{
  font: 800 clamp(24px, 3.2vw, 36px)/1.12 var(--nw-sans) !important;
  letter-spacing: -0.015em;
  text-transform: none;
}
.header.small{
  font-size: clamp(18px, 2vw, 22px) !important;
  letter-spacing: -0.01em;
}

.home-introduction h2{
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}

h3{
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  /* colour left alone — same reason as above */
}

/* Eyebrow / kicker pattern — the one place caps still work.
   Add class="nw-eyebrow" above a heading. */
.nw-eyebrow{
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--nw-green-text);
  margin-bottom: 12px;
}

/* ---- 5. PRODUCT TILES --------------------------------------
   Caps titles laid over busy photos are the second-biggest
   legibility problem. Cap the size, add a scrim, keep caps off.
   ------------------------------------------------------------ */
/* NOTE: tile titles reuse the same .header class as section
   headings, so they must be scoped down separately. */
.square-content .header,
.product-items-list .header,
.products .header{
  font-size: clamp(17px, 1.6vw, 21px) !important;
  line-height: 1.25 !important;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none !important;
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
  padding: 0 14px;
}

/* Same trick as the hero: a light scrim so white text holds up
   over colourful product photography. */
.square-content{ position: relative; }
.square-content > *{ position: relative; z-index: 1; }
.square-content::after{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(11,20,22,.15), rgba(11,20,22,.50));
  pointer-events: none;
}

/* …but keep the section heading above the grid full size */
.popular-products > .header,
.products > .header{
  font-size: clamp(24px, 3.2vw, 36px) !important;
  line-height: 1.12 !important;
  text-shadow: none;
  padding: 0;
  margin-bottom: 28px;
}

/* ---- 6. NAV, BUTTONS, FORMS ---------------------------------
   Nav is 18px uppercase #9d9d9d — low contrast and shouty.
   ------------------------------------------------------------ */
nav a, .navbar a, .main-menu a{
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none !important;
  color: rgba(255,255,255,.82);
}
nav a:hover, .navbar a:hover, .main-menu a:hover{ color: #fff; }

.main-button, .small-button, button, .btn{
  font-family: var(--nw-sans) !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  border-radius: 999px;
  padding: 12px 24px;
  height: auto;
  line-height: 1.2;
  transition: background-color .15s ease, transform .15s ease;
}
.main-button:hover, .small-button:hover{ transform: translateY(-1px); }

.small-button{ font-size: 14px; padding: 10px 18px; }

/* Light inputs. The :not(.dark) matters — the site has its own
   dark search-box variant (.input-text.dark, black background)
   and it must keep its own colours. */
.input-text:not(.dark),
input[type=text]:not(.dark),
input[type=email]:not(.dark),
select, textarea{
  font-family: var(--nw-sans) !important;
  font-size: 15px;
  text-transform: none;
  color: var(--nw-ink);
  background-color: #fff;
  border-radius: 8px;
  border: 1.5px solid var(--nw-line);
  height: auto;
  padding: 11px 14px;
}

/* Dark search box: shape and type only, colours left alone */
.input-text.dark{
  font-family: var(--nw-sans) !important;
  font-size: 15px;
  text-transform: none;
  border-radius: 8px;
  height: auto;
  padding: 11px 14px;
}

.input-text:not(.dark)::placeholder,
input:not(.dark)::placeholder{
  color: var(--nw-muted);
  text-transform: none;
  letter-spacing: 0;
}
.input-text.dark::placeholder{
  text-transform: none;
  letter-spacing: 0;
}

/* Field labels — small caps is right here */
label, .field-label{
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--nw-muted);
}

/* ---- 7. LINKS ----------------------------------------------- */
.home-introduction a,
.content a{
  color: var(--nw-green-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(63,143,46,.35);
  padding-bottom: 1px;
}
.home-introduction a:hover,
.content a:hover{ border-bottom-color: currentColor; }

/* Product category chips under the intro paragraph */
.home-introduction .category-links a{
  display: inline-block;
  border: 1px solid var(--nw-line);
  border-radius: 999px;
  padding: 8px 16px;
  margin: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--nw-ink);
}
.home-introduction .category-links a:hover{ border-color: var(--nw-ink); }

/* ---- 8. MOBILE ---------------------------------------------- */
@media (max-width: 720px){
  body{ font-size: 15.5px; }
  .main-image .text .head{ max-width: 100%; letter-spacing: -0.02em; }
}

/* ---- 9. RETIRE ROBOTO ---------------------------------------
   The navbar, cart and a handful of containers still name
   'Roboto' / 'Roboto Medium' / 'Roboto Black' explicitly, which
   drags three legacy .woff files (~100 KB) onto every page for
   text that should be Archivo. This sweeps them up.

   Glyphicons is the site's only real icon font, so it is the
   one thing excluded — never remove that :not(), or the
   glyphicon characters turn into stray letters.
   ------------------------------------------------------------ */
body *:not([class*="glyphicon"]){
  font-family: var(--nw-sans) !important;
}