/* One shared site header on every page of sagalings.com (Thomas, 2 Nov 2026).
   Fenrir-style brown bar: logo left, login + language right; the felt section logos as the main buttons;
   Sagas and the shop open cream felt drop-downs. The markup is written into the pages by tools/build_site_header.py;
   the drop-downs are in site-header.js. */
.sh{--sh-u:calc(38px/80);--sh-bar:#5a3a26;--sh-ink:#fff7ea;--sh-paper:#fffaf2;--sh-tint:#f4ead9;--sh-text:#2f2a26;--sh-gold:#c9973a;--sh-focus:#ffe08a;
  display:block;position:relative;z-index:25;background:var(--sh-bar);color:var(--sh-ink);font:600 15px/1.2 system-ui,sans-serif;text-align:start;
  box-shadow:0 2px 0 rgba(59,36,22,.35)}
body.reading .sh,.sh[hidden]{display:none}
/* z-index 25: above page content (highest 20), below Fenrir's opener 30, book window 35, zoom 40 and the portal 60 */
.sg-home{display:none!important}
.sh *{box-sizing:border-box}
.sh-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:1100px;margin:0 auto;padding:6px 16px 0}
.sh-brand{display:inline-flex;align-items:center;min-height:44px;border-radius:10px}
/* All word logos share one capital height and one baseline (Thomas, 4 Nov 2026: «viktig at logoene blir på lik høyde»).
   --sh-u is one file pixel of an 80 px section logo. The capitals of Sagas and Sagadex are 50.4 u high with the baseline
   15.2 u below the middle of the file; every other word logo is sized and placed to match (logo-sheet-03-B record).
   The Sagalings logo (72 px file, capital 43.8 px) is 72 x 50.4 / 43.8 = 82.85 u high. */
.sh-brand img{display:block;height:calc(var(--sh-u)*82.85);width:auto}
.sh[data-front] .sh-brand{visibility:hidden} /* the front page shows the big logo itself (Thomas, 2 Nov) */
.sh-right{display:flex;align-items:center;gap:8px}
.sh .sg-auth button,.sh .sg-auth summary{min-height:44px;min-width:44px;justify-content:center}
.sh .sg-auth li a,.sh .sg-auth li button{min-height:44px;align-items:center;justify-content:flex-start}
.sh .sh-right .sg-auth{background:none;color:inherit}
.sh-lang{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid currentColor;border-radius:999px;color:inherit;text-decoration:none;opacity:.9;white-space:nowrap}
.sh-lang:hover{opacity:1;background:rgba(255,247,234,.1)}
.sh-flag{width:22px;height:16px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.2);flex:none}
.sh a:focus-visible,.sh button:focus-visible{outline:3px solid var(--sh-focus);outline-offset:2px}
.sh-nav{max-width:1100px;margin:0 auto;padding:2px 16px 6px}
.sh-nav>ul{display:flex;justify-content:center;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
/* Each item is a flex box too, so links (logo only) and buttons (logo + caret) line up on their middles, not on a text baseline. */
.sh-nav>ul>li{display:flex;align-items:center}
.sh-dd{position:relative}
.sh-main{display:inline-flex;align-items:center;gap:3px;min-height:50px;padding:4px 10px;border:0;border-radius:14px;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.sh-main:hover{background:rgba(255,247,234,.1)}
.sh-main.sh-on,.sh-main[aria-expanded="true"]{background:rgba(255,247,234,.16)}
.sh-main img{display:block;height:38px;width:auto;flex:none}
.sh-caret{font-size:15px;line-height:1;color:#ffe3bd;transition:transform .15s}
.sh-main[aria-expanded="true"] .sh-caret{transform:rotate(180deg)}
/* Word logo files taller than 80 px (room for the gift box and the p tails) keep the same pixel scale (--k = file height / 80),
   with the baseline 15.2 file px below the middle, and equal negative margins so the row keeps the height of an 80 px logo.
   tools/build_site_header.py writes the class and --k. */
.sh-main img.sh-tall{height:calc(var(--sh-u)*80*var(--k));margin:calc(var(--sh-u)*40*(1 - var(--k))) 0}
/* The old Shop logo (Thomas kept it, 4 Nov): its capital is 55.9 px with the baseline 20.0 px below the middle, so it is drawn
   at 50.4 / 55.9 of the size and moved up by (20.0 x 50.4 / 55.9 - 15.2) = 2.83 u. */
.sh-main img.sh-shop-old{height:calc(var(--sh-u)*80*.9016);transform:translateY(calc(var(--sh-u)*-2.83))}
.sh-app{gap:7px}
.sh-app img.sh-icon{height:34px;border-radius:10px;box-shadow:0 0 0 2px #3b2416}
/* The cream felt drop-down panels */
.sh-panel{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);min-width:230px;margin:0;padding:8px;list-style:none;
  background:var(--sh-paper);color:var(--sh-text);border:1px solid rgba(47,42,38,.22);border-radius:16px;box-shadow:0 10px 24px rgba(47,42,54,.25);
  outline:2px dashed rgba(201,151,58,.5);outline-offset:-6px;z-index:910}
.sh-panel[hidden]{display:none}
/* Without JavaScript (site-header.js sets data-sh-js) the panels open on hover and while focus is inside the item. */
.sh:not([data-sh-js]) .sh-dd:hover>.sh-panel,.sh:not([data-sh-js]) .sh-dd:focus-within>.sh-panel{display:block!important} /* beats the pages' own [hidden]{display:none!important} */
.sh:not([data-sh-js]) .sh-panel::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px} /* keeps the hover across the gap under the button */
.sh-panel li+li{border-top:1px solid rgba(47,42,38,.1)}
.sh-panel a,.sh-soon{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 14px;border-radius:10px;color:inherit;text-decoration:none;font-weight:700}
.sh-panel a:hover,.sh-panel a:focus-visible{background:#efe6d6}
.sh-panel a:focus-visible{outline:3px solid var(--sh-gold);outline-offset:-3px}
.sh-panel li.sh-all a{font-weight:600;color:rgba(47,42,38,.8)}
.sh-soon{color:rgba(47,42,38,.55);font-weight:600;cursor:default}
.sh-soon small{font-size:12px;font-weight:700;background:var(--sh-tint);border-radius:999px;padding:2px 8px;margin-left:auto}
.sh-mi{width:26px;height:26px;object-fit:contain;flex:none}
/* Phones: the bar keeps logo + login + language; the four buttons share one row and shrink with the width;
   drop-downs open full width under the bar. */
@media (max-width:599px){
  .sh-bar{padding:6px 12px 0}
  .sh-lang{padding:0 12px;font-size:14px}
  .sh-nav{padding:0 6px 4px}
  .sh-nav>ul{justify-content:space-between;gap:0}
  .sh-dd{position:static}
  .sh-main{min-height:50px;padding:4px 3px;gap:2px}
  .sh{--sh-u:calc(clamp(21px,6.6vw,27px)/80)}
  .sh-main img{height:calc(var(--sh-u)*80)}
  .sh-caret{font-size:12px}
  .sh-app{gap:4px}
  .sh-app img.sh-icon{height:clamp(22px,6.8vw,28px);border-radius:7px;box-shadow:0 0 0 1.5px #3b2416}
  .sh-panel{left:0;right:0;top:100%;transform:none;min-width:0;border-radius:0 0 16px 16px;border-left:0;border-right:0;padding:8px 10px 10px}
}
/* Wide screens: one row, logo left, buttons centred, login + language right (Thomas, 2 Nov: «5 anbefalt»).
   Below 1280 px the bar and the buttons stay two rows; at 1024 px one row is too tight. */
@media (min-width:1280px){
  .sh{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 16px}
  .sh>.sh-bar{display:contents}
  .sh .sh-brand{grid-area:1/1;justify-self:start}
  .sh>.sh-nav{grid-area:1/2;padding:0;margin:0}
  .sh .sh-right{grid-area:1/3;justify-self:end}
}
@media (prefers-reduced-motion:reduce){.sh-caret{transition:none}}