/*
 * 07-header-footer.css – Headerns underkant och footern (Block-element)
 * Del av child-temat Haninge Grav. Se README.md.
 */

/* ==========================================================================
   Header
   På mörk bakgrund syns inte en skugga – headern får i stället en
   hårfin kant och en mjuk mörk skugga när menyn ligger fast vid scroll.
   Bakgrundsfärgen sätts i Customize → Colors → Header / Primary Navigation
   (välj Background eller Background alt).
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--hg-border);
}
.main-navigation.navigation-stick,
.main-navigation.is_stuck,
#mobile-header.navigation-stick,
#mobile-header.is_stuck {
  border-bottom: 1px solid var(--hg-border);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7);
}

/* ==========================================================================
   Footer (Block-element, Site Footer)
   Lägg klassen hg-footer på footerns yttersta grupp.
   ========================================================================== */
.wp-block-group.hg-footer {
  --x-fg: var(--hg-fg-muted);
  --x-heading: var(--hg-fg);
  --x-muted: var(--hg-fg-subtle);
  --x-label: var(--hg-accent);
  --x-dot: var(--hg-accent);
  --x-link: var(--hg-fg);
  --x-line: var(--hg-border);
  background: var(--hg-bg-alt);
  color: var(--x-fg);
  font-size: var(--fs-small);
  border-top: 1px solid var(--hg-border);
}
.hg-footer :is(h2, h3, h4):not(.has-text-color) { color: var(--x-heading); }
.hg-footer a { color: var(--x-link); text-decoration: none; }
.hg-footer a:hover { color: var(--hg-accent); text-decoration: underline; }

ul.hg-footer-links { list-style: none; margin-left: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.hg-footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--x-line);
  font-size: 14px;
  color: var(--x-muted);
  column-gap: 24px;
}