/* Milo sticker layer: the homepage's visual language (ink outlines, cream paper,
   gold primary, hard shadows) applied to the shared components on every site-ui page.
   Injected last by scripts/lib/site-refinement.mjs. The old theme layers set these
   properties with !important, so this layer does too, with selectors that stay below
   the homepage hero and the Milo sections (they carry their own, stronger rules). */

html body.site-ui {
  --st-ink: #172033;
  --st-cream: #fff8ec;
  --st-gold: #fbbf24;
  --st-blue: #2563eb;
  --st-muted: #4a556b;
}

/* ---------- buttons ---------- */
/* Buttons: several pages pin their primary button with ID-level !important rules
   (e.g. main#main-content .mb-btn-primary). The :is(.site-ui, #st-*) wrappers match every
   site-ui body but count as two IDs, so the shared button look wins without per-page fixes. */
html body.site-ui:is(.site-ui, #st-a):is(.site-ui, #st-b) :is(.mb-btn, .placement-button) {
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 2.75rem !important;
  height: auto !important;
  padding: 0.7rem 1.15rem !important;
  border: 2.5px solid var(--st-ink) !important;
  border-radius: 999px !important;
  box-shadow: 3px 4px 0 var(--st-ink) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease !important;
}

/* The frame needs both inner padding and space between neighbouring shadows.
   Keep each page's layout and hidden states; only normalize action spacing. */
html body.site-ui.site-ui :is(.guide-cta-row, .guide-step__actions, .hero-actions, .launch-actions, .section-actions, .urgent-branch__actions, .city-hero__actions, .institutioner-hub-hero__actions, .guides-hub-hero__actions, .startklar-hero__actions, .starter-packs-hero__actions, .cookie-actions) {
  row-gap: 0.9rem !important;
  column-gap: 0.9rem !important;
}

html body.site-ui .mb-btn > svg {
  flex-shrink: 0;
}

/* Small filters and text actions keep their quieter role, with a full touch
   target and room for labels instead of inheriting cramped browser padding. */
html body.site-ui main :is(.popular-cities__chip, .offering-chip, .map-filter-btn, .startklar-type-pill, .pathfinder-kommune-card, .affiliate-card__need-button, #login-forgot-password, #reset-map-btn) {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  min-height: 2.75rem !important;
  padding: 0.55rem 0.8rem !important;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

html body.site-ui:is(.site-ui, #st-a):is(.site-ui, #st-b) :is(.mb-btn.mb-btn-primary, .placement-button--primary) {
  background: var(--st-gold) !important;
  color: var(--st-ink) !important;
}

html body.site-ui:is(.site-ui, #st-a):is(.site-ui, #st-b) :is(.mb-btn.mb-btn-secondary, .mb-btn.mb-btn-soft, .mb-btn.mb-btn-outline, .placement-button:not(.placement-button--primary)) {
  background: var(--st-cream) !important;
  color: var(--st-ink) !important;
}

html body.site-ui:is(.site-ui, #st-a):is(.site-ui, #st-b) .guide-step__actions > .mb-btn[data-plan-cta] {
  background: var(--st-gold) !important;
}

html body.site-ui:is(.site-ui, #st-a):is(.site-ui, #st-b) :is(.mb-btn, .placement-button):hover {
  transform: translate(-1px, -2px);
  box-shadow: 4px 6px 0 var(--st-ink) !important;
}

html body.site-ui:is(.site-ui, #st-a):is(.site-ui, #st-b) :is(.mb-btn, .placement-button):active {
  transform: translate(3px, 4px);
  box-shadow: 0 0 0 var(--st-ink) !important;
}

html body.site-ui:is(.site-ui, #st-a):is(.site-ui, #st-b) :is(.mb-btn, .placement-button):focus-visible {
  outline: 3px solid var(--st-blue) !important;
  outline-offset: 3px !important;
}

html body.site-ui:is(.site-ui, #st-a):is(.site-ui, #st-b) :is(.mb-btn, .placement-button)[disabled],
html body.site-ui:is(.site-ui, #st-a):is(.site-ui, #st-b) :is(.mb-btn, .placement-button)[aria-disabled="true"] {
  opacity: 0.55;
  box-shadow: 1px 1px 0 var(--st-ink) !important;
  transform: none;
}

/* plain submit buttons on app pages (login, register, forms) */
html body.site-ui.app-page:is(.site-ui, #st-a):is(.site-ui, #st-b) main button[type="submit"]:not(.mb-btn):not([class*="leaflet"]):not([data-milo-agent-waitlist] *) {
  border: 2.5px solid var(--st-ink) !important;
  border-radius: 999px !important;
  background: var(--st-gold) !important;
  box-shadow: 3px 4px 0 var(--st-ink) !important;
  color: var(--st-ink) !important;
  font-weight: 800 !important;
}

/* ---------- kickers ---------- */
html body.site-ui.site-ui :is(.eyebrow, .section-kicker, .placement-kicker):not(.milo-journey *):not(.milo-agent *):not(.milo-money *) {
  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important;
  justify-self: start !important;
  align-self: flex-start !important;
  padding: 0.28rem 0.7rem 0.3rem !important;
  border: 2px solid var(--st-ink) !important;
  border-radius: 999px !important;
  background: var(--st-gold) !important;
  box-shadow: 2px 2px 0 var(--st-ink) !important;
  color: var(--st-ink) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.25 !important;
  transform: rotate(-1.5deg);
}

/* ---------- cards ---------- */
html body.site-ui.site-ui :is(.soft-card, .guide-card, .pack-topic__card, .guide-faq, .ec-luxury-card, .book-card, .faq-card) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border: 2.5px solid var(--st-ink) !important;
  border-radius: 18px !important;
  box-shadow: 5px 6px 0 var(--st-ink) !important;
}

html body.site-ui.site-ui a:is(.soft-card, .guide-card) {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

html body.site-ui.site-ui a:is(.soft-card, .guide-card):hover {
  transform: translate(-2px, -3px);
  box-shadow: 7px 9px 0 var(--st-ink) !important;
}

/* ---------- form fields ---------- */
html body.site-ui.site-ui main :is(input:is([type="text"], [type="email"], [type="search"], [type="number"], [type="tel"], [type="password"], [type="date"], :not([type])), select, textarea):not([data-milo-agent-waitlist] *):not([name="website"]) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border: 2px solid var(--st-ink) !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 rgba(23, 32, 51, 0.06) !important;
}

html body.site-ui.site-ui main :is(input:is([type="text"], [type="email"], [type="search"], [type="number"], [type="tel"], [type="password"], [type="date"], :not([type])), select):not([data-milo-agent-waitlist] *):not([name="website"]) {
  min-height: 2.75rem !important;
}

html body.site-ui.site-ui main :is(input, select, textarea):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.7) !important;
}

/* ---------- headings ---------- */
html body.site-ui.site-ui main h1:not(.milo-journey *):not(.milo-agent *):not(.milo-money *):not(.hero-premium *) {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.site-ui :is(.mb-btn, .placement-button, .soft-card, .guide-card) { transition: none !important; }
  html body.site-ui:is(.site-ui, #st-a):is(.site-ui, #st-b) :is(.mb-btn, .placement-button, .soft-card, .guide-card):is(:hover, :active) { transform: none !important; }
}

/* ---- Header: clean and light, the same structure on every page ----
   A full-width frosted bar with a hairline, the menu centred and vertically aligned, the active
   page marked quietly, and "Log ind" as a plain white button. The menu shows from 1024 px, so
   laptops get it too, and anchor links stop below the bar. The homepage gives the same header a
   blue glass look in home-canvas.css. The prefix counts as two ids because older header layers
   use !important. */
html:has(body.site-ui) { scroll-padding-top: 5rem; }

html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-header {
  background: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border: 0 !important;
  border-bottom: 1px solid rgba(20, 33, 61, 0.08) !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-header__inner {
  max-width: 76rem !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 3vw, 32px) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-header__bar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  height: 64px !important;
  padding: 0 !important;
  gap: 16px;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-brand { justify-self: start; color: #14213d !important; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-brand-name { color: #14213d !important; font-weight: 800 !important; letter-spacing: -0.01em; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-header__tools { justify-self: end; }

html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-nav { gap: 2px !important; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-nav .nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #3b4558 !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-nav .nav-btn .nav-btn-label { display: inline !important; height: auto !important; line-height: 1 !important; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-nav .nav-btn::after { content: none !important; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-nav .nav-btn:hover { background: rgba(20, 33, 61, 0.05) !important; color: #14213d !important; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-nav .nav-btn:is(.active, [aria-current="page"]) {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #14213d !important;
  font-weight: 700 !important;
}

html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .nav-login-link {
  align-items: center !important;
  height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(20, 33, 61, 0.16) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.06) !important;
  color: #14213d !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .nav-login-link:hover { border-color: rgba(20, 33, 61, 0.4) !important; }

html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu-btn {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 33, 61, 0.14) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #14213d !important;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu {
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(20, 33, 61, 0.08) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 30px -18px rgba(20, 33, 61, 0.28) !important;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu nav { padding: 8px clamp(12px, 3vw, 28px) 16px !important; gap: 2px !important; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-link {
  min-height: 52px;
  padding: 0 14px !important;
  border-radius: 12px !important;
  color: #14213d !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-link:hover { background: rgba(20, 33, 61, 0.05) !important; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-link:is(.active, [aria-current="page"]) { background: rgba(37, 99, 235, 0.1) !important; font-weight: 700 !important; }

html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-header :is(a, button):focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45) !important;
  outline-offset: 2px !important;
}

@media (min-width: 1024px) {
  html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-nav { display: flex !important; }
  html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .nav-login-link { display: inline-flex !important; }
  html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu-btn,
  html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu { display: none !important; }
}
@media (max-width: 1023.98px) {
  html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-header__bar { grid-template-columns: 1fr auto !important; height: 60px !important; }
  html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) .site-nav { display: none !important; }
}

/* Mobile menu groups: a quiet heading per group and one line under each item */
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-group {
  margin: 12px 14px 4px;
  color: #6b7488;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-group:first-child { margin-top: 4px; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-link:has(.mobile-nav-link__desc) {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-content: center;
  column-gap: 12px;
  row-gap: 2px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-link:has(.mobile-nav-link__desc) > :is(.mobile-nav-link__tag, .nav-badge) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-link > .mobile-nav-link__label { grid-column: 1; grid-row: 1; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-link > .mobile-nav-link__desc { grid-column: 1; grid-row: 2; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-link__label { font-weight: 700; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-link__desc { color: #6b7488; font-size: 0.86rem; font-weight: 500; }
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu .mobile-nav-link__tag {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff1c7;
  color: #7a5400;
  font-size: 0.72rem;
  font-weight: 800;
}
html body.site-ui:is(.site-ui, #sh-a):is(.site-ui, #sh-b) #mobile-menu nav { max-height: calc(100vh - 80px); overflow-y: auto; }