/* 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 {
  --sand: #faf3e3;      /* kund-slot "Bakgrund": varm elfenben */
  --paper: #fffbf1;
  --ink: #42251c;
  --ink-2: #6e4c40;
  --sea: #1777b8;       /* kund-slot "Accent": medelhavsblå */
  --sea-deep: #5b2f23;  /* kund-slot "Mörk": bränd terra */
  --sun: #e05a33;       /* kund-slot "Varm": terrakotta */
  --rule: #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: ljus solnedgångshimmel + soldisk – mörk varm text */
.hero {
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 4.2rem,
      #ffc31a 0 2.6rem,
      color-mix(in srgb, #ffc31a 45%, transparent) 2.6rem 3.2rem,
      transparent 5.6rem),
    linear-gradient(180deg,
      color-mix(in srgb, var(--sea) 24%, #f2fbff) 0%,
      #fbe9c9 58%,
      var(--sand) 100%);
  padding: 6.5rem 0 5.5rem;
}
.hero .eyebrow {
  color: var(--sun);
  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: 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, #ffffff 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);
}
.gallery figcaption {
  background: linear-gradient(transparent, color-mix(in srgb, var(--sea-deep) 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 */
.contact input, .contact textarea, .unlock input { border-radius: 14px; background: #fff; }
.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) */
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);
  background-size: 20px 20px, auto;
}
footer.wrap p { width: min(1100px, 92%); margin: 0 auto; }

/* Foto-hero: ljus sand-slöja som i referensen – fotot syns bakom rubriken
   och tonas ner till sidbakgrunden så sektionen saknar hård nederkant.
   Mörk herotext förutsätter ljus himmel i fotots övre del. */
:root {
  --hero-veil-top: color-mix(in srgb, var(--sand) 34%, transparent);
  --hero-veil-bottom: color-mix(in srgb, var(--sand) 96%, transparent);
}