/* =========================================================================
   chrille.nu - Sajtens skal: sidhuvud, meny, sidfot

   Hello Elementors egna mallar renderar både sidhuvud och sidfot. Det finns
   alltså ingen Elementor-header att styla, och universe-scope.css regler mot
   .elementor-location-header träffar inget på den här sajten. Skalet stylas
   här istället.

   Skalet är alltid mörkt, oavsett vilket område man står i. Det är sajtens
   ram, inte en del av området.
   ========================================================================= */

.site-header {
  background: var(--c-ink-900);
  border-bottom: 1px solid var(--c-ink-700);
}

/* Sidhuvudet följer heron ut i kanterna. Enda marginalen är luften in från
   fönsterkanten, samma som panelerna får. */
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--s-4) var(--s-6);
}

/* --- Logotypen ----------------------------------------------------------- */
/* Filen är 250x115 och renderades i full storlek, vilket gjorde sidhuvudet
   182px högt. Ett tvåradigt namn behöver inte mer än en dryg tumme. Höjden
   styr, bredden följer med. */
.site-header .site-branding {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0;
}
.site-header .site-logo { margin: 0; }
/* Logotypslänken bär bara en bild, men den ärver en färg ändå, och den
   färgen räknas av kontrastmätningen som text mot skalets botten. Tio rader
   brus i en rapport med tretton rader. Explicit färg tystar den. */
.site-header .custom-logo-link,
.site-footer .custom-logo-link {
  display: block;
  line-height: 0;
  color: var(--c-green-100);
}
.site-header .custom-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: none;
}

/* --- Huvudmenyn ----------------------------------------------------------
   Hello Elementor har egna regler i header-footer.css, och de är mer
   specifika än vad man först tror: .site-navigation ul.menu li a är 0-2-3.
   Selektorerna nedan är därför skrivna för att matcha deras, inte för att se
   snygga ut. Layouten (flex, absolutpositionerade undermenyer, visning vid
   hover) sköter temat redan, här sätts bara färg och form.
   ------------------------------------------------------------------------ */

.site-header .site-navigation ul.menu { gap: var(--s-2); }

/* Listelementen har ingen egen synlig text, den målas av länken inuti. Men de
   ärver brödtextens färg, och på sidor utan område blir det svart på svart.
   Ingen ser det, och det är just problemet: kontrastmätningen rapporterade
   trettiofem sådana rader och dränkte de tre riktiga fynden. En ärvd färg som
   ingen kan se är ändå en färg någon måste förklara bort. */
.site-header .site-navigation ul.menu li,
.site-header .site-navigation-dropdown ul.menu li { color: var(--c-green-100); }

.site-header .site-navigation ul.menu li a {
  padding: var(--s-2) var(--s-3);
  font: 600 14px/1.4 var(--f-sans);
  letter-spacing: .02em;
  color: var(--c-green-100);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header .site-navigation ul.menu li a:hover,
.site-header .site-navigation ul.menu li a:focus-visible {
  color: var(--c-white);
  border-bottom-color: var(--c-green-500);
}

/* Sidan man står på markeras, annars vet man inte var i huset man är. */
.site-header .site-navigation ul.menu li.current-menu-item > a,
.site-header .site-navigation ul.menu li.current-menu-ancestor > a {
  color: var(--c-white);
  border-bottom-color: var(--c-green-500);
}

/* Pilen som visar att posten har undersidor. Temat ritar den i #666. */
.site-header .site-navigation ul.menu li.menu-item-has-children::after {
  color: var(--c-moss);
  font-size: 1.1em;
}

/* Undermenyn. Temat ger den vit botten och sköter visningen med display. */
.site-header .site-navigation ul.menu li ul {
  min-width: 200px;
  padding: var(--s-2) 0;
  background: var(--c-ink-800);
  border: 1px solid var(--c-ink-700);
}
.site-header .site-navigation ul.menu li ul li { border-block-end: 0; }
.site-header .site-navigation ul.menu li ul li a {
  width: 100%;
  padding: var(--s-2) var(--s-4);
  border-bottom: 0;
}
.site-header .site-navigation ul.menu li ul li a:hover {
  background: var(--c-ink-700);
  color: var(--c-white);
}

/* --- Hamburgaren och mobilmenyn ------------------------------------------
   Temat ritar knappen i rgba(0,0,0,.05) och listan i vitt med grå text, alltså
   sajtens omvända färger. Under 992px är det den enda menyn som finns.
   ------------------------------------------------------------------------ */

.site-header .site-navigation-toggle-holder .site-navigation-toggle {
  background-color: transparent;
  border: 1px solid var(--c-ink-700);
  border-radius: var(--radius-sm);
  color: var(--c-green-100);
  min-height: 44px;
  min-width: 44px;
}
.site-header .site-navigation-toggle-holder .site-navigation-toggle:hover {
  border-color: var(--c-green-500);
  color: var(--c-white);
}

.site-header .site-navigation-dropdown ul.menu { background: var(--c-ink-800); }
.site-header .site-navigation-dropdown ul.menu li a {
  padding: var(--s-4) var(--s-6);
  background: var(--c-ink-800);
  box-shadow: inset 0 -1px 0 var(--c-ink-700);
  font: 600 16px/1.3 var(--f-sans);
  color: var(--c-green-100);
}
.site-header .site-navigation-dropdown ul.menu li a:hover {
  background: var(--c-ink-700);
  color: var(--c-white);
}
.site-header .site-navigation-dropdown ul.menu li.current-menu-item a {
  background: var(--c-green-900);
  color: var(--c-white);
}

/* --- Sidfoten ------------------------------------------------------------
   Samma mall som sidhuvudet, samma problem: Hello Elementor ritar den utan
   att veta något om sajtens färger, och logotypen kom i sin fulla storlek.
   ------------------------------------------------------------------------ */

.site-footer {
  background: var(--c-ink-900);
  border-top: 1px solid var(--c-ink-700);
}
.site-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--s-5) var(--s-6);
}
.site-footer .custom-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: none;
}
.site-footer .copyright p,
.site-footer .site-description {
  margin: 0;
  font: var(--t-label);
  letter-spacing: .08em;
  color: var(--c-moss);
}
.site-footer .site-navigation ul.menu li a {
  padding: var(--s-2) var(--s-3);
  font: 600 13px/1.4 var(--f-sans);
  color: var(--c-green-100);
  text-decoration: none;
}
.site-footer .site-navigation ul.menu li a:hover { color: var(--c-white); }

/* --- Undertiteln --------------------------------------------------------- */
/* "Personlig hemsida och blogg" är struken. Den slås av i Hello Elementors
   egen inställning (kittets hello_header_tagline_display, se migrationen
   chrome-01-doljtagline.php) så att den försvinner ur markupen och inte bara
   ur bilden. Regeln här är ett bälte om inställningen någon gång nollställs
   av en temauppdatering. */
.site-header .site-description,
.site-footer .site-description { display: none; }

/* =========================================================================
   Responsivt
   ========================================================================= */
@media (max-width: 900px) {
  .site-header .header-inner { padding: var(--s-3) var(--s-4); }
  .site-header .custom-logo { height: 44px; }
}