/* ============================================================================
   pozornice.hr theme — document resets, and the bridge that carries the old
   page bodies through the migration.

   Three parts:

   1. The document resets the reference build kept in an inline <style> block.
      They belong in a stylesheet, not in header.php.

   2. Two size-only token companions. `font-size: var(--poz-eyebrow)` is invalid
      CSS — the shorthand tokens carry family and line-height too, so the whole
      declaration is dropped and the element silently inherits its size. Rules
      that set their own family need the size on its own.

   3. The bridge. Page bodies are still Elementor content styled by
      pozornice-core, which resolves its colour, type and shape through the
      variable set in pz-foundation.php — 311 uses of var(--color-*), 173 of
      var(--font-*), 150 of var(--type-*), 94 of var(--ls-*). Re-pointing those
      variables at the new tokens means every not-yet-rebuilt page sits inside
      the new chrome without clashing with it, and no module is edited.

      Delete part 3 when the last page has been rebuilt.
   ========================================================================= */

/* ——— 1 · document ——————————————————————————————————————————————— */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--poz-page);
  color: var(--poz-text);
  font-family: var(--poz-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--poz-text); color: #FFFFFF; }

/* The header and utility bar are fixed; the document starts below them. */
main { padding-top: var(--poz-chrome-h); }

/* Screen-reader skip link, visible only when focused. */
.poz-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: var(--poz-3) var(--poz-5);
  background: var(--poz-ink); color: var(--poz-text-on-dark);
  font: var(--poz-label); letter-spacing: var(--poz-track-mono); text-transform: uppercase;
}
.poz-skip:focus { left: var(--poz-3); top: var(--poz-3); }

/* Migration preview chip. */
/* Preview-only furniture. Parked above the contact button on the trailing
   edge — bottom-left sat directly on top of the footer's legal line. */
.poz-flagchip {
  position: fixed; left: 14px; bottom: 14px; z-index: 99999;
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  white-space: nowrap;
  background: var(--poz-ink); color: var(--poz-text-on-dark);
  border: 1px solid var(--poz-line-dark); border-radius: var(--poz-radius-control);
  font: 400 8px/1 var(--poz-font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.72; transition: opacity var(--poz-dur-hover) var(--poz-ease);
}
.poz-flagchip:hover { opacity: 1; }
.poz-flagchip b { font-weight: 400; color: var(--poz-text-3); }
@media print { .poz-flagchip { display: none; } }

/* ——— 2 · size-only token companions —————————————————————————————— */

:root {
  --poz-eyebrow-size:      9px;
  --poz-eyebrow-mono-size: 8px;
  --poz-label-size:        9px;
  --poz-spec-size:         12px;
  --poz-body-size:         14px;
  --poz-body-sm-size:      12px;
  --poz-card-title-size:   12px;
}

/* ——— 3 · bridge for not-yet-rebuilt page bodies ————————————————————
   Every right-hand side is a --poz-* token. No new names, no literals. */

:root {
/* ——— type faces ——————————————————————————————————————————————————— */
--font-display: var(--poz-font-display);   /* Inter 600  → Michroma 400 */
--font-body:    var(--poz-font-body);      /* Inter      → IBM Plex Sans */

/* ——— colour ————————————————————————————————————————————————————————
   The nine category hues in the legacy sheet are already the design's own
   values, so they are deliberately not touched here. */
--color-primary:         var(--poz-accent);
--color-primary-focus:   var(--poz-accent-ink);
--color-primary-on-dark: var(--poz-accent-tint);
--color-navy:            var(--poz-accent-ink);
--color-on-primary:      var(--poz-text-on-dark);

--color-canvas:           var(--poz-page);
--color-canvas-parchment: var(--poz-panel);
--color-surface-pearl:    var(--poz-panel-2);
--color-surface-tile-1:   var(--poz-ink);
--color-surface-tile-2:   var(--poz-ink-2);
--color-surface-tile-3:   var(--poz-ink-3);
--color-surface-black:    var(--poz-ink);

--color-ink:           var(--poz-text);            /* #1d1d1f → #16171B */
--color-body:          var(--poz-text);
--color-body-on-dark:  var(--poz-text-on-dark);
--color-body-muted:    var(--poz-text-on-dark-2);  /* #cccccc → #B3BAC5 */
--color-ink-muted-80:  var(--poz-text-2);          /* #333    → #5F6772 */
--color-ink-muted-48:  var(--poz-text-2);          /* #7a7a7a → #5F6772, 5.3:1 */
--color-logo-gray:     var(--poz-text-3);

--color-hairline:     var(--poz-line);             /* #e0e0e0 → #DFE3E7 */
--color-border-input: var(--poz-line);

/* ——— shape ——————————————————————————————————————————————————————
   Structural radii collapse to 0; the pill becomes the 4px control radius.
   --rounded-full stays 50% — it draws dots and circular marks, not cards. */
--rounded-sm:   var(--poz-radius-structural);
--rounded-md:   var(--poz-radius-structural);
--rounded-lg:   var(--poz-radius-structural);
--rounded-pill: var(--poz-radius-control);
--rounded-full: 50%;

--shadow-product: var(--poz-shadow-product);

/* ——— space —————————————————————————————————————————————————————— */
--space-lg:             var(--poz-5);
--space-section:        var(--poz-section);
--space-section-mobile: var(--poz-section);
--grid-gutter:          var(--poz-5);
--container-grid:       var(--poz-max);
--container-text:       80ch;

/* ——— type scale ——————————————————————————————————————————————————
   Michroma is a wide, monoline display face at a single weight. The legacy
   scale was Inter 600 with negative tracking; both change. Tracking goes
   POSITIVE — negative tracking on Michroma collides the letterforms. */
--type-hero-display: 400 var(--poz-h1)/1.06 var(--poz-font-display);
--ls-hero-display:   var(--poz-track-title);
--type-display-lg:   400 var(--poz-h2)/1.12 var(--poz-font-display);
--ls-display-lg:     var(--poz-track-title);
--type-tagline:      400 var(--poz-h4)/1.3 var(--poz-font-display);
--ls-tagline:        var(--poz-track-title);

--type-lead:       400 var(--poz-h4)/1.5 var(--poz-font-body);
--ls-lead:         normal;
--type-lead-airy:  400 var(--poz-h4)/1.6 var(--poz-font-body);

--type-body:        var(--poz-body);
--ls-body:          normal;
--type-body-strong: 500 var(--poz-body-size)/1.5 var(--poz-font-body);
--type-caption:     var(--poz-body-sm);
--ls-caption:       normal;
--type-caption-strong: 500 var(--poz-body-sm-size)/1.5 var(--poz-font-body);

/* Buttons and utility labels become Michroma 9px uppercase — the tracking and
   casing that make that legible are applied in reset.css, which owns the
   button rules themselves. */
--type-button-large:   var(--poz-eyebrow);
--type-button-utility: var(--poz-eyebrow);
--type-fine-print:     var(--poz-eyebrow-mono);
--ls-fine-print:       var(--poz-track-mono);
}

/* What variables cannot reach: literal pill radii, literal shadows, and the
   casing and tracking that make Michroma legible at 9px. Scoped to the page
   body so none of it can touch the chrome, which is already native. */

.poz-page .pz-card,
.poz-page .pz-card-ghost,
.poz-page .pz-brand-tile,
.poz-page .pz-mega-promo,
.poz-page .pz-stat-item,
.poz-page .pz-sec,
.poz-page .pz-qc-row,
.poz-page .pz-pl-item,
.poz-page .pz-logo-slot,
.poz-page .pz-plx,
.poz-page .pz-plx-canvas,
.poz-page .pz-iso-z,
.poz-page .pz-fieldrow,
.poz-page .pz-dod {
  border-radius: var(--poz-radius-structural);
  box-shadow: none;
}

.poz-page .pz-btn,
.poz-page .pz-btn-dark,
.poz-page .pz-btn-white,
.poz-page .pz-btn-ghost,
.poz-page .pz-btn-outline,
.poz-page .elementor-button,
.poz-page .pz-promo-btn {
  border-radius: var(--poz-radius-control);
  box-shadow: none;
  font: var(--poz-eyebrow);
  letter-spacing: var(--poz-track-btn);
  text-transform: uppercase;
}

.poz-page h1,
.poz-page h2,
.poz-page h3,
.poz-page h4,
.poz-page h5,
.poz-page h6,
.poz-page .elementor-heading-title {
  font-family: var(--poz-font-display);
  font-weight: 400;
  letter-spacing: var(--poz-track-title);
  text-wrap: pretty;
}

/* Elementor's boxed containers are narrower than the design's measure. */
.poz-page .e-con.e-con-boxed > .e-con-inner { max-width: var(--poz-max); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Preview only: keep the flag chip off the footer's legal line. */
body.poz-preview .poz-footer__band--legal { padding-bottom: calc(var(--poz-5) + var(--poz-9) / 2); }

/* ---------------------------------------------------------------------------
   Header, narrow viewports.

   poz-chrome.css swaps the nav for the burger at 1180px but keeps the pill CTA
   at every width. Below ~470px the row no longer fits — logo (168) + gap (32) +
   CTA (171) + gap (14) + burger (44) + padding (40) = 469 — and the burger,
   the only way into navigation on a phone, is pushed off the right edge.

   The drawer opens with the same "Zatraži ponudu" as its primary action, so on
   a phone the header CTA is a duplicate. Drop it and let the burger sit at the
   edge where a thumb expects it. 640px, not 470px, so the row is never merely
   tight.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .poz-header__actions > .poz-btn { display: none; }
  .poz-burger { margin-right: -10px; }   /* optical: align bars, not the box */
}

/* ---------------------------------------------------------------------------
   Drawer rows — box model.

   The package sets box-sizing per component rather than globally, and
   .poz-drawer__item was missed: width:100% plus 20px of side padding makes
   every row 40px wider than the level that holds it, so the drawer carries a
   horizontal scrollbar on every phone. One declaration fixes all of them; the
   overflow-x guard keeps a future stray child from doing it again.
--------------------------------------------------------------------------- */
.poz-drawer__item { box-sizing: border-box; }
.poz-drawer__level { overflow-x: hidden; }