/*
 * Kundtjänst Pages — shared layout
 * Used by page-kundtjanst.php for Butiker, Kontakt, Frakt, Köpvillkor, Om Oss, Integritetspolicy.
 */

/* Neutralise Storefront's .left-sidebar .content-area float layout so this
   template occupies full width (it has its own sidebar inside). The parent
   .col-full handles the desktop gutter; we add a small horizontal padding
   so mobile body content doesn't kiss the viewport edges. The chip rail
   inside the sidebar uses a negative margin to break out and go edge-to-edge —
   so we deliberately do NOT clip overflow here. */
body.page-template-page-kundtjanst #primary.content-area,
body.page-template-page-tjanster #primary.content-area,
.mh-kundtjanst {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  max-width: none;
  /* No horizontal padding on desktop — the parent .col-full already provides
     the page gutter, so adding more here pushed the sidebar in past where
     the breadcrumb sits. The mobile rule below restores 16px padding for
     small viewports where content would otherwise kiss the edges. */
  padding: 0 0 var(--space-2xl, 48px);
}

@media (max-width: 900px) {
  body.page-template-page-kundtjanst #primary.content-area,
  body.page-template-page-tjanster #primary.content-area,
  .mh-kundtjanst {
    padding: 0 var(--space-md, 16px) var(--space-2xl, 48px);
  }
  /* Match #primary's 16px inset so the breadcrumb (sibling of #primary inside
     the same #content > .col-full wrapper) lines up with the sidebar/title
     instead of sitting flush to the gutter. */
  body.page-template-page-kundtjanst .storefront-breadcrumb,
  body.page-template-page-tjanster .storefront-breadcrumb {
    padding-left: var(--space-md, 16px);
    padding-right: var(--space-md, 16px);
  }
}

/* Clip overflow at the page (body) level instead, so any descendant that
   ever escapes its container can't force the whole page to pan horizontally.
   Without this, content overflow steals swipe gestures from the chip rail
   (the browser pans the page instead of scrolling the rail). */
body.page-template-page-kundtjanst,
body.page-template-page-tjanster {
  overflow-x: clip;
}
body.page-template-page-kundtjanst #content.site-content,
body.page-template-page-kundtjanst #content.site-content > .col-full,
body.page-template-page-tjanster #content.site-content,
body.page-template-page-tjanster #content.site-content > .col-full {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Hide empty sidebar widget area Storefront reserves on left-sidebar layout. */
body.page-template-page-kundtjanst #secondary,
body.page-template-page-kundtjanst .widget-area,
body.page-template-page-tjanster #secondary,
body.page-template-page-tjanster .widget-area {
  display: none !important;
}

.mh-kundtjanst__shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-2xl, 48px);
}

/* Grid items default to `min-width: auto` (can't shrink below their content's
   intrinsic size). Force `min-width: 0` so the chip rail's overflow-x: auto
   actually scrolls instead of widening the sidebar (which would then push
   the whole grid past the viewport and break the rail's swipe). Standard
   CSS grid gotcha. Same fix on the content column for long unbreakable text. */
.mh-kundtjanst__shell > * {
  min-width: 0;
}

/* ── Sidebar ── */
.mh-kundtjanst__sidebar {
  border-right: 1px solid #e5e5e5;
  padding-right: var(--space-lg, 24px);
}

.mh-kundtjanst__sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-lg, 24px);
}

/* The (i)/wrench icons next to the sidebar header look like UI affordances
   and aren't carrying real meaning — the section title alone is clearer. */
.mh-kundtjanst__icon {
  display: none;
}

.mh-kundtjanst__sidebar-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
}

.mh-kundtjanst__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mh-kundtjanst__menu li {
  margin-bottom: 10px;
}

.mh-kundtjanst__menu a {
  font-size: 0.95rem;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.15s ease;
}

.mh-kundtjanst__menu a:hover,
.mh-kundtjanst__menu .current-menu-item > a {
  color: #cc0000;
}

.mh-kundtjanst__nav-missing {
  font-size: 0.875rem;
  color: #888;
}

/* ── Main column ── */
.mh-kundtjanst__header {
  margin-bottom: var(--space-xl, 32px);
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: var(--space-md, 16px);
}

.mh-kundtjanst__title {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  color: #1a1a1a;
}

.mh-kundtjanst__content {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  min-width: 0; /* prevent grid blow-out when long text/code lands inside */
}

.mh-kundtjanst__body {
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
  max-width: min(70ch, 100%);
  /* Allow long unbreakable strings (URLs, model SKUs, long Swedish compounds)
     to wrap rather than spill past the viewport edge on mobile. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-kundtjanst__body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: var(--space-xl, 32px) 0 var(--space-sm, 12px);
  color: #1a1a1a;
}

.mh-kundtjanst__body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: var(--space-lg, 24px) 0 var(--space-xs, 8px);
  color: #1a1a1a;
}

.mh-kundtjanst__body p {
  margin: 0 0 var(--space-md, 16px);
}

.mh-kundtjanst__body a {
  color: #cc0000;
  text-decoration: underline;
}

.mh-updated {
  font-size: 0.8125rem;
  color: #888;
  margin-bottom: var(--space-lg, 24px);
}

/* ── Butiker page ── */
.mh-stores-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl, 32px);
  max-width: none;
}

.mh-store-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 16px);
}

.mh-store-card__photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.mh-store-card__name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs, 8px);
  color: #1a1a1a;
}

.mh-store-card__address {
  font-style: normal;
  font-size: 0.95rem;
  color: #555;
  margin-bottom: var(--space-xs, 8px);
  line-height: 1.5;
}

.mh-store-card__phone,
.mh-store-card__email {
  font-size: 0.95rem;
  margin: 0 0 var(--space-2xs, 4px);
}

.mh-store-card__phone a,
.mh-store-card__email a {
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 500;
}

.mh-store-card__phone a:hover,
.mh-store-card__email a:hover {
  color: #cc0000;
}

.mh-store-card__section-title {
  font-size: 1rem;
  font-weight: 700;
  margin: var(--space-md, 16px) 0 var(--space-xs, 8px);
  color: #1a1a1a;
}

.mh-store-card__hours,
.mh-store-card__exceptions {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  font-size: 0.9rem;
}

.mh-store-card__hours-row,
.mh-store-card__exceptions-row {
  display: contents;
}

.mh-store-card__hours dt,
.mh-store-card__exceptions dt {
  color: #555;
  font-weight: 400;
}

.mh-store-card__hours dd,
.mh-store-card__exceptions dd {
  margin: 0;
  color: #1a1a1a;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mh-store-card__maps {
  margin-top: var(--space-md, 16px);
}

.mh-store-card__maps a {
  color: #555;
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1px;
}

.mh-store-card__maps a:hover {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
}

/* ── Kontakt page ── */
.mh-contact {
  font-size: 1rem;
  line-height: 1.6;
}

.mh-contact__email,
.mh-contact__phone {
  font-size: 1.4rem;
  font-weight: 600;
  margin: var(--space-sm, 12px) 0 var(--space-md, 16px);
}

.mh-contact__email a,
.mh-contact__phone a {
  color: #cc0000;
  text-decoration: none;
}

.mh-contact__email a:hover,
.mh-contact__phone a:hover {
  text-decoration: underline;
}

.mh-contact__phone-intro {
  margin-bottom: var(--space-xs, 8px);
  color: #555;
}

.mh-contact__form {
  margin-top: var(--space-2xl, 48px);
  padding-top: var(--space-xl, 32px);
  border-top: 1px solid #f0f0f0;
}

.mh-contact__form h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--space-md, 16px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .mh-kundtjanst__shell {
    grid-template-columns: 1fr;
    gap: var(--space-lg, 24px);
  }
  .mh-kundtjanst__sidebar {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 0 var(--space-md, 16px);
  }
  /* Hide the redundant "Kundtjänst" header on mobile — the page H1 already
     identifies the section. */
  .mh-kundtjanst__sidebar-header {
    display: none;
  }
  /* Horizontal-scroll chip rail — same pattern that works for the archive
     filter chips (#main > #secondary.widget-area). The UL itself is the
     scroller: flex + nowrap + overflow-x: auto. Each LI is flex-shrink: 0.
     No negative margins, no nested wrapper. */
  .mh-kundtjanst__nav {
    /* Wrapper is inert — the UL inside does the scrolling. */
  }
  .mh-kundtjanst__menu {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 4px 0;
    scrollbar-width: none; /* Firefox */
  }
  .mh-kundtjanst__menu::-webkit-scrollbar {
    display: none; /* WebKit */
  }
  .mh-kundtjanst__menu li {
    margin: 0;
    flex-shrink: 0;
  }
  .mh-kundtjanst__menu a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1a1a1a;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .mh-kundtjanst__menu a:hover {
    border-color: #1a1a1a;
    color: #1a1a1a;
  }
  /* Active chip — beige fill, dark border (matches the archive filter chips' active state). */
  .mh-kundtjanst__menu .current-menu-item > a,
  .mh-kundtjanst__menu .current_page_item > a {
    background: #faf7f2;
    border-color: #1a1a1a;
    color: #1a1a1a;
    font-weight: 600;
  }
  .mh-stores-page {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .mh-kundtjanst {
    padding: var(--space-xl, 32px) var(--space-md, 16px);
  }
  .mh-kundtjanst__title {
    font-size: 2rem;
  }
}

/* ──────────────────────────────────────────────────────────────
   FAQ — Vanliga frågor
   ────────────────────────────────────────────────────────────── */

.mh-faq__toc {
  background: #faf7f2;
  border-radius: 12px;
  padding: var(--space-lg, 24px);
  margin: 0 0 var(--space-2xl, 48px);
}

.mh-faq__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 24px;
}

.mh-faq__toc-list a {
  color: #1a1a1a;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.mh-faq__toc-list a:hover,
.mh-faq__toc-list a:focus-visible {
  border-bottom-color: #1a1a1a;
}

.mh-faq__section + .mh-faq__section {
  margin-top: var(--space-2xl, 48px);
}

.mh-faq__section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--space-md, 16px);
  scroll-margin-top: 96px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
}

.mh-faq__list {
  display: flex;
  flex-direction: column;
}

.mh-faq__item {
  border-bottom: 1px solid #e5e5e5;
}

.mh-faq__item[open] .mh-faq__chevron {
  transform: rotate(180deg);
}

.mh-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  font-weight: 600;
  font-size: 1.05rem;
  color: #1a1a1a;
  -webkit-tap-highlight-color: transparent;
}

.mh-faq__q::-webkit-details-marker { display: none; }
.mh-faq__q::marker { content: ''; }

.mh-faq__q:hover .mh-faq__q-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mh-faq__chevron {
  flex-shrink: 0;
  color: #555;
  transition: transform 0.2s ease;
}

.mh-faq__a {
  padding: 0 4px 20px;
  color: #333;
  line-height: 1.6;
  font-size: 0.98rem;
  max-width: 70ch;
}

.mh-faq__a a {
  color: #1a1a1a;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .mh-faq__toc {
    padding: var(--space-md, 16px);
  }
  .mh-faq__toc-list {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }
  .mh-faq__section-title {
    font-size: 1.25rem;
  }
  .mh-faq__q {
    font-size: 1rem;
    padding: 16px 0;
  }
  .mh-faq__a {
    padding: 0 0 16px;
  }
}