/* ==========================================================================
   KARAK — styles.css
   Self-hosted fonts, design tokens, base styles, shared components
   (header / footer / pills) and the landing-page letter panels.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted latin subsets
   Lifted verbatim from Google's css2 output; only the src URLs are local, so
   the site makes zero external requests. The latin subset (U+0000-00FF …)
   carries every Icelandic glyph the copy uses — þ ð æ ö á é í ó ú ý — plus
   the middot and em dash. Space Grotesk ships as one variable file, so the
   300–700 range covers both weights the site asks for (400 and 500).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic-latin-v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --ink: #2c2620;
  --cream: #f6f1ea;
  --sand: #efe8dc;
  --sand-2: #e9e0d2;
  --sand-3: #e2d6c2;
  --sand-hover: #dbcdb4;
  --tan: #b3a893;
  --tan-muted: #776c59; /* muted tan for light surfaces — AA at 11.5px */
  --body-light: #55493b;
  --dark-panel-hover: #3a332b;
  --border-light: rgba(44, 38, 32, .15);
  --border-dark: rgba(246, 241, 234, .14);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --speed: .65s;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Space Grotesk', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh; /* iOS: excludes the retracting URL bar; older UAs ignore it */
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: .8;
}

input,
textarea {
  font-family: 'Space Grotesk', sans-serif;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Filled pills sit on a surface the same colour as their own text, so an
   outside ring would be invisible — draw it inside the fill instead. */
.panel-cta:focus-visible,
.pill--dark:focus-visible,
.nav-pill.is-active:focus-visible {
  outline-offset: -4px;
}

/* Visually hidden, still read by assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Logo — "Varða" cairn + wordmark
   -------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.cairn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cairn > span {
  border-radius: 50%;
  background: var(--cream);
}

.cairn > span:nth-child(1) {
  width: 9px;
  height: 7px;
  background: var(--tan);
}

.cairn > span:nth-child(2) {
  width: 16px;
  height: 8px;
}

.cairn > span:nth-child(3) {
  width: 23px;
  height: 9px;
}

.cairn > span:nth-child(4) {
  width: 30px;
  height: 10px;
}

/* Smaller footer variant */
.cairn--footer {
  gap: 1.5px;
}

.cairn--footer > span:nth-child(1) {
  width: 7px;
  height: 5px;
}

.cairn--footer > span:nth-child(2) {
  width: 12px;
  height: 6px;
}

.cairn--footer > span:nth-child(3) {
  width: 17px;
  height: 7px;
}

.cairn--footer > span:nth-child(4) {
  width: 22px;
  height: 8px;
}

.wordmark {
  font-size: 14px;
  letter-spacing: .34em;
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   5. Header + navigation — floating island with a fold-out menu
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 14px;
  left: 16px;
  right: 16px;
  z-index: 100;
  border: 1px solid var(--border-dark);
  border-radius: 24px;
  background: rgba(44, 38, 32, .92); /* fallback when backdrop-filter is unsupported */
  overflow: hidden;
}

@supports ((backdrop-filter: blur(1px))) or ((-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(44, 38, 32, .65);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.site-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}

/* The 3-bar toggle folds into an X when the menu is open */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin: -2px -8px -2px 0;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.menu-bar {
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--cream);
  transition: transform .35s var(--ease), opacity .25s;
}

.site-header.is-open .menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .menu-bar:nth-child(2) { opacity: 0; }
.site-header.is-open .menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The menu unfolds inside the island (grid-rows 0fr → 1fr). All spacing lives
   on the children — padding on the clipped wrapper would leak height when
   the row collapses to zero. */
.site-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}

.site-header.is-open .site-menu {
  grid-template-rows: 1fr;
}

.site-menu-inner {
  min-height: 0;
  overflow: hidden;
  font-size: 12.5px;
  opacity: 0;
  transition: opacity .3s;
}

.site-header.is-open .site-menu-inner {
  opacity: 1;
  transition: opacity .35s .12s;
}

.site-menu-inner::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 20px 14px;
  background: var(--border-dark);
}

.site-menu .nav-pill {
  display: block;
  margin: 0 20px 8px;
}

.site-menu .nav-pill:last-child {
  margin-bottom: 16px;
}

.nav-pill {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(246, 241, 234, .42);
  background: transparent;
  color: var(--cream);
  transition: all .3s;
}

/* Nav pills keep their own hover — no opacity fade */
.nav-pill:hover {
  opacity: 1;
  border-color: rgba(246, 241, 234, .7);
}

.nav-pill.is-active {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

.nav-pill.is-active:hover {
  border-color: var(--cream);
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 52px;
  border-top: 1px solid var(--border-dark);
  font-size: 12px;
  color: var(--tan);
  background: var(--ink);
}

/* --------------------------------------------------------------------------
   7. Shared pill button
   -------------------------------------------------------------------------- */
.pill--dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--cream);
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .3s;
}

.pill--dark:hover {
  opacity: 1;
  background: var(--dark-panel-hover);
}

/* --------------------------------------------------------------------------
   8. Landing page — hint row
   -------------------------------------------------------------------------- */
.hint-row {
  display: flex;
  justify-content: flex-end;
  /* top padding clears the fixed island (14px offset + ~66px bar) */
  padding: 94px 52px 14px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan);
}

/* --------------------------------------------------------------------------
   9. Landing page — letter panels
   -------------------------------------------------------------------------- */
.panels {
  display: flex;
  align-items: stretch;
  min-height: 660px;
  flex: 1;
}

.panel {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 26px;
  transition: flex var(--speed) var(--ease), background .35s;
}

.panel--01,
.panel--02,
.panel--03,
.panel--04 {
  border-right: 1px solid var(--border-light);
}

/* Per-panel colour steps */
.panel--01 { background: var(--cream);  color: var(--ink); }
.panel--02 { background: var(--sand);   color: var(--ink); }
.panel--03 { background: var(--sand-2); color: var(--ink); }
.panel--04 { background: var(--sand-3); color: var(--ink); }
.panel--05 { background: var(--ink);    color: var(--cream); }

@media (hover: hover) {
  .panel--01:hover { background: var(--sand); }
  .panel--02:hover { background: var(--sand-2); }
  .panel--03:hover { background: var(--sand-3); }
  .panel--04:hover { background: var(--sand-hover); }
  .panel--05:hover { background: var(--dark-panel-hover); }
}

.panel-letter {
  font-family: 'Instrument Serif', serif;
  font-size: 150px;
  line-height: .9;
  white-space: nowrap;
  align-self: flex-start;
  display: inline-block;
  transition: font-size var(--speed) var(--ease);
}

.panel-letter--mirror {
  transform: scaleX(-1);
  transform-origin: center;
}

.panel-bottom {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.panel-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity .35s;
}

.panel-title {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  font-weight: 400;
  /* Pinned so the line box does not resize when Instrument Serif swaps in —
     the fallback serif's own line-height differs and shifted the panel on
     mobile, where titles wrap. */
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

/* Real <button> disclosure handle inside the title — inherits the title's
   type so it renders exactly like the plain heading text did. */
.panel-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  /* `font: inherit` does not carry white-space, and UA stylesheets disagree on
     what a <button> defaults to — pin it to the title so the two wrap alike. */
  white-space: inherit;
}

.panel-sub {
  font-size: 12.5px;
  line-height: 1.55;
  opacity: .7;
  margin: 0;
  max-height: 80px; /* 4 lines @ 12.5px/1.55 — panel 02 needs all four at 861–950px */
  overflow: hidden;
  transition: max-height var(--speed) var(--ease);
}

/* Expandable detail block */
/* visibility (not just opacity/grid-rows) so collapsed CTAs leave the tab order */
/* grid-template-rows 0fr→1fr animates to the content's TRUE height — a
   max-height sentinel overshoots, so the open coasted and the close froze
   before snapping shut. */
.panel-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: grid-template-rows var(--speed) var(--ease), opacity .45s, visibility 0s linear var(--speed);
  /* delays map to: grid-template-rows, opacity, visibility —
     visibility waits out the collapse so content fades instead of vanishing */
  transition-delay: 0s, 0s, var(--speed);
}

.panel-detail-inner {
  width: 100%;
  min-width: 280px;
  min-height: 0; /* lets the 0fr row actually reach zero height */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Bottom breathing room as a child margin, not padding on the inner —
   padding survives the 0fr collapse (min-height only clamps the content box)
   and left a 6px sliver under every closed panel. */
.panel-detail-inner > :last-child {
  margin-bottom: 6px;
}

.panel-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  opacity: .8;
}

.price-rows {
  display: flex;
  flex-direction: column;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dotted currentColor;
  font-size: 14px;
}

.price {
  font-family: 'Instrument Serif', serif;
  font-size: 17px;
  white-space: nowrap;
}

/* Clickable price-row values (panel 05 social handles): an underline
   grows from nothing to the full text width as the hover hint. */
.price-link {
  position: relative;
}

.price-link:hover {
  opacity: 1;
}

.price-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
}

.price-link:hover::after,
.price-link:focus-visible::after {
  transform: scaleX(1);
}

.panel-note {
  font-size: 11px;
  opacity: .72;
  margin: 0;
}

.panel-cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 13px;
}

/* CTA colours are inverted per panel */
.panel--01 .panel-cta { background: var(--ink);   color: var(--cream); }
.panel--02 .panel-cta { background: var(--ink);   color: var(--sand); }
.panel--03 .panel-cta { background: var(--ink);   color: var(--sand-2); }
.panel--04 .panel-cta { background: var(--ink);   color: var(--sand-3); }
.panel--05 .panel-cta { background: var(--cream); color: var(--ink); }

/* --------------------------------------------------------------------------
   10. Panel expansion state machine (JS only toggles classes)
   -------------------------------------------------------------------------- */
.panels.has-active .panel {
  flex: .4;
}

.panels.has-active .panel.is-active {
  flex: 4.2;
}

.panel.is-active .panel-letter {
  font-size: 96px;
}

.panel.is-active .panel-sub {
  max-height: 0;
}

.panel.is-active .panel-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, .18s, 0s;
}

.panels.has-active .panel:not(.is-active) .panel-label {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   11. Mobile — vertical accordion (single breakpoint)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .site-header {
    top: 10px;
    left: 10px;
    right: 10px;
  }

  .site-bar {
    padding: 10px 16px;
  }

  .site-footer {
    padding: 18px 20px;
    font-size: 11px;
  }

  .hint-row {
    padding: 84px 20px 12px;
  }

  .panels {
    flex-direction: column;
    min-height: 0;
  }

  /* Panels size to their content in every state */
  .panel,
  .panels.has-active .panel,
  .panels.has-active .panel.is-active {
    flex: 0 0 auto;
  }

  .panel {
    padding: 26px 20px;
  }

  .panel--01,
  .panel--02,
  .panel--03,
  .panel--04 {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .panel-letter {
    font-size: 72px;
  }

  .panel.is-active .panel-letter {
    font-size: 56px;
  }

  /* Full-width panels have room to wrap, and wrapping keeps the title legible
     when text is zoomed to 200% (WCAG 1.4.4) instead of shearing on
     .panel { overflow: hidden }. */
  .panel-title {
    white-space: normal;
  }

  /* Siblings keep their labels visible when stacked */
  .panels.has-active .panel:not(.is-active) .panel-label {
    opacity: 1;
  }

  .panel-detail-inner {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   12. Viewport extremes — very narrow, very short, and the tablet band
   These blocks must stay AFTER section 11: they carry the same specificity
   as the rules they refine and win on source order alone.
   -------------------------------------------------------------------------- */

/* ≤400px: nothing needed since the island header — the brand (109px) plus the
   44px menu toggle fit a 320px viewport with ample room. */

/* 861–1060px: five side-by-side panels leave each title 119–152px of column,
   but "Aðstoð eftir þörfum" measures 157.8px at 24px — overflow: hidden
   shears it. Wrap titles at rest in this band only; compressed siblings stay
   on one line so a ~10px-wide column can't explode into a 15-line title. */
@media (min-width: 861px) and (max-width: 1060px) {
  .panel-title {
    white-space: normal;
    text-wrap: balance;
  }

  .panels.has-active .panel:not(.is-active) .panel-title {
    white-space: nowrap;
  }
}

/* Short desktop viewports (1366×768, any short window): the 660px floor makes
   the page taller than the viewport before anything is even opened, pushing
   the expanded CTA below the fold. Drop the floor and let .panels take the
   height it has — main keeps its own content-based minimum, so an expanded
   panel still grows the document instead of being clipped. */
@media (min-width: 861px) and (max-height: 860px) {
  .panels {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01s !important;
    transition-delay: 0s !important;
  }
}