/* Safe IT — a11y contrast + focus overrides. !important beats inline styles. */

/* ---- Brand green darkened for WCAG AA (both directions vs white/beige). ---- */
:root {
  --safe-green:      #00655a !important;
  --safe-green-dark: #005046 !important;
  --green:           #00655a !important;   /* Forside inline var */
  --green-dark:      #005046 !important;
  --ink-soft:        #3a4644 !important;   /* muted body text */
}

/* Small brand-colored labels on light backgrounds. */
.eyebrow,
.nav-grp-label,
.logobar-label,
.nav-drawer-group > .nav-grp-label,
.post-cat,
.tag,
.hl,
.wheel-cell .n,
.k-hours h4, .k-hours h3,
[data-reveal] .accent,
[data-reveal] em,
.link-green,
.text-green {
  color: #00655a !important;
  opacity: 1 !important;
}

/* Small light-grey labels — darken for AA on white. */
.lbl,
.logobar-label {
  color: #4a5250 !important;
  opacity: 1 !important;
}

/* Eyebrow that inline-references accent-ink AND sits directly under hero grid
   (dark contrast area). Scoped to hero-ai to avoid affecting light sections. */
.hero-ai .eyebrow[style*="accent-ink"] {
  color: #00655a !important;
}
.aiteam-head .eyebrow {
  color: #00655a !important;
}


/* Bordeaux Fjernsupport-badge button — darker bg for AA with white text. */
.btn-remote[style*="var(--bordeaux)"],
.btn-remote[style*="#BF5E5C"],
.btn-remote[style*="#bf5e5c"] {
  background-color: #8b1f1d !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}


/* Eyebrow specifically on dark deep-green sections must be light. */
[style*="2A4D4E"] .eyebrow,
[style*="2a4d4e"] .eyebrow,
[style*="background:#2A4D4E"] .eyebrow,
[style*="background:#2a4d4e"] .eyebrow,
.cta-dark .eyebrow,
.cta-big-grid .eyebrow,
.cta-band .eyebrow,
.cta-small .eyebrow,
.cta-final .eyebrow,
.fs-cta .eyebrow,
.hero-dark .eyebrow,
.section-dark .eyebrow,
section[class*="dark"] .eyebrow,
.wrap-dark .eyebrow,
[data-theme="dark"] .eyebrow {
  color: #ffffff !important;
}
.cta-dark .eyebrow::before,
.cta-big-grid .eyebrow::before,
.cta-band .eyebrow::before,
.cta-small .eyebrow::before,
.cta-final .eyebrow::before,
.fs-cta .eyebrow::before,
.hero-dark .eyebrow::before {
  background: #ffffff !important;
}


/* "Off" / disabled list items (previously #929b9a with opacity 0.6). */
.pkg ul .off,
.pkg ul li.off,
li.off,
.muted,
.text-muted {
  color: #3a4644 !important;
  opacity: 1 !important;
}


/* Solid green buttons / badges — darker background so white text passes AA. */
.btn-primary,
.btn-accent,
.badge,
.btn-ghost-light,
.nav-right .btn-primary,
.nav-drawer-cta .btn-primary,
button[data-cat] {
  background-color: #00655a !important;
  border-color: #00655a !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-accent:hover,
.nav-right .btn-primary:hover,
.nav-drawer-cta .btn-primary:hover {
  background-color: #005046 !important;
  border-color: #005046 !important;
}

/* Active nav link (aria-current) contrast on beige. */
a[aria-current="page"],
.nav-menu a.active {
  color: #00655a !important;
}

/* Green section backgrounds — lighten paragraph copy for AA. */
.fs-cta,
.fs-cta > .wrap,
[style*="background:#009887"],
[style*="background: #009887"] {
  background-color: #00655a !important;
}
.fs-cta p,
.fs-cta a,
.fs-cta li {
  color: #ffffff !important;
}

/* Fjernsupport / bordeaux button — darker red for text on white background only.
   Preserve inline overrides where the button already sits on a colored background. */
.btn-remote:not([style*="background"]):not([style*="Background"]) {
  color: #8b1f1d !important;
  border-color: #8b1f1d !important;
}
.btn-remote:not([style*="background"]):hover {
  background-color: #8b1f1d !important;
  color: #ffffff !important;
}
/* Any bordeaux-styled button needs white text with high contrast. */
.btn-remote[style*="background"] {
  color: #ffffff !important;
}


/* Visible keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 3px solid #00655a !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

/* Skip-to-content link. */
.a11y-skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 10000;
  background: #00655a;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease-in-out;
}
.a11y-skip:focus {
  top: 12px;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}


/* ==========================================================
   Nav alignment — ensure logo, menu items, phone, and buttons
   all sit on the same horizontal midline across every page.
   ========================================================== */
.nav-inner{align-items:center !important;line-height:1}
.nav-inner .logo{display:inline-flex !important;align-items:center !important;line-height:0}
.nav-inner .logo img{display:block;vertical-align:middle}
.nav-inner .nav-menu{align-items:center !important;line-height:1}
.nav-inner .nav-menu>li{display:flex;align-items:center}
.nav-inner .nav-menu>li>a{display:inline-flex;align-items:center;line-height:1}
.nav-inner .nav-right{align-items:center !important;line-height:1}
.nav-inner .nav-right>*{align-items:center;line-height:1}
@media (min-width:961px){.nav-inner .nav-toggle{display:none !important}}
.nav-inner .nav-phone{display:inline-flex !important;align-items:center;line-height:1}


/* ==========================================================
   Unified "Første skridt" CTA look — every .cta-band and
   .cta-big section matches the Forside cta-final:
   bright green background, white text, white pill primary
   button, and a darker-teal secondary pill.
   ========================================================== */
.cta-band,
.cta-big{
  background:#009887 !important;
  color:#ffffff !important;
}
.cta-band h1,.cta-band h2,.cta-band h3,.cta-band h4,
.cta-big  h1,.cta-big  h2,.cta-big  h3,.cta-big  h4{
  color:#ffffff !important;
}
.cta-band p,.cta-big p{ color:rgba(255,255,255,.92) !important; }
.cta-band .eyebrow,.cta-big .eyebrow{ color:#ffffff !important; }
.cta-band .eyebrow::before,.cta-big .eyebrow::before{ background:#ffffff !important; }

/* Info card inside the CTA */
.cta-band .cta-card,
.cta-big  .cta-card,
.cta-big  .check-card{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#ffffff !important;
}
.cta-band .cta-card h3,.cta-band .cta-card h4,
.cta-big  .cta-card h3,.cta-big  .cta-card h4,
.cta-big  .check-card h3,.cta-big  .check-card h4{
  color:#ffffff !important;
}
.cta-band .cta-card ul,.cta-band .cta-card li,
.cta-big  .cta-card ul,.cta-big  .cta-card li,
.cta-big  .check-card ul,.cta-big  .check-card li{
  color:#ffffff !important;
}
.cta-band .cta-card li::before,
.cta-big  .cta-card li::before,
.cta-big  .check-card li::before{ color:#ffffff !important; }

/* Buttons — white pill + darker-teal pill */
.cta-band .btn-accent,.cta-band .btn-primary,.cta-band .btn-light,
.cta-big  .btn-accent,.cta-big  .btn-primary,.cta-big  .btn-light{
  background:#ffffff !important;
  color:#0f3b39 !important;
  border-color:#ffffff !important;
}
.cta-band .btn-ghost-light,.cta-band .btn-ghost,.cta-band .btn-dark,
.cta-big  .btn-ghost-light,.cta-big  .btn-ghost,.cta-big  .btn-dark{
  background:#007f70 !important;
  color:#ffffff !important;
  border-color:transparent !important;
}

/* ===== Mobiltilpasning (kun telefoner, ≤600px) — påvirker ikke tablet/desktop ===== */
@media (max-width:600px){
  html,body{overflow-x:hidden;max-width:100%}
  img,video,iframe,svg{max-width:100%}
  h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
  table{max-width:100%}
  .lic-tablewrap{max-width:100%}
  .st2 .ms-gal a:first-child{aspect-ratio:auto!important;grid-column:auto!important}
  .ew-row{grid-template-columns:1fr!important;gap:20px 0!important}
  .ew-col{padding:6px 0 6px 18px!important}
  .gd-hero .ms-hero-img{width:100%!important;left:0!important;right:0!important}
}
/* Mobil: FAQ-sektion i én kolonne */
@media (max-width:600px){
  html body section .faq-grid,html body section.faq .faq-grid{display:grid!important;grid-template-columns:1fr!important;gap:28px!important}
  html body .faq-grid > *{min-width:0!important;width:100%!important}
  html body .faq-grid .btn{max-width:100%}
}
/* Mobil: PC-sikkerhedspakke teamafsnit */
@media (max-width:600px){
  html body .st2 .ms-gal{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;width:100%!important;height:auto!important;padding:0 0 28px!important}
  html body .st2 .ms-gal a{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/5!important;min-width:0!important;width:100%!important}
  html body .st2 .ms-gal img{width:100%!important;height:100%!important;object-fit:cover!important}
  html body .st2 .ms-gal .tag{font-size:0!important;left:8px!important;right:auto!important;bottom:8px!important;white-space:nowrap!important}
  html body .st2 .ms-gal .tag::before{content:attr(data-name);font-size:12px}
  html body .st2 .st2-rule{display:none!important}
}
/* Mobil: Genbrugt IT – billede helt i toppen af sektionen */
@media (max-width:600px){ html body section.consider.gr{padding-top:0!important} }

@media (max-width:600px){html body .gy-c .gy-i{display:none!important}}