/* Min Digitale Arv - Premium Header (TwentyTwentyFive/Block Theme) */
/* Kompakt header: TT5 lægger ofte stor vertikal padding på template-part + groups */

:root {
  --mda-content-max: 1200px;
  --mda-gutter-mobile: 8px;
  --mda-content-outer-mobile: calc(100% - (var(--mda-gutter-mobile, 8px) * 2));
  --mda-header-nav-font-size: 16px;
  --mda-header-nav-pad-y: 10px;
  --mda-header-nav-pad-x: 8px;
  --mda-header-logo-width: clamp(300px, 24vw, 340px);
  --mda-header-logo-height: clamp(64px, 5.1vw, 72px);
  --mda-nav-drawer-width: min(304px, 86vw);
  --mda-nav-drawer-radius: 20px;
  --mda-nav-overlay-bg: rgba(15, 23, 42, 0.44);
}

/* Typografi: matcher mda-typography.css / brødtekst (variabel defineres når tt5 → typography er loadet) */
body:not(.wp-admin) header.wp-block-template-part,
body:not(.wp-admin) header {
  font-family: var(--mda-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* -----------------------------------------------------------------
   Samme placering på alle sider: sticky topbar + ens indre bredde
   (matcher MDA max ~1200px / gutters som landing/hjælp)
   ----------------------------------------------------------------- */
body:not(.wp-admin) header.wp-block-template-part,
body:not(.wp-admin) header{
  position: sticky;
  top: 0;
  z-index: 10050;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.07);
  /* Undgå at temaets min-height/width hopper mellem skabeloner */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* WordPress admin bar (kun når bruger er logget ind på frontend) */
body.admin-bar:not(.wp-admin) header.wp-block-template-part,
body.admin-bar:not(.wp-admin) header{
  top: 32px;
}

@media screen and (max-width: 782px){
  body.admin-bar:not(.wp-admin) header.wp-block-template-part,
  body.admin-bar:not(.wp-admin) header{
    top: 46px;
  }
}

header.wp-block-template-part,
header{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Kun øverste header-række (undgå at ramme indre flex i navigation m.m.) */
header.wp-block-template-part > .wp-block-group,
header > .wp-block-group{
  padding-block: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Ens vandrette “slot” som øvrige MDA-sider (centreret, samme gutters) */
  max-width: min(var(--mda-content-max), calc(100% - 40px)) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Logo + menu række (TT5: ofte is-layout-flex uden is-horizontal) */
header .wp-block-group.is-layout-flex.is-content-justification-space-between,
header .wp-block-group.is-horizontal.is-content-justification-space-between{
  gap: 16px !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

@media (min-width: 1281px){
  header .wp-block-group.is-layout-flex.is-content-justification-space-between,
  header .wp-block-group.is-horizontal.is-content-justification-space-between{
    flex-wrap: nowrap !important;
  }
}

/* Fjern ekstra lodret “has-global-padding” inde i header — ens top/bund styres af ydre header-række */
header.wp-block-template-part .wp-block-group.has-global-padding{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

header.wp-block-template-part > .wp-block-group > .wp-block-group,
header > .wp-block-group > .wp-block-group{
  width: 100% !important;
}

/* Navigation-blok: mindre luft omkring links */
header .wp-block-navigation{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-self: center !important;
}

header .wp-block-woocommerce-customer-account,
header .wp-block-woocommerce-mini-cart,
header .wc-block-mini-cart {
  align-self: center !important;
  flex-shrink: 0 !important;
}
header .wp-block-navigation .wp-block-navigation__container{
  gap: 0.45rem 1.25rem !important;
  row-gap: 0.35rem !important;
}
header .wp-block-navigation-item{
  margin: 0 !important;
}

/* Logo: TwentyTwentyFive render "wp-block-site-title" som tekst.
   Vi erstatter visuelt teksten med jeres header-logo, så menuen får logoet tilbage. */
header .wp-block-site-title{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
}
header .wp-block-site-title a{
  display:block;
  width: var(--mda-header-logo-width);
  height: var(--mda-header-logo-height);
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  background-image: url('https://min-digitale-arv.dk/wp-content/uploads/2026/03/min-digitale-arv-header-logo.png');
  text-indent: -9999px;
  white-space: nowrap;
}

@media (max-width: 980px){
  :root {
    /* Én rækkehøjde: logo = 85%, ~7.5% luft top + bund (centreret i flex) */
    --mda-header-row-height: clamp(78px, 16vw, 96px);
    --mda-header-logo-height: calc(var(--mda-header-row-height) * 0.85);
    --mda-header-logo-width: min(
      calc(var(--mda-header-logo-height) / 0.213),
      calc(100vw - 92px)
    );
  }

  header.wp-block-template-part > .wp-block-group,
  header > .wp-block-group{
    min-height: 0 !important;
    padding-block: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) !important;
    /* iPhone safe-area: hold logo + burger helt indenfor viewport */
    padding-left: max(var(--mda-gutter-mobile, 8px), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--mda-gutter-mobile, 8px), env(safe-area-inset-right, 0px)) !important;
    max-width: 100% !important;
  }

  header.wp-block-template-part > .wp-block-group,
  header.wp-block-template-part > .wp-block-group > .wp-block-group,
  header.wp-block-template-part > .wp-block-group > .wp-block-group > .wp-block-group,
  header > .wp-block-group,
  header > .wp-block-group > .wp-block-group,
  header > .wp-block-group > .wp-block-group > .wp-block-group,
  header .wp-block-group.is-layout-flex.is-content-justification-space-between,
  header .wp-block-group.is-horizontal.is-content-justification-space-between{
    min-height: var(--mda-header-row-height) !important;
    height: var(--mda-header-row-height) !important;
    display: flex !important;
    align-items: center !important;
    align-content: center !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  header .wp-block-site-title a{
    width: var(--mda-header-logo-width) !important;
    height: var(--mda-header-logo-height) !important;
    background-position: left center !important;
    background-size: contain !important;
  }

  header .wp-block-navigation{
    margin-left: auto !important;
    flex: 0 0 auto !important;
    min-width: 48px !important;
    min-height: var(--mda-header-logo-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  header .wp-block-navigation__responsive-container-open,
  header .wp-block-navigation__responsive-container-close{
    margin: 0 !important;
    position: static !important;
    right: auto !important;
    align-self: center !important;
  }

  /* WP viser vandret menu fra 600px — skjul den indtil der er plads (undgår overlap med logo) */
  header .wp-block-navigation__responsive-container-open{
    display: flex !important;
  }

  header .wp-block-navigation__responsive-container:not(.is-menu-open){
    display: none !important;
  }
}

/* Bred skærm: vandret menu + større logo */
@media (min-width: 981px){
  :root {
    --mda-header-row-height: clamp(78px, 4.8vw, 90px);
    --mda-header-logo-height: calc(var(--mda-header-row-height) * 0.82);
    --mda-header-logo-width: clamp(278px, 23vw, 330px);
  }

  header.wp-block-template-part > .wp-block-group,
  header.wp-block-template-part > .wp-block-group > .wp-block-group,
  header.wp-block-template-part > .wp-block-group > .wp-block-group > .wp-block-group,
  header > .wp-block-group,
  header > .wp-block-group > .wp-block-group,
  header > .wp-block-group > .wp-block-group > .wp-block-group,
  header .wp-block-group.is-layout-flex.is-content-justification-space-between,
  header .wp-block-group.is-horizontal.is-content-justification-space-between{
    min-height: var(--mda-header-row-height) !important;
    height: var(--mda-header-row-height) !important;
    display: flex !important;
    align-items: center !important;
    align-content: center !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  header .wp-block-site-title a{
    width: var(--mda-header-logo-width) !important;
    height: var(--mda-header-logo-height) !important;
    background-position: left center !important;
    background-size: contain !important;
  }

  header .wp-block-navigation{
    margin-left: auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: var(--mda-header-logo-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
    display: block !important;
    position: relative !important;
    width: auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  header .wp-block-navigation__responsive-container-open{
    display: none !important;
  }
}

@media (min-width: 981px) and (max-width: 1160px){
  :root {
    --mda-header-row-height: 78px;
    --mda-header-logo-height: 64px;
    --mda-header-logo-width: clamp(220px, 21vw, 250px);
    --mda-header-nav-font-size: 15px;
    --mda-header-nav-pad-x: 5px;
  }

  header .wp-block-group.is-layout-flex.is-content-justification-space-between,
  header .wp-block-group.is-horizontal.is-content-justification-space-between{
    gap: 14px !important;
  }

  header .wp-block-navigation .wp-block-navigation__container{
    gap: 0.3rem 0.75rem !important;
  }
}

@media (min-width: 1360px){
  :root {
    --mda-header-row-height: 96px;
    --mda-header-logo-height: 82px;
    --mda-header-logo-width: 385px;
  }
}

/* Menu links — større tekst og klikflade */
header .wp-block-navigation a.wp-block-navigation-item__content{
  color: #5f6470;
  font-size: var(--mda-header-nav-font-size);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-decoration: none;
  padding: var(--mda-header-nav-pad-y) var(--mda-header-nav-pad-x) !important;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

header .wp-block-navigation a.wp-block-navigation-item__content:hover{
  color: #111111;
}

/* Active/current item */
header .wp-block-navigation a.wp-block-navigation-item__content[aria-current="page"]{
  color: #111111 !important;
  font-weight: 600 !important;
}

/* WooCommerce customer account: skjul person-ikon (SVG); link/tekst fra blokken vises stadig */
header .wp-block-woocommerce-customer-account svg,
header .wp-block-woocommerce-customer-account .wc-block-customer-account__icon {
  display: none !important;
}

/* Mini-kurv: diskret ikon + badge, matcher menupunkter */
header .wc-block-mini-cart__button {
  align-items: center !important;
  color: #5f6470 !important;
  display: inline-flex !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: var(--mda-header-nav-pad-y) var(--mda-header-nav-pad-x) !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  transition: color 180ms ease, background-color 180ms ease;
}

header .wc-block-mini-cart__button:hover:not([disabled]),
header .wc-block-mini-cart__button:focus-visible {
  color: #111111 !important;
  background: #f1f4fb !important;
}

header .wc-block-mini-cart__icon {
  width: 1.45em !important;
  height: 1.45em !important;
  margin: 0 !important;
}

header .wc-block-mini-cart__amount,
header .wc-block-mini-cart__tax-label {
  display: none !important;
}

header .wc-block-mini-cart__badge {
  background: #2e6cff !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  min-width: 1.35em !important;
  height: 1.35em !important;
  line-height: 1.35em !important;
  box-shadow: 0 0 0 2px #ffffff;
}

/* Drawer over mobilmenu (z-index 100200) */
.wc-block-mini-cart__drawer {
  z-index: 100250 !important;
}

/* Mobil: større hamburger / luk-ikon + overlay-menu matcher hovedmenu */
header .wp-block-navigation__responsive-container-open,
header .wp-block-navigation__responsive-container-close {
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 10px !important;
}

header .wp-block-navigation__responsive-container-open svg,
header .wp-block-navigation__responsive-container-close svg {
  width: 28px !important;
  height: 28px !important;
}

@media (max-width: 1280px) {
  /*
   * Mobilmenu: halvgennemsigtig baggrund + “drawer” fra højre med afrunding —
   * undgår fuld hvid fuldskærm (standard WP navigation overlay).
   */
  header .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100200 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 14px !important;
    margin: 0 !important;
    background: var(--mda-nav-overlay-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box !important;
  }

  header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    position: relative !important;
    width: var(--mda-nav-drawer-width) !important;
    max-width: var(--mda-nav-drawer-width) !important;
    max-height: min(
      calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      720px
    ) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 12px 22px 20px !important;
    background: #ffffff !important;
    border-radius: var(--mda-nav-drawer-radius) !important;
    box-shadow:
      -12px 0 48px rgba(15, 23, 42, 0.12),
      0 20px 50px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid rgba(226, 232, 245, 0.98) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
  }

  header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: relative !important;
    align-self: flex-end !important;
    order: -1 !important;
    margin: -2px -2px 10px 0 !important;
    border-radius: 12px !important;
    background: #f1f4fb !important;
  }

  header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.2rem 0 !important;
    width: 100% !important;
  }

  header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
  }

  header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    width: 100% !important;
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    padding-left: 8px !important;
    margin-top: 4px !important;
  }

  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    a.wp-block-navigation-item__content {
    font-size: calc(var(--mda-header-nav-font-size) + 1px);
    width: 100% !important;
    justify-content: flex-start !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    min-height: 48px !important;
  }
}

/* WooCommerce konto-link: samme størrelse som menupunkter */
header .wp-block-woocommerce-customer-account a.wc-block-customer-account__account-link,
header .wp-block-woocommerce-customer-account a[href] {
  font-size: var(--mda-header-nav-font-size) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  padding: var(--mda-header-nav-pad-y) var(--mda-header-nav-pad-x) !important;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
}

/*
 * WP kan flytte .wp-block-navigation__responsive-container i DOM (ikke under header).
 * Gør menulinks klikbare på touch og undgår at overlay “sluger” første tryk.
 */
@media (max-width: 1280px) {
  .wp-block-navigation__responsive-container.is-menu-open a[href] {
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(46, 108, 255, 0.15);
    position: relative;
    z-index: 6;
  }
}