/* ============ ARDOR CATERING — Design tokens ============ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bricolage+Grotesque:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --green: #152F15;
  --green-deep: #0d1e0d;
  --green-soft: #1d3e1d;
  --orange: #ED5600;
  --orange-soft: #f26e24;
  --ember: #c44700;

  --cream: #F5F0E6;
  --cream-warm: #F8E4D0;
  --paper: #FBF8F1;
  --ink: #152F15;
  --ink-soft: #3a4a38;
  --rule: rgba(21, 47, 21, 0.18);
  --rule-soft: rgba(21, 47, 21, 0.08);

  --radius: 28px;
  --radius-sm: 18px;
  --radius-btn: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --display: 'Anton', 'Oswald', Impact, sans-serif;
  --serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --nav-h: 96px;

  --mark-flame-light: url('../img/mark-flame-light.png');
  --mark-flame-dark: url('../img/mark-flame-dark.png');
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Full-screen-panel sections are a HOME-PAGE behaviour only. Other templates
   (Over, Gallerij, Events, Diensten) use a root <section> for ordinary
   scrollable content — locking those to 100dvh + overflow:hidden clipped and
   shifted their layouts. So every rule here is scoped under `body.home`.

   Each home section centres its content and fills the viewport. The nav is
   position:fixed and floats over content — it takes no layout space — so
   sections measure against the FULL viewport, not 100vh minus the nav.
   100dvh (not 100vh) so mobile browser chrome doesn't inflate the height.
   On MOBILE this is a min-height floor: sections grow when grids/forms need
   more than a phone screen. On DESKTOP each section is locked to exactly one
   viewport (see the min-width:901px block below) with content scaled to fit. */
body.home > section {
  min-height: 100vh; /* fallback for browsers without dvh */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Desktop (≥700px tall): every home section fits EXACTLY one viewport.
   Content is scaled to fit via fluid vertical padding and the clamp()-based
   type/grid sizing (see home.css) — the same approach as the hero.
   overflow:hidden guards against a stray pixel of growth. The 700px floor
   covers common 1280×800 / 1440×900 laptops (the scaling in home.css is
   tuned to fit those); below it — tiny stacked windows — the lock comes off
   and sections keep min-height:100dvh and grow instead of clipping. */
@media (min-width: 901px) and (min-height: 700px) {
  body.home > section {
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
}
/* When a home section opens with a flame divider, don't vertically-centre the
   whole stack — that floats the divider into the middle and dumps all the slack
   as a void above it. Pin the divider to the top, keep the content right under
   it (small fluid gap — a centred split left a big void between flame and
   title), and let the leftover height breathe below the content. */
body.home > section:has(> .flame-divider) {
  justify-content: flex-start;
  padding-top: clamp(48px, 7vh, 96px);
}
body.home > section > .flame-divider + * {
  /* Breathing room between the flame and the content on roomy viewports,
     collapsing to zero below ~740px height where every pixel is needed to
     keep the locked section from clipping. */
  margin-top: clamp(0px, calc((100vh - 740px) * 0.12), 40px); /* fallback */
  margin-top: clamp(0px, calc((100dvh - 740px) * 0.12), 40px);
}
body.home > section:has(> .flame-divider) > :last-child {
  margin-bottom: auto;
}

/* Non-home pages: the nav is position:fixed and floats over the page, so the
   FIRST section's content would sit under it (hiding breadcrumbs, jump bars,
   page headings). Reserve the nav's height at the top of the first section.
   The home page is exempt — its hero clears the nav itself. */
body:not(.home) > section:first-of-type {
  scroll-margin-top: var(--nav-h);
  padding-top: calc(var(--nav-h) + 28px);
}
/* Hero is locked to EXACTLY one viewport on every screen — header (fixed,
   floating) + hero read as a single full-screen panel, never taller. It's a
   size query container so its children size themselves as a fraction of the
   hero's OWN height (cqh) — see .hero h1 in home.css. That single mechanism
   lets the title fill the leftover space on phone and desktop alike, with no
   per-breakpoint font overrides. Top padding clears the floating nav. */
body > section.hero {
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh;
  min-height: 0;
  container-type: size;
  padding-top: calc(var(--nav-h) + 24px);
}

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02";
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.18  0 0 0 0 0.08  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

h1, h2, h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.005em;
}

h1 em, h2 em, h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
  text-transform: lowercase;
  letter-spacing: -0.02em;
  font-size: 1.18em;
  line-height: 0.85;
}
h1 { font-size: clamp(64px, 9vw, 148px); }
h2 { font-size: clamp(44px, 5.5vw, 92px); }
h3 { font-size: clamp(22px, 2vw, 32px); }
p { max-width: 60ch; }

/* ============ Type system ============ */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; line-height: 0.92; text-transform: uppercase; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; }
.italic { font-style: italic; }

.accent-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
  letter-spacing: -0.005em;
  line-height: 1;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
  transition: all 0.4s var(--ease);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn .arrow {
  width: 18px; height: 10px;
  position: relative;
  transition: transform 0.4s var(--ease);
}
.btn .arrow::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h16M12 1l4 4-4 4' stroke='black' fill='none' stroke-width='1.5'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h16M12 1l4 4-4 4' stroke='black' fill='none' stroke-width='1.5'/></svg>") no-repeat center / contain;
}
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--green); color: var(--cream); }
.btn-primary:hover { background: var(--orange); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-secondary:hover { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.btn-accent { background: var(--orange); color: var(--paper); }
.btn-accent:hover { background: var(--ember); }

/* ============ Nav ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--green);
  color: var(--cream);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: all 0.3s var(--ease);
}
.nav.on-dark { background: var(--green); }

.nav-brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--cream);
}
.nav-brand img.wordmark {
  height: 64px;
  width: auto;
  display: block;
}

.nav-links { display: flex; gap: 32px; align-items: center; list-style: none; }
.nav-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.7);
  transition: color 0.2s var(--ease);
  position: relative;
}
.nav-link:hover, .nav-link.active, .nav-link.current-menu-item, .nav-link.current_page_item {
  color: var(--cream);
}
.nav-link.active::after,
.nav-link.current-menu-item::after,
.nav-link.current_page_item::after {
  content: '•';
  color: var(--orange);
  margin-left: 6px;
}
.nav-cta { margin-left: 8px; }

/* Hamburger toggle — hidden on desktop, shown in the mobile media query. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 101;
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--cream);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ Footer ============ */
.footer {
  background: var(--green-deep);
  color: var(--cream);
  padding: 100px 40px 40px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 80px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand img { width: 260px; margin-bottom: 0; opacity: 0.95; }
.footer-brand p { color: rgba(245, 240, 230, 0.65); font-size: 15px; margin-top: 18px; max-width: 32ch; }
.footer h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 22px;
  font-weight: 500;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 10px; }
.footer li a { color: rgba(245, 240, 230, 0.75); font-size: 15px; transition: color 0.2s; }
.footer li a:hover { color: var(--orange); }
.footer-address {
  color: rgba(245,240,230,0.5);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.footer-social { margin-top: 16px; }
.footer-bottom {
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(245, 240, 230, 0.45);
  text-transform: uppercase;
}

/* ============ Flame divider ============
   A flow separator at the top of the section it's rendered in: it takes its
   own vertical space (margin above + below) so the rules + flame mark sit in
   clear air between the previous section and this section's content — never
   overlapping either. Not absolutely positioned (that floated it onto the
   adjacent content). */
.flame-divider {
  background: transparent;
  margin: 0 0 clamp(20px, 3vh, 36px);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  pointer-events: none;
}
.flame-divider::before,
.flame-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.18;
  max-width: 380px;
}
.flame-divider img {
  width: 40px;
  height: auto;
  opacity: 0.95;
}

/* ============ Placeholder imagery ============ */
.ph {
  background: var(--green);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 240, 230, 0.5);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.hero .ph, .ph.no-round { border-radius: 0; }
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(237, 86, 0, 0.05) 0, rgba(237, 86, 0, 0.05) 1px, transparent 1px, transparent 14px),
    radial-gradient(ellipse at 30% 20%, rgba(237, 86, 0, 0.18), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(237, 86, 0, 0.12), transparent 55%);
}
.ph-label {
  position: relative;
  z-index: 2;
  padding: 8px 14px;
  border: 1px solid rgba(245, 240, 230, 0.25);
  border-radius: 999px;
}
.ph.warm {
  background: var(--cream-warm);
  color: var(--ink-soft);
}
.ph.warm::before {
  background: repeating-linear-gradient(135deg, rgba(21, 47, 21, 0.04) 0, rgba(21, 47, 21, 0.04) 1px, transparent 1px, transparent 14px);
}
.ph.warm .ph-label { border-color: rgba(21, 47, 21, 0.2); }

/* ============ Empty state ============
   Used wherever a collection (services / courses / events / albums / shots
   / facts / principles) has no content yet. Reusable on light or dark
   surfaces — add .on-dark on dark backgrounds. */
.ardor-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 32px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 auto;
  max-width: 1100px;
}
.ardor-empty::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.ardor-empty.on-dark {
  border-color: rgba(245, 240, 230, 0.18);
  color: rgba(245, 240, 230, 0.72);
}

/* WP admin bar fix — push fixed nav below the bar when logged in */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}

/* Mobile */
@media (max-width: 900px) {
  .nav { padding: 16px 20px; }
  .nav-toggle { display: flex; }

  /* Menu becomes a full-width drawer below the bar. Collapsed by default;
     .nav-links.is-open (toggled by nav JS) slides it down. */
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 24px;
    background: var(--green);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0.3s;
  }
  .admin-bar .nav-links { top: calc(var(--nav-h) + 46px); }
  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.3s var(--ease), opacity 0.25s var(--ease);
  }
  .nav-link { font-size: 14px; padding: 12px 0; }
  .nav-cta { margin: 16px 0 0; align-self: stretch; text-align: center; justify-content: center; }

  h1 { font-size: clamp(54px, 14vw, 90px); }
  h2 { font-size: clamp(38px, 10vw, 64px); }

  /* Flame divider — smaller mark and tight spacing on a phone, and pull the
     section's divider top-padding in so the divider doesn't eat the screen. */
  .flame-divider { margin-bottom: 18px; gap: 14px; padding: 0 20px; }
  .flame-divider img { width: 30px; }
  body.home > section:has(> .flame-divider) { padding-top: 40px; }

  .footer { padding: 80px 24px 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 50px; }
  .footer-bottom { flex-direction: column; gap: 12px; padding-top: 20px; }
}