/* =============================================================================
   Vegepörssi — main.css
   Load order:
     1. Reset
     2. Tokens (re-alias WP custom vars)
     3. Base / typography
     4. Layout helpers + utilities
     5. Block styles

   Breakpoints (desktop-first, max-width):
     --bp-mobile : 767px  — canonical mobile breakpoint; all content collapses here
     850px       — nav collapses to hamburger (theme override; WP core default is 600px)
   ============================================================================= */

/* ── 1. RESET ──────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  min-height: 100dvh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Display headings: manual hyphens only — no automatic hyphenation, but
   explicit soft hyphens (U+00AD) placed in content are respected */
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-hyphens: manual;
  hyphens: manual;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ── 2. TOKENS ─────────────────────────────────────────────────────────────── */

:root {
  /* Palette — re-alias from WP-generated custom vars */
  --vp-black: var(--wp--custom--color-black, #000000);
  --vp-yellow: var(--wp--custom--color-yellow, #ffb700);
  --vp-cream: var(--wp--custom--color-cream, #fff5db);
  --vp-white: var(--wp--custom--color-white, #ffffff);

  /* Semantic roles */
  --bg-primary: var(--vp-black);
  --bg-brand: var(--vp-yellow);
  --bg-mat: var(--vp-white);
  --fg-display: var(--vp-yellow);
  --fg-body: var(--vp-yellow);
  --fg-body-cream: var(--vp-cream);
  --fg-on-brand: var(--vp-black);

  /* Typography */
  --font-display: var(--wp--preset--font-family--display);
  --font-display-narrow: var(--wp--preset--font-family--display-narrow);
  --font-body: var(--wp--preset--font-family--body);
  --font-graffiti: var(--wp--preset--font-family--graffiti);

  /* Spacing shorthands */
  --space-1: var(--wp--preset--spacing--1, 4px);
  --space-2: var(--wp--preset--spacing--2, 8px);
  --space-3: var(--wp--preset--spacing--3, 16px);
  --space-4: var(--wp--preset--spacing--4, 24px);
  --space-5: var(--wp--preset--spacing--5, 32px);
  --space-6: var(--wp--preset--spacing--6, 40px);
  --space-7: var(--wp--preset--spacing--7, 80px);
  --space-8: var(--wp--preset--spacing--8, 140px);

  /* Left edge of the centered 1440px content box — lines up full-bleed carousel
     tracks with titles/headings that sit in .vp-section-inner */
  --vp-rail-offset: max(var(--space-6), calc((100vw - 1440px) / 2 + var(--space-6)));

  /* Misc */
  --tracking-caps: var(--wp--custom--tracking-caps, 0.04em);
  --transition: var(--wp--custom--transition, 200ms ease);
  --focus-ring: 2px solid var(--vp-yellow);
  --focus-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 3. BASE / TYPOGRAPHY ──────────────────────────────────────────────────── */

body {
    background-color: var(--vp-cream);
    color: var(--vp-black);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.1;
}

/* Mobile/Text/lg = 16px; Mobile/Display/3xl = 48px (h2); h1 steps down from 128px */
@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: clamp(44px, 15vw, 60px);
  }

  h2 {
    font-size: var(--wp--preset--font-size--4xl); /* 48px */
  }

  /* Core's .has-*-font-size preset rules carry !important, so the element
     rules above never reach headings sized via a fontSize preset (e.g. the
     post title's 5xl). Step the large presets down per class. Mobile values
     interpolated from DS anchors (hero→60, 5xl→48) — confirm in DS. */
  .has-hero-font-size { font-size: clamp(44px, 15vw, 60px) !important; }
  .has-7-xl-font-size { font-size: 56px !important; }
  .has-6-xl-font-size { font-size: 52px !important; }
  .has-5-xl-font-size { font-size: 48px !important; }
  .has-4-xl-font-size { font-size: 40px !important; }
}

/* Pages built entirely from custom blocks override the cream default via their own block backgrounds */
.wp-site-blocks {
  background-color: inherit;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

a {
  transition: color var(--transition);
}

/* Kicker / eyebrow */
.vp-kicker {
  font-family: var(--font-body);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--vp-cream);
}

/* Graffiti accent text (Dx Burst) */
.vp-graffiti {
  font-family: var(--font-graffiti);
  font-weight: 400;
  text-transform: uppercase;
}

/* Prose content — article pages
   Flat selectors (no CSS nesting) for older mobile Safari compat.
   .vp-single-post prefix raises specificity to 0-2-0 to beat WP core's
   :root :where(.is-layout-constrained) > * { margin: 0 } (specificity 0-1-0)
   which loads after this file and zeros all child margins. */
.vp-single-post .wp-block-post-content > * + *,
.vp-single-post .entry-content > * + * {
  margin-block-start: var(--space-4);
}

.vp-single-post .wp-block-post-content > h2,
.vp-single-post .wp-block-post-content > h3,
.vp-single-post .wp-block-post-content > h4,
.vp-single-post .entry-content > h2,
.vp-single-post .entry-content > h3,
.vp-single-post .entry-content > h4 {
  margin-block-start: var(--space-7);
}

.wp-block-post-content > [class*="wp-block-vegeporssi"],
.entry-content > [class*="wp-block-vegeporssi"] {
  margin-block-start: 0;
}

.wp-block-post-content > *:last-child:not([class*="vegeporssi"]),
.entry-content > *:last-child:not([class*="vegeporssi"]) {
  margin-block-end: var(--space-7);
}

.wp-block-post-content a,
.entry-content a {
  color: var(--vp-black);
  text-decoration: underline;
}

.wp-block-post-content a:hover,
.entry-content a:hover {
  color: var(--vp-black);
  text-decoration: none;
}

.wp-block-post-content ul,
.wp-block-post-content ol,
.entry-content ul,
.entry-content ol {
  padding-inline-start: 1.5em;
  list-style: revert;
}

.wp-block-post-content li + li,
.entry-content li + li {
  margin-block-start: 0.25em;
}

.wp-block-post-content blockquote:not(.vp-testimonials__quote),
.entry-content blockquote:not(.vp-testimonials__quote) {
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--vp-yellow);
  color: var(--vp-black);
  font-style: italic;
}

.wp-block-post-content pre,
.wp-block-post-content code,
.entry-content pre,
.entry-content code {
  font-family: var(--font-body);
  font-size: 0.875em;
}

.wp-block-post-content pre,
.entry-content pre {
  padding: var(--space-3);
  background: #111111;
  overflow-x: auto;
}

.wp-block-post-content hr,
.entry-content hr {
  border: none;
  border-block-start: 1px solid rgba(255, 183, 0, 0.3);
}

.wp-block-post-content table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-post-content th,
.wp-block-post-content td,
.entry-content th,
.entry-content td {
  padding: 0.5em 0.75em;
  text-align: start;
  border-block-end: 1px solid rgba(255, 183, 0, 0.3);
}

.wp-block-post-content th,
.entry-content th {
  font-weight: 700;
  color: var(--vp-black);
}

/* Body paragraphs: hyphenate long Finnish words in narrow text columns */
.vp-single-post .wp-block-post-content p {
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ── 4. LAYOUT HELPERS + UTILITIES ────────────────────────────────────────── */

.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Shared inner wrapper — constrains content width without capping full-bleed section backgrounds */
.vp-section-inner {
  max-width: 1440px;
  margin-inline: auto;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 0.75em 1.25em;
  background: var(--vp-yellow);
  color: var(--vp-black);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 0;
}

/* Colour utilities */
.text-yellow {
  color: var(--vp-yellow);
}
.text-cream {
  color: var(--vp-cream);
}
.text-black {
  color: var(--vp-black);
}
.text-white {
  color: var(--vp-white);
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.lowercase {
  text-transform: lowercase;
  letter-spacing: var(--tracking-caps);
}

.bg-black {
  background-color: var(--vp-black);
  color: var(--vp-yellow);
}
.bg-yellow {
  background-color: var(--vp-yellow);
  color: var(--vp-black);
}
.bg-cream {
  background-color: var(--vp-cream);
  color: var(--vp-black);
}
.bg-white {
  background-color: var(--vp-white);
  color: var(--vp-black);
}

/* ── 5. BLOCK STYLES ───────────────────────────────────────────────────────── */

/* ─ Button base ─────────────────────────────────────────────────────────────── */

.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  border-radius: 0;
  transition:
    background-color var(--transition),
    color var(--transition),
    outline-color var(--transition);
  cursor: pointer;
}

/* Primary — yellow fill, black label */
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link {
  background-color: var(--vp-yellow) !important;
  color: var(--vp-black) !important;
  border: none;
}

.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link:hover {
  background-color: var(--vp-black) !important;
  color: var(--vp-yellow) !important;
  box-shadow: inset 0 0 0 1.5px var(--vp-yellow);
}

/* Secondary — black fill, cream label */
.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: var(--vp-black) !important;
  color: var(--vp-cream) !important;
  border: none;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  color: var(--vp-yellow) !important;
}

/* Tertiary — black fill, cream label, wider */
.wp-block-button.is-style-tertiary .wp-block-button__link {
  background-color: var(--vp-black) !important;
  color: var(--vp-cream) !important;
  border: none;
  padding: 0 40px;
}

.wp-block-button.is-style-tertiary .wp-block-button__link:hover {
  color: var(--vp-yellow) !important;
}

/* Text — label only, no fill */
.wp-block-button.is-style-text .wp-block-button__link {
  background-color: transparent;
  color: var(--vp-yellow);
  border: none;
  padding: 0;
  min-height: auto;
  text-decoration: none;
}

.wp-block-button.is-style-text .wp-block-button__link:hover {
  color: var(--vp-yellow);
}

/* Strip underline from button links regardless of wrapper context */
.wp-block-button__link {
  text-decoration: none !important;
}

/* ─ Group section styles ─────────────────────────────────────────────────────── */

/* Dark section — black canvas, yellow text */
.wp-block-group.is-style-dark {
  background-color: var(--vp-black);
  color: var(--vp-yellow);
}

/* Brand section — yellow canvas, black text */
.wp-block-group.is-style-yellow {
  background-color: var(--vp-yellow);
  color: var(--vp-black);
}

/* News/UUTUUS card — solid yellow block, flat, sharp */
.wp-block-group.is-style-card {
  background-color: var(--vp-yellow);
  color: var(--vp-black);
  border-radius: 0;
}

/* ─ Columns block ─────────────────────────────────────────────────────────────── */

.wp-block-columns {
  margin-block: var(--space-7);
}

/* ─ Heading block ─────────────────────────────────────────────────────────────── */

h1.wp-block-heading {
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
}

/* page.html pages: scale the H1 proportionally rather than using the hero 128px
   default from theme.json. !important needed to override WP core's preset classes. */
.vp-page-content h1.wp-block-heading {
  font-size: clamp(40px, 7vw, 80px) !important;
}

h2.wp-block-heading {
  margin-bottom: var(--space-6);
}

/* ─ Image — mat (white backing behind cut-out produce photos) ─────────────────── */

.wp-block-image.is-style-mat img {
  background-color: var(--vp-white);
  padding: var(--space-3);
}

/* ── 6. HEADER / NAVIGATION / FOOTER ──────────────────────────────────────── */

/* ── Footer ── */

footer.wp-block-template-part {
  background-color: var(--vp-yellow);
  color: var(--vp-black);
}

footer.wp-block-template-part a {
  color: var(--vp-black);
  text-decoration: none;
}

footer.wp-block-template-part a:hover {
  text-decoration: underline;
}

.footer-main {
  padding: clamp(40px, 5.5vw, 96px) clamp(20px, 2.9vw, 50px) 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.footer-contact {
  display: flex;
  gap: 32px;
  align-items: center;
  width: 100%;
}

.footer-contact-item {
  flex: 1;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.1;
}

.footer-tomantti {
  flex-shrink: 0;
  width: 27px;
  height: auto;
  color: var(--vp-black);
  padding-bottom: 8px;
}

.footer-social {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-shrink: 0;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--vp-black);
  border-radius: 50%;
  color: var(--vp-black);
  text-decoration: none !important;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.footer-social-link:hover {
  background-color: var(--vp-black);
  color: var(--vp-yellow);
  text-decoration: none !important;
}

.footer-wordmark {
  width: 100%;
}

.footer-wordmark img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-bottom {
  padding: clamp(24px, 2.8vw, 48px) clamp(20px, 13.9vw, 240px);
}

.footer-bottom-inner {
  display: flex;
  gap: 80px;
  align-items: center;
  justify-content: center;
}

.footer-certs {
  display: flex;
  gap: 80px;
  align-items: center;
  flex-shrink: 0;
}

.footer-cert {
  height: 60px;
  width: auto;
  display: block;
}

.footer-cert--oiva {
  width: 58px;
  object-fit: contain;
}

.footer-legal {
  display: flex;
  gap: 32px;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.1;
  flex-wrap: wrap;
}

/* Mobile footer */
@media (max-width: 767px) {
  .footer-main {
    padding: 40px 20px 20px;
  }

  .footer-contact {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }

  .footer-contact-item {
    flex: none;
    width: 100%;
  }

  .footer-social {
    justify-content: center;
    gap: 24px;
    width: 100%;
    align-items: center;
  }

  .footer-bottom {
    padding: 0 20px 20px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .footer-certs {
    gap: 24px;
    width: 100%;
    justify-content: center;
  }

  .footer-cert {
    height: auto;
    max-height: 60px;
    flex: 1;
    max-width: 120px;
    object-fit: contain;
  }

  .footer-cert--oiva {
    flex: none;
    width: 60px;
    height: 60px;
    object-fit: contain;
  }

  .footer-legal {
    justify-content: center;
    gap: 16px;
  }
}

/* Fixed header — floats above content, out of document flow */
header.wp-block-template-part {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.69) 99.04%);
}

/* Progressive blur: strongest at top, fades out toward bottom */
header.wp-block-template-part::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(35px);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* Offset fixed header below WP admin bar when logged in */
.admin-bar header.wp-block-template-part {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar header.wp-block-template-part {
    top: 46px;
  }
}

/* Pages with any VP block get a gradient header so it blends into full-bleed sections */
body:has([class*="vp-"]) header.wp-block-template-part {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.69) 100%
  );
}

/* Pages with no VP blocks need top padding to clear the fixed header */
main.wp-block-group:not(.vp-page-content):not(:has([class*="vp-"])) {
  padding-top: var(--wp--preset--spacing--8);
}

/* page.html pages need the header offset when the page starts with core text
   blocks. Pages that open with a vp- block (e.g. a full-bleed hero) skip the
   padding so the hero intentionally slides under the fixed header. */
.vp-page-content:not(:has(.entry-content > [class*="vp-"]:first-child)) {
  padding-block-start: var(--wp--preset--spacing--8);
}

/* Inner row — DS max-width and clamped padding */
.site-header-inner {
  max-width: 1728px;
  margin-inline: auto;
  padding: 26px clamp(20px, 4vw, 56px);
}

/* Logo: match nav label font-size (17px) */
.site-header-inner .wp-block-site-logo img {
  height: 19px;
  width: auto;
}

/* Navigation wrapper — reset WP background */
.site-header-inner .wp-block-navigation,
.site-header-inner .wp-block-navigation__container {
  background: transparent !important;
}

/* Gap between items */
.site-header-inner .wp-block-navigation__container {
  gap: clamp(14px, 2vw, 30px);
}

/* Nav link base */
.site-header-inner .wp-block-navigation a.wp-block-navigation-item__content {
  color: var(--vp-yellow) !important;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  padding-block: 0;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.15s;
}

/* Override WP core's overflow-wrap: break-word — applied as inline style, needs !important */
.site-header-inner .wp-block-navigation .wp-block-navigation-item__label {
  overflow-wrap: normal !important;
  white-space: nowrap !important;
}

/* Hover — swap label into Dx Burst graffiti face */
.site-header-inner
  .wp-block-navigation
  a.wp-block-navigation-item__content:hover {
  font-family: var(--font-graffiti);
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  opacity: 1;
}

/* Active / current-page — Burst face, full opacity, no underline */
.site-header-inner
  .wp-block-navigation
  .current-menu-item
  > a.wp-block-navigation-item__content {
  font-family: var(--font-graffiti);
  font-weight: 400;
  font-size: 14px;
  opacity: 1;
}

/* Tomantti / close buttons — SVG uses currentColor, must be set explicitly */
.site-header-inner .wp-block-navigation__responsive-container-open {
  color: var(--vp-yellow);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Close button: positioned in overlay top-right corner */
.site-header-inner .wp-block-navigation__responsive-container-close {
  color: var(--vp-black);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  position: absolute;
  right: 27.201px;
  top: 32px;
  z-index: 1;
}

/* Tomantti icon: size the injected SVG */
.site-header-inner .wp-block-navigation__responsive-container-open svg {
  display: block;
  height: 30px;
  width: auto;
  max-width: none;
}

/* ── MOBILE NAV + OVERLAY (≤850px) ─────────────────────────────────────────── */

/* JS-injected elements: hidden by default, shown only inside mobile overlay */
.vp-mobile-menu-heading,
.vp-mobile-contact-btn {
  display: none;
}

@media (max-width: 850px) {
  /* Centre logo and hamburger vertically (desktop uses flex-end) */
  .site-header-inner {
    align-items: center !important;
  }

  /* Show hamburger button */
  .site-header-inner .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  /* Hide nav items — targets both the --hidden-by-default container and any
     direct __container WP renders outside it for the inline desktop view */
  .site-header-inner
    .wp-block-navigation__responsive-container--hidden-by-default:not(
      .is-menu-open
    ),
  .site-header-inner .wp-block-navigation__container {
    display: none !important;
  }

  /* Restore items inside the open overlay (higher specificity wins) */
  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    display: flex !important;
  }

  /* Hide floating contact trigger — in-menu button takes over */
  .vp-contact-trigger {
    display: none !important;
  }

  /* Close button: positioned in overlay top-right corner */
  .site-header-inner .wp-block-navigation__responsive-container-close {
    color: var(--vp-black);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    position: absolute;
    right: 27.201px;
    top: 32px;
    z-index: 1;
  }

  /* Yellow background — !important beats WP core inline styles */
  .site-header-inner .wp-block-navigation__responsive-container.is-menu-open,
  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-close,
  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog {
    background-color: var(--vp-yellow) !important;
  }

  /* Dialog: left-aligned column, full height, 80px/32px padding */
  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 100%;
    padding: 80px 32px;
    box-sizing: border-box;
  }

  /* Override WP core padding-top on the container-content wrapper */
  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    padding-top: 0 !important;
  }

  /* MENÚ heading */
  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .vp-mobile-menu-heading {
    display: block;
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 800;
    line-height: 105%;
    text-transform: uppercase;
    color: var(--vp-black);
    padding-bottom: 66px;
  }

  /* Nav list: left-aligned column, 32px gaps */
  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }

  /* Nav links */
  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    a.wp-block-navigation-item__content {
    color: var(--vp-black) !important;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0;
    border: none;
    opacity: 1;
  }

  /* Contact button: full-width black box */
  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .vp-mobile-contact-btn {
    display: flex;
    height: 48px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    padding: 14px 12px;
    margin-top: 66px;
    background: var(--vp-black);
    border: none;
    cursor: pointer;
    color: var(--vp-cream);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    text-align: center;
  }
}

/* ── 7. POST CARD COMPONENT ────────────────────────────────────────────────── */

/* Shared by vegeporssi/posts-carousel and vegeporssi/posts-grid */

.vp-post-card {
  background-color: var(--vp-yellow);
  color: var(--vp-black);
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 14px;
  transition: 300ms margin, 300ms padding;
}

.vp-post-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vp-post-card__kicker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.1;
    color: var(--vp-black);
}

.vp-post-card__category,
.vp-post-card__date {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--vp-black);
}

.vp-post-card__title {
  font-family: var(--font-display-narrow);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.05;
  text-transform: none;
  margin: 0;
}

.vp-post-card__title a {
  color: var(--vp-black) !important;
  text-decoration: none !important;
}

.vp-post-card__title a:hover {
  color: var(--vp-black) !important;
  text-decoration: underline !important;
}

.vp-post-card__img-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
}

.vp-post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background-color: var(--vp-white);
  transition: 300ms transform;
}

.vp-post-card:hover {
  margin: -5px;
  padding: 25px;
  .vp-post-card__img {
    transform: scale(1.1);
  }
}

/* ── 8. SINGLE POST ────────────────────────────────────────────────────────── */

/* Article section: cream bg, black text */
.vp-single-post {
  background-color: var(--vp-cream) !important;
  color: var(--vp-black) !important;
  padding-block: clamp(60px, 6.9vw, 120px);
}

/* Header group: date + title stacked, centered */
.vp-single__header {
  text-align: center;
}

/* Date: muted, body font */
.vp-single-post .wp-block-post-date {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.1;
  color: var(--vp-black) !important;
  opacity: 0.5;
  text-align: center;
}

.vp-single-post .wp-block-post-date a {
  color: var(--vp-black) !important;
  text-decoration: none;
}

/* Title: large display, uppercase, black */
.vp-single-post .wp-block-post-title {
  color: var(--vp-black) !important;
  font-family: var(--font-display-narrow);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.85;
}

/* Featured image: centred, constrained to ~576px */
.vp-single__hero {
  margin-inline: auto;
  max-width: 576px;
  width: 100%;
}

.vp-single__hero figure,
.vp-single__hero img {
  max-width: 100%;
  height: auto;
}

/* Post content: body text is black on cream */
.vp-single__content,
.vp-single-post .wp-block-post-content {
  color: var(--vp-black);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.1;
}

.vp-single-post .wp-block-post-content a {
  color: var(--vp-black);
  text-decoration: underline;
}

.vp-single-post .wp-block-post-content a:hover {
  color: var(--vp-black);
  text-decoration: none;
}

/* In-content subheadings: Roslindale Display Condensed, uppercase (Figma: Display Condensed Black) */
/* Figma shows one explicit subheading level at 24px/leading-none. We scale h2 and h3 up from that anchor. */
.vp-single-post .wp-block-post-content h2,
.vp-single-post .wp-block-post-content h3,
.vp-single-post .wp-block-post-content h4 {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--vp-black) !important;
  text-transform: uppercase;
}

.vp-single-post .wp-block-post-content h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 0.95;
}

.vp-single-post .wp-block-post-content h3 {
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 0.95;
}

/* h4 matches Figma's explicit 24px subheading (Display Condensed Black, leading-none) */
.vp-single-post .wp-block-post-content h4 {
  font-size: 24px;
  line-height: 1;
}

/* ── 9. PLAIN PAGE CONTENT (seloste/policy pages via page.html) ─────────────── */

/* Prose spacing — skip alignfull, custom blocks, and columns (columns get var(--space-7) below) */
.vp-page-content .wp-block-post-content > * + *:not([class*="wp-block-vegeporssi"]):not(.alignfull):not(.wp-block-columns) {
  margin-block-start: var(--space-4);
}

/* Columns blocks: restore gap between stacked column items — theme.json sets
   blockGap:0 globally, which zeroes --wp--style--block-gap and collapses all
   column gaps to 0. Page content columns need breathing room. */
.vp-page-content .wp-block-post-content .wp-block-columns {
  margin-top: var(--space-7);
  gap: var(--space-7);
}

.vp-page-content .wp-block-post-content > h1,
.vp-page-content .wp-block-post-content > h2,
.vp-page-content .wp-block-post-content > h3,
.vp-page-content .wp-block-post-content > h4 {
  margin-block-start: var(--space-7);
}

/* ── 10. HUBSPOT FORM BRAND FONTS ──────────────────────────────────────────── */

/* hbspt.forms.create() injects native HTML (no iframe) — these selectors target it */
.hs-form fieldset,
.hs-form .hs-form-field,
.hs-form label,
.hs-form input,
.hs-form textarea,
.hs-form select {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
}

.hs-form .hs-button {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-caps) !important;
  background-color: var(--vp-yellow) !important;
  color: var(--vp-black) !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
}

/* ── 6. FLOATING CONTACT BUTTON & PANEL ────────────────────────────────────── */

.vp-scroll-lock {
    overflow: hidden;
}

.vp-contact-trigger {
  position: fixed;
  bottom: var(--space-6);
  right: 0;
  z-index: 200;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: var(--space-3);

  background-color: var(--vp-yellow);
  color: var(--vp-black);
  border: none;
  border-radius: 0;
  cursor: pointer;

    transition:
        background-color var(--transition),
        color var(--transition),
        opacity var(--transition);
}

.vp-contact-trigger svg {
    width: 100%;
    height: 100%;
}

.vp-contact-trigger:hover {
  background-color: var(--vp-black);
  color: var(--vp-yellow);
  box-shadow: inset 0 0 0 1.5px var(--vp-yellow);
}

.vp-contact-trigger[aria-expanded="true"] {
  opacity: 0;
  pointer-events: none;
}

/* Overlay — dims page content when panel is open */
.vp-contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 198;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

.vp-contact-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Panel — slides up from the bottom-right */
.vp-contact-panel {
    position: fixed;
    top: 20px;
    right: 0;
    bottom: 0;
    z-index: 199;
    width: 100%;
    max-width: 1000px;
    overflow: auto;

  background-color: var(--vp-black);
  color: var(--vp-yellow);

  transform: translateY(100%);
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vp-contact-panel.is-open {
  transform: translateY(0);
}

.vp-contact-panel__inner {
  position: relative;
  padding: var(--space-6);
}

.vp-contact-panel__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--vp-yellow);
  cursor: pointer;
  line-height: 0;
  transition: opacity var(--transition);
}

.vp-contact-panel__close:hover {
  opacity: 0.6;
}

.vp-contact-panel__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 8vw, 4rem);
  text-transform: uppercase;
  line-height: 0.85;
  color: var(--vp-yellow);
  margin-bottom: var(--space-5);
  padding-right: var(--space-7);
}

.vp-contact-panel__form {
  min-height: 160px;
}

@media (max-width: 767px) {
  .vp-contact-trigger {
    bottom: var(--space-4);
    right: 0;
  }

  .vp-contact-panel {
    max-width: 100%;
  }
}

/* ── 9. MOBILE OVERRIDES ───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Article post-title: smaller than the global .has-5-xl-font-size override (48px)
     so that typical Finnish word lengths fit on one line */
  .vp-single-post .wp-block-post-title {
    font-size: 36px !important;
  }

  /* Hero image: WP injects width:576px inline via selfStretch:fixed; max-width:100%
     beats inline width and prevents the image from overflowing the viewport */
  .vp-single__hero {
    max-width: 100%;
  }

  /* Side padding for article pages — direct approach avoids the WP root-padding-var
     cascade bug where nested has-global-padding gets 0 padding but alignfull
     children still get -20px bleed margins, causing 40px horizontal overflow */
  .vp-single-post .wp-block-post-content {
    padding-inline: 20px;
  }

  /* Side padding for plain page template. Container-level so it reaches content
     inside nested group blocks (not just direct children). Alignfull and
     vegeporssi blocks compensate with negative margin to stay full-width. */
  .vp-page-content .wp-block-post-content {
    padding-inline: 20px;
  }

  .vp-page-content .wp-block-post-content > .alignfull,
  .vp-page-content .wp-block-post-content > [class*="wp-block-vegeporssi"]:not(.wp-block-vegeporssi-location-card) {
    margin-inline: -20px;
    width: calc(100% + 40px);
  }
}

/* ── Mobile lang switcher in nav overlay ─────────────────────────────────── */

/* Clone injected by main.js into the overlay — hidden when overlay is closed */
.vp-mobile-lang {
  display: none;
}

@media (max-width: 850px) {
  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .vp-mobile-lang {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: var(--space-7);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    line-height: 1;
  }

  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .vp-mobile-lang
    .vp-lang-switcher__lang {
    color: var(--vp-black);
    text-decoration: none;
  }

  .site-header-inner
    .wp-block-navigation__responsive-container.is-menu-open
    .vp-mobile-lang
    .vp-lang-switcher__lang.is-active {
    font-family: var(--font-graffiti);
    font-weight: 400;
    color: var(--vp-black);
  }
}