/* Produktsiden for fyrvokter.no. Sjøkart-profilen (docs/design/), fargene fra src/index.css.
   Eget Pages-prosjekt uten byggesteg, så verdiene er skrevet inn her. */

@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonter/spectral-latin-700-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonter/barlow-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonter/barlow-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonter/barlow-condensed-latin-600-normal.woff2') format('woff2');
}

:root {
  --sjo: #e8f1f4;
  --kort: #ffffff;
  --grunne: #cfe3ea;
  --blekk: #0f2b46;
  --dempet: #34536f;
  --skille: #dce7ec;
  --messing: #c9a24a;
  --messing-tekst: #7a5410;
  --signal: #b3121f;
  --meny: #0f2b46;
  --meny-tekst: #cfe3ea;
  --fokus-ring: #c9a24a;
  color-scheme: light;
}

/* Merket byttes til den lyse varianten i mørkt tema */
.merke-mork { display: none; }

@media (prefers-color-scheme: dark) {
  :root {
    --sjo: #0b1f33;
    --kort: #12304d;
    --grunne: #163b5c;
    --blekk: #e8f1f4;
    --dempet: #a9bfd0;
    --skille: #23496b;
    --messing: #d6b25e;
    --messing-tekst: #d6b25e;
    --signal: #e0453f;
    --meny: #061628;
    --meny-tekst: #a9bfd0;
    --fokus-ring: #d6b25e;
    color-scheme: dark;
  }
  .merke-lys { display: none; }
  .merke-mork { display: block; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sjo);
  color: var(--blekk);
  font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}

a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--fokus-ring); outline-offset: 3px; border-radius: 2px; }


/* Forsiden */
.forside {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem 2rem;
  position: relative;
  overflow: hidden;
}

/* Dybdekurver i bakgrunnen, som i kartgrafikken */
.forside::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 105%, transparent 60%, var(--grunne) 60.4%, transparent 61%),
    radial-gradient(ellipse 85% 60% at 50% 110%, transparent 62%, var(--grunne) 62.3%, transparent 62.8%),
    radial-gradient(ellipse 100% 75% at 50% 115%, transparent 64%, var(--grunne) 64.2%, transparent 64.6%);
  opacity: 0.9;
  pointer-events: none;
}

.forside > * { position: relative; }

.merke { width: 132px; height: 132px; }

h1 {
  margin: 1rem 0 0.25rem;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.75rem, 9vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.ingress {
  margin: 0.5rem 0 0;
  max-width: 28ch;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  letter-spacing: 0.02em;
  color: var(--dempet);
}

.strek {
  width: 64px;
  height: 3px;
  margin: 1.75rem auto;
  background: var(--messing);
  border: 0;
}

.kontakt {
  margin: 0;
  font-size: 1.125rem;
}

.kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.25rem;
  font-weight: 600;
}

/* Bunnen */
.bunn {
  background: var(--meny);
  color: var(--meny-tekst);
  font-size: 0.95rem;
  padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom));
  text-align: center;
}

.bunn p { margin: 0.15rem 0; }
.bunn a { color: #ffffff; display: inline-flex; align-items: center; min-height: 48px; }

/* Personvern */
.topp {
  background: var(--meny);
  color: #ffffff;
  padding: 0.5rem 1.25rem;
}

.topp a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  text-decoration: none;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.5rem;
}

.topp img { width: 36px; height: 36px; }

.tekst {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.tekst h1 { font-size: clamp(2rem, 6vw, 2.75rem); margin-top: 0.5rem; }

.tekst h2 {
  margin: 2.25rem 0 0.5rem;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--skille);
  padding-bottom: 0.25rem;
}

.tekst h3 {
  margin: 1.5rem 0 0.25rem;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}

.tekst ul { padding-left: 1.25rem; }
.tekst li { margin: 0.2rem 0; }

.utkast {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.6rem;
  border: 2px solid var(--signal);
  border-radius: 4px;
  color: var(--signal);
  font-weight: 600;
}

.tabell { overflow-x: auto; margin: 1rem 0; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--kort);
  font-size: 0.975rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--skille);
}

th {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  background: var(--grunne);
}