/* ============================================================
   Flotte Bygårder — Atelier Overlay
   ----------------------------------------------------------------
   Drop-in oppdatering. Inkluderes ETTER eksisterende CSS-filer.
   Endrer kun det som flytter designet til v3-balansert:
     · pille-knapper (border-radius 999px)
     · runde tags/kickers
     · pille-hover på nav-lenker
     · mykere skygge på kort, 16 px radius
     · oklch-baserte statusfarger
     · mono-font (JetBrains Mono) for kickers og data
   Resten av sidens stil arves fra base.css/components.css/pages.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Tilleggs-tokens (eksisterende beholdes) */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --color-accent-strong: #b48a4a;     /* mørkere brass til kontrast på lin */
  --color-accent-soft-2: #d9b87a;
  --color-stone: #d8cfba;
  --color-linen-2: #ede5d4;

  /* Oklch-statusfarger (harmonisert i metning) */
  --state-ok:    oklch(0.62 0.10 145);
  --state-warn:  oklch(0.74 0.13 70);
  --state-err:   oklch(0.57 0.16 28);
  --state-info:  oklch(0.55 0.08 240);

  /* Radius-skala (tre-trinn) */
  --r-frame: 0px;            /* hero, headers, footer */
  --r-card:  16px;           /* kort og bilder */
  --r-pill:  999px;          /* knapper, badges, nav-hover */

  /* Skygger — varmere */
  --shadow-soft: 0 1px 2px rgba(21,33,46,0.06), 0 1px 1px rgba(21,33,46,0.04);
  --shadow-lift: 0 8px 24px rgba(21,33,46,0.08);
  --shadow-deep: 0 20px 50px rgba(21,33,46,0.16);
}

/* ============================================================
   Knapper — pille-form (overstyrer dagens border-radius: 2px)
   ============================================================ */
.btn,
.btn--primary,
.btn--secondary,
.btn--ghost {
  border-radius: var(--r-pill) !important;
  text-transform: none !important;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 14px;
  transition: all 200ms ease;
  border: 0;
  cursor: pointer;
}
.btn--primary {
  background: var(--color-accent-strong);
  color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-accent-soft-2);
  color: var(--color-primary);
}
.btn--secondary {
  background: transparent;
  color: var(--color-text-on-dark, #fff);
  border: 1px solid rgba(255,255,255,0.55);
}
.btn--secondary:hover {
  background: rgba(255,255,255,0.08);
}
.btn--ghost {
  background: transparent;
  color: var(--color-accent-strong);
  padding: 8px 0;
  text-decoration: none;
}
.btn--ghost:hover { color: var(--color-accent); }

/* CTA i nav (ny pille-variant) */
.nav-cta {
  background: var(--color-accent-strong);
  color: var(--color-primary);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  border: 0;
  cursor: pointer;
}

/* ============================================================
   Header / Nav — beholder firkantet ramme,
   nav-lenker får pille-hover
   ============================================================ */
.site-header nav a,
header nav a {
  border-radius: var(--r-pill);
  padding: 7px 14px;
  transition: background 180ms ease, color 180ms ease;
}
.site-header nav a:hover,
header nav a:hover {
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}
.site-header nav a.active,
header nav a.active,
.site-header nav a[aria-current="page"],
header nav a[aria-current="page"] {
  background: rgba(180,138,74,0.12);
  color: var(--color-accent-soft-2);
}
/* Fjern eventuell underline-effekt fra opprinnelig design */
.site-header nav a::after,
header nav a::after { display: none !important; }

/* ============================================================
   Hero — "estab"-tag (datolinje i monospace messing)
   Markup: <p class="hero__estab">Oslo · Siden 1998</p>
   ============================================================ */
.hero__estab,
.hero__overline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent-soft-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 22px;
  width: fit-content;
}

/* Section-header — "kicker" pille over h2 */
.section-header .overline,
.overline {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  background: rgba(180,138,74,0.08);
  border: 1px solid rgba(180,138,74,0.22);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}

/* ============================================================
   Kort — service-card, project-card, info-cards
   Mykere radius og varmere hover
   ============================================================ */
.service-card,
.project-card,
.card {
  border-radius: var(--r-card) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  border: 1px solid var(--color-border);
}
.service-card:hover,
.project-card:hover,
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--color-accent-soft-2);
}
.service-card__more,
.project-card__more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-strong);
}

/* Nummerert tjeneste-kort: liten pille over h3 */
.service-card__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--color-accent-strong);
  margin-bottom: 14px;
  padding: 3px 10px;
  background: rgba(180,138,74,0.08);
  border-radius: var(--r-pill);
}

/* ============================================================
   Galleri / project-grid — store myke radier på bilderammen,
   firkantet ramme rundt seksjon urørt
   ============================================================ */
.project-card .image-wrap,
.project-card .project-card__image,
.featured__grid .image-wrap,
.gallery img {
  border-radius: var(--r-card);
  overflow: hidden;
}
.project-card img,
.featured__grid img {
  transition: transform 400ms ease;
}
.project-card:hover img,
.featured__grid a:hover img {
  transform: scale(1.03);
}

/* ============================================================
   Før/etter-slider — beholdes som spesifisert i design-guidelines,
   bare påfører ny radius og oppdaterte håndtaks-farger
   ============================================================ */
.before-after {
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.before-after__handle-knob {
  background: var(--color-accent-strong) !important;
  color: var(--color-primary) !important;
}
.before-after__label--for,
.before-after__label--etter {
  background: rgba(21,33,46,0.7) !important;
  color: #fff !important;
  padding: 5px 12px !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   Mørke seksjoner — varmer opp aksenttekst og bruker monospace
   for overline
   ============================================================ */
.cta-band,
.bg-dark,
section.bg-dark .overline {
  /* CTA-bånd og mørk seksjon arver pille-knapper automatisk */
}
section.bg-dark .overline,
.cta-band .overline {
  color: var(--color-accent-soft-2);
  background: rgba(180,138,74,0.12);
  border-color: rgba(180,138,74,0.3);
}

/* ============================================================
   Tilgjengelighet — fokusring i pille-form, ikke kantete
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-accent-strong) !important;
  outline-offset: 3px !important;
  border-radius: var(--r-pill);
}

/* ============================================================
   Status-chips (admin) — drop-in for chip()-funksjonen
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}
.chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip--utkast    { color: var(--state-warn); background: oklch(0.96 0.04 70); }
.chip--publisert { color: var(--state-ok);   background: oklch(0.95 0.04 145); }
.chip--planlagt  { color: var(--state-info); background: oklch(0.95 0.03 240); }
.chip--arkivert  { color: var(--color-text-light); background: var(--color-bg-alt); }

/* ============================================================
   Lesbare merkelapper (overline / «kicker»-pillen)
   Samme uttrykk — pille, monospace, sperret messing — men med kontrast som
   holder WCAG AA uansett underlag. Før: 1,8–4,3:1 over bilder, 2,7:1 på lys
   bakgrunn. Nå: 6,0:1 på lys bakgrunn og minst 8,7:1 over bilder, også helt
   hvite bilder, fordi pillen har sin egen mørke bakgrunn.
   ============================================================ */
.overline,
.section-header .overline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #6e5020;                         /* mørk messing — 6,0:1 */
  background: rgba(180,138,74,0.16);
  border: 1px solid rgba(110,80,32,0.32);
  padding: 6px 14px;
}

/* Over bilder og på mørke flater: mørk, halvgjennomsiktig pille med lys
   messing. Bakgrunnen gjør teksten lesbar uansett hva bildet bak viser. */
.overline--on-dark,
.hero__overline,
.hero__estab,
section.bg-dark .overline,
.cta-band .overline,
.page-hero .overline,
.project-hero .overline,
.article-hero .overline,
.blokk--bg-mork .overline,
.blokk-banner .overline {
  color: #ecd9b0;
  background: rgba(16,26,36,0.78);
  border: 1px solid rgba(217,184,122,0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 6px 14px;
}

/* Brødsmulesti over bilde: svak skygge og tydeligere skilletegn */
.breadcrumb--on-dark,
.breadcrumb--on-dark a {
  text-shadow: 0 1px 3px rgba(0,0,0,0.65), 0 0 12px rgba(0,0,0,0.35);
}
.breadcrumb--on-dark a { opacity: 1; }
.breadcrumb--on-dark li + li::before { color: var(--color-accent-soft-2); opacity: 1; }