/* components — header / footer / nav / CTA / lang (Task 2.1) */

/* ---------- Sticky header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3);
  padding-block:var(--s-2);
}

/* ---------- Logo ---------- */
.site-logo{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:var(--step-1);
  line-height:1;
  text-decoration:none;
  color:var(--c-ink);
}
.site-logo:hover{ color:var(--c-orange-action); }
/* Orange accent on the brand mark; dark text keeps it readable on light bg. */
.site-logo::first-letter{ color:var(--c-orange); }

/* ---------- Primary menu ---------- */
.site-nav{ margin-inline-start:auto; }
.primary-menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:var(--s-3);
}
.primary-menu a{
  text-decoration:none;
  color:var(--c-ink);
  font-size:var(--step--1);
  font-weight:500;
}
.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a{
  color:var(--c-orange-action);
}
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a{
  text-decoration:underline; text-underline-offset:0.3em;
}

/* ---------- Header actions (lang + CTA) ---------- */
.site-header__actions{
  display:flex; align-items:center; gap:var(--s-3);
}

/* ---------- CTA button ---------- */
.btn{
  display:inline-block;
  font-weight:600;
  text-decoration:none;
  border:0; cursor:pointer;
}
.btn--cta{
  background:var(--c-orange-action);
  color:#fff;                 /* white on #B05000 = 5.26:1, AA ok */
  padding:.6em 1.2em;
  border-radius:6px;
  font-size:var(--step--1);
}
.btn--cta:hover{ background:var(--c-orange-action-hover); color:#fff; }
.btn--cta:focus-visible{ outline:2px solid var(--c-ink); outline-offset:2px; }

/* ---------- Language switcher ---------- */
.lang{ display:flex; gap:.4em; align-items:center; font-size:var(--step--1); }
.lang a{ text-decoration:none; color:var(--c-ink-70); }
.lang a:hover{ color:var(--c-orange-action); }
.lang a[aria-current="true"]{ color:var(--c-ink); font-weight:700; }

/* ---------- Mobile toggle (hidden on desktop) ---------- */
.nav-toggle{
  display:none;
  width:48px; height:48px;   /* >=48px ensures WCAG/Lighthouse target-size pass */
  padding:0;
  background:transparent; border:0; cursor:pointer;
  position:relative;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after{
  content:""; display:block;
  position:absolute; left:50%; transform:translateX(-50%);
  width:24px; height:2px; background:var(--c-ink);
}
.nav-toggle__bar{ top:50%; transform:translate(-50%,-50%); }
.nav-toggle__bar::before{ top:-7px; }
.nav-toggle__bar::after{ top:7px; }
.nav-toggle:focus-visible{ outline:2px solid var(--c-ink); outline-offset:2px; }

/* ---------- Footer (dark ink, light text — AA: #FAF8F5 on #1A1D21 ~14:1) ---------- */
.site-footer{
  background:var(--c-ink);
  color:var(--c-bg);
  margin-top:var(--s-12);
}
.site-footer__inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-4);
  /* extra bottom padding so the copyright line isn't flush to the viewport edge */
  padding-block:var(--s-8) calc(var(--s-8) + var(--s-3));
}
.site-footer a{ color:var(--c-bg); }
.site-footer a:hover{ color:var(--c-orange); }
.site-footer__brand{
  font-family:var(--font-serif); font-weight:700;
  font-size:var(--step-1); margin:0 0 var(--s-1);
}
.site-footer__brand::first-letter{ color:var(--c-orange); }
/* Footer logo (white/orange PNG on the dark footer) — Task 8.1. */
.site-footer__contact picture{ display:block; margin:0 0 var(--s-2); }
img.site-footer__logo{ height:40px; width:auto; }
.site-footer address{ font-style:normal; line-height:1.8; }
.footer-menu{ list-style:none; margin:0 0 var(--s-2); padding:0; display:flex; flex-direction:column; gap:.4em; }
.footer-menu a{ text-decoration:none; }
.site-footer__privacy{ text-decoration:none; }
.site-footer__meta{ display:flex; flex-direction:column; gap:var(--s-2); }
.site-footer .lang a{ color:var(--c-bg); }
.site-footer .lang a[aria-current="true"]{ color:#fff; }
.site-footer__copy{ margin:0; font-size:var(--step--1); color:var(--c-line); }

/* ---------- Responsive: mobile nav (<=768px) ---------- */
@media (max-width:768px){
  .nav-toggle{ display:block; order:3; }
  .site-header__inner{ flex-wrap:wrap; }

  .site-nav{
    flex-basis:100%;
    margin-inline-start:0;
    order:4;
    display:none;                 /* collapsed by default */
  }
  .site-nav.is-open{ display:block; }   /* .is-open toggled by main.js */
  .primary-menu{
    flex-direction:column; align-items:flex-start;
    gap:var(--s-2);
    padding-block:var(--s-2);
  }

  .site-header__actions{ order:2; }
}

/* ============================================================
   Reusable components (Task 4.1)
   ============================================================ */

/* ---------- Reveal helper (main.js adds .in) ----------
   Only hide under .js — the inline head script swaps no-js→js. If JS fails,
   the hidden state never applies, so content is always visible. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s, transform .6s;
}
.js [data-reveal].in{
  opacity:1;
  transform:none;
}
/* reduced-motion: base.css disables the transition; main.js still adds .in,
   so the final (visible) state applies immediately. */

/* ---------- Testimonial ---------- */
.testimonial{
  margin:0;
  max-width:46ch;
}
.testimonial__quote{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:var(--step-2);
  line-height:1.25;
  color:var(--c-ink);
  margin:0 0 var(--s-3);
  position:relative;
  padding-top:var(--s-3);
}
/* Oversized decorative opening quote (accent orange, not text-carrying). */
.testimonial__quote::before{
  content:"\201C";
  position:absolute;
  top:-.35em; left:-.06em;
  font-size:3em;
  line-height:1;
  color:var(--c-orange);
}
.testimonial__cite{
  display:flex;
  flex-direction:column;
  gap:.15em;
  font-style:normal;
}
.testimonial__name{
  font-weight:600;
  color:var(--c-ink);
}
.testimonial__role{
  font-size:var(--step--1);
  color:var(--c-ink-70);
}
.testimonial__logo{
  margin-top:var(--s-2);
  max-height:40px;
  width:auto;
}

/* ---------- Stat grid ---------- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-6) var(--s-4);
}
.stat{
  display:flex;
  flex-direction:column;
  gap:.25em;
}
.stat__value{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:var(--step-4);
  line-height:1;
  color:var(--c-orange-action);
  font-variant-numeric:tabular-nums;
}
.stat__label{
  font-size:var(--step--1);
  color:var(--c-ink-70);
  line-height:1.35;
}

/* ---------- Conversion band ---------- */
.conversion{
  background:var(--c-teal);
  color:var(--c-bg);   /* #FAF8F5 on #13474C ≈ 8.6:1, AA ok */
}
/* Optional generated atmosphere texture (Task 8.2). Activated only when
   template-parts/conversion.php finds assets/img/generated/section-atmosphere-1.*
   A dark teal scrim over the texture preserves the AA contrast of white text. */
.conversion--has-bg{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--c-teal);
}
.conversion--has-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(19,71,76,.78);   /* keeps #FAF8F5 text comfortably AA */
  pointer-events:none;
}
.conversion--has-bg > .conversion__inner{
  position:relative;   /* lift content above the scrim */
  z-index:1;
}
.conversion__inner{
  max-width:64ch;
  text-align:center;
}
.conversion__heading{
  color:var(--c-bg);
  margin:0 0 var(--s-3);
}
.conversion__lead{
  margin:0 0 var(--s-4);
  color:var(--c-bg);
}
.conversion__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--s-3);
}
.conversion__micro{
  margin-top:var(--s-4);
}
/* CTA on the dark teal band keeps white text — already AA on orange-action. */

/* ---------- Secondary / micro CTA text links ---------- */
.cta-secondary,
.cta-micro{
  display:inline-block;
  font-weight:600;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.2em;
}
.cta-secondary:hover,
.cta-micro:hover{
  text-decoration:none;
  color:var(--c-orange);
}
.cta-secondary:focus-visible,
.cta-micro:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}
.cta-micro-frame{
  margin:0 0 .35em;
  font-size:var(--step--1);
  color:inherit;
  opacity:.9;
}

/* ============================================================
   Front-page components (Task 4.2)
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  padding-block:var(--s-6) var(--s-6);
}
.hero__inner{
  display:grid;
  grid-template-columns:1fr;   /* mobile: single column, text first */
  gap:var(--s-6);
  align-items:center;
  min-width:0;
}
.hero__text{
  max-width:42ch;
  min-width:0;   /* allow grid child to shrink so long words can't force overflow */
}
.hero__headline{
  margin:0 0 var(--s-3);
  /* Scoped down from the global h1 --step-4 so the long Danish headline keeps
     the hero above the fold on desktop and never clips on mobile. */
  font-size:clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);
  line-height:1.12;
  overflow-wrap:break-word;   /* long words still wrap, never overflow mobile */
  hyphens:manual;             /* no auto-hyphenation of the headline on desktop */
}
.hero__subline{
  font-size:var(--step-1);
  color:var(--c-ink-70);
  margin:0 0 var(--s-3);
}
.hero__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3);
  margin-bottom:var(--s-3);
}
.hero__proof{
  margin:0;
  font-size:var(--step--1);
  color:var(--c-ink-70);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

/* Hero visual — the real Bjarke portrait. */
.hero__visual{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  overflow:hidden;
}
.hero__visual picture{
  display:block;
  width:100%;
  height:100%;
}
.hero__img{
  display:block;
  width:100%;
  height:100%;
  max-height:480px;
  object-fit:cover;
  border-radius:16px;
}

@media (min-width:768px){
  .hero{
    padding-block:var(--s-8) var(--s-6);
  }
  .hero__inner{
    grid-template-columns:3fr 2fr;   /* asymmetric ~60/40, text | visual */
    gap:var(--s-8);
    align-items:center;
  }
  .hero__img{
    max-height:520px;
  }
}

/* ---------- Qualifier ---------- */
.qualifier__heading{
  margin:0 0 var(--s-6);
}
.qualifier__grid{
  display:grid;
  grid-template-columns:1fr;        /* mobile: stacked */
  gap:var(--s-6);
}
@media (min-width:768px){
  .qualifier__grid{
    grid-template-columns:1fr 1fr;  /* two columns on desktop */
    gap:var(--s-8);
  }
}
.qualifier__col-title{
  font-size:var(--step-1);
  margin:0 0 var(--s-3);
}
.qualifier__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
}
.qualifier__list li{
  position:relative;
  padding-inline-start:1.8em;
  line-height:1.5;
}
/* "for" list — orange check accent (decorative mark, not text-carrying). */
.qualifier__list--for li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--c-orange-action);
  font-weight:700;
}
.qualifier__col--for .qualifier__col-title{
  color:var(--c-ink);
}
/* "not" list — muted, with a neutral dash marker. */
.qualifier__list--not li{
  color:var(--c-ink-70);
}
.qualifier__list--not li::before{
  content:"–";
  position:absolute;
  left:0;
  top:0;
  color:var(--c-ink-70);
  font-weight:700;
}
.qualifier__col--not .qualifier__col-title{
  color:var(--c-ink-70);
}

/* ---------- Services grid ---------- */
.services-grid__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--s-4);
}
.service-card{
  position:relative;       /* anchor for the stretched link */
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  padding:var(--s-4);
  border:1px solid var(--c-line);
  border-radius:12px;
  background:var(--c-bg);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(26,29,33,.10);
  border-color:var(--c-orange);
}
.service-card__title{
  margin:0;
  font-size:var(--step-1);
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}
.service-card__link{
  text-decoration:none;
  color:var(--c-ink);
}
.service-card__link:hover{
  color:var(--c-orange-action);
}
/* Stretched link: the whole card is clickable, link text stays discernible. */
.service-card__link::after{
  content:"";
  position:absolute;
  inset:0;
}
.service-card__link:focus-visible{
  outline:2px solid var(--c-ink);
  outline-offset:4px;
}
.service-card__value{
  margin:0;
  color:var(--c-ink-70);
  line-height:1.5;
}
.service-card__more{
  margin-top:auto;
  font-weight:600;
  font-size:var(--step--1);
  color:var(--c-orange-action);
}
.service-card:hover .service-card__more{
  color:var(--c-orange-action-hover);
}

/* ---------- Contact Form 7 (Task 7.1) ---------- */
.wpcf7-form p{
  margin:0 0 var(--s-3);
  font-size:var(--step--1);
  font-weight:600;
  color:var(--c-ink);
  line-height:1.4;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea{
  display:block;
  width:100%;
  margin-top:.4em;
  padding:.7em .85em;
  font-family:var(--font-sans);
  font-size:var(--step-0);
  font-weight:400;
  color:var(--c-ink);
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:6px;
  line-height:1.4;
  -webkit-appearance:none;
  appearance:none;
}
.wpcf7-form textarea{
  min-height:9rem;
  resize:vertical;
}
.wpcf7-form select{
  /* keep a native caret affordance after removing default appearance */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%234A4F57' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9em center;
  padding-right:2.4em;
  cursor:pointer;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{ color:var(--c-ink-70); }
.wpcf7-form input:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form textarea:focus-visible{
  outline:2px solid var(--c-ink);
  outline-offset:1px;
  border-color:var(--c-ink);
}

/* Consent checkbox row */
.wpcf7-form .cf7-consent{
  display:flex;
  align-items:flex-start;
  gap:.6em;
  font-weight:400;
  color:var(--c-ink-70);
  font-size:var(--step--1);
  line-height:1.55;
}
.wpcf7-form .cf7-consent .wpcf7-acceptance{ flex:0 0 auto; margin-top:.15em; }
.wpcf7-form .cf7-consent input[type="checkbox"]{
  width:1.15em; height:1.15em;
  accent-color:var(--c-orange-action);
  cursor:pointer;
}
.wpcf7-form .cf7-consent a{ color:var(--c-orange-action); font-weight:600; }
.wpcf7-form .cf7-consent a:hover{ color:var(--c-ink); }

/* Submit button — reuse the CTA look */
.wpcf7-form .wpcf7-submit{
  background:var(--c-orange-action);
  color:#fff;
  padding:.7em 1.4em;
  border-radius:6px;
  border:0;
  font-family:var(--font-sans);
  font-size:var(--step-0);
  font-weight:600;
  cursor:pointer;
}
.wpcf7-form .wpcf7-submit:hover{ background:var(--c-orange-action-hover); }
.wpcf7-form .wpcf7-submit:focus-visible{ outline:2px solid var(--c-ink); outline-offset:2px; }

/* Honeypot — visually & semantically hidden, but reachable by bots */
.wpcf7-form .cf7-hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}

/* CF7 response / validation messaging */
.wpcf7 .wpcf7-not-valid-tip{
  display:block;
  margin-top:.35em;
  color:var(--c-orange-action);
  font-size:var(--step--1);
  font-weight:600;
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid{ border-color:var(--c-orange-action); }
.wpcf7 .wpcf7-response-output{
  margin:var(--s-3) 0 0;
  padding:.85em 1em;
  border:1px solid var(--c-line);
  border-radius:6px;
  font-size:var(--step--1);
  font-weight:600;
  line-height:1.5;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output{
  border-color:var(--c-orange-action);
  color:var(--c-orange-action);
}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--c-teal);
  color:var(--c-teal);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{
  border-color:var(--c-orange-action);
  color:var(--c-orange-action);
}