/* Basestiler fra prototypenes <helmet><style>-blokker, pluss hover/focus og
   responsivitet som prototypene løste med style-hover-attributter og
   JS-brekkpunkter (kompakt ≤1024px, telefon ≤480px). */

html, body { margin: 0; padding: 0; background: #FFFFFF; }
/* iOS Safari: ikke blås opp tekst i landskapsmodus */
html { -webkit-text-size-adjust: 100%; }
/* Hindre horisontal scroll uten å bryte position: sticky (overflow-x: hidden
   på sidewrapperen gjorde at headeren aldri festet seg). */
body { color: #1C180D; overflow-x: hidden; overflow-x: clip; }
a { color: #6F5C2A; text-decoration: none; }
a:hover { color: #1C180D; }
::selection { background: #FFE7A0; color: #1C180D; }
input, button, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { color: inherit; }

/* Nav-lenker: landingssiden hover mot gull, undersidene mot mørk gull */
.nav-link-home:hover { color: #C4B075 !important; }
.nav-link-sub:hover { color: #6F5C2A !important; }

/* Mørk CTA («Bestill demo») */
.cta-dark-home:hover { background: #332C16 !important; color: #C4B075 !important; }
.cta-dark-sub:hover { background: #332C16 !important; color: #FFE7A0 !important; }

/* Landvelger */
.country-btn:hover { border-color: rgba(28,24,13,0.34) !important; }
.country-pop { display: none; }
.js-country.open .country-pop { display: flex; }
.country-item { display: block; padding: 9px 14px; border-radius: 9px; font-size: 14.5px; cursor: pointer; color: #4A463C; text-decoration: none; }
.country-item.active { background: #F5F5F5; color: #1C180D; font-weight: 500; }

/* Skjemaer */
.dark-input:focus { border-color: #C4B075 !important; }
.gold-btn-contact:hover { background: #FFE7A0 !important; }
.cx-input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; border-radius: 6px; border: 1px solid rgba(28,24,13,0.2); background: #FFFFFF; color: #1C180D; font-family: 'Die Grotesk A', sans-serif; font-size: 15px; outline: none; }
.cx-input:focus { border-color: #1C180D; }

/* Fotter og artikkel */
.footer-link:hover { color: #1C180D !important; }
.contact-mail:hover { color: #6F5C2A !important; }
.listen-btn:hover { border-color: rgba(28,24,13,0.34) !important; }

/* Produktfaner */
.tab-pill {
  padding: 12px 22px; border-radius: 8px; font-size: 15px; font-weight: 500;
  white-space: nowrap; cursor: pointer; border: 1.5px solid rgba(28,24,13,0.24);
  background: transparent; color: #1C180D; font-family: inherit;
  transition: background 180ms cubic-bezier(.22,.61,.36,1), color 180ms cubic-bezier(.22,.61,.36,1), border-color 180ms cubic-bezier(.22,.61,.36,1);
}
.tab-pill[aria-selected="true"] { background: #1C180D; border-color: #1C180D; color: #FFE7A0; }
/* Inline display-stiler skal aldri overstyre hidden-attributtet */
[hidden] { display: none !important; }

/* FAQ (details/summary — innholdet ligger i HTML-en, synlig for søkemotorer) */
details.faq { background: #FFFFFF; border: 1px solid rgba(28,24,13,0.12); border-radius: 14px; overflow: hidden; }
details.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; cursor: pointer; font-size: 16px; font-weight: 500; list-style: none;
}
details.faq summary::-webkit-details-marker { display: none; }
.faq-sign { font-size: 20px; color: #6F5C2A; line-height: 1; }
.faq-sign::before { content: "+"; }
details[open] .faq-sign::before { content: "−"; }

/* «Liquid glass»: gjennomskinnelig sticky topbar med bakgrunnsblur.
   Nettlesere uten backdrop-filter beholder den solide hvite bakgrunnen. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .js-header {
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .js-header .mobile-menu {
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

/* Mobilmeny og burger */
.mobile-menu { display: none; }
.js-header.menu-open .mobile-menu { display: flex; }
.mobile-menu a[data-close-menu] { padding: 14px 4px; font-size: 17px; font-weight: 500; color: #1C180D; border-bottom: 1px solid rgba(28,24,13,0.08); }
.mobile-menu a[data-close-menu]:last-of-type { border-bottom: none; }
.js-header.menu-open .js-burger .burger-l:first-child { transform: translateY(7px) rotate(45deg); }
.js-header.menu-open .js-burger .burger-m { opacity: 0; }
.js-header.menu-open .js-burger .burger-b { transform: translateY(-7px) rotate(-45deg); }

/* Hero-grid: to kolonner bredt, én kolonne smalt. Ved én kolonne flytter
   main.js demoskjemaet ned under mockupen, så rekkefølgen blir
   tittel → bilde → skjema (prototypen la bildet under hele tekstkolonnen). */
.hero-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* Brekkpunkter: bred nav ≤1024px erstattes av burger; landetikett skjules ≤480px */
@media (max-width: 1024px) {
  .only-wide { display: none !important; }
  .only-compact { display: flex !important; }
}
@media (max-width: 480px) {
  .country-label-txt { display: none; }
  /* iOS Safari auto-zoomer inn på felter med skrift under 16px */
  .dark-input, .cx-input, .js-banner-select { font-size: 16px !important; }
  /* Landforslagsbanner på telefon: kontrollene tar full bredde,
     landsfeltet flekser i stedet for fast minimumsbredde */
  .banner-controls { width: 100%; }
  .banner-controls > span { flex: 1 1 auto; }
  .js-banner-select { min-width: 0 !important; width: 100%; }
}