/* Sitebuilder Stylesheet */
/* Design tokens are the single source of truth in css/tokens.css, linked (in parallel) before this file in each <head>. See DESIGN-RULEBOOK.md Part 2. */

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--color-accent-text);
}

/* Make INLINE PROSE links in content more visible. The underline is the link
   affordance and applies ONLY to bare (unclassed) links — i.e. real prose links.
   Structural/component links carry a class (.na-card, .erb-card, buttons, …) and
   are deliberately excluded so the underline never bleeds onto card/component text.
   See DESIGN-RULEBOOK.md → "Underlines mean prose links only". */
.content a:not([class]),
.card a:not([class]),
.editor-content a:not([class]) {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content a:not([class]):hover,
.card a:not([class]):hover,
.editor-content a:not([class]):hover {
  color: var(--color-primary);
}

/* "Under construction" / coming-soon screen (includes/maintenance.php) */
.mnt-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); box-sizing: border-box; background: var(--color-bg); }
.mnt-card { max-width: 560px; width: 100%; text-align: center; }
.mnt-logo { max-height: 80px; width: auto; margin: 0 auto var(--space-5); display: block; }
.mnt-name { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); margin: 0 0 var(--space-4); }
.mnt-title { font-size: var(--text-3xl); line-height: 1.15; margin: 0 0 var(--space-3); color: var(--color-text); }
.mnt-msg { font-size: var(--text-lg); line-height: 1.55; color: var(--color-text-light); margin: 0 0 var(--space-5); }
.mnt-count { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.mnt-unit { min-width: 72px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--color-white); }
.mnt-num { font-size: var(--text-2xl); font-weight: 700; line-height: 1; }
.mnt-lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; margin-top: var(--space-1); }

/* Layout */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.header {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-md);
}

.header-content {
  /* Header gutters — single owner. --header-edge is the minimum gutter at the
     page edge; --header-pad-x is the gutter that lines the header's content
     up with --max-width. The logo-position flip (theme-styles.php) and the
     language picker (.translate-widget) read these instead of re-typing them. */
  --header-edge: 20px;
  --header-pad-x: max(var(--header-edge), calc((100vw - var(--max-width)) / 2 + var(--header-edge)));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px var(--header-edge);
  padding-right: var(--header-pad-x);
  position: relative; /* anchor for the absolutely-pinned .translate-widget */
}

.logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  flex: 1;
  line-height: 1.1;
}

/* Optional slogan under the site name (site_tagline setting) */
.logo-tagline {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.82;
  letter-spacing: 0.02em;
}

.logo:hover {
  color: var(--color-white);
  opacity: 0.9;
}

.logo img {
  max-height: var(--logo-height, 50px);
  width: auto;
  object-fit: contain;
}

/* Known logo size (v1.131.0): header.php puts the file's width and aspect ratio
   on the <img> as --logo-w / --logo-h / --logo-ar, so the box has its final width before the
   file arrives (no header shift, and the compact-header check measures it right
   on a first visit). Same result as width:auto once loaded: the natural width,
   capped by the height limit (border-box: the plate's padding, --logo-pad-x/-y,
   sits outside the image). The phone/compact rules swap in the mobile height. */
.logo img[style*="--logo-ar"] {
  width: calc(2 * var(--logo-pad-x, 0px) + min(var(--logo-w), (var(--logo-height, 50px) - 2 * var(--logo-pad-y, 0px)) * var(--logo-ar)));
  height: min(calc(var(--logo-h) + 2 * var(--logo-pad-y, 0px)), var(--logo-height, 50px));
}

/* Opt-in "platta" behind the logo image (Inställningar → Logotypbild):
   the same card look as the admin preview — white plate, rounded corners,
   soft shadow. Tokens only. The padding is owned by --logo-pad-x/-y so the
   known-size rule above can account for it. */
.logo img.logo-plate {
  --logo-pad-x: 10px;
  --logo-pad-y: 4px;
  background: var(--color-white);
  padding: var(--logo-pad-y) var(--logo-pad-x);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Same lift language as .btn:hover */
.logo:hover img.logo-plate {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Navigation */
.nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  flex: 1;
  /* Anchor for the mega-menu panel (v1.111.0), which spans the whole bar
     instead of hanging off its own item like a plain dropdown does. */
  position: relative;
}

.nav a {
  color: rgba(255,255,255,0.9);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: var(--nav-font-size, 0.9rem);
  transition: var(--transition);
  white-space: nowrap;
}

.nav a:hover,
.nav a.active {
  background: rgba(255,255,255,0.2);
  color: var(--color-white);
}

/* Navigation dropdown for overflow items */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.9);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-weight: 500;
  /* Same size as the plain .nav a links — a dropdown toggle is a menu item too. */
  font-size: var(--nav-font-size, 0.9rem);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.has-active .nav-dropdown-toggle {
  background: rgba(255,255,255,0.2);
  color: var(--color-white);
}

.dropdown-arrow {
  font-size: 0.8em;
  margin-left: 5px;
  transition: transform 0.3s;
}

.nav-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  /* Every dropdown (Mer…, page submenus, mega panel, language) shares the
     header's theme colour — one menu surface, white type (v1.111.0). */
  background: var(--color-primary);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  min-width: 200px;
  padding: 8px 0;
  display: none;
  z-index: 1000;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

/* HOVER-OPEN (v1.91.1): pointer devices (mouse/trackpad) open dropdowns on
   hover — pure CSS, no timers, safe because the panel sits flush under the
   parent (top: 100%, no gap). The caret click-toggle keeps working everywhere
   (touch, keyboard, "pinning" a menu open), and the parent link itself still
   navigates on click — hover only ever SHOWS the panel, it never captures
   the click. Width-gated so the mobile hamburger accordion (≤768px) never
   hover-expands on touch laptops sized down. */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  /* FOLD-DOWN ANIMATION (v1.92.2): on pointer devices the panel stays
     rendered (display:block, hidden via opacity/visibility) so the open can
     transition — a quick top-hinged fold: slight rotateX + rise, ~180ms
     ease-out. Scoped to this media block ON PURPOSE: the mobile accordion
     is position:static, where visibility:hidden would still occupy layout
     space — mobile keeps the plain display toggle. pointer-events:none on
     the closed panel so an invisible panel can never ghost-trigger :hover. */
  :where(.header:not(.header--compact)) .nav-dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top center;
    transform: perspective(600px) rotateX(-14deg) translateY(-6px);
    transition:
      opacity 0.15s ease,
      transform 0.18s cubic-bezier(0.25, 0.8, 0.35, 1),
      visibility 0s linear 0.18s;
  }
  :where(.header:not(.header--compact)) .nav-dropdown:hover .nav-dropdown-menu,
  :where(.header:not(.header--compact)) .nav-submenu:hover .nav-dropdown-menu,
  :where(.header:not(.header--compact)) .nav-dropdown.open .nav-dropdown-menu,
  :where(.header:not(.header--compact)) .nav-submenu.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity 0.15s ease,
      transform 0.18s cubic-bezier(0.25, 0.8, 0.35, 1),
      visibility 0s;
  }
  :where(.header:not(.header--compact)) .nav-dropdown:hover .dropdown-arrow,
  :where(.header:not(.header--compact)) .nav-submenu:hover .dropdown-arrow {
    transform: rotate(180deg);
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.header:not(.header--compact)) .nav-dropdown-menu,
    :where(.header:not(.header--compact)) .nav-dropdown:hover .nav-dropdown-menu,
    :where(.header:not(.header--compact)) .nav-submenu:hover .nav-dropdown-menu,
    :where(.header:not(.header--compact)) .nav-dropdown.open .nav-dropdown-menu,
    :where(.header:not(.header--compact)) .nav-submenu.open .nav-dropdown-menu {
      transition: none;
      transform: none;
    }
  }
}

.nav-dropdown-menu a {
  display: block;
  /* Explicit left: center-header themes set text-align:center on
     .header-content, which otherwise inherits into the panel (v1.91.1).
     The mobile accordion re-centers later in this file — intentional. */
  text-align: left;
  color: rgba(255,255,255,0.92) !important;
  padding: 10px 20px !important;
  border-radius: 0 !important;
  font-weight: 500;
}

.nav-dropdown-menu a:hover {
  background: rgba(255,255,255,0.15) !important;
  color: var(--color-white) !important;
}

.nav-dropdown-menu a.active {
  background: rgba(255,255,255,0.3) !important;
  color: var(--color-white) !important;
}

/* Children inside the overflow ("Mer...") dropdown — indented under their parent */
.nav-dropdown-menu a.nav-dropdown-child {
  padding-left: 36px !important;
}

/* Grandchildren inside the overflow ("Mer...") dropdown — deeper indent than
   a plain child, and labels (headings without content) read like a child row. */
.nav-dropdown-menu a.nav-dropdown-grandchild {
  padding-left: 56px !important;
}

.nav-dropdown-menu span.nav-dropdown-label {
  display: block;
  color: rgba(255,255,255,0.92);
  padding: 10px 20px 10px 36px;
  cursor: default;
  opacity: 0.7;
}

/* Mega menu (v1.111.0): a submenu panel whose children each carry their own
   subpages renders as column groups instead of a flat link list. The panel
   inherits display:none from .nav-dropdown-menu; only the open/hover states
   below switch it to flex (they sit AFTER the base .open/:hover display:block
   rules with one extra class, so they win). Link colors, hover, active and
   base padding are owned by .nav-dropdown-menu a above — only layout here. */
/* The item itself goes static so the panel positions against .nav (whose
   bottom edge IS the item's bottom edge — no hover dead zone) and can span
   the bar's full width; columns wrap when there are many. */
.nav-submenu:has(> .nav-dropdown-menu.nav-mega) {
  position: static;
}

.nav-submenu .nav-dropdown-menu.nav-mega,
.nav > .nav-submenu:last-child .nav-dropdown-menu.nav-mega,
.nav > .nav-submenu:nth-last-child(2) .nav-dropdown-menu.nav-mega {
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-items: start; /* each group hugs its own content, no row stretch */
  gap: var(--space-3);
  padding: var(--space-3);
  /* Accent edge ties the panel to the bar — flat fill, no gradient. */
  border-top: 3px solid var(--color-accent);
}

.nav-dropdown-menu span.nav-mega-heading {
  color: rgba(255,255,255,0.92);
}

.nav-submenu.open .nav-dropdown-menu.nav-mega {
  display: grid;
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  :where(.header:not(.header--compact)) .nav-submenu:hover .nav-dropdown-menu.nav-mega {
    display: grid;
  }
}

.nav-mega-col {
  /* One group = one box: heading + its pages sit on a faint lighter ground so
     the reader sees what belongs together even with heading-only groups. */
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding-bottom: var(--space-1);
  /* Center-header themes set text-align:center on .header-content; the
     panel's own links already force left, the <span> headings need it too. */
  text-align: left;
}

/* Column heading: bold; a <span> heading (page without content) is a label,
   not a link — same text color as the links, no hover, not focusable. */
/* Headings take the theme's primary colour with a hairline underneath, so a
   column reads as a group and the panel follows the site's colour setting. */
.nav-dropdown-menu .nav-mega-heading {
  display: block;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: var(--space-1);
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

/* A heading with no pages under it is the whole group: no separator line,
   no empty strip — the box hugs the heading. */
.nav-dropdown-menu .nav-mega-heading:last-child {
  border-bottom: none;
  margin-bottom: calc(-1 * var(--space-1));
  border-radius: var(--radius) !important;
}

/* Long titles wrap inside their column instead of running under the next one. */
.nav-mega-col a,
.nav-mega-col span {
  white-space: normal;
  overflow-wrap: anywhere;
}

span.nav-mega-heading {
  padding: 10px 20px;
  cursor: default;
  opacity: 0.6;
}

/* Items under a heading sit one step in. */
.nav-mega-col a:not(.nav-mega-heading) {
  padding-left: 32px !important;
}

/* Submenu parent in the main nav row — link + arrow combined */
.nav-submenu {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius);
  transition: var(--transition);
}

.nav-submenu:hover,
.nav-submenu.has-active,
.nav-submenu.active {
  background: rgba(255,255,255,0.2);
}

.nav-submenu .nav-submenu-link {
  color: rgba(255,255,255,0.9);
  padding: 8px 4px 8px 12px;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  transition: var(--transition);
  background: transparent;
  border-radius: 0;
}

.nav-submenu.active .nav-submenu-link,
.nav-submenu:hover .nav-submenu-link {
  color: var(--color-white);
  background: transparent;
}

.nav-submenu-toggle {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  padding: 8px 10px 8px 4px;
  font-family: inherit;
  display: flex;
  align-items: center;
}

.nav-submenu-toggle:hover {
  color: var(--color-white);
}

/* Submenu dropdown panel anchors to the parent's left edge (not right like Mer...) */
.nav-submenu .nav-dropdown-menu {
  left: 0;
  right: auto;
}

/* ...except at the far right of the bar, where a left-anchored panel runs
   off the viewport (clipped items + horizontal scrollbar). The last submenu
   — and the second-to-last, for when a "Mer..." dropdown sits after it —
   anchor to their parent's right edge instead. */
.nav > .nav-submenu:last-child .nav-dropdown-menu,
.nav > .nav-submenu:nth-last-child(2) .nav-dropdown-menu {
  left: auto;
  right: 0;
}

/* Menyns placering "Centrerad" / "Visa logotyp" av (v1.130.0). Modifier classes
   set on .header-content by partials/header.php (sbHeaderLayoutClasses); absent
   by default, so nothing here touches a site that hasn't opted in. Desktop only:
   the mobile hamburger layout is unchanged. */
@media (min-width: 769px) {
  /* Header: centered menu. Three tracks, equal outer columns: the menu lands in
     the true centre, and a wide logo widens its column (pushing the menu right)
     instead of overlapping it. The max-content floor keeps the logo from being
     squeezed on narrow desktops (plain 1fr let the image shrink). Padding must be
     symmetric for the centre to be true; it overrides the asymmetric default and
     the logo-position flip. */
  :where(.header:not(.header--compact)) .header-content.header-content--nav-center {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    padding-left: var(--header-pad-x);
    padding-right: var(--header-pad-x);
  }

  /* Language picker: stays IN FLOW in the outer track (its own gutter geometry
     from .translate-widget still puts the label at the page edge), so its track
     reserves room and the menu can never slide under it. With a picker the bar
     can run out of room on narrow desktops; then — and only then — the logo may
     shrink, same last resort as the default header. The logo-position flip
     (theme-styles.php) mirrors both rules. */
  :where(.header:not(.header--compact)) .header-content--nav-center .translate-widget {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  :where(.header:not(.header--compact)) .header-content--nav-center:has(> .translate-widget) {
    grid-template-columns: minmax(min-content, 1fr) auto minmax(max-content, 1fr);
  }

  /* grid-row: 1 on all items — with the logo flipped to track 3
     (logo_position=right), sparse auto-placement would otherwise push the nav
     onto a second row. */
  :where(.header:not(.header--compact)) .header-content--nav-center .logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  :where(.header:not(.header--compact)) .header-content--nav-center .nav {
    grid-column: 2;
    grid-row: 1;
    flex: none;
    justify-content: flex-start; /* items grouped with their normal gap */
    /* The mega panel anchors to .nav (relative). The nav is now only as wide as
       its items, so the panel is re-sized below to span the bar again. */
  }

  /* Mega-menu panel: span the content width of the bar, centred on the nav (which
     is centred on the viewport). Width stays under 100vw by 2x the gutter so a
     classic scrollbar can't cause horizontal overflow. */
  .header:where(:not(.header--compact)) .header-content--nav-center .nav .nav-submenu .nav-dropdown-menu.nav-mega {
    left: 50%;
    right: auto;
    width: calc(100vw - 2 * var(--header-pad-x));
    margin-left: calc(-0.5 * (100vw - 2 * var(--header-pad-x)));
  }
}

/* Header with the logo hidden: .sr-only keeps it readable for screen readers. On
   mobile the bar would shrink to the bare hamburger, so hold the logo bar's
   height and keep the hamburger at the end of the row. */
/* sb-mobile-header:start */
@media (max-width: 768px) {
  .header-content--no-logo {
    justify-content: flex-end;
    min-height: calc(var(--logo-height-mobile, 50px) + 30px);
  }
}
/* sb-mobile-header:end */
/* Compact twin of the block above (see 'Compact header' note near the main mobile block). */
/* sb-compact-header:start */
:where(.header--compact) .header-content--no-logo {
  justify-content: flex-end;
  min-height: calc(var(--logo-height-mobile, 50px) + 30px);
}
/* sb-compact-header:end */

/* ---------- Gallery block: carousel mode ---------- */
.block-gallery-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  user-select: none;
}

.block-gallery-carousel.aspect-21-9 { aspect-ratio: 21 / 9; }
.block-gallery-carousel.aspect-16-9 { aspect-ratio: 16 / 9; }
.block-gallery-carousel.aspect-4-3  { aspect-ratio: 4 / 3; }
.block-gallery-carousel.aspect-1-1  { aspect-ratio: 1 / 1; }

.block-gallery-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.block-gallery-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  cursor: pointer;
}

.block-gallery-carousel-slide.active {
  opacity: 1;
  z-index: 1;
}

/* When the carousel has a fixed aspect ratio, cover the slot.
   In auto mode the slide just contains the image at its natural ratio. */
.block-gallery-carousel-slide img {
  width: 100%;
  height: 100%;
  display: block;
}

.block-gallery-carousel.aspect-21-9 .block-gallery-carousel-slide img,
.block-gallery-carousel.aspect-16-9 .block-gallery-carousel-slide img,
.block-gallery-carousel.aspect-4-3  .block-gallery-carousel-slide img,
.block-gallery-carousel.aspect-1-1  .block-gallery-carousel-slide img {
  object-fit: cover;
}

/* In auto mode there's no fixed aspect-ratio on the container — let images flow */
.block-gallery-carousel:not(.aspect-21-9):not(.aspect-16-9):not(.aspect-4-3):not(.aspect-1-1) {
  aspect-ratio: auto;
}
.block-gallery-carousel:not(.aspect-21-9):not(.aspect-16-9):not(.aspect-4-3):not(.aspect-1-1) .block-gallery-carousel-track {
  /* Track grows with the active slide */
  min-height: 0;
}
.block-gallery-carousel:not(.aspect-21-9):not(.aspect-16-9):not(.aspect-4-3):not(.aspect-1-1) .block-gallery-carousel-slide {
  position: relative;
}
.block-gallery-carousel:not(.aspect-21-9):not(.aspect-16-9):not(.aspect-4-3):not(.aspect-1-1) .block-gallery-carousel-slide:not(.active) {
  display: none;
}
.block-gallery-carousel:not(.aspect-21-9):not(.aspect-16-9):not(.aspect-4-3):not(.aspect-1-1) .block-gallery-carousel-slide img {
  height: auto;
  object-fit: contain;
}

.block-gallery-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.2s;
}

.block-gallery-carousel-nav:hover {
  background: rgba(0,0,0,0.7);
}

.block-gallery-carousel-nav.prev { left: 12px; }
.block-gallery-carousel-nav.next { right: 12px; }

.block-gallery-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.block-gallery-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.block-gallery-carousel-dot:hover { background: rgba(255,255,255,0.8); }

.block-gallery-carousel-dot.active {
  background: #fff;
  transform: scale(1.3);
}

.block-gallery-carousel-caption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-text);
  font-style: italic;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
}

/* Översättning: language dropdown in the header (translate_enabled setting,
   admin/settings.php). Sits at the right end of the header row, after the
   nav, and reuses the nav's own .nav-dropdown/.nav-dropdown-toggle/
   .nav-dropdown-menu primitive (navigation.php) — hover-open on desktop
   and the click-to-open mobile accordion both come for free from that
   shared component (v1.104.0 — was previously a native <select>, which
   can't be opened on hover; Adrian, 2026-08-21). No color rule needed
   here: .nav-dropdown-toggle already matches header text on solid and
   transparent themes, same as every other nav item. */
.translate-widget {
  /* Placement (v1.129.3): the picker sits at the header's outer page edge,
     apart from the menu — not as a sixth menu item — while the menu stays
     aligned with the content width.
     It stays IN FLOW (a flex item after the nav), so the nav can never slide
     under it (v1.92.1–1.129.1 pinned it absolutely, which covered the last
     menu item). Its box fills the header's centering gutter instead:
       outward margin — negative: pulls the box out through the gutter to
                        --header-edge from the page edge;
       width          — the rest of that gutter, so the nav still ends at the
                        content edge; the label is pushed to the outer end;
       inward margin  — --space-5, the minimum gap to the nav.
     When the gutter is narrower than the label (smaller screens),
     min-width: max-content wins and the nav simply ends further in — still
     no overlap. The logo-position flip (theme-styles.php) swaps the margins.
     Center-layout themes stack .header-content as a column, where an in-flow
     picker would wrap onto its own row below the nav, so themes.php's center
     block flips the switches below to pin it instead (right: --header-pad-x
     plus the outward margin = --header-edge from the page edge; width back
     to auto so no empty box lies over the nav). Mobile (≤768px) reverts to
     in-flow next to the hamburger. */
  --translate-widget-gutter: calc(var(--header-pad-x) - var(--header-edge));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  width: var(--translate-widget-slot, max(0px, calc(var(--translate-widget-gutter) - var(--space-5))));
  min-width: max-content;
  margin-left: var(--space-5);
  margin-right: calc(-1 * var(--translate-widget-gutter));
  position: var(--translate-widget-position, static);
  right: var(--header-pad-x);
  top: 50%;
  transform: var(--translate-widget-transform, none);
}

/* Globe before the language name: marks the picker as "language", not a page. */
.translate-dropdown .nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.translate-globe {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* Narrow desktop: logo + full menu + picker don't fit on one row, so the
   picker shrinks to globe + arrow. The language name stays the button's
   accessible name — hidden the same way as .sr-only, not display:none. */
@media (min-width: 769px) and (max-width: 1100px) {
  :where(.header:not(.header--compact)) .translate-current {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.translate-dropdown .nav-dropdown-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Google Website Translator artifact suppression. Google's widget injects
   a top banner iframe and pushes body down with inline "top" styling, plus
   a floating gadget/tooltip — all unwanted since we drive translation via
   our own select. !important is intentionally confined to this block only:
   these are third-party injected elements we don't control the specificity
   of otherwise. */
.goog-te-banner-frame,
iframe.skiptranslate {
  display: none !important;
}

body {
  top: 0 !important;
}

#google_translate_element,
.goog-te-gadget {
  display: none !important;
}

.goog-tooltip,
.goog-tooltip:hover,
#goog-gt-tt {
  display: none !important;
}

/* Anti-flicker veil (translate-widget.php): set on <html> at load when a
   translation cookie is active, removed as soon as Google's translated text
   lands (or after a 2s failsafe). Hides the ~100ms flash of the original
   language on every page load of a translated site. */
html.sb-translating body {
  visibility: hidden;
}

/* Hero Section */
.hero {
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  padding: 80px 20px;
  text-align: center;
  min-height: var(--hero-height, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-md);
}

.hero h1 {
  font-size: 2.8rem;
  font-weight: var(--font-heading-weight, 700);
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero p {
  font-size: 1.2rem;
  opacity: 0.95;
  max-width: 600px;
  margin: 0 auto;
}

.hero .hero-subtitle p + p { margin-top: var(--space-3); }

/* Hero call-to-action button (v1.119.0) — "Knapp i hero". The .btn class
   owns colour/shape; this only adds the gap under the title/subtitle. */
.hero-cta { margin-top: var(--space-4); }

/* Hero "spot text" panel (v1.109.0) — the hero title + subtitle in a
   translucent plate offset left or right (hero_text_layout setting; per-page
   override). Markup lives ONLY in includes/templates/partials/hero-text.php.
   The plate is a plain flex child, so the hero-video layer (z-index:-1) and
   the parallax layer keep working unchanged. */
.hero--spot-left,
.hero--spot-right {
  text-align: left;
  justify-content: flex-start;
}

.hero-spot {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
}

.hero--spot-right .hero-spot {
  justify-content: flex-end;
}

.hero-spot__panel {
  max-width: var(--hero-spot-width);
  padding: var(--space-6) var(--space-6);
  background: var(--hero-spot-bg);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--hero-spot-blur));
  -webkit-backdrop-filter: blur(var(--hero-spot-blur));
}

.hero-spot__panel:not(.hero-spot__panel--bare) h1 {
  text-shadow: none;
}

.hero-spot__panel p {
  margin: 0 0 var(--space-3);
  max-width: none;
}

.hero-spot__panel p:last-child {
  margin-bottom: 0;
}

/* Rutans genomskinlighet = 0 (v1.110.0): no plate, just the text — the h1
   above keeps the normal .hero h1 text-shadow for legibility (no shadow
   value re-declared here; see .hero h1). */
.hero-spot__panel--bare {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-left: 0;
  padding-right: 0;
}

/* Entrance reveal primitive (v1.109.0). Reusable by blocks: add
   .sb-reveal-from-left / .sb-reveal-from-right to any element. CSS-only, so
   it is cache-safe and needs no script. Off under reduced motion. */
@keyframes sb-reveal-from-left {
  from { opacity: 0; transform: translateX(calc(-1 * var(--reveal-distance))); }
  to   { opacity: 1; transform: none; }
}

@keyframes sb-reveal-from-right {
  from { opacity: 0; transform: translateX(var(--reveal-distance)); }
  to   { opacity: 1; transform: none; }
}

.sb-reveal-from-left {
  animation: sb-reveal-from-left var(--reveal-duration) ease-out both;
}

.sb-reveal-from-right {
  animation: sb-reveal-from-right var(--reveal-duration) ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .sb-reveal-from-left,
  .sb-reveal-from-right {
    animation: none;
  }
}

/* Scroll-reveal (v1.115.0) — per-row "fade in on scroll", reusing the
   sb-reveal-from-left/right keyframes and --reveal-duration/--reveal-distance
   tokens shipped for the hero spot panel in v1.109.0/v1.110.0. Markup
   (data-reveal, data-reveal-repeat) comes from sbRowRevealAttrs() in
   includes/pages-config.php — the single owner. js/scroll-reveal.js sets
   html[data-reveal-js] and toggles .is-visible; without it (no-JS, or
   IntersectionObserver unsupported) nothing here ever hides the content. */
@keyframes sb-reveal-up {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to   { opacity: 1; transform: none; }
}

@keyframes sb-reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html[data-reveal-js] [data-reveal]:not(.is-visible) {
  opacity: 0;
}

[data-reveal].is-visible {
  animation-duration: var(--reveal-duration);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

[data-reveal="fade"].is-visible  { animation-name: sb-reveal-fade; }
[data-reveal="up"].is-visible    { animation-name: sb-reveal-up; }
[data-reveal="left"].is-visible  { animation-name: sb-reveal-from-left; }
[data-reveal="right"].is-visible { animation-name: sb-reveal-from-right; }

@media (max-width: 768px) {
  /* Smaller offset on mobile; scoped to [data-reveal] only so it never
     changes --reveal-distance for the (unrelated) hero spot panel. */
  [data-reveal] {
    --reveal-distance: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    animation: none;
  }
}

/* Hero video (v1.83.0) — self-hosted looping background video, rendered by
   includes/templates/partials/hero-video.php. .hero already sets
   position:relative + z-index:1, which forms its own stacking context, so
   z-index here is scoped to that context only (never leaks under the page
   header/nav). A box's own background always paints BEFORE any descendant
   (see js/parallax.js for the same rule applied to parallax layers), so the
   video sits above .hero's own background-image (gradient + hero image)
   regardless of z-index — z-index:-1 then keeps it BELOW the hero's normal,
   non-positioned text content (title/subtitle), which paints next in the
   stacking order. The ::after re-draws the exact same overlay gradient on
   top of the video so the tint still reads once the image is replaced. */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--hero-overlay-start), var(--hero-overlay-end));
}

/* Page Header (for subpages) */
/* Hero OFF → a genuinely light header (clearly distinct from the .hero band):
   no brand fill, dark text, just a title over a thin divider. */
.page-header {
  background: transparent;
  color: var(--color-text);
  padding: 32px 20px 14px;
  text-align: center;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
  font-size: 1.9rem;
  font-weight: var(--font-heading-weight, 700);
}

/* Main Content */
.main {
  padding: var(--section-padding, 60px) 20px;
  background: var(--color-white);
}

/* Content width — the ONE rule. Value comes from --content-width, which themes.php
   sets (theme default -> site setting -> per-page inline override). No other place
   caps .content. */
.content {
  max-width: var(--content-width, 1000px);
  margin: 0 auto;
}

.content h2 {
  color: var(--color-primary);
  font-size: 1.8rem;
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--color-accent);
}

.content h2:first-child {
  margin-top: 0;
}

.content p {
  margin-bottom: 1.2em;
}

.content ul {
  margin: 1em 0 1.5em 1.5em;
}

.content li {
  margin-bottom: 0.5em;
}

/* Cards */
.card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 30px;
  margin-bottom: 30px;
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Content Cards (insertable via editor) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
  padding: 20px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: var(--transition);
}

.card-grid:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  background: rgba(0, 0, 0, 0.01);
}

.content-card {
  background: var(--color-bg);
  padding: 15px;
  border-radius: var(--radius);
  transition: var(--transition);
}

.content-card:hover {
  box-shadow: var(--shadow-sm);
}

.content-card img {
  width: 100%;
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: 12px;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.content-card h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: var(--color-primary);
}

.content-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* Lightbox (shared by gallery and card grids) */
.lightbox,
.block-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.lightbox.active,
.block-lightbox.active {
  display: flex;
}

.lightbox-content,
.block-lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-content img,
.block-lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.lightbox-content img.slide-left,
.block-lightbox-content img.slide-left {
  transform: translateX(-100px);
  opacity: 0;
}

.lightbox-content img.slide-right,
.block-lightbox-content img.slide-right {
  transform: translateX(100px);
  opacity: 0;
}

.lightbox-caption,
.block-lightbox-caption {
  text-align: center;
  color: white;
  padding: 15px;
  font-size: 1.1rem;
}

.lightbox-close,
.block-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 2001;
  line-height: 1;
  padding: 10px;
}

.lightbox-close:hover,
.block-lightbox-close:hover {
  color: #ccc;
}

.lightbox-nav,
.block-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  padding: 20px 15px;
  border-radius: 4px;
  transition: background 0.2s;
  z-index: 2001;
}

.lightbox-nav:hover,
.block-lightbox-nav:hover {
  background: rgba(255,255,255,0.3);
}

.lightbox-prev,
.block-lightbox-prev {
  left: 20px;
}

.lightbox-next,
.block-lightbox-next {
  right: 20px;
}

.lightbox-counter,
.block-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
}

/* News lightbox carries a download-info line + button at the bottom of its content;
   a tall portrait image pushes those down onto the bottom-anchored counter. Move the
   news counter to the top-center so "X / Y" never overlaps them. Scoped by id so the
   legacy block-gallery lightbox keeps its bottom counter. */
#news-lightbox-counter {
  top: 16px;
  bottom: auto;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* News lightbox: stack the image area over a fixed bottom band (filmstrip +
   download controls). Column layout means the image fills the space ABOVE the
   band — never overlapping or pushing the button off-screen, at any aspect.
   (Nav arrows / close / counter are position:absolute, so they're unaffected.) */
#news-lightbox {
  flex-direction: column;
}
#news-lightbox .block-lightbox-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#news-lightbox-img {
  max-height: 100%;
  max-width: 92vw;
}
#news-lightbox-bottom {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}
#news-lightbox-filmstrip {
  display: flex;
  gap: 6px;
  max-width: 94vw;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}
#news-lightbox-filmstrip img {
  height: 54px;
  width: auto;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 2px solid transparent;
  opacity: 0.5;
  cursor: pointer;
  object-fit: cover;
  transition: opacity 0.15s ease, border-color 0.15s ease;
  -webkit-user-drag: none;
  user-select: none;
}
#news-lightbox-filmstrip img.active {
  opacity: 1;
  border-color: #fff;
}
#news-lightbox-filmstrip img:hover {
  opacity: 0.85;
}
#news-lightbox-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 12px;
}
#news-lightbox-dlinfo {
  color: #ccc;
  font-size: 0.9em;
}

/* Make card images clickable when lightbox is enabled */
.content-card.has-lightbox {
  cursor: pointer;
}

.content-card.has-lightbox img {
  transition: transform 0.2s, box-shadow 0.2s;
}

.content-card.has-lightbox:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* Image Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.gallery-item:hover {
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.gallery-item figcaption {
  padding: 12px 15px;
  background: var(--color-white);
  font-size: 0.9rem;
  color: var(--color-secondary);
}

/* News bildserie — justified-rows natural-aspect gallery (true portrait/landscape,
   no crop, curated order preserved). JS in template-news.php sizes each item from
   its stored w/h and adds .is-justified; pre-JS / no-JS = graceful wrap at natural
   aspect. Scoped to .news-gallery-justified so other galleries are untouched. */
.gallery.news-gallery-justified {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-template-columns: none;
  align-content: flex-start;
  padding: 20px 0;
}
.news-gallery-justified .gallery-item {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  overflow: hidden;
}
.news-gallery-justified .gallery-item img {
  display: block;
  width: 100%;
  height: auto;            /* fallback: show natural aspect, never cropped */
  object-fit: contain;
}
.news-gallery-justified.is-justified .gallery-item img {
  height: 100%;            /* JS active: fill the exactly-proportioned box → no crop */
  object-fit: cover;
}
.news-gallery-justified:not(.is-justified) .gallery-item {
  flex: 1 1 220px;         /* pre-JS / no-JS: simple responsive wrap */
  max-width: 360px;
}
.news-gallery-justified .gallery-item:hover {
  transform: none;         /* tight packing → zoom the image inside instead of the cell */
}
.news-gallery-justified.is-justified .gallery-item:hover img {
  transform: scale(1.04);
  transition: transform 0.3s ease;
}
.news-gallery-justified .gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 20px 10px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* Document List */
.document-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.document-list li {
  margin: 0;
}

.document-list a {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: var(--color-bg);
  border-radius: var(--radius);
  margin-bottom: 10px;
  transition: var(--transition);
  gap: 12px;
}

.document-list a:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateX(5px);
}

.document-list .doc-meta {
  color: var(--color-text-light);
  margin-left: 10px;
}

.document-list a:hover .doc-meta {
  color: inherit;
}

/* Document-list rows are component links even when hand-authored (unclassed)
   inside editor content — the prose-link rules above (.content/.card/
   .editor-content a:not([class])) would otherwise outrank .document-list
   a:hover and paint primary-on-primary (invisible text). Reassert row colors
   at higher specificity. */
.content .document-list a:not([class]),
.card .document-list a:not([class]),
.editor-content .document-list a:not([class]) {
  color: inherit;
  text-decoration: none;
}

.content .document-list a:not([class]):hover,
.card .document-list a:not([class]):hover,
.editor-content .document-list a:not([class]):hover {
  color: var(--color-white);
}

.document-list .icon {
  font-size: 1.3rem;
}

/* Board Members */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.board-member {
  background: var(--color-bg);
  padding: 25px;
  border-radius: var(--radius);
  text-align: center;
  transition: var(--transition);
}

.board-member:hover {
  box-shadow: var(--shadow-sm);
}

.board-member h3 {
  color: var(--color-primary);
  margin-bottom: 5px;
  font-size: 1.1rem;
}

.board-member .role {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.board-member a {
  font-size: 0.9rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--color-button);
  color: var(--color-on-button);
  border-radius: var(--radius);
  font-weight: 600;
  transition: var(--transition);
  border: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--color-button-hover);
  color: var(--color-on-button-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-button);
  color: var(--color-button);
}

.btn-outline:hover {
  background: var(--color-button);
  color: var(--color-on-button);
}

/* ===== Button block ===== */
.block-button.btn-align-left   { text-align: left; }
.block-button.btn-align-center { text-align: center; }
.block-button.btn-align-right  { text-align: right; }
.block-button.btn-full { width: 100%; }

/* Sticky button ("Fäst vid toppen vid scroll") — js/button-sticky.js toggles
   .btn-sticky--stuck once the visitor scrolls past the button; --btn-sticky-top
   is set inline to the sticky/fixed site header's height (0 otherwise).
   z-index sits just below .sb-admin-tools (9999) so the floating edit
   button always stays on top. */
.btn-sticky--stuck {
  position: fixed;
  top: var(--btn-sticky-top, 0);
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  justify-content: center;
  text-align: center;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2);
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* Footer */
.footer {
  background: var(--color-primary);
  color: rgba(255,255,255,0.9);
  padding: 40px 20px;
  text-align: center;
}

.footer p {
  margin: 5px 0;
  font-size: 0.95rem;
}

.footer a {
  color: rgba(255,255,255,0.9);
}

.footer a:hover {
  color: var(--color-white);
}

/* Licence notice — same colour as the rest of the footer text (AA already proven
   there), one step smaller. Set in exactly one place; never inline. */
.footer-license-notice {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* Customer login (Kundinloggning) — discreet footer utility link, sits beside
   the cookie-settings link below the footer. Mirrors .cookie-settings-link. */
.customer-login-link {
  text-align: center;
  padding: 8px 0 14px;
}
.customer-login-link a {
  font-size: 0.8rem;
  color: inherit;
  opacity: 0.6;
  text-decoration: underline;
}
.customer-login-link a:hover {
  opacity: 1;
}

/* Extended Footer (with map and info) */
.extended-footer {
  background: var(--color-bg);
  padding: 40px 20px;
  border-top: 1px solid var(--color-border);
}

.extended-footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: var(--max-width);
  margin: 0 auto;
  align-items: start;
}

.extended-footer-content.map-right {
  direction: rtl;
}

.extended-footer-content.map-right > * {
  direction: ltr;
}

.footer-map {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.footer-map iframe {
  width: 100%;
  height: 300px;
  border: none;
  display: block;
}

.footer-info {
  color: var(--color-text);
  line-height: 1.8;
}

.footer-info h3 {
  color: var(--color-primary);
  margin: 0 0 15px 0;
  font-size: 1.2rem;
}

.footer-info p {
  margin: 0 0 10px 0;
}

.footer-info a {
  color: var(--color-accent-text);
}

.footer-info a:hover {
  color: var(--color-primary);
}

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 25px;
  color: white;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}

.social-link i {
  font-size: 1.1rem;
}

.social-link:hover {
  transform: scale(1.05);
  opacity: 0.9;
  color: white;
}

.social-facebook {
  background: #1877f2;
}

.social-instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.facebook-like-container {
  margin-top: 15px;
}

.fb-like-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f0f0f0;
  border-radius: 6px;
  color: #666;
  font-size: 0.85rem;
  cursor: default;
}

.fb-like-placeholder i {
  color: #1877f2;
}

@media (max-width: 768px) {
  .extended-footer-content {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .extended-footer-content.map-right {
    direction: ltr;
  }

  .footer-map iframe {
    height: 250px;
  }
}

/* Responsive Design */
/* Compact header (v1.131.0): when the desktop header does not fit on one row
   (wide menu, narrow desktop/tablet) the inline script after </header> adds
   .header--compact and the header becomes the phone header. Every header rule
   below therefore exists TWICE: in the max-width media block (works with JS off)
   and as a :where(.header--compact) twin (zero extra specificity, same cascade
   position). tests/header-auto-compact-test.php fails if the two drift apart;
   edit the media block, then mirror the change into the twin. */
/* sb-mobile-header:start */
@media (max-width: 768px) {
  .header-content {
    flex-wrap: wrap;
  }

  .menu-toggle {
    display: block;
  }

  /* Sidhuvudets storlek: 'large' (72px) is too tall for the mobile header
     row, so cap the logo via the same token family instead of a literal —
     --logo-height-mobile already equals today's 50px look at 'normal'. */
  .logo img {
    max-height: var(--logo-height-mobile, 50px);
  }

  .logo img[style*="--logo-ar"] {
    width: calc(2 * var(--logo-pad-x, 0px) + min(var(--logo-w), (var(--logo-height-mobile, 50px) - 2 * var(--logo-pad-y, 0px)) * var(--logo-ar)));
    height: min(calc(var(--logo-h) + 2 * var(--logo-pad-y, 0px)), var(--logo-height-mobile, 50px));
  }

  /* Stays in the header row next to the hamburger (simplest, no-overlap
     placement) when the menu is closed. When the menu opens, .nav's own
     flex-basis: 100% pushes it to a new line first, so the widget — later
     in the DOM — naturally wraps below the open nav instead of overlapping it.
     Reverts the desktop page-edge placement and center-layout themes' pinning:
     on mobile the header row is tight and an absolute widget would sit on top
     of the hamburger button. */
  .translate-widget {
    position: static;
    transform: none;
    width: auto;
    margin-left: auto;
    margin-right: 0;
  }

  .nav {
    display: none;
    width: 100%;
    /* Cancel the desktop flex:1 (flex-basis 0 ignores width) so the open menu
       wraps to its own full-width line BELOW the logo row — the logo stops
       re-centering when menus grow, and items center across the full width. */
    flex: 0 0 100%;
    flex-direction: column;
    padding-top: 15px;
    gap: 5px;
  }

  .nav.active {
    display: flex;
  }

  .nav a {
    padding: 12px 15px;
    text-align: center;
  }

  /* Mobile dropdown styles */
  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-toggle {
    width: 100%;
    text-align: center;
    padding: 12px 15px;
  }

  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    background: rgba(255,255,255,0.1);
    border-radius: 0;
    margin-top: 5px;
  }

  .nav-dropdown-menu a {
    color: rgba(255,255,255,0.9) !important;
    text-align: center;
  }

  .nav-dropdown-menu a:hover {
    background: rgba(255,255,255,0.2) !important;
    color: var(--color-white) !important;
  }

  .nav-dropdown-menu a.active {
    background: rgba(255,255,255,0.3) !important;
    color: var(--color-white) !important;
  }

  /* The translate widget lives in the compact header row next to the
     hamburger, not inside the full-width .nav accordion — the mobile
     .nav-dropdown rules above are built for that accordion (full-width,
     static panel pushing the page down) and would otherwise stretch this
     small widget across the header and reflow it open. Keep it a compact
     popup on mobile too, matching its desktop appearance. */
  .translate-dropdown,
  .translate-dropdown .nav-dropdown-toggle {
    width: auto;
  }

  .translate-dropdown .nav-dropdown-toggle {
    text-align: left;
    padding: 6px 10px;
  }

  .translate-dropdown .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    width: auto;
    min-width: 160px;
    background: var(--color-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    margin-top: 0;
  }

  .translate-dropdown .nav-dropdown-menu a {
    text-align: left;
  }

  /* Page submenus (Om oss ▾) behave exactly like the Mer... accordion:
     label+caret centered as one unit, panel opens full-width BELOW the item
     (desktop keeps the flex row, so the static panel would otherwise render
     as a flex sibling beside the caret — the "side popup" bug). */
  .nav-submenu {
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-submenu .nav-dropdown-menu {
    flex-basis: 100%;
    width: 100%;
  }

  /* Mega menu on mobile: opens like the other accordions (.open only —
     never hover), columns stacked full-width, rows centered like every other
     mobile row. Colors come from the mobile .nav-dropdown-menu a rules above. */
  .nav-submenu.open .nav-dropdown-menu.nav-mega {
    display: block;
  }

  .nav-submenu .nav-dropdown-menu.nav-mega {
    gap: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
  }

  .nav-mega-col {
    width: 100%;
    background: none;
    border-radius: 0;
    padding-bottom: 0;
  }

  .nav-mega-heading,
  .nav-mega-col a:not(.nav-mega-heading) {
    text-align: center;
    padding-left: 15px !important;
  }

  .nav-dropdown-menu .nav-mega-heading {
    color: rgba(255,255,255,0.9) !important;
    border-bottom: none;
    margin-bottom: 0;
  }

  .nav-submenu .nav-dropdown-menu.nav-mega {
    border-top: none;
  }

  span.nav-mega-heading,
  .nav-dropdown-menu span.nav-dropdown-label {
    color: rgba(255,255,255,0.9);
    text-align: center;
    padding-left: 15px;
  }
}
/* sb-mobile-header:end */
/* sb-compact-header:start */
:where(.header--compact) .header-content {
  flex-wrap: wrap;
}

:where(.header--compact) .menu-toggle {
  display: block;
}

:where(.header--compact) .logo img {
  max-height: var(--logo-height-mobile, 50px);
}

:where(.header--compact) .logo img[style*="--logo-ar"] {
  width: calc(2 * var(--logo-pad-x, 0px) + min(var(--logo-w), (var(--logo-height-mobile, 50px) - 2 * var(--logo-pad-y, 0px)) * var(--logo-ar)));
  height: min(calc(var(--logo-h) + 2 * var(--logo-pad-y, 0px)), var(--logo-height-mobile, 50px));
}

:where(.header--compact) .translate-widget {
  position: static;
  transform: none;
  width: auto;
  margin-left: auto;
  margin-right: 0;
}

:where(.header--compact) .nav {
  display: none;
  width: 100%;
  flex: 0 0 100%;
  flex-direction: column;
  padding-top: 15px;
  gap: 5px;
}

:where(.header--compact) .nav.active {
  display: flex;
}

:where(.header--compact) .nav a {
  padding: 12px 15px;
  text-align: center;
}

:where(.header--compact) .nav-dropdown {
  width: 100%;
}

:where(.header--compact) .nav-dropdown-toggle {
  width: 100%;
  text-align: center;
  padding: 12px 15px;
}

:where(.header--compact) .nav-dropdown-menu {
  position: static;
  box-shadow: none;
  background: rgba(255,255,255,0.1);
  border-radius: 0;
  margin-top: 5px;
}

:where(.header--compact) .nav-dropdown-menu a {
  color: rgba(255,255,255,0.9) !important;
  text-align: center;
}

:where(.header--compact) .nav-dropdown-menu a:hover {
  background: rgba(255,255,255,0.2) !important;
  color: var(--color-white) !important;
}

:where(.header--compact) .nav-dropdown-menu a.active {
  background: rgba(255,255,255,0.3) !important;
  color: var(--color-white) !important;
}

:where(.header--compact) .translate-dropdown,
:where(.header--compact) .translate-dropdown .nav-dropdown-toggle {
  width: auto;
}

:where(.header--compact) .translate-dropdown .nav-dropdown-toggle {
  text-align: left;
  padding: 6px 10px;
}

:where(.header--compact) .translate-dropdown .nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  width: auto;
  min-width: 160px;
  background: var(--color-primary);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  margin-top: 0;
}

:where(.header--compact) .translate-dropdown .nav-dropdown-menu a {
  text-align: left;
}

:where(.header--compact) .nav-submenu {
  flex-wrap: wrap;
  justify-content: center;
}

:where(.header--compact) .nav-submenu .nav-dropdown-menu {
  flex-basis: 100%;
  width: 100%;
}

:where(.header--compact) .nav-submenu.open .nav-dropdown-menu.nav-mega {
  display: block;
}

:where(.header--compact) .nav-submenu .nav-dropdown-menu.nav-mega {
  gap: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}

:where(.header--compact) .nav-mega-col {
  width: 100%;
  background: none;
  border-radius: 0;
  padding-bottom: 0;
}

:where(.header--compact) .nav-mega-heading,
:where(.header--compact) .nav-mega-col a:not(.nav-mega-heading) {
  text-align: center;
  padding-left: 15px !important;
}

:where(.header--compact) .nav-dropdown-menu .nav-mega-heading {
  color: rgba(255,255,255,0.9) !important;
  border-bottom: none;
  margin-bottom: 0;
}

:where(.header--compact) .nav-submenu .nav-dropdown-menu.nav-mega {
  border-top: none;
}

:where(.header--compact) span.nav-mega-heading,
:where(.header--compact) .nav-dropdown-menu span.nav-dropdown-label {
  color: rgba(255,255,255,0.9);
  text-align: center;
  padding-left: 15px;
}
/* sb-compact-header:end */

/* Set only for the instant the compact-header script measures the desktop
   layout (partials/header.php): without it, flipping .header--compact back and
   forth inside one function would start the nav's colour/size transitions.
   !important is intentional and confined to this one state class. */
.header--measuring,
.header--measuring *,
.header--measuring *::before,
.header--measuring *::after {
  transition: none !important;
}

@media (max-width: 768px) {
  .hero {
    padding: 50px 20px;
    min-height: 250px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-spot__panel {
    max-width: 100%;
    padding: var(--space-4);
  }

  .page-header {
    padding: 35px 20px;
  }

  .page-header h1 {
    font-size: 1.7rem;
  }

  .main {
    padding: 40px 15px;
  }

  .content h2 {
    font-size: 1.5rem;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .board-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .logo {
    font-size: 1.2rem;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  .card {
    padding: 20px;
  }
}

/* Block Page Layout — grid; per-row layout classes from sbRowLayoutClass() */
.block-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.block-row.row-2   { grid-template-columns: 1fr 1fr; }     /* 2 lika */
.block-row.row-1-2 { grid-template-columns: 1fr 2fr; }     /* 1/3 + 2/3 */
.block-row.row-2-1 { grid-template-columns: 2fr 1fr; }     /* 2/3 + 1/3 */
.block-row.row-3   { grid-template-columns: 1fr 1fr 1fr; } /* 3 lika */
.block-row.row-1-3 { grid-template-columns: 1fr 3fr; }     /* 1/4 + 3/4 */
.block-row.row-3-1 { grid-template-columns: 3fr 1fr; }     /* 3/4 + 1/4 */

.block-column {
  min-width: 0;
}

/* ===== Section rows: row/column styling (v1.73.0) =====
   Class vocabulary emitted by sb*Attrs() in pages-config.php (single owner).
   Pages WITHOUT bands never get main--bands/content-run — their markup and
   these pre-existing rules are untouched (zero-regression guarantee). */
.main--bands { padding: 0; }
.content-run { padding: var(--section-padding, 60px) 20px; }

.row-band {
  position: relative;
  overflow: hidden;
  background: var(--band-bg, transparent);
}
.row-band-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* Spare room above/below the band for the parallax travel. 20% is the no-JS
   / reduced-motion fallback; js/parallax.js sets --parallax-room per layer
   from the real travel it needs (v1.120.3). */
.row-band-bg[data-parallax] { inset: calc(-1 * var(--parallax-room, 20%)) 0; will-change: transform; }
/* A photo band with light text gets a dark scrim (v1.120.0) so white text and
   translucent cards stay readable on any image — same idea as the hero overlay. */
.row-band.row-light > .row-band-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.row-band-inner {
  position: relative;
  z-index: 1;
  /* +40px compensates border-box side padding so inner width == .content */
  max-width: calc(var(--content-width, 1000px) + 40px);
  margin: 0 auto;
  padding: var(--row-pad, var(--space-6)) 20px;
}

.pad-none   { --row-pad: 0; }
.pad-small  { --row-pad: var(--space-4); }
.pad-medium { --row-pad: var(--space-6); }
.pad-large  { --row-pad: var(--space-8); }

.block-row.row-boxed {
  background: var(--row-bg, transparent);
  background-size: cover;
  background-position: center;
  padding: var(--row-pad, var(--space-6));
  border-radius: var(--radius);
}

.row-light {
  --color-text: #f5f7fa;
  --color-text-light: #d4dae0;
  --color-primary: #ffffff;
  --color-accent: #ffffff;
  /* Buttons/badges normally text-on-primary=dark for a white primary — pin
     them back to the row's existing look (white button, dark label) and
     keep hover/accent-text legible against the row's dark background too
     (v1.116.0 — see includes/theme-styles.php for the non-row-light case). */
  --color-button: #ffffff;
  --color-button-hover: #ffffff;
  --color-on-primary: #111827;
  --color-on-accent: #111827;
  --color-on-button: #111827;
  --color-on-button-hover: #111827;
  --color-accent-text: #ffffff;
  color: var(--color-text);
}

.block-column.col-styled {
  background: var(--col-bg, transparent);
  border-radius: var(--radius);
  padding: var(--col-pad, var(--space-4));
}
.block-column.col-border { border: 1px solid var(--color-border, #dde3e8); }
.block-column.col-straight { border-radius: 0; }
.col-pad-none   { --col-pad: 0; }
.col-pad-small  { --col-pad: var(--space-2); }
.col-pad-medium { --col-pad: var(--space-4); }
.col-pad-large  { --col-pad: var(--space-6); }

/* Hero parallax layer (created client-side by js/parallax.js) */
.hero--parallax { position: relative; overflow: hidden; }
.parallax-hero-bg {
  position: absolute;
  inset: calc(-1 * var(--parallax-room, 20%)) 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.hero--parallax > * { position: relative; z-index: 1; }
/* The generated layer must stay absolutely positioned behind the content —
   the rule above would otherwise turn it relative and collapse it to 0 height
   (blank hero whenever parallax was on; fixed v1.118.0). */
.hero--parallax > .parallax-hero-bg { position: absolute; z-index: 0; }

@media (max-width: 768px) {
  .row-band-inner {
    padding-top: calc(var(--row-pad, var(--space-6)) * 0.6);
    padding-bottom: calc(var(--row-pad, var(--space-6)) * 0.6);
  }
}

.block {
  margin-bottom: 30px;
}

.block:last-child {
  margin-bottom: 0;
}

.block-empty {
  text-align: center;
  color: var(--color-text-light);
  padding: 20px;
  background: var(--color-bg);
  border-radius: var(--radius);
}

/* Block Image */
.block-image-figure {
  text-align: center;
}

.block-image-img {
  max-width: 100%;
  border-radius: var(--radius);
  transition: var(--transition);
}

.block-image-caption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--color-text-light);
  font-style: italic;
}

@media (max-width: 768px) {
  .block-row.row-2, .block-row.row-1-2, .block-row.row-2-1,
  .block-row.row-3, .block-row.row-1-3, .block-row.row-3-1 {
    grid-template-columns: 1fr;
  }
}

/* Utility Classes */
.text-center { text-align: center; }
.mt-2 { margin-top: 20px; }
.mt-4 { margin-top: 40px; }
.mb-2 { margin-bottom: 20px; }
.mb-4 { margin-bottom: 40px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Erbjudande / sales-box block ===== */
.block-erbjudande {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 30px 0;
}
.block-erbjudande.erb-cols-1 { grid-template-columns: 1fr; }
.block-erbjudande.erb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.block-erbjudande.erb-cols-4 { grid-template-columns: repeat(4, 1fr); }
.erb-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--erb-radius, var(--card-radius));
  box-shadow: var(--card-shadow);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.erb-card.erb-card-link { cursor: pointer; }
.erb-card-media { position: relative; line-height: 0; }
.erb-card-media img { width: 100%; height: auto; display: block; }
.erb-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
}
.erb-badge-float { position: static; align-self: flex-start; margin: 16px 0 0 16px; }
.erb-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  flex: 1;
}
.erb-card-title { margin: 0; }
.erb-card-text { margin: 0; line-height: 1.55; }
.erb-card-btn {
  align-self: flex-start;
  margin-top: auto;
  display: inline-block;
  background: var(--color-button);
  color: var(--color-on-button);
  text-decoration: none;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 999px;
  transition: background 0.2s;
}
.erb-card-btn:hover { background: var(--color-button-hover); color: var(--color-on-button-hover); }
.erb-card-btn-static { cursor: default; opacity: 0.85; }

/* Icon instead of image (v1.114.0) — icon() from includes/icons.php, shown
   only when a card has no image (image always wins). */
.erb-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) 0;
  color: var(--color-primary);
}
.erb-card-icon { display: inline-flex; line-height: 0; }
.erb-style-fullbleed .erb-card-head { padding: 0 0 var(--space-3); color: #fff; }
.erb-face-front .erb-card-head { padding: var(--space-4); margin-bottom: auto; }

/* Content alignment (v1.118.0) — block-level, applied to the whole grid */
.erb-align-center .erb-card-head { align-items: center; }
.erb-align-center .erb-card-body { text-align: center; align-items: center; }
.erb-align-center .erb-card-arrow { align-self: center; }
.erb-align-center .erb-card-btn { align-self: center; }
.erb-align-center .erb-badge-float { align-self: center; margin-left: 0; }
.erb-align-center .erb-front-label { text-align: center; }

.erb-align-right .erb-card-head { align-items: flex-end; }
.erb-align-right .erb-card-body { text-align: right; align-items: flex-end; }
.erb-align-right .erb-card-arrow { align-self: flex-end; }
.erb-align-right .erb-card-btn { align-self: flex-end; }
.erb-align-right .erb-badge-float { align-self: flex-end; margin-left: 0; margin-right: 16px; }
.erb-align-right .erb-front-label { text-align: right; }

/* Arrow affordance on linked cards without their own button (v1.114.0) */
.erb-card-arrow {
  margin-top: auto;
  display: inline-flex;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}
.erb-card-link:hover .erb-card-arrow,
.erb-card-link:focus-visible .erb-card-arrow {
  transform: translateX(4px);
}
.erb-card-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Numbered cards (v1.114.0) — step badges for process rows */
.erb-number {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  /* Brand accent even inside dark (.row-light) bands, where --color-accent
     is repointed to white for text (v1.120.2). */
  background: var(--color-accent-brand, var(--color-accent));
  color: var(--color-on-accent-brand, var(--color-on-accent));
  font-weight: 700;
  box-shadow: var(--shadow-2);
}
/* Keep the icon clear of the corner tab */
.erb-card-numbered .erb-card-head { padding-top: calc(2rem + var(--space-6)); }

/* Kortstil: Helbild (fullbleed) — image fills the card, content over a scrim */
.erb-style-fullbleed {
  min-height: 320px;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.erb-style-fullbleed .erb-card-body {
  /* Keep the text area dark across its full height (fading only at the very
     top edge) so white text stays readable over any image — even light ones. */
  background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.80) 72%, rgba(0,0,0,0) 100%);
  padding: 64px 22px 22px;
}
.erb-style-fullbleed .erb-card-title,
.erb-style-fullbleed .erb-card-text { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.erb-style-fullbleed .erb-badge { z-index: 1; }

/* Cards inside a light-text (dark) band (v1.118.0): the band flips text to
   white, so framed cards go dark + translucent instead of staying light. */
.row-light .erb-style-framed,
.row-light .erb-face-back {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}
.row-light .erb-style-framed .erb-card-text { color: var(--color-text-light); }

/* "Ram runt korten" off */
.erb-noborder .erb-card { border-color: transparent; }

/* Hover: Lyft */
.erb-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.erb-hover-lift .erb-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-4);
}

/* Hover: Roterande kort (flip) */
.erb-hover-flip .erb-card {
  display: block;
  position: relative;
  min-height: 360px;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
  perspective: 1200px;
}
.erb-flip-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}
.erb-hover-flip .erb-card:hover .erb-flip-inner,
.erb-hover-flip .erb-card:focus-visible .erb-flip-inner {
  transform: rotateY(180deg);
}
.erb-face {
  position: absolute;
  inset: 0;
  display: flex;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--erb-radius, var(--card-radius));
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.erb-noborder .erb-face { border-color: transparent; }
.erb-face-front {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  background-color: var(--color-light);
  background-size: cover;
  background-position: center;
}
.erb-front-label {
  width: 100%;
  padding: 52px 20px 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
}
.erb-face-front .erb-card-title { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.erb-hover-flip .erb-badge { z-index: 2; }
.erb-face-back {
  transform: rotateY(180deg);
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.erb-face-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 24, 0.78);
}
.erb-back-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.erb-face-back .erb-card-title,
.erb-face-back .erb-card-text { color: #fff; }
.erb-face-back .erb-card-btn { margin-top: 4px; }

@media (max-width: 768px) {
  .block-erbjudande { grid-template-columns: 1fr !important; }
}
/* No hover (touch): don't rotate — stack front then back so nothing is hidden */
@media (hover: none) {
  .erb-hover-flip .erb-card { min-height: 0; perspective: none; }
  .erb-hover-flip .erb-flip-inner { position: static; transform: none; }
  .erb-hover-flip .erb-face {
    position: static;
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
  .erb-hover-flip .erb-face-front { min-height: 220px; }
}

/* ===== Video block (YouTube, consent-gated) ===== */
.block-video { margin: 30px 0; }
.block-video .video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--card-radius);
  overflow: hidden;
}
.block-video .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.block-video .video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: #000;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.block-video .video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
  transition: background 0.2s;
}
.block-video .video-facade:hover::after,
.block-video .video-facade:focus-visible::after { background: rgba(0,0,0,0.35); }
.block-video .video-play {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 48px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.block-video .video-play svg { display: block; width: 100%; height: 100%; }
.block-video .video-play-bg { fill: #212121; opacity: 0.8; transition: fill 0.2s, opacity 0.2s; }
.block-video .video-facade:hover .video-play-bg { fill: #cc0000; opacity: 1; }
.block-video .video-caption {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--color-text-light, #666);
  text-align: center;
}

/* Member login chip ("Inloggad som ...") — built client-side by
   includes/member-chip.php when a member session exists (cache-safe).
   Fixed bottom-LEFT (the admin edit button owns bottom-right); the menu
   opens upward above the pill. z-index 1500 sits below the card lightbox
   (2000) and below the cookie consent banner (10000). */
.member-chip {
  position: fixed;
  bottom: var(--space-4);
  left: var(--space-4);
  z-index: 1500;
}
.member-chip-toggle {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.member-chip-toggle:hover {
  border-color: var(--color-primary);
}
.member-chip-menu {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 0;
  min-width: 14rem;
  padding: var(--space-1);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}
.member-chip-menu[hidden] {
  display: none;
}
.member-chip-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.member-chip-item:hover {
  background: var(--color-bg);
}
.member-chip-toggle:focus-visible,
.member-chip-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* === Version preview strip (v1.128.0) START === */
/* Shown only to a logged-in admin previewing a saved version (never cached). */
.sb-version-preview {
  position: sticky;
  top: 0;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--gray-900);
  color: var(--color-white);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-2);
}
.sb-version-preview-text { flex: 1 1 auto; }
.sb-version-preview-back {
  color: var(--color-white);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
  white-space: nowrap;
}
.sb-version-preview-back:hover { background: var(--color-white); color: var(--gray-900); }
.sb-version-preview-back:focus-visible { outline: 3px solid var(--color-white); outline-offset: 2px; }
/* === Version preview strip (v1.128.0) END === */