/* Självhostade rubrikfonter (OFL-licens, latin-subset) – inga anrop till
   Google Fonts från besökarnas webbläsare. Filerna ligger i webroot och
   är oföränderliga: byts fonten, byt även filnamn (cache är evig). */
@font-face {
  font-family: "Playfair Display";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/font-playfair-700.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/font-caveat-700.woff2") format("woff2");
}

/* THEME "Medelhav" – laddas EFTER style.css, före kundens :root-override.
   Rör bara utseende (färg/typografi/radier/skuggor) – aldrig .wrap-bredd,
   galleri-gridets spans/gap eller andra layoutkontrakt mot admin-editorn. */
:root {
  /* Temat sätter BAS-färgerna. De semantiska (--sea, --sand …) härleds i
     style.css och byts i mörkt läge — sätter temat dem direkt går mörkt
     läge förlorat för just det temat. */
  --sand-base: #faf3e3;      /* kund-slot "Bakgrund": varm elfenben */
  --paper-base: #fffbf1;
  --ink-base: #42251c;
  --ink-2-base: #6e4c40;
  --sea-base: #1777b8;       /* kund-slot "Accent": medelhavsblå */
  --sea-deep-base: #5b2f23;  /* kund-slot "Mörk": bränd terra */
  --sun-base: #e05a33;       /* kund-slot "Varm": terrakotta */
  --rule-base: #ead9c2;
  --shadow: 0 20px 50px -20px color-mix(in srgb, var(--sun) 45%, transparent);
}
body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; }
h1, h2, h3 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; }

/* Masthead */
.masthead { background: color-mix(in srgb, var(--paper) 84%, transparent); }
.brand .mark {
  background: linear-gradient(135deg, var(--sun), color-mix(in srgb, var(--sun) 55%, #9256a0));
  font-family: "Playfair Display", Georgia, serif;
}
nav a:hover, nav a.active { color: var(--sun); }

/* Hero: solnedgångshimmel, utan sol.
   Himlen blandas mot --sand i stället för mot fasta ljusa hexvärden.
   Med hårdkodad himmel blev heron en ljus yta mitt i en mörk sida, och
   herotexten, som är ljus i mörkt läge, försvann i den.

   Här stod förut en målad gul sol uppe till höger. Den passade en
   solkust men inte ett bageri eller en slakteributik, och den var en fast
   färg som ingen kund valt. Himlen i sajtens egna färger räcker. */
.hero {
  color: var(--ink);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sea) 24%, var(--paper)) 0%,
      color-mix(in srgb, var(--sun) 22%, var(--sand)) 58%,
      var(--sand) 100%);
  padding: 6.5rem 0 5.5rem;
}
/* Överraden och ingressen dras mot bläckfärgen. Ren --sun på himlens
   ljusa överkant gav överraden 2,6:1 (under 3:1, som stor text kräver),
   och --ink-2 på den mörka himlen i mörkt läge gav ingressen 4,3:1. I
   ljust läge blir de mörkare, i mörkt ljusare, eftersom --ink vänder.
   Uppmätt 2026-09-29 med temats färger: överraden 4,7:1 i ljust läge
   och 6,6:1 i mörkt, ingressen 7,2:1 och 6,4:1. */
.hero .eyebrow {
  color: color-mix(in oklab, var(--sun) 55%, var(--ink));
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  text-transform: none; letter-spacing: .02em; font-size: 1.6rem;
}
.hero h1 { color: var(--sea-deep); font-size: clamp(2.6rem, 7vw, 4.6rem); }
.hero .lede { color: color-mix(in srgb, var(--ink) 50%, var(--ink-2)); font-size: 1.18rem; }
.cta {
  background: linear-gradient(135deg, var(--sun), color-mix(in srgb, var(--sun) 62%, #ffc31a));
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--sun) 55%, transparent);
}
.cta.ghost {
  color: var(--sea-deep);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--sea-deep) 35%, transparent);
}

/* Sektioner + rubriker */
.section-head h2 { color: var(--sea-deep); }
.prose h2, .prose h3, .contact h2, .unlock h2 { color: var(--sea-deep); }
.prose blockquote { border-left-color: var(--sun); }

/* Kluster-titel: handskriven accent i stället för uppercase */
.cluster-title {
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  text-transform: none; letter-spacing: .01em;
  font-size: 1.7rem; color: var(--sun);
}
.cluster-title::before {
  height: 3px; border-radius: 3px; width: 2.2rem;
  background: linear-gradient(90deg, var(--sun), #f2a618);
}

/* Kort: mjukare radier + varm färgad skugga */
.cards article {
  border-radius: 22px;
  border-color: var(--rule);
  box-shadow: 0 10px 30px -15px rgba(115, 49, 25, .28);
}
.cards article:hover { box-shadow: var(--shadow); }
.pin { background: color-mix(in srgb, var(--sea) 12%, transparent); }

/* Checklista: rundare box */
.checklist li::before { border-radius: 6px; }

/* Galleri: varm ram + varm bildtext-gradient (ersätter hårdkodad teal) */
.gallery figure {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--sun) 16%, var(--rule));
  box-shadow: 0 10px 30px -18px rgba(115, 49, 25, .35);
}
/* BAS-färgen: --sea-deep ljusas upp i mörkt läge, och bildtexten är vit. */
.gallery figcaption {
  background: linear-gradient(transparent, color-mix(in srgb, var(--sea-deep-base) 82%, transparent));
}
.lightbox { background: rgba(42, 18, 11, .93); }
.lightbox img { border-radius: 14px; }

/* Kalender */
.calendar-embed iframe { border-radius: 18px; border-color: var(--rule); }

/* Kontakt/upplåsning */
/* Fältbakgrunden följer sidan. Vitt gav vita rutor med ljus text i
   mörkt läge, alltså ett formulär man inte kunde läsa det man skrev i. */
.contact input, .contact textarea, .unlock input { border-radius: 14px; background: var(--paper); }
.contact button, .unlock button {
  background: linear-gradient(135deg, var(--sun), color-mix(in srgb, var(--sun) 62%, #ffc31a));
}
.contact button:hover, .unlock button:hover {
  background: var(--sea-deep);
}

/* Footer: full bredd, djuphavsband med prickmönster (ref-blinkning).
   Bandet är --sea-base, den valda färgen, och inte --sea: i mörkt läge
   ljusas --sea upp för att synas som text mot mörk botten, och som
   bakgrund blev det ett ljusblått band där den ljusa texten och
   ikonerna knappt syntes (under 2:1). Den valda färgen är den som ska
   bära vit text, se promptens färgregler. */
footer.wrap {
  width: 100%; max-width: none; margin: 2.5rem 0 0; padding: 3rem 0;
  border-top: 0; color: #f6e8da;
  background:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, .14) 1.2px, transparent 1.8px),
    var(--sea-base);
  background-size: 20px 20px, auto;
}
footer.wrap p { width: min(1100px, 92%); margin: 0 auto; }
/* Sociala kanaler: sidfoten går kant till kant här, så ikonraden får
   samma spaltbredd som raderna under den. */
footer.wrap .social { width: min(1100px, 92%); margin: 0 auto 1rem; }

/* Foto-hero: mörk slöja bakom texten, fotot i sina egna färger bredvid.

   Förut låg en ljus sandslöja över hela fotot, med mörk text ovanpå.
   Den tvättade ur fotot: ett surdegsbröd med mörk skorpa blev blekt och
   grått, och på en ljus del av fotot fick texten sin kontrast bara av
   slöjan. Nu är slöjan sajtens mörka BAS-färg, som i klassisk, med ljus
   text. En mörk slöja tar ljus men inte färg: skorpan är fortfarande
   brun, bara mörkare.

   På bred skärm står texten i en spalt till vänster, och slöjan är tät
   bara där. Mot höger tunnas den ut, och där syns fotot nästan som det
   är. Spalten är rubrikens och ingressens bredd (max-width nedan), räknad
   från .wrap:s vänsterkant, som är 4 % eller mitten minus 550px.

   Täckningen bakom texten är minst 82 %. Uppmätt i webbläsaren
   2026-09-29 mot det ljusaste som låg bakom varje textrad, över ett
   nästan vitt foto (värsta fallet) med temats terrakotta: rubriken 6,7:1,
   ingressen 5,8:1, spökknappen 5,8:1 och överraden 5,0:1, i ljust och
   mörkt läge, 1440, 1024 och 390 bred. Över surdegsbrödet mer.

   BAS-färgen och inte --sea-deep: den semantiska ljusas upp i mörkt läge,
   och som slöja hade den blivit en ljus yta under ljus text. */
.hero.has-photo {
  --hero-col: calc(max(4%, 50% - 550px) + 44rem);
  color: #fff;
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--sea-deep-base) 88%, transparent) 0,
      color-mix(in srgb, var(--sea-deep-base) 82%, transparent) var(--hero-col),
      color-mix(in srgb, var(--sea-deep-base) 10%, transparent) calc(var(--hero-col) + 24%)),
    var(--hero-photo);
}
.hero.has-photo h1,
.hero.has-photo .lede { max-width: 44rem; }
.hero.has-photo h1 { color: #fff; }
.hero.has-photo .lede { color: color-mix(in srgb, #fff 92%, var(--sea-deep-base)); }
/* Överraden i handstil: tunna drag, så den får en ljus ton av den varma
   färgen och inte den mättade. Terrakotta på terrakotta syntes inte. */
.hero.has-photo .eyebrow { color: color-mix(in oklab, var(--sun-base) 30%, #fff); }
/* Spökknappen står på den mörka slöjan: ljus text och kant, i båda
   lägena. Temats vanliga spökknapp är mörk text på ljus botten. */
.hero.has-photo .cta.ghost {
  color: #fff;
  background: color-mix(in srgb, #fff 10%, transparent);
  border-color: color-mix(in srgb, #fff 60%, transparent);
}
/* Smal skärm: texten täcker nästan hela heron, så slöjan är tät överallt
   och bär kontrasten ensam. Överst, ovanför överraden, är den tunnare, så
   att fotot syns där. Miniatyren som i style.css. */
@media (max-width: 48rem) {
  .hero.has-photo {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--sea-deep-base) 45%, transparent) 0,
        color-mix(in srgb, var(--sea-deep-base) 84%, transparent) 5.5rem,
        color-mix(in srgb, var(--sea-deep-base) 86%, transparent) 100%),
      var(--hero-photo-sm, var(--hero-photo));
  }
}