/* ============================================================
   Jevloerzelfleggen.nl — Design Tokens
   Source: Figma /Ontwerp-2/Design-2.0
   ============================================================ */

/* Webfonts: Aktiv Grotesk is licensed; Inter is the closest free
   substitute on Google Fonts. Roboto stays as-is. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- Brand palette ---------- */
  --jvz-navy:           #001539; /* primary brand surface, headings */
  --jvz-navy-700:       #0D2A50;
  --jvz-navy-500:       #004E91;
  --jvz-navy-300:       #0057A0;

  --jvz-blue:           #016FD0; /* primary CTA */
  --jvz-blue-hover:     #015BAA;
  --jvz-blue-soft:      #1B6CF9;
  --jvz-cyan:           #009ADD; /* tertiary accent */
  --jvz-cyan-soft:      #0097DB;

  --jvz-orange:         #FF7E00; /* highlight / discount / sale */
  --jvz-orange-soft:    #FF7448;
  --jvz-amber:          #FFAE00; /* rating stars */
  --jvz-purple:         #9747FF; /* annotation / dev only */

  --jvz-green:          #34A853; /* success / confirm CTA */
  --jvz-green-700:      #2A8943;

  /* ---------- Neutrals ---------- */
  --jvz-cream:          #F1EFE8; /* page background — signature */
  --jvz-cream-2:        #E4E2DF;
  --jvz-sand:           #EBEBEB;
  --jvz-fog:            #EEEEEE;
  --jvz-line:           #DFDFDF;
  --jvz-line-soft:      #E5E5E5;

  --jvz-ink:            #1D1D1B; /* body copy on cream */
  --jvz-ink-2:          #161616;
  --jvz-fg-1:           #001539; /* primary text */
  --jvz-fg-2:           #444444; /* secondary text */
  --jvz-fg-3:           #6B6B6B; /* muted */
  --jvz-fg-4:           #AAAAAA; /* placeholder */
  --jvz-fg-disabled:    #CCCCCC;

  --jvz-bg:             #FFFFFF;
  --jvz-bg-soft:        #F5F5F7;
  --jvz-bg-cream:       var(--jvz-cream);

  /* ---------- Semantic ---------- */
  --jvz-success:        var(--jvz-green);
  --jvz-warning:        var(--jvz-amber);
  --jvz-danger:         #C0392B;
  --jvz-info:           var(--jvz-blue);

  /* ---------- Shadow ---------- */
  --jvz-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --jvz-shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --jvz-shadow-md: 0 6px 18px rgba(0,0,0,0.08);
  --jvz-shadow-lg: 0 18px 40px rgba(0,21,57,0.12);
  --jvz-shadow-cta: 0 6px 14px rgba(1,111,208,0.30);

  /* ---------- Radii ---------- */
  --jvz-r-xs: 4px;
  --jvz-r-sm: 8px;
  --jvz-r-md: 12px;
  --jvz-r-lg: 16px;
  --jvz-r-xl: 24px;
  --jvz-r-pill: 999px; /* CTA buttons are fully rounded */

  /* ---------- Spacing (4-pt grid) ---------- */
  --jvz-s-1: 4px;
  --jvz-s-2: 8px;
  --jvz-s-3: 12px;
  --jvz-s-4: 16px;
  --jvz-s-5: 20px;
  --jvz-s-6: 24px;
  --jvz-s-8: 32px;
  --jvz-s-10: 40px;
  --jvz-s-12: 48px;
  --jvz-s-16: 64px;
  --jvz-s-20: 80px;
  --jvz-s-24: 96px;

  /* ---------- Type families ---------- */
  --jvz-font-display: "Aktiv Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jvz-font-body:    "Roboto", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jvz-font-ui:      "Aktiv Grotesk", "Inter", system-ui, sans-serif;

  /* ---------- Type scale ---------- */
  /* Display: hero 62px / 56px, page 48 / 40, section 32 / 24 */
  --jvz-fs-display-xl: 62px;
  --jvz-fs-display-lg: 56px;
  --jvz-fs-display-md: 48px;
  --jvz-fs-h1:         40px;
  --jvz-fs-h2:         32px;
  --jvz-fs-h3:         24px;
  --jvz-fs-h4:         20px;
  --jvz-fs-h5:         18px;
  --jvz-fs-body-lg:    18px;
  --jvz-fs-body:       16px;
  --jvz-fs-body-sm:    14px;
  --jvz-fs-caption:    12px;

  --jvz-lh-tight:   1.1;
  --jvz-lh-display: 1.2;
  --jvz-lh-body:    1.5;
  --jvz-lh-loose:   1.65;

  --jvz-fw-regular: 400;
  --jvz-fw-medium:  500;
  --jvz-fw-semi:    600;
  --jvz-fw-bold:    700;
}

/* ============================================================
   Semantic helpers (use these instead of raw vars where possible)
   ============================================================ */

html, body {
  background: var(--jvz-cream);
  color: var(--jvz-fg-1);
  font-family: var(--jvz-font-body);
  font-size: 16px;
  line-height: var(--jvz-lh-body);
  -webkit-font-smoothing: antialiased;
}

.jvz-display-xl,
h1.jvz-hero {
  font-family: var(--jvz-font-display);
  font-weight: var(--jvz-fw-medium);
  font-size: var(--jvz-fs-display-xl);
  line-height: var(--jvz-lh-display);
  letter-spacing: -0.01em;
  color: var(--jvz-fg-1);
}

.jvz-display-lg { font: var(--jvz-fw-medium) var(--jvz-fs-display-lg)/var(--jvz-lh-display) var(--jvz-font-display); letter-spacing: -0.01em; }
.jvz-display-md { font: var(--jvz-fw-medium) var(--jvz-fs-display-md)/var(--jvz-lh-display) var(--jvz-font-display); letter-spacing: -0.005em; }

h1, .jvz-h1 { font: var(--jvz-fw-bold) var(--jvz-fs-h1)/1.2 var(--jvz-font-display); color: var(--jvz-fg-1); }
h2, .jvz-h2 { font: var(--jvz-fw-bold) var(--jvz-fs-h2)/1.25 var(--jvz-font-display); color: var(--jvz-fg-1); }
h3, .jvz-h3 { font: var(--jvz-fw-bold) var(--jvz-fs-h3)/1.3 var(--jvz-font-display); color: var(--jvz-fg-1); }
h4, .jvz-h4 { font: var(--jvz-fw-bold) var(--jvz-fs-h4)/1.4 var(--jvz-font-display); color: var(--jvz-fg-1); }
h5, .jvz-h5 { font: var(--jvz-fw-semi) var(--jvz-fs-h5)/1.4 var(--jvz-font-display); color: var(--jvz-fg-1); }

/* Footer is on a navy surface (color: #fff). The heading rules above forced
   .widget-title (an <h3>) to navy, making it invisible against the navy bg.
   Let footer headings inherit the surface color instead. */
.site-footer h3, .site-footer h4, .site-footer h5,
.site-footer .jvz-h3, .site-footer .jvz-h4, .site-footer .jvz-h5 { color: inherit; }

.jvz-lead { font: var(--jvz-fw-regular) var(--jvz-fs-body-lg)/var(--jvz-lh-loose) var(--jvz-font-body); color: var(--jvz-fg-2); }
.jvz-body  { font: var(--jvz-fw-regular) var(--jvz-fs-body)/var(--jvz-lh-body) var(--jvz-font-body); color: var(--jvz-ink); }
.jvz-small { font: var(--jvz-fw-regular) var(--jvz-fs-body-sm)/var(--jvz-lh-body) var(--jvz-font-body); color: var(--jvz-fg-2); }
.jvz-caption { font: var(--jvz-fw-regular) var(--jvz-fs-caption)/1.4 var(--jvz-font-body); color: var(--jvz-fg-3); letter-spacing: 0.02em; }
.jvz-eyebrow { font: var(--jvz-fw-bold) var(--jvz-fs-body-sm)/1.4 var(--jvz-font-display); color: var(--jvz-orange); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Buttons (stop-reach for designs) ---------- */
.jvz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 16px 32px; min-height: 56px;
  border-radius: var(--jvz-r-pill);
  font: var(--jvz-fw-bold) var(--jvz-fs-body)/1.5 var(--jvz-font-display);
  border: 0; cursor: pointer; transition: filter .15s, transform .05s ease, box-shadow .15s;
  text-decoration: none;
}
.jvz-btn:active { transform: translateY(1px); }
.jvz-btn-primary   { background: var(--jvz-blue); color: #fff; box-shadow: var(--jvz-shadow-cta); }
.jvz-btn-primary:hover { background: var(--jvz-blue-hover); }
.jvz-btn-success   { background: var(--jvz-green); color: #fff; }
.jvz-btn-success:hover { background: var(--jvz-green-700); }
.jvz-btn-secondary { background: var(--jvz-navy); color: #fff; }
.jvz-btn-secondary:hover { filter: brightness(1.15); }
.jvz-btn-ghost     { background: transparent; color: var(--jvz-fg-1); border: 1.5px solid var(--jvz-fg-1); }
.jvz-btn-ghost:hover { background: var(--jvz-fg-1); color: #fff; }
.jvz-btn-link      { background: transparent; color: var(--jvz-blue); padding: 0; min-height: 0; }

.jvz-btn-sm { min-height: 40px; padding: 10px 20px; font-size: 14px; }


/* ============================================================
   Header mega-menu — Producten dropdown
   Injected via `walker_nav_menu_start_el` filter; shows the same
   3 cards from `home_category_cards` ACF as the home page.
   ============================================================ */
.menu-item.has-mega-menu { position: relative; }
.menu-item.has-mega-menu .jvz-mega-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 4px);
	min-width: 920px;
	max-width: 1100px;
	background: #fff;
	border: 1px solid var(--jvz-line);
	border-radius: var(--jvz-r-lg);
	box-shadow: var(--jvz-shadow-lg);
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 12px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
	z-index: 100;
}
.menu-item.has-mega-menu:hover .jvz-mega-menu,
.menu-item.has-mega-menu:focus-within .jvz-mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 4px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
}
.jvz-mega-menu__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
/* Mega-menu reuses `.jvz-home-cat*` styles from home.css — but home.css only
   loads on the front-page. We need the same selectors styled globally so the
   dropdown looks correct on every page. Keep this ONE block in sync with
   the home equivalent in home.css if you ever change either. */
.jvz-mega-menu .jvz-home-cats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 900px) {
	.menu-item.has-mega-menu .jvz-mega-menu { display: none; }
	/* Hide the legacy navy "Vloeren tegen groothandelsprijzen / Hulp nodig?" top
	   announcement bar on mobile — saves vertical space, mockup omits it. */
	.top-header { display: none; }
}