/* Arula – lehe kujundus. Värvid on muutujates, et neid oleks lihtne muuta. */
:root {
  --paber: #f6f3ea;
  --paber-2: #ece7d8;
  --tekst: #2b2924;
  --hall: #6b665b;
  --joon: #d9d1bd;
  --oliiv: #56651c;
  --oliiv-tume: #3f4b12;
  --link: #4d5c14;
  --kiri: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --kiri-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paber: #1d1c18; --paber-2: #272620; --tekst: #e8e4d8; --hall: #a39e90; --joon: #3a382f; --oliiv: #a9bb5c; --oliiv-tume: #c5d47f; --link: #c2d17a; color-scheme: dark; }
}
:root[data-theme="dark"] { --paber: #1d1c18; --paber-2: #272620; --tekst: #e8e4d8; --hall: #a39e90; --joon: #3a382f; --oliiv: #a9bb5c; --oliiv-tume: #c5d47f; --link: #c2d17a; color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paber); color: var(--tekst);
  font: 1.0625rem/1.65 var(--kiri);
}
a { color: var(--link); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { color: var(--oliiv-tume); text-decoration-thickness: 2px; }
.vahele { position: absolute; left: -999px; }
.vahele:focus { left: 1rem; top: 1rem; background: var(--paber); padding: .5rem 1rem; z-index: 10; }

.pais {
  border-bottom: 3px double var(--joon);
  padding-block: 1.75rem 1.25rem; padding-left: max(16px, env(safe-area-inset-left, 0px), 4vw); padding-right: max(16px, env(safe-area-inset-right, 0px), 4vw);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem;
}
.logo {
  font-size: clamp(2.2rem, 5vw, 3rem); letter-spacing: .12em; color: var(--oliiv-tume);
  text-decoration: none; line-height: 1;
}
.alapealkiri { margin: 0; color: var(--hall); font-style: italic; }

.raam {
  display: grid; grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: 2rem 3rem; padding-left: max(16px, env(safe-area-inset-left, 0px), 4vw); padding-right: max(16px, env(safe-area-inset-right, 0px), 4vw); max-width: 80rem;
}

/* menüü */
.menyy { font-family: var(--kiri-ui); font-size: .9rem; line-height: 1.35; }
.menyy-kast > summary { display: none; }
.menyy ul { list-style: none; margin: 0; padding: 0; }
.menyy > details > ul > li { border-bottom: 1px solid var(--joon); }
.menyy a { display: block; padding: .45rem .5rem; text-decoration: none; color: var(--tekst); border-radius: 3px; }
.menyy a:hover { background: var(--paber-2); color: var(--tekst); }
.menyy li ul { display: none; padding: 0 0 .4rem .9rem; }
.menyy li.lahti > ul { display: block; }
.menyy li ul a { padding: .3rem .5rem; color: var(--hall); }
.menyy li.haru > a::after { content: " ›"; color: var(--hall); }
.menyy li.haru.lahti > a::after { content: " ⌄"; }
.menyy li.praegune > a { background: var(--oliiv); color: var(--paber); font-weight: 600; }

/* sisu */
.sisu { min-width: 0; max-width: 46rem; }
h1, h2, h3 { font-weight: normal; text-wrap: balance; line-height: 1.25; color: var(--oliiv-tume); }
h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0 0 1.5rem; }
h2 { font-size: 1.4rem; margin: 2.2rem 0 .8rem; }
h3 { font-size: 1.15rem; margin: 1.8rem 0 .6rem; }
.sisu p, .sisu li { overflow-wrap: break-word; }
.sisu ul, .sisu ol { padding-left: 1.3rem; }
.sisu li { margin: .35rem 0; }
.sisu table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; font-size: .95rem; }
.sisu td, .sisu th { border: 1px solid var(--joon); padding: .35rem .6rem; vertical-align: top; }
blockquote { margin: 1rem 0; padding: .2rem 1rem; border-left: 3px solid var(--joon); color: var(--hall); }
hr { border: 0; border-top: 1px solid var(--joon); margin: 2rem 0; }

/* pildid: üksikud ja galeriid */
.sisu p:has(> a.pilt) { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; }
a.pilt { display: inline-block; line-height: 0; border: 1px solid var(--joon); background: var(--paber-2); padding: 4px; cursor: zoom-in; }
a.pilt:hover, a.pilt:focus-visible { border-color: var(--oliiv); }
:focus-visible { outline: 2px solid var(--oliiv); outline-offset: 2px; }
a.pilt img { max-width: 100%; height: auto; display: block; }
.sisu img { max-width: 100%; height: auto; }

.pilt-puudub { display: inline-block; padding: 2.5rem 1rem; min-width: 10rem; border: 1px dashed var(--joon); color: var(--hall); font: .85rem/1.3 var(--kiri-ui); background: var(--paber-2); }
.alamlehed { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--joon); font-family: var(--kiri-ui); font-size: .95rem; }
.alamlehed h2 { font-family: var(--kiri); }
.alamlehed ul { columns: 2 14rem; padding-left: 1.1rem; }

.jalus { border-top: 1px solid var(--joon); padding-block: 1.5rem 2.5rem; padding-left: max(16px, env(safe-area-inset-left, 0px), 4vw); padding-right: max(16px, env(safe-area-inset-right, 0px), 4vw); color: var(--hall); font-size: .92rem; }
.jalus p { margin: .3rem 0; }
.vaike { font-size: .85rem; }

/* pildivaataja */
.vaataja { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: #12110e; color: #eee; }
.vaataja::backdrop { background: rgba(15, 14, 11, .94); }
.vaataja figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 4rem 1rem; }
.vaataja img { max-width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; background: #222; }
.vaataja figcaption { margin-top: .8rem; text-align: center; font-size: .95rem; max-width: 50rem; }
.vaataja button { position: absolute; background: rgba(255,255,255,.08); color: #fff; border: 0; font-size: 2rem; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; }
.vaataja button:hover { background: rgba(255,255,255,.2); }
.v-sulge { top: 1rem; right: 1rem; }
.v-eelmine { left: 1rem; top: 50%; transform: translateY(-50%); }
.v-jargmine { right: 1rem; top: 50%; transform: translateY(-50%); }

/* telefon */
@media (max-width: 52rem) {
  .raam { grid-template-columns: 1fr; padding-top: 1rem; gap: 1rem; }
  .menyy-kast > summary {
    display: block; cursor: pointer; padding: .6rem .8rem; border: 1px solid var(--joon);
    border-radius: 4px; background: var(--paber-2); font-weight: 600; list-style: none;
  }
  .menyy-kast > summary::before { content: "☰  "; }
  .menyy-kast:not([open]) > ul { display: none; }
  .menyy-kast[open] > ul { margin-top: .5rem; }
  .vaataja figure { padding: 3.5rem .5rem 1rem; }
  .v-eelmine, .v-jargmine { top: auto; bottom: 1rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print {
  .menyy, .jalus, .vahele { display: none; }
  .raam { display: block; }
}