/* Tillämpas bara i kontrollpanelens förhandsvisning eller på index.html?demo=1.
   Den vanliga hemsidan fortsätter använda styles.css, topbar.css och bokadirekt.css. */
html[data-customized] {
  --background: var(--custom-background);
  --surface-pink: var(--custom-surface);
  --surface-turquoise: var(--custom-surface-alt);
  --accent: var(--custom-accent);
  --accent-hover: var(--custom-accent-hover);
  --accent-soft: var(--custom-surface-alt);
  --text: var(--custom-text);
  --text-muted: var(--custom-muted);
  --brand-ink: var(--custom-heading);
  --border: var(--custom-border);
  --pink-border: var(--custom-border);
  --focus: var(--custom-focus);
  --radius: var(--custom-radius);
  --button-radius: var(--custom-button-radius);
  --font: var(--custom-font-body);
  --font-heading: var(--custom-font-heading);
  font-size: var(--custom-base-font);
  scroll-padding-top: calc(var(--custom-header-height, 140px) + 20px);
}
html[data-customized] body { overflow-wrap: anywhere; }
html[data-customized] .wrap { width: min(var(--custom-content-width), calc(100% - clamp(24px, 5vw, 64px))); }
html[data-customized] h1, html[data-customized] h2 { color: var(--custom-heading); }
html[data-customized] .intro h1 {
  font-size: clamp(1rem, var(--custom-heading-size), 8vw);
  max-width: 100%;
}
html[data-customized] h2 { font-size: clamp(1rem, var(--custom-section-heading-size), 7vw); }
html[data-customized] .intro {
  padding: min(var(--custom-intro-padding), 5vw);
  gap: min(var(--custom-intro-gap), 6vw);
  border-width: var(--custom-border-width);
}
html[data-customized] .intro-copy { max-width: 100%; }
html[data-customized] .intro-logo { width: min(100%, var(--custom-hero-logo-width)); }
html[data-customized][data-hero-logo="false"] .intro-logo { display: none; }
html[data-customized] #intro-image {
  height: var(--custom-image-height);
  box-shadow: 10px 10px 0 var(--custom-image-shadow);
}
html[data-customized] .page-section { padding-block: var(--custom-section-gap); }
html[data-customized] .button,
html[data-customized] .category,
html[data-customized] .bokadirekt-button {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: var(--custom-button-padding-y) var(--custom-button-padding-x);
  border-width: var(--custom-border-width);
  border-radius: var(--custom-button-radius);
  font-size: var(--custom-button-font);
  overflow-wrap: anywhere;
}
html[data-customized] .button-primary,
html[data-customized] .category[aria-pressed="true"] { color: var(--custom-button-text); }
html[data-customized] .button-secondary { border-color: var(--custom-secondary-border); }
html[data-customized] .category-tabs { border-width: var(--custom-border-width); }
html[data-customized] .section-heading .small { color: var(--custom-muted); background: var(--custom-surface-alt); }
html[data-customized] .service-list { background: var(--custom-card-bg); border-width: var(--custom-border-width); }
html[data-customized] .service-row { border-bottom-width: var(--custom-border-width); }
html[data-customized] .service-row:last-child { border-bottom: 0; }
html[data-customized] .service-row > * { min-width: 0; }
html[data-customized] .service-price { white-space: normal; }
html[data-customized] .service-empty { margin: 0; padding-block: 24px; }
html[data-customized] .about { border-block-width: var(--custom-border-width); }
html[data-customized] .contact-grid > div { background: var(--custom-card-bg); border-width: var(--custom-border-width); }
html[data-customized] .contact-grid > div + div { background: var(--custom-surface-alt); }
html[data-customized] .details-list > div { border-color: var(--custom-border); border-bottom-width: var(--custom-border-width); }
html[data-customized] .details-list > div:last-child { border-bottom: 0; }
html[data-customized] .details-list dt { flex-shrink: 1; }
html[data-customized] .instagram-link { background: transparent; }
html[data-customized] .site-footer {
  --footer-background: var(--custom-footer-bg);
  --footer-text: var(--custom-footer-text);
  --footer-muted: var(--custom-footer-muted);
  background: var(--footer-background);
  color: var(--footer-text);
  border-color: var(--custom-border);
  border-top-width: var(--custom-border-width);
}
html[data-customized] .text-link { border-bottom-color: var(--custom-secondary-border); }
html[data-customized] .site-header {
  color: var(--custom-header-text);
  background-color: var(--custom-header-bg);
  border-color: var(--custom-header-border);
  border-width: var(--custom-border-width);
  box-shadow: inset 0 1px rgb(255 255 255 / .025), 0 12px 36px rgb(0 0 0 / var(--custom-header-shadow));
}
html[data-customized][data-header-texture="false"] .site-header { background-image: none; }
html[data-customized][data-header-sticky="false"] .site-header { position: relative; }
html[data-customized][data-header-sticky="false"] { scroll-padding-top: 20px; }
html[data-customized] .header-inner,
html[data-customized] .mobile-nav { color: var(--custom-header-text); }
html[data-customized] .header-inner { gap: 8px 20px; }
html[data-customized] .brand { flex: 0 1 var(--custom-logo-width); min-width: 0; max-width: 45%; }
html[data-customized] .brand-logo { width: min(100%, var(--custom-logo-width)); }
html[data-customized] .header-actions { flex-wrap: wrap; max-width: 100%; min-width: 0; }
html[data-customized] .header-book { max-width: 240px; }
html[data-customized] .desktop-nav { flex-wrap: wrap; justify-content: center; gap: 8px 22px; min-width: 0; }
html[data-customized] .desktop-nav a:hover,
html[data-customized] .mobile-nav a:hover { color: var(--custom-header-text); }
html[data-customized] .site-header a:focus-visible,
html[data-customized] .site-header button:focus-visible { outline-color: var(--custom-focus); }
html[data-customized] .menu-toggle { flex-shrink: 0; }
html[data-customized] .menu-toggle span { background: var(--custom-header-text); }
html[data-customized] .mobile-nav { border-color: var(--custom-header-border); }
html[data-customized] .booking-contact {
  color: var(--custom-booking-text);
  background: var(--custom-booking-bg);
  border-color: var(--custom-booking-bg);
  border-width: var(--custom-border-width);
}
html[data-customized] .booking-contact p { color: var(--custom-booking-text); }
html[data-customized] .booking-contact h3 { font-size: min(var(--custom-section-heading-size), 1.9rem); }
html[data-customized] .bokadirekt-button {
  color: var(--custom-booking-button-text);
  background: var(--custom-booking-button-bg);
  border-color: var(--custom-booking-button-bg);
}
html[data-customized] .bokadirekt-button:hover { filter: brightness(.97); }
html[data-customized] .bokadirekt-button:focus-visible { outline-color: var(--custom-focus); }
.design-demo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 20px;
  padding: 10px 18px;
  background: #eaf2ee;
  color: #24433a;
  border-bottom: 1px solid #b8cdc4;
  font: 14px/1.5 'Segoe UI', Arial, sans-serif;
}
.design-demo-banner a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.design-demo-banner a:focus-visible { outline: 3px solid #24433a; outline-offset: 3px; }
.design-demo-warning { flex-basis: 100%; text-align: center; }
html[data-customized] p[data-content],
html[data-customized] .service-row p,
html[data-customized] #contact-address { white-space: pre-line; }
@media (max-width: 760px) {
  html[data-customized] .intro h1 { font-size: clamp(1rem, var(--custom-heading-mobile-size), 10vw); }
  html[data-customized] h2 { font-size: clamp(1rem, var(--custom-section-heading-size), 9vw); }
  html[data-customized] .intro { padding: min(var(--custom-intro-padding), 6vw); gap: min(var(--custom-intro-gap), 8vw); }
  html[data-customized] #intro-image { height: min(var(--custom-image-height), 90vw); box-shadow: 7px 7px 0 var(--custom-image-shadow); }
  html[data-customized] .brand { flex-basis: var(--custom-logo-mobile-width); max-width: 42%; }
  html[data-customized] .brand-logo { width: min(100%, var(--custom-logo-mobile-width)); }
  html[data-customized] .header-inner { gap: 8px; }
  html[data-customized] .header-actions { gap: 2px; }
  html[data-customized] .header-book { padding-inline: min(var(--custom-button-padding-x), 16px); max-width: min(220px, 52vw); }
  html[data-customized] .category { flex: 1 1 auto; }
}