/*!
 * Roswall Tid — maskineriet, ikke looket.
 *
 * Her er KUN instrumentet — bjælken i bunden. Alt andet er dit tema.
 *
 * Pluginnet UDREGNER stadig båndenes farver og udstiller dem som
 * --rw-band-1 … --rw-band-3 med hver deres tekst-, dæmpet- og knapfarve.
 * Hvad der sker med dem, bestemmer dit tema.
 *
 * Typografi, spacing, knappers form og alt andet er dit tema. Pluginnet
 * rører det ikke.
 *
 * Farverne kommer ind som CSS-variabler på :root — både --rw-* og
 * WordPress' egne --wp--preset--color--*, så alt hvad du designer med
 * temaets palet følger årstid og klokkeslæt af sig selv.
 */

:root{
  /* Fallback. Motoren overskriver dem alle sammen, men siden skal også
     være rigtig hvis JavaScript aldrig kører. Efterår / middag. */
  --rw-page:#F6F4F5; --rw-soft:#FBFAFA; --rw-ink:#331233; --rw-muted:#716D70;
  --rw-rule:#E0DDDF; --rw-felt:#CFC6C9; --rw-under:#8E8A8C;
  --rw-accent:#BA4C29; --rw-cta:#E45E32; --rw-cta-text:#331233;
  --rw-band-1:#FBCA69; --rw-band-1-ink:#331233; --rw-band-1-dim:#6D5632;
  --rw-band-1-cta:#CD471B; --rw-band-1-cta-text:#FBE9C8;
  --rw-band-2:#692746; --rw-band-2-ink:#F6F4F5; --rw-band-2-dim:#D6CFD1;
  --rw-band-2-cta:#E45E32; --rw-band-2-cta-text:#331233;
  --rw-band-3:#E8D9CE; --rw-band-3-ink:#331233; --rw-band-3-dim:#665E5C;
  --rw-band-3-cta:#D64E22; --rw-band-3-cta-text:#331233;
  --rw-navH:72px; --rw-rulH:96px; --rw-stick:calc(var(--rw-navH) + var(--rw-rulH));
}
@media(max-width:781px){ :root{ --rw-navH:62px; --rw-rulH:78px } }


/* ==========================================================================
   INSTRUMENTET — to tapedrejeskiver
   Ingen tekst i bjælken. Al tekst ændrer bredde når værdien skifter, og så
   danser layoutet; ikonerne siger det samme uden at flytte noget.
   Aksen roterer, viseren står stille. Begge skiver er løkker.
   ========================================================================== */
.rw-inst{ position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--rw-page); border-top:1px solid var(--rw-rule);
  transition:background-color .45s ease }
.rw-inst__in{ max-width:1360px; margin:0 auto; padding:0 var(--gut);
  display:flex; align-items:center; gap:clamp(14px,3vw,40px); height:52px }

/* --- selve skiven --- */
.rw-dial{ position:relative; height:44px; flex:none; touch-action:pan-y;
  cursor:grab; -webkit-user-select:none; user-select:none }
.rw-dial:active{ cursor:grabbing }
.rw-dial--day{ width:clamp(196px,30vw,360px) }
.rw-dial--year{ width:clamp(132px,17vw,208px) }
.rw-dial:focus{ outline:none }
.rw-dial:focus-visible .rw-dial__mark{ background:var(--rw-accent); width:2px }

.rw-dial__view{ position:absolute; inset:0; overflow:hidden;
  /* kanten fader, så man kan se at båndet fortsætter — det er den eneste
     visuelle besked om at der er mere at trække frem */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent) }
.rw-dial__tape{ position:absolute; top:0; bottom:0; left:0; will-change:transform }
.rw-dial__stop{ position:absolute; top:0; bottom:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:6px; transform:translateX(-50%) }

/* Stregerne skifter ALDRIG højde. Ikonet står ovenpå stregen i samme kolonne,
   så en streg der vokser, skubber ikonet — og så hopper hele båndet mens man
   trækker. Et skibsrat rykker sig ikke i højden. Kun farven siger noget. */
.rw-dial__tick{ display:block; width:1px; height:15px; background:var(--rw-muted);
  opacity:.45; transition:background-color .12s ease, opacity .12s ease }
.rw-dial__stop[data-near="0"] .rw-dial__tick{ opacity:.85 }
.rw-dial__ico{ height:14px; display:block; color:var(--rw-muted); opacity:0;
  transition:color .12s ease }
.rw-dial__stop[data-ico] .rw-dial__ico{ opacity:.7 }
.rw-dial__stop[data-near="0"][data-ico] .rw-dial__ico{ opacity:1; color:var(--rw-ink) }

/* Strejfet fra Feltet: kun et stænk af handlingsfarven, så man ved man har
   fat i noget. Ingen bevægelse. */
.rw-dial__stop[data-hot="0"] .rw-dial__tick{ background:var(--rw-cta); opacity:1 }
.rw-dial__stop[data-hot="1"] .rw-dial__tick{ background:var(--rw-cta); opacity:.62 }
.rw-dial__stop[data-hot="2"] .rw-dial__tick{ background:var(--rw-cta); opacity:.3 }
.rw-dial__stop[data-hot="0"] .rw-dial__ico{ color:var(--rw-cta); opacity:1 }
.rw-dial__stop[data-hot="1"] .rw-dial__ico{ color:var(--rw-cta); opacity:.75 }

/* viseren: en højere streg i midten, altid samme sted */
.rw-dial__mark{ position:absolute; left:50%; bottom:0; width:1px; height:25px;
  background:var(--rw-ink); transform:translateX(-50%); pointer-events:none;
  transition:background-color .45s ease }
.rw-inst[data-live="0"] .rw-dial__mark{ background:var(--rw-accent) }
/* årstidsskiven peger ned på ikonet */
.rw-dial--year .rw-dial__mark{ height:9px }
.rw-dial__caret{ position:absolute; left:50%; top:3px; transform:translateX(-50%);
  color:var(--rw-ink); pointer-events:none; display:block }
.rw-inst[data-live="0"] .rw-dial__caret{ color:var(--rw-accent) }

/* NU står altid, så bjælken ikke hopper når den dukker op */
.rw-inst__now{ margin-left:auto; flex:none; background:none; border:0; padding:6px 2px;
  color:var(--rw-accent); text-decoration:underline; text-underline-offset:4px;
  font:500 9.5px/1 var(--rw-mono); letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:opacity .2s }
.rw-inst[data-live="1"] .rw-inst__now{ opacity:0; pointer-events:none }

/* kun mobil: foldeknap */
.rw-inst__fold{ display:none }
@media(max-width:781px){
  .rw-inst__in{ flex-wrap:wrap; height:auto; gap:0 }
  .rw-inst__fold{ display:flex; align-items:center; gap:9px; width:100%;
    padding-block:13px; background:none; border:0; cursor:pointer; color:var(--rw-ink);
    font:500 9.5px/1.6 var(--rw-mono); letter-spacing:.2em; text-transform:uppercase }
  .rw-inst__fold .rw-inst__dot{ width:5px; height:5px; border-radius:50%;
    background:var(--rw-accent); flex:none }
  .rw-inst[data-live="0"] .rw-inst__fold .rw-inst__dot{ background:var(--rw-muted) }
  .rw-inst__fold svg{ margin-left:auto; transition:transform .2s }
  .rw-inst[data-open="1"] .rw-inst__fold svg{ transform:rotate(180deg) }
  .rw-dial--day{ width:100%; order:5 }
  .rw-dial--year{ width:100%; order:6; height:40px }
  .rw-inst__now{ order:7; margin:0 0 0 auto; padding-bottom:12px }
  .rw-inst:not([data-open="1"]) .rw-dial,
  .rw-inst:not([data-open="1"]) .rw-inst__now{ display:none }
}

body{ padding-bottom:53px }
@media(max-width:781px){ body{ padding-bottom:50px } }
/* Mens man trækker i en skive: en KORT overgang, ikke ingen.
   0,45s slæber en halv sekund bagefter hånden; 0s hakker i trin.
   0,14s lineær blander trinene sammen uden at komme bagud — farven
   smører over i stedet for at klikke. */
html.rw-scrub *, html.rw-scrub *::before, html.rw-scrub *::after{
  transition-duration:.14s !important;
  transition-timing-function:linear !important }

@media (prefers-reduced-motion:reduce){ *{ transition-duration:.01ms !important } }