/* =====================================================================
   Asker hest og helsefremming — Mulighetsgården
   Palett og former er hentet fra gården selv: granskog, bjørk, høy,
   disig fjordhimmel og den falurøde låven.
   ===================================================================== */

@import url('fonts.css');

:root {
  /* Farger */
  --skog:      #1E3A2F;  /* dyp gran — hovedtekst og mørke flater */
  --gran:      #3D6B53;  /* furu — lenker og sekundærtekst */
  --mose:      #5C7F69;  /* dempet grønn — hjelpetekst */
  --dis:       #7E9AA3;  /* disig fjordhimmel — rolig aksent */
  --hoy:       #E7DCC2;  /* høy og havre — varme felt */
  --hoy-lys:   #F2EADA;  /* lysere høy */
  --bjork:     #EEF1EC;  /* bjørkelys — sidebakgrunn */
  --sno:       #FBFCFA;  /* kortflater */
  --laave:     #9E3B2B;  /* falurødt — én varm aksent, brukt sparsomt */
  --laave-mork:#7E2D20;

  /* Typografi */
  --serif: 'Faustina', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Skala (1.25 — stor ters) */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.5rem;
  --t-xl:   2rem;
  --t-2xl:  2.75rem;
  --t-3xl:  clamp(2.5rem, 6vw, 4.25rem);

  /* Rom */
  --rom-1: 0.5rem;
  --rom-2: 1rem;
  --rom-3: 1.5rem;
  --rom-4: 2.5rem;
  --rom-5: 4rem;
  --rom-6: 6rem;

  --bredde: 74rem;
  --maal: 63ch;          /* lesebredde */
  --kant: 1px solid rgba(30, 58, 47, 0.14);
}

/* ---------- Grunnlag ---------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bjork);
  color: var(--skog);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 var(--rom-2);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); letter-spacing: -0.022em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }

p { margin: 0 0 var(--rom-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--gran); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--laave); }

:focus-visible {
  outline: 2.5px solid var(--laave);
  outline-offset: 3px;
  border-radius: 2px;
}

.hopp-lenke {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--skog);
  color: var(--bjork);
  font-family: var(--sans);
  font-size: var(--t-sm);
  padding: var(--rom-1) var(--rom-2);
  z-index: 100;
}
.hopp-lenke:focus { left: var(--rom-2); top: var(--rom-2); color: var(--bjork); }

/* ---------- Layout ---------- */

/* Rutenettceller får ikke lov til å bli bredere enn sporet sitt.
   Uten dette presser bildenes egenbredde siden ut i bredden på små skjermer. */
.velkomst > *,
.sted > *,
.rad > *,
.rutenett > *,
.dyr > *,
.person > *,
.kontakt > *,
.arrangement-topp > *,
.tilbud-liste > *,
.bunn-inner > * { min-width: 0; }


.ramme {
  width: 100%;
  max-width: var(--bredde);
  margin-inline: auto;
  padding-inline: var(--rom-3);
}

.seksjon { padding-block: var(--rom-5); }
.seksjon-tett { padding-block: var(--rom-4); }

.felt-hoy { background: var(--hoy-lys); }
.felt-skog { background: var(--skog); color: var(--hoy-lys); }
.felt-skog h2, .felt-skog h3 { color: var(--hoy-lys); }
.felt-skog a { color: var(--hoy); }
.felt-skog a:hover { color: #fff; }

.maal { max-width: var(--maal); }

/* ---------- Buen: gårdens signaturform ----------
   Stalldøra og gavlen på låven går igjen som en bue over stående bilder. */

.bilde {
  border-radius: 4px;
  overflow: hidden;
  background: var(--hoy);
}
.bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ett format på alle hovedbilder, slik at radene flukter nedover siden. */
.bilde-bred { aspect-ratio: 4 / 3; }
.bilde-hoy { aspect-ratio: 3 / 4; }

/* Rutenettet: like store ruter, alltid kvadratiske. */
.rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  justify-content: start;
  gap: var(--rom-2);
  margin-top: var(--rom-2);
}

/* Under et hovedbilde ligger rutene alltid tre i bredden, slik at hele
   bildekolonnen leses som én blokk. */
.rad-media .rutenett,
.arrangement-media .rutenett { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rute {
  padding: 0;
  border: 0;
  background: var(--hoy);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.rute img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.rute:hover img { transform: scale(1.04); }

figure { margin: 0; }

figcaption {
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--mose);
  margin-top: var(--rom-1);
  line-height: 1.5;
}

/* ---------- Topp ---------- */

.topp {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(238, 241, 236, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: var(--kant);
}

.topp-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rom-3);
  min-height: 4.5rem;
}

.merke {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--skog);
  flex-wrap: wrap;
}
.merke:hover { color: var(--skog); }
.merke-navn {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.merke-under {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--mose);
  letter-spacing: 0.01em;
}

.meny { display: flex; align-items: center; gap: var(--rom-3); }

.meny a {
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--skog);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.meny a:hover { color: var(--laave); border-bottom-color: rgba(158, 59, 43, 0.35); }
.meny a[aria-current='page'] { border-bottom-color: var(--laave); }

.meny-knapp {
  display: none;
  font-family: var(--sans);
  font-size: var(--t-sm);
  background: none;
  border: var(--kant);
  border-radius: 3px;
  color: var(--skog);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

@media (max-width: 56rem) {
  .meny-knapp { display: block; }
  .meny {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bjork);
    border-bottom: var(--kant);
    padding: var(--rom-2) var(--rom-3) var(--rom-3);
  }
  .meny.apen { display: flex; }
  .meny a {
    width: 100%;
    padding-block: 0.7rem;
    border-bottom: 1px solid rgba(30, 58, 47, 0.09);
  }
  .meny a[aria-current='page'] { border-bottom-color: var(--laave); }
  .topp-inner { position: relative; }
}

/* ---------- Ingress / sidetopp ---------- */

.sidetopp { padding-block: var(--rom-5) var(--rom-4); }
.sidetopp h1 { margin-bottom: var(--rom-2); }

.ingress {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--gran);
  max-width: var(--maal);
}

/* ---------- Forsidens velkomst ---------- */

.velkomst {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--rom-5);
  align-items: center;
  padding-block: var(--rom-5) var(--rom-6);
}

.velkomst h1 { margin-bottom: var(--rom-3); }

.velkomst-bilde {
  aspect-ratio: 3 / 4;
  max-height: 34rem;
  justify-self: end;
  width: 100%;
}

.arstid {
  margin-top: var(--rom-3);
  padding-top: var(--rom-3);
  border-top: 2px solid var(--hoy);
  font-size: var(--t-md);
  font-style: italic;
  color: var(--gran);
  max-width: var(--maal);
}

@media (max-width: 56rem) {
  .velkomst {
    grid-template-columns: 1fr;
    gap: var(--rom-4);
    padding-block: var(--rom-4) var(--rom-5);
  }
  .velkomst-bilde { justify-self: stretch; max-height: 26rem; }
}

/* ---------- Stedet ---------- */

.sted {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rom-5);
  align-items: center;
}
.sted-bilde { aspect-ratio: 4 / 3; }

@media (max-width: 56rem) {
  .sted { grid-template-columns: 1fr; gap: var(--rom-3); }
}

/* ---------- Oversikt over tilbud ---------- */

.tilbud-liste {
  list-style: none;
  margin: var(--rom-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--rom-5);
  max-width: 56rem;
}

.tilbud-liste li { border-bottom: 1px solid rgba(30, 58, 47, 0.16); }

.tilbud-liste a,
.tilbud-liste span {
  display: block;
  padding-block: 0.9rem;
  font-size: var(--t-md);
  text-decoration: none;
  color: var(--skog);
}
.tilbud-liste a { transition: color 0.15s ease, padding-left 0.15s ease; }
.tilbud-liste a:hover { color: var(--laave); padding-left: 0.4rem; }
.tilbud-liste span { color: var(--mose); }

@media (max-width: 44rem) {
  .tilbud-liste { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Rad: tekst ved siden av bilde ---------- */

.rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--rom-4) var(--rom-5);
  align-items: center;
  padding-block: var(--rom-5);
  border-top: 1px solid rgba(30, 58, 47, 0.13);
}
.rad:first-of-type { border-top: 0; }
.rad-uten-tekst { padding-block: var(--rom-4); }

.rad-bilde-forst .rad-tekst { order: 2; }
.rad-bilde-forst .rad-media { order: 1; }

.rad-media { width: 100%; max-width: 28rem; justify-self: end; }
.rad-bilde-forst .rad-media { justify-self: start; }

.rad-tekst { max-width: var(--maal); }
.rad-tekst h2 { margin-bottom: var(--rom-2); }

@media (max-width: 56rem) {
  .rad {
    grid-template-columns: 1fr;
    gap: var(--rom-3);
    padding-block: var(--rom-4);
  }
  .rad-bilde-forst .rad-tekst,
  .rad-bilde-forst .rad-media { order: initial; }
  .rad-media {
    max-width: 26rem;
    justify-self: start;
  }
  .rad-bilde-forst .rad-media { justify-self: start; }
}

/* ---------- Les mer ---------- */

.lesmer { margin-top: var(--rom-3); }

.lesmer-knapp {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--dis);
  color: var(--gran);
  padding: 0.2rem 0 0.3rem;
  cursor: pointer;
}
.lesmer-knapp:hover { color: var(--laave); border-bottom-color: var(--laave); }

.lesmer-knapp::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}
.lesmer-knapp[aria-expanded='true']::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.lesmer-panel {
  margin-top: var(--rom-3);
  padding-left: var(--rom-3);
  border-left: 2px solid var(--hoy);
  max-width: var(--maal);
}
.lesmer-panel[hidden] { display: none; }

/* ---------- Dyrene ---------- */

.dyr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 18rem));
  justify-content: start;
  gap: var(--rom-4);
  margin-top: var(--rom-4);
}
.dyr figcaption { font-size: var(--t-base); font-family: var(--serif); color: var(--skog); }

/* ---------- Om oss ---------- */

.person {
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: var(--rom-4);
  align-items: start;
  padding-block: var(--rom-4);
  border-top: 1px solid rgba(30, 58, 47, 0.13);
}
.person h3 { margin-bottom: var(--rom-2); }
.person-tekst { max-width: var(--maal); }

@media (max-width: 48rem) {
  .person { grid-template-columns: 1fr; gap: var(--rom-3); }
  .person .bilde { max-width: 18rem; }
}

/* ---------- Arrangementer ---------- */

.arrangement {
  padding-block: var(--rom-5);
  border-top: 1px solid rgba(30, 58, 47, 0.13);
}
.arrangement:first-of-type { border-top: 0; padding-top: var(--rom-3); }

.arrangement-topp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rom-5);
  align-items: center;
}
.arrangement-topp > *:not(.arrangement-tekst) {
  width: 100%;
  max-width: 28rem;
  justify-self: end;
}
.arrangement-tekst { max-width: var(--maal); }
.arrangement-mer { max-width: var(--maal); margin-top: var(--rom-3); }

.merknad {
  margin-top: var(--rom-3);
  padding: var(--rom-3);
  background: var(--hoy-lys);
  border-left: 3px solid var(--dis);
  max-width: var(--maal);
}
.felt-hoy .merknad { background: var(--sno); }

@media (max-width: 56rem) {
  .arrangement-topp { grid-template-columns: 1fr; gap: var(--rom-3); }
  .arrangement-topp > *:not(.arrangement-tekst) { max-width: 22rem; justify-self: start; }
  .arrangement { padding-block: var(--rom-4); }
}

/* ---------- Kontakt ---------- */

.kontakt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rom-5);
  align-items: start;
}

.kontakt-liste {
  list-style: none;
  margin: var(--rom-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--rom-2);
}
.kontakt-liste li {
  padding-bottom: var(--rom-2);
  border-bottom: 1px solid rgba(30, 58, 47, 0.13);
  font-size: var(--t-md);
}
.kontakt-liste li:last-child { border-bottom: 0; }

.skjema {
  background: var(--sno);
  border: var(--kant);
  border-radius: 4px;
  padding: var(--rom-4);
}
.felt-hoy .skjema { background: var(--sno); }

.skjema h2 { font-size: var(--t-lg); }

.skjema-felt { display: grid; gap: 0.4rem; margin-bottom: var(--rom-3); }

.skjema label {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--gran);
}

.skjema input,
.skjema textarea {
  font-family: var(--serif);
  font-size: var(--t-base);
  color: var(--skog);
  background: var(--bjork);
  border: 1px solid rgba(30, 58, 47, 0.22);
  border-radius: 3px;
  padding: 0.65rem 0.8rem;
  width: 100%;
}
.skjema input:focus,
.skjema textarea:focus { border-color: var(--gran); }
.skjema textarea { resize: vertical; min-height: 9rem; }

.knapp {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  background: var(--laave);
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 0.75rem 1.6rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.knapp:hover { background: var(--laave-mork); }

.skjema-hjelp {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--mose);
  margin-top: var(--rom-2);
  max-width: 34ch;
}

@media (max-width: 56rem) {
  .kontakt { grid-template-columns: 1fr; gap: var(--rom-4); }
  .skjema { padding: var(--rom-3); }
}

/* ---------- Bunn ---------- */

.bunn {
  background: var(--skog);
  color: var(--hoy-lys);
  padding-block: var(--rom-5) var(--rom-4);
  margin-top: var(--rom-6);
}

.bunn-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--rom-4);
}

.bunn h2 {
  font-size: var(--t-lg);
  color: var(--hoy-lys);
  margin-bottom: var(--rom-2);
}

.bunn p, .bunn li { color: rgba(242, 234, 218, 0.82); }
.bunn a { color: var(--hoy-lys); text-underline-offset: 0.2em; }
.bunn a:hover { color: #fff; }

.bunn-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.bunn-meny a {
  font-family: var(--sans);
  font-size: var(--t-sm);
  text-decoration: none;
}
.bunn-meny a:hover { text-decoration: underline; }

.bunn-bunn {
  margin-top: var(--rom-4);
  padding-top: var(--rom-3);
  border-top: 1px solid rgba(242, 234, 218, 0.18);
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: rgba(242, 234, 218, 0.6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-2) var(--rom-4);
}

@media (max-width: 48rem) {
  .bunn-inner { grid-template-columns: 1fr; gap: var(--rom-3); }
  .bunn { margin-top: var(--rom-5); }
}

/* ---------- Bildevisning ----------
   Rutene er beskåret kvadratisk. Her vises hele bildet, uklippet. */

.lysbord {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rom-3);
  background: rgba(18, 34, 27, 0.94);
  border: 0;
  width: 100%;
  height: 100%;
}
.lysbord[hidden] { display: none; }

.lysbord img {
  max-width: min(96vw, 60rem);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  object-fit: contain;
}

.lysbord-lukk {
  position: absolute;
  top: var(--rom-2);
  right: var(--rom-2);
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--hoy-lys);
  background: rgba(30, 58, 47, 0.85);
  border: 1px solid rgba(242, 234, 218, 0.35);
  border-radius: 3px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.lysbord-lukk:hover { background: var(--laave); border-color: var(--laave); }

body.lysbord-apen { overflow: hidden; }

/* Ett enkeltstående bilde som ikke deler rad med tekst. */
.hovedbilde { max-width: 44rem; }