/*
Theme Name: Tunneln
Theme URI: https://sunfish.se
Author: Sunfish
Description: Eget tema för Mayfair Hotel Tunneln – byggt från skiss med hjälp av AI.
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: tunneln
*/

:root {
  --gold: #b8923f;
  --gold-light: #cda95f;
  --ink: #1c1712;          /* mörk brun/charcoal */
  --cream: #f4efe7;
  --cream-dim: #c9c0b2;
  --line: rgba(255, 255, 255, 0.12);
  --max: 1360px;
  --space: 1.5rem;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--space);
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0;
}

/* Hero-eyebrown i samma serif som logon, lite större */
.hero .eyebrow {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--gold);
  color: #fff;
  border: none;
  padding: 0.95rem 1.6rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, padding 0.3s ease;
}
.btn:hover { background: var(--gold-light); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .brand__crest,
  .site-header .brand__name,
  .site-header .brand__sub,
  .site-header .btn {
    transition: none;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 1.2rem 0 1.6rem;
  background: #0c0a07;
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}
/* Kondenserad header vid scroll (togglas av assets/js/header.js) */
.site-header.is-scrolled {
  padding: 0.95rem 0 1.25rem;
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.85);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
}

.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--cream); }
.brand__crest {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 3px;
  font-family: var(--serif);
  font-size: 1.1rem;
  transition: width 0.3s ease, height 0.3s ease, font-size 0.3s ease;
}
.brand__name { display: block; font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.15; text-align: center; transition: font-size 0.3s ease; }
.brand__sub { display: block; font-family: var(--serif); font-size: 0.7rem; letter-spacing: 0.35em; color: var(--cream-dim); text-transform: uppercase; margin-top: 0.15rem; text-align: center; transition: font-size 0.3s ease; }

/* Logotyp + CTA krymper något när headern kondenseras */
.site-header.is-scrolled .brand__crest { width: 35px; height: 35px; font-size: 1rem; }
.site-header.is-scrolled .brand__name { font-size: 0.98rem; }
.site-header.is-scrolled .brand__sub { font-size: 0.66rem; }
.site-header.is-scrolled .btn { padding: 0.78rem 1.5rem; }

.main-nav { display: flex; align-items: center; gap: 1.8rem; }
.main-nav ul { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.main-nav a:hover { color: var(--gold); }
.main-nav .btn { margin-left: 1.5rem; }

/* Menyalternativ ska aldrig radbrytas (t.ex. "Our rooms") */
.main-nav a,
.main-nav .nav-lang > summary { white-space: nowrap; }

/* CTA:n har två etiketter: full ("Boka direkt") som standard, kort ("Boka")
   i trängre lägen. Kortversionen döljs tills en brytpunkt aktiverar den. */
.btn--book { white-space: nowrap; }
.btn__label-short { display: none; }

/* Mellanläge: desktopmenyn ryms (över hamburger-brytpunkten 1150px) men blir
   trång tills sidan är riktigt bred. Dra ihop mellanrummen och korta CTA:n till
   "Boka"/"Book" så att inget alternativ radbryts eller spiller över. */
@media (min-width: 1151px) and (max-width: 1300px) {
  .main-nav,
  .main-nav ul { gap: 1.2rem; }
  .main-nav .btn { margin-left: 1rem; }
  .btn--book .btn__label-full { display: none; }
  .btn--book .btn__label-short { display: inline; }
}

/* Språkväxlare – native details/summary-dropdown, visar aktivt språk + meny */
.nav-lang { position: relative; display: inline-flex; align-items: center; }
.nav-lang > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 0.28rem;
  color: var(--cream);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.65;
  position: relative; top: 2px; /* optisk baslinjejustering mot menylänkarna */
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav-lang > summary::-webkit-details-marker { display: none; }
.nav-lang__chevron {
  width: 0; height: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid var(--cream-dim);
  position: relative; top: -1px;
  transition: transform 0.2s ease, border-top-color 0.2s ease;
}
.nav-lang[open] .nav-lang__chevron { transform: rotate(180deg); }
.nav-lang > summary:hover,
.nav-lang[open] > summary { color: var(--gold); }
.nav-lang > summary:hover .nav-lang__chevron,
.nav-lang[open] > summary .nav-lang__chevron { border-top-color: var(--gold); }
.nav-lang__menu {
  position: absolute; left: 0; right: auto; top: calc(100% + 0.3rem);
  display: flex; flex-direction: column; gap: 0.15rem;
  background: #14100a; border: 1px solid var(--line);
  border-radius: 5px; padding: 0.5rem 0.4rem; min-width: 9rem; z-index: 60;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.65);
}
.nav-lang__menu .nav-lang__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: var(--cream-dim); text-decoration: none;
  font-size: 0.82rem; letter-spacing: 0.04em; text-transform: none;
  line-height: 1.2;
  padding: 0.5rem 0.85rem;
  border-radius: 3px;
  transition: color 0.2s ease;
}
.nav-lang__menu .nav-lang__item:hover { color: var(--gold); }
.nav-lang__menu .nav-lang__item--active { color: var(--cream); font-weight: 600; }
.nav-lang__check { color: var(--gold); font-size: 0.72rem; }

/* Hamburger – visas bara på mobil, ligger till höger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Lämnar plats så feature-raden syns i botten av första skärmen.
     86px = menyrad, ~120px = en skymt av feature-raden. */
  min-height: calc(100vh - 86px - 120px);
  display: flex;
  align-items: flex-start;
  color: var(--cream);
  background:
    linear-gradient(90deg,
      #0c0a07 0%,
      #0c0a07 28%,
      rgba(12, 10, 7, 0.8) 42%,
      rgba(12, 10, 7, 0.35) 62%,
      rgba(12, 10, 7, 0.05) 86%,
      rgba(12, 10, 7, 0.3) 100%),
    var(--hero-image) center 32% / cover no-repeat;
}
.hero > .container { padding-left: var(--space); }
/* Desktop: dra in hero-texten ~80px så den linjerar med Rum-sidans innehåll
   (Rum använder .page-wrap max-width 1140px medan hero använder .container 1360px). */
@media (min-width: 1025px) {
  .hero > .container { padding-left: calc(var(--space) + 5rem); }
}
.hero__inner { padding: 2.75rem 0 3rem; max-width: 50%; min-width: 480px; }
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  line-height: 1.04;
  margin: 0.9rem 0 1rem;
}
.hero__title em {
  display: block;
  font-style: italic;
  color: var(--gold-light);
  font-size: 0.7em;
  line-height: 1.1;
  margin-top: 0.15em;
}
.hero__lead {
  max-width: 320px;
  color: var(--cream-dim);
  font-size: 1.02rem;
  font-weight: 300;
  margin: 0 0 1rem;
}
.hero__lead--2 { margin-bottom: 1.4rem; }
.hero__divider { width: 85px; height: 1px; background: rgba(184, 146, 63, 0.6); margin: 0 0 1.1rem; }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.rating { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; color: var(--cream-dim); }
.rating strong { color: var(--cream); font-weight: 600; }
.rating .star { color: var(--gold); }

/* Cirkulär badge – dubbel guldring, serif-siffra och tunn avdelare (efter skiss) */
.hero__badge {
  position: absolute;
  right: clamp(1.5rem, 6vw, 6rem);
  bottom: clamp(2rem, 12vh, 7rem);
  width: 152px; height: 152px;
  border-radius: 50%;
  /* Mörk, nästan solid platta med en diskret varm lyft uppe till vänster */
  background:
    radial-gradient(circle at 34% 28%, rgba(205, 169, 95, 0.16), rgba(205, 169, 95, 0) 60%),
    linear-gradient(158deg, #221a11 0%, #16110b 55%, #100b07 100%);
  /* Yttre guldring */
  border: 1px solid rgba(184, 146, 63, 0.75);
  box-shadow:
    0 24px 48px -14px rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--cream);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
/* Inre guldring – ger den dubbla ringen sitt raffinemang */
.hero__badge::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px solid rgba(184, 146, 63, 0.4);
  pointer-events: none;
}
.hero__badge:hover {
  transform: translateY(-3px);
  border-color: rgba(205, 169, 95, 0.9);
  box-shadow:
    0 30px 58px -14px rgba(0, 0, 0, 0.75),
    0 6px 16px rgba(0, 0, 0, 0.45);
}
.hero__badge:hover::before { border-color: rgba(205, 169, 95, 0.65); }

.hero__badge b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.01em;
  /* Mjuk, varm champagne-guld – pärlemor snarare än blank metall */
  background: linear-gradient(165deg, #f2ddab 0%, #dcbb7c 48%, #c39c53 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-light);
}
.hero__badge span {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: 0.5rem;
  max-width: 108px;
}
/* Tunn, centrerad guld-avdelare mellan siffran och etiketten */
.hero__badge span::before {
  content: "";
  display: block;
  width: 26px; height: 1px;
  margin: 0 auto 0.6rem;
  background: linear-gradient(90deg,
    rgba(184, 146, 63, 0) 0%,
    rgba(205, 169, 95, 0.85) 50%,
    rgba(184, 146, 63, 0) 100%);
}

/* ---------- Feature-rad ---------- */
.features { background: var(--ink); color: var(--cream); }
.features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 2.4rem clamp(1.2rem, 2.5vw, 2.2rem);
  border-right: 1px solid var(--line);
}
.feature:last-child { border-right: none; }
.feature__icon { color: var(--gold); line-height: 0; flex-shrink: 0; }
.feature__icon svg { width: 30px; height: 30px; }
.feature__body { min-width: 0; }
.feature h3 {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
  font-weight: 600;
}
.feature p { margin: 0; color: var(--cream-dim); font-size: 0.9rem; font-weight: 300; }

/* ---------- Experience ---------- */
.experience { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--ink); color: var(--cream); }
.experience .container { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.experience__head { max-width: 360px; }
.experience__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.12;
  margin: 0 0 1.2rem;
  color: var(--gold-light);
}
.experience__head .divider { width: 54px; height: 2px; background: var(--gold); margin: 0 0 1.4rem; }
.experience__lead { color: var(--cream-dim); max-width: 480px; margin: 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.card { position: relative; overflow: hidden; display: block; color: inherit; text-decoration: none; }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card:hover .card__media img { transform: scale(1.05); }
/* Länkade kort får klick-affordans och en diskret guldram vid hover/fokus */
a.card--link { cursor: pointer; }
a.card--link:hover h3, a.card--link:focus-visible h3 { color: var(--gold-light); }
a.card--link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(12,10,7,0.9) 100%);
}
.card h3 {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  padding: 1.1rem 1.2rem;
  font-weight: 500;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream-dim); padding: 2.5rem 0; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; gap: var(--space); flex-wrap: wrap; }
.site-footer a { color: var(--cream-dim); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer .footer-brand { font-family: var(--serif); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); }

/* ---------- Mörk sidmall (Rum, Historia, Konst, m.fl.) ---------- */
.page-section { background: var(--ink); color: var(--cream); min-height: 70vh; }
.page-wrap { max-width: 1140px; margin: 0 auto; padding: clamp(1.75rem, 3vw, 2.75rem) var(--space) 5rem; }
.page-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--gold-light);
  margin: 0 0 2rem;
}
.page-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: var(--gold);
  margin: 1.1rem 0 0;
}
.page-section .entry-content { max-width: 820px; color: var(--cream-dim); font-size: 1.05rem; line-height: 1.75; }
.page-section .entry-content h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--gold-light);
  margin: 2.5rem 0 1rem;
}
.page-section .entry-content p { margin: 0 0 1.3rem; }
.page-section .entry-content a { color: var(--gold); }
.page-section .entry-content blockquote {
  margin: 0 0 1.3rem;
  padding: 0.4rem 0 0.4rem 1.6rem;
  border-left: 3px solid var(--gold);
}
.page-section .entry-content blockquote p { margin: 0; color: var(--cream-dim); }

/* Intro/outro-text – smalare radlängd än den breda sidan */
.page-intro, .page-outro { color: var(--cream-dim); font-size: 1.05rem; line-height: 1.75; }
.page-intro p, .page-outro p { margin: 0 0 1.3rem; }
.page-intro blockquote { margin: 0; padding: 0.4rem 0 0.4rem 1.6rem; border-left: 3px solid var(--gold); }
.page-intro blockquote p { margin: 0; }
.page-outro { margin-top: clamp(2.5rem, 5vw, 4rem); }
.page-outro h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--gold-light); margin: 0 0 1rem;
}

/* Rumsrutmönster – kvadratiskt rutnät där varannan rad speglas (schackbräde) */
.rooms { display: flex; flex-direction: column; gap: 4px; margin: clamp(2.5rem, 5vw, 4rem) 0; }
.room {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.room__media { overflow: hidden; }
.room__media img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* Varannan rad: bild till höger, text till vänster – ger schackbräde-diagonalen */
.room:nth-child(even) .room__media { order: 2; }
.room__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #14100a;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  overflow: hidden;
}
.room__name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--gold-light); margin: 0 0 1rem;
}
.room__text { color: var(--cream-dim); font-size: 1.02rem; line-height: 1.75; margin: 0; }

/* Bildkarusell per rum (flera bilder). Enbild-fallet använder .room__media direkt. */
.room__gallery { position: relative; }
.room__track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.room__slide { flex: 0 0 100%; }
.room__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(20, 16, 10, 0.45);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(2px);
}
.room__nav--prev { left: 14px; }
.room__nav--next { right: 14px; }
.room__gallery:hover .room__nav,
.room__nav:focus-visible { opacity: 1; }
.room__nav:hover { background: rgba(20, 16, 10, 0.75); border-color: var(--gold-light); }
.room__dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 1;
}
.room__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.room__dot.is-active { background: var(--gold-light); transform: scale(1.35); }

@media (max-width: 720px) {
  /* Mobil: en kolumn, bild alltid över text, ingen fast kvadratform på texten */
  .room { grid-template-columns: 1fr; gap: 0; }
  .room:nth-child(even) .room__media { order: 0; }
  .room__media img { aspect-ratio: 4 / 3; }
  /* Lugnare intern rytm: bild→rubrik 24px, rubrik→text 12px, text→nästa bild 32px
     (28px padding + 4px .rooms-gap). Samma totalhöjd, mindre "inklämt". */
  .room__body { aspect-ratio: auto; background: transparent; padding: 1.5rem 0 1.75rem; }
  .room__name { margin-bottom: 0.75rem; }
  /* Ingen hover på touch – visa pilarna alltid */
  .room__nav { opacity: 1; }
  /* Mer luft mot kanterna på mobil */
  .page-wrap { padding-left: 2.25rem; padding-right: 2.25rem; }
}

/* ---------- Standardinnehåll (arkiv/inlägg) ---------- */
.entry { margin-bottom: 2.5rem; }
.entry-title a { text-decoration: none; }

/* ---------- Responsivt ---------- */
@media (max-width: 900px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(2) { border-right: none; }
  .feature:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .experience .container { grid-template-columns: 1fr; }
  .experience__head { max-width: 560px; margin-bottom: 2.5rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .hero__badge { display: none; }

  /* Mobil/surfplatta: bilden ska alltid täcka ytan (ingen zoom-förskjutning).
     Lägre fokuspunkt (70%) lyfter upp entrén. Den svarta gradienten fortsätter
     ~12% längre åt höger än på desktop för bättre läsbarhet över bilden.
     Overlayn är ~7% tätare i fade-zonen (54/74/100%) än tidigare – inte för
     dramatik, utan för att typografin ska bli ännu tydligare. Höj/sänk de tre
     alfavärdena för att mörka mer/mindre. */
  .hero {
    background:
      linear-gradient(90deg,
        #0c0a07 0%,
        #0c0a07 40%,
        rgba(12, 10, 7, 0.87) 54%,
        rgba(12, 10, 7, 0.42) 74%,
        rgba(12, 10, 7, 0.17) 100%),
      var(--hero-image) center 70% / cover no-repeat;
  }
  .hero > .container { padding-left: 1.75rem; }
  .hero__inner { max-width: 100%; min-width: 0; padding-right: var(--space); }
}
/* Platta och nedåt: hela menyn fälls ihop till en hamburgare/drawer så att
   den horisontella menyn (länkar + språkväxlare + Boka direkt) aldrig trängs.
   Brytpunkten är satt till 1150px – desktopmenyn visas först från 1151px och
   uppåt, eftersom länkraden annars känns ihoptryckt på plattbredd. */
@media (max-width: 1150px) {
  /* Hamburgermeny */
  .hamburger { display: flex; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.3rem;
    background: #0c0a07;
    padding: 1.6rem var(--space) 2rem;
    border-top: 1px solid var(--line);
    box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.6);
  }
  .main-nav ul { flex-direction: column; gap: 1.3rem; width: 100%; }
  .main-nav .nav-lang { order: 1; display: block; width: 100%; }

  /* Språkmenyn expanderar inline i menyn (ingen flytande popup) */
  .main-nav .nav-lang__menu {
    position: static;
    margin-top: 0.85rem;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-left: 1px solid var(--line);
    border-radius: 0;
    padding: 0 0 0 0.9rem;
    gap: 0.35rem;
  }
  .main-nav .nav-lang__menu .nav-lang__item { justify-content: flex-start; gap: 0.6rem; padding: 0.35rem 0; }

  .main-nav .btn { order: 2; margin-left: 0; }

  /* Öppnas när checkboxen är ikryssad */
  .nav-toggle:checked ~ .main-nav { display: flex; }

  /* Hamburger → kryss när öppen */
  .nav-toggle:checked ~ .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (max-width: 720px) {
  .features__grid { grid-template-columns: 1fr; }
  .feature { border-right: none; border-bottom: 1px solid var(--line); }
  .cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }

  /* Mobil hero-finjustering: tydligare rubrikhierarki, luftigare CTA och brödtext */
  .hero__title { font-size: 2.5rem; }        /* rad 1 ~40px */
  .hero__title em { font-size: 1.8rem; }       /* kursiv rad ~29px – tydligare hierarki */
  .hero__lead { line-height: 1.7; margin-bottom: 2rem; }  /* luftigare + ~32px ovanför CTA */
  .hero__actions { gap: 1.75rem; }            /* ~28px under CTA-knappen */

  /* Något lägre header på mobil (~7px) */
  .site-header { padding: 1rem 0 1.35rem; }
}