/* =============================================================
   SD Kampanjsite – Layout & sidram (shell.css)
   Kräver tokens.css + base.css. Container, header/nav, hero,
   sektionsrubrik, footer, sticky CTA-bar, sidhuvud.
   ============================================================= */

/* ---------- Container & sektioner ---------- */
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--content-wide); }
.container--narrow { max-width: 52rem; }

.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-7); }
.section--alt { background: var(--color-bg-alt); }
.section--brand { background: var(--color-bg-brand); }
.section--dark {
  background: var(--invert-bg); color: var(--invert-on);
}
.section--dark :is(h1,h2,h3,h4) { color: #fff; }
.section--dark p { color: var(--invert-muted); }

/* ---------- Sidhuvud / navigering ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: var(--hairline);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  min-height: 68px;
}
.brand-lockup { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
/* Logotyp = blomman + ordbilden "Sverigedemokraterna" (bildlogga, inte text). */
.brand-lockup__mark {
  width: 42px; height: 42px; flex: 0 0 auto;
  background: url("../assets/logos/sd.jpg") center/contain no-repeat;   /* blomman */
  font-size: 0; color: transparent;   /* dölj ev. "SD"-fallbacktext */
}
.brand-lockup__name {                 /* blå ordbild (transparent PNG) för ljus header */
  font-size: 0; line-height: 0; color: transparent;
  width: 172px; height: 30px;
  background: url("../assets/logos/sd-wordmark-bla.png") left center / contain no-repeat;
}
/* Footer (mörk botten): blomman på vit bricka + VIT ordbild.
   Vit-på-svart JPEG → mix-blend-mode:screen gör svärtan osynlig mot marinblått. */
.site-footer .brand-lockup__mark {
  background-color: #fff; border-radius: var(--radius-sm); background-size: 80%;
}
.site-footer .brand-lockup__name {
  width: 178px;
  background-image: url("../assets/logos/sd-wordmark.jpg");
  mix-blend-mode: screen;
}

.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav__link {
  font-weight: var(--weight-bold); font-size: var(--text-base);
  color: var(--sd-navy); text-decoration: none; padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: var(--sd-red); }

.nav-toggle { display: none; }
.nav-toggle__btn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: var(--hairline); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer;
}
.nav-toggle__btn span, .nav-toggle__btn span::before, .nav-toggle__btn span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--sd-navy); position: relative;
}
.nav-toggle__btn span::before { position: absolute; top: -6px; }
.nav-toggle__btn span::after  { position: absolute; top: 6px; }

/* Mobil: checkbox-hack för meny */
@media (max-width: 900px) {
  .nav-toggle__btn { display: inline-flex; }
  .nav {
    position: fixed; inset: 68px 0 auto 0; z-index: var(--z-overlay);
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: var(--hairline);
    padding: var(--space-3) var(--gutter) var(--space-5);
    transform: translateY(-120%); transition: transform var(--dur-base) var(--ease-standard);
    box-shadow: var(--shadow-2);
  }
  .nav__link { padding: 14px 0; border-bottom: var(--hairline); }
  .nav__link:hover { border-bottom-color: var(--hairline); }
  .nav-toggle:checked ~ .nav { transform: translateY(0); }
  .nav .btn { margin-top: var(--space-3); }
}

/* ---------- Hero (display-panel) ---------- */
.hero {
  background: var(--color-display-surface); color: var(--color-display);
  border-radius: var(--radius-xl); overflow: hidden;
  padding: clamp(28px, 5vw, 64px);
  position: relative;
}
.hero__kicker { color: var(--sd-navy-poster); }
.hero__title {
  font-family: var(--font-display); font-weight: 400; /* Franxurter är single-weight */
  font-size: clamp(3rem, 9vw, 6.5rem); color: var(--color-display);
  text-transform: uppercase; line-height: .92; letter-spacing: -.005em;
  margin: 0 0 var(--space-4); max-width: 15ch;
}
.hero__lead { font-size: var(--text-lg); color: var(--sd-navy-poster); max-width: 48ch; margin: 0 0 var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero--image { display: grid; }
.hero--image .hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28;
}
.hero--image > * { position: relative; }

/* ---------- Sektionsrubrik ---------- */
.section-head { max-width: var(--measure); margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
.section-head__intro { font-size: var(--text-lg); color: var(--color-text-muted); margin: 0; }

/* ---------- Enkel responsiv grid ---------- */
.grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Sidhuvud (kategori/artikel-topp) ---------- */
.page-head { padding-block: var(--space-8) var(--space-6); border-bottom: var(--hairline); }
.page-head__title { font-size: var(--text-4xl); margin: 0; }
.breadcrumb { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.breadcrumb a { color: inherit; }

/* ---------- Footer (invert-zon) ---------- */
.site-footer { background: var(--invert-bg); color: var(--invert-on); padding-block: var(--space-9) var(--space-6); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--invert-accent); }
.site-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-col__title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--invert-muted); margin-bottom: var(--space-3); }
.footer-col__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.site-footer__bottom {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--invert-line);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  font-size: var(--text-sm); color: var(--invert-muted);
}

/* ---------- Sticky CTA-bar ---------- */
.cta-bar {
  position: sticky; bottom: 0; z-index: var(--z-cta);
  background: var(--sd-red); color: #fff;
  box-shadow: 0 -6px 20px rgba(13,37,97,.14);
}
.cta-bar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-3); flex-wrap: wrap;
}
.cta-bar__text { font-weight: var(--weight-bold); font-size: var(--text-lg); }