/* ==========================================================================
   Forenede Gruppeliv - design tokens
   Hand-translated from Version 2 (Tailwind) ColorSystem/colors.ts + globals.css
   ========================================================================== */

@font-face {
  font-family: 'Macan';
  src: url('/fonts/Macan-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Macan';
  src: url('/fonts/Macan-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Macan';
  src: url('/fonts/Macan-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Macan Stencil';
  src: url('/fonts/Macan-Stencil-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Macan Stencil';
  src: url('/fonts/Macan-Stencil-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* content (text) colors */
  --color-content-primary: #001943;
  --color-content-primary-inverted: #ffffff;
  --color-content-secondary: #404040;
  --color-content-tertiary: #737373;
  --color-content-fourth: #d4d4d4;
  --color-content-disabled: #a3a3a3;
  --color-content-action: #2563eb;
  --color-content-action-hover: #1e3a8a;
  --color-content-success: #16a34a;
  --color-content-error: #dc2626;

  /* background colors */
  --color-bg-surface-light: #ffffff;
  --color-bg-surface-inverted: #001943;
  --color-bg-action: #2563eb;
  --color-bg-action-hover: #1e4fbc;
  --color-bg-disabled: #d4d4d4;
  --color-bg-page: #deeaf6;
  --color-bg-page-light: #f1f5f9;
  --color-bg-tag: #deeaf6;
  --color-bg-info: #fcede3;
  --color-bg-highlight: #eef4ef;

  /* border colors */
  --color-border-default: #a3a3a3;
  --color-border-active: #001943;
  --color-border-subtle: #d4d4d4;
  --color-border-action: #2563eb;
  --color-border-disabled: #a3a3a3;
  --color-border-white: #ffffff;

  --font-primary: 'Macan', -apple-system, Segoe UI, Roboto, sans-serif;
  --font-alternative: 'Macan Stencil', var(--font-primary);
  --max-content-width: 2000px; /* hero image wrapper only */
  --content-max-width: 1640px; /* real site's Tailwind "3xl" breakpoint (max-w-screen-3xl) — nav, sections, footer */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

body {
  font-family: var(--font-primary);
  color: var(--color-content-primary);
  background-color: var(--color-bg-surface-light);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--content-max-width);
  }
}

.container--padded {
  padding-inline: 1.25rem;
  padding-block: 2rem;
}

@media (min-width: 1024px) {
  .container--padded {
    padding-inline: 4rem;
    /* Matches V2's "py-8 lg:pt-28" exactly - top padding grows at desktop width (bottom stays
       2rem from padding-block above, V2 has no lg:pb-* override either). This is what actually
       creates the gap before the media-cover section - not spacing pushed down from the hero
       itself. */
    padding-top: 7rem;
  }
}

/* ==========================================================================
   Typography (mirrors app/components/Typography/Text.tsx variants)
   ========================================================================== */

.text-h1 {
  font-size: 40px;
  line-height: 1.25;
  font-weight: 600;
}
.text-h1::first-letter {
  font-family: var(--font-alternative);
}
.text-h2 {
  font-size: 32px;
  font-weight: 600;
}
.text-h3 {
  font-size: 24px;
  font-weight: 600;
}
.text-h4 {
  font-size: 18px;
  font-weight: 600;
}
.text-title {
  font-size: 20px;
  font-weight: 600;
}
.text-subtitle {
  font-size: 18px;
}
.text-base {
  font-size: 16px;
}
.text-small {
  font-size: 14px;
}

@media (min-width: 1024px) {
  .text-h1 {
    font-size: 72px;
  }
  .text-h2 {
    font-size: 40px;
  }
  .text-h3 {
    font-size: 28px;
  }
  .text-h4 {
    font-size: 20px;
  }
  .text-title {
    font-size: 24px;
  }
  .text-subtitle {
    font-size: 20px;
  }
}

.text-primary {
  color: var(--color-content-primary);
}
.text-secondary {
  color: var(--color-content-secondary);
}
.text-tertiary {
  color: var(--color-content-tertiary);
}
.text-muted {
  color: var(--color-content-fourth);
}
.text-action {
  color: var(--color-content-action);
}
.text-inverted {
  color: var(--color-content-primary-inverted);
}

.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}

/* ==========================================================================
   Buttons (mirrors app/components/Button/buttonVariants.ts)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  border-radius: 9999px;
  padding-inline: 1.5rem;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
  font-weight: 500;
  border: 1px solid transparent;
}
.btn:hover {
  opacity: 0.7;
}
.btn:focus {
  opacity: 1;
}

.btn-filled {
  background-color: var(--color-bg-action);
  color: var(--color-content-primary-inverted);
}
.btn-inverted {
  background-color: #ffffff;
  color: var(--color-content-primary);
}
.btn-outlined {
  color: var(--color-content-action);
  border-color: var(--color-border-action);
  background-color: transparent;
}

.btn-small {
  height: 2.5rem;
  font-size: 14px;
}
.btn-medium {
  height: 3rem;
  font-size: 14px;
}
.btn-large {
  height: 3.5rem;
  font-size: 16px;
}

.btn-full {
  width: 100%;
}

/* ==========================================================================
   Navigation bar
   ========================================================================== */

.site-nav {
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: #ffffff;
  height: 112px;
  display: flex;
  align-items: center;
}

.site-nav__inner {
  position: relative;
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-nav__logo svg {
  width: 144px;
  height: auto;
  flex-shrink: 0;
}

.site-nav__toggle {
  display: block;
}
/* The `hidden` attribute (toggled by site.js between the burger/close icons) has no effect on
   <svg> elements in real browsers - the UA stylesheet rule that makes `hidden` work
   ([hidden] { display: none }) lives only in the HTML default stylesheet, not SVG's, so without
   this both icons render stacked on top of each other regardless of menu state. */
.site-nav__toggle svg[hidden] {
  display: none;
}

.site-nav__links {
  display: none;
  align-items: center;
  height: 100%;
  gap: 1rem;
  /* Normal weight, matching fg.dk's top nav (confirmed: fg.dk's own nav items are also
     numerically font-weight 600, but rendered through a different font family than this site's
     "Macan" - Macan's real 600 weight file is visibly much heavier, which is what read as bold
     here despite the matching number). This also fixes an inherited side effect: .site-nav__mega
     a hover rule set font-weight: 500, intending to bold the sub-links on hover, but they were
     already 600 by inheritance from here at rest - normal at rest now makes that hover rule the
     actual emphasis change it was meant to be. */
  font-weight: 400;
}

.site-nav__item {
  height: 100%;
  display: flex;
  align-items: center;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 100%;
  border-bottom: 3px solid transparent;
}
.site-nav__link:hover {
  border-color: var(--color-border-action);
}
.site-nav__link svg {
  transition: transform 0.2s ease-out;
}

.site-nav__item:hover .site-nav__link,
.site-nav__item:focus-within .site-nav__link {
  border-color: var(--color-border-action);
}
.site-nav__item:hover .site-nav__link svg,
.site-nav__item:focus-within .site-nav__link svg {
  transform: rotate(180deg);
}

.site-nav__mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 288px;
  padding: 3.5rem;
  z-index: 90;
  background-color: #fff;
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0.25s ease-out;
}
.site-nav__item:hover .site-nav__mega,
.site-nav__item:focus-within .site-nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.site-nav__mega-inner {
  max-width: var(--content-max-width);
  height: 100%;
  margin-inline: auto;
  display: flex;
  justify-content: flex-end;
  gap: 2.5rem;
}

.site-nav__mega-col {
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border-subtle);
}

.site-nav__mega-link {
  color: var(--color-content-secondary);
  font-size: 16px;
}
.site-nav__mega-link:hover {
  color: var(--color-content-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-nav__actions {
  display: flex;
  align-items: center;
}

.site-nav__mobile {
  position: fixed;
  inset: 0;
  top: 112px;
  z-index: 100;
  background: #fff;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(-100%);
  /* This box's height is (viewport height - 112px) - translateY(-100%) shifts the WHOLE box up
     by exactly that much, which only moves its top edge off-screen. Its bottom edge lands right
     back at y=112 every time (confirmed via getBoundingClientRect: bottom:112 exactly,
     regardless of viewport height) - meaning the panel's own bottom 112px permanently overlaps
     the header's full height, by construction, not just during the transition or on unusual
     viewports. At opacity 0.8 that overlap visibly washes out the logo and toggle icon
     underneath even while "closed" - opacity 0 makes the (still click-inert, see pointer-events
     below) overlap invisible instead of merely unclickable. */
  opacity: 0;
  transition: all 0.3s ease-in;
  overflow-y: auto;
  /* Closed state must not intercept clicks on the header (logo/toggle) behind it - same
     pointer-events pattern already used by .site-nav__mega above. */
  pointer-events: none;
}
.site-nav__mobile.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.site-nav__mobile-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 16px;
  padding-block: 0.5rem;
  text-align: left;
}

.site-nav__mobile-item {
  display: flex;
  flex-direction: column;
}

.site-nav__mobile-link svg {
  flex-shrink: 0;
  transition: transform 0.2s ease-out;
}

.site-nav__mobile-link[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.site-nav__mobile-submenu {
  height: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}
.site-nav__mobile-submenu.is-open {
  height: auto;
  max-height: 2000px;
}

.site-nav__mobile-submenu-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0 1rem 1rem;
  overflow: hidden;
}

.site-nav__mobile-submenu a {
  color: var(--color-content-secondary);
  font-size: 14px;
}
.site-nav__mobile-submenu a:hover {
  color: var(--color-content-primary);
}

.site-nav__mobile [data-login-open] {
  margin-top: auto;
}

@media (min-width: 1024px) {
  .site-nav__toggle {
    display: none;
  }
  .site-nav__links {
    display: flex;
  }
  .site-nav__mobile {
    display: none;
  }
  .site-nav__logo svg {
    width: 176px;
  }
  .site-nav__inner {
    padding-inline: 4rem;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  margin-inline: auto;
  margin-top: 0.5rem;
  width: 100%;
  max-width: 100%;
  height: 505px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-content-primary-inverted);
}

.hero__image-wrap {
  position: absolute;
  inset: 0;
  margin-inline: 0.5rem;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(135deg, #001943 0%, #2563eb 100%);
}

.hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* EU AI Act transparency marking - both the hero photo and the media-cover photo below are
   AI-generated, so both carry this badge. Placed on the image itself (not baked into the image
   file) so it applies consistently even if an editor replaces the underlying photo via Umbraco.
   Scoped to both parent containers specifically - ".hero__image-wrap img"/".media-cover__image
   img" above and below both force width/height: 100% (plus, for the latter, min-height: 220px)
   on any <img> child, which has higher CSS specificity than ".ai-generated-badge" alone and
   would otherwise stretch/distort the badge to fill the whole container. min-height must be
   explicitly cancelled too - overriding height alone doesn't clear a separately-set min-height. */
.hero__image-wrap .ai-generated-badge,
.media-cover__image .ai-generated-badge {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 8.5rem;
  height: auto;
  min-height: 0;
}

.hero__content {
  position: relative;
  padding-inline: 3rem;
  margin-bottom: 3rem;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hero__content {
    padding-inline: 4rem;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero__content {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-inline: 4rem;
  }
}

.hero__heading {
  padding-right: 3rem;
}

.hero__heading::first-letter {
  font-family: var(--font-alternative);
}

.hero__cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.hero__cta-btn {
  height: 2.5rem;
}
.hero__cta-btn-label {
  display: none;
}

@media (min-width: 640px) {
  .hero__cta-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.75rem;
  }
  .hero__cta-btn {
    height: 3rem;
  }
  .hero__cta-btn-label {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .hero__content {
    width: 100%;
    margin-left: 0;
    padding-inline: 4rem;
  }
  .hero__cta-btn {
    height: 3.5rem;
  }
}

.hero__cards {
  display: none;
}

.hero__cards-mobile {
  margin-top: 3rem;
  padding-inline: 1.25rem;
}

@media (min-width: 768px) {
  .hero__cards-mobile {
    margin-top: 4rem;
  }
}

@media (min-width: 1024px) {
  .hero__cards-mobile {
    padding-inline: 4rem;
  }
}

.hero__cards-mobile .text-h3 {
  border-bottom: 1px solid var(--color-border-active);
  padding-bottom: 1.25rem;
}

.nav-card {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-block: 2.25rem 2.5rem;
}

.nav-card__title {
  display: block;
  padding-bottom: 1rem;
}

.nav-card__cta {
  width: 64px;
  height: 40px;
  margin-top: 2rem;
}

/* Below xl, .hero__cards-mobile (not .hero__cards) is the visible card list - see Index.cshtml,
   which renders the same _QuickLinkCard partial into both containers and relies on CSS alone to
   pick the right one per breakpoint. Without this block, every .nav-card stays plain block flow
   here (title, then description, then CTA button stacked full-width below it) all the way from
   mobile up to 1280px, which is correct for narrow phones but looks wrong once there's enough
   width for the description and button to sit on one line - exactly the row-with-button-on-the-
   right layout the equivalent width already uses elsewhere on this site. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  /* Grid, not flex-wrap: an earlier flex-wrap attempt here broke on longer description text -
     giving the paragraph flex-grow so it would fill the row made it (correctly) claim all
     remaining space, but that pushed the combined row past the container width, so flex-wrap
     dropped the button onto its own line below instead of keeping it pinned to the right - the
     opposite of what this is for. Grid avoids that: the description's column track is fixed at
     1fr regardless of its content length, so the button's column never gets displaced. */
  .hero__cards-mobile .nav-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 1rem;
  }
  .hero__cards-mobile .nav-card__title {
    grid-column: 1 / -1;
  }
  .hero__cards-mobile .nav-card .text-tertiary {
    grid-column: 1;
    /* Grid items default to min-width: auto, which sizes the track to fit the text on one line
       instead of respecting the 1fr track and wrapping - this restores normal text wrapping. */
    min-width: 0;
    margin: 0;
  }
  .hero__cards-mobile .nav-card__cta {
    grid-column: 2;
    margin-top: 0;
  }
}

@media (min-width: 1280px) {
  .hero {
    height: 800px;
  }

  .hero__image-wrap {
    margin-inline: 1rem;
  }

  .hero > .container {
    margin-bottom: 2.5rem;
  }

  .hero__content {
    padding-bottom: 7rem;
  }

  .hero__cards-mobile {
    display: none;
  }

  .hero__cards {
    display: flex;
    align-items: stretch;
    width: fit-content;
    margin-inline: 4rem;
    padding-inline: 3rem;
    border-radius: 1rem;
    background-color: var(--color-bg-surface-light);
    color: var(--color-content-primary);
    position: relative;
  }

  .hero__cards-heading {
    min-width: 16rem;
    max-width: 16rem;
    margin: 2.5rem 2rem 2.5rem 0;
    padding-right: 2.5rem;
    border-right: 1px solid var(--color-border-active);
  }

  .hero__cards .nav-card {
    border-bottom: none;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .hero__cards .nav-card + .nav-card {
    border-left: 1px solid var(--color-border-subtle);
  }
}

@media (min-width: 768px) {
  .hero {
    margin-top: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .hero {
    height: 527px;
  }
}

/* ==========================================================================
   Media cover section
   ========================================================================== */

.media-cover {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: var(--color-bg-page-light);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.media-cover__image {
  position: relative;
  background: linear-gradient(135deg, #deeaf6 0%, #2563eb 100%);
  overflow: hidden;
}

.media-cover__image img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.media-cover__content {
  padding: 3rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.media-cover__description {
  margin-block: 2rem;
  color: var(--color-content-secondary);
}

@media (min-width: 1024px) {
  .media-cover--split {
    flex-direction: row;
  }
  .media-cover--split .media-cover__image {
    width: 33.333%;
  }
  .media-cover--split .media-cover__content {
    width: 66.666%;
    padding: 3.5rem 5rem;
    text-align: left;
    align-items: flex-start;
  }
}

/* ==========================================================================
   News / notification section
   ========================================================================== */

.news-section {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: 2rem 1.25rem;
}

.news-grid {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.news-card {
  display: flex;
  flex-direction: column;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.news-card__date {
  margin-bottom: 0.5rem;
}

.news-card__title {
  margin-bottom: 1rem;
}

.news-card__preview {
  margin-bottom: 1.5rem;
  color: var(--color-content-tertiary);
}

.news-card__link {
  width: fit-content;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 1024px) {
  .news-section {
    padding: 3rem 4rem 7rem;
  }
  .news-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 4rem;
  }
  .news-card {
    max-width: 36rem;
    flex: 1 1 30%;
    padding-left: 1.5rem;
    border-bottom: none;
    border-left: 1px solid var(--color-border-subtle);
  }
}

/* ==========================================================================
   Landing page (Kunderepræsentationen) - a dedicated wrapper matching Version
   2's real LandingPage.tsx section/spacing exactly (measured directly off
   fg.dk/kunderepraesentationen), not the generic .article-page wrapper used
   by Standard Pages - that wrapper's padding/type scale is tuned for a
   sidebar article layout, not this page's plain header + news grid.
   ========================================================================== */

.landing-page {
  max-width: 1640px;
  margin-inline: auto;
  padding: 3rem 1.25rem 5rem;
}

.landing-page__header {
  max-width: 56rem;
}

.landing-page__intro {
  margin-top: 1.5rem;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.625;
  color: var(--color-content-secondary);
}

.landing-page__intro a {
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.landing-page__members-link {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 24px;
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.landing-page__news {
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .landing-page {
    padding: 6rem 4rem 7rem;
  }
  .landing-page__intro {
    margin-top: 2rem;
  }
  .landing-page__news {
    margin-top: 5rem;
  }
}

/* ==========================================================================
   Article card grid (Kunderepræsentationen landing page - matches Version 2's
   real ArticleCard/LandingPage.tsx exactly: bordered rounded card, truncated
   title/teaser, "Læs mere" + arrow link)
   ========================================================================== */

.article-card-grid {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.article-card-grid--multi {
  grid-template-columns: 1fr;
}

.article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-subtle);
  border-radius: 1rem;
  background-color: var(--color-bg-surface-light);
  padding: 1.5rem;
}

.article-card__date {
  margin-bottom: 0.75rem;
}

.article-card__title {
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__teaser {
  margin-bottom: 1.5rem;
  flex: 1 1 auto;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-card__link svg {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .article-card-grid {
    margin-top: 3rem;
    gap: 2rem;
  }
  .article-card-grid--multi {
    grid-template-columns: 1fr 1fr;
  }
  .article-card {
    padding: 2rem;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-bg-action);
  color: var(--color-content-primary-inverted);
  padding: 3rem 1.25rem;
}

.site-footer__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.site-footer__title {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  padding-bottom: 3.5rem;
}

.site-footer__cols {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 2rem;
}

.footer-col__header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  padding: 0;
}

.footer-col__links {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
}
.footer-col__links.is-open {
  display: flex;
}

.footer-col__links a {
  color: var(--color-content-fourth);
  font-size: 14px;
}
.footer-col__links a:hover {
  color: #ffffff;
}

.footer-col__info {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
  color: var(--color-content-fourth);
  font-size: 14px;
}
.footer-col__info.is-open {
  display: flex;
}

.footer-toggle-icon {
  width: 1rem;
  height: 1rem;
}

.site-footer__logo {
  width: 4rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.site-footer__divider {
  height: 2px;
  width: 100%;
  background-color: #d4d4d4;
}

.site-footer__bottom {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

@media (min-width: 1024px) {
  .site-footer {
    padding: 5rem 4rem;
  }
  .site-footer__cols {
    flex-direction: row;
    gap: 3.5rem;
  }
  .footer-col__header {
    cursor: default;
  }
  .footer-col__header svg {
    display: none;
  }
  .footer-col__links,
  .footer-col__info {
    display: flex !important;
    max-width: 14rem;
  }
  .footer-col:first-child {
    flex-grow: 1;
    min-width: 7rem;
  }
  .site-footer__logo {
    margin-top: -3rem;
  }
}

/* ==========================================================================
   Article page (e.g. /privat/hvilke-forsikringsdaekninger-har-jeg)
   ========================================================================== */

.article-page {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: 3rem 1.25rem 5rem;
}

.article-layout {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.article-main {
  min-width: 0;
}

.article-intro {
  border-top: 4px solid var(--color-border-action);
  padding-top: 1.5rem;
  margin-bottom: 4rem;
  max-width: 42rem;
  /* Confirmed against V2's source (app/components/Typography/Text.tsx, variant="title":
     text-[20px] lg:text-[24px]) and the live site, on two unrelated pages
     (Kunderepræsentationen, Hvilke forsikringsdækninger har jeg) - this is V2's standard intro
     ("highlight" field) size, not the smaller .text-subtitle (18/20) this div was also carrying,
     which is really the size V2 uses for article bylines elsewhere. .text-subtitle itself is
     left alone since it's shared with unrelated things (the homepage news-card teaser, Mockup) -
     this overrides it for .article-intro specifically, same specificity, later in the cascade. */
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
}

@media (min-width: 1024px) {
  .article-intro {
    font-size: 24px;
  }
}

.article-divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin-bottom: 2rem;
}

@media (min-width: 1280px) {
  .article-page header .text-h1 {
    max-width: 1100px;
  }
}

/* ==========================================================================
   Sitemap page
   ========================================================================== */

.sitemap-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .sitemap-cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sitemap-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sitemap-col h3 {
  margin-bottom: 0.5rem;
}

.sitemap-col a {
  color: var(--color-content-tertiary);
  font-size: 14px;
}

.sitemap-col a:hover {
  color: var(--color-content-action);
}

.article-body p {
  margin-bottom: 1rem;
}
.article-body p:last-child {
  margin-bottom: 0;
}
.article-body h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.article-body h2:first-child {
  margin-top: 0;
}
.article-body p + h2 {
  margin-top: 2rem;
}
.article-body p + p {
  margin-top: 1rem;
}
.article-body h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.article-body p a {
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-columns {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Same 1.5rem used for the gap between columns above - fg.dk gives the heading, the column
     grid, and the closing paragraph below it this same uniform spacing (Tailwind's gap-y-6, on
     a wrapper that contains all three together). Margin instead of gap here since those three
     pieces aren't all siblings inside one flex container in this markup, just adjacent blocks. */
  margin-block: 1.5rem;
}
.article-columns > div {
  flex: 1;
}

.article-body ol,
.article-body ul {
  margin: 1rem 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  /* No extra gap between items - the line height alone spaces them, as on fg.dk. */
  gap: 0;
}

.article-body ul {
  list-style: disc;
}
.article-body ul a {
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body em {
  font-style: italic;
}

.article-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  /* Wide tables in a sidebar layout can need more width than .article-main has to give (see
     Skat og afgift) - overflow-x:auto already makes this scrollable, but the default OS
     scrollbar (especially Windows' overlay style, or macOS's hidden-until-scroll one) is easy
     to miss entirely, reading as "the last column is just gone" rather than "scroll for more".
     Styling it to always be a visible, obviously-a-scrollbar bar fixes that without touching
     the table's own size or risking it overlapping the sidebar. */
  scrollbar-width: auto;
  scrollbar-color: var(--color-border-action) var(--color-border-subtle);
}
.article-table-wrap::-webkit-scrollbar {
  height: 10px;
}
.article-table-wrap::-webkit-scrollbar-track {
  background: var(--color-border-subtle);
  border-radius: 5px;
}
.article-table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-border-action);
  border-radius: 5px;
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0.75rem 0.75rem 0 0;
  overflow: hidden;
}

.article-table th {
  background-color: var(--color-bg-page);
  text-align: left;
  padding: 1.25rem 1.5rem;
  border-right: 1px solid #fff;
}

.article-table th:last-child,
.article-table td:last-child {
  border-right: none;
}

.article-table td {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
  color: var(--color-content-secondary);
}

.article-table td.align-right {
  text-align: right;
}

.link-card-box {
  background-color: var(--color-bg-info);
  border-radius: 1rem;
  padding: 1.5rem;
}

.link-card {
  padding-block: 1.25rem;
}
.link-card:first-child {
  padding-top: 0;
}
.link-card:last-child {
  padding-bottom: 0;
}
.link-card + .link-card {
  border-top: 1px solid var(--color-border-subtle);
}

.link-card__title {
  display: block;
  margin-bottom: 0.5rem;
}
.link-card__desc {
  color: var(--color-content-secondary);
  margin-bottom: 0.75rem;
}
/* Rich-text descriptions (widgetItem) arrive as <div class="link-card__desc"><p>…</p></div>;
   the global p reset would otherwise collapse the gaps between paragraphs. */
.link-card__desc > p {
  margin-bottom: 0.75rem;
}
.link-card__desc > p:last-child {
  margin-bottom: 0;
}
.link-card__desc a {
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-card__link {
  display: inline-block;
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-card__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-band {
  background-color: var(--color-bg-page);
  padding: 3rem 1.25rem;
}

.faq-inner {
  max-width: 1510px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.faq-intro p {
  margin-top: 1rem;
  color: var(--color-content-secondary);
}
.faq-intro p a {
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.news-item {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 2rem;
  max-width: 42rem;
}
.news-item:last-child {
  border-bottom: none;
}

.news-item__date {
  color: var(--color-content-tertiary);
  margin-bottom: 0.5rem;
}

.news-item__title {
  margin-bottom: 1rem;
}

.news-item__excerpt {
  color: var(--color-content-tertiary);
  margin-bottom: 1rem;
}

.news-item__link {
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  /* The button reset leaves the browser's default side padding, which indented the question
     (and pushed the icon in from the edge) relative to the answer text. */
  padding-inline: 0;
  text-align: left;
}

.faq-item__icon {
  flex-shrink: 0;
  transition: transform 0.2s ease-out;
}
.faq-item__question[aria-expanded='true'] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  display: none;
  padding-bottom: 1.5rem;
  color: var(--color-content-secondary);
}
.faq-item__answer.is-open {
  display: block;
}
.faq-item__answer p + p {
  margin-top: 1rem;
}
.faq-item__answer a {
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-item__answer ul {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 1024px) {
  .article-page {
    padding: 6rem 4rem 5rem;
  }
  .article-layout {
    flex-direction: row;
    justify-content: space-between;
  }
  .article-main {
    width: 70%;
  }
  .article-sidebar {
    width: 35%;
  }
  .article-layout--single .article-main {
    width: 100%;
  }
  .article-columns {
    flex-direction: row;
    gap: 1.25rem;
  }
  .article-intro {
    border-top: none;
    border-left: 4px solid var(--color-border-action);
    padding-top: 0;
    padding-left: 1.5rem;
  }
  .faq-band {
    padding: 4rem;
  }
  .faq-inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
  }
  .faq-inner > * {
    width: 50%;
  }
}

/* ==========================================================================
   Mockup placeholder page
   ========================================================================== */

.mockup-placeholder {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 4rem 1.5rem;
}

/* ==========================================================================
   Contact drawer
   ========================================================================== */

.contact-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0, 25, 67, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.contact-drawer-overlay[hidden] {
  display: none;
}
.contact-drawer-overlay.is-open {
  opacity: 1;
}

.contact-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 34rem;
  background-color: var(--color-bg-surface-light);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}
.contact-drawer-overlay.is-open .contact-drawer {
  transform: translateX(0);
}

.contact-drawer__inner {
  padding: 2.5rem 1.5rem 3rem;
}
@media (min-width: 640px) {
  .contact-drawer__inner {
    padding: 3rem 2.5rem 4rem;
  }
}

.contact-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.contact-drawer__close {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--color-content-primary);
  flex-shrink: 0;
}

.contact-drawer__divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: 2rem 0;
}

.contact-drawer__intro {
  color: var(--color-content-secondary);
}
/* Editable rich text (<p> per paragraph) replaces the old <br><br> gap; global p reset has no margin. */
.contact-drawer__intro > p + p {
  margin-top: 1em;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Without this, the [hidden] attribute set by site.js on a successful submit (form.hidden =
   true) has no visual effect - a class selector like .contact-form's "display: flex" above has
   the same specificity as the browser's built-in "[hidden] { display: none }" rule, and author
   CSS always wins that tie, so the form stayed visibly rendered even while .hidden was true. */
.contact-form[hidden] {
  display: none;
}

.contact-form__fieldset {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-form__fieldset[hidden] {
  display: none;
}

.contact-form__heading {
  margin-top: 0.5rem;
}

[data-contact-subpanel] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
[data-contact-subpanel][hidden] {
  display: none;
}
[data-contact-subpanel] p {
  color: var(--color-content-secondary);
}
[data-contact-subpanel] p a {
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.form-field__label {
  color: var(--color-content-secondary);
  font-size: 14px;
}

.form-field input[type='text'],
.form-field input[type='email'],
.form-field input[type='tel'],
.form-field select,
.form-field textarea {
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font: inherit;
  color: var(--color-content-primary);
  background-color: var(--color-bg-surface-light);
  width: 100%;
}
.form-field select {
  min-height: 2.5rem;
}
.form-field textarea {
  min-height: 6rem;
  resize: vertical;
}

.custom-select {
  position: relative;
}

.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font: inherit;
  color: var(--color-content-primary);
  background-color: var(--color-bg-surface-light);
  cursor: pointer;
  text-align: left;
}
.custom-select__trigger span {
  white-space: normal;
  overflow-wrap: break-word;
}
.custom-select__trigger svg {
  flex-shrink: 0;
  transition: transform 0.2s ease-out;
}
.custom-select__trigger[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.custom-select__list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  background-color: var(--color-bg-surface-light);
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  max-height: 16rem;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-select__list[hidden] {
  display: none;
}

.custom-select__option {
  padding: 0.75rem 1rem;
  color: var(--color-content-primary);
  cursor: pointer;
  white-space: normal;
  overflow-wrap: break-word;
}
.custom-select__option:hover {
  background-color: var(--color-bg-page-light);
}
.custom-select__option + .custom-select__option {
  border-top: 1px solid var(--color-border-subtle);
}

.form-field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.625rem;
}

/* Honeypot: off-screen rather than display:none/visibility:hidden - some bots skip fields
   they detect as computed-hidden, but still auto-fill anything positioned off-canvas. */
.form-field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-field--checkbox input {
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.form-field--checkbox .form-field__label {
  font-size: 14px;
}
.form-field--checkbox a {
  color: var(--color-content-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-field--file {
  width: fit-content;
}
.form-field--file .form-field__file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-content-tertiary);
  color: var(--color-content-tertiary);
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
}
.form-field--file input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.contact-form__submit-note {
  font-weight: 600;
}

.contact-drawer__info {
  background-color: var(--color-bg-info);
  color: var(--color-content-tertiary);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.contact-drawer__info p {
  color: var(--color-content-primary);
  font-size: 13px;
}

.contact-form__confirmation {
  color: var(--color-content-primary);
}

.contact-form__error {
  color: var(--color-content-error);
}

.login-drawer__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-subtle);
  margin-top: 2rem;
}

.login-drawer__tab {
  flex: 1;
  padding-block: 0.75rem;
  text-align: center;
  font-weight: 600;
  color: var(--color-content-primary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.login-drawer__tab.is-active {
  border-bottom-color: var(--color-border-action);
}

.login-drawer__panel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 1.5rem;
}
.login-drawer__panel[hidden] {
  display: none;
}

.login-drawer__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1.25rem;
  list-style: disc;
  color: var(--color-content-secondary);
  font-size: 14px;
}

.login-drawer__cta {
  width: 100%;
  text-align: center;
}

.login-drawer__link {
  color: var(--color-content-action);
  text-align: center;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}