/*
 * firmasajt — delad bas för den publika nivån.
 *
 * Tokens och grundtypografi bor här så att landningssidan och de juridiska
 * sidorna inte har var sin kopia av paletten. Sidspecifik layout ligger
 * kvar inline i respektive sida.
 *
 * OBS: sidorna länkar filen med ?v=N och Cloudflare cachar på URL-nyckel.
 * Ändrar du innehållet här MÅSTE du bumpa N i alla sidor och i
 * sajtportals mall — annars ser besökare den gamla filen tills edgens
 * TTL löper ut.
 *
 * Fortfarande inget byggsteg: nginx serverar filen statiskt bredvid
 * sidorna, så resilienskravet (landningssidan svarar även när portalen och
 * mastern ligger nere) är oförändrat.
 */
:root {
  --background: oklch(0.975 0.007 85);
  --foreground: oklch(0.25 0.02 70);
  --card: oklch(0.99 0.004 85);
  --primary: oklch(0.42 0.075 150);
  --primary-foreground: oklch(0.975 0.007 85);
  --secondary: oklch(0.94 0.014 88);
  --muted-foreground: oklch(0.49 0.022 75);
  --accent: oklch(0.92 0.02 95);
  --border: oklch(0.885 0.014 82);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Karla", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.185 0.012 75);
    --foreground: oklch(0.93 0.009 85);
    --card: oklch(0.225 0.014 75);
    --primary: oklch(0.74 0.1 148);
    --primary-foreground: oklch(0.2 0.02 150);
    --secondary: oklch(0.26 0.014 75);
    --muted-foreground: oklch(0.68 0.016 80);
    --accent: oklch(0.28 0.016 75);
    --border: oklch(1 0 0 / 12%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--foreground); }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.08; margin: 0;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: 72rem; margin: 0 auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .wrap { padding-inline: 2rem; } }

.eyebrow {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--muted-foreground);
}
.lede { color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.7; }
.fine { color: var(--muted-foreground); font-size: 0.875rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 0.875rem 1.75rem;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { opacity: .9; }
.btn-ghost { border-color: var(--border); color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); }

/* Delad topp och botten */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 90%, transparent);
  backdrop-filter: blur(8px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 4rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  text-decoration: none; letter-spacing: -0.02em;
}
/* Märket levereras i 180 px och visas i 28 — ger skärpa även på retina
   utan en extra filstorlek att underhålla. */
.brand .mark { width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; display: block; }
/* Punkten efter ordet är brandet, inte en tillfällighet: rubrikerna på
   sajten och i portalen sätter punkt efter företagsnamnet ("Kalles
   slakteri."), och logotypen gör samma sak med sitt eget namn. */
.brand .dot { color: var(--primary); }
.site-header nav { display: flex; align-items: center; gap: 1.5rem; }
.navlink { font-size: 0.875rem; color: var(--muted-foreground); text-decoration: none; }
.navlink:hover { color: var(--foreground); }
@media (max-width: 639px) { .site-header .navlink { display: none; } }
.login-pill {
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 600;
  text-decoration: none;
}
.login-pill:hover { background: var(--accent); }

.site-footer { border-top: 1px solid var(--border); }
.site-footer .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-block: 2rem;
}
.site-footer .brand { font-size: 1.125rem; }
.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* Juridiska sidor: ren löptext. */
.legal { max-width: 46rem; padding-block: 4rem 6rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-top: 1rem; }
.legal h2 {
  font-size: 1.25rem; font-family: var(--font-sans);
  letter-spacing: 0; margin-top: 3rem;
}
.legal p, .legal ul { margin-top: 1rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal li { margin-top: 0.5rem; }
.legal li::marker { color: var(--muted-foreground); }
/* Inte knappar: .legal a har högre specificitet än .btn-primary och
   skulle annars måla knapptexten grön på grön botten. */
.legal a:not(.btn) { color: var(--primary); }
.legal .updated { margin-top: 1.5rem; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9375rem; }
.legal th, .legal td { text-align: left; padding: 0.625rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal th { font-weight: 600; }
.legal td:first-child, .legal th:first-child { padding-right: 1.5rem; }
/* Språkredigering i portalen. Panelen ska se ut som en del av sidan och
   inte som ett formulär någon klistrat in — samma radier och kanter som
   resten, och textrutan får ta plats: den som ska beskriva en ändring
   behöver se vad hon skrivit. */
.edit-panel {
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface, var(--background));
}
.edit-panel h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.edit-panel .fine { margin: 0; }
.edit-panel textarea {
  display: block; width: 100%; margin-top: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border); border-radius: .75rem;
  background: var(--background); color: inherit;
  font: inherit; line-height: 1.55; resize: vertical; min-height: 5.5rem;
}
.edit-panel textarea:focus {
  outline: none; border-color: var(--accent, currentColor);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, currentColor) 20%, transparent);
}
.edit-actions {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1rem; flex-wrap: wrap;
}
.edit-actions .fine { min-height: 1.2em; }
.edit-actions .fine.bad { color: #b3402a; }
.edit-examples { margin-top: 1rem; opacity: .85; }
.edit-examples em { font-style: normal; opacity: .9; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Meddelanden från kontaktformuläret, i portalens redigeringsspalt.

   Samma ram och radier som .edit-panel: det är två delar av samma
   arbetsvy, inte två olika saker. Listan är kort med flit — portalen
   är en översikt, och den som vill läsa allt har det i mailen. */
.msg-panel {
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface, var(--background));
}
.msg-panel h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.msg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.msg-list li {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.msg-list li:first-child { padding-top: 0; border-top: 0; }
.msg-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.msg-head strong { font-size: 1rem; }
.msg-mail { display: inline-block; margin-top: .15rem; font-size: .875rem; }
/* Besökarens egna ord: radbrytningar bevarade, och ordbrytning så en
   klistrad adress inte spränger spalten. */
.msg-body {
  margin: .5rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Delad vy: redigering till vänster, kundens sajt till höger.

   Att se ändringen ske är skillnaden mellan att skriva något och hoppas,
   och att se att det blev rätt. Panelen är därför inte en detalj i
   hörnet utan halva vyn.
   ------------------------------------------------------------------ */
.wrap-wide { max-width: 104rem; margin: 0 auto; padding-inline: 1.25rem; }

.split { display: grid; gap: 1.5rem; padding-block: 2.5rem; }
@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(22rem, 28rem) minmax(0, 1fr);
    gap: 2.5rem;
    /* Vyn fyller fönstret: panelen ska inte vara en liten ruta man måste
       skrolla till, och redigeringsspalten ska kunna skrollas för sig. */
    height: calc(100vh - 8rem);
    min-height: 34rem;
  }
  .split-edit { overflow-y: auto; padding-right: .5rem; }
}
.split-edit h1 { margin-top: .25rem; }

.split-site {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 1rem;
  overflow: hidden; background: var(--background);
  /* Mobil: panelen får en rimlig höjd i stället för att växa okontrollerat. */
  min-height: 60vh;
}
.split-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .5rem .5rem .5rem .9rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}
.split-url {
  font-size: .8125rem; opacity: .75;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.split-tools { display: flex; gap: .25rem; flex-shrink: 0; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: .5rem;
  border: 1px solid transparent; background: transparent;
  color: inherit; text-decoration: none; cursor: pointer;
  font-size: 1rem; line-height: 1; opacity: .7;
}
.icon-btn:hover { opacity: 1; background: var(--accent); }
.icon-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

#site-frame {
  flex: 1 1 auto; width: 100%; border: 0; display: block;
  background: var(--background);
}