/* J. Norberg Plåtslageri – gemensam header
   Mått och layoutläge kommer från tokens.css (--header-height, --header-logo-width).
   Stående: logotyp överst, navigation under. Liggande: logotyp och navigation på en rad. */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  width: 100%;
  height: var(--header-height);
  background: rgba(var(--paper-rgb), 0.97);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html { scrollbar-gutter: stable; }

section { scroll-margin-top: var(--header-height); }

body > main,
body > .inner-main,
.inner-page .inner-main,
.inner-page.service-page .inner-main {
  padding-top: var(--header-height);
}

.site-header .nav-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px max(8px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left));
}

.site-header .brand {
  flex: 0 0 66px;
  width: var(--header-logo-width);
  max-width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header .brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-header .main-nav {
  flex: 0 0 42px;
  width: 100%;
  min-width: 0;
  padding: 0 0 0 10px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-header .main-nav::-webkit-scrollbar { display: none; }

.site-header .main-nav .nav-link {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 0;
  color: var(--ink);
  font: 500 clamp(11px, 3.1vw, 14px)/1.15 var(--sans);
  white-space: nowrap;
}

.site-header .main-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--copper);
  transition: width 0.25s ease;
}

.site-header .main-nav .nav-link.active { color: var(--copper-dark); }
.site-header .main-nav .nav-link.active::after { width: 100%; }

/* Kontakt är knappen från designsystemet och ligger direkt efter de andra
   länkarna. I stående läge fastnar den vid högerkanten när menyn svepas. */
.site-header .main-nav > .header-contact {
  position: sticky;
  right: 0;
  padding: 10px 12px;
  box-shadow: -28px 0 18px -6px var(--paper);
  gap: 6px;
  border: 1px solid var(--copper);
  border-radius: var(--r);
  background: var(--copper);
  color: var(--on-accent);
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.site-header .main-nav > .header-contact::after { display: none; }

.site-header .main-nav > .header-contact span {
  display: inline;
  transition: transform 0.2s ease;
}

.site-header .main-nav > .header-contact:hover,
.site-header .main-nav > .header-contact.active {
  background: var(--accent-hover-bg);
  border-color: var(--accent-hover-bg);
  color: var(--accent-hover-fg);
}

.site-header .main-nav > .header-contact:hover span,
.site-header .main-nav > .header-contact.active span { transform: translateX(3px); }

@media (hover: hover) and (pointer: fine) {
  .site-header .main-nav .nav-link:not(.header-contact):hover { color: var(--copper-dark); }
  .site-header .main-nav .nav-link:not(.header-contact):hover::after { width: 100%; }
}

/* Tjänstesidor har fler länkar: något mindre text, men Kontakt-knappen
   är lika stor på alla sidor */
.inner-page.service-page .site-header .main-nav .nav-link:not(.header-contact) {
  font-size: clamp(10px, 2.75vw, 13px);
}

/* ---------- Liggande skärm ---------- */
@media (orientation: landscape) {
  .site-header .nav-wrap {
    width: min(calc(100% - clamp(40px, 4vw, 64px)), var(--max-width));
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: var(--header-logo-width) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(18px, 2.4vw, 38px);
  }

  .site-header .brand {
    flex: none;
    height: 100%;
    justify-content: flex-start;
  }

  .site-header .brand img {
    height: auto;
    max-height: calc(var(--header-height) - 16px);
    object-position: left center;
  }

  .site-header .main-nav {
    flex: none;
    gap: var(--header-nav-gap, clamp(14px, 1.6vw, 28px));
    padding: 0;
  }

  .site-header .main-nav .nav-link {
    padding: 12px 0;
    font-size: clamp(13px, 1.15vw, 15px);
  }

  .inner-page.service-page .site-header .main-nav .nav-link:not(.header-contact) {
    font-size: clamp(13px, 1.15vw, 15px);
  }

  .site-header .main-nav .nav-link::after { bottom: 2px; }

  .site-header .main-nav > .header-contact {
    position: relative;
    padding: 8px 16px;
    gap: 8px;
    box-shadow: none;
  }
}

/* ---------- Stående skärm: kompakt header ----------
   Logga till vänster, ringknapp och menyknapp till höger (menu.js).
   Flikarna ligger i helskärmsmenyn i stället. */
.header-actions { display: none; }

@media (orientation: portrait) {
  .site-header .nav-wrap {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }

  .site-header .brand {
    flex: 0 1 auto;
    height: 48px;
    justify-content: flex-start;
  }

  .site-header .brand img { object-position: left center; }
  .site-header .main-nav { display: none; }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

.header-call,
.header-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.header-call { width: 40px; height: 40px; background: var(--copper); color: var(--on-accent); }
.header-call:hover, .header-call:focus-visible { background: var(--accent-hover-bg); color: var(--accent-hover-fg); }

.header-call svg,
.header-menu-toggle svg,
.site-menu svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Helskärmsmenyn ---------- */
html.site-menu-open { overflow: hidden; }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 0 max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-y: auto;
  background: var(--surface-dark);
  color: var(--on-dark);
}

.site-menu[hidden] { display: none; }

.site-menu-top {
  display: flex;
  flex: 0 0 var(--header-height);
  align-items: center;
  justify-content: space-between;
}

/* Vit logga. Filen har tom yta runt loggan, så rutan visar bara loggdelen
   (x 55–2000, y 100–440 av 2000 × 816). */
.site-menu-brand { display: block; width: var(--header-logo-width); aspect-ratio: 1945 / 340; overflow: hidden; }
.site-menu-brand img { display: block; width: 102.83%; max-width: none; height: auto; margin: -5.14% 0 0 -2.83%; }

.site-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}

.site-menu-back {
  margin-top: var(--s2);
  color: var(--accent-light);
  font: 500 15px/1.3 var(--sans);
}

.site-menu-list,
.site-menu-sub { margin: 0; padding: 0; list-style: none; }

.site-menu-list { margin-top: var(--s3); }

.site-menu-list > li > a {
  display: block;
  padding: 6px 0;
  color: var(--on-dark);
  font: 500 clamp(24px, 7vw, 32px)/1.2 var(--serif);
}

.site-menu-sub {
  margin: 2px 0 8px 2px;
  padding-left: 14px;
  border-left: 1px solid var(--copper);
}

.site-menu-sub a {
  display: block;
  padding: 6px 0;
  color: var(--line);
  font: 400 16px/1.3 var(--sans);
}

.site-menu-sub a[aria-current="page"] { color: var(--accent-light); font-weight: 600; }

.site-menu a:hover,
.site-menu a:focus-visible { color: var(--accent-light); }

.site-menu-contact {
  display: flex;
  gap: var(--s1);
  margin-top: auto;
  padding-top: var(--s4);
}

.site-menu-contact .btn--ghost { padding-inline: 14px; color: var(--accent-light); }
.site-menu-contact .btn--ghost:hover { color: var(--on-accent); }

/* Menyn högerställd: lättare att nå med tummen när man håller telefonen
   i en hand. Undermenyns kopparlinje ligger på höger sida. */
.site-menu-back,
.site-menu-list { text-align: right; }

.site-menu-back { align-self: flex-end; }

.site-menu-sub {
  margin: 2px 2px 8px 0;
  padding: 0 14px 0 0;
  border-left: 0;
  border-right: 1px solid var(--copper);
}

.site-menu-contact { justify-content: flex-end; }

/* ---------- Rullgardinsmeny under Tjänster (datorn) ---------- */
.site-header .nav-item { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.nav-dropdown { display: none; }

@media (orientation: landscape) {
  .site-header .main-nav { overflow: visible; }

  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: -18px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 230px;
    padding: 8px 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    box-shadow: 0 14px 34px rgba(42, 38, 34, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }

  /* Öppen vid hovring eller tangentbordsfokus, men inte efter ett klick
     (script.js sätter .is-closed tills muspekaren lämnat menyn) */
  .nav-item:not(.is-closed):hover .nav-dropdown,
  .nav-item:has(:focus-visible) .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }

  .nav-dropdown a {
    padding: 9px 18px;
    color: var(--ink);
    font: 500 14px/1.3 var(--sans);
    white-space: nowrap;
  }

  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible { background: var(--paper-2); color: var(--copper-dark); }
}

/* ---------- Temaknapp: Kopparbrun (nylagt) / Ärggrön (om hundra år) ----------
   Skapas i menu.js. Knapparna visar kopparen just nu: "Nylagt" / "Hundra år".
   Mobil: ruta bredvid telefonen, "Nylagt" eller "Hundra/år". */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 500 14px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible { border-color: var(--copper); background: var(--paper-2); }

/* Mobil på sidan: menyraden är trång */
@media (orientation: landscape) and (max-height: 560px) {
  .theme-toggle { padding: 5px; font-size: 11px; }
}

/* Mobil (stående): ruta lika stor som telefonknappen, "Nylagt" eller "Hundra/år" */
.theme-toggle--header {
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: var(--paper-2);
  color: var(--ink);
}
:root[data-theme="argron"] .theme-toggle--header { background: var(--card); }
.theme-toggle--header:hover,
.theme-toggle--header:focus-visible { background: var(--line); }
/* Små versaler: "NYLAGT" på en rad, "HUNDRA / ÅR" på två */
.theme-toggle--header .theme-toggle-years,
.theme-toggle--header .theme-toggle-unit {
  font: 600 8px/1.15 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.theme-toggle-unit:empty { display: none; }

/* Bytet: den nya färgen sprider sig i en cirkel från knappen, som ärg över plåt.
   Headern ritas med resten av sidan så att allt byter färg i samma våg. */
html.theme-transition .site-header { view-transition-name: none; }
html.theme-transition::view-transition-old(root) { animation: none; }
html.theme-transition::view-transition-new(root) { animation: theme-spread .9s cubic-bezier(.4, 0, .2, 1); }
@keyframes theme-spread {
  from { clip-path: circle(0 at var(--theme-x) var(--theme-y)); }
  to { clip-path: circle(var(--theme-r) at var(--theme-x) var(--theme-y)); }
}

/* Meddelandet efter bytet */
.theme-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 3000;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: var(--r);
  background: var(--surface-dark);
  color: var(--on-dark);
  font: 600 18px/1.25 var(--serif);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.theme-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }