@charset "UTF-8";
/********************************************************
	DOKUMENTSTRUKTUR INNEHÅLLSFÖRTECKNING:

  1: COOKIE BOT
  2: FONTS & FALLBACKS
  3: VARIABLES: FONTSTACKS
  4: VARIABLES: FONT-SIZES
  5: VARIABLES: SPACING & SIZE TOKENS
  6: VARIABLES: COLOR THEME
  7: RESET & BASE STYLING
  8: UTILITY CLASSES
  9: MODULES / COMPONENTS
  10: HEADER
  11: FOOTER
*/
/* 
*********************************************************
  1: COOKIE BOT
*********************************************************
*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
  div#CybotCookiebotDialog {
    scale: 75%;
  }
}
/* 
********************************************************
	2: FONTS & FALLBACKS
********************************************************
*/
/* ------------------------------------------------------- 
Font: URWGeometric-Regular - Används i pratbubblor och löpande text 
*/
@font-face {
  font-family: "URWGeometric-Regular";
  src: local("URWGeometric-Regular"),
    url("../fonts/urwgeometric_regular.woff2") format("woff2");
  font-display: Fallback;
}
@font-face {
  /* Fallback anpassad för macOS/iOS, duglig på Windows */
  font-family: "URWGeometric-fallback-OSX";
  src: local("Lucida Grande");
  size-adjust: 82.4%;
  ascent-override: 108%;
  descent-override: 50%;
}
@font-face {
  /* Fallback anpassad för Windows, duglig på macOS/iOS */
  font-family: "URWGeometric-fallback-Windows";
  src: local("Lucida Sans Unicode");
  size-adjust: 82.4%;
  ascent-override: 118%;
  descent-override: 40%;
}
@font-face {
  /* Fallback anpassad för Windows, fungerar även för macOS/iOS  */
  font-family: "URWGeometric-fallback-all";
  src: local("Microsoft Sans Serif");
  size-adjust: 91.099%;
  ascent-override: 108.9%;
  descent-override: 33%;
}
/* ------------------------------------------------------- 
Font: MuseoSans-300 - Används i rubriker och löpande text 
*/
@font-face {
  font-family: "MuseoSans-300";
  src: local("MuseoSans-300"),
    url("../fonts/museo_sans_300.woff2") format("woff2");
  font-display: Fallback;
}
@font-face {
  /* Bästa fallback för iOS/macOS (även hyfsad på Safari) */
  font-family: "Museo300-fallback-OSX";
  src: local("Helvetica Light"), local("Helvetica");
  size-adjust: 103%;
  ascent-override: 62%;
  line-gap-override: 20%;
}
@font-face {
  /* Bästa fallback för Windows */
  font-family: "Museo300-Fallback-Windows";
  src: local("Segoe UI SemiLight");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 24%;
}
@font-face {
  /* Fungerande fallback för Safari. Behöver bara size-adjust */
  font-family: "Museo300-fallback-basic";
  src: local("Arial");
  size-adjust: 103.2%;
}
/* ------------------------------------------------------- 
Font: MuseoSans-500 - - Används i lokalbeskrivningens rubriker och i kalkylverktyg
*/
@font-face {
  font-family: "MuseoSans-500";
  src: local("MuseoSans-500"),
    url("../fonts/museo_sans_500.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Museo500-fallback-basic";
  src: local("Trebuchet MS");
  size-adjust: 110%;
}
/* ------------------------------------------------------- 
Font: Roboto - Används i formulär
*/
@font-face {
  font-family: "Roboto";
  src: local("Roboto"), url("../fonts/roboto_latin_400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 
*********************************************************
  3: VARIABLES: FONTSTACKS
*********************************************************
*/
:root {
  /* 
      VARIABLES - FONTSTACKS
  */
  --fontstack-body: URWGeometric-Regular, "URWGeometric-fallback-OSX",
    "URWGeometric-fallback-Windows", "URWGeometric-fallback-all", sans-serif;
  --fontstack-heading: MuseoSans-300, "Museo300-fallback-OSX",
    "Museo300-fallback-basic", "Trebuchet MS", sans-serif;
  --fontstack-heading-bold: MuseoSans-500, MuseoSans-300,
    "Museo500-fallback-basic", sans-serif;
  /* Font-stack med fallback-fonts för MuseoSans-300 i webbläsare som stödjer override */
  @supports (ascent-override: 50%) {
    --fontstack-heading: MuseoSans-300, "Museo300-fallback-OSX",
      "Museo300-Fallback-Windows", "Museo300-fallback-basic", "Trebuchet MS",
      sans-serif;
  }
  /* används i form input-fields och button-text */
  --fontstack-textfield: Roboto, Arial, Helvetica, sans-serif;
  /* används i box-text-3d */
  --fontstack-boxtext: Helvetica, Arial, sans-serif;
  /* används i header och footer nav-links */
  --fontstack-navlink: "Gill Sans", "Gill Sans MT", "Myriad Pro",
    "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  /* använd i card: icon-bubble */
  --fontstack-icon-bubble: "Arial Black", Gadget, sans-serif;
}

/* 
*********************************************************
  4: VARIABLES: FONT-SIZES
*********************************************************
*/
:root {
  /* 
  FLUID-BASE: Används som bas font-size i headern (för header-nav-buttons etc)
  https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=380&minRatio=1.25&maxFontSize=24&maxWidth=700&maxRatio=1.333&steps=sm%2Cbase%2Cmd%2Clg%2Cxl&baseStep=base&prefix=fs&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=400
  */
  --fs-fluid-base: clamp(
    1rem,
    2.5vi + 0.41rem,
    1.5rem
  ); /* 16-24px header-buttons... */

  /* STATIC FONT-SIZES */
  --fs-small: 1rem; /*16px;*/
  --fs-medium: 1.125rem; /*18px;*/
  --fs-large: 1.25rem; /*20px;*/
  --fs-xlarge: 1.75rem; /*20px;*/
  --fs-h3: 1.5rem; /*24px; (används i footer-rubriker) */

  /* FLUID FONT-SIZES - range between: 330 - 430px */

  /* https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=28&size-max=35&viewport-min=330&viewport-max=430&viewport-units=vi */
  --fs-fluid-28-35px: clamp(1.75rem, 0.306rem + 7vi, 2.188rem);
  /* https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=18&size-max=20&viewport-min=330&viewport-max=430&viewport-units=vi */
  --fs-fluid-18-20px: clamp(1.125rem, 0.713rem + 2vi, 1.25rem);
  /* https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=16&size-max=18&viewport-min=330&viewport-max=430&viewport-units=vi */
  --fs-fluid-16-18px: clamp(1rem, 0.588rem + 2vi, 1.125rem);
  /* https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=10&size-max=25&viewport-min=330&viewport-max=430&viewport-units=vi */
  --fs-fluid-10-25px: clamp(0.625rem, -2.469rem + 15vi, 1.563rem);
}
/* 
*********************************************************
  5: VARIABLES: SPACING & SIZE TOKENS
*********************************************************
*/
:root {
  /* spacing units */
  --space-1x: 5px;
  --space-2x: 10px;
  --space-3x: 15px;
  --space-4x: 20px;
  --space-5x: 25px;
  --space-6x: 30px;

  /* border radius */
  --border-radius: 5px;
  --border-radius-small: 3px;

  /* border width */
  --border-width-thin: 2px;
  --border-width-medium: 3px;
  --border-width-thick: 5px;

  /* page content widths */
  --page-content-maxwidth: 1310px;
  --page-content-full-width: min(100%, 1310px);
  /* (header-content on small screen) */
  --page-content-centered-maxwidth: 480px;
  --page-content-centered-width: min(
    100%,
    var(--page-content-centered-maxwidth)
  );

  /* PAGE layout dimensions */
  --page-padding-y: var(--space-1x);
  --page-padding-x: var(--space-2x);
  @media (max-width: 700px) {
    /* inget page-gap på små skärmar */
    --page-padding-x: 0px;
  }
  --page-content-padding: var(--space-2x);

  /* text flow spacing */
  --flow-space: 0.5em;
  /* text max line width */
  --line-max-width: 55ch;
}

/* 
*********************************************************
  6: VARIABLES: COLOR THEME
*********************************************************
*/
/* 
    - Colors tagged "45" pass as background for white text - (WCAG 2.0 level AA) - min contrast-ratio 4.5:1
    - Colors tagged "30" pass as background for large white text or for graphics on white surface - (WCAG 2.0 level AA) - min contrast-ratio 3:1
    - Colors tagged "70" pass the highest contrast requirements as background for white text - (WCAG 2.0 level AAA) - min contrast-ratio 7:1
    Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

    WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. 
    WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). 
    WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
*/
:root {
  /* 
    ==========================================================
     ACCENT COLORS (used for highlights, icons, buttons etc)
  */
  --hue-red: 336; /* #cb5283  */
  --color-accent-red-30: hsl(336, 54%, 56%);
  --color-accent-red-45: hsl(336, 54%, 52%);

  --hue-red: 343; /* #a33b59  Ändrad färg i "nya listningen" */
  --color-accent-red-45: hsl(343, 47%, 44%);

  --hue-blue: 200; /* #559cc9 203 / : #3E7A9A; 200 */
  --color-accent-blue-30: hsl(200, 52%, 56%);
  --color-accent-blue-45: hsl(200, 42%, 43%); /* används i "nya listningen" */

  --hue-bluegray: 200; /* #6c899b  203 */
  --color-accent-bluegray-30: hsl(200, 19%, 52%);
  --color-accent-bluegray-45: hsl(200, 19%, 45%);

  --hue-green: 161; /* #36b78f  (#3abb98 164 på buttons, erbjudanden / 168 på "nya listningen" */
  --color-accent-green-30: hsl(161, 54%, 42%);
  --color-accent-green-45: hsl(161, 54%, 33%);

  --hue-gray: 120; /* #989998 */
  --color-accent-gray-30: hsl(120, 0%, 58%);
  --color-accent-gray-45: hsl(120, 0%, 46%);

  --hue-yellow: 44; /* #d0ad49 */
  --color-accent-yellow-30: hsl(44, 59%, 44%);
  --color-accent-yellow-45: hsl(44, 54%, 36%);
  /* 
    ==========================================================
      FUNCTIONAL / SEMANTIC COLORS
  */

  --color-success-45: hsl(152, 68%, 32%); /* #1A8755 */
  --color-error-45: hsl(354, 70%, 54%); /* #DC3545 */

  --hue-focus: 200; /* #0098df COLOR-FOCUS - signalerar active state, används för focus, status-indikator  */
  --color-focus-30: hsl(var(--hue-focus), 100%, 44%);
  --color-focus-45: hsl(var(--hue-focus), 100%, 36%);
  --color-focus-70: hsl(var(--hue-focus), 100%, 27%);
  /* 
      BUTTON-COLORS
  */
  --color-btn-submit-muted: hsl(84, 40%, 60%);
  --color-btn-submit-30: hsl(84, 69%, 38%); /* #7fba22  */
  --color-btn-submit-45: hsl(84, 69%, 30%);
  --color-btn-submit-70: hsl(84, 69%, 22%);

  --color-btn-neutral-30: hsl(0, 0%, 58%); /* #999999 #989998  */
  --color-btn-neutral-45: hsl(0, 0%, 46%);
  /* 
      COLORS for SPEACH-BUBBLES / TOOLTIPS / CARDS
  */
  --color-cta-45: hsl(46, 14%, 35%);
  /* #655F4C  bakgrund för call-to-action-liknande textbubblor */

  --color-tooltip-30: var(--color-accent-bluegray-30);
  /* #6C899B bakgrund för tooltip-bubblor och korta, kontextuella meddelanden (även accent-färg i ikoner) */
  --color-tooltip-45: var(--color-accent-bluegray-45);

  /* #9CA6AD - bg in cart-cards */
  --color-cartcard-30: hsl(205, 9%, 58%);
  --color-cartcard-45: hsl(205, 9%, 46%);

  /* ====================================
      MAIN BACKGROUND COLORS 
  */
  --color-bg-body: hsl(0, 0%, 91%); /* #e9e9e9 */
  --color-bg-surface: hsl(0, 0%, 100%); /* #ffffff */
  --color-bg-contrast: hsl(0, 0%, 30%); /* #4D4D4D */
  --color-bg-contrast-max: hsl(240, 2%, 25%);
  /* 10.67  #3E3E40 contrast-color border link tag image-contrast-color */

  /* ====================================
      TEXT- & STROKE COLORS 
  */
  --hue-logo-black: 51.43; /* logo-black!  */
  --color-text-heading: hsl(var(--hue-logo-black), 24%, 5%);
  --color-text-body: hsl(var(--hue-logo-black), 24%, 15%);
  --color-text-link: var(--color-focus-70);
  --color-text-link-hover: color-mix(in hsl, var(--color-text-link), black 20%);
  --color-text-contrast1: hsl(0, 0%, 100%); /* #ffffff */
  --color-text-muted: hsl(206, 4%, 36%);

  --color-stroke: var(--color-bg-contrast-max);
  --color-stroke-muted: hsl(204, 8%, 60%); /* #bdc3c7 */
  --color-stroke-surface: hsl(0, 0%, 89%) /* #e3e3e3 */;

  /* ====================================
    COLORS HEART ICONS
  */
  --color-heart-red: var(--color-accent-red-45);
  --color-heart-bg-light: var(--color-bg-body);
  --color-heart-counter-text: var(--color-text-contrast1);
  --color-heart-counter-pulse: var(--color-accent-red-45);
}

/* 
*********************************************************
  7: RESET & BASE STYLING (inkl. Tillgänglighet och scroll)
*********************************************************
*/
/* box-sizing: border-box for everything, including elements in shadow-DOM */
html {
  box-sizing: border-box;
  /* replace vw with cqw */
  container-type: inline-size;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Vanlig reset bara på standard-HTML-element */
html,
body,
div,
span,
p,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
a,
article,
figure,
footer,
header,
img,
section {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}
body {
  min-height: 100svh;
  /*
  Minimum line-height should be 1.5 for body text (WCAG requirement). 
  Larger text can use slightly tighter line-height (1.2-1.3)
  */
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
img,
svg {
  vertical-align: middle;
}
a,
input,
textarea,
select,
label {
  cursor: pointer;
}
[role="button"]:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}
button {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  appearance: none;
  background: none;
}
button:focus:not(:focus-visible) {
  outline: 0;
}
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  hyphens: auto;
}
p,
figcaption,
dt,
dd,
a {
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
}
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
b,
strong {
  font-weight: bolder;
}

/* Base styling */
body {
  font-family: var(--fontstack-body);
  background-color: var(--color-bg-body);
}
h1,
h2,
h3 {
  font-family: var(--fontstack-heading);
  color: var(--color-text-heading);
}

/* heading-trick 
väljer en rubrik av typen h1, h2 eller h3 om nästa HTML-element direkt efter den är en rubrik av typen h2, h3 eller h4
*/
:is(h1, h2, h3):has(+ :is(h2, h3, h4)) {
  margin-block-end: 0.25rem;
}

p a {
  color: var(--color-text-link);
  transition: text-underline-offset 0.25s ease;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 0.17em;
}
p a:is(:hover, :active) {
  text-underline-offset: 0.15em;
}

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}


/* ==================================== 
    TILLGÄNGLIGHET OCH SCROLL
*/

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* Tangentbordsnavigering focus-ring */
*:focus-visible {
  position: relative;
  outline-style: solid;
  outline-width: var(--border-width-medium, 0.1rem);
  outline-offset: var(--outline-offset, 0);
  outline-color: var(--color-focus-30);
  border-radius: var(--border-radius);
}

/*  Tangentbordsnavigering skip-link
    tab-focus-visible class for keyboard-only links/skip links 
    from: https://a11y-blog.dev/en/articles/understanding-a-skip-link/
*/
.tab-focus-visible {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
}
/* Show on keyboard focus */
.tab-focus-visible:focus-visible {
    transform: translateY(0%);
}
/* Header - skip-link styling */
.global-header .skip-link {  
  background-color: var(--color-bg-surface);
  color: var(--color-text-link-hover);
  padding: 0.5em 0.7em 0.2em 0.5em;
  border-radius: var(--border-radius, 1rem);
  z-index: 100;
}
.global-header .skip-link:focus-visible {
  outline-offset: -0.2rem;
}

/* skip-link target-area main content */
main:focus *:has(>h1) {
  outline: 3px solid red;
  outline-offset: -4px;
  outline-style: dotted;
  outline-width: var(--border-width-medium, 0.1rem);
  outline-color: var(--color-focus-30);
  /* background-color: red; */
}

/* alla id:n får scroll-margin (allt som kan vara anchor-links) */
[id] {
  scroll-margin-top: calc(var(--global-header-height, 100px) + 10px);
}

/* 
*********************************************************
  8: UTILITY CLASSES
*********************************************************
*/

/* 
.optimized-scroll will turn of interactive transitions/animations during scroll.  
*/
.is-scrolling .optimized-scroll *:hover,
.is-scrolling .optimized-scroll *:active,
.is-scrolling .optimized-scroll *:focus,
.is-scrolling .optimized-scroll *:focus-visible,
.is-scrolling .optimized-scroll *:focus-within {
  transition: none !important;
  animation: none !important;
  transform: inherit !important;
  /* transform: none !important;  lägg till på specifika element istället vid behov! */
}

.visually-hidden {
  /* Accessibility helper class to hide elements visually but keep them accessible to screen readers */
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* begränsar textinnehållet i ett block till ett visst antal rader och lägger till en ellips (...) efter det sista synliga ordet */
.textbox-line-clamp {
  overflow: hidden;
  height: auto;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp, 3);
  -webkit-box-orient: vertical;
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 55ch;
}
/* En rad text med en ellips (...) efter det sista synliga ordetvid text overflow */
.truncate-oneliner {
  width: var(--width, 100%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.text-block-maxwidth {
  max-width: var(--line-max-width, 55ch);
  margin-left: auto;
  margin-right: auto;
}

/* just center stuff */
.centered {
  justify-items: center;
  align-content: center;
  text-align: center;
}

.floating-shape {
  float: left;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  shape-outside: circle();
  margin: 0 1rem 1rem 0;
}

/* Tooltip */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  position: absolute;
  top: -100%;
  left: 0;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

/* 
*********************************************************
  9: MODULES / COMPONENTS
*********************************************************
*/

.content-box {
  background-color: var(--color-bg-surface, #fff);
  padding: var(--space-2x, 10px);
  border: 1px solid;
  border-color: var(--color-stroke-surface);
}

/* =================================================
   COMPONENT: PB - Pratbubbla generell design
*/
.pb-arrow-up,
.pb-arrow-down {
  --color-bg: var(--pb-color-bg, #fff);
  --color-border: var(--pb-color-border, #999);
  --border-width: var(--pb-border-width, 1px);
  position: relative;
  background: var(--color-bg);
  border: var(--pb-border-width) solid var(--color-border);
  justify-items: center;
  align-content: center;
}
.pb-arrow-up::after,
.pb-arrow-down::after {
  position: absolute;
  border: medium solid transparent;
  content: " ";
  height: 0;
  width: 0;
  pointer-events: none;
  border-width: 11px;
  left: var(--pb-arrow-left-position, 50%);
}
/* Pratbubbla uppåtpil */
.pb-arrow-up::after {
  border-bottom-color: var(--color-border);
}
.pb-arrow-up::after {
  top: var(--border-width);
  transform: translateY(-100%);
}
/* Pratbubbla nedåtpil */
.pb-arrow-down::after {
  border-top-color: var(--color-border);
}
.pb-arrow-down::after {
  bottom: calc(
    var(--border-width) * -1
  ); /* Justera för border-width, negative value */
  transform: translateY(100%);
}
/* ----------------------------------------------------- 
   PB: THEME - Primary
*/
.pb-style-primary {
  font-family: var(--fontstack-body);
  --pb-color-bg: var(--color-cta-45, #655f4c);
  --pb-color-border: var(--color-cta-45, #655f4c);
  --pb-border-width: 0px;
  padding: var(--pb-padding, 6px 8px);
}
.pb-style-primary > * {
  color: var(--color-text-contrast1, #fff);
}
/* ----------------------------------------------------- 
   PB: THEME - Tooltip
*/
.pb-tooltip {
  --pb-color-bg: var(--color-tooltip-45, #6c899b);
  --pb-color-border: var(--color-tooltip-45, #6c899b);
  --pb-border-width: var(--space-2x, 10px);
  --pb-arrow-left-position: 30%;
  border-radius: var(--border-radius);
  font-size: var(----fs-small);
  font-family: var(--fontstack-body);
  font-weight: 400;
  font-style: normal;
  color: var(--color-text-contrast1, #ffffff);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

/* =================================================
   COMPONENT: BUTTON (base-styling)
*/
.button_,
.nav-button {
  display: block;
  appearance: none; /* remove default styling */
  font-size: var(--button-font-size, 1.25rem); /* 20px */
  line-height: 1.1;
  border-radius: var(--border-radius);
  /* center inner content: */
  justify-items: center;
  align-content: center;
  text-align: center;
  /* Accessible button size - https://www.accessguide.io/guide/large-target-size */
  min-height: 44px;
  height: var(--button-height, auto);
  text-decoration: none;
}
.button_ {
  transition: background-color 0.4s ease, transform 0.25s ease;
  padding-inline: 1.5em;
  color: var(--color-text-contrast1, #fff);
  background-color: var(--button-bg-color, hsl(0, 0%, 46%));
  font-family: var(--fontstack-textfield);
}
.button_:hover {
  color: var(--color-text-contrast1, #fff);
  background-color: color-mix(
    in oklab,
    var(--button-bg-color, hsl(0, 0%, 46%)) 95%,
    black
  );
}
.button_:active {
  transform: scale(0.99);
  background-color: color-mix(
    in oklab,
    var(--button-bg-color, hsl(0, 0%, 46%)) 90%,
    black
  );
}
/* =================================================
   BUTTON-SUBMIT (extends BUTTON_)
*/
.button-submit {
  width: fit-content;
  --button-font-size: var(--fs-medium, 1.125rem);
  --button-bg-color: var(--color-btn-submit-45, #7fba22);
}
.button-submit[disabled] {
  background: var(--color-btn-submit-muted, #999999);
  pointer-events: none;
}

/* =================================================
   COMPONENT: NAV-BUTTON (generell design)
*/
.nav-button {
  /* Styling */
  --button-font-size: var(--fs-nav-button, var(--fs-fluid-base), 1rem);
  color: var(--color-black, #000);
  border: var(--border-width-thin, 2px) solid;
  border-color: var(--color-header-stroke);
  padding-inline: 0.5em;
  font-family: var(--fontstack-navlink);
}
/* 
  STATE - INTERACTION: Hover / Active / pressed animation
*/
.nav-button {
  transition: border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.nav-button:hover {
  color: var(--color-black, #000);
  border-color: hsl(from var(--color-focus-30) h 70% 36%);
  box-shadow: 0 0 2px 1px hsl(from var(--color-focus-45) h 70% 36% / 0.2);
}
.nav-button:active {
  box-shadow: none;
  transform: scale(0.99);
}
.button-regular {
  font-size: var(--fs-large);
  height: 3.5rem;
}
.nav-button-size {
  font-size: var(--fs-large);
  height: 3.5rem;
}

/* =================================================
   COMPONENTS: 
   - ICON-BUTTON (svg icon buttons with hover effect)
   - ICON-BUTTON: HEART-TOGGLE (styling for heart-toggle icon. Extends ICON-BUTTON)
*/
.icon-button,
.icon-button--heart-toggle {
  display: grid;
  place-items: center;
  cursor: pointer;
  background-color: var(--button-bg-color, transparent);
  /* Accessible button size - https://www.accessguide.io/guide/large-target-size */
  min-width: 44px;
  min-height: 44px;
}
.icon-button svg,
.icon-button--heart-toggle svg {
  transition: transform 0.4s ease;
  transform-origin: center;
  width: var(--icon-button--size, 100%);
  height: var(--icon-button--size, 100%);
  stroke-width: var(--icon-button_stroke-width, 2.2px);
}

/* no scale transform if reduced motion is enabled */
@media (prefers-reduced-motion: no-preference) {
  .icon-button:hover svg,
  .icon-button--heart-toggle:hover svg {
    transform: scale(1.05);
  }
  .icon-button:active svg,
  .icon-button--heart-toggle:active svg {
    transform: scale(0.95);
  }
}

/* Styling: HEART-TOGGLE ICON-BUTTON */

.icon-button--heart-toggle svg {
  --icon-button_stroke-width: 2.7px;
  --icon-button--size: 2.75rem;
  stroke: var(--color-heart-red);
  --color: hsl(from var(--color-text-contrast1) h s l / 0.8);
  color: var(--color, white);

  transition: transform 0.4s ease, color 0.25s ease;
}
.icon-button--heart-toggle.is-saved svg {
  stroke: var(--color-heart-red, red);
  color: var(--color-heart-red, red);
}

/* =================================================
   Version: HEART-TOGGLE-BUTTON som standard-knapp med ikon och text
*/
.button_.icon-button--heart-toggle {
  container-type: inline-size;
  container-name: toggle-container;
  padding-block: var(--space-2x);
  background-color: var(--color-cartcard-45, rgb(156, 166, 172));
  display: flex !important;
  justify-content: center;
  gap: 0.3em;
  width: 100%;
  font-family: var(--fontstack-body);
}
.button_.icon-button--heart-toggle svg {
  min-width: max(1.5em, 2.7rem);
}
.button_.icon-button--heart-toggle:is(:hover, :active) {
  transform: none;
}
.button_.icon-button--heart-toggle::after {
  font-size: var(--fs-medium);
}
@container toggle-container (min-width: 310px ) {
  .button_.icon-button--heart-toggle::after {
    font-size: var(--fs-large);
  }
}
.button_.icon-button--heart-toggle:is(:hover, :active) svg {
  transition: transform 0.4s ease, color 0.25s ease;
  min-width: 44px;
}
.button_.icon-button--heart-toggle.is-saved svg {
  stroke: var(--color-text-contrast1);
  --icon-button_stroke-width: 2.2px;
}
.button_.icon-button--heart-toggle[data-text-save]::after,
.button_.icon-button--heart-toggle[data-text-saved]::after {
  content: attr(data-text-save);
  flex-basis: var(--heart-toggle-text-width, 13.75em);
  text-align: left;
}
.icon-button--heart-toggle.is-saved:is(
    [data-text-save],
    [data-text-saved]
  )::after {
  content: attr(data-text-saved);
}

/* 
*********************************************************
  10: WEB COMPONENTS: 
  - saved-venues-cart
  - faq-list
*********************************************************
*/
saved-venues-cart {
  container-type: inline-size;
  padding: var(--space-4x, 20px);
  background-color: var(--color-bg-surface, #ffffff);
  border: 1px solid var(--color-stroke-surface, #e3e3e3);
  display: grid;
  justify-items: center;
}
saved-venues-cart h2 {
  font-size: 1.25rem; /* 20px fallback */
  --font-size: min(6cqi, var(--fs-h3));
  font-size: var(--font-size);
  font-family: var(--fontstack-heading, sans-serif);
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1x, 5px);
}
saved-venues-cart svg {
  display: inline-block;
  width: max(calc(var(--font-size) * 1.5), 2rem);
  aspect-ratio: 1;
  color: var(--color-heart-red, pink);
}

/* ====================
   faq-list 
*/
faq-list {
  display: block;
  padding-block: var(--space-2x, 10px);
}
faq-list dl > * + * {
  margin-block-start: var(--flow-space, 0.5rem);
}
faq-list :is(dt>button, dd) {
  padding-inline: var(--space-3x, 0.5rem);
}
/*  dt (fråga) styling */
faq-list dt {
  font-weight: 600;
  line-height: 1.2;
  display: grid;
  border: 1px solid var(--color-stroke-surface, #e3e3e3);
  border-radius: var(--border-radius-small, 3px);
  background: hsl(from var(--color-cartcard-45, gray) h 70% 36% / 0.1);
  transition: background 0.25s ease;
}
faq-list dt button {
  all: unset;
}
faq-list dt button, 
faq-list dt:not(:has(> button)) {
  min-height: 2em;
  display: flex;
  align-items: center;
  gap: var(--space-2x, 10px);
  padding-block: var(--space-2x, 10px);
  padding-inline: var(--space-3x, 0.5rem);
  font-family: var(--fontstack-body, sans-serif);
  font-size: var(--fs-medium, 1.125rem);
}
faq-list dt:has(button:hover) {
  background: hsl(from var(--color-cartcard-45, gray) h 70% 36% / 0.15);
}
faq-list dt button:before {
  content: "+";
}
faq-list dt.is-open button:before {
  content: "–";
}
/*  dd (svar) styling */
faq-list dd {
  line-height: 1.4;
}
/* enkel öppna/stäng-animation  */
faq-list dd {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
faq-list dt.is-open + dd {
  max-height: 800px; /* stort nog */
  opacity: 1;
}
/* snyggare öppna/stäng-animation för uppdaterade webbläsare */
@supports (interpolate-size: allow-keywords) {
  faq-list dd {
    transition: height 0.3s ease, opacity 0.2s ease;
    height: 0;
    max-height: none;
    overflow: clip;
    interpolate-size: allow-keywords;
  }
  faq-list dt.is-open + dd {
    height: auto;
  }
}

/* 
*********************************************************
  11: HEADER 
*********************************************************
*/
global-header {
  /* reset: custom elements have display: inline by default */
  display: block;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--color-bg-body);

  /* Header fonts & font-sizes */
  --header_base-font-size: var(--fs-fluid-base);
  font-size: var(--header_base-font-size);
  font-family: var(--fontstack-body);

  /* Header colors */
  --color-header-stroke: var(--color-stroke, hsl(240, 2%, 25%));
  --color-header-text: var(--color-text-body, hsl(240, 2%, 25%));
  --color-header-bg: var(--color-bg-surface, #ffffff);
  --color-pb-bg: var(--color-cta-45, hsl(46, 14%, 35%));

  /* Header spacing - aligned with page content on x-axis */
  --header-padding-x: calc(var(--page-padding-x) + var(--page-content-padding));
  --header-padding-y: clamp(var(--space-2x), 3.333vi, var(--space-3x));
  --header-padding-y-end: calc(var(--header-padding-y) * 1.25);
  --pb-container-height: 3.1em;
  /* clamp padding-y:
  https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=10&size-max=15&viewport-min=300&viewport-max=450&viewport-units=vi
  */
}

/* ===================================== 
    HEADER - Base styles
*/
global-header,
.global-header__content-container {
  background-color: var(--color-bg-surface);
}

/* "blur-shadow" and border under the header */
global-header xxx::after {
  content: "";
  opacity: 0.3;
  /* Side-note: 'position: sticky' creates a positioning context for absolutely positioned '::after' in the same way as position: relative. That's why it works!*/
  position: absolute;
  pointer-events: none;
  left: 0;
  width: 100%;
  height: 20px;
  /* lägg under header */
  bottom: -20px;
  z-index: -1;
  /* sudda det som ligger under */
  backdrop-filter: blur(8px);

  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
/* the browser do not need to paint this during scroll */
/* .is-scrolling global-header::after {
  backdrop-filter: none;
  mask-image: none;
  -webkit-mask-image: none;
} */

/* ===================================== 
    HEADER LAYOUT
*/

.global-header__content-container {
  padding-inline: var(--header-padding-x, 10px);
  margin-inline: auto;
  padding-block: var(--header-padding-y, 10px);
  width: var(--page-content-full-width);
  /* positioning context for toggle menu */
  position: relative;
}
.global-header__tagline-container {
  padding-inline: var(--header-padding-x, 10px);
  padding-block: var(--header-padding-y, 10px);
  display: none;
}

.global-header__tagline {
  width: var(--page-content-full-width);
  margin-inline: auto;
}
.global-header__tagline > * {
  width: fit-content;
}

/* ===================================== 
    HEADER LAYOUT - SMALL (mobile Grid-layout)
*/
@media (max-width: 950px) {
  .global-header__content-container {
    display: grid;
    grid-template-columns: 1fr var(--page-content-centered-width) 1fr;
    grid-template-areas:
      ". header-logo-area ."
      ". header-nav-area  header-nav-area";
    row-gap: var(--header-padding-y);
  }
  .global-header__logo {
    grid-area: header-logo-area;
  }
  .global-header__nav-container {
    grid-area: header-nav-area;
  }
  toggle-menu .menu-container {
    grid-area: header-nav-area;
  }
  .global-header__logo img {
    max-width: 100%;
    height: auto;
  }
  /* toggle menu spacing */
  toggle-menu .menu-container {
    --spacing-right: calc(var(--header-padding-x, 10px) * -0.7);
    --spacing-top: -0.7rem;
    /* --padding-top: 3.5rem; */
  }
  toggle-menu .menu-container {
    --spacing-right: calc(var(--header-padding-x, 10px) * -0.7);
    --spacing-top: calc(var(--header-padding-x, 10px) * -0.7);
    --padding-top: 3.5rem;
  }
}

/* =====================================
    HEADER LAYOUT - LARGE (desktop flex-layout)
*/
@media (min-width: 951px) {
  /* content container */
  .global-header__content-container {
    display: flex;
    gap: 2.2%;
  }
  .global-header__logo {
    flex-basis: 42%;
  }
  .global-header__logo img {
    height: 100%;
    object-fit: fill;
  }
  .global-header__nav-container {
    flex-basis: 58%;
    --button-height: 100%;
  }
  /* pb container */
  .global-header__tagline-container {
    display: flex;
    align-items: flex-start;
    height: var(--pb-container-height);
  }
  /* toggle menu spacing */
  toggle-menu .menu-container {
    --spacing-right: calc(var(--header-padding-x, 10px) * -0.7);
    --spacing-top: calc(var(--header-padding-x, 10px) * -0.7);
    --padding-top: 3.5rem;
  }
}

/* =====================================
    HEADER LAYOUT ZOOMED-IN (accessibility-fix för hög inzoomning - small screens)
*/
@media (max-width: 310px) {
  .global-header {
    position: static;
  }
  .global-header__nav-container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5em;
    height: fit-content;
  }
  .global-header .nav-button {
    align-self: stretch;
    min-width: 100%;
    order: 2;
  }
}

/* =====================================
   HEADER: SCROLL ANIMATION - SMALL (mobile)
*/
@media (max-width: 950px) {
  .global-header {
    /* Calculate the height of logo + padding-top.  */
    --total-padding-x: calc(var(--header-padding-x) * 2);
    --logo-width: min(
      calc(100cqw - var(--total-padding-x)),
      var(--page-content-centered-maxwidth)
    );
    --logo-height: calc(var(--logo-width) / 8.5); /* logo aspect-ratio: 8.5:1 */
    --translateY: calc((var(--logo-height) + var(--header-padding-y)) * -1);
  }
  .global-header.header-scrolled {
    transform: translateY(var(--translateY));
  }
  /* .global-header.header-scrolled:not(:focus-within) {
    transform: translateY(var(--translateY));
  } */
  @media (prefers-reduced-motion: no-preference) {
    .global-header {
      transition: transform 0.4s ease-out;
    }
  }
}

/* ====================================
   HEADER SCROLL ANIMATION - LARGE (desktop)
*/
@media (min-width: 951px) {
  .global-header__content-container {
    position: relative;
    z-index: 2;
  }
  .global-header__tagline-container {
    position: relative;
    z-index: 1;
  }
  .pb-style-primary.pb-arrow-up {
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .global-header,
    .global-header__content-container {
      transition: transform 0.4s ease;
    }
    .pb-style-primary.pb-arrow-up {
      transition: opacity 0.2s ease;
    }
  }

  /* Scrollad state */
  .header-scrolled.global-header {
    /* flyttar upp hela headern lika mycket som rad 2:s höjd */
    transform: translateY(calc(-1 * var(--pb-container-height, 3em)));
  }
  .header-scrolled .global-header__content-container {
    /* kompenserar rörelsen så att första raden står kvar visuellt (genom att åka ned lika mycket) */
    transform: translateY(var(--pb-container-height, 3em));
  }
  .header-scrolled .pb-style-primary.pb-arrow-up {
    opacity: 0;
    pointer-events: none;
  }
}

/* ====================================
   HEADER SCROLL (landscape mobile fix and heigh zoom level)
   - Hide the header completely when scrolling on mobile in orientation landscape or
     when zoomed in so much that the height is less than 500px
*/
@media (max-height: 500px) and (orientation: landscape) {
  .global-header {
    position: static;
    transform: none;
  }
}

/*  ====================================
    HEADER LAYOUT: NAV-CONTAINER (all screen sizes)
*/
.global-header__nav-container {
  display: flex;
  column-gap: 0.5em;
  align-items: center;
}
.global-header .icon-button {
  width: auto;
  height: 100%;
}
toggle-menu {
  margin-left: auto;
}

/*  ====================================
    (mobile adjustments)
    - more space for button-text on mobile
*/
@media (max-width: 389px) {
  .global-header .nav-button {
    flex-grow: 1;
    padding-inline: 0.25em;
  }
  toggle-menu {
    margin-left: none;
  }
}

/* ====================================
    HEADER: LOGO
*/
.global-header__logo img {
  object-fit: contain;
  display: block;
}

/* ==================================== 
    VENUES COUNTER (base styling before loaded)
*/
saved-venues-counter {
  display: grid;
  place-items: center;
  width: 100%;
}
saved-venues-counter svg {
  /* heart icon */
  width: 2.75rem; /* 44px */
  height: 2.75rem; /* 44px */
  color: var(--color-heart-bg-light, #e9e9e9);
  stroke: var(--color-header-stroke);
}
@keyframes heart-pulse {
  10% {
    transform: scale(0.9);
  }
}

/* ====================================
    HEADER, NAV-TOGGLE: Toggle button och ikon (hamburger)
    - se också webbkomponent: toggle-menu (för styling av själva menyn och öppna/stäng-animation av hamburgerikonen, se toggle-menu.css)
*/

.global-header__nav-toggle-button {
  z-index: 20;
  max-width: 55px;
}
.global-header__nav-toggle-icon {
  stroke-linecap: round;
  stroke: var(--color-header-stroke);
  --icon-button_stroke-width: calc(var(--border-width-thin) * 1.16);
}

/* ==================================== 
    Header-pratbubbla: Pratbubbla i headern
*/

.global-header__tagline-container {
  background-color: var(--color-header-bg);
  text-wrap: nowrap;
  --pb-arrow-left-position: 25%;
  --pb-padding: 0.5rem 1rem;
}
.global-header__tagline-container p {
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.5px;
  font-size: 1.8rem;
  font-weight: bold;
}

/* 
*********************************************************
  12: FOOTER
*********************************************************
*/

/* == STYLING == */

.site-footer {
  background-color: var(--color-bg-contrast, #4d4d4d);
  color: var(--color-text-contrast1, #fff);
  padding-bottom: var(--space-3x);
}
.site-footer__nav h3 {
  font-size: var(--fs-h3);
  font-family: var(--fontstack-heading, sans-serif);
  font-weight: normal;
  font-style: normal;
  color: #fff;
}
.site-footer__nav a {
  display: block;
  text-decoration: none;
  border: 2px solid var(--color-text-contrast1, #fff);
  border-radius: var(--border-radius);
  font-size: var(--fs-large);
  font-family: var(--fontstack-navlink, sans-serif);
  color: var(--color-text-contrast1, #fff);
}

/* == LAYOUT & SPACING - COLUMNS == */

.site-footer__columns-wrapper {
  width: var(--page-content-full-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding-inline: var(--page-padding-x);
  padding-block-start: var(--page-padding-y);
  padding-block-end: calc(var(--page-padding-y) + var(--page-content-padding));
}
/* Layout för bredare skärmar */
@media (min-width: 700px) {
  .site-footer__columns-wrapper {
    flex-direction: row;
    justify-content: space-between;
  }
  .site-footer__column {
    flex: 1 1 0;
  }
}

/* == LAYOUT & SPACING - NAV segment == */

.site-footer__nav {
  padding: var(--page-content-padding, 10px);
}
.site-footer__nav h3 {
  margin-block: var(--page-content-padding, 10px);
  line-height: 1.2;
}
.site-footer__nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--page-content-padding, 10px);
}
.site-footer__nav a {
  display: block;
  padding: var(--page-content-padding, 10px);
  line-height: 1.2;
}

/* == Performance == */
@supports (contain: layout paint) {
  .site-footer {
    contain: layout paint;
  }
}
@supports (content-visibility: auto) and (contain-intrinsic-height: auto) {
  .site-footer {
    content-visibility: auto;
    contain: none;
    contain-intrinsic-height: auto 88.5rem; /* 1416px */
  }
  @media (min-width: 700px) {
    .site-footer {
      contain-intrinsic-height: auto 30.25rem; /* 484px */
    }
  }
}