/* =====================================================
   RESPONSIVE.CSS — Mobile-first
   Breakpoints: 480 · 768 · 1024 · 1280
   ===================================================== */

/* === BASE: alt er mobil === */
/* Max mobil-bredde: 480px */

/* === 480px+ (Store telefoner / landscape) === */
@media (min-width: 480px) {
  .cookie-banner__inner {
    flex-direction: row;
  }
}

/* === 768px+ (Tablet / desktop) === */
@media (min-width: 768px) {
  :root {
    --header-height: 96px;
  }

  /* Vis desktop-nav, skjul hamburger */
  .hamburger { display: none !important; }

  .site-nav {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
  }

  .nav-list {
    flex-direction: row !important;
    align-items: center !important;
  }

  .nav-link {
    font-size: var(--text-sm) !important;
    padding: 0.5rem 0.875rem !important;
  }

  .mobile-nav-cta {
    display: none !important;
  }

  .header-cta {
    display: inline-flex !important;
  }

  .lang-code {
    display: inline !important;
  }
}

/* === 1024px+ (Desktop) === */
@media (min-width: 1024px) {
  :root {
    --header-height: 104px;
  }

  .section-hero {
    padding-top: calc(var(--header-height) + clamp(3rem, 7vw, 5rem));
  }
}

/* === 1280px+ (Bred desktop) === */
@media (min-width: 1280px) {
  .container {
    padding-inline: 5rem;
  }
}

/* =====================================================
   MAX 767px — Mobil overrides
   ===================================================== */

@media (max-width: 767px) {
  :root {
    --header-height: var(--header-height-mobile);
  }

  /* Hamburger synlig */
  .hamburger {
    display: flex !important;
  }

  /* Mobile nav — slide ind fra højre */
  .site-nav {
    position: fixed !important;
    top: var(--header-height-mobile) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--bg-white) !important;
    padding: 1.5rem var(--container-padding) 2rem !important;
    transform: translateX(100%) !important;
    transition: transform var(--transition-base) !important;
    overflow-y: auto !important;
    z-index: 800 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .site-nav.is-open {
    transform: translateX(0) !important;
  }

  .nav-list {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.25rem !important;
  }

  .nav-link {
    font-size: var(--text-lg) !important;
    padding: 0.875rem 1rem !important;
    border-radius: var(--radius-md);
  }

  /* CTA i header skjult — vises i mobilmenu i stedet */
  .header-cta {
    display: none !important;
  }

  /* Sprogkode skjules, kun flag */
  .lang-code {
    display: none !important;
  }

  /* Mobile nav CTA synlig */
  .mobile-nav-cta {
    display: block !important;
  }

  .mobile-nav-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Forhindre body-scroll når mobilmenu er åben */
  body.nav-open {
    overflow: hidden;
  }

  /* Cookie banner stables */
  .cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .cookie-banner__actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Hero top-padding på mobil */
  .section-hero {
    padding-top: calc(var(--header-height-mobile) + clamp(2rem, 8vw, 3.5rem));
  }
}

/* === MAX 479px (Små telefoner) === */
@media (max-width: 479px) {
  .cookie-banner__actions {
    flex-direction: column;
  }

  .cookie-banner__actions .btn {
    width: 100%;
    justify-content: center;
  }
}