/* ---------- KNAPPEN I HEADERN ---------- */
/* Omslaget ligger i .urskap-burger-wrap och ärver dess radning och gap. Det
   är exakt lika brett som knappen – bubblan nedan är absolut placerad och tar
   ingen plats, vilket är ett krav: menu.js mäter burger-wrapens bredd för att
   avgöra om header-menyn ryms. */
.urskap-theme-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.urskap-theme-toggle{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  padding:0;
  background:none;
  border:none;
  border-radius:50%;
  color:var(--urskap-ink);
  cursor:pointer;
  flex-shrink:0;
  transition:color .3s ease;
}
.urskap-theme-toggle:hover{color:var(--urskap-accent);}
.urskap-theme-toggle:focus-visible{
  outline:2px solid var(--urskap-accent);
  outline-offset:2px;
}
.urskap-theme-icon{
  display:block;
  transition:transform .45s cubic-bezier(.65,0,.35,1), opacity .3s ease;
}
/* Bara en ikon i taget. Den bortvalda roteras ut i stället för att bara
   döljas, så växlingen får en rörelse i sig. Ikonerna ligger på varandra –
   annars hade knappen blivit dubbelt så bred. */
.urskap-theme-icon--sun{
  position:absolute;
  top:50%; left:50%;
  margin:-10px 0 0 -10px;
  opacity:0;
  transform:rotate(-90deg) scale(.6);
}
html.urskap-dark .urskap-theme-icon--moon{
  opacity:0;
  transform:rotate(90deg) scale(.6);
}
html.urskap-dark .urskap-theme-icon--sun{
  opacity:1;
  transform:rotate(0) scale(1);
}

/* ---------- HJÄLPBUBBLAN VID KNAPPEN ---------- */
/* Sajten är mörk som standard. Den som hellre vill ha den ljus måste få veta
   att solen i headern är knappen för det – annars är den bara ännu en ikon i
   raden. Bubblan visas en gång per webbläsare, bara i mörkt läge och bara för
   den som inte redan valt tema själv. Villkoren ligger i dark.js. */
.urskap-theme-hint{
  position:absolute;
  /* Hänger under knappen och växer åt vänster. Åt höger står varukorgen och
     burgaren, och på mobil tar skärmkanten slut strax efter dem. */
  top:calc(100% + 12px);
  right:-6px;
  display:flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:min(240px, 56vw);
  padding:9px 9px 9px 13px;
  /* Vänd mot headern: i mörkt läge blir bubblan ljus mot mörk sida. En platta
     i samma ton som bakgrunden hade behövt en ram för att alls märkas, och
     det här är det enda stället på sajten som ska dra blicken till sig. */
  background:var(--urskap-ink);
  color:var(--urskap-paper);
  border-radius:8px;
  box-shadow:0 6px 22px rgba(var(--urskap-ink-rgb),.28);
  font-family:var(--urskap-sans);
  font-size:13px;
  line-height:1.35;
  text-align:left;
  /* Faller in nedifrån när dark.js visar den. */
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .35s ease,
             transform .35s cubic-bezier(.65,0,.35,1),
             visibility .35s ease;
}
.urskap-theme-hint.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
/* Spetsen som pekar upp mot solen. Omslaget är 40px brett, alltså ligger
   knappens mitt 20px in från högerkanten – plus bubblans 6px förskjutning och
   minus halva spetsen blir det 21px. */
.urskap-theme-hint::before{
  content:"";
  position:absolute;
  top:-4px;
  right:21px;
  width:9px;height:9px;
  background:inherit;
  border-radius:2px;
  transform:rotate(45deg);
}

.urskap-theme-hint__text{
  flex:1;
}

.urskap-theme-hint__close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  flex-shrink:0;
  padding:0;
  margin:0;
  background:none;
  border:none;
  border-radius:50%;
  color:inherit;
  opacity:.6;
  cursor:pointer;
  transition:opacity .25s ease;
}
.urskap-theme-hint__close:hover{opacity:1;}
.urskap-theme-hint__close:focus-visible{
  opacity:1;
  /* Konturen ritas i bubblans egen bakgrundsfärg – accenten syns inte mot
     den ljusa plattan. */
  outline:2px solid var(--urskap-paper);
  outline-offset:1px;
}

/* Knappen bubblan pekar på lyfts fram medan hjälpen syns, annars är det inte
   givet vilken av ikonerna i headern texten menar. */
.urskap-theme-toggle.is-hinted{
  color:var(--urskap-accent);
}

/* Menyoverlayn ligger UNDER headern (150 mot 200), så bubblan hade blivit
   kvar ovanpå den. Den viker undan av sig själv när menyn öppnas. Varukorgen
   behöver ingen motsvarande regel – dess panel ligger på 290 och täcker hela
   headern. */
.urskap-header.is-menu-open .urskap-theme-hint{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ---------- MÖRKT LÄGE ---------- */
/* Hela växlingen sitter här: menu.css och cart.css använder bara de här
   variablerna, så komponenterna följer med utan egna undantag. */
html.urskap-dark{
  --urskap-ink:#f2ede5;
  --urskap-paper:#151210;
  --urskap-ink-rgb:242,237,229;
  --urskap-paper-rgb:21,18,16;
  --urskap-line:#3a332c;
  /* Den ljusare accenten behövs: #8a7458 är för mörk mot mörk bakgrund för
     att klara kontrastkraven. */
  --urskap-accent:#e0654a;

  /* Blocktemats palett. I Twenty Twenty-temana är base bakgrunden och
     contrast texten, och temats egna regler pekar på de här variablerna –
     därför följer även innehållet med, inte bara pluginets delar. */
  --wp--preset--color--base:#151210;
  --wp--preset--color--contrast:#f2ede5;

  /* Får webbläsaren att rita rullningslister, formulärfält och inbyggda
     kontroller mörka. */
  color-scheme:dark;
}

/* Reserv för teman som målar bakgrunden utan att gå via paletten ovan. */
html.urskap-dark body{
  background-color:var(--urskap-paper);
  color:var(--urskap-ink);
}

/* Loggan är mörk och syns knappt mot mörk bakgrund. brightness(0) lägger allt
   svart och invert(1) vänder det till vitt, så hela märket får samma ton.
   Behåll ordningen: enbart invert(1) hade vänt det röda runmärket till cyan,
   och invert + hue-rotate hade gjort det rosa.

   Gäller oavsett om menyn är öppen eller inte. Här stod förut ett undantag för
   öppen meny, eftersom overlayn då var ljus – den har numera sajtens egna
   färger, alltså mörka i mörkt läge, och undantaget hade gjort loggan osynlig. */
html.urskap-dark #urskap-header .urskap-logo-img{
  filter:brightness(0) invert(1);
}
/* Bilder och video ska inte tonas – bara ramar och ytor runt dem. Regeln
   finns för att fånga teman som lägger en ljus platta bakom figurer. */
html.urskap-dark figure,
html.urskap-dark img,
html.urskap-dark video{
  background-color:transparent;
}

/* Mörka logotyper och streckgrafik i innehållet. Sätt klassen
   "urskap-invert-dark" i blockets fält Avancerat → Ytterligare CSS-klass, så
   vänds bilden till ljus i mörkt läge på samma sätt som headerns logga.
   Webbplatslogotypen och bilder som är samma mediefil som den fixas
   automatiskt – se den inline-CSS som Urskap_Dark_Mode skriver ut. */
html.urskap-dark .urskap-invert-dark,
html.urskap-dark .urskap-invert-dark img,
html.urskap-dark .wp-block-site-logo img{
  filter:brightness(0) invert(1);
}

/* ---------- SIDFOT ---------- */
/* Sidfotens ljusgrå platta blir nästan vit när paletten vänds, och den mörka
   texten på den blir ljus – alltså ljust på ljust. Bakgrunden sätts ofta som
   inline-style från blockredigeraren, och inline vinner över allt utom
   !important. Därför står det här, och bara här. */
html.urskap-dark footer,
html.urskap-dark .wp-block-template-part footer,
html.urskap-dark footer .wp-block-group{
  background-color:#1d1916 !important;
  color:var(--urskap-ink) !important;
}
html.urskap-dark footer :is(p, span, li, h1, h2, h3, h4, h5, h6){
  color:var(--urskap-ink);
}
html.urskap-dark footer a{
  color:var(--urskap-ink);
}
html.urskap-dark footer a:hover{
  color:var(--urskap-accent);
}
/* Avgränsningen mot sidan ovanför försvinner när båda är mörka. */
html.urskap-dark footer{
  border-top:1px solid var(--urskap-line);
}

/* ---------- WOOCOMMERCE I MÖRKT LÄGE ---------- */
/* WooCommerces knappar är hårdkodat svarta och försvinner mot mörk bakgrund.
   Här vänds de till ljusa med mörk text – samma logik som mini-cartens
   kassaknapp. Listan täcker standardknapparna; egna teman eller tillägg kan
   behöva fyllas på. */
html.urskap-dark .woocommerce .button,
html.urskap-dark .woocommerce button.button,
html.urskap-dark .woocommerce input.button,
html.urskap-dark .woocommerce a.button,
html.urskap-dark .wp-block-button__link{
  background-color:var(--urskap-ink);
  color:var(--urskap-paper);
  border-color:var(--urskap-ink);
}
html.urskap-dark .woocommerce .button:hover,
html.urskap-dark .woocommerce button.button:hover,
html.urskap-dark .woocommerce input.button:hover,
html.urskap-dark .woocommerce a.button:hover,
html.urskap-dark .wp-block-button__link:hover{
  background-color:var(--urskap-accent);
  border-color:var(--urskap-accent);
  color:var(--urskap-paper);
}

/* Antalsfältet och andra inmatningar. */
html.urskap-dark .woocommerce input[type="text"],
html.urskap-dark .woocommerce input[type="email"],
html.urskap-dark .woocommerce input[type="tel"],
html.urskap-dark .woocommerce input[type="number"],
html.urskap-dark .woocommerce input[type="search"],
html.urskap-dark .woocommerce textarea,
html.urskap-dark .woocommerce select{
  background-color:transparent;
  color:var(--urskap-ink);
  border:1px solid var(--urskap-line);
}

html.urskap-dark .woocommerce-breadcrumb,
html.urskap-dark .woocommerce-breadcrumb a,
html.urskap-dark .product_meta,
html.urskap-dark .product_meta a{
  color:var(--urskap-ink);
}

html.urskap-dark hr,
html.urskap-dark .woocommerce table,
html.urskap-dark .woocommerce td,
html.urskap-dark .woocommerce th{
  border-color:var(--urskap-line);
}

/* ---------- KASSA OCH VARUKORG (WOOCOMMERCE-BLOCK) ---------- */
/* Reglerna ovan biter inte på block-kassan: dess fält ligger i
   .wc-block-components-* och inte under .woocommerce, och de har hårdkodat
   vit botten (background-color:#fff) medan etiketten ovanpå är color:inherit.
   I mörkt läge ärvde etiketten alltså den ljusa texten och blev ljus på vitt
   – hjälptexterna i fälten försvann. Samma sak med det valda leveranssättet
   ("Skicka"), som också målas vitt.

   WooCommerce har redan ett färdigt mörkt utseende för hela kassan, men det
   är tänkt som en blockinställning ("Mörka kontroller") och ligger därför
   fast i sidans innehåll – det kan inte följa med en knapp i headern. Det som
   utlöser det är klassen has-dark-controls hos en förfader, och drygt hundra
   av WooCommerces regler letar efter den som just förfader. Därför sätter
   dark.js den på <html> bredvid urskap-dark, och boot-scriptet i wp_head gör
   samma sak så kassan inte hinner blinka vit.

   Det ger inga egna regler här, och det är meningen: fält, etiketter,
   markeringar, felmeddelanden och leveransval får WooCommerces egen mörka
   palett, som följer med när tillägget uppdateras i stället för att behöva
   skuggas rad för rad.

   Tre regler kräver klassen på själva varukorgsblocket
   (.wc-block-cart.has-dark-controls) och nås alltså inte från <html>. De
   behöver ingen ersättning – de sätter bara ramar och rubrikfärg som redan
   räknas ut ur currentColor, alltså ur den ljusa texten. */

/* ---------- PILARNA I PRODUKTKARUSELLEN ---------- */
/* WooCommerces Produktsamling-block i karusell-läge ritar sina pilknappar så
   här (product-gallery-large-image-next-previous-style.css):

     :where(.wc-block-next-previous-buttons__button){background:#fff; …}
     :where(.wc-block-next-previous-buttons__icon){color:inherit}

   Botten är alltså hårdkodat vit medan pilen ärver textfärgen. I mörkt läge är
   textfärgen nästan vit – pilen blev vit på vitt, och knapparna såg ut som två
   tomma vita kvadrater bredvid rubriken.

   :where() har noll specificitet, så en enda klass räcker för att ta över.
   Knappen görs genomskinlig i stället för mörk: bakom den ligger sidans egen
   bakgrund, och en rund ram binder ihop den med resten av sajtens knappar. */
html.urskap-dark .wc-block-next-previous-buttons__button{
  background:transparent;
  color:var(--urskap-ink);
  border:1px solid var(--urskap-line);
  border-radius:50%;
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
html.urskap-dark .wc-block-next-previous-buttons__button:hover{
  color:var(--urskap-accent);
  border-color:var(--urskap-accent);
  background:rgba(var(--urskap-ink-rgb),.06);
}
html.urskap-dark .wc-block-next-previous-buttons__button:focus-visible{
  outline:2px solid var(--urskap-accent);
  /* WooCommerce drar in ramen med -2px, vilket klipps av border-radius. */
  outline-offset:2px;
}
/* Den avstängda pilen (första/sista produkten) ska synas att den är avstängd
   utan att bli en fläck: WooCommerce sätter redan 30 % opacitet på själva
   pilen, ramen behöver följa med. */
html.urskap-dark .wc-block-next-previous-buttons__button[aria-disabled="true"]{
  border-color:rgba(var(--urskap-ink-rgb),.18);
}
html.urskap-dark .wc-block-next-previous-buttons__button[aria-disabled="true"]:hover{
  color:var(--urskap-ink);
  border-color:rgba(var(--urskap-ink-rgb),.18);
  background:transparent;
}

/* ---------- TILLGÄNGLIGHET ---------- */
@media (prefers-reduced-motion: reduce){
  .urskap-theme-icon,
  /* Bubblan blir kvar, men ploppar fram i stället för att glida in. Den bär
     information och är inte en effekt – det är bara rörelsen som ska bort. */
  .urskap-theme-hint{
    transition-duration:.01ms !important;
  }
}