/* ==========================================================================
   Bilfoto – limlaget mellom designet og WordPress.
   Alt som skyldes WordPress' egne regler (blokk-mellomrom, admin-linje,
   post-content-wrapper) håndteres her, slik at CSS-en fra prototypen kan
   gjenbrukes uendret.
   ========================================================================== */

/* WordPress legger «block gap» som margin på alle toppnivå-blokker. Seksjonene
   våre har sin egen målte rytme fra XD, så marginene nulles ut. */
.wp-site-blocks > *,
.wp-site-blocks > * + *,
.entry-content > *,
.entry-content > * + * { margin-block: 0; }

/* post-content-wrapperen skal ikke begrense bredden – seksjonene har .container */
.entry-content { max-width: none; }

/* Admin-linjen dekker den faste headeren og menyoverlegget når man er innlogget */
.admin-bar .site-header { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .menu-overlay { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }

/* Hopp-til-innhold: WordPress lager sin egen skip-link, prototypens CSS
   forventer klassen .skip-link */
.wp-site-blocks .skip-link:focus { z-index: calc(var(--z-menu) + 10); }

/* Bildeblokker fra kjernen (brukes bare i innlegg) skal følge samme flate look */
.wp-block-image img { border-radius: 0; }

/* Skjemaet kommer fra Elfsight. Til det er lagt inn holder plassholderen
   høyden, slik at siden kan korrekturleses med riktig layout. */
.form--plassholder {
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 32vw, 38rem);
  border: 1px dashed var(--bf-hairline);
}
.form--plassholder .form__note { margin: 0; text-align: center; }

/* Brødtekstområdene redigeres som vanlige Gutenberg-blokker. Avsnitt trenger
   ingen egen styling, men lister lagt inn av redaktør må få rimelig form. */
.service-intro__text .wp-block-list,
.body-text .wp-block-list,
.split__body .wp-block-list,
.lead .wp-block-list {
  list-style: disc;
  padding-inline-start: 1.2em;
  margin-block: .8em;
}
.service-intro__text .wp-block-list li,
.body-text .wp-block-list li,
.split__body .wp-block-list li,
.lead .wp-block-list li { margin-block: .3em; }

/* Regelen over satte «list-style: disc» på begge listetypene, så en nummerert
   liste fikk kuler i stedet for tall. */
.service-intro__text ol.wp-block-list,
.body-text ol.wp-block-list,
.split__body ol.wp-block-list,
.lead ol.wp-block-list { list-style: decimal; }

/* Editoren viser innerblocks-området i en egen wrapper. Den skal ikke arve
   avsnittsmargin, ellers hopper layouten mellom editor og front. */
.editor-styles-wrapper .acf-innerblocks-container > :first-child { margin-block-start: 0; }

/* XD-pilen (30x30) som maske. Ligger her og ikke i tokens.css, fordi tokens.css
   synkes fra prototypen og ville blitt overskrevet. */
:root {
  --bf-pil-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M266.769-730l-22.154-22.154v19.846H240V-760h27.692v4.615H247.846L270-733.231Z' transform='translate(-240 760)'/%3E%3C/svg%3E");
}

/* CTA-tittelen er nå en kjerneoverskrift, så XD-pilen kan ikke ligge som SVG
   inne i den. Den tegnes derfor som pseudoelement på .cta--pil, med samme
   størrelse (0,6em = 30 px ved 1920) og samme hover-forskyvning som før. */
.cta--pil .cta__title::after {
  content: "";
  display: inline-block;
  width: .6em; height: .6em;
  margin-inline-start: .4em;
  vertical-align: -.02em;
  background: var(--bf-gold);
  -webkit-mask: var(--bf-pil-maske) center / contain no-repeat;
          mask: var(--bf-pil-maske) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
.cta--pil .cta__title:hover::after { transform: translate3d(-.15em, -.15em, 0); }

/* Kjerneblokkene i kolonnene skal ikke arve WordPress-marginer – avstandene
   ligger i .service-intro__cta (grid gap) og .service-intro__text (p + p). */
.service-intro__text.wp-block-group,
.service-intro__cta.wp-block-group { margin-block: 0; }
/* Gjelder teaser og «bare CTA» – ikke hero uten bilde, der H1 skal ha luft over */
.cta > .wp-block-group:not(.hero__plain-tekst) > :first-child { margin-block-start: 0; }
/* Teaser: teksten over pille-lenken har 25 px luft ned, som i prototypen */
.cta > .wp-block-group > p { margin-block-end: var(--space-sm); }
.cta > .wp-block-group > p:last-child { margin-block-end: 0; }

/* --- Hero: tittel og intro er kjerneblokker ------------------------------ */

/* Produktvarianten hadde tre rader (tittel, mellomrom, foot) i markupen. Nå er
   det to grupper, så foot-en må selv legge seg nederst i 1fr-raden. */
.hero--page > .hero__tittelrad { align-self: start; }
.hero--page > .hero__foot { align-self: end; }
.hero--page > .wp-block-group { margin-block: 0; }

/* Kort hero (Hvem er vi): størrelsene lå som inline-stiler i prototypen. */
/* Klassen heter ikke hero__intro, fordi .hero--page .hero__intro låser bredden
   til 52ch. Prototypen overstyrte det med inline max-width: 68ch. */
.hero__intro--kort {
  /* 68ch regnes ut fra elementets egen skriftstørrelse. Prototypen arvet
     --fs-lead her (950 px); uten den ble bredden 792 px og teksten brøt feil. */
  font-size: var(--fs-lead);
  max-width: 68ch;
}
.hero__intro--kort > h1 { font-size: var(--fs-card); line-height: 1.3; }
.hero__intro--kort > p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin-block-start: var(--space-sm);
}

/* Hero uten bilde (Kontakt oss / Kundeuttalelser) */
.hero__plain-grid { align-items: start; }
/* WordPress nuller margin-block-start på første barn i en gruppe (med
   !important), så luften over H1-en legges som padding på gruppen i stedet. */
.hero__plain-tekst { padding-block-start: var(--space-sm); }
.hero__plain-tekst > h1 {
  font-size: var(--fs-display);
  margin-block-end: var(--space-sm);   /* linjehøyden arves fra base.css */
}
.hero__plain-tekst > p.body-text { max-width: 926px; }

/* Editoren har en wrapper rundt innerblocks der fronten ikke har det. */
.editor-styles-wrapper .hero__innhold { display: grid; align-content: end; gap: 0; width: 100%; }
.editor-styles-wrapper .hero--page .hero__innhold { align-content: space-between; height: 100%; }


/* ==========================================================================
   Innleggsmalen (single.html)

   Prototypen har ingen artikkelside, så dette er typografien temaet selv gir
   innlegg. Alt er scopet til .single-post: sidene består av ACF-blokker med
   egne avstander, og de skal ikke røre seg av dette.
   ========================================================================== */

/* Headeren er position: fixed. Sidene klarerer den med sin egen hero, men
   malene uten hero – innlegg, arkiv, søk og 404 – startet rett under toppen.
   Målt: h1 lå 56 px OVER headerens underkant på arkiv og søk. */
.single-post main > .section:first-child,
.archive main > .section:first-child,
.search main > .section:first-child,
.error404 main > .section:first-child {
  padding-block-start: clamp(7rem, 8.5vw, 10.5rem);
}

/* Arkiv- og søkelisten. blockGap er 0, så innleggene ville limt seg sammen så
   snart det finnes mer enn ett. */
.archive .wp-block-post-template,
.search .wp-block-post-template { list-style: none; padding-inline-start: 0; }

.archive .wp-block-post-template > li + li,
.search .wp-block-post-template > li + li { margin-block-start: var(--space-md); }

.archive .wp-block-post-title,
.search .wp-block-post-title { font-size: var(--fs-card); }

.archive .wp-block-post-title + .wp-block-post-excerpt,
.search .wp-block-post-title + .wp-block-post-excerpt { margin-block-start: var(--space-2xs); }

.archive .wp-block-query-pagination,
.search .wp-block-query-pagination {
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
  margin-block-start: var(--space-lg);
}

.archive .wp-block-post-title a:hover,
.search .wp-block-post-title a:hover { color: var(--bf-gold); }

/* Lesbar linjelengde: teksten lå på 1395 px, altså godt over 200 tegn per
   linje. Bildene får fortsatt full bredde – det er et fotografifirma. */
.single-post .entry-content {
  max-width: 46rem;
  margin-inline: auto;
}

.single-post .wp-block-post-date {
  text-align: center;
  font-size: var(--fs-source);
  color: var(--bf-text-muted);
  margin-block-end: var(--space-md);
}
.single-post .wp-block-post-featured-image { margin-block-end: var(--space-lg); }

/* Vertikal rytme. theme.json setter blockGap til 0 og regelen øverst i denne
   filen nullstiller marginene på .entry-content > *, så en artikkel kom ut som
   én sammenhengende tekstblokk. Her settes rytmen tilbake, kun for innlegg. */
.single-post .entry-content > * + * { margin-block-start: var(--space-sm); }

.single-post .entry-content > h2 {
  font-size: var(--fs-card);          /* --fs-section er en seksjonstittel (60 px), ikke en mellomtittel */
  margin-block-start: var(--space-md);
}
.single-post .entry-content > h3 {
  font-size: var(--fs-lead);
  margin-block-start: var(--space-sm);
}

.single-post .entry-content > figure { margin-block: var(--space-md); }
.single-post .entry-content figcaption {
  margin-block-start: var(--space-2xs);
  font-size: var(--fs-source);
  color: var(--bf-text-muted);
}

.single-post .entry-content > blockquote {
  margin-block: var(--space-md);
  padding-inline-start: var(--space-sm);
  border-inline-start: 2px solid var(--bf-gold);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}
.single-post .entry-content > blockquote p { margin-block: 0; }

/* a { text-decoration: none } gjelder hele nettstedet, og i brødteksten til en
   artikkel ble lenkene dermed usynlige. */
.single-post .entry-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.single-post .entry-content a:hover { color: var(--bf-gold); }