/**
 * Familieløft — globale responsive standarder (Divi child theme)
 *
 * Mål: smartphones (~360–430px) bruger skærmbredden bedre uden at ændre
 * desktop-design eller Divi Visual Builder.
 *
 * Scoped væk fra Divi Builder (.et-fb / .et-bfb).
 * Breakpoints: Divi 980px + finpudsning 767/576.
 */

/* ========== Design tokens ========== */
:root {
  --fl-gutter-x: 24px;
  --fl-gutter-x-md: clamp(16px, 3.5vw, 20px); /* ≤980px ≈ 90–94% indhold */
  --fl-gutter-x-sm: 12px;                     /* ≤576px ≈ 94% indhold */
  --fl-box-pad: clamp(16px, 4.5vw, 24px);     /* indre padding i visuelle bokse */
  --fl-box-pad-y: clamp(28px, 7.5vw, 44px);   /* top/bund i visuelle bokse */
  --fl-section-y: clamp(32px, 7vw, 56px);     /* blød vertikal loft for sektioner */
  --fl-module-gap: clamp(16px, 3.5vw, 24px);  /* luft mellem stacked kolonner */
  --fl-touch: 44px;
}

@media (max-width: 980px) {
  :root {
    --fl-gutter-x: var(--fl-gutter-x-md);
  }
}

@media (max-width: 576px) {
  :root {
    --fl-gutter-x: var(--fl-gutter-x-sm);
  }
}

/* ========== Side-gutter (section) — bevar fullwidth ========== */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_section:not(.et_pb_fullwidth_section):not(.et_pb_specialty) {
    padding-left: var(--fl-gutter-x) !important;
    padding-right: var(--fl-gutter-x) !important;
  }

  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_row:not(.et_pb_row_fullwidth) {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fjern kun gutter-margen mellem kolonner — behold Builder-padding i kort */
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_column {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Theme Builder header/footer */
  body:not(.et-fb):not(.et-bfb) .et-db #et-boc .et-l--header .et_pb_row:not(.et_pb_row_fullwidth),
  body:not(.et-fb):not(.et-bfb) .et-db #et-boc .et-l--footer .et_pb_row:not(.et_pb_row_fullwidth) {
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.et-fb):not(.et-bfb) .et-db #et-boc .et-l--header .et_pb_section:not(.et_pb_fullwidth_section),
  body:not(.et-fb):not(.et-bfb) .et-db #et-boc .et-l--footer .et_pb_section:not(.et_pb_fullwidth_section) {
    padding-left: var(--fl-gutter-x) !important;
    padding-right: var(--fl-gutter-x) !important;
  }

  /* Fullwidth edge-to-edge */
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_section.et_pb_fullwidth_section,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_fullwidth_header,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_fullwidth_slider,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_row.et_pb_row_fullwidth,
  body:not(.et-fb):not(.et-bfb) .et-db #et-boc .et_pb_section.et_pb_fullwidth_section,
  body:not(.et-fb):not(.et-bfb) .et-db #et-boc .et_pb_row.et_pb_row_fullwidth {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Kun content — ikke også container (ellers dobbelt gutter på H1) */
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_fullwidth_header .header-content {
    padding-left: var(--fl-gutter-x);
    padding-right: var(--fl-gutter-x);
    box-sizing: border-box;
  }
}

/* ========== Vertikal spacing mellem stacked kolonner ========== */
@media (max-width: 980px) {
  /* Stacked columns: naturlig afstand uden dobbelt “tom luft” fra gutter-margins */
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_row .et_pb_column {
    margin-bottom: var(--fl-module-gap);
  }

  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_row .et_pb_column:last-child {
    margin-bottom: 0;
  }
}

/* ========== Kort / farvede bokse (kun visuelle containere) ==========
 * Almindelige tekstmoduler uden baggrund/ramme røres ikke.
 * .fl-box sættes i functions.php når Divi-element har synlig bg/border.
 * ≤980: token erstatter for stor Builder-sidepadding (fx 40px → ~18–26px).
 * >980: Builder-padding uændret.
 */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_row,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_column {
    box-sizing: border-box;
  }

  body:not(.et-fb):not(.et-bfb) #page-container .fl-box,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_column.et_pb_with_background,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_row.et_pb_with_background,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_module.et_pb_with_background,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_with_border,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_cta,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_promo,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_toggle,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_accordion_item,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_pricing_table,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_testimonial {
    box-sizing: border-box;
    padding-left: var(--fl-box-pad) !important;
    padding-right: var(--fl-box-pad) !important;
  }

  /* SoMe-ikoner har ramme (.et_pb_with_border), men er ikke kort — ellers skubbes ikonet ud af rammen */
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_social_media_follow li.et_pb_with_border,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_social_media_follow li a.icon.et_pb_with_border {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Blurb som egen boks — ikke ekstra når den allerede ligger i .fl-box */
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_blurb.et_pb_with_border .et_pb_blurb_content,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_blurb.et_pb_with_background .et_pb_blurb_content {
    box-sizing: border-box;
    padding-left: var(--fl-box-pad);
    padding-right: var(--fl-box-pad);
  }

  body:not(.et-fb):not(.et-bfb) #page-container .fl-box > .et_pb_blurb,
  body:not(.et-fb):not(.et-bfb) #page-container .fl-box > .et_pb_blurb.fl-box,
  body:not(.et-fb):not(.et-bfb) #page-container .fl-box > .et_pb_blurb.et_pb_with_border {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:not(.et-fb):not(.et-bfb) #page-container .fl-box .et_pb_blurb .et_pb_blurb_content {
    padding-left: 0;
    padding-right: 0;
  }

  /* Accordion/toggle: titel + indhold */
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_toggle .et_pb_toggle_title,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_toggle .et_pb_toggle_content {
    padding-left: var(--fl-box-pad);
    padding-right: var(--fl-box-pad);
  }

  /* Flade indre fl-box-moduler (tekst med bg inde i farvet kolonne) */
  body:not(.et-fb):not(.et-bfb) #page-container .fl-box > .et_pb_module.fl-box:not(.et_pb_with_border):not(.et_pb_with_background):not(.et_pb_cta):not(.et_pb_promo):not(.et_pb_toggle):not(.et_pb_accordion_item):not(.et_pb_pricing_table):not(.et_pb_testimonial):not(.et_pb_blurb) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ========== Kort: top/bund-padding i balance med siderne ==========
 * Builder har typisk 60px top/bund (desktop-værdi) mod ~18px i siderne på mobil,
 * mens andre kort har 0px. Ens token på kortet selv; modul-padding inde i kortet
 * nulstilles i top/bund, så den ikke lægges oveni.
 * Tomme kolonner (rene billedkolonner) røres ikke — deres højde kommer fra padding.
 */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_row.fl-box,
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_column.fl-box:not(.et_pb_column_empty) {
    padding-top: var(--fl-box-pad-y) !important;
    padding-bottom: var(--fl-box-pad-y) !important;
  }

  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_row.fl-box > .et_pb_column:not(.fl-box) > .et_pb_module:not(.fl-box):first-child {
    padding-top: 0 !important;
  }

  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_row.fl-box > .et_pb_column:not(.fl-box) > .et_pb_module:not(.fl-box):last-child {
    padding-bottom: 0 !important;
  }

  /* Sidste liste i et kort: ingen ekstra bundluft (ellers 18px mere end i toppen) */
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .fl-box .et_pb_module:last-child .et_pb_text_inner > ul:last-child,
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .fl-box .et_pb_module:last-child .et_pb_text_inner > ol:last-child {
    padding-bottom: 0;
  }

  /* Samme for sidste modul, formular og kolonne foran en skjult billedkolonne */
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_row.fl-box > .et_pb_column:has(+ .et_pb_column_empty:last-child) {
    margin-bottom: 0;
  }

  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_column.fl-box > .et_pb_module:last-child,
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_row.fl-box > .et_pb_column:last-child > .et_pb_module:last-child form.forminator-ui,
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_row.fl-box > .et_pb_column:last-child > .et_pb_module:last-child form.forminator-ui .forminator-row-last,
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_row.fl-box > .et_pb_column:last-child > .et_pb_module:last-child form.forminator-ui .forminator-row-last .forminator-button-submit {
    margin-bottom: 0 !important;
  }

  body:not(.et-fb):not(.et-bfb) .fl-artikel .fl-summary > ul:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/* ========== Usynlig padding (rækker/kolonner uden baggrund eller ramme) ==========
 * Builder-sidepadding på elementer uden .fl-box lægger sig oven i sektions-gutter
 * og kortets egen padding (fx 16 + 20 + 20px) uden at kunne ses — fjernes på mobil.
 */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_row:not(.fl-box):not(.et_pb_with_border),
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_row_inner:not(.fl-box):not(.et_pb_with_border),
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_column:not(.fl-box):not(.et_pb_with_border) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ========== Sider/indlæg uden Divi Builder (.container = 80% bredde) ========== */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container #main-content > .container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--fl-gutter-x);
    padding-right: var(--fl-gutter-x);
    box-sizing: border-box;
  }
}

/* Nyheder: bloggitterets -14px margen er bredere end 12px-kanten (gav 2px vandret scroll) */
@media (max-width: 576px) {
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_blog_grid .et_pb_salvattore_content {
    margin-left: calc(-1 * var(--fl-gutter-x)) !important;
    margin-right: calc(-1 * var(--fl-gutter-x)) !important;
  }
}

/* ========== Artikler (.fl-artikel): bokse følger samme box-token ========== */
@media (max-width: 600px) {
  body:not(.et-fb):not(.et-bfb) .fl-artikel .fl-summary,
  body:not(.et-fb):not(.et-bfb) .fl-artikel .fl-cta {
    padding-left: var(--fl-box-pad);
    padding-right: var(--fl-box-pad);
  }
}

/* ========== Typografi (global, bevarer font-familie) ========== */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_text_inner h1,
  body:not(.et-fb):not(.et-bfb) #page-container h1.et_pb_module_header,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_module_header {
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_text_inner h2 {
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_text_inner h3,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_text_inner h4 {
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_text_inner p,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_text_inner li {
    overflow-wrap: anywhere;
  }
}

/* Lille tekst: FAQ-titler (15px) og formular-labels (12px) op på læsbar størrelse */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_toggle .et_pb_toggle_title {
    font-size: 16px;
  }

  body:not(.et-fb):not(.et-bfb) #page-container #main-content .forminator-ui .forminator-label {
    font-size: 14px !important;
  }
}

@media (max-width: 576px) {
  /* Kun loft for ekstremt store Builder-fonts — ikke en ny typografi-skala */
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_text_inner h1 {
    font-size: min(2.4rem, 9vw);
  }

  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_text_inner h2 {
    font-size: min(2rem, 7.5vw);
  }
}

/* ========== Billeder ========== */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_image img,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_module img,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_gallery img,
  body:not(.et-fb):not(.et-bfb) #main-content img {
    max-width: 100%;
    height: auto;
  }

  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_image,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_image a {
    max-width: 100%;
  }

  body:not(.et-fb):not(.et-bfb) #page-container iframe {
    max-width: 100%;
  }
}

/* ========== Knapper (touch) ========== */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_button_module_wrapper {
    max-width: 100%;
  }

  body:not(.et-fb):not(.et-bfb) #page-container a.et_pb_button {
    min-height: var(--fl-touch);
    box-sizing: border-box;
    max-width: 100%;
  }

  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_button_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  /* Korte CTA’er forbliver content-width; lange linjer må wrappe */
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_button_module_wrapper a.et_pb_button {
    /* Ikke flex: Divis pil (:after, absolut) lander ellers midt oven i teksten */
    display: inline-block;
    align-content: center;
    width: auto;
    max-width: 100%;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 576px) {
  /* Hero-knap på undersider: "Tag kontakt – vi hjælper jer videre" på én linje (≥360px) */
  body:not(.et-fb):not(.et-bfb) #page-container #main-content .et_pb_section_0 .et_pb_button_module_wrapper a.et_pb_button {
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ========== Formularer (Forminator m.fl.) ========== */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container input[type="text"],
  body:not(.et-fb):not(.et-bfb) #page-container input[type="email"],
  body:not(.et-fb):not(.et-bfb) #page-container input[type="tel"],
  body:not(.et-fb):not(.et-bfb) #page-container input[type="number"],
  body:not(.et-fb):not(.et-bfb) #page-container input[type="url"],
  body:not(.et-fb):not(.et-bfb) #page-container input[type="search"],
  body:not(.et-fb):not(.et-bfb) #page-container select,
  body:not(.et-fb):not(.et-bfb) #page-container textarea,
  body:not(.et-fb):not(.et-bfb) #page-container .forminator-input,
  body:not(.et-fb):not(.et-bfb) #page-container .forminator-textarea,
  body:not(.et-fb):not(.et-bfb) #page-container .forminator-select--field {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important; /* undgå iOS auto-zoom */
  }

  body:not(.et-fb):not(.et-bfb) #page-container .forminator-button,
  body:not(.et-fb):not(.et-bfb) #page-container button[type="submit"] {
    min-height: var(--fl-touch);
    max-width: 100%;
  }
}

/* ========== Header / mobilmenu ========== */
@media only screen and (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) .familieloeft-mobilmenu .et_mobile_menu {
    width: calc(100vw - (2 * var(--fl-gutter-x))) !important;
    min-width: calc(100vw - (2 * var(--fl-gutter-x))) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body:not(.et-fb):not(.et-bfb) .mobile_menu_bar,
  body:not(.et-fb):not(.et-bfb) .et_mobile_nav_menu .mobile_menu_bar {
    min-width: var(--fl-touch);
    min-height: var(--fl-touch);
  }
}

/* ========== Footer ========== */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) .et-l--footer .et_pb_text_inner,
  body:not(.et-fb):not(.et-bfb) .et-l--footer a {
    overflow-wrap: anywhere;
  }

  body:not(.et-fb):not(.et-bfb) .et-l--footer img {
    max-width: 100%;
    height: auto;
  }
}

/* ========== Overflow: ret årsager, ikke body-hide ========== */
@media (max-width: 980px) {
  body:not(.et-fb):not(.et-bfb) #page-container,
  body:not(.et-fb):not(.et-bfb) #et-main-area,
  body:not(.et-fb):not(.et-bfb) #main-content {
    max-width: 100%;
  }

  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_row,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_column,
  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_module {
    max-width: 100%;
  }

  body:not(.et-fb):not(.et-bfb) #page-container .et_pb_code,
  body:not(.et-fb):not(.et-bfb) #page-container pre {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ========== Vikarløft: behold egen layout-isolation ========== */
body.vikarloeft-landing-page #page-container .et_pb_section,
body.vikarloeft-landing-page #page-container .et_pb_row,
body.vikarloeft-landing-page #page-container .et_pb_column {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
