/* =====================================================================
   GLOBAL SITE STYLES
   ---------------------------------------------------------------------
   Loaded on every page. Edit here and the change applies site-wide.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Quatro Slab — site-wide. Loaded here so every page (ikke kun forsiden)
   har samme font i menu, footer og indhold.
   --------------------------------------------------------------------- */
@font-face { font-family: "Quatro Slab"; src: url("/assets/fonts/QuatroSlab.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Quatro Slab"; src: url("/assets/fonts/QuatroSlab-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Quatro Slab"; src: url("/assets/fonts/QuatroSlab-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Quatro Slab"; src: url("/assets/fonts/QuatroSlab-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Quatro Slab"; src: url("/assets/fonts/QuatroSlab-SemiBoldItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Quatro Slab"; src: url("/assets/fonts/QuatroSlab-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Quatro Slab"; src: url("/assets/fonts/QuatroSlab-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Quatro Slab"; src: url("/assets/fonts/QuatroSlab-UltraBlack.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Quatro Slab"; src: url("/assets/fonts/QuatroSlab-UltraBlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }


:root {
  --brand-pink: #ec008c;
  --brand-pink-hover: #ec008c;
}

/* Prevent the header's beige bleed (::before with width:100vw) from
   creating a horizontal scrollbar now that #site_header has
   overflow:visible (needed so the Fokusområder dropdown isn't clipped). */
html, body { overflow-x: clip; }

/* ---------------------------------------------------------------------
   Global body text — unified to 16px / weight 200 across all pages.
   Targets the main paragraph containers used by underside + forside
   + the global redegørelse CTA. Overrides any inline font-size styles
   via !important.
   --------------------------------------------------------------------- */
.pf_text p,
.pf_text li,
.pf_text ul,
.pf_text ol,
.pf_hero_panel p,
.fp_film_box p,
.fp_pub_text p,
.fp_vtile p,
redegoerelse-cta .pf_text p,
redegoerelse-cta .container p {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 200 !important;
}

/* ---------------------------------------------------------------------
   Layout stability — reserve space for JS-rendered global elements so
   the page doesn't jump/"fly in" while they hydrate on load.
   --------------------------------------------------------------------- */
site-header { display: block; min-height: 106px; }
redegoerelse-cta { display: block; min-height: 360px; }

/* ---------------------------------------------------------------------
   Links — inline / text links use the brand pink globally.
   Navigation, buttons and whole-card tiles keep their own designed
   colours (their selectors are more specific than the bare `a` rule).
   --------------------------------------------------------------------- */
a {
  color: #000;
}
a:hover {
  color: #a61e30;
}

/* Global: links inside body text are dark blue, weight 400, underlined.
   Hover switches to brand red. Navigation, buttons, tiles and footer
   keep their own colours via more specific selectors. */
.pf_text a:not(.btn-primary):not(.btn-secondary),
.pf_hero_panel a:not(.btn-primary):not(.btn-secondary),
.ng_intro a:not(.btn-primary):not(.btn-secondary),
.ng_toc a:not(.btn-primary):not(.btn-secondary),
.news_body a:not(.btn-primary):not(.btn-secondary),
.news_factbox a:not(.btn-primary):not(.btn-secondary) {
  color: #11384e !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
}
.pf_text a:not(.btn-primary):not(.btn-secondary):hover,
.pf_hero_panel a:not(.btn-primary):not(.btn-secondary):hover,
.ng_intro a:not(.btn-primary):not(.btn-secondary):hover,
.ng_toc a:not(.btn-primary):not(.btn-secondary):hover,
.news_body a:not(.btn-primary):not(.btn-secondary):hover,
.news_factbox a:not(.btn-primary):not(.btn-secondary):hover {
  color: #a61e30 !important;
}

/* Global: breathing room after lists in editorial text */
.pf_text ul,
.pf_text ol,
.pf_hero_panel ul,
.pf_hero_panel ol {
  margin-bottom: 24px;
}

/* Text links that previously carried bespoke colours are unified to the
   brand pink so the rule is genuinely global. */
.contact_text h3 a,
.contact_text .email a {
  color: var(--brand-pink) !important;
}
.contact_text h3 a:hover,
.contact_text .email a:hover {
  color: var(--brand-pink-hover) !important;
}

/* Footer links stay white (overrules the global pink link rule).
   Buttons inside the footer keep their own styling. */
#footer_holder a:not(.btn-primary):not(.kontakt_btn),
#site_footer a:not(.btn-primary):not(.kontakt_btn):not(.tagline) { color: #fff !important; text-decoration: underline !important; text-underline-offset: 2px; }
#footer_holder a:not(.btn-primary):not(.kontakt_btn):hover,
#site_footer a:not(.btn-primary):not(.kontakt_btn):not(.tagline):hover { color: #a61e30 !important; text-decoration: underline !important; }
/* Ensure footer "Kontakt os" button has no underline (overrides .f_address a). */
#site_footer .f_address .btn-primary,
#site_footer .btn-primary,
#footer_holder .btn-primary { text-decoration: none !important; }

/* ---------------------------------------------------------------------
   Global buttons.
   - .btn-primary  → main CTA, pink fill ("Se publikation", "Vis flere
     indlæg", "Kontakt os")
   - .btn-secondary → outline navy, fills on hover ("Se filmen")
   Use on any <a> or <button> element.
   --------------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 45px;
  padding: 0 36px;
  font-family: "Quatro Slab", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  box-sizing: border-box;
}

.btn-primary {
  background: #ec008c;
  color: #fff;
  border-color: #ec008c;
}
.btn-primary:hover {
  background: #ec008c;
  border-color: #ec008c;
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: #11384e;
  border-color: #11384e;
}
.btn-secondary:hover {
  background: #11384e;
  color: #fff;
}

/* ---------------------------------------------------------------------
   Circular icon buttons — unified site-wide.
   Default: 30px circle, 2px navy (#11384e) outline, transparent inside,
   navy glyph (~14px). Hover: circle fills pink (#ec008c) with white glyph.
   Covers the share/social icons, the film play button and the contact
   phone icon. !important is used so it overrides per-page/inline styles.
   --------------------------------------------------------------------- */
.fp_share_icons a,
.pf_share_icons a,
.fp_play {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 2px solid #11384e !important;
  background: transparent !important;
}
.fp_share_icons a svg,
.pf_share_icons a svg,
.fp_play svg {
  width: 14px !important;
  height: 14px !important;
  fill: #11384e !important;
}
.fp_play svg { margin-left: 2px !important; }

.fp_share_icons a:hover,
.pf_share_icons a:hover,
.fp_play:hover {
  background: #ec008c !important;
  border-color: #ec008c !important;
}
.fp_share_icons a:hover svg,
.pf_share_icons a:hover svg,
.fp_play:hover svg {
  fill: #fff !important;
}

/* Global H2 style */
h2 {
  font-weight: 600;
  font-size: 32px;
}

/* ============================================================
   Global category tile (based on PFAS card)
   Usage:
     <a class="category-tile" href="..." style="--tile-bg:#ec008c; --tile-color:#fff;">
       <div class="category-tile__img"><img src="..." alt=""></div>
       <div class="category-tile__body">
         <span class="category-tile__label">Label</span>
         <h3 class="category-tile__title">Heading</h3>
         <p class="category-tile__text">Body text</p>
         <span class="category-tile__arrow" aria-hidden="true"></span>
       </div>
     </a>
   Add modifier .category-tile--img-right to swap image to the right side.
   Override --tile-bg and --tile-color inline (or in CSS) to change colors.
   --tile-gap controls the equal spacing: text→line, line→text, arrow→bottom.
   ============================================================ */
.category-tile {
  --tile-bg: #f2f0ea;
  --tile-color: #11384e;
  --tile-gap: 20px;
  --tile-pad-x: 32px;
  --tile-pad-top: 34px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;
  aspect-ratio: 16 / 9;
  min-height: 0;
  min-width: 0;
  text-decoration: none;
  color: var(--tile-color);
}
.category-tile--img-right .category-tile__img { order: 2; }
.category-tile__img {
  overflow: hidden;
  background: #cfd6cd;
  min-width: 0;
}
.category-tile__img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.category-tile:hover .category-tile__img img { transform: scale(1.05); }
.category-tile__body {
  display: flex;
  flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden;
  background: var(--tile-bg);
  color: var(--tile-color);
  padding: var(--tile-pad-top) var(--tile-pad-x) var(--tile-gap);
}
.category-tile__label {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 var(--tile-gap);
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  color: var(--tile-color);
  opacity: 0.92;
}

.category-tile__title {
  font-family: "Quatro Slab", Georgia, serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.14;
  margin: 0 0 16px;
  color: var(--tile-color);
}
.category-tile__text {
  font-family: "Quatro Slab", Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: var(--tile-color);
}
.category-tile__arrow {
  width: 13px; height: 13px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-top: auto;
  color: var(--tile-color);
}
@media (max-width: 900px) {
  .category-tile {
    grid-template-columns: minmax(0,1fr);
    aspect-ratio: auto;
  }
  .category-tile--img-right .category-tile__img { order: 0; }
  .category-tile__img { aspect-ratio: 16 / 10; }
  .category-tile__body { overflow: visible; min-height: 0; }
}

/* ============================================================
   Global 50/50 hero (image left, teal text panel right)
   Used on all undersider. Markup:
     <section class="pf_hero">
       <div class="container pf_hero_grid">
         <div class="pf_hero_media"><img src="..." alt="">
           <div class="pf_share">...</div>
         </div>
         <div class="pf_hero_panel">
           <div class="pf_hero_inner">
             <p class="pf_label">LABEL</p>
             <h1>Heading</h1>
             <p>Body…</p>
           </div>
         </div>
       </div>
     </section>
   ============================================================ */
.pf_hero { background: #fff; overflow: visible; }
.pf_hero_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  min-height: 750px;
}
.pf_hero_media { position: relative; }
.pf_hero_media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.pf_share {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  background: #11384e;
  padding: 22px 34px;
}
.pf_share_label {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.pf_hero_panel {
  position: relative;
  background: #6c9dab;
  color: #11384e;
  display: flex;
  align-items: flex-start;
  padding: 64px clamp(34px, 4vw, 64px) 58px;
}
.pf_hero_inner { position: relative; z-index: 1; max-width: 540px; width: 100%; }

.pf_label {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  opacity: 1;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.28);
}
.pf_hero h1 {
  font-family: "Quatro Slab", Georgia, serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.12;
  color: #000;
  margin-bottom: 18px;
  text-wrap: balance;
}
.pf_hero_panel p {
  font-family: "Quatro Slab", Georgia, serif;
  font-size: 15px;
  line-height: 1.65;
  color: #231f20;
  margin-bottom: 16px;
}
.pf_hero_panel p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .pf_hero_grid { grid-template-columns: 1fr; min-height: 0; }
  .pf_hero_media { padding-right: 0; height: 360px; }
  .pf_hero_panel { padding: 58px 28px 53px; }
}

/* ---------------------------------------------------------------------
   Global: figures inside pf_row. Images keep a fixed column width but
   scale in height by their natural aspect ratio (no cropping).
   --------------------------------------------------------------------- */
.pf_row { align-items: center; }
.pf_row .pf_fig,
.pf_row figure.pf_fig.pf_lift {
  margin: 0;
  align-self: center;
  display: block;
}
.pf_row .pf_fig img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------
   Global: visible bullet markers for lists inside body text. The site's
   base reset removes list-style, so we re-enable it for editorial copy.
   --------------------------------------------------------------------- */
.pf_text ul,
.pf_hero_panel ul {
  list-style: disc outside;
  padding-left: 22px;
}
.pf_text ol { list-style: decimal outside; padding-left: 22px; }
.pf_text ul li,
.pf_text ol li { margin-bottom: 6px; }

/* ---------------------------------------------------------------------
   Global: text on dark-navy sections is white.
   --------------------------------------------------------------------- */
.pf_section.dark,
.pf_section.dark .pf_text,
.pf_section.dark .pf_text h2,
.pf_section.dark .pf_text h3,
.pf_section.dark .pf_text h4,
.pf_section.dark .pf_text p,
.pf_section.dark .pf_text li,
.pf_section.dark .pf_text a {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------
   Orddeling: Browseres auto-hyphenation følger ikke altid dansk
   retskrivning. Vi deaktiverer auto-orddeling globalt og bruger kun
   manuelle &shy; (placeret efter Retskrivningsordbogen) på de få lange
   sammensatte ord, der har brug for at kunne brydes.
   --------------------------------------------------------------------- */
.pf_hero_panel p,
.pf_text p,
.pf_text li,
.pf_hero h1,
.pf_text h2,
.pf_text h3,
.pf_text h4 {
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
  word-break: normal;
}

/* ---------------------------------------------------------------------
   Global: any element on the dark navy (#11384e) brand background uses
   white text. Covers navy tiles, dark sections, quote band, share bar.
   --------------------------------------------------------------------- */
.pf_section.dark,
.pf_section.dark *,
.pf_tile.tile_navy, .pf_tile.tile_navy *,
.pf_tile.tile_petrol, .pf_tile.tile_petrol *,
.fp_vtile.t_navy, .fp_vtile.t_navy *,
.fp_htile.t_navy, .fp_htile.t_navy *,
.fp_quote, .fp_quote *,
viden-om .vo_tile.t_navy, viden-om .vo_tile.t_navy *,
.pf_share, .pf_share * {
  color: #ffffff !important;
}

/* =====================================================================
   MOBILE: globale justeringer (<= 720px)
   ---------------------------------------------------------------------
   Reducerer side-padding, paddings i sektioner og sikrer at brede
   tabeller bliver scrollbare i stedet for at sprænge layoutet.
   ===================================================================== */
@media (max-width: 720px) {
  /* Containere med 1280px max-width + 40px side-padding */
  .container,
  .pf_container,
  .ng_container,
  .fp_container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Sektioner med fast lodret padding 70-110px */
  .pf_section,
  .fp_section,
  .ng_section,
  .tidl_section,
  .news_section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Tabeller: scroll horisontalt i stedet for at klippe indhold */
  .pf_text table,
  .ng_section table,
  .news_body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .pf_text table th,
  .pf_text table td,
  .ng_section table th,
  .ng_section table td,
  .news_body table th,
  .news_body table td {
    white-space: normal;
  }

  /* Knapper og CTA: minimum tap-target 44px */
  .btn-primary,
  .btn-secondary,
  .kontakt_btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Billeder fylder aldrig mere end skærmens bredde */
  .pf_text img,
  .news_body img,
  .pf_hero img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Forside-overskrift: skaler ned så den passer i 390-430px */
  .fp_hero h1,
  .pf_hero h1 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 480px) {
  .container,
  .pf_container,
  .ng_container,
  .fp_container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}