/* ==========================================================================
   HB Städ Ale — designlager
   Rent presentationslager ovanpå Twenty Twenty-Four. Lägger bara till.
   Ingen text, rubrik, länk eller schema-data ändras eller döljs.
   ========================================================================== */

:root {
  /* Färg — byggd runt den gröna ton som redan finns i recensionsmodulen */
  --hb-ink:        #14231a;
  --hb-body:       #414f46;
  --hb-muted:      #6e7b72;
  --hb-brand:      #2f6b3a;
  --hb-brand-600:  #275b31;
  --hb-brand-700:  #1f4a28;
  --hb-brand-soft: #eaf2ea;
  --hb-gold:       #e2a93b;
  --hb-surface:    #ffffff;
  --hb-surface-2:  #f6f9f4;
  --hb-surface-3:  #fafaf7;
  --hb-line:       #e3eadf;
  --hb-line-soft:  #eef3ec;

  /* Form */
  --hb-r-sm: 10px;
  --hb-r:    14px;
  --hb-r-lg: 22px;
  --hb-r-pill: 999px;

  /* Djup */
  --hb-sh-sm: 0 1px 2px rgba(20,35,26,.05), 0 1px 3px rgba(20,35,26,.05);
  --hb-sh:    0 2px 6px rgba(20,35,26,.05), 0 10px 26px rgba(20,35,26,.07);
  --hb-sh-lg: 0 4px 12px rgba(20,35,26,.06), 0 22px 54px rgba(20,35,26,.13);

  /* Rörelse */
  --hb-ease:     cubic-bezier(.23, 1, .32, 1);
  --hb-ease-mid: cubic-bezier(.77, 0, .175, 1);

  --hb-bar-h: 0px;
}

/* ==========================================================================
   1. Typografi
   ========================================================================== */

body {
  color: var(--hb-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Brödtext i serif blir tungt i långa stycken — rubriker behåller Cardo. */
/* Temats presetklass sätter font-family med !important, därav samma här.
   Cardo till rubriker, Inter till text — konsekvent på hela sajten. */
p, li, dd, dt, figcaption, label, .wpforms-field-label,
/* Temats presetklasser sätter font-family med !important — matcha på
   klassattributet för att komma över dem i specificitet. */
p[class], li[class], figcaption[class], label[class] {
  font-family: "Inter", system-ui, sans-serif !important;
}
h1 p, h2 p, h3 p, h4 p,
.wp-block-heading *,
.hb-topbar__brand,
blockquote.is-style-large p {
  font-family: inherit !important;
}

.entry-content p,
.wp-block-post-content p,
.wp-block-column > p {
  line-height: 1.72;
  color: var(--hb-body);
}

h1, h2, h3, h4,
.wp-block-heading,
.wp-block-post-title {
  color: var(--hb-ink);
  font-optical-sizing: auto;
  text-wrap: balance;
}

/* Spårning skalar med storleken: stort blir tätare, smått luftigare. */
h1, .wp-block-post-title, .has-xxx-large-font-size {
  letter-spacing: -.022em;
  line-height: 1.06;
}
h2, .has-xx-large-font-size, .has-x-large-font-size {
  letter-spacing: -.016em;
  line-height: 1.14;
}
h3, .has-large-font-size {
  letter-spacing: -.008em;
  line-height: 1.25;
}
h4, h5, h6 { letter-spacing: 0; line-height: 1.35; }

/* Text i cover-block ligger ovanpå foto och ärvde vitt från blocket innan
   det här lagret fanns. Rubrik- och styckefärgerna nedan tog över den och
   gjorde texten nästan osynlig på tjänsternas översiktssidor.
   Inget !important här — explicita has-*-color-klasser (som WordPress sätter
   med !important) ska fortfarande vinna. */
.wp-block-cover:has(.wp-block-cover__background) :where(h1, h2, h3, h4, h5, h6, p, blockquote, figcaption, .wp-block-heading, li:not(.wp-block-navigation-item)),
.wp-block-cover:has(.wp-block-cover__image-background) :where(h1, h2, h3, h4, h5, h6, p, blockquote, figcaption, .wp-block-heading, li:not(.wp-block-navigation-item)),
.wp-block-cover.hb-cover-dark :where(h1, h2, h3, h4, h5, h6, p, blockquote, figcaption, .wp-block-heading, li:not(.wp-block-navigation-item)),
.entry-content .wp-block-cover.hb-cover-dark :where(h1, h2, h3, h4, h5, h6, p, blockquote, figcaption, .wp-block-heading, li:not(.wp-block-navigation-item)) {
  color: #fff;
}
/* Jämn läsbarhet oavsett hur ljust fotot är just där texten hamnar. */
.wp-block-cover:not(.header-cover) > .wp-block-cover__background.has-background-dim {
  background: linear-gradient(180deg, rgba(8, 16, 11, .44) 0%, rgba(8, 16, 11, .58) 100%) !important;
  opacity: 1 !important;
}
.wp-block-cover:not(.header-cover):has(.wp-block-cover__background) :where(h1, h2, h3, h4, p, li:not(.wp-block-navigation-item)),
.wp-block-cover:not(.header-cover).hb-cover-dark :where(h1, h2, h3, h4, p, li:not(.wp-block-navigation-item)) {
  text-shadow: 0 1px 18px rgba(0, 0, 0, .4);
}

/* Länkar i samma sammanhang — grönt mot mörkt foto håller inte kontrasten.
   Gäller bara innehållslänkar. Navigationen undantas: dess länkar ärver
   färg från sin egen <ul>, och undermenyn ligger på en ljus panel — vitt
   där ger vit text på vit bakgrund. */
.wp-block-cover:has(.wp-block-cover__background) :where(a:not(.wp-element-button):not(.hb-btn):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor):not(.custom-logo-link)),
.wp-block-cover.hb-cover-dark :where(a:not(.wp-element-button):not(.hb-btn):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor):not(.custom-logo-link)),
.entry-content .wp-block-cover.hb-cover-dark :where(a:not(.wp-element-button):not(.hb-btn):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor):not(.custom-logo-link)) {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .6);
}

/* Undermenyn ska alltid vara läsbar mot sin ljusa panel, oavsett var
   navigationen råkar ligga. */
.wp-block-cover .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-cover .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  color: var(--hb-ink);
}

/* Underrubriker som satts i knallblått direkt i editorn. Blått mot beige och
   mot fotot är oläsbart — samma roll, men i varumärkets gröna ton.
   Klassen sätts av JS efter att den inline-satta färgen tagits bort. */
.hb-eyebrow {
  color: var(--hb-brand);
  font-weight: 600;
  letter-spacing: .002em;
}
.wp-block-cover .hb-eyebrow,
.header-cover .hb-eyebrow {
  color: #fff;
}

/* Platta gråa sektionsband blir varma, ljusa ytor */
.wp-block-group[style*="background-color:#d9d9d9"],
.wp-block-group[style*="background-color:#D9D9D9"],
.wp-block-group[style*="background-color:#d1d1d1"],
.wp-block-group[style*="background-color:#D1D1D1"] {
  background-color: var(--hb-surface-2) !important;
}

/* Länkar i löpande text */
.entry-content a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.hb-btn):not(.wp-block-social-link-anchor)) {
  color: var(--hb-brand);
  text-decoration-color: color-mix(in srgb, var(--hb-brand) 35%, transparent);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color 160ms var(--hb-ease), text-decoration-color 160ms var(--hb-ease);
}
.entry-content a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.hb-btn)):hover {
  color: var(--hb-brand-700);
  text-decoration-color: currentColor;
}

/* Synlig tangentbordsfokus överallt */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
  outline: 2px solid var(--hb-brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==========================================================================
   2. Knappar
   ========================================================================== */

/* Temats knappregler ligger högre i specificitet än en enkel klass, därav
   den bredare selektorlistan och de riktade !important. */
.wp-block-button > .wp-block-button__link,
.wp-block-button__link.wp-element-button,
a.wp-element-button,
button.wp-element-button,
.hb-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .55em;
  /* Utan detta räknas padding ovanpå width:100% och knappen blir bredare
     än sin egen behållare (377 px i en 336 px-container på mobil). */
  box-sizing: border-box;
  min-height: 48px;
  padding: .85em 1.6em !important;
  border-radius: var(--hb-r-pill) !important;
  background-color: var(--hb-brand) !important;
  color: #fff !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  box-shadow: var(--hb-sh-sm);
  transition:
    transform 160ms var(--hb-ease),
    background-color 180ms var(--hb-ease),
    box-shadow 220ms var(--hb-ease),
    border-color 180ms var(--hb-ease),
    color 180ms var(--hb-ease);
}

@media (hover: hover) and (pointer: fine) {
  .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
  .hb-btn--primary:hover {
    background-color: var(--hb-brand-600) !important;
    box-shadow: var(--hb-sh);
    transform: translateY(-1px);
    color: #fff !important;
  }
}

/* Direkt återkoppling på tryck — inte på släpp. */
.wp-block-button > .wp-block-button__link:active,
.wp-element-button:active,
.hb-btn:active {
  transform: scale(.97);
  box-shadow: var(--hb-sh-sm);
  transition-duration: 90ms;
}

/* Outline-varianten */
.wp-block-button.is-style-outline > .wp-block-button__link,
.hb-btn--ghost {
  background-color: transparent !important;
  color: var(--hb-brand) !important;
  border-color: color-mix(in srgb, var(--hb-brand) 34%, transparent) !important;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .wp-block-button.is-style-outline > .wp-block-button__link:hover,
  .hb-btn--ghost:hover {
    background-color: var(--hb-brand-soft) !important;
    border-color: var(--hb-brand) !important;
    color: var(--hb-brand-700) !important;
    transform: translateY(-1px);
  }
}

/* Outline-knappar som ligger på foto (headern) ska vara ljusa */
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link,
.header-cover .wp-block-button.is-style-outline > .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255,255,255,.55) !important;
  background-color: rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
@media (hover: hover) and (pointer: fine) {
  .wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover,
  .header-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover {
    background-color: rgba(255,255,255,.94) !important;
    color: var(--hb-ink) !important;
    border-color: transparent !important;
  }
}

.wp-block-buttons { gap: .7rem; }
.wp-block-button.has-custom-width .wp-block-button__link { width: 100%; }

/* ==========================================================================
   3. Sidhuvud
   ========================================================================== */

/* Klibbig, genomskinlig topp på undersidor — innehållet rullar under. */
body:not(.home) > .wp-site-blocks > header.wp-block-template-part,
body:not(.home) .wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--hb-ease), box-shadow 240ms var(--hb-ease), background-color 240ms var(--hb-ease);
}
/* Kant/skugga först när något faktiskt rullar under. */
body.hb-scrolled:not(.home) .wp-site-blocks > header.wp-block-template-part {
  border-bottom-color: var(--hb-line);
  box-shadow: 0 6px 24px rgba(20,35,26,.06);
  background: rgba(255,255,255,.9);
}

/* VIKTIGT: backdrop-filter gör sidhuvudet till ett containing block, vilket
   klipper mobilmenyns position:fixed-överlägg till sidhuvudets höjd. Släpp
   både filtret och sticky så länge menyn är öppen. */
header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open),
html.has-modal-open header.wp-block-template-part,
body.has-modal-open header.wp-block-template-part {
  position: static !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}
/* Hero-omslaget behöver behålla sin position, bara filtren måste bort. */
.wp-block-cover:has(.wp-block-navigation__responsive-container.is-menu-open) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* Kompakt sidhuvud — en klibbig rad på 190 px äter för mycket av skärmen.
   Inget döljs, allt krymper mjukt när sidan rullas. */
body:not(.home) .wp-site-blocks > header.wp-block-template-part > .wp-block-group {
  padding-block: 1rem !important;
  transition: padding 280ms var(--hb-ease);
}
body.hb-scrolled:not(.home) .wp-site-blocks > header.wp-block-template-part > .wp-block-group {
  padding-block: .5rem !important;
}
header.wp-block-template-part .wp-block-site-logo img,
header.wp-block-template-part .custom-logo {
  max-height: 62px;
  width: auto;
  transition: max-height 280ms var(--hb-ease);
}
body.hb-scrolled header.wp-block-template-part .wp-block-site-logo img,
body.hb-scrolled header.wp-block-template-part .custom-logo { max-height: 48px; }

/* Hero-bilden på undersidor låg tätt inpå det klibbiga sidhuvudet (0 px
   mellanrum), vilket fick sidan att kännas hopklämd. Luft emellan. */
@media (min-width: 900px) {
  body:not(.home) .wp-site-blocks > main {
    padding-top: clamp(1.5rem, 2.6vw, 2.75rem);
  }
}

.wp-block-site-title a { text-decoration: none; letter-spacing: -.02em; }
.wp-block-site-tagline { color: var(--hb-muted); letter-spacing: 0; }

/* Knapparna i sidhuvudet är kompaktare, så nav + telefon + mejl + offert
   ryms på en och samma rad i stället för att brytas ned till en tredje. */
header .wp-block-navigation__responsive-container-content,
.header-cover .wp-block-navigation__responsive-container-content {
  gap: .5rem !important;
  justify-content: flex-end;
  align-items: center;
}
/* Den öppna mobilmenyn har egen vit yta. Utan detta läcker hero-stilarna
   in och gör knapparna vita mot vitt. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  align-items: center !important;
  justify-content: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button.is-style-outline > .wp-block-button__link {
  color: var(--hb-brand) !important;
  border-color: color-mix(in srgb, var(--hb-brand) 34%, transparent) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link {
  min-height: 48px;
  padding: .8em 1.5em !important;
  font-size: 1rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .hb-nav-cta .wp-block-button__link {
  background-color: var(--hb-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
}
header .wp-block-navigation__responsive-container-content .wp-block-button__link,
.header-cover .wp-block-navigation__responsive-container-content .wp-block-button__link {
  min-height: 42px;
  padding: .6em 1.15em !important;
  font-size: .92rem !important;
}

/* Offertknapp i sidhuvudet (läggs till av JS) */
.hb-nav-cta .wp-block-button__link {
  background-color: var(--hb-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 6px 18px rgba(20,50,28,.22);
}
@media (hover: hover) and (pointer: fine) {
  .hb-nav-cta .wp-block-button__link:hover {
    background-color: var(--hb-brand-600) !important;
    color: #fff !important;
    transform: translateY(-1px);
  }
}

/* Navigation */
.wp-block-navigation .wp-block-navigation-item__content {
  text-decoration: none;
  padding: .45em .1em;
  position: relative;
  transition: color 160ms var(--hb-ease);
}
.wp-block-navigation:not(.header-cover *) .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .15em;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .6;
  transition: transform 220ms var(--hb-ease);
}
@media (hover: hover) and (pointer: fine) {
  .wp-block-navigation .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
}

/* Undermeny som en riktig yta, med ursprung i sin trigger */
.wp-block-navigation__submenu-container {
  border-radius: var(--hb-r) !important;
  border: 1px solid var(--hb-line) !important;
  box-shadow: var(--hb-sh-lg) !important;
  padding: .4rem !important;
  overflow: hidden;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  border-radius: var(--hb-r-sm);
  padding: .6em .9em !important;
  transition: background-color 140ms var(--hb-ease);
}
@media (hover: hover) and (pointer: fine) {
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: var(--hb-brand-soft);
  }
}

/* Mobilmenyn */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: clamp(1.5rem, 6vw, 3rem) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.15rem;
}

/* ==========================================================================
   4. Hero (cover)
   ========================================================================== */

.wp-block-cover.header-cover { position: relative; isolation: isolate; }

/* Läsbar text utan att dölja bilden: mjuk gradient i stället för platt dimma. */
.wp-block-cover.header-cover > .wp-block-cover__background {
  background: linear-gradient(
    to bottom,
    rgba(10,20,14,.62) 0%,
    rgba(10,20,14,.38) 34%,
    rgba(10,20,14,.52) 68%,
    rgba(10,20,14,.72) 100%
  ) !important;
  opacity: 1 !important;
}

.header-cover h1,
.header-cover .wp-block-heading {
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
  max-width: 18ch;
  margin-inline: auto;
}

/* Den knallblå underrubriken syns inte mot fotot. */
.header-cover mark.has-inline-color,
.wp-block-cover mark.has-inline-color {
  color: #fff !important;
  background: transparent !important;
  font-weight: 600;
  letter-spacing: .002em;
}
.header-cover p { color: rgba(255,255,255,.94); }
.header-cover p:not(.wp-block-site-tagline) {
  max-width: 56ch;
  margin-inline: auto;
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.header-cover .wp-block-site-title a,
.header-cover .wp-block-site-tagline { color: #fff; }
.header-cover .wp-block-site-tagline { opacity: .82; }

/* Logotypen är mörk och försvinner mot fotot — vänd den till vitt här. */
.header-cover .custom-logo,
.header-cover .wp-block-site-logo img {
  filter: brightness(0) invert(1) !important;
}

/* Hero-typografi: en tydlig trappa i stället för fyra lika tunga block.
   Ingen text tas bort — bara vikt, storlek och kontrast skiljs åt. */
.header-cover h1 { font-size: clamp(2.6rem, 6vw, 4.25rem) !important; }

.hb-hero-copy p:not(.wp-block-site-tagline):nth-of-type(1) {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem) !important;
  font-weight: 600;
  margin-top: .9rem;
}
.hb-hero-copy p:not(.wp-block-site-tagline):nth-of-type(2) {
  font-size: clamp(1rem, 1.5vw, 1.1rem) !important;
  font-weight: 600;
}
.hb-hero-copy p:not(.wp-block-site-tagline):nth-of-type(3) {
  font-size: 1rem !important;
  max-width: 62ch;
  opacity: .88;
}
.hb-hero-copy p:not(.wp-block-site-tagline):nth-of-type(3) strong {
  font-weight: 400;
}

/* Hero på undersidor: luftigare rubrikblock */
body:not(.home) .entry-content > .wp-block-group:first-child h1 {
  margin-bottom: .35em;
}

/* ==========================================================================
   5. Sektionsrytm och ytor
   ========================================================================== */

.wp-site-blocks > .wp-block-group.alignfull,
.entry-content > .wp-block-group.alignfull {
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
}

.is-style-section-2,
.has-base-2-background-color.has-background { background-color: var(--hb-surface-2) !important; }

/* Sektionsrubriker får luft under sig */
.wp-block-group > h2.wp-block-heading,
.wp-block-column > h2.wp-block-heading { margin-bottom: .6em; }

/* Asterisken ritas som en maskad grå ruta — färga den i varumärkets grön */
h2.is-style-asterisk::before,
h3.is-style-asterisk::before {
  background-color: var(--hb-brand) !important;
  color: var(--hb-brand) !important;
  opacity: .8;
}
.hb-card > h3.is-style-asterisk::before {
  height: 20px !important;
  width: 20px !important;
  opacity: .55;
  margin-bottom: .35rem;
}

.wp-block-columns { gap: clamp(1.5rem, 3vw, 2.75rem); }

/* Avdelare */
.wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--hb-line);
  opacity: 1;
  max-width: 100%;
}

/* ==========================================================================
   6. Tjänstekort (byggs av JS: .hb-card på kolumnen)
   ========================================================================== */

.hb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  background: var(--hb-surface);
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r-lg);
  padding: 1.6rem 1.5rem 1.7rem;
  box-shadow: var(--hb-sh-sm);
  transition:
    transform 260ms var(--hb-ease),
    box-shadow 260ms var(--hb-ease),
    border-color 260ms var(--hb-ease);
}
.hb-card > h3 { margin-top: 0; }
.hb-card > h3 a {
  color: var(--hb-ink);
  text-decoration: none;
}
.hb-card > *:last-child { margin-bottom: 0; }

/* Hela kortet klickbart, men länken är fortfarande en riktig länk. */
.hb-card > h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Läs mer-affordans */
.hb-card::after {
  content: "Läs mer →";
  display: block;
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 600;
  color: var(--hb-brand);
  transition: transform 260ms var(--hb-ease), color 200ms var(--hb-ease);
}

@media (hover: hover) and (pointer: fine) {
  .hb-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hb-sh-lg);
    border-color: color-mix(in srgb, var(--hb-brand) 26%, var(--hb-line));
  }
  .hb-card:hover::after { transform: translateX(4px); color: var(--hb-brand-700); }
  .hb-card:hover > h3 a { color: var(--hb-brand-700); }
}
.hb-card:active { transform: scale(.995); transition-duration: 90ms; }

/* Tjänsterna ligger i två separata kolumnblock (3 + 2). Lyft ut dem i ett
   gemensamt rutnät så alla kort blir lika breda. */
.hb-service-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem) !important;
  align-items: stretch;
}
.hb-service-grid > .wp-block-columns,
.hb-service-grid > .wp-block-group,
.hb-service-grid > .wp-block-group > .wp-block-columns {
  display: contents !important;
}
.hb-service-grid > * > .hb-card,
.hb-service-grid > * > * > .hb-card { margin: 0 !important; }

@media (max-width: 900px) {
  .hb-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hb-service-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. Checklistor
   ========================================================================== */

.wp-block-list.is-style-checkmark-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: .65rem;
}
.wp-block-list.is-style-checkmark-list li {
  position: relative;
  padding-left: 2.35rem;
  line-height: 1.55;
  color: var(--hb-ink);
  font-weight: 500;
}
.wp-block-list.is-style-checkmark-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .05em;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--hb-r-pill);
  background: var(--hb-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .95rem no-repeat;
}

/* ==========================================================================
   8. Bilder
   ========================================================================== */

.wp-block-image img { border-radius: var(--hb-r); }
.wp-block-image.is-style-rounded img { border-radius: var(--hb-r-lg); }
.wp-block-column > .wp-block-image img,
.wp-block-column > .wp-block-group > .wp-block-image img {
  box-shadow: var(--hb-sh);
}
.wp-block-image figcaption { color: var(--hb-muted); font-size: .88rem; }

/* ==========================================================================
   9. FAQ
   ========================================================================== */

/* Bandet var en grådaskig grön-grå gradient. Gör det till en riktig
   varumärkesyta så den vita rubriken faktiskt syns. */
.hb-faq {
  background: linear-gradient(180deg, #1e4a28 0%, #2f6b3a 40%, #f9f9f9 100%) !important;
}
.hb-faq > h2.wp-block-heading {
  text-align: center;
  font-size: clamp(2.25rem, 5vw, 3.25rem) !important;
  letter-spacing: -.025em;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* Frågorna samlas på en egen ljus yta ovanpå gradienten */
.hb-faq > .wp-block-group {
  background: var(--hb-surface);
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r-lg);
  padding: clamp(1.25rem, 3.5vw, 2.75rem) !important;
  box-shadow: var(--hb-sh-lg);
  max-width: 60rem;
  margin-inline: auto;
}
.hb-faq h3.wp-block-heading {
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  font-weight: 700;
  color: var(--hb-ink) !important;
  letter-spacing: -.012em;
  margin: 0 0 .55rem !important;
}
.hb-faq p {
  color: var(--hb-body) !important;
  max-width: 72ch;
  margin-bottom: 0 !important;
}
.hb-faq .wp-block-separator {
  background: var(--hb-line-soft) !important;
  border: 0 !important;
  margin-block: 1.6rem !important;
  max-width: 100% !important;
}
.hb-faq .wp-block-separator:first-child { display: none; }

/* ==========================================================================
   10. Dragspel (Essential Blocks)
   ========================================================================== */

.eb-accordion-container .eb-accordion-wrapper {
  border-radius: var(--hb-r) !important;
  overflow: hidden;
  border: 1px solid var(--hb-line) !important;
  margin-bottom: .6rem !important;
  background: var(--hb-surface);
  transition: border-color 200ms var(--hb-ease), box-shadow 200ms var(--hb-ease);
}
.eb-accordion-container .eb-accordion-title-wrapper {
  padding: 1rem 1.15rem !important;
  transition: background-color 160ms var(--hb-ease);
}
.eb-accordion-container .eb-accordion-title {
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.02rem !important;
  color: var(--hb-ink) !important;
  letter-spacing: -.008em;
}
@media (hover: hover) and (pointer: fine) {
  .eb-accordion-container .eb-accordion-title-wrapper:hover { background: var(--hb-surface-2); }
  .eb-accordion-container .eb-accordion-wrapper:hover { border-color: color-mix(in srgb, var(--hb-brand) 24%, var(--hb-line)) !important; }
}
.eb-accordion-container .eb-accordion-icon-wrapper {
  color: var(--hb-brand) !important;
  transition: transform 240ms var(--hb-ease);
}
.eb-accordion-container .eb-accordion-content ul li { line-height: 1.6; }

/* Funktionslistan på bokningssidan */
.eb-feature-list-title {
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--hb-ink) !important;
  letter-spacing: -.01em;
}
.eb-feature-list-icon-inner { box-shadow: var(--hb-sh-sm); }

/* ==========================================================================
   11. Formulär (WPForms)
   ========================================================================== */

.wpforms-container {
  background: var(--hb-surface);
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r-lg);
  padding: clamp(1.25rem, 3.5vw, 2.25rem) !important;
  box-shadow: var(--hb-sh);
  max-width: 720px;
}
.wpforms-container .wpforms-field { padding: .55rem 0 !important; }

.wpforms-container .wpforms-field-label {
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: .94rem !important;
  color: var(--hb-ink) !important;
  margin-bottom: .45rem !important;
}
.wpforms-container .wpforms-field-description {
  color: var(--hb-muted) !important;
  font-size: .84rem !important;
}
.wpforms-container .wpforms-required-label { color: var(--hb-brand) !important; }

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 50px;
  padding: .8rem 1rem !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 1rem !important;
  color: var(--hb-ink) !important;
  background: var(--hb-surface-3) !important;
  border: 1px solid var(--hb-line) !important;
  border-radius: var(--hb-r-sm) !important;
  box-shadow: none !important;
  transition: border-color 160ms var(--hb-ease), background-color 160ms var(--hb-ease), box-shadow 160ms var(--hb-ease);
}
.wpforms-container textarea { min-height: 130px; line-height: 1.6; }
.wpforms-container select {
  height: auto !important;
  line-height: 1.4 !important;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7b72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1.05rem !important;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  outline: none !important;
  background: var(--hb-surface) !important;
  border-color: var(--hb-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hb-brand) 18%, transparent) !important;
}

/* Radio/checkbox som valbara kort — större träffyta, tydligare val */
div.wpforms-container-full .wpforms-form .wpforms-field-radio ul,
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-checkbox ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .55rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Inputen ligger som syskon till etiketten i WPForms — pillret måste
   därför sitta på <li>, annars hamnar radioknappen utanför.
   WPForms egna regler använder prefixet div.wpforms-container-full
   tillsammans med !important, så samma prefix behövs här. */
div.wpforms-container-full .wpforms-form .wpforms-field-radio li,
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li,
.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-checkbox li {
  display: inline-flex !important;
  align-items: center !important;
  gap: .55rem;
  min-height: 46px;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: .55rem 1.1rem !important;
  border: 1px solid var(--hb-line) !important;
  border-radius: var(--hb-r-pill) !important;
  background: var(--hb-surface-3) !important;
  cursor: pointer;
  transition: border-color 150ms var(--hb-ease), background-color 150ms var(--hb-ease), transform 150ms var(--hb-ease);
}
.wpforms-container .wpforms-field-radio li:active,
.wpforms-container .wpforms-field-checkbox li:active { transform: scale(.975); }
@media (hover: hover) and (pointer: fine) {
  div.wpforms-container-full .wpforms-form .wpforms-field-radio li:hover,
  div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li:hover {
    border-color: var(--hb-brand) !important;
    background: var(--hb-brand-soft) !important;
  }
}
div.wpforms-container-full .wpforms-form .wpforms-field-radio li label,
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li label,
.wpforms-container .wpforms-field-radio li label,
.wpforms-container .wpforms-field-checkbox li label {
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: none;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  line-height: 1.3;
  color: var(--hb-ink) !important;
  cursor: pointer;
}
.wpforms-container .wpforms-field-radio li input[type="radio"],
.wpforms-container .wpforms-field-checkbox li input[type="checkbox"] {
  accent-color: var(--hb-brand);
  width: 1.05rem;
  height: 1.05rem;
  margin: 0 !important;
}
div.wpforms-container-full .wpforms-form li.hb-checked,
.wpforms-container li.hb-checked {
  border-color: var(--hb-brand) !important;
  background: var(--hb-brand-soft) !important;
  box-shadow: inset 0 0 0 1px var(--hb-brand);
}

.wpforms-container .wpforms-submit-container { padding-top: 1rem !important; }
.wpforms-container button[type="submit"] {
  width: 100%;
  min-height: 54px;
  padding: .95em 1.8em !important;
  border: 0 !important;
  border-radius: var(--hb-r-pill) !important;
  background: var(--hb-brand) !important;
  color: #fff !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  box-shadow: var(--hb-sh);
  cursor: pointer;
  transition: background-color 180ms var(--hb-ease), transform 160ms var(--hb-ease), box-shadow 220ms var(--hb-ease);
}
@media (hover: hover) and (pointer: fine) {
  .wpforms-container button[type="submit"]:hover { background: var(--hb-brand-600) !important; transform: translateY(-1px); box-shadow: var(--hb-sh-lg); }
}
.wpforms-container button[type="submit"]:active { transform: scale(.98); transition-duration: 90ms; }

.wpforms-container label.wpforms-error { color: #b4392c !important; font-size: .85rem !important; }
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error { border-color: #b4392c !important; }

/* -- Bevis och invändningar vid formuläret -------------------------------- */

.hb-form-proof {
  max-width: 720px;
  margin: 0 0 1.1rem;
  padding: 1.1rem 1.35rem;
  background: var(--hb-brand-soft);
  border: 1px solid color-mix(in srgb, var(--hb-brand) 22%, var(--hb-line));
  border-radius: var(--hb-r-lg);
}
.hb-form-proof__rating {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  color: var(--hb-ink);
  margin-bottom: .7rem;
}
.hb-form-proof__rating .hb-stars { color: var(--hb-gold); letter-spacing: .04em; }
.hb-form-proof__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.hb-form-proof__list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--hb-ink);
}
.hb-form-proof__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--hb-r-pill);
  background: var(--hb-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .7rem no-repeat;
}

.hb-optional-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.35rem 0 .35rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hb-muted);
}
.hb-optional-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hb-line);
}

.hb-form-faq {
  max-width: 720px;
  margin: 1.5rem 0 0;
}
.hb-form-faq__title {
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--hb-ink) !important;
  margin: 0 0 .7rem !important;
}
.hb-form-faq details {
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r);
  background: var(--hb-surface);
  margin-bottom: .5rem;
  overflow: hidden;
}
.hb-form-faq summary {
  cursor: pointer;
  list-style: none;
  padding: .85rem 2.4rem .85rem 1.05rem;
  position: relative;
  font-family: "Inter", system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--hb-ink);
  transition: background-color 160ms var(--hb-ease);
}
.hb-form-faq summary::-webkit-details-marker { display: none; }
.hb-form-faq summary::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b3a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 220ms var(--hb-ease);
}
.hb-form-faq details[open] summary::after { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .hb-form-faq summary:hover { background: var(--hb-surface-2); }
}
.hb-form-faq details p {
  margin: 0;
  padding: 0 1.05rem 1rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--hb-body) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hb-form-faq details[open] summary::after { transition: none; }
}

/* ==========================================================================
   12. Recensionsmodulen — justerad mot samma tokens
   ========================================================================== */

.hbaw { max-width: 1000px; }
.hbaw-card {
  border-radius: var(--hb-r-lg) !important;
  border-color: var(--hb-line) !important;
  box-shadow: var(--hb-sh) !important;
  padding: clamp(1.25rem, 3vw, 2.25rem) !important;
}
.hbaw-title {
  font-family: "Cardo", Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 3.2vw, 2rem) !important;
  letter-spacing: -.02em;
  color: var(--hb-ink) !important;
}
.hbaw-filter { transition: border-color 150ms var(--hb-ease), background-color 150ms var(--hb-ease), transform 150ms var(--hb-ease) !important; }
.hbaw-filter:active { transform: scale(.97); }
.hbaw-cta {
  border-radius: var(--hb-r-pill) !important;
  min-height: 54px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: var(--hb-sh);
  transition: background-color 180ms var(--hb-ease), transform 160ms var(--hb-ease), box-shadow 220ms var(--hb-ease) !important;
}
@media (hover: hover) and (pointer: fine) {
  .hbaw-cta:hover { transform: translateY(-1px); box-shadow: var(--hb-sh-lg); }
}
.hbaw-cta:active { transform: scale(.98); transition-duration: 90ms; }

/* ==========================================================================
   13. Kontakt / områden / sidfot
   ========================================================================== */

/* Ortslänkarna i sidfoten som chips i rutnät */
.hb-areas {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: flex-start;
  gap: .5rem !important;
}
.hb-areas > h3 { flex: 0 0 100%; margin-bottom: .35rem; }
.hb-areas > p { margin: 0 !important; }
.hb-areas > p > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .4rem .95rem;
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r-pill);
  background: var(--hb-surface);
  color: var(--hb-ink) !important;
  font-family: "Inter", system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: border-color 160ms var(--hb-ease), background-color 160ms var(--hb-ease), transform 160ms var(--hb-ease);
}
@media (hover: hover) and (pointer: fine) {
  .hb-areas > p > a:hover {
    border-color: var(--hb-brand);
    background: var(--hb-brand-soft);
    color: var(--hb-brand-700) !important;
    transform: translateY(-1px);
  }
}
.hb-areas > p > a:active { transform: scale(.97); }

/* Kontaktuppgifter — telefon och e-post får kännas klickbara */
.hb-contact-line a {
  font-weight: 600;
  text-decoration: none !important;
  color: var(--hb-brand) !important;
}

.wp-block-social-links .wp-social-link {
  transition: transform 200ms var(--hb-ease);
}
@media (hover: hover) and (pointer: fine) {
  .wp-block-social-links .wp-social-link:hover { transform: translateY(-2px); }
}

/* ==========================================================================
   14. Tillagda komponenter
   ========================================================================== */

/* -- Förtroendemarkörer i hero ------------------------------------------- */
.hb-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 1.5rem auto 0;
  /* Bryt ut ur temats smala innehållsbredd så raden inte bryts i onödan */
  /* Endast max-width — en fast width blåser upp föräldern på mobil. */
  max-width: 46rem !important;
}
.hb-trust__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border-radius: var(--hb-r-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .004em;
  white-space: nowrap;
}
.hb-trust__item .hb-stars { color: #ffd166; letter-spacing: .04em; }

/* Ljus variant, för sektioner på vit bakgrund */
.hb-trust--light .hb-trust__item {
  background: var(--hb-surface);
  border-color: var(--hb-line);
  color: var(--hb-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--hb-sh-sm);
}
.hb-trust--light .hb-trust__item .hb-stars { color: var(--hb-gold); }

/* -- Hero-knappar --------------------------------------------------------- */
.hb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.9rem;
  max-width: 46rem !important;
  margin-inline: auto;
}
.hb-hero-actions .hb-btn { font-size: 1.02rem !important; padding: .95em 1.9em !important; }
.hb-hero-actions .hb-btn--primary {
  background-color: var(--hb-brand) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(20,50,28,.32);
}
.hb-hero-actions .hb-btn--onphoto {
  background-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
@media (hover: hover) and (pointer: fine) {
  .hb-hero-actions .hb-btn--primary:hover { background-color: var(--hb-brand-600) !important; transform: translateY(-1px); box-shadow: 0 14px 38px rgba(20,50,28,.38); }
  .hb-hero-actions .hb-btn--onphoto:hover { background-color: rgba(255,255,255,.94) !important; color: var(--hb-ink) !important; border-color: transparent !important; transform: translateY(-1px); }
}

/* -- Villkorsknapp i sidfoten --------------------------------------------
   Ska ha samma diskreta tonläge som en integritetspolicylänk: synlig för
   den som letar, aldrig något som drar uppmärksamhet från innehållet. */

/* På undersidor finns ingen kolofonrad att haka på, så knappen får en egen
   diskret metarad — hårfin linje, högerställd, samma tyngd som en
   policylänk. Utan detta blir det ett ensamt tecken mitt i sidfoten. */
.hb-terms-line {
  max-width: var(--wp--style--global--wide-size, 1280px);
  margin: 1.75rem auto 0 !important;
  padding: .7rem clamp(1rem, 4vw, 2rem) 0;
  border-top: 1px solid var(--hb-line-soft);
  text-align: right;
  font-size: .8rem;
  line-height: 1;
  color: var(--hb-muted);
}
.hb-terms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  margin-left: .35em;
  vertical-align: baseline;
  border: 1px solid currentColor;
  border-radius: var(--hb-r-pill);
  background: transparent;
  color: inherit;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 9.5px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  opacity: .45;
  cursor: pointer;
  transition: opacity 160ms var(--hb-ease);
}
@media (hover: hover) and (pointer: fine) {
  .hb-terms-btn:hover { opacity: .9; }
}
.hb-terms-btn:focus-visible { opacity: 1; }

.hb-terms-dialog {
  width: min(92vw, 520px);
  padding: 0;
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r-lg);
  background: var(--hb-surface);
  color: var(--hb-body);
  box-shadow: var(--hb-sh-lg);
}
.hb-terms-dialog::backdrop {
  background: rgba(12, 22, 16, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.hb-terms-dialog__inner { padding: clamp(1.25rem, 3vw, 1.9rem); }
.hb-terms-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.hb-terms-dialog h2 {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--hb-ink) !important;
}
.hb-terms-dialog p {
  margin: 0 0 .8rem !important;
  font-size: .92rem !important;
  line-height: 1.65;
  color: var(--hb-body) !important;
}
.hb-terms-dialog p:last-child { margin-bottom: 0 !important; }
.hb-terms-dialog a { color: var(--hb-brand); text-underline-offset: .18em; }
.hb-terms-dialog__meta {
  margin-top: 1.1rem !important;
  padding-top: .8rem;
  border-top: 1px solid var(--hb-line-soft);
  font-size: .8rem !important;
  color: var(--hb-muted) !important;
}
.hb-terms-close {
  flex: none;
  width: 30px;
  height: 30px;
  margin: -.25rem -.25rem 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--hb-r-pill);
  background: transparent;
  color: var(--hb-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms var(--hb-ease), color 160ms var(--hb-ease);
}
@media (hover: hover) and (pointer: fine) {
  .hb-terms-close:hover { background: var(--hb-surface-2); color: var(--hb-ink); }
}

/* -- Flytande topplist (visas efter rullning, ≥ 900px) -------------------- */
.hb-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--hb-line);
  box-shadow: 0 6px 26px rgba(20,35,26,.07);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 320ms var(--hb-ease), opacity 240ms var(--hb-ease);
}
.hb-topbar.is-visible { transform: translateY(0); opacity: 1; }
.hb-topbar__brand {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  font-family: "Cardo", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--hb-ink);
  text-decoration: none;
  white-space: nowrap;
}
.hb-topbar__brand small {
  font-family: "Inter", system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 500;
  color: var(--hb-muted);
  letter-spacing: 0;
}
.hb-topbar__actions { display: flex; align-items: center; gap: .6rem; }
.hb-topbar .hb-btn { min-height: 44px; padding: .6em 1.3em !important; font-size: .95rem !important; }

/* Bara där sidhuvudet ligger inne i hero-bilden och alltså rullar bort.
   På övriga sidor är sidhuvudet självt klibbigt — två lager vore rörigt. */
@media (min-width: 900px) {
  body.hb-cover-header .hb-topbar { display: flex; }
}

/* -- Fast åtgärdsrad i botten (< 900px) ---------------------------------- */
.hb-actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: none;
  gap: .6rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--hb-line);
  box-shadow: 0 -6px 26px rgba(20,35,26,.09);
  transform: translateY(100%);
  transition: transform 320ms var(--hb-ease);
}
.hb-actionbar.is-visible { transform: translateY(0); }
.hb-actionbar .hb-btn {
  flex: 1 1 0;
  min-height: 50px;
  font-size: 1rem !important;
  padding: .7em 1em !important;
}
.hb-actionbar .hb-btn--call {
  background-color: var(--hb-surface) !important;
  color: var(--hb-brand-700) !important;
  border: 1px solid color-mix(in srgb, var(--hb-brand) 34%, transparent) !important;
  box-shadow: none;
}
.hb-actionbar .hb-btn--primary { background-color: var(--hb-brand) !important; color: #fff !important; }

@media (max-width: 899px) {
  .hb-actionbar { display: flex; }
  body { padding-bottom: 74px; }
}

.hb-icon { width: 1.05em; height: 1.05em; flex: none; }

/* ==========================================================================
   15b. Mobilmenyn — tydlig lista i stället för flytande kort
   ==========================================================================
   Undermenyn ritades som ett svävande popover-kort mitt i menyn och la sig
   över de andra alternativen. På mobil ska den vara en indragen lista. */

@media (max-width: 899px) {

  .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--hb-surface) !important;
    padding: 5.5rem 1.25rem 2.5rem !important;
  }

  /* Alla poster på samma linje, full bredd, tydliga avdelare */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100%;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    width: 100%;
    border-bottom: 1px solid var(--hb-line-soft);
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 1.05rem .2rem !important;
    font-size: 1.12rem;
    font-weight: 600;
    text-align: left;
    color: var(--hb-ink);
  }

  /* Undermenyn: indragen lista, ingen skugga, ingen ram, ingen absolut position */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 0 .6rem !important;
    padding: .1rem 0 .1rem 1rem !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid color-mix(in srgb, var(--hb-brand) 35%, transparent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    width: 100%;
    border: 0;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: .72rem .2rem !important;
    font-size: 1rem !important;
    font-weight: 500;
    text-align: left;
    color: var(--hb-body) !important;
    border-radius: 0;
  }

  /* Pilen för undermenyn får en egen tydlig träffyta */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--hb-brand);
  }

  /* Knapparna sist, staplade och lika breda */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
    width: 100%;
    margin-top: .5rem;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-button { width: 100%; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link {
    width: 100%;
    min-height: 52px;
  }

  /* Stängkryss med tydlig träffyta */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    width: 44px;
    height: 44px;
    color: var(--hb-ink);
  }
}

/* ==========================================================================
   16. Responsivt
   ========================================================================== */

@media (max-width: 781px) {
  /* Heron var en vägg av vit text på ett ljust foto. Kraftigare skärm
     och en tydligare trappa i storlek, så rubriken faktiskt leder. */
  .wp-block-cover.header-cover > .wp-block-cover__background {
    background: linear-gradient(
      180deg,
      rgba(8, 16, 11, .74) 0%,
      rgba(8, 16, 11, .58) 38%,
      rgba(8, 16, 11, .66) 72%,
      rgba(8, 16, 11, .80) 100%
    ) !important;
  }
  .header-cover h1 {
    max-width: 100%;
    font-size: clamp(2.1rem, 9vw, 3rem) !important;
    text-shadow: 0 2px 22px rgba(0,0,0,.5);
  }
  /* Samma skärpa på tjänsternas översiktssidor — där ligger texten ofta
     över ett fönster eller en ljus vägg och blev nästan osynlig. */
  .wp-block-cover:not(.header-cover) > .wp-block-cover__background.has-background-dim {
    background: linear-gradient(
      180deg,
      rgba(8, 16, 11, .60) 0%,
      rgba(8, 16, 11, .68) 100%
    ) !important;
  }
  .wp-block-cover:not(.header-cover) :where(h1, h2, h3, p) {
    text-shadow: 0 1px 16px rgba(0, 0, 0, .5);
  }

  .hb-hero-copy p:not(.wp-block-site-tagline) { text-shadow: 0 1px 14px rgba(0,0,0,.45); }
  .hb-hero-copy p:not(.wp-block-site-tagline):nth-of-type(1) { font-size: 1.02rem !important; }
  .hb-hero-copy p:not(.wp-block-site-tagline):nth-of-type(2) { font-size: .96rem !important; }
  .hb-hero-copy p:not(.wp-block-site-tagline):nth-of-type(3) {
    font-size: .9rem !important;
    opacity: .82;
    line-height: 1.55;
  }

  /* Chippen tog tre rader. Kompaktare, tvåspaltiga. */
  .hb-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    max-width: 21rem !important;
    margin-inline: auto;
  }
  .hb-trust__item {
    justify-content: center;
    white-space: normal;
    text-align: center;
    font-size: .74rem;
    line-height: 1.25;
    padding: .45rem .6rem;
  }
  .hb-trust__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Knapparna blev 81 px höga och kant-i-kant, vilket tog över hela
     heron. Samma träffyta som resten av sajten, i rimlig bredd. */
  .hb-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    width: min(100%, 21rem);
    margin-inline: auto;
  }
  .hb-hero-actions .hb-btn {
    width: 100%;
    min-height: 52px;
    padding: .7em 1.25em !important;
    font-size: .98rem !important;
  }
  .hb-trust { gap: .4rem; }
  .hb-trust__item { font-size: .8rem; padding: .42rem .8rem; }
  .hb-card { padding: 1.3rem 1.25rem 1.4rem; }
  .wp-block-columns { gap: 1.4rem; }
}

@media (max-width: 480px) {
  .wpforms-container .wpforms-field-radio ul,
  .wpforms-container .wpforms-field-checkbox ul { flex-direction: column; }
  .wpforms-container .wpforms-field-radio li label,
  .wpforms-container .wpforms-field-checkbox li label { width: 100%; }
}

/* ==========================================================================
   17. Tillgänglighet
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hb-topbar, .hb-actionbar { transition: opacity 200ms ease !important; }
  .hb-topbar { transform: none; }
  .hb-actionbar { transform: none; }
  .hb-card:hover,
  .wp-block-button__link:hover,
  .hb-btn:hover,
  .hb-areas > p > a:hover { transform: none !important; }
  .wp-block-button__link:active, .hb-btn:active, .hb-card:active { transform: none !important; }
  .hbaw-col-track.dir-up, .hbaw-col-track.dir-down { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .hb-topbar, .hb-actionbar,
  body:not(.home) .wp-site-blocks > header.wp-block-template-part {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .hb-trust__item {
    background: rgba(0,0,0,.55) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .hb-hero-actions .hb-btn--onphoto { background: rgba(0,0,0,.55) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

@media (prefers-contrast: more) {
  .hb-card, .wpforms-container, .hbaw-card { border-color: var(--hb-ink) !important; }
  .hb-trust__item { background: #0d1a12 !important; border-color: #fff !important; }
  .wp-block-cover.header-cover > .wp-block-cover__background {
    background: rgba(8,16,11,.78) !important;
  }
}

/* Print */
@media print {
  .hb-topbar, .hb-actionbar { display: none !important; }
  body { padding-bottom: 0 !important; }
}