/* --- Minimal Reset & Theme --- */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.6;-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;display:block;height:auto}
:root{
  --brand:#8D2110; --brand-ink:#fff; --ink:#0f1220; --muted:#6b7280;
  --bg:#fff; --bg-soft:#f7f7fb; --border:#e5e7eb;
  --radius:18px; --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.07);
  --maxw:1140px;
}
html{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;color:var(--ink)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;margin:0 0 .6rem}
p{margin:.3rem 0 .9rem}

/* Layout */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:16px}
.section{padding:40px 0}
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr))}
.span-4,.span-8,.third{grid-column:span 12}
@media(min-width:760px){.span-4{grid-column:span 4}.span-8{grid-column:span 8}.third{grid-column:span 4}}

/* Nav (base) */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-inner{height:66px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav ul{display:flex;gap:12px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:nowrap}

/* Brand (logo link): no underline, no hover bg */
.nav a.brand{
  display:flex; align-items:center; text-decoration:none; position:static; color:inherit;
}
.brand img{height:42px;width:auto}
.nav a.brand::after{display:none !important;}
.nav a.brand:hover{background:transparent}

/* Restore breathing room between logo image and text */
.nav .brand span {
  margin-left: 0.5rem; /* about 8px — tweak as you like */
  /* font-weight: 800; */
}

/* Standard nav links with Tegel-style underline */
.nav a{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:66px; padding:0 12px;
  font-weight:600; color:var(--ink);
  background-color:transparent; text-decoration:none;
  transition:color .25s ease;
}
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background-color:transparent;
  transform:scaleX(0); transform-origin:center;
  transition:transform .25s ease, background-color .25s ease;
}
/* Hover: light gray underline only (no bg change) */
.nav a:hover::after{ background-color:#d1d5db; transform:scaleX(1); }
/* Active: red underline + red text */
.nav a.active{ color:var(--brand); }
.nav a.active::after{ background-color:var(--brand); transform:scaleX(1); }

/* CTA button (Boka på 1177): pill, no hover bg change — only white text underline */
.nav a.button{
  background-color:var(--brand); color:#fff; border-radius:999px;
  padding:.6rem 1rem; height:auto; line-height:1.2; font-weight:650;
  text-decoration:none; position:relative;
}
.nav a.button:hover{
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:#ffffff;
}
.nav a.button::after{ display:none !important; } /* no underline bar for CTA */

/* Keep desktop menu in one row */
@media (min-width: 761px) {
  .nav-menu a {
    white-space: nowrap;
    font-size: 0.95rem;
  }
}

/* Generic buttons (outside nav) */
.button{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1rem;border-radius:999px;background:var(--brand);color:var(--brand-ink);border:0;font-weight:650}
.button.secondary{background:#111827}

/* Cards & media */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.badge{display:inline-block;padding:.3rem .7rem;border-radius:999px;background:var(--bg-soft);color:#374151;font-size:12px;font-weight:650}
.img-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
.portrait{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:#eee}
footer{border-top:1px solid var(--border);background:#fff}
.footer-inner{padding:28px 0;color:#6b7280;font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Personal: classic cards */
.profile-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.profile-card{text-align:center}

.profile-card img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  object-position: var(--obj-x,50%) var(--obj-y,35%);
  background: #F3F4F6;   /* 👈 light grey instead of white */
  margin: 8px auto 16px;
}



/* Personal: spotlight layout */
.spotlight-wrap{padding:40px 0}
.spotlight-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.spot-card{
  position:relative;
  background-color:#D9DFE5; /* your requested bg */
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.spot-photo{position:relative}
.spot-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.spot-overlay{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  background:#fff; border-radius:40px; padding:4px 8px;
  display:flex; gap:8px; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  width:fit-content; min-width:190px;
}
.name-pill{background:#0B1B3B;color:#BFD7FF;padding:.4rem .7rem;border-radius:999px;font-weight:700;white-space:nowrap}
.title-pill{color:#0f1220;padding:.4rem .1rem;font-weight:600;white-space:nowrap}
.spot-accent{position:absolute;inset:auto -20% 35% -20%;height:50%;background:linear-gradient(135deg, rgba(141,33,16,.08), rgba(141,33,16,0));filter:blur(20px);pointer-events:none}

/* Global: keep scrollbar space to avoid nav jump */
html{overflow-y:scroll}

/* Services page: wider cards */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h2{margin-top:0}
.grid.services{grid-template-columns:1fr}
@media (min-width:900px){
  .grid.services{grid-template-columns:repeat(2,1fr);gap:24px}
}


@media (max-width: 640px) {
  .nav a.brand span {
    font-size: 0.9rem;     /* smaller but still readable */
    white-space: nowrap;   /* prevent line break */
  }

  .nav a.button {
    display: none;         /* still hide the big red button */
  }

  .nav a {
    padding: 0 10px;
  }
}

/* Hamburger button */
.nav-toggle {
  display: none;
  font-size: 1.8rem;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
}

/* Hide menu on mobile by default */
@media (max-width: 760px) {
  .nav-inner {
    position: relative;
  }

  .nav-toggle {
    display: block;                /* show ☰ */
  }

  .nav-menu {
    display: none;                 /* hide menu initially */
    position: absolute;
    top: 66px;                     /* below header bar */
    right: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  .nav-menu.open {
    display: block;                /* show when active */
  }

  .nav-menu ul {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;
  }

  .nav-menu a {
    width: 100%;
    padding: 12px 20px;
    justify-content: flex-start;
    height: auto;
  }

  /* Keep logo text visible on mobile */
  .nav a.brand span {
    font-size: 1rem;
    white-space: nowrap;
  }
}


/* --- Region Stockholm logo inside Öppettider card --- */
.region-logo-wrapper {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.region-logo-wrapper .region-logo {
  height: 60px;
  width: auto;
  opacity: 0.95; /* slightly softer so it blends */
}

@media (max-width: 640px) {
  .region-logo-wrapper .region-logo {
    height: 70px;
  }
}

/* Intro text for Yrkesområden section */
.intro-text {
  font-size: 1.05rem;
  color: var(--ink);
  margin: 10px 0 28px;
  font-weight: 500;
}

.brand-name {
  color: var(--brand);   /* #8D2110 */
}

/* --- Hitta till oss section --- */
#hitta-till-oss h2 {
  margin-bottom: 14px;
}

.map-card iframe {
  box-shadow: var(--shadow);
}

/* On mobile: stack the map below text */
@media (max-width: 760px) {
  #hitta-till-oss .grid {
    grid-template-columns: 1fr;
  }
  #hitta-till-oss .map-card {
    margin-top: 20px;
  }
}




/* -----------*/

/* Personal: modern side layout */
.staff-row{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:40px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.staff-row .staff-photo{flex:1 1 320px;background:var(--bg-soft)}
.staff-row .staff-photo img{width:100%;height:100%;object-fit:cover}
.staff-row .staff-info{flex:1 1 360px;padding:22px}
.staff-row.alt{background:#fff;border-left:6px solid var(--brand)}
@media(max-width:760px){.staff-row{flex-direction:column}}

/* Grupp-rubriker */
.staff-group + .staff-group {
  margin-top: 40px;
}

.staff-group-heading {
  font-size: 1.25rem;
  margin: 0 0 16px;
}

/* JÄMNA kort: samma bredd oavsett hur många på raden */
.staff-group .profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 260px)); /* alla kort 220px */
  justify-content: center;   /* centrera raden */
  gap: 20px;
}

/* För säkerhets skull: lås kortbredden */
.staff-group .profile-card {
  width: 260px;
  margin: 0 auto;
}

/* Mobil: en kolumn, kortet centreras men får gärna andas lite */
@media (max-width: 600px) {
  .staff-group .profile-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .staff-group .profile-card {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}


/* FAQ-layout */
.faq-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.faq-item h2 {
  font-size: 1rem;
  margin: 0 0 8px;
}

.faq-item p {
  margin: 0 0 8px;
}

.faq-item p:last-child {
  margin-bottom: 0;
}

/* FAQ – innehållsförteckning */
.faq-toc {
  margin: 18px 0 24px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid var(--border);
}

.faq-toc-heading {
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: var(--muted);
}

.faq-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.faq-toc a {
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px dashed #d1d5db;
}

.faq-toc a:hover {
  color: var(--brand);
  border-bottom-style: solid;
}

/* På mobil: gör listan mer kompakt i kolumn */
@media (max-width: 640px) {
  .faq-toc ul {
    flex-direction: column;
    gap: 4px;
  }
}

/* FAQ accordion */
.faq-accordion {
  padding: 0;
}

.faq-acc-item + .faq-acc-item {
  border-top: 1px solid var(--border);
}

.faq-acc-button {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 0;
  background: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-acc-button::after {
  content: "+";
  font-weight: 700;
  margin-left: 12px;
}

.faq-acc-button[aria-expanded="true"]::after {
  content: "–";
}

.faq-acc-button:hover {
  background: #f9fafb;
}

.faq-acc-panel {
  padding: 0 16px 12px 16px;
  font-size: 0.95rem;
}

.faq-acc-panel p {
  margin: 8px 0;
}


/* Göm 1177-knappen i menyn som standard (mobilläge) */
.nav .nav-1177 {
  display: none;
}

/* Visa 1177-knappen först från t.ex. 768px och uppåt (desktop) */
@media (min-width: 768px) {
  .nav .nav-1177 {
    display: block;
  }
}

/* Specialiserad fysioterapi – finjustering av korten */
.special-card h2 {
  margin-bottom: 4px;
}

.special-role {
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--muted);
}

.special-card p {
  margin-bottom: 8px;
}

.special-note {
  font-weight: 600;
}

/* FAQ accordion – länkar ska vara röda utan understrykning */
.faq-acc-panel a,
.faq-acc-panel a:link,
.faq-acc-panel a:visited {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}

/* Ingen understrykning heller vid hover/focus */
.faq-acc-panel a:hover,
.faq-acc-panel a:focus {
  text-decoration: none;
}

/* Överstyr iOS auto-stylade telefonlänkar */
.faq-acc-panel a[href^="tel"],
.faq-acc-panel a[href^="tel"]:visited {
  color: var(--brand) !important;
  text-decoration: none !important;
}

.nav .brand .brand-name {
  color: var(--brand);
}