/* The "Modern" design for Hem and, below the "other pages" block at the end, for every other page (Om oss, Kontakt, Intyg, Nyheter, 404 and the rest). Every colour comes from the theme variables in css/theme.css (--accent, --heading, --page-bg,
   --box-bg, --ink, --muted, --line), so the colour picker on Utseende works on it. Open Sans comes from site.css. Nothing is loaded
   from anywhere else. Shapes: plain, not generic-look. Buttons, links and small things get --m-radius-sm (4 px), blocks and the day
   boxes --m-radius-box (6 px), photos and the map --m-radius. No pills, no soft drop shadows (a 1 px line where an edge is needed),
   no arrows after links, no badges. The hero photo has no decorative shape: square on its open sides, --m-radius on its inner
   corners, and a full-width band with square corners on a phone.
   Everything is visible as soon as the page loads, with or without JavaScript, on screen and in print: nothing fades in on scroll.
   Breakpoints: phone below 48rem (bottom action bar), tablet 48-64rem, desktop from 64rem. The only motion (a short settle of the
   hero text, no fading) sits behind prefers-reduced-motion: no-preference. */

/* The page was designed at 16 px per rem; the theme's text size setting still scales it. */
html.m-root { font-size: calc(var(--base-size) * 0.941176); }

.m {
  --m-bg: var(--page-bg);
  --m-surface: var(--box-bg);
  --m-ink: var(--ink);
  --m-ink-soft: var(--muted);
  --m-navy: var(--heading);
  --m-navy-deep: color-mix(in srgb, var(--heading) 80%, black);
  --m-on-navy: var(--box-bg);
  --m-red: var(--accent);
  --m-red-ink: var(--accent-ink);
  --m-red-dark: color-mix(in srgb, var(--accent) 82%, black);
  --m-sky: color-mix(in srgb, var(--heading) 9%, var(--box-bg));
  --m-line: var(--line);
  --m-open: #1d7a4c;
  --m-radius: 0.75rem;      /* about 11 px: photos and the map only */
  --m-radius-box: 6px;      /* blocks and the day boxes */
  --m-radius-sm: 4px;       /* buttons, links, the menu */
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m-gutter: clamp(1.25rem, 4.5vw, 4rem);
  --m-wrap: min(100% - 2 * var(--m-gutter), 78rem);
  margin: 0;
  background: var(--m-bg);
  color: var(--m-ink);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

.m :where(img) { max-width: 100%; height: auto; }
.m :where(a) { color: var(--m-red); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
.m :where(a:hover) { color: var(--m-navy); text-decoration-thickness: 0.08em; }
.m :where(h1, h2, h3) { margin: 0; color: var(--m-navy); font-weight: 700; line-height: 1.15; }
.m :where(p) { margin: 0 0 1rem; }
.m :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 0.25rem; }
.m main { padding: 0; min-height: 0; overflow-wrap: normal; }
.m main:focus { outline: none; }

.m-wrap { width: var(--m-wrap); margin-inline: auto; }
.m-range { white-space: nowrap; }   /* a time range ("08.00-15.00") moves to the next line as a whole, never "08.00-" / "15.00" */
.m-status-main .m-range { display: inline-block; white-space: normal; }   /* the large status line: the same, and only a box too narrow for the whole range (very large text on a phone) still breaks it, instead of widening the page */

.m-skip { position: absolute; left: 1rem; top: -10rem; z-index: 30; padding: 0.75rem 1.25rem; background: var(--skip-bg); color: var(--skip-ink); font-weight: 700; border-radius: var(--m-radius-sm); }
.m-skip:focus { top: 1rem; color: var(--skip-ink); }

/* header */
.m-top { position: relative; z-index: 10; background: var(--m-bg); }
.m-top-inner { width: var(--m-wrap); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; min-height: 5rem; }
.m-brand { display: block; flex: none; line-height: 0; border-radius: var(--m-radius-sm); }
.m-brand img { display: block; width: auto; height: 4rem; }
.m-nav { margin-left: auto; }
.m-nav ul { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.m .m-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem; color: var(--m-ink); text-decoration: none; border-radius: var(--m-radius-sm); transition: background-color 0.2s, color 0.2s; }
.m .m-nav a:hover { background: var(--m-surface); color: var(--m-navy); }
.m-menu { display: none; }

/* hero */
.m-hero { display: grid; grid-template-columns: minmax(var(--m-gutter), 1fr) minmax(0, 35rem) minmax(0, 43rem) minmax(var(--m-gutter), 1fr); align-items: center; gap: 0; padding-block: 1rem 0; }
.m-hero-text { grid-column: 2; padding: 2rem 3rem 3rem 0; position: relative; z-index: 2; }   /* above the photo in every browser: the settle effect below makes this a layer of its own, and the status box that reaches up over the photo on a phone must stay on top of it */
.m-kicker { margin: 0 0 1rem; color: var(--m-red); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.01em; }
.m-hero h1 { line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
/* the size follows the length of the tagline (the class comes from the page): a short one is large, a long one is smaller, always two or three even lines */
.m-hero h1.m-h1-s { font-size: clamp(2.35rem, 1rem + 3.4vw, 4.25rem); }
.m-hero h1.m-h1-m { font-size: clamp(2.1rem, 0.9rem + 2.7vw, 3.35rem); }
.m-hero h1.m-h1-l { font-size: clamp(1.6rem, 0.8rem + 1.2vw, 2rem); }
.m-hero h1.m-h1-xl { font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.6rem); }
.m-hero h1::after { width: 8.5rem; height: 1.1rem; margin-top: 1.1rem; }   /* the wave: the stethoscope tube of the logo */

.m-status { margin: 2.25rem 0 0; padding: 1.25rem 1.5rem 1.15rem; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius-box); max-width: 27rem; }
.m-status-main { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--m-ink); font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.m-status-note { margin: 0.35rem 0 0 1.5rem; color: var(--m-ink-soft); font-size: 1.0625rem; }
.m-dot { position: relative; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--m-ink-soft); }
.is-open .m-dot { background: var(--m-open); }

.m-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.m .m-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 1.9rem; border-radius: var(--m-radius-sm); font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.m .m-btn-red { background: var(--m-red); color: var(--m-red-ink); font-variant-numeric: tabular-nums; }
.m .m-btn-red:hover { background: var(--m-red-dark); color: var(--m-red-ink); }
.m .m-btn-line { border: 2px solid var(--m-navy); color: var(--m-navy); }
.m .m-btn-line:hover { background: var(--m-navy); color: var(--m-on-navy); }
.m .m-btn-navy { background: var(--m-navy); color: var(--m-on-navy); }
.m .m-btn-navy:hover { background: var(--m-navy-deep); color: var(--m-on-navy); }
.m-hero-address { margin: 1.5rem 0 0; color: var(--m-ink-soft); }

.m-hero-media { grid-column: 3 / 5; position: relative; z-index: 1; margin: 0; }
.m-hero-frame { position: relative; overflow: hidden; height: clamp(30rem, calc(100vh - 8rem), 47rem); border-radius: var(--m-radius) 0 0 var(--m-radius); container-type: size; background: var(--m-sky); }
.m-hero-frame img { display: block; }
.m-hero-frame .m-cover { width: 100%; height: 100%; object-fit: cover; }
/* The old Hem photo: a 768 x 1024 file whose content is stretched. Shown square (1:1) and cropped, always covering the frame. */
.m-hero-frame .m-unstretch { position: absolute; left: 50%; top: 50%; width: max(100cqw, 100cqh); max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: fill; translate: -50% -50%; }


/* section headings */
.m-hours h2, .m-about-grid > h2, .m-news h2, .m-visit h2 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.75rem); letter-spacing: -0.025em; }

/* opening hours */
.m-hours { padding-block: 5.5rem 4.5rem; }
.m-hours h2 { margin-bottom: 2rem; }
.m-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.m-week li { position: relative; display: flex; flex-direction: column; gap: 0.35rem; min-height: 9.5rem; padding: 1.25rem 1.1rem 1.35rem; background: var(--m-surface); border-radius: var(--m-radius-box); }
.m-day { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 700; color: var(--m-ink); }
.m-time { margin-top: auto; color: var(--m-navy); font-size: 1.3rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.m-day-note { color: var(--m-ink-soft); font-size: 1rem; line-height: 1.35; hyphens: auto; }   /* a long word ("Personalutbildning") is hyphenated where the browser knows Swedish, instead of cut without a hyphen */
.m-week li.is-closed { background: transparent; box-shadow: inset 0 0 0 1px var(--m-line); }
.m-week li.is-closed .m-time { color: var(--m-ink-soft); font-weight: 400; }
.m-week li.is-today { background: var(--m-navy); color: var(--m-on-navy); }
.m-week li.is-today .m-day, .m-week li.is-today .m-time, .m-week li.is-today .m-day-note { color: var(--m-on-navy); }
.m-week li.is-today.is-closed .m-time { color: var(--m-on-navy); }
.m-today { font-weight: 400; }   /* "idag" as plain words after the day name, not a badge */
.m-week-note { margin: 1.5rem 0 0; color: var(--m-ink-soft); }
@media (min-width: 64rem) {
  /* Hem's seven day tiles: every tile has the same rows (the day, room, the time, the note), so the times stand on one line whether or not a day has a note */
  .m-wrap > .m-week { grid-template-rows: auto 1fr auto auto; row-gap: 0; min-height: 9.5rem; }
  .m-wrap > .m-week:has(.m-day-note) { grid-template-rows: auto minmax(1rem, 1fr) auto auto; }   /* a week with a note: some room between the day and the time */
  .m-wrap > .m-week li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .m-wrap > .m-week .m-day { grid-row: 1; align-self: start; }
  .m-wrap > .m-week .m-time { grid-row: 3; align-self: end; margin-top: 0.35rem; }
  .m-wrap > .m-week .m-day-note { grid-row: 4; margin-top: 0.35rem; }
}
.m-special { margin-top: 2.5rem; padding: 1.5rem 1.75rem; background: var(--m-sky); border-radius: var(--m-radius-box); max-width: 44rem; }
.m-special h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.m-special ul { margin: 0; padding: 0; list-style: none; }
.m-special li { padding: 0.35rem 0; }

/* about: the clinic's own text, set as an article */
.m-about { padding-block: 6rem; background: var(--m-surface); }
.m-about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; align-items: start; }
.m-about-grid > h2 { position: sticky; top: 2rem; }
.m-hero h1::after, .m-about-grid > h2::after, .m-page h1::after { content: ""; display: block; background: var(--m-red); -webkit-mask: url("/img/vag.svg?v=19ad63921a") no-repeat left center / contain; mask: url("/img/vag.svg?v=19ad63921a") no-repeat left center / contain; }   /* the wave is a file of its own (the page rules allow the site's own image files, not inline ones) and takes the accent colour */
.m-about-grid > h2::after { width: 6.5rem; height: 0.9rem; margin-top: 1rem; }
.m-prose { max-width: 42rem; font-size: 1.125rem; line-height: 1.75; }
.m-prose > :first-child { margin-top: 0; }
.m-prose > p:first-child { margin-bottom: 2rem; color: var(--m-navy); font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.65rem); line-height: 1.5; letter-spacing: -0.01em; }
.m .m-prose h2, .m .m-prose h3 { margin: 2.25rem 0 0.75rem; font-size: 1.35rem; line-height: 1.35; letter-spacing: 0; position: static; }
.m-prose img { border-radius: var(--m-radius); }
/* Long content never breaks a page: a long word or address wraps where it must, a wide table scrolls in its own box, pictures and embeds stay inside the column. */
.m-prose, .m .content, .m-page-body, .m-page-title, .m-hero h1, .m-news-list, .m-bar, .m-card, .m-status, .m-hours, .m-visit, .m-foot { overflow-wrap: anywhere; }
.m-page-body, .m-news-list li > div { min-width: 0; }
.m-prose img, .m .content img, .m .content video { max-width: 100%; height: auto; }
.m .content iframe, .m .content embed, .m .content object, .m-prose iframe { max-width: 100%; }
.m-prose table, .m .content table { display: block; max-width: 100%; overflow-x: auto; }
.m-prose pre, .m .content pre { max-width: 100%; overflow-x: auto; }

/* news */
.m-news { padding-block: 6rem 5rem; }
.m-news h2 { margin-bottom: 1.5rem; }
.m-news-list { margin: 0; padding: 0; list-style: none; }
.m-news-list li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; padding-block: 1.75rem; border-top: 1px solid var(--m-line); }
.m-news-list time { color: var(--m-ink-soft); font-variant-numeric: tabular-nums; padding-top: 0.15rem; }
.m-news-list h3 { font-size: 1.4rem; margin-bottom: 0.35rem; letter-spacing: -0.01em; }
.m .m-news-list h3 a { color: var(--m-navy); text-decoration: none; background: linear-gradient(var(--m-red), var(--m-red)) no-repeat left bottom / 0 2px; transition: background-size 0.35s var(--m-ease), color 0.2s; }
.m .m-news-list h3 a:hover { color: var(--m-red); background-size: 100% 2px; }
.m-news-list p { margin: 0; max-width: 46rem; color: var(--m-ink-soft); }
.m-news-all { margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--m-line); }
.m-news-all a { font-weight: 700; font-size: 1.125rem; }

/* address, contact, map */
.m-visit { padding-block: 5.5rem 6rem; background: var(--m-sky); }
.m-visit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: center; }
.m-visit h2 { margin-bottom: 1.5rem; }
.m-visit-address { margin: 0 0 1.75rem; color: var(--m-ink); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.m-contact { margin: 0 0 2rem; }
.m-contact > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: center; min-height: 3rem; padding-block: 0.4rem; }
.m-contact dt { color: var(--m-ink-soft); }
.m-contact dd { margin: 0; font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }
.m .m-contact dd a { color: var(--m-navy); }
.m .m-reveal-button { min-height: 2.75rem; padding: 0 1.25rem; border: 2px solid var(--m-navy); border-radius: var(--m-radius-sm); background: transparent; color: var(--m-navy); font: inherit; font-size: 1.0625rem; font-weight: 700; cursor: pointer; }
.m .m-reveal-button:hover { background: var(--m-navy); color: var(--m-on-navy); }
.m-contact .reveal-result { font-size: 1.0625rem; }
/* a message ("För många försök. Vänta en minut och försök igen. Ring oss på ...") starts on its own line under the button, not with one word beside it,
   and the telephone number in it never breaks after its hyphen ("090-" / "13 14 29" on a 320 px phone) */
.m-contact .reveal-result.reveal-error { display: block; margin-top: 0.5rem; }
.m .reveal-result a[href^="tel:"] { white-space: nowrap; }
.m-map { justify-self: end; width: 100%; max-width: 37.5rem; margin: 0; }
.m-map a { display: block; border-radius: var(--m-radius); overflow: hidden; box-shadow: 0 0 0 1px var(--m-line); line-height: 0; }
.m-map img { width: 100%; transition: transform 0.6s var(--m-ease); }
.m-map a:hover img { transform: scale(1.03); }
.m-map figcaption { margin-top: 0.6rem; color: var(--m-ink-soft); font-size: 1rem; }

/* footer */
.m-foot { padding-block: 4rem 2rem; background: var(--m-navy); color: var(--m-on-navy); }
.m .m-foot a { color: var(--m-on-navy); }
.m .m-foot a:hover { color: var(--m-on-navy); text-decoration-thickness: 0.15em; }
.m .m-foot :focus-visible { outline-color: var(--m-on-navy); }
.m-foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1fr; gap: 2rem; }
.m-foot-grid p { margin: 0; }
.m-foot-name strong { font-size: 1.35rem; }
.m-foot-nav { margin: 0; padding: 0; list-style: none; }
.m-foot-nav li { padding-block: 0.15rem; }
.m-foot-line { margin-top: 3rem; margin-bottom: 0; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--m-on-navy) 25%, transparent); }

/* phone: bottom action bar */
.m-dock { display: none; }

/* ---------- tablet and small laptop ---------- */
@media (max-width: 63.999rem) {
  .m-nav { display: none; }
  .m-menu { display: block; position: static; margin-left: auto; }
  .m-menu summary { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.15rem; border: 2px solid var(--m-navy); border-radius: var(--m-radius-sm); color: var(--m-navy); font-weight: 700; cursor: pointer; list-style: none; }
  .m-menu summary::-webkit-details-marker { display: none; }
  .m-menu .m-when-open, .m-menu[open] .m-when-closed { display: none; }
  .m-menu[open] .m-when-open { display: inline; }
  .m-menu nav { position: absolute; left: var(--m-gutter); right: var(--m-gutter); top: calc(100% - 0.25rem); padding: 0.5rem; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius-box); }
  .m-menu ul { margin: 0; padding: 0; list-style: none; }
  .m .m-menu a { display: flex; align-items: center; min-height: 3.25rem; padding: 0 1rem; color: var(--m-ink); font-size: 1.15rem; text-decoration: none; border-radius: var(--m-radius-sm); }
  .m .m-menu a:hover, .m .m-menu a[aria-current="page"] { background: var(--m-bg); color: var(--m-navy); font-weight: 700; }

  /* tablet: the text on top at full width, the photo under it, bleeding off the right edge */
  .m-hero { grid-template-columns: var(--m-gutter) minmax(0, 1fr) var(--m-gutter); }
  .m-hero-text { grid-column: 2; padding: 1.5rem 0 3rem; }
  .m-hero h1.m-h1-s { font-size: clamp(2.6rem, 1rem + 4.6vw, 3.75rem); }
  .m-hero h1.m-h1-m { font-size: clamp(2.3rem, 1rem + 3.6vw, 3.1rem); }
  .m-hero h1.m-h1-l { font-size: clamp(1.9rem, 1rem + 2.4vw, 2.5rem); }
  .m-hero h1.m-h1-xl { font-size: clamp(1.6rem, 1rem + 1.6vw, 2rem); }
  .m-hero-media { grid-column: 2 / 4; }
  .m-hero-frame { height: clamp(24rem, 46vh, 34rem); }

  .m-week { grid-template-columns: 1fr; gap: 0; max-width: 40rem; }
  .m-week li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 1rem; min-height: 3.75rem; padding: 0.6rem 1.15rem; background: transparent; border-radius: 0; border-top: 1px solid var(--m-line); }
  .m-week li:first-child { border-top: 0; }
  .m-week li.is-closed { box-shadow: none; }
  .m-week li.is-today { border-radius: var(--m-radius-box); border-top-color: transparent; }
  .m-week li.is-today + li { border-top-color: transparent; }
  .m-day { justify-content: flex-start; font-size: 1.125rem; }
  .m-time { margin-top: 0; font-size: 1.2rem; text-align: right; }
  .m-day-note { grid-column: 1 / -1; }

  .m-about-grid, .m-visit-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .m-about-grid > h2 { position: static; }
  .m-map { justify-self: start; }
  .m-foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 47.999rem) {
  .m { font-size: 1.0625rem; }
  .m-top-inner { min-height: 4.25rem; gap: 1rem; }
  .m-brand img { height: 2.6rem; }
  .m-menu { margin-left: auto; }

  /* phone: the photo is a full-width band right under the header, then the heading and today's status */
  .m-hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 0; }
  .m-hero-media { order: -1; }
  .m-hero-text { padding: 1.25rem var(--m-gutter) 1.5rem; }
  .m-kicker { margin-bottom: 0.5rem; }
  .m-hero h1.m-h1-s { font-size: clamp(2.1rem, 1.2rem + 4vw, 2.6rem); }
  .m-hero h1.m-h1-m { font-size: clamp(1.85rem, 1.1rem + 3.4vw, 2.3rem); }
  .m-hero h1.m-h1-l { font-size: clamp(1.45rem, 1rem + 1.6vw, 1.7rem); }
  .m-hero h1.m-h1-xl { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.4rem); }
  .m-hero h1::after { width: 6.5rem; height: 0.9rem; margin-top: 0.75rem; }
  .m-hero-text { display: flex; flex-direction: column; }
  .m-status { order: -1; position: relative; z-index: 1; margin: -3rem 0 1.5rem; max-width: none; padding: 1.1rem 1.25rem; }
  .m-hero .m-actions, .m-hero-address { display: none; }   /* the bottom bar has Ring and Hitta hit, right under the thumb */
  .m-hero-frame { height: clamp(13rem, 30vh, 18rem); border-radius: 0; }

  .m-hours { padding-block: 3.5rem 3rem; }
  .m-hours h2 { margin-bottom: 1.25rem; }
  .m-week li { padding-inline: 1rem; }
  .m-special { padding: 1.25rem; }

  .m-about, .m-news, .m-visit { padding-block: 3.5rem; }
  .m-prose { font-size: 1.0625rem; }
  .m-news-list li { grid-template-columns: 1fr; gap: 0.25rem; padding-block: 1.35rem; }
  .m-news-list h3 { font-size: 1.25rem; }
  .m-contact > div { grid-template-columns: 1fr; gap: 0; }
  .m-visit .m-btn { width: 100%; }
  .m-foot { padding-top: 3rem; }
  .m-foot-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- the bottom bar: below 64rem on every page but Hem (status, Ring, Hitta hit, E-post), below 48rem on Hem ---------- */
@media (max-width: 63.999rem) {
  .m-dock { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; padding: 0.6rem var(--m-gutter) max(0.6rem, env(safe-area-inset-bottom)); background: var(--m-surface); border-top: 1px solid var(--m-line); }   /* opaque: the page text must not show through the bar */
  /* equal buttons, but never narrower than their word and its padding: a longer word ("Hitta hit" with Större text) takes the room it needs from the others */
  .m .m-dock a { display: flex; flex: 1 1 0; min-width: fit-content; white-space: nowrap; align-items: center; justify-content: center; background: var(--m-surface); min-height: 3.25rem; padding: 0 0.5rem; border: 2px solid var(--m-navy); border-radius: var(--m-radius-sm); color: var(--m-navy); font-size: 1.125rem; font-weight: 700; text-decoration: none; }
  .m .m-dock .m-dock-call { background: var(--m-red); border-color: var(--m-red); color: var(--m-red-ink); }
  .m-dock-status { flex: 1 1 100%; margin: 0; color: var(--m-ink); font-size: 1rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
  .m-dock-status .m-dot { display: inline-block; margin-right: 0.5rem; vertical-align: 0.05em; }
  .m-dock-lunch, .m-dock-note, .m-dock-next { font-weight: 400; }
  /* the room under the page for the bar: its unseen copy (.m-dock-room) at the end of the page, as tall as the bar at every text size and width, so nothing ever
     stays under the bar (a guessed padding fell short with large text) */
  .m .m-dock-room { position: static; visibility: hidden; }
  .m:has(.m-menu[open]) .m-dock { display: none; }   /* an open Meny is never under the bar: with large text its last links reach the bottom of the screen */
  /* a link or button that takes keyboard focus is scrolled clear of the fixed bar, never left under it (WCAG 2.4.11), the way the admin does for its save bar.
     The value is in rem, so it follows the text size as the bar does, and is set to cover the bar at its tallest: with Större text on a narrow phone the status
     line and the buttons wrap onto several rows (about 510 px at 390/32), so the room is generous (scroll-padding only moves what gets scrolled into view). */
  html.m-root:has(.m-sub) { scroll-padding-bottom: 18rem; }
}
@media (max-width: 47.999rem) {
  html.m-root { scroll-padding-bottom: 18rem; }   /* Hem shows the bar below 48 rem too */
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .m:not(.m-sub) .m-dock { display: none; }   /* Hem keeps its tablet layout without the bar */
}
@media (max-width: 21.99rem) {
  .m-dock-lunch { display: none; }   /* the narrowest phones: the status line stays on one line without the lunch */
  .m .m-dock a { padding: 0 0.5rem; font-size: 1rem; white-space: nowrap; }   /* the three labels stay on one line, so the buttons keep their 52 px; 8 px room inside each */
}

/* ---------- motion (none at all when reduced motion is asked for) ---------- */
/* Only the hero text settles 0.4rem into place on load. It never fades: the page is complete in the first frame, in a
   full-page screenshot and in print. No reveal on scroll, no pulsing dot, no photo zoom or drift. */
@media (prefers-reduced-motion: no-preference) {
  .m-hero-text { animation: m-settle 0.45s var(--m-ease) both; }
}

@media (prefers-reduced-motion: reduce) {
  .m *, .m *::before, .m *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@keyframes m-settle { from { transform: translateY(0.4rem); } to { transform: none; } }

/* Windows high contrast (forced colours): the system paints every button the same, so a filled button (Ring, Hitta hit in the contact section) loses its shape
   and reads as plain link text. A border in the system button colour gives it back its box, like the outlined Hitta hit keeps. The normal look is untouched. */
@media (forced-colors: active) {
  .m .m-btn-red, .m .m-btn-navy { border: 2px solid ButtonText; }
}

/* The quiet line by "Visa e-postadress" (the link to the privacy page) */
.m .m-reveal-note { margin: 0.5rem 0 0; font-size: 0.9rem; line-height: 1.45; opacity: 0.8; }

/* "se hemsidan" by E-post: only on paper. The address itself is never in the page (it comes after a Turnstile check), so putting it in the markup would hand it
   to a scraper; on a printout the button cannot be pressed, so the reader is sent to the site instead of left with an empty "E-post" label. */
.m .m-print-only { display: none; }

/* ---------- the other pages (ModernLayout): the page in a column between the same top bar and the same contact section and footer as Hem ---------- */
.m .m-nav a[aria-current="page"] { color: var(--m-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--m-red); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.m-page { padding-block: 3.5rem 5rem; }
.m-page h1 { font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; max-width: 46rem; }
.m-page h1::after { width: 6.5rem; height: 0.9rem; margin-top: 1rem; margin-bottom: 2rem; }
.m-page .content, .m-page .news-item, .m-page .pager, .m-page .back, .m-page .updated, .m-page-body > p { max-width: 46rem; }
.m-page .content { font-size: 1.125rem; line-height: 1.75; }
/* a line of running text holds at most about 75 characters (34em of its own size; 46rem gave up to 90); pictures (also a picture inside a paragraph),
   tables and headings keep the column */
:is(.m-page .content :is(p, li, dd, blockquote), .m-page .news-item p, .m-page-body > p, .m-news-list p, .m-prose :is(p, li)):not(:has(img, picture, video, iframe, table)) { max-width: 34em; }
.m .m-page .content a { color: var(--m-red); }
.m .m-page .content a:hover { color: var(--m-navy); }
.m .m-page .content h2, .m .m-page .content h3 { margin: 2.25rem 0 0.75rem; font-size: 1.35rem; line-height: 1.35; letter-spacing: 0; }
.m-page .content > :last-child { margin-bottom: 0; }
.m-page .content img { border-radius: var(--m-radius); }
.m-page .content blockquote { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius-box); }
.m-page .post-date { margin: 0 0 1.25rem; color: var(--m-ink-soft); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.m-page .news-item { margin: 0; padding: 1.75rem 0; border-top: 1px solid var(--m-line); border-bottom: 0; }
.m-page .news-item h2 { font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.01em; }
.m-page .news-item .post-date { margin-block: 0.35rem 0.75rem; }
.m .m-page .news-item h2 a { color: var(--m-navy); text-decoration: none; background: linear-gradient(var(--m-red), var(--m-red)) no-repeat left bottom / 0 2px; transition: background-size 0.35s var(--m-ease), color 0.2s; }
.m .m-page .news-item h2 a:hover { color: var(--m-red); background-size: 100% 2px; }
.m-page .pager { margin-top: 0; padding-top: 1.5rem; border-top: 1px solid var(--m-line); }
.m-page .pager a, .m-page .back a { font-weight: 700; font-size: 1.125rem; }
.m-page .back { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--m-line); }
.m-page .updated { margin-top: 2.5rem; color: var(--m-ink-soft); font-size: 1rem; }
.m-page .back + .updated { margin-top: 0; }
.m-page .m-hours { padding-block: 3rem 0; }
.m-page .m-hours h2 { margin-bottom: 1.5rem; }
.m-page .privacy .content p { margin: 0 0 1rem; }
.m-page .reveal-inline .reveal-button { min-height: 2.5rem; padding: 0 1rem; border: 2px solid var(--m-navy); border-radius: var(--m-radius-sm); background: transparent; color: var(--m-navy); font: inherit; font-weight: 700; cursor: pointer; }
.m-page .reveal-inline .reveal-button:hover { background: var(--m-navy); color: var(--m-on-navy); }
@media (min-width: 64rem) {
  /* the week sits in the page's own column beside the card, too narrow for seven boxes that hold "Torsdag idag" on one line: the list, as under 64rem (the same rules as the
     list in the 63.999rem block above, with .m-page in front: keep the two in step) */
  .m-page .m-week { grid-template-columns: 1fr; gap: 0; max-width: 40rem; }
  .m-page .m-week li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 1rem; min-height: 3.75rem; padding: 0.6rem 1.15rem; border-radius: 0; border-top: 1px solid var(--m-line); }
  .m-page .m-week li:not(.is-today) { background: transparent; }
  .m-page .m-week li:first-child { border-top: 0; }
  .m-page .m-week li.is-closed { box-shadow: none; }
  .m-page .m-week li.is-today { border-radius: var(--m-radius-box); border-top-color: transparent; }
  .m-page .m-week li.is-today + li { border-top-color: transparent; }
  .m-page .m-day { justify-content: flex-start; font-size: 1.125rem; }
  .m-page .m-day, .m-page .m-today { white-space: nowrap; }   /* no break inside "Torsdag" or "idag" */
  .m-page .m-day { flex-wrap: wrap; column-gap: 0.5rem; }   /* "idag" moves to the next line as a whole if the row is ever too narrow, and stays beside the name otherwise */
  .m-page .m-time { margin-top: 0; font-size: 1.2rem; text-align: right; }
  .m-page .m-day-note { grid-column: 1 / -1; }
}
@media (max-width: 47.999rem) {
  .m-page { padding-block: 2.25rem 3.5rem; }
  .m-page .content { font-size: 1.0625rem; }
  .m-page .m-hours { padding-block: 2.25rem 0; }
}

/* ---------- the messages as a thin row under the top bar, and the "Öppet idag" card (every page but Hem) ---------- */
.m-bars { background: var(--m-bg); }
.m-bar { background: var(--m-sky); border-block: 1px solid color-mix(in srgb, var(--m-navy) 28%, transparent); }
.m-bar + .m-bar { border-top: 0; }
.m-bar-viktigt { background: color-mix(in srgb, var(--m-red) 7%, var(--m-surface)); border-color: color-mix(in srgb, var(--m-red) 40%, transparent); }
.m-bar-row { display: flex; align-items: center; gap: 0.5rem 0.9rem; width: var(--m-wrap); min-height: 2.75rem; margin-inline: auto; padding-block: 0.3rem; list-style: none; }
details.m-bar > summary { cursor: pointer; }
.m-bar > summary::-webkit-details-marker { display: none; }
.m-bar-label { flex: none; margin: 0; color: var(--m-navy); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.m-bar-viktigt .m-bar-label { color: var(--m-red-dark); }
.m-bar-head { flex: 1 1 auto; min-width: 0; color: var(--m-navy); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }   /* never cut with an ellipsis: the sentence wraps */
.m-bar-text { flex: 1 1 auto; min-width: 0; color: var(--m-navy); font-weight: 600; line-height: 1.4; }
.m-bar-text :where(p) { margin: 0; }
.m-bar-more { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--m-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.m-bar .m-when-open { display: none; }
.m-bar[open] .m-when-open { display: inline; }
.m-bar[open] .m-when-closed { display: none; }
.m-bar-body { width: var(--m-wrap); margin: 0 auto; padding: 0.25rem 0 1.1rem; color: var(--m-navy); line-height: 1.55; }
.m-bar-body > * { max-width: 46rem; }
.m-bar-body > :last-child { margin-bottom: 0; }
.m .m-bar a { color: var(--m-navy); font-weight: 700; }
.m .m-bar a:hover { color: var(--m-red-dark); }

.m-page-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.m-card { margin: 0 0 1.5rem; padding: 1rem 1.15rem 1.1rem; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius-box); }
.m-card .m-status { order: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; max-width: none; }
.m-card .m-status-main { font-size: 1.2rem; }
.m-card .m-status-note { margin: 0.2rem 0 0 1.5rem; font-size: 1rem; }
.m-card .m-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.m .m-card .m-btn { flex: 0 1 auto; min-height: 2.75rem; padding: 0 0.9rem; font-size: 1rem; white-space: nowrap; text-align: center; }
.m .m-card .m-btn-red { flex: 1 1 11rem; }
@media (min-width: 64rem) {
  .m-page-grid { grid-template-columns: minmax(0, 1fr) 21rem; column-gap: 4rem; }
  .m-page-title { grid-column: 1; grid-row: 1; }
  .m-card { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 1.5rem; margin: 0.5rem 0 0; padding: 1.25rem 1.35rem 1.4rem; }
  .m-page-body { grid-column: 1; grid-row: 2; }
  .m-card .m-status-main { font-size: 1.3rem; }
  .m-card .m-actions { flex-direction: column; margin-top: 1.1rem; }
  .m .m-card .m-btn, .m .m-card .m-btn-red { flex: none; min-height: 3.25rem; font-size: 1.0625rem; }
}
@media (max-width: 47.999rem) {
  /* a phone: the label and "Läs mer" on the first line, the whole first sentence under them across the full width */
  .m-bar > summary.m-bar-row { flex-wrap: wrap; row-gap: 0; padding-block: 0.1rem 0.55rem; }
  .m-bar > summary .m-bar-label { order: 1; }
  .m-bar > summary .m-bar-more { order: 2; margin-left: auto; }
  .m-bar > summary .m-bar-head { order: 3; flex: 1 1 100%; margin-top: -0.35rem; }
}

/* below 64rem the bottom bar tells today's hours and the card beside the page is not drawn (from 64rem it is a sticky column) */
@media (max-width: 63.999rem) {
  .m-card { display: none; }
}

/* ---------- large text on a phone ----------
   With the browser's default font size raised ("very large text") a 320-414 px screen is only 10-13 rem wide, and rem media queries follow that setting. From 320 px at the normal
   size the screen is 20 rem or more, so nothing below applies to normal text (kept at the very end: it must win over the rules above with the same weight). */
@media (max-width: 19.99rem) {
  /* the top bar: the logo gives way, the menu button never does */
  .m-top-inner { gap: 0.5rem; }
  .m-brand { flex: 0 1 7.1rem; min-width: 0; }
  .m-brand img { width: 100%; height: auto; }
  .m-menu { flex: none; }
  .m-menu summary { padding: 0 0.6rem; }
  /* the bottom bar: the buttons keep their words whole and wrap to a new row when a row is full, 44 px high at least */
  .m .m-dock a { flex: 1 1 auto; min-height: 44px; padding: 0.15rem 0.5rem; line-height: 1.2; }
  /* Visa e-postadress: less padding, so the words fit; it wraps between the words or after the hyphen of "e-postadress", never inside a word ("postadre" / "ss") */
  .m .m-reveal-button { max-width: 100%; padding: 0.25rem 0.5rem; font-size: 1rem; line-height: 1.25; overflow-wrap: normal; hyphens: manual; }
  /* Hem: the single column may be narrower than the longest word of a heading, which then breaks instead of widening the page */
  .m-about-grid, .m-visit-grid { grid-template-columns: minmax(0, 1fr); }
  .m-hours h2, .m-about-grid > h2, .m-news h2, .m-visit h2, .m-kicker { overflow-wrap: anywhere; }
  /* a word longer than the line ("Öppettider", "Provtagning" in the open Meny) is hyphenated where the browser knows Swedish, and always stays inside its box */
  .m-page-title, .m-hours h2, .m-about-grid > h2, .m-news h2, .m-visit h2, .m-kicker { hyphens: auto; }
  .m .m-menu a { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  /* the week list: the column is only a few rem wide, so each row is the day on its own line (whole words, "idag" after it or under it) with the time and the note under it */
  .m-week li, .m-page .m-week li { grid-template-columns: minmax(0, 1fr); }
  .m-day, .m-page .m-day { flex-wrap: wrap; column-gap: 0.5rem; white-space: nowrap; }
  .m-time, .m-page .m-time { text-align: left; }
  /* the messages: the label above the text, so the text has the whole width */
  .m-bar-row { flex-wrap: wrap; row-gap: 0; }
  .m-bar-text { flex: 1 1 100%; }
}

/* ---------- print ----------
   On paper: the page itself, the address, the phone number and the opening hours, once. The screen-only parts are left out (the skip link, the menus, the bottom bar,
   the buttons, today's status that is old tomorrow, Hem's photo), the sections flow from page to page without their screen spacing, nothing is light text on a dark
   background that the printer leaves out, and a link in the text prints with its address. The screen is not affected. */
@media print {
  @page { margin: 1.5cm; }
  .m, .m-sub { padding-bottom: 0; overflow: visible; font-size: 11pt; line-height: 1.5; }
  .m-skip, .m-nav, .m-menu, .m-dock, .m-card, .m-status, .m-actions, .m-hero-media, .m-visit-text > p:last-child, .m-reveal-button, .m-reveal-note, .m-foot-nav, .m-news-all, .m-page .back, .m-page .pager, .m-bar-more { display: none; }
  .m .m-print-only { display: inline; }   /* so the E-post row is not an empty label on paper */
  .m dd:has(.reveal-result a) .m-print-only { display: none; }   /* unless the address was already shown on screen before printing */
  .m-top-inner { min-height: 0; padding-bottom: 0.5rem; }
  .m-brand img { height: 3rem; }
  .m-hero, .m-hero-text { display: block; padding: 0; }
  .m-page, .m-hours, .m-about, .m-news, .m-visit, .m-page .m-hours { padding-block: 1.25rem 0; background: none; }
  .m-page-grid, .m-about-grid, .m-visit-grid { display: block; }
  .m-about-grid > h2 { position: static; margin-bottom: 0.75rem; }
  .m-page h1::after { margin-bottom: 1rem; }
  .m-week li, .m-week li.is-today { background: none; color: var(--m-ink); }
  .m-week li.is-today .m-day, .m-week li.is-today .m-time, .m-week li.is-today .m-day-note { color: var(--m-ink); }
  .m-visit-address { font-size: 1.35rem; margin-bottom: 0.75rem; }
  .m-contact { margin-bottom: 1rem; }
  .m-contact > div { min-height: 0; }
  .m-map { max-width: 8cm; margin-top: 0.75rem; }
  .m-foot { margin-top: 1.5rem; padding-block: 1rem 0; background: none; color: var(--m-ink); border-top: 1px solid var(--m-line); }
  .m .m-foot a { color: var(--m-ink); }
  .m-foot-grid > p:nth-child(2), .m-foot-grid > p:nth-child(3) > a, .m-foot-grid > p:nth-child(3) > br { display: none; }   /* the address and the phone number are printed once, in Adress och kontakt */
  .m-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; }
  .m-foot-line { margin-top: 1rem; padding-top: 0.5rem; border-top-color: var(--m-line); }
  .m .m-page .content a[href^="http"]:not(.url-text)::after, .m .m-prose a[href^="http"]:not(.url-text)::after { content: " (" attr(href) ")"; font-size: 0.9em; overflow-wrap: anywhere; }
  .m :where(h1, h2, h3) { break-after: avoid; }
  .m .content img, .m-prose img { max-height: 9cm; width: auto; }
  .m-week li, .m-news-list li, .m-page .news-item, .m-contact > div, .m-map, .m-foot-grid, .m :where(img, figure, tr) { break-inside: avoid; }
}