/*
Theme Name: Värmdös Hunddagis & Djurpensionat
Theme URI: https://www.varmdohunddagis.se/
Description: Organic Luxury theme for Värmdös Hunddagis & Djurpensionat AB, Skärgårdsvägen 267, Värmdö (Sweden). Tabbed service pages keeping information and prices under one heading, per-service enquiry forms with email notification and an archive in wp-admin, ACF field groups, Gutenberg block patterns, Elementor templates, Schema.org JSON-LD, breadcrumbs and a one-click installer. The dashboard is in English; the public site is in Swedish.
Author: Värmdös Hunddagis & Djurpensionat AB
Author URI: https://www.varmdohunddagis.se/
Version: 2.14.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: varmdohunddagis
Tags: custom-menu, custom-logo, responsive-layout, translation-ready, block-styles, block-patterns, accessibility-ready
*/

/* ==========================================================================
   00 · RESET
   ========================================================================== */

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

/* The sideways clip belongs on the root, never on <body>. A clipped <body>
   becomes the containing block for the fixed mobile drawer, so the drawer
   resolves `right: 0` against the (drawer-inflated) body box instead of the
   viewport and opens completely off-screen on a phone. `clip` does not create
   a scroll container, so the sticky header keeps working. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  overflow-x: clip;
}

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

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
fieldset { border: 0; }

/* ==========================================================================
   01 · BASE
   ========================================================================== */

body {
  font-family: var(--vh-font-body);
  font-size: var(--vh-t-body);
  line-height: 1.6;
  color: var(--vh-on-surface);
  background: var(--vh-surface);
  -webkit-font-smoothing: antialiased;

  /* A long unbreakable token — an email address, a URL, a compound Swedish
     noun — otherwise sets the minimum width of its block and pushes the page
     wider than a phone. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--vh-font-headline);
  font-weight: var(--vh-weight-headline);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--vh-on-surface);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--vh-primary); text-underline-offset: 0.18em; }
a:hover { color: var(--vh-deep-forest); }

:focus-visible {
  outline: 2px solid var(--vh-primary);
  outline-offset: 3px;
  border-radius: var(--vh-r-sm);
}

::selection { background: var(--vh-primary-fixed); color: var(--vh-on-surface); }

.vh-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.85rem 1.4rem;
  background: var(--vh-primary);
  color: #fff;
  border-radius: var(--vh-r);
  font-weight: 600;
}
.vh-skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

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

/* ==========================================================================
   02 · LAYOUT
   ========================================================================== */

.vh-wrap {
  width: 100%;
  max-width: var(--vh-container);
  margin-inline: auto;
  padding-inline: var(--vh-margin);
}

.vh-wrap--narrow { max-width: 820px; }
.vh-wrap--wide { max-width: 1560px; }

.vh-section { padding-block: var(--vh-section); }
.vh-section--tight { padding-block: calc(var(--vh-section) * 0.55); }
.vh-section--stone { background: var(--vh-soft-stone); }
.vh-section--surface { background: var(--vh-surface); }
.vh-section--white { background: var(--vh-surface-lowest); }

.vh-section--forest {
  background: var(--vh-primary);
  color: var(--vh-on-primary-container);
}
.vh-section--forest h1,
.vh-section--forest h2,
.vh-section--forest h3 { color: #fff; }

/* A stone panel with the big organic radius, floated inside the section. */
.vh-panel {
  background: var(--vh-soft-stone);
  border-radius: var(--vh-r-2xl);
  padding: clamp(2rem, 1rem + 4vw, 6rem) clamp(1.25rem, 0.5rem + 3vw, 4rem);
}

.vh-cols { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 4rem); }

/* Grid and flex items keep `min-width: auto`, so the widest un-wrappable thing
   inside a column — the nowrap tab strip, a wide table, a long email address —
   sets the track's floor and the column grows past the viewport instead of
   scrolling or wrapping within itself. On a phone that pushed the service pages
   out to ~714px of content inside a 350px column, and because a mobile browser
   widens its layout viewport to cover overflowing content, the whole site then
   rendered at that width. Every layout container the theme ships gets the floor
   removed, so one wide child can never stretch the page again. */
.vh-cols > *,
.vh-stack > *,
.vh-row > *,
.vh-features > *,
.vh-bento > *,
.vh-cta__grid > *,
.vh-pagehead__grid > *,
.vh-footer__grid > *,
.vh-service-row > *,
.vh-field-row > *,
.vh-hours__row > *,
.vh-contact-item > * { min-width: 0; }
.vh-cols--2       { grid-template-columns: repeat(2, 1fr); }
.vh-cols--3       { grid-template-columns: repeat(3, 1fr); }
.vh-cols--4       { grid-template-columns: repeat(4, 1fr); }
.vh-cols--asym    { grid-template-columns: 1.15fr 0.85fr; }
.vh-cols--asym-r  { grid-template-columns: 0.85fr 1.15fr; }
.vh-cols--sidebar { grid-template-columns: minmax(0, 1fr) 340px; }

@media (max-width: 1024px) {
  .vh-cols--4 { grid-template-columns: repeat(2, 1fr); }
  .vh-cols--sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .vh-cols--2, .vh-cols--3, .vh-cols--asym, .vh-cols--asym-r { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .vh-cols--4 { grid-template-columns: 1fr; }
}

.vh-stack     { display: flex; flex-direction: column; gap: 1rem; }
.vh-stack--lg { gap: 2rem; }
.vh-row       { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.vh-row--center { justify-content: center; }

/* ==========================================================================
   03 · TYPE HELPERS
   ========================================================================== */

/* Larger sizes get progressively tighter tracking, as a grotesk needs. */
.vh-headline-xl { font-size: var(--vh-t-headline-xl); letter-spacing: var(--vh-track-headline); font-weight: 700; line-height: 1.03; }
.vh-headline-lg { font-size: var(--vh-t-headline-lg); letter-spacing: -0.03em; font-weight: 650; line-height: 1.08; }
.vh-headline-md { font-size: var(--vh-t-headline-md); letter-spacing: -0.02em; font-weight: 650; }
.vh-headline-sm { font-size: var(--vh-t-headline-sm); letter-spacing: -0.015em; font-weight: 600; }

/* Emphasis span inside headlines. With a sans the italic alone is too quiet,
   so it carries the brand green and a lighter weight for contrast. */
.vh-em { font-style: italic; font-weight: 400; color: var(--vh-primary); }
.vh-section--forest .vh-em { color: var(--vh-primary-fixed); }

.vh-lead {
  font-size: var(--vh-t-body-lg);
  line-height: 1.62;
  color: var(--vh-on-surface-variant);
  max-width: 62ch;
}

.vh-muted { color: var(--vh-secondary); }

/* Pill badge — all-caps label on a 10%-opacity tint. */
.vh-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--vh-r-full);
  background: var(--vh-primary-wash);
  color: var(--vh-primary);
  font-size: var(--vh-t-label-sm);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.vh-badge--light { background: rgba(255, 255, 255, 0.16); color: #fff; }
.vh-badge--stone { background: var(--vh-surface-highest); color: var(--vh-on-surface-variant); }

.vh-label {
  font-size: var(--vh-t-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vh-outline);
}

.vh-heading-block { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.vh-heading-block--center { margin-inline: auto; text-align: center; }
.vh-heading-block--center .vh-lead { margin-inline: auto; }
.vh-heading-block .vh-badge { margin-bottom: 1.25rem; }
.vh-heading-block h1, .vh-heading-block h2 { margin-bottom: 1rem; }

.vh-prose p { margin-bottom: 1.15rem; color: var(--vh-on-surface-variant); }
.vh-prose p:last-child { margin-bottom: 0; }
.vh-prose h3 { margin: 2.25rem 0 0.85rem; font-size: var(--vh-t-headline-md); }
.vh-prose h3:first-child { margin-top: 0; }
.vh-prose strong { color: var(--vh-on-surface); font-weight: 600; }

.vh-prose ul { list-style: none; margin: 0 0 1.35rem; padding: 0; }
.vh-prose ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.7rem;
  color: var(--vh-on-surface-variant);
}
.vh-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--vh-r-full);
  background: var(--vh-primary-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23266a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

/* ==========================================================================
   04 · BUTTONS
   ========================================================================== */

.vh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 2rem;
  border: 1.5px solid transparent;
  border-radius: var(--vh-r);
  font-size: var(--vh-t-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--vh-fast), color var(--vh-fast),
              border-color var(--vh-fast), box-shadow var(--vh-fast),
              transform var(--vh-fast);
}

.vh-btn:active { transform: translateY(1px); }

/* Button labels never wrap either — a two-line CTA looks broken. */
.vh-btn { white-space: nowrap; }

.vh-btn--primary {
  background: var(--vh-primary);
  border-color: var(--vh-primary);
  color: #fff;
}
.vh-btn--primary:hover {
  background: var(--vh-primary-container);
  border-color: var(--vh-primary-container);
  color: #fff;
  box-shadow: 0 8px 24px rgba(38, 106, 0, 0.24);
}

.vh-btn--outline {
  background: transparent;
  border-color: var(--vh-primary);
  color: var(--vh-primary);
}
.vh-btn--outline:hover { background: var(--vh-primary); color: #fff; }

.vh-btn--ghost {
  background: var(--vh-surface-lowest);
  border-color: var(--vh-outline-muted);
  color: var(--vh-on-surface);
}
.vh-btn--ghost:hover { border-color: var(--vh-primary); color: var(--vh-primary); }

.vh-btn--on-forest {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.vh-btn--on-forest:hover { background: #fff; color: var(--vh-primary); border-color: #fff; }

.vh-btn--light { background: #fff; border-color: #fff; color: var(--vh-primary); }
.vh-btn--light:hover { background: var(--vh-primary-fixed); border-color: var(--vh-primary-fixed); color: var(--vh-on-surface); }

.vh-btn--sm { padding: 0.6rem 1.2rem; font-size: var(--vh-t-label-sm); }
.vh-btn--lg { padding: 1.1rem 2.4rem; font-size: var(--vh-t-body); }
.vh-btn--block { width: 100%; }
.vh-btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.vh-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--vh-t-label);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--vh-primary);
}
.vh-arrow-link svg { transition: transform var(--vh-fast); }
.vh-arrow-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   05 · HEADER (glassmorphism)
   ========================================================================== */

.vh-topbar {
  background: var(--vh-primary);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--vh-t-label-sm);
  letter-spacing: 0.04em;
}
.vh-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 38px;
  padding-block: 0.35rem;
}
.vh-topbar a { color: #fff; text-decoration: none; }
.vh-topbar a:hover { text-decoration: underline; }
.vh-topbar__group { display: flex; align-items: center; gap: 1.5rem; }

@media (max-width: 820px) {
  .vh-topbar__inner { justify-content: center; }
  .vh-topbar__group--end { display: none; }
}

/* z-index sits above .vh-backdrop (80) because the drawer lives inside this
   element: a fixed child is painted in its ancestor's stacking context, so a
   lower value here would put the open drawer underneath the dim overlay. */
.vh-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--vh-glass-fill);
  -webkit-backdrop-filter: var(--vh-glass-blur);
  backdrop-filter: var(--vh-glass-blur);
  border-bottom: 1px solid var(--vh-hairline);
  transition: box-shadow var(--vh-fast);
}
.vh-header.is-stuck { box-shadow: var(--vh-shadow-glass); }

.vh-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 80px;
  padding-block: 0.6rem;
}

.vh-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--vh-on-surface); flex-shrink: 0; }
.vh-header__actions { flex-shrink: 0; }

/* The real logo is a wide wordmark — never crop it into a circle. */
.vh-brand__mark {
  height: 54px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 600px) { .vh-brand__mark { height: 48px; } }

/* Only the fallback paw glyph gets the round green chip. */
.vh-brand__mark--icon {
  width: 44px; height: 44px;
  border-radius: var(--vh-r-full);
  background: var(--vh-primary);
  display: grid;
  place-items: center;
  color: #fff;
}
.vh-brand__name {
  display: block;
  font-family: var(--vh-font-headline);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.1;
}
.vh-brand__meta {
  display: block;
  font-size: var(--vh-t-label-sm);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vh-outline);
  margin-top: 2px;
}

/* No auto margin: the header row is space-between, so brand / nav / actions
   distribute evenly instead of the nav crowding against the CTA. */
.vh-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 0.05rem + 0.65vw, 0.95rem);
  flex-wrap: nowrap;
}
.vh-nav__list > li { position: relative; flex-shrink: 0; }

.vh-nav__list a {
  display: block;
  padding: 0.55rem 0.3rem;
  font-size: var(--vh-t-label);
  font-weight: 500;
  text-decoration: none;
  color: var(--vh-on-surface);
  border-radius: var(--vh-r-sm);
  transition: color var(--vh-fast);
  /* A menu label must never break across two lines. */
  white-space: nowrap;
}
.vh-nav__list a:hover { color: var(--vh-primary); }

.vh-nav__list > li > a::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  border-radius: var(--vh-r-full);
  background: var(--vh-primary);
  transform: scaleX(0);
  transition: transform var(--vh-fast);
}
.vh-nav__list > li:hover > a::after,
.vh-nav__list > .current-menu-item > a::after,
.vh-nav__list > .current_page_item > a::after,
.vh-nav__list > .current-menu-ancestor > a::after,
.vh-nav__list > .is-current > a::after { transform: scaleX(1); }

.vh-nav__list ul.sub-menu {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  min-width: 244px;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background: var(--vh-glass-fill);
  -webkit-backdrop-filter: var(--vh-glass-blur);
  backdrop-filter: var(--vh-glass-blur);
  border: 1px solid var(--vh-glass-border);
  border-radius: var(--vh-r-lg);
  box-shadow: var(--vh-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--vh-fast), transform var(--vh-fast), visibility var(--vh-fast);
  z-index: 5;
}
.vh-nav__list > li:hover > ul,
.vh-nav__list > li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.vh-nav__list ul a { padding: 0.6rem 0.85rem; border-radius: var(--vh-r); }
.vh-nav__list ul a::after { display: none; }
.vh-nav__list ul a:hover { background: var(--vh-primary-wash); }

/* --- Submenu chevron --------------------------------------------------
   Injected by app.js on every parent item. On desktop it advertises that a
   dropdown exists; on mobile it becomes the control that expands it. */
.vh-nav__list > li.menu-item-has-children,
.vh-nav__list > li.vh-has-children {
  display: flex;
  align-items: center;
  gap: 1px;
}

.vh-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.vh-nav__toggle svg {
  width: 15px;
  height: 15px;
  transition: transform var(--vh-fast);
}

/* The explicit expanded state applies everywhere. */
.vh-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Hover/focus rotation only where the dropdown actually opens on hover —
   on touch the hover state sticks after a tap and would lie about the state. */
@media (hover: hover) and (min-width: 1081px) {
  .vh-nav__list > li:hover > .vh-nav__toggle,
  .vh-nav__list > li:focus-within > .vh-nav__toggle { color: var(--vh-primary); }

  .vh-nav__list > li:hover > .vh-nav__toggle svg,
  .vh-nav__list > li:focus-within > .vh-nav__toggle svg { transform: rotate(180deg); }
}

.vh-header__actions { display: flex; align-items: center; gap: 0.75rem; }

/* The default button is sized for page content and is far too heavy inside an
   80px bar — it needs to read as one item in the row, not as a slab. */
.vh-header__actions .vh-btn {
  padding: 0.68rem 1.35rem;
  font-size: 0.8125rem;
  letter-spacing: 0.045em;
}

@media (max-width: 1180px) { .vh-nav__list a { font-size: 0.8125rem; } }
/* Below this the drawer takes over and carries the CTA in its footer. */

.vh-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  background: var(--vh-surface-lowest);
  border: 1px solid var(--vh-outline-muted);
  border-radius: var(--vh-r);
  cursor: pointer;
}
.vh-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--vh-on-surface); transition: transform var(--vh-fast), opacity var(--vh-fast); }
.vh-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vh-burger.is-active span:nth-child(2) { opacity: 0; }
.vh-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   06 · MOBILE DRAWER
   ========================================================================== */

@media (max-width: 1080px) {
  .vh-burger { display: flex; }

  /* An element with backdrop-filter becomes the containing block for its
     position:fixed descendants. Keeping the glass effect here would pin the
     drawer to the header's 80px box instead of the viewport, so the effect is
     dropped at the widths where the drawer is actually used. */
  .vh-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--vh-surface);
  }

  .vh-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 400px);
    background: var(--vh-surface);
    /* Tight bottom padding: 6rem of dead space was pushing the footer buttons
       below the fold on shorter phones. */
    padding: 1rem var(--vh-margin) 2rem;
    overflow-y: auto;
    z-index: 90;
    box-shadow: var(--vh-shadow-lg);

    /* The closed drawer is wiped away with clip-path rather than parked
       off-canvas with translateX. A translated drawer sits outside the
       viewport, and a mobile browser widens its layout viewport to cover
       overflowing content — the whole site then rendered at ~734px inside a
       390px phone, with the drawer itself unreachable. Clipping keeps the
       drawer inside the viewport at every moment, so nothing overflows.
       visibility keeps the collapsed links out of the tab order. */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path var(--vh-slow), visibility var(--vh-slow);
  }
  .vh-nav.is-open { clip-path: inset(0); visibility: visible; }

  .vh-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 0.75rem; margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--vh-outline-muted);
  }
  .vh-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  /* Parent items lay out as: link | chevron, with the submenu on its own row. */
  .vh-nav__list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--vh-hairline);
  }
  .vh-nav__list > li > a { flex: 1; min-width: 0; }

  /* Sized so all eight items plus the footer buttons fit without scrolling,
     while each row stays a comfortable 44px+ tap target. */
  .vh-nav__list a {
    padding: 0.72rem 0;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
  }
  .vh-nav__list > li > a::after { display: none; }
  .vh-nav__list .current-menu-item > a { color: var(--vh-primary); }

  .vh-nav__toggle {
    width: 44px;
    height: 44px;
    margin-right: -0.75rem;
    border-radius: var(--vh-r);
    color: var(--vh-outline);
  }
  .vh-nav__toggle svg { width: 18px; height: 18px; }
  .vh-nav__toggle[aria-expanded="true"] { color: var(--vh-primary); }

  /* Collapsed by default so the full menu stays visible without scrolling. */
  .vh-nav__list ul.sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent;
    padding: 0 0 0.85rem 0.9rem; min-width: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    flex-basis: 100%;
    display: none;
  }
  .vh-nav__list > li.is-expanded > ul.sub-menu { display: block; }

  .vh-nav__list ul a { padding: 0.55rem 0; font-size: 0.9375rem; font-weight: 500; color: var(--vh-on-surface-variant); }

  /* The fallback menu marks the active page with .is-current; only the WP menu
     class was being highlighted here. */
  .vh-nav__list > .is-current > a,
  .vh-nav__list > .current_page_item > a,
  .vh-nav__list > .current-menu-ancestor > a { color: var(--vh-primary); }

  .vh-nav__foot { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.25rem; }
  .vh-nav__foot .vh-btn { padding: 0.8rem 1.25rem; }
}

@media (min-width: 1081px) { .vh-nav__head, .vh-nav__foot { display: none; } }

.vh-nav__close {
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--vh-outline-muted);
  border-radius: var(--vh-r);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}

.vh-backdrop {
  position: fixed; inset: 0;
  background: rgba(27, 28, 28, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--vh-slow), visibility var(--vh-slow);
  z-index: 80;
}
.vh-backdrop.is-active { opacity: 1; visibility: visible; }
body.vh-locked { overflow: hidden; }

/* ==========================================================================
   07 · HERO
   ========================================================================== */

.vh-hero {
  position: relative;
  min-height: 600px;
  height: 80vh;
  max-height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.vh-hero__media { position: absolute; inset: 0; z-index: 0; }
.vh-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }

.vh-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,28,28,0.34) 0%, rgba(27,28,28,0.46) 45%, rgba(27,28,28,0.66) 100%);
}

.vh-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding-inline: var(--vh-margin);
  color: #fff;
}
.vh-hero__inner h1 { color: #fff; margin-bottom: 1.5rem; }
.vh-hero__inner .vh-em { color: var(--vh-primary-fixed); }
.vh-hero__inner .vh-lead { color: rgba(255, 255, 255, 0.92); margin: 0 auto 2.5rem; }
.vh-hero .vh-badge { margin-bottom: 1.5rem; }

/* Floating glass stat card overlapping the hero base. */
.vh-hero__floater {
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.4rem;
  background: var(--vh-glass-fill);
  -webkit-backdrop-filter: var(--vh-glass-blur);
  backdrop-filter: var(--vh-glass-blur);
  border: 1px solid var(--vh-glass-border);
  border-radius: var(--vh-r-lg);
  box-shadow: var(--vh-shadow-glass);
  color: var(--vh-on-surface);
  text-align: left;
}
.vh-hero__floater strong { display: block; font-family: var(--vh-font-headline); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.vh-hero__floater span { font-size: var(--vh-t-label-sm); color: var(--vh-outline); letter-spacing: 0.06em; text-transform: uppercase; }
.vh-hero__floater svg { color: var(--vh-primary); flex-shrink: 0; }

@media (max-width: 720px) { .vh-hero__floater { display: none; } }

/* Interior page header */
.vh-pagehead { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem); }

/* With a photo the header borrows the front-page hero treatment — same overlay
   ramp, same light-on-image typography — but keeps a banner proportion rather
   than a full-height hero.

   The height matters more than it looks. These are square-ish photos, and
   object-fit: cover scales them to the band's width, so a short band shows only
   a thin horizontal slice — which is exactly what reads as "zoomed in". A band
   around 2.5:1 keeps roughly half the picture on screen. */
.vh-pagehead--media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 40vw, 640px);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
}
.vh-pagehead--media > .vh-wrap { width: 100%; }

/* A genuinely wide photo (3:2 or more) fills a shallower band and still shows
   almost all of itself, so it does not need the extra height a square one does. */
.vh-pagehead--wide { min-height: clamp(300px, 30vw, 480px); }
.vh-pagehead--wide .vh-pagehead__media img { object-position: center 45%; }

.vh-pagehead__media { position: absolute; inset: 0; z-index: -1; }
.vh-pagehead__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.vh-pagehead__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,28,28,0.34) 0%, rgba(27,28,28,0.50) 45%, rgba(27,28,28,0.72) 100%);
}
.vh-pagehead--media h1,
.vh-pagehead--media .vh-lead { color: #fff; }
.vh-pagehead--media .vh-em { color: var(--vh-primary-fixed); }
.vh-pagehead--media .vh-lead { color: rgba(255, 255, 255, 0.92); }

/* The stat strip sits under the photo and laps over its lower edge, so the
   image band stays short and the cards keep their light background. */
.vh-pagehead__stats { position: relative; z-index: 2; margin-top: clamp(-2.5rem, -2vw, -1.25rem); }
.vh-pagehead__stats .vh-stats { margin-top: 0; }

@media (max-width: 900px) {
  /* Narrower viewport, so the same photo already shows more of itself at a
     given height — a portrait-ish band here, not a letterbox. */
  .vh-pagehead--media { min-height: clamp(260px, 58vw, 420px); }
  .vh-pagehead__stats { margin-top: 1.25rem; }
}

.vh-pagehead__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; }
@media (max-width: 900px) { .vh-pagehead__grid { grid-template-columns: 1fr; align-items: start; } }
.vh-pagehead h1 { margin-bottom: 0; }
.vh-pagehead .vh-badge { margin-bottom: 1.25rem; }

/* Stat strip */
.vh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.vh-stats > div {
  background: var(--vh-surface-lowest);
  border: 1px solid var(--vh-hairline);
  border-radius: var(--vh-r-lg);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--vh-shadow-sm);
}
.vh-stats dt { font-size: var(--vh-t-label-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vh-outline); margin-bottom: 0.3rem; }
.vh-stats dd { margin: 0; font-family: var(--vh-font-headline); font-size: 1.2rem; font-weight: 650; letter-spacing: -0.02em; }
@media (max-width: 700px) { .vh-stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   08 · BREADCRUMBS
   ========================================================================== */

.vh-crumbs { font-size: var(--vh-t-label-sm); color: var(--vh-outline); padding-block: 1rem; }
.vh-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.vh-crumbs a { color: var(--vh-outline); text-decoration: none; }
.vh-crumbs a:hover { color: var(--vh-primary); }
.vh-crumbs [aria-current] { color: var(--vh-on-surface); font-weight: 600; }
.vh-crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--vh-outline-variant); }

/* ==========================================================================
   09 · CARDS & BENTO
   ========================================================================== */

.vh-card {
  background: var(--vh-surface-lowest);
  border: 1px solid var(--vh-hairline);
  border-radius: var(--vh-r-xl);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  box-shadow: var(--vh-shadow);
  transition: transform var(--vh-fast), box-shadow var(--vh-fast);
}
.vh-card--hover:hover { transform: translateY(-4px); box-shadow: var(--vh-shadow-lg); }
.vh-card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--vh-r-md);
  background: var(--vh-primary-wash);
  color: var(--vh-primary);
  margin-bottom: 1.25rem;
}
.vh-card__title { font-size: var(--vh-t-headline-sm); margin-bottom: 0.6rem; }
.vh-card__text { color: var(--vh-on-surface-variant); font-size: var(--vh-t-body); }
.vh-card--stone { background: var(--vh-soft-stone); box-shadow: none; }
.vh-card--forest {
  background: var(--vh-primary);
  border-color: var(--vh-primary);
  color: var(--vh-on-primary-container);
}
.vh-card--forest .vh-card__title { color: #fff; }
.vh-card--forest .vh-card__text { color: rgba(248, 255, 238, 0.82); }
.vh-card--forest .vh-card__icon { background: rgba(255,255,255,0.16); color: #fff; }

/* A green button on a green card reads as plain text — invert it. */
.vh-card--forest .vh-btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--vh-primary);
}
.vh-card--forest .vh-btn--primary:hover {
  background: var(--vh-primary-fixed);
  border-color: var(--vh-primary-fixed);
  color: var(--vh-on-surface);
  box-shadow: none;
}

/* Bento grid: 3 columns, varying row spans. */
.vh-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;
  gap: var(--vh-gutter);
}
.vh-bento__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--vh-r-xl);
  background: var(--vh-soft-stone);
  box-shadow: var(--vh-shadow);
}
.vh-bento__item--tall { grid-row: span 2; }
.vh-bento__item--wide { grid-column: span 2; }

.vh-bento__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--vh-slow); }
.vh-bento__item:hover img { transform: scale(1.05); }

.vh-bento__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.75rem 1.75rem;
  background: linear-gradient(to top, rgba(27,28,28,0.85) 0%, rgba(27,28,28,0.45) 55%, transparent 100%);
  color: #fff;
}
.vh-bento__body h3 { color: #fff; font-size: var(--vh-t-headline-md); margin-bottom: 0.35rem; }
.vh-bento__body p { color: rgba(255,255,255,0.86); font-size: var(--vh-t-label); }

/* Text-only bento tile */
.vh-bento__item--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  background: var(--vh-surface-lowest);
  border: 1px solid var(--vh-hairline);
}
.vh-bento__item--forest { background: var(--vh-primary); color: var(--vh-on-primary-container); }
.vh-bento__item--forest h3 { color: #fff; }

@media (max-width: 900px) {
  .vh-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .vh-bento__item--wide { grid-column: span 2; }
  .vh-bento__item--tall { grid-row: span 1; }
}
@media (max-width: 560px) {
  .vh-bento { grid-template-columns: 1fr; }
  .vh-bento__item--wide { grid-column: span 1; }
}

/* Service index rows */
/* Equal tracks, so the photo keeps the same width whichever side it sits on. */
.vh-service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.vh-service-row + .vh-service-row { margin-top: clamp(3rem, 1.5rem + 4vw, 6rem); }
.vh-service-row:nth-child(even) .vh-service-row__media { order: -1; }
.vh-service-row__media { border-radius: var(--vh-r-2xl); overflow: hidden; box-shadow: var(--vh-shadow); aspect-ratio: 4 / 3; }
.vh-service-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--vh-slow); }
.vh-service-row:hover .vh-service-row__media img { transform: scale(1.04); }
@media (max-width: 900px) {
  .vh-service-row { grid-template-columns: 1fr; }
  .vh-service-row:nth-child(even) .vh-service-row__media { order: 0; }
}

/* Schedule card: time in a fixed first column, text beside it. On a phone that
   column eats a quarter of the card, so the time moves above the text instead. */
.vh-timeslot {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.vh-timeslot--narrow { grid-template-columns: 64px minmax(0, 1fr); }
@media (max-width: 620px) {
  .vh-timeslot, .vh-timeslot--narrow { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* Feature grid */
.vh-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--vh-gutter); }

/* ==========================================================================
   10 · TABS
   ========================================================================== */

.vh-tabs { margin-top: 0.5rem; }

.vh-tabs__list { display: none; }
.vh-tabs__scroller { display: none; }
.vh-js .vh-tabs__scroller { display: block; position: relative; margin-bottom: clamp(2rem, 1rem + 2vw, 3rem); }

/* On a wide column the strip wraps: five tabs fit in two tidy rows and every
   section of the page stays in sight. min-width: 0 stops the row from setting
   the minimum size of the grid track that holds it, which used to stretch the
   whole column past the viewport. */
.vh-js .vh-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem;
  background: var(--vh-soft-stone);
  border-radius: var(--vh-r-2xl);
  min-width: 0;
}

.vh-tab {
  flex-shrink: 0;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--vh-r-full);
  padding: 0.7rem 1.35rem;
  font-size: var(--vh-t-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vh-on-surface-variant);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--vh-fast), color var(--vh-fast), box-shadow var(--vh-fast);
}
.vh-tab:hover { color: var(--vh-primary); }
.vh-tab[aria-selected="true"] {
  background: var(--vh-surface-lowest);
  color: var(--vh-primary);
  box-shadow: var(--vh-shadow-sm);
}

/* On a phone every section has to be visible without dragging. A sliding row
   put "Öppettider och priser" off the right-hand edge, so the prices looked as
   though they did not exist. Below 720px the strip becomes a two-column grid:
   all five sections on screen at once, nothing to scroll, and an odd last tab
   takes the full width so the block stays square. */
@media (max-width: 720px) {
  .vh-js .vh-tabs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    padding: 0.4rem;
  }
  .vh-js .vh-tabs__list .vh-tab {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    padding: 0.72rem 0.7rem;
    line-height: 1.3;
  }
  .vh-js .vh-tabs__list .vh-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* All panels stay readable when JavaScript is unavailable. */
.vh-tabs__panel[hidden] { display: block; }
.vh-js .vh-tabs__panel[hidden] { display: none; }
.vh-tabs__panel + .vh-tabs__panel { margin-top: 3.5rem; }
.vh-js .vh-tabs__panel + .vh-tabs__panel { margin-top: 0; }
.vh-js .vh-tabs__panel { animation: vh-fade var(--vh-slow) both; }
.vh-js .vh-tabs__panel-title { display: none; }
.vh-tabs__panel-title { font-size: var(--vh-t-headline-md); margin-bottom: 1.25rem; }

@keyframes vh-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   11 · PRICE TABLES & PRICE CARDS
   ========================================================================== */

.vh-pricetable-wrap {
  overflow-x: auto;
  background: var(--vh-surface-lowest);
  border: 1px solid var(--vh-hairline);
  border-radius: var(--vh-r-xl);
  box-shadow: var(--vh-shadow);
}
.vh-pricetable { min-width: 440px; }
.vh-pricetable caption {
  caption-side: top;
  text-align: left;
  padding: 1.5rem 1.6rem 0.25rem;
  font-size: var(--vh-t-label);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vh-outline);
}
.vh-pricetable th, .vh-pricetable td {
  padding: 1.15rem 1.6rem;
  text-align: left;
  border-bottom: 1px solid var(--vh-hairline);
  vertical-align: top;
  line-height: 1.45;
}
.vh-pricetable thead th {
  font-family: var(--vh-font-body);
  font-size: var(--vh-t-label);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vh-outline);
  padding-block: 0.95rem;
}
.vh-pricetable tbody tr:last-child th,
.vh-pricetable tbody tr:last-child td { border-bottom: none; }
.vh-pricetable tbody th { font-family: var(--vh-font-body); font-size: var(--vh-t-body); font-weight: 650; color: var(--vh-on-surface); }
.vh-pricetable tbody td { color: var(--vh-on-surface-variant); }
.vh-pricetable__note { display: block; margin-top: 0.3rem; font-size: var(--vh-t-label); font-weight: 400; line-height: 1.4; color: var(--vh-outline); }
.vh-pricetable__amount { font-family: var(--vh-font-headline); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; color: var(--vh-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vh-pricenote { margin-top: 1.1rem; font-size: var(--vh-t-label); line-height: 1.55; color: var(--vh-outline); }

/* A 440px table in a ~348px phone column hides the price column behind a
   sideways scroll nobody discovers. Trimming the generous desktop padding is
   enough to fit both columns without shrinking the type. */
@media (max-width: 620px) {
  .vh-pricetable { min-width: 0; }
  .vh-pricetable caption { padding: 1.25rem 1.1rem 0.25rem; }
  .vh-pricetable th, .vh-pricetable td { padding: 1rem 1.1rem; }
  .vh-pricetable thead th:last-child,
  .vh-pricetable td { text-align: right; }
  .vh-pricetable__amount { font-size: 1.2rem; }
}

/* Below 560px a two-column price table stops behaving like a table. Pushing a
   long service name left and its price right left the name wrapping over three
   lines against an empty column. Stacked, each row is a small block: name,
   note, price. The header row goes — "Tjänst / Pris" adds nothing once the
   figure sits under its own label. Matrices are exempt: their columns carry
   meaning that a stack would lose, so they keep scrolling sideways. */
@media (max-width: 560px) {
  .vh-pricetable:not(.vh-pricetable--matrix) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vh-pricetable:not(.vh-pricetable--matrix) tbody tr {
    display: block;
    padding: 1.05rem 1.15rem;
    border-bottom: 1px solid var(--vh-hairline);
  }
  .vh-pricetable:not(.vh-pricetable--matrix) tbody tr:last-child { border-bottom: none; }
  .vh-pricetable:not(.vh-pricetable--matrix) tbody th,
  .vh-pricetable:not(.vh-pricetable--matrix) tbody td {
    display: block;
    padding: 0;
    border: none;
    text-align: left;
  }
  .vh-pricetable:not(.vh-pricetable--matrix) tbody td { margin-top: 0.5rem; }
  .vh-pricetable:not(.vh-pricetable--matrix) .vh-pricetable__amount { font-size: 1.3rem; }
}

/* On a wide screen the matrix stays a real table, with enough width that the
   columns are not squashed; the wrapper scrolls if the column is narrow. Below
   900px it stops being a table altogether — see further down. */
.vh-pricetable--matrix { min-width: 660px; }
.vh-pricetable--matrix td { white-space: nowrap; }
.vh-pricetable--matrix th, .vh-pricetable--matrix td { padding-inline: 1.3rem; }
.vh-pricetable--matrix .vh-pricetable__amount { font-size: 1.15rem; }

.vh-pricetable-wrap { position: relative; }

/* Below 900px a price matrix stops being a table.

   Scrolling sideways meant the right-hand columns were simply invisible unless
   you knew to drag, and half a column peeking past the edge read as a bug
   rather than as an invitation. So each row becomes a small card: the shoulder
   height as its heading, then one line per column — that column's heading on
   the left, its figure on the right. Nothing is hidden and nothing scrolls.

   The column headings come from the data-label attribute that
   vh_matrix_table() writes onto every cell, which is why the header row can be
   taken out of the flow without losing what each figure means. */
@media (max-width: 900px) {
  .vh-pricetable-wrap--matrix,
  .vh-pricetable-wrap:has(.is-stackable) { overflow-x: visible; }

  .vh-pricetable--matrix,
  .vh-pricetable.is-stackable { display: block; min-width: 0; }
  .vh-pricetable--matrix caption,
  .vh-pricetable.is-stackable caption { display: block; padding: 1.35rem 1.15rem 0.35rem; }
  .vh-pricetable--matrix thead,
  .vh-pricetable.is-stackable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .vh-pricetable--matrix tbody,
  .vh-pricetable.is-stackable tbody { display: block; }
  .vh-pricetable--matrix tbody tr,
  .vh-pricetable.is-stackable tbody tr {
    display: block;
    padding: 1.1rem 1.15rem;
    border-bottom: 1px solid var(--vh-hairline);
  }
  .vh-pricetable--matrix tbody tr:last-child,
  .vh-pricetable.is-stackable tbody tr:last-child { border-bottom: none; }
  .vh-pricetable--matrix tbody th,
  .vh-pricetable.is-stackable tbody th {
    display: block;
    padding: 0 0 0.35rem;
    border: none;
    font-size: var(--vh-t-body-lg);
    font-weight: 700;
    color: var(--vh-on-surface);
  }
  .vh-pricetable--matrix tbody td,
  .vh-pricetable.is-stackable tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border: none;
    border-top: 1px solid var(--vh-hairline);
    white-space: normal;
    text-align: left;
  }
  .vh-pricetable--matrix tbody td[data-label]::before,
  .vh-pricetable.is-stackable tbody td[data-label]::before {
    content: attr(data-label);
    flex: 1 1 auto;
    font-size: var(--vh-t-label);
    font-weight: 650;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--vh-outline);
  }
  .vh-pricetable--matrix tbody td .vh-pricetable__amount,
  .vh-pricetable.is-stackable tbody td .vh-pricetable__amount {
    flex: 0 0 auto;
    text-align: right;
    font-size: 1.2rem;
  }

  /* A cell with no heading to show would otherwise leave its figure marooned
     on the right against an empty half-row. Without a label it simply takes
     the full width. */
  .vh-pricetable--matrix tbody td:not([data-label]),
  .vh-pricetable.is-stackable tbody td:not([data-label]) { justify-content: flex-start; }
}

/* Price grids
   Replaces the multi-column price table. One card per row label, one line per
   column: the column heading on the left, its value on the right. It reflows
   at every width instead of overflowing, so there is no sideways scroll on a
   phone or on a narrow desktop column. */
.vh-pricegrid { margin: 0; }
.vh-pricegrid__caption {
  font-family: var(--vh-font-body);
  font-size: var(--vh-t-label);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vh-outline);
  margin: 0 0 0.9rem;
}
.vh-pricegrid__items {
  display: grid;
  gap: 1rem;
  /* min() keeps the card from forcing a track wider than the column it sits
     in, which is what made the table overflow. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}
.vh-pricegrid__item {
  background: var(--vh-surface-lowest);
  border: 1px solid var(--vh-hairline);
  border-radius: var(--vh-r-xl);
  box-shadow: var(--vh-shadow);
  padding: 1.25rem 1.35rem 1.35rem;
}
.vh-pricegrid__title {
  font-family: var(--vh-font-headline);
  font-size: var(--vh-t-body-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 0.55rem;
  color: var(--vh-on-surface);
}
.vh-pricegrid__rows { margin: 0; }
.vh-pricegrid__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.85rem;
  padding-block: 0.55rem;
  border-top: 1px solid var(--vh-hairline);
}
.vh-pricegrid__row dt {
  min-width: 0;
  overflow-wrap: break-word;
  font-size: var(--vh-t-label);
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--vh-outline);
}
.vh-pricegrid__row dd {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  text-align: right;
  font-family: var(--vh-font-headline);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--vh-primary);
  font-variant-numeric: tabular-nums;
}
/* Not every grid holds money — closing days list weekday names and times. */
.vh-pricegrid--plain .vh-pricegrid__row dd {
  font-family: var(--vh-font-body);
  font-size: var(--vh-t-body);
  font-weight: 600;
  letter-spacing: normal;
  color: var(--vh-on-surface);
}

/* Highlighted price card, as in the design's "Exklusiva Sviter" block */
.vh-pricecard {
  background: var(--vh-surface-lowest);
  border: 1px solid var(--vh-hairline);
  border-radius: var(--vh-r-xl);
  padding: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--vh-shadow);
}
.vh-pricecard--featured { border-color: var(--vh-primary); box-shadow: 0 16px 50px rgba(38,106,0,0.12); }
.vh-pricecard__amount { font-family: var(--vh-font-headline); font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--vh-primary); font-variant-numeric: tabular-nums; }
.vh-pricecard__unit { font-size: var(--vh-t-label); color: var(--vh-outline); }
.vh-pricecard ul { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.vh-pricecard li { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: 0.7rem; color: var(--vh-on-surface-variant); font-size: var(--vh-t-label); }
.vh-pricecard li svg { color: var(--vh-primary); flex-shrink: 0; margin-top: 2px; }

/* ==========================================================================
   12 · HOURS
   ========================================================================== */

.vh-hours { background: var(--vh-surface-lowest); border: 1px solid var(--vh-hairline); border-radius: var(--vh-r-xl); padding: clamp(1.5rem, 1rem + 1vw, 2rem); box-shadow: var(--vh-shadow); }
.vh-hours--plain { background: transparent; box-shadow: none; border: none; padding: 0; }
.vh-hours__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; border-bottom: 1px solid var(--vh-hairline); }
.vh-hours__row:last-child { border-bottom: none; padding-bottom: 0; }
.vh-hours__label { color: var(--vh-on-surface-variant); font-size: var(--vh-t-body); line-height: 1.45; }
.vh-hours__time { font-family: var(--vh-font-headline); font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vh-hours__time--closed { color: var(--vh-outline); font-style: italic; font-weight: 400; font-size: 1.05rem; }

/* On a phone the two halves of a row were pushed to opposite edges, so a label
   like "Hunddagis & butik, mån–fre" wrapped to two lines while a wide gap sat
   next to it and the time hung on its own. Stacked, each row reads as one
   thing: what it is, then when. */
@media (max-width: 560px) {
  .vh-hours__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding-block: 0.8rem;
  }
  .vh-hours__label { font-size: var(--vh-t-label); }
  .vh-hours__time { font-size: 1.25rem; white-space: normal; }
  .vh-hours__time--closed { font-size: 1.05rem; }
}

/* ==========================================================================
   13 · ACCORDION
   ========================================================================== */

.vh-accordion { display: flex; flex-direction: column; gap: 0.85rem; }
.vh-acc__item { background: var(--vh-surface-lowest); border: 1px solid var(--vh-hairline); border-radius: var(--vh-r-lg); overflow: hidden; transition: box-shadow var(--vh-fast); }
.vh-acc__item:hover { box-shadow: var(--vh-shadow); }
.vh-acc__trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  width: 100%; padding: 1.35rem 1.6rem;
  background: transparent; border: none; text-align: left; cursor: pointer;
  font-family: var(--vh-font-headline); font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em;
  color: var(--vh-on-surface);
}
.vh-acc__trigger:hover { color: var(--vh-primary); }
.vh-acc__trigger[aria-expanded="true"] { color: var(--vh-primary); }
.vh-acc__sign { display: none; flex-shrink: 0; width: 24px; height: 24px; position: relative; margin-top: 4px; }
.vh-js .vh-acc__sign { display: block; }
.vh-acc__sign::before, .vh-acc__sign::after { content: ""; position: absolute; inset: 50% 2px auto 2px; height: 2px; border-radius: 2px; background: currentColor; }
.vh-acc__sign::after { transform: rotate(90deg); transition: transform var(--vh-fast); }
.vh-acc__trigger[aria-expanded="true"] .vh-acc__sign::after { transform: rotate(0deg); }
.vh-acc__panel { padding: 0 1.6rem 1.5rem; max-width: 70ch; color: var(--vh-on-surface-variant); }
.vh-acc__panel[hidden] { display: block; }
.vh-js .vh-acc__panel[hidden] { display: none; }

/* ==========================================================================
   14 · LIGHTBOX
   ========================================================================== */

.vh-bento__item[data-lightbox] { cursor: zoom-in; }
[data-zoomable] { cursor: zoom-in; }

/* ==========================================================================
   14b · HORIZONTAL SLIDER

   Opt-in scaffolding for a swipeable row with arrow controls. Nothing in the
   theme uses it yet, so these rules are inert until markup opts in:

     <div data-vh-slider-scope>
       <div class="vh-slider-track" data-vh-slider> …cards… </div>
       <button class="vh-slider-prev" aria-label="Föregående">…</button>
       <button class="vh-slider-next" aria-label="Nästa">…</button>
     </div>
   ========================================================================== */

.vh-slider-track {
  display: flex;
  gap: var(--vh-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--vh-margin);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.vh-slider-track::-webkit-scrollbar { display: none; }
.vh-slider-track > * { flex: 0 0 min(85%, 340px); scroll-snap-align: start; }

.vh-slider-prev,
.vh-slider-next {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--vh-surface-lowest);
  border: 1px solid var(--vh-outline-muted);
  border-radius: var(--vh-r-full);
  color: var(--vh-on-surface);
  cursor: pointer;
  transition: background var(--vh-fast), color var(--vh-fast), opacity var(--vh-fast);
}
.vh-slider-prev:hover,
.vh-slider-next:hover { background: var(--vh-primary); border-color: var(--vh-primary); color: #fff; }
.vh-slider-prev[disabled],
.vh-slider-next[disabled] { opacity: 0.35; cursor: default; }
.vh-slider-prev[disabled]:hover,
.vh-slider-next[disabled]:hover { background: var(--vh-surface-lowest); border-color: var(--vh-outline-muted); color: var(--vh-on-surface); }

.vh-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(27, 28, 28, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--vh-slow), visibility var(--vh-slow);
}
.vh-lightbox.is-active { opacity: 1; visibility: visible; }
.vh-lightbox img { max-width: min(1100px, 92vw); max-height: 82vh; width: auto; border-radius: var(--vh-r-lg); box-shadow: var(--vh-shadow-lg); }
.vh-lightbox__cap { margin-top: 1rem; text-align: center; color: rgba(255,255,255,0.85); font-size: var(--vh-t-label); }
.vh-lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px;
  background: var(--vh-glass-fill);
  -webkit-backdrop-filter: var(--vh-glass-blur);
  backdrop-filter: var(--vh-glass-blur);
  border: 1px solid var(--vh-glass-border);
  border-radius: var(--vh-r-full);
  color: var(--vh-on-surface); font-size: 1.5rem; line-height: 1; cursor: pointer;
}

/* ==========================================================================
   15 · FORMS — soft underline style
   ========================================================================== */

.vh-form-shell {
  background: var(--vh-surface-lowest);
  border: 1px solid var(--vh-hairline);
  border-radius: var(--vh-r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  box-shadow: var(--vh-shadow);
}

.vh-field { margin-bottom: 1.25rem; }
.vh-field__label { display: block; margin-bottom: 0.45rem; font-size: var(--vh-t-label-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vh-outline); }
.vh-field__req { color: var(--vh-primary); }
.vh-field__hint { display: block; margin-top: 0.35rem; font-size: var(--vh-t-label-sm); color: var(--vh-outline); }

.vh-input, .vh-select, .vh-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--vh-soft-stone);
  border: none;
  border-bottom: 2px solid var(--vh-outline-muted);
  border-radius: var(--vh-r) var(--vh-r) 0 0;
  font-size: var(--vh-t-body);
  color: var(--vh-on-surface);
  transition: border-color var(--vh-fast), background var(--vh-fast);
}
.vh-input::placeholder, .vh-textarea::placeholder { color: var(--vh-outline); }
.vh-input:focus, .vh-select:focus, .vh-textarea:focus {
  outline: none;
  border-bottom-color: var(--vh-primary);
  background: var(--vh-surface-container);
}
.vh-input[aria-invalid="true"], .vh-select[aria-invalid="true"], .vh-textarea[aria-invalid="true"] {
  border-bottom-color: var(--vh-error);
  background: var(--vh-error-container);
}
.vh-textarea { min-height: 140px; resize: vertical; }
.vh-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23404a39' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px;
  padding-right: 2.5rem;
}
.vh-field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 620px) { .vh-field-row { grid-template-columns: 1fr; } }

.vh-check { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--vh-t-label); color: var(--vh-on-surface-variant); }
.vh-check input { margin-top: 0.25rem; accent-color: var(--vh-primary); width: 18px; height: 18px; flex-shrink: 0; }

.vh-hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; }

.vh-form-msg { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--vh-r-lg); font-size: var(--vh-t-label); }
.vh-form-msg--ok { background: var(--vh-primary-wash); color: var(--vh-deep-forest); border: 1px solid var(--vh-outline-variant); }
.vh-form-msg--error { background: var(--vh-error-container); color: var(--vh-on-error-container); border: 1px solid var(--vh-error); }

.vh-form-fieldset { margin: 0 0 1.75rem; }
.vh-form-fieldset > legend {
  padding: 0; margin-bottom: 1.15rem; width: 100%;
  font-size: var(--vh-t-label-sm); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--vh-primary);
}

/* Contact list */
.vh-contact-list { display: flex; flex-direction: column; gap: 1.5rem; }
.vh-contact-item { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.vh-contact-item__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--vh-r-md); background: var(--vh-primary-wash); color: var(--vh-primary); }
.vh-contact-item dt { font-size: var(--vh-t-label-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vh-outline); margin-bottom: 0.15rem; }
.vh-contact-item dd { margin: 0; font-size: var(--vh-t-body); }
.vh-contact-item dd a { font-weight: 600; text-decoration: none; }
.vh-contact-item dd a:hover { text-decoration: underline; }

/* The email address is one long unbreakable token: without these it sets the
   card's minimum width and pushes the page wider than a small phone. */
.vh-contact-item > * { min-width: 0; }
.vh-contact-item dd { overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .vh-contact-item dd a { display: inline-block; padding-block: 0.35rem; }
  .vh-crumbs a, .vh-crumbs [aria-current] { display: inline-block; padding-block: 0.35rem; }
}

.vh-map { border-radius: var(--vh-r-xl); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--vh-shadow); background: var(--vh-soft-stone); }
.vh-map iframe { width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   16 · CTA BAND
   ========================================================================== */

.vh-cta { background: var(--vh-primary); color: var(--vh-on-primary-container); padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.vh-cta__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
@media (max-width: 900px) { .vh-cta__grid { grid-template-columns: 1fr; } }
.vh-cta h2 { color: #fff; margin-bottom: 1rem; }
.vh-cta p { color: rgba(248, 255, 238, 0.85); max-width: 54ch; }

/* Two CTA buttons of different label lengths sit ragged on a phone — stack them
   full width so the band ends on a clean edge. */
@media (max-width: 620px) {
  .vh-cta__grid .vh-row { flex-direction: column; align-items: stretch; }
  .vh-cta__grid .vh-row .vh-btn { width: 100%; }
}

/* ==========================================================================
   17 · FOOTER
   ========================================================================== */

.vh-footer { background: var(--vh-soft-stone); padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem) 0; font-size: var(--vh-t-label); color: var(--vh-on-surface-variant); }
.vh-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(2rem, 1rem + 3vw, 3.5rem); padding-bottom: 3rem; }
@media (max-width: 1000px) { .vh-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vh-footer__grid { grid-template-columns: 1fr; } }

.vh-footer__heading { font-family: var(--vh-font-body); font-size: var(--vh-t-label-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vh-on-surface); margin-bottom: 1.25rem; }
.vh-footer__list { display: flex; flex-direction: column; gap: 0.7rem; }

/* The footer columns render either as a plain <div> of links (the built-in
   fallback) or as a wp_nav_menu <ul><li>. `display: contents` makes the <li>
   transparent so the <a> is the flex item either way, and both paths lay out
   identically. */
.vh-footer__list > li { display: contents; }

.vh-footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.vh-footer__legal > li { display: contents; }
.vh-footer a { color: var(--vh-on-surface-variant); text-decoration: none; }
.vh-footer a:hover { color: var(--vh-primary); }
.vh-footer__brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.vh-footer__brand img { height: 56px; width: auto; max-width: 220px; object-fit: contain; }
.vh-footer__brand strong { display: block; font-family: var(--vh-font-headline); font-size: 1.1rem; font-weight: 650; letter-spacing: -0.02em; color: var(--vh-on-surface); line-height: 1.15; }
.vh-footer__brand span { font-size: var(--vh-t-label-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vh-outline); }

/* With the wordmark logo in place the repeated name is redundant. */
.vh-footer__brand--logo > span { display: none; }

.vh-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.vh-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--vh-r-full); background: var(--vh-surface-lowest); color: var(--vh-primary); box-shadow: var(--vh-shadow-sm); transition: background var(--vh-fast), color var(--vh-fast); }
.vh-social a:hover { background: var(--vh-primary); color: #fff; }

.vh-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-block: 1.75rem; border-top: 1px solid var(--vh-hairline); font-size: var(--vh-t-label-sm); color: var(--vh-outline); }

/* On phones the footer columns stack, and a left rag reads as broken —
   centre the whole block instead. */
@media (max-width: 780px) {
  .vh-footer { text-align: center; }
  .vh-footer__grid { justify-items: center; }
  .vh-footer__grid > div { width: 100%; }
  .vh-footer__list { align-items: center; gap: 0.15rem; }
  .vh-footer__brand { flex-direction: column; gap: 0.6rem; }
  .vh-social { justify-content: center; }

  /* 22px rows are hard to hit with a thumb — pad the links out to ~44px. */
  .vh-footer__list a,
  .vh-footer__bottom a { display: block; padding-block: 0.6rem; }
  .vh-footer__bottom { flex-direction: column; justify-content: center; text-align: center; gap: 0.6rem; }
}

/* ==========================================================================
   18 · STICKY MOBILE BAR
   ========================================================================== */

.vh-quickbar {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  display: none; gap: 0.6rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--vh-glass-fill);
  -webkit-backdrop-filter: var(--vh-glass-blur);
  backdrop-filter: var(--vh-glass-blur);
  border-top: 1px solid var(--vh-hairline);
}
.vh-quickbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 0.5rem; border-radius: var(--vh-r); font-size: var(--vh-t-label); font-weight: 700; text-decoration: none; }
.vh-quickbar__call { background: var(--vh-surface-lowest); color: var(--vh-primary); border: 1px solid var(--vh-outline-muted); }
.vh-quickbar__book { background: var(--vh-primary); color: #fff; }
.vh-quickbar__book:hover { color: #fff; }
@media (max-width: 820px) { .vh-quickbar { display: flex; } body { padding-bottom: 78px; } }

/* ==========================================================================
   19 · MISC
   ========================================================================== */

.vh-404 { text-align: center; max-width: 640px; margin-inline: auto; }
.vh-404__mark { width: 88px; height: 88px; margin: 0 auto 2rem; display: grid; place-items: center; border-radius: var(--vh-r-full); background: var(--vh-primary-wash); color: var(--vh-primary); }
.vh-404__links { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; font-weight: 600; }

.vh-entry { max-width: 760px; margin-inline: auto; }
.vh-entry h2 { font-size: var(--vh-t-headline-md); margin: 2.5rem 0 1rem; }
.vh-entry h3 { margin: 2rem 0 0.75rem; }
.vh-entry p, .vh-entry li { color: var(--vh-on-surface-variant); margin-bottom: 1rem; }
.vh-entry ul, .vh-entry ol { padding-left: 1.35rem; margin-bottom: 1.35rem; }
.vh-entry img { border-radius: var(--vh-r-xl); margin-block: 2rem; }
.vh-entry blockquote { border-left: 3px solid var(--vh-primary); padding-left: 1.5rem; font-family: var(--vh-font-headline); font-weight: 500; letter-spacing: -0.02em; font-size: 1.3rem; margin-block: 2rem; }

.vh-postcard { display: block; padding: 1.75rem 0; border-bottom: 1px solid var(--vh-hairline); text-decoration: none; }
.vh-postcard time { display: block; font-size: var(--vh-t-label-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vh-outline); margin-bottom: 0.5rem; }

.vh-quote { font-family: var(--vh-font-headline); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.3; }
.vh-quote cite { display: block; margin-top: 1.25rem; font-family: var(--vh-font-body); font-size: var(--vh-t-label-sm); font-style: normal; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vh-outline); }

.vh-rule-divider { border-top: 1px solid var(--vh-hairline); }

.vh-reveal { opacity: 0; transform: translateY(18px); }
.vh-js .vh-reveal { transition: opacity 0.7s var(--vh-ease), transform 0.7s var(--vh-ease); }
.vh-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .vh-reveal { opacity: 1; transform: none; } }

/* Gutenberg alignment support */
.vh-entry .alignwide { max-width: 1100px; margin-inline: auto; }
.vh-entry .alignfull { max-width: none; margin-inline: calc(50% - 50vw); width: 100vw; }

@media print {
  .vh-header, .vh-topbar, .vh-footer, .vh-quickbar, .vh-cta, .vh-backdrop, .vh-hero__media { display: none !important; }
  body { background: #fff; color: #000; }
  .vh-tabs__panel[hidden] { display: block !important; }
}