/* ============================================================================
   Public site chrome: the sticky navigation and the footer.
   Both sit on --ink-900 because the design system's one hard brand rule is that
   the Reco Tak logo always sits on dark.
   ========================================================================== */

/* Keyboard users reach the content without tabbing the whole nav. Visible only
   when focused — an always-visible skip link is a design decision nobody asked
   for; an absent one is an accessibility failure. */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 100;
  background: var(--paper-0);
  color: var(--ink-900);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  transition: top var(--speed) var(--ease);
}

.skip-link:focus {
  top: var(--sp-4);
}

:root {
  /* The nav's own height, and the total space it occupies at the top of the
     document. Both the bar and the hero read these, so the hero can size
     itself to "the viewport below the nav" without a magic number that can
     drift out of step with the bar it is compensating for. */
  --nav-h: 72px;
  --nav-border: 1px;
  --nav-total: calc(var(--nav-h) + var(--nav-border) + env(safe-area-inset-top, 0px));
}

@media (max-width: 640px) {
  :root {
    --nav-h: 64px;
  }
}

/* ── Navigation ─────────────────────────────────────────────── */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(16, 24, 32, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--nav-border) solid rgba(255, 255, 255, 0.08);
  padding-top: env(safe-area-inset-top, 0px);
}

.site-nav-inner {
  display: flex;
  align-items: center;
  /* Matches .site-nav-links -- see the measurement there. */
  gap: 24px;
  height: var(--nav-h);
}

.site-nav-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.site-nav-brand img {
  height: 38px;
  width: auto;
}

.site-nav-links {
  display: flex;
  align-items: center;
  /* 24px, not the section scale's 32. Re-measured 2026-08 for the seven-entry
     bar (Tjanster, Projekt, Kunskap & rad, Om oss, Garantier, Kunder,
     Kontakt) plus the phone number and the CTA.

     The number that actually binds is the CONTAINER, not the viewport: at
     max-width 1140 with 24px padding a side, the bar has 1092px to work with
     and cannot get wider no matter how large the window is. Moving the burger
     breakpoint therefore does nothing for a bar that does not fit -- which is
     the trap this comment exists to close.

     Measured (logo 218 + links + actions 227 + two inner gaps), against 1092:
       "Referensprojekt" @32px gap ... 1195  overflows
       "Referensprojekt" @18px gap ... 1083  fits, but the bar reads cramped
       "Projekt"         @32px gap ... 1136  overflows
       "Projekt"         @24px gap ... ~1072 fits, ~20px spare
       "Projekt"         @22px gap ... 1056  fits, 36px spare

     So the slack is now THIN, where the six-entry bar had over 200px. Adding an
     eighth entry does not fit at all, and renaming any of the seven to
     something longer needs a re-measure before it ships. If more room is ever
     needed, the phone number in .site-nav-actions is the cheapest ~130px to
     reclaim -- it is also in the footer, in the contact section and in the
     burger panel, so the bar is not its only home. */
  gap: 24px;
  margin-left: auto;
}

/* Panel-only entries; the bar shows these as .site-nav-actions on desktop. */
.site-nav-link--mobile {
  display: none;
}

.site-nav-links a {
  font: 600 15px/1 var(--font-body);
  /* A nav label is a phrase, not a paragraph. Without this, flexbox shrinks the
     items to min-content and "Varför välja oss" breaks across two lines inside
     the bar — which is exactly what adding "Blogg" as a sixth entry did at
     1400px, on the widest desktop we screenshot. The bar is sized for the whole
     label; when it no longer fits, the burger below takes over instead. */
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  padding: var(--sp-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.site-nav-links a:hover,
.site-nav-links a.active,
.site-nav-links a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--blue-400);
}

/* ── The Tjänster panel ──────────────────────────────────────────────────────
   Eighteen services do not fit the bar, so the entry carries a link to
   /tjanster plus a disclosure button for the full list. The panel is a child
   of the item but positions against .site-nav (which is sticky, and therefore
   a positioned ancestor), so it spans the whole width rather than the width of
   one nav entry. */
.site-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.site-nav-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.site-nav-menu-toggle:hover {
  color: #fff;
}

.site-nav-menu-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.site-nav-item.open .site-nav-menu-toggle {
  color: #fff;
  transform: rotate(180deg);
}

.site-nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface-card);
  border-bottom: 1px solid var(--line-1);
  box-shadow: var(--shadow-card);
}

/* The panel is hidden with the `hidden` attribute rather than a class, so the
   markup is closed by default with no CSS and no JavaScript at all. display
   must be forced because the rule above sets it on a flex/grid child. */
.site-nav-panel[hidden] {
  display: none;
}

.site-nav-panel-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

/* The heading is an <a> to its /tjanster#<slug> section. Written with the
   column class too because `.site-nav-panel-col a` below would otherwise win
   on specificity and restyle it as an ordinary panel entry. */
.site-nav-panel-col .site-nav-panel-heading {
  display: block;
  font: var(--kicker);
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 0;
  margin: 0 0 var(--sp-3);
  padding: 0;
  white-space: normal;
}

.site-nav-panel-col .site-nav-panel-heading:hover {
  color: var(--link);
  border-bottom: 0;
}

.site-nav-panel-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-panel-col a {
  display: block;
  padding: var(--sp-1) 0;
  font: var(--body-sm);
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 0;
  white-space: normal;
}

.site-nav-panel-col a:hover {
  color: var(--link);
  border-bottom: 0;
}

.site-nav-panel-col--all {
  display: flex;
  align-items: flex-start;
}

.site-nav-panel-all {
  display: inline-flex !important;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) !important;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  font: var(--label) !important;
  color: var(--link) !important;
  white-space: nowrap !important;
}

.site-nav-panel-all:hover {
  background: var(--surface-section);
}

.site-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 0 0 auto;
}

.site-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font: 600 15px/1 var(--font-body);
  color: var(--blue-300);
  white-space: nowrap;
  transition: color var(--speed) var(--ease);
}

.site-nav-phone:hover {
  color: var(--blue-200);
}

/* Hamburger — hidden until the links no longer fit. */
.site-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0 10px;
}

.site-nav-burger span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.site-nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Footer ─────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.78);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-8);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-7);
}

.footer-brand img {
  height: 42px;
  width: auto;
  margin-bottom: var(--sp-5);
}

.footer-text {
  font: var(--body-sm);
  color: var(--ink-300);
  max-width: 46ch;
  text-wrap: pretty;
}

.footer-nav,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-nav h2,
.footer-contact h2 {
  font: 600 13px/1.2 var(--font-display);
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-2);
}

.footer-nav a,
.footer-contact a,
.footer-contact span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font: var(--body-sm);
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--speed) var(--ease);
}

.footer-nav a:hover,
.footer-contact a:hover {
  color: var(--blue-300);
}

.footer-contact iconify-icon {
  color: var(--blue-400);
  flex: 0 0 auto;
}

/* The certification band, between the footer columns and the legal line. It
   renders only when at least one flagged entry has artwork, so there is no
   empty state to style — see siteFooter. The marks are inverted-friendly by
   nature (most are dark-on-transparent), so they sit on a light plate rather
   than being filtered: a brightness filter on a logo somebody else owns is a
   modification of their mark, not a styling choice. */
.footer-certs {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-certs-label {
  font: var(--kicker);
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  /* ink-500 is the muted token for text on a LIGHT surface; against the
     near-black footer it measured 3.25 and failed. The scale has to invert on
     a dark ground, so the muted role here is ink-300, at 7.79. Same swap as
     .site-footer-bottom below. */
  color: var(--ink-300);
}

.footer-certs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.footer-certs-list li {
  display: grid;
  place-items: center;
  height: 46px;
  padding: 0 var(--sp-3);
  background: #fff;
  border-radius: var(--radius-sm);
}

.footer-certs-list img {
  display: block;
  max-height: 34px;
  width: auto;
  object-fit: contain;
}

/* Follows the marks rather than being pushed to the far right with
   margin-left:auto. With the six or eight marks the client will eventually
   upload either reads fine; with the one that ships today the auto version left
   a thousand pixels of gap between a single logo and the link, which looks like
   a layout that broke rather than a row that is not full yet. */
.footer-certs-link {
  font: var(--body-sm);
  color: var(--ink-300);
}

.footer-certs-link:hover {
  color: #fff;
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font: var(--body-sm);
  /* ink-300, not ink-500: this row carries the copyright line and the legal
     links on the near-black footer, where ink-500 measured 3.25. See the note
     on .footer-certs-label - the muted role inverts on a dark ground. */
  color: var(--ink-300);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.footer-legal a {
  color: var(--ink-300);
  transition: color var(--speed) var(--ease);
}

.footer-legal a:hover {
  color: var(--blue-300);
}

/* ── Mobile ─────────────────────────────────────────────────── */

/* 1140px, the container width. The bar was first measured with the original
   six entries ("Varför välja oss" … Kontakt), which needed the container at
   its FULL width; the old 940px left a band -- iPad landscape, a half-width
   laptop window -- where the bar was still on and could only fit by squeezing
   the labels onto two lines. A burger at those widths is a good experience; a
   squeezed bar is not. Re-measured 2026-07 for the restructured bar (Tjänster,
   Kunder, Tidigare jobb, Recensioner, Blogg, Kontakt): ~870px used of 1140,
   no overflow at any width above the breakpoint. 1140 is kept even though the
   shorter labels would now fit a little below it -- the container width is a
   boundary the reader can reason about, and slack here is what lets the next
   renamed entry not re-break the bar. Re-measure if an entry is ever added or
   renamed (scripts in git history: navcheck against .site-nav-links.scrollWidth).
   site-nav.js resets the burger panel at min-width: 1141px -- the two numbers
   must move together. */
@media (max-width: 1140px) {
  /* Inside the burger panel the services list is an ordinary block in the
     scrolling menu. An absolutely positioned overlay here would sit on top of
     the entries below it, which is the layout the bar version depends on. */
  .site-nav-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav-menu-toggle {
    align-self: flex-start;
    margin-top: calc(var(--sp-2) * -1);
  }

  .site-nav-panel {
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .site-nav-panel-inner {
    display: block;
    padding: 0 0 var(--sp-4);
  }

  .site-nav-panel-col {
    margin-top: var(--sp-4);
  }

  .site-nav-panel-col a {
    color: rgba(255, 255, 255, 0.8);
  }

  .site-nav-panel-col a:hover {
    color: #fff;
  }

  /* On the burger's dark background the desktop hover colour (--link, a dark
     blue) would vanish — hover goes to white like every other panel entry. */
  .site-nav-panel-col .site-nav-panel-heading:hover {
    color: #fff;
  }

  .site-nav-panel-all {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.25);
  }

  .site-nav-burger {
    display: flex;
  }

  .site-nav-actions {
    display: none;
  }

  /* The links become a panel under the bar. Collapsed by max-height rather
     than display:none so it can animate, and the closed state is inert to
     keyboard and screen readers via the visibility flip. */
  .site-nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--ink-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--speed) var(--ease), visibility 0s linear var(--speed);
  }

  .site-nav-links.open {
    max-height: 70svh;
    overflow-y: auto;
    visibility: visible;
    transition: max-height var(--speed) var(--ease), visibility 0s;
  }

  .site-nav-links a {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .site-nav-links a:hover,
  .site-nav-links a.active {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.05);
  }

  .site-nav-link--mobile {
    display: flex;
    gap: var(--sp-2);
  }

  .site-nav-link--call {
    color: var(--blue-300);
  }

  .site-nav-link--cta {
    background: var(--brand-gradient);
    color: #fff;
    justify-content: center;
    border-bottom: 0;
  }

  .site-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
  }

  /* Footer links are 21px tall at their natural line-height — fine with a
     mouse, a miss with a thumb. Give every one a 44px row on touch layouts;
     the gap shrinks to compensate so the footer does not grow taller. */
  .footer-nav,
  .footer-contact {
    gap: 0;
  }

  .footer-nav a,
  .footer-contact a,
  .footer-contact span,
  .footer-legal a {
    min-height: 44px;
  }

  .footer-legal a {
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .site-nav-inner {
    gap: var(--sp-4);
  }

  .site-nav-brand img {
    height: 32px;
  }
}

/* ── Consent banner (the Meta pixel gate) ───────────────────── */

/* Rendered on every public page while the pixel is enabled in the CMS, shown
   by consent.js only while no choice is stored. Fixed to the bottom edge so it
   never pushes layout, card-on-shadow so it reads as chrome rather than page
   content. The [hidden] guard beats the display:flex below — without it the
   flex display would resurrect a banner the attribute is trying to remove. */
.consent-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  background: var(--paper-0);
  border-top: 1px solid var(--line-1);
  box-shadow: 0 -6px 24px rgba(16, 24, 32, 0.12);
}

.consent-banner[hidden] {
  display: none;
}

.consent-text {
  margin: 0;
  max-width: 640px;
  font: var(--body-sm);
  color: var(--text-body);
}

.consent-text a {
  color: var(--blue-600);
  text-decoration: underline;
}

.consent-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* The decline choice is a real button with equal hit area, styled quieter than
   accept but never hidden or shrunken — a consent banner where refusing is
   harder than agreeing is a dark pattern, not a design. */
.consent-decline {
  padding: 10px 18px;
  font: var(--body-sm);
  font-weight: 600;
  color: var(--text-body);
  background: none;
  border: 1px solid var(--line-1);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.consent-decline:hover {
  border-color: var(--ink-500);
  color: var(--text-heading);
}

/* The footer's reopen link. A <button> for semantics (it acts, it does not
   navigate), dressed as the legal links beside it. */
.footer-consent-link {
  padding: 0;
  font: inherit;
  color: var(--ink-300);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--speed) var(--ease);
}

.footer-consent-link:hover {
  color: var(--blue-300);
}