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

: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: 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) { color: #fff !important; }
#footer_holder a:not(.btn-primary):not(.kontakt_btn):hover { color: #a61e30 !important; }
/* Ensure footer "Kontakt os" button has no underline (overrides .f_address a). */
#site_footer .f_address .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;
}

/* ---------------------------------------------------------------------
   Global: Danish hyphenation for long body text. Long headings are
   handled by manual &shy; per Retskrivningsordbogen, so we don't enable
   auto-hyphenation on H1/H2 (avoids browsers picking unintended breaks).
   Requires lang="da" on the document.
   --------------------------------------------------------------------- */
.pf_hero_panel p,
.pf_text p {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-language: "da";
}
.pf_hero h1,
.pf_text h2 {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ---------------------------------------------------------------------
   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;
}