/* KosmetiKos shared stylesheet */

:root {
  --color-bg: #fffbfd;
  --color-pink: #e8b9d4;
  --color-pink-deep: #dba0c4;
  --color-pink-soft: #f8e9f2;
  --color-ink: #241f21;
  --color-text: #4a3f43;
  --color-mauve: #8c5a72;
  --color-green: #7fa072;
  --color-green-dark: #4f6b4a;
  --color-white: #ffffff;
  --font-display: "Playfair Display", serif;
  --font-body: "Poppins", sans-serif;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(140, 90, 114, 0.14);
  --container-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-ink);
  line-height: 1.25;
  margin: 0 0 0.5em;
  /* Norwegian compounds get long. "Personvernerklaering" set at the h1's
     33.6px phone size measures 325px, which is 53px more than a 320px screen
     has to give, and a single unbreakable word pushed the whole page sideways.
     Long words may break, and hyphenate where the browser knows how.

     "anywhere" rather than "break-word" on purpose. Both break the word on
     screen, but only "anywhere" lowers the heading's min-content width, and
     min-content is what a flex or grid track sizes itself from. With
     break-word, "Ansiktsbehandlinger" still held its accordion row open at
     259px inside a 236px card and hung over the edge. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 600; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; }

p { margin: 0 0 1em; }

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

.section {
  position: relative;
  padding: 72px 0;
}

.section--soft {
  background: var(--color-pink-soft);
}

.section--pink {
  background: var(--color-pink);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--color-mauve);
  margin-bottom: 10px;
}

.lead {
  font-size: 1.1rem;
  max-width: 640px;
  color: var(--color-text);
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* A button label breaking onto two lines looks broken rather than wrapped.
     "Bestill time" was doing exactly that in the mobile header. */
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-mauve);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn-outline:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn-pink {
  background: var(--color-white);
  color: var(--color-mauve);
  box-shadow: var(--shadow);
}

.btn-pink:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 251, 253, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(140, 90, 114, 0.12);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  height: 56px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav a {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--color-ink);
  position: relative;
  padding: 6px 0;
}

.main-nav a.active,
.main-nav a:hover {
  color: var(--color-mauve);
}

.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-mauve);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-switch {
  display: flex;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.lang-switch a {
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--color-text);
}

.lang-switch a.active {
  background: var(--color-pink);
  color: var(--color-ink);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-ink);
  margin: 6px 0;
  transition: 0.2s ease;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-pink);
  padding: 70px 0 90px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.hero h1 {
  margin-bottom: 20px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-visual .leaf-set {
  width: 100%;
  max-width: 420px;
}

.leaf-decor {
  position: absolute;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

.leaf-decor.top-right {
  top: -40px;
  right: -30px;
  width: 200px;
  transform: rotate(20deg);
}

.leaf-decor.bottom-left {
  bottom: -50px;
  left: -40px;
  width: 220px;
  transform: rotate(-10deg) scaleX(-1);
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-white);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 18px;
}

.rating-badge .stars {
  color: #e8a800;
  letter-spacing: 1px;
}

/* Grids and cards */
.grid {
  display: grid;
  gap: 28px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Five equal columns for the specialisms row (har, hud, fot, kropp, negler).
   minmax(0, 1fr) so a long word cannot push one column wider than the rest. */
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }

.card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  position: relative;
}

.card h3 {
  margin-bottom: 10px;
}

/* The salon's email address is one unbreakable 230px token. Clamping the grid
   track stops it widening the column; this lets it wrap inside the card
   instead of simply overflowing the clamped box. */
.card {
  overflow-wrap: break-word;
}

.card .icon {
  font-size: 2rem;
  margin-bottom: 14px;
  display: block;
}

.section-head {
  max-width: 700px;
  margin: 0 auto 48px;
  text-align: center;
}

/* Treatment category blocks */
.category-block {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 36px;
  margin-bottom: 20px;
}

.category-block > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 0;
  -webkit-tap-highlight-color: transparent;
}

.category-block > summary::-webkit-details-marker {
  display: none;
}

.category-block > summary::marker {
  content: "";
  display: none;
}

.category-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.category-block__head h2 {
  margin: 0;
}

.category-block__head-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  /* A flex item will not shrink below its content's min-content width unless
     it is told it may, and a Norwegian category name is one long word:
     "Ansiktsbehandlinger" held this open at 259px inside a 236px row on a
     320px screen, so the heading hung out over the edge of its own card.
     overflow-wrap on the heading breaks the word visually, but only min-width
     lets the box get small enough for that to matter. */
  min-width: 0;
}

.category-block__head > * {
  min-width: 0;
}

.category-block__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-right: 2px solid var(--color-mauve);
  border-bottom: 2px solid var(--color-mauve);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-right: 4px;
}

.category-block[open] > summary .category-block__chevron {
  transform: rotate(-135deg);
}

.category-block__body {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid var(--color-pink-soft);
}

.category-block__tag {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-green-dark);
  background: #eef4ec;
  padding: 6px 14px;
  border-radius: 999px;
}

.price-list {
  display: grid;
  gap: 18px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(140, 90, 114, 0.2);
}

.price-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.price-item__name {
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.price-item__desc {
  font-size: 0.92rem;
  color: var(--color-text);
  max-width: 560px;
}

.price-item__price {
  font-weight: 700;
  color: var(--color-mauve);
  white-space: nowrap;
  font-size: 1.05rem;
}

.category-block__footer {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.badge-offer {
  display: inline-block;
  background: var(--color-pink);
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 999px;
  margin: 24px 0;
}

/* Nested per-treatment "read more" inside a category */
.sub-item {
  border-bottom: 1px dashed rgba(140, 90, 114, 0.2);
  padding: 14px 0;
}

.sub-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sub-item:first-child {
  padding-top: 0;
}

.sub-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sub-item > summary::-webkit-details-marker {
  display: none;
}

.sub-item > summary::marker {
  content: "";
  display: none;
}

.sub-item__chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-right: 2px solid var(--color-mauve);
  border-bottom: 2px solid var(--color-mauve);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.sub-item[open] > summary .sub-item__chevron {
  transform: rotate(-135deg);
}

.sub-item__name {
  font-weight: 600;
  color: var(--color-ink);
}

.sub-item__meta {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-mauve);
  white-space: nowrap;
  padding-left: 12px;
}

.sub-item__body {
  margin-top: 10px;
  padding-left: 20px;
  color: var(--color-text);
  font-size: 0.95rem;
}

.sub-item__body p {
  margin-bottom: 1em;
}

.sub-item__body p:last-child {
  margin-bottom: 0;
}

/* Magazine-style plain entries (no click-to-expand), used on the hair page */
.sub-item--plain {
  border-bottom: none;
  padding: 10px 0;
}

.sub-item--plain .sub-item__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.sub-item--plain .sub-item__body {
  padding-left: 0;
  margin-top: 0;
}

/* Photos sprinkled between sub-items on the hair page */
.hair-photo {
  display: block;
  max-width: 340px;
  width: 100%;
  margin: 28px auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Magazine-style alternating image/text feature rows, one per treatment */
.hair-feature {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 28px;
  align-items: center;
  margin: 0 0 40px;
}

.hair-feature__image {
  width: 100%;
  /* The width/height attributes on these tags are what reserve the space
     before the photo arrives, which is what stops the page jumping as you
     scroll. Setting width in CSS without height: auto makes the browser use
     the 700px attribute as a literal height instead of scaling it, so this
     line is load-bearing rather than tidiness. */
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hair-feature__text h3 {
  margin-bottom: 8px;
}

.hair-feature__text p {
  margin-bottom: 0;
}

.hair-feature--reverse {
  grid-template-columns: 1fr minmax(160px, 240px);
}

.hair-feature--reverse .hair-feature__image {
  order: 2;
}

@media (max-width: 720px) {
  .hair-feature,
  .hair-feature--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .hair-feature--reverse .hair-feature__image {
    order: 0;
  }
}

/* Booking / iframe */
.booking-frame-wrap {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  overflow: hidden;
}

/* Timma's step-1 service picker measures ~1525px tall at 1280px wide and
   ~1564px at 375px wide. A shorter frame forces a nested scrollbar over the
   booking form, which is the worst place on the site to add friction.

   That 375px measurement is the number to protect, and the frame was not
   getting it: the page container takes 24px a side and this wrapper another
   12px, so on a 375px phone Timma rendered into 303px. Narrower means taller,
   so the widget reflowed past the frame and produced the nested scrollbar the
   height was picked to avoid. The mobile rules give the full width back. */
.booking-frame-wrap iframe {
  width: 100%;
  min-height: 1620px;
  border: none;
  border-radius: 12px;
  display: block;
}

.booking-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 36px 0;
}

.booking-info .card {
  text-align: center;
}

/* Team */
.team-grid {
  display: grid;
  /* minmax(0, ...) so a long role line cannot widen its own column */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 28px;
}

.team-card {
  text-align: center;
}

.team-card__portrait {
  width: 160px;
  height: 160px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--color-pink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.team-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.team-card__portrait--placeholder {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--color-mauve);
}

.team-card h3 {
  margin-bottom: 2px;
}

.team-card .role {
  color: var(--color-mauve);
  font-weight: 500;
  font-size: 0.92rem;
  max-width: 220px;
  margin: 0 auto;
}

.team-card__note {
  font-size: 0.9rem;
  color: var(--color-text);
  max-width: 240px;
  margin: 10px auto 0;
}

.team-card__more {
  display: inline-block;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--color-mauve);
  font-weight: 600;
  font-size: 0.88rem;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 6px;
}

.team-card__more:hover {
  color: var(--color-ink);
}

.team-card__portrait.has-bio {
  cursor: pointer;
}

.team-card__portrait.has-bio:hover {
  box-shadow: 0 0 0 4px var(--color-pink-soft);
}

/* Hidden by default; JS copies this into the modal when opened. Content
   still lives in the page source, so it's fully indexable. */
.team-bio {
  display: none;
}

.team-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(36, 31, 33, 0.6);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}

.team-modal-backdrop.open {
  display: flex;
}

.team-modal {
  background: var(--color-white);
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
  box-shadow: var(--shadow);
}

.team-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  padding: 8px;
}

.team-modal__close:hover {
  color: var(--color-ink);
}

.team-modal__photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--color-pink-soft);
  margin: 0 auto 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.team-modal__name {
  text-align: center;
  margin-bottom: 2px;
}

.team-modal__role {
  text-align: center;
  color: var(--color-mauve);
  font-weight: 500;
  margin-bottom: 24px;
}

.team-modal__body h4 {
  margin-top: 0;
}

.team-modal__body p {
  margin-bottom: 1em;
}

@media (max-width: 720px) {
  .team-modal {
    padding: 28px 22px;
    max-height: 90vh;
  }

  .team-modal__photo {
    width: 140px;
    height: 140px;
  }
}

/* Testimonials */
.testimonial {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.testimonial .stars {
  color: #e8a800;
  margin-bottom: 10px;
  display: block;
}

.testimonial cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-weight: 600;
  color: var(--color-mauve);
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-detail {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.contact-detail .icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-top: 24px;
}

.map-embed iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

/* Footer */
.site-footer {
  background: var(--color-ink);
  color: #f3e6ee;
  padding: 64px 0 24px;
}

.footer-grid {
  display: grid;
  /* minmax(0, ...) rather than bare fr: a plain fr track floors at min-content,
     so the unbreakable email address (post.kosmetikos@gmail.com, 219px) forced
     its column wider than the phone and pushed the whole page to 404px on a
     375px screen. That is what cut off the right-hand side on mobile. */
  grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.footer-grid h4 {
  color: var(--color-white);
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
}

.footer-grid a,
.footer-grid p {
  color: #d9c3d3;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.footer-grid li {
  margin-bottom: 10px;
}

.footer-grid a:hover {
  color: var(--color-white);
}

.footer-brand img {
  height: 50px;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.social-row {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}

.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.social-row a:hover {
  background: var(--color-pink);
  color: var(--color-ink);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: #b998ac;
}

.footer-bottom a {
  color: #d9c3d3;
}

.footer-bottom a:hover {
  color: var(--color-white);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-white);
  color: var(--color-ink);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

/* ---- Blog ------------------------------------------------------------------
   The index reuses .card so a post sits in the same visual family as a
   treatment. The card is an <a>, not a div wrapping one, so the whole tile is
   one tap target rather than a link buried inside it.
   ---------------------------------------------------------------------------- */
.post-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(140, 90, 114, 0.2);
}

.post-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 20px;
}

/* A post without a picture should not lose the padding the picture sat in. */
.post-card > :not(.post-card__image) {
  padding-left: 28px;
  padding-right: 28px;
}

.post-card > :first-child:not(.post-card__image) {
  padding-top: 32px;
}

.post-card__meta,
.post__meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-mauve);
  margin-bottom: 8px;
}

.post-card h3 {
  margin-bottom: 10px;
}

.post-card p {
  color: var(--color-text);
}

.post-card__more {
  display: block;
  margin-top: auto;
  padding-bottom: 32px;
  font-weight: 600;
  color: var(--color-mauve);
}

.post-card:hover .post-card__more {
  text-decoration: underline;
}

/* ---- A single post ---------------------------------------------------------
   Capped at 68 characters or so of line length. Long-form reading is the whole
   point of the page, and full-width body text at 1180px is unreadable.
   ---------------------------------------------------------------------------- */
.post {
  max-width: 680px;
  margin: 0 auto;
}

.post__hero {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}

.post h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin-top: 1.6em;
}

.post h3 {
  margin-top: 1.4em;
}

.post p {
  font-size: 1.05rem;
}

.post .post-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 1em;
}

.post .post-list li {
  margin-bottom: 8px;
}

.post blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--color-pink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--color-ink);
}

.post img {
  border-radius: var(--radius);
  margin: 1.5em 0;
}

.post__back {
  margin-top: 40px;
}

/* Responsive */
@media (max-width: 960px) {
  .hero .container {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  /* Illustration sits BELOW the text on small screens.
     It used to be order: -1, which put 336px of leaves above the headline:
     the H1 landed 621px down and the "Bestill time" button 969px down, past
     a full phone screen. On the page that exists to take bookings, and for
     an audience that is overwhelmingly on phones, the headline and the CTA
     come first. The illustration still reads, just after the point. */
  .hero-visual {
    order: 1;
    margin-top: 8px;
  }

  .hero-visual .leaf-set {
    max-width: 320px;
  }

  .leaf-decor {
    display: none;
  }

  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* minmax(0, ...) rather than a bare 1fr, for the reason spelled out on
     .footer-grid: a plain fr track floors at min-content, and the unbreakable
     post.kosmetikos@gmail.com (230px, plus 56px of card padding) held these
     tracks open at 286px inside a 272px column. The cards hung 14px past the
     right-hand gutter on a 320px screen. */
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-info {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The mobile header carries the logo, the booking CTA and the menu toggle.
     At the default button padding those three crowd each other on a 375px
     screen, so the CTA gets a tighter box and the logo a little less height. */
  .site-header .container {
    gap: 12px;
  }

  .header-actions .btn {
    padding: 11px 18px;
    font-size: 0.92rem;
  }

  .brand img {
    height: 48px;
  }
}

/* The nav collapses to the drawer at 900px, not at the 720px the rest of the
   phone layout uses. Those were the same number, and between them sat a bug:
   at 768px, an iPad held upright, the full seven-item menu plus the language
   switch plus the "Bestill time" button need 861px of a 753px bar. The header
   ran off the side and took the page's horizontal scroll with it. The menu now
   folds away while there is still room for it to fold into. */
@media (max-width: 900px) {
  .main-nav { display: none; }

  .nav-toggle { display: block; }

  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    padding: 24px;
    gap: 18px;
    box-shadow: var(--shadow);
  }

  /* A menu row that only responds where the letters are is a menu that feels
     broken. "Hjem" was a 41px target in a 327px-wide drawer, so four fifths of
     the row did nothing. Each link now fills the drawer and clears 44px. */
  .site-header.nav-open .main-nav a {
    display: block;
    width: 100%;
    padding: 10px 0;
  }

  .site-header.nav-open .main-nav .lang-switch {
    width: 100%;
  }

  .site-header.nav-open .main-nav .lang-switch a {
    width: auto;
    min-width: 56px;
    text-align: center;
    padding: 10px 12px;
  }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: minmax(0, 1fr); }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .price-item { flex-direction: column; }

  .price-item__price { font-size: 1rem; }

  /* The duration sits hard right of the treatment name and refuses to wrap, so
     on a narrow card "Inkl. proevetime" was pushed 27px past the edge. Let the
     row wrap and the duration drop under the name when there is no room. */
  .sub-item > summary {
    flex-wrap: wrap;
  }

  .sub-item__meta {
    padding-left: 0;
  }

  /* .btn is nowrap so the header CTA cannot break in two. That guarantee is
     only ever needed in the header. Everywhere else it backfired: "Se alle
     behandlinger og priser" measured 302px against a 272px column on a 320px
     screen, which pushed the whole page sideways and brought back the
     horizontal scroll. Outside the header, long labels may wrap. */
  .btn {
    white-space: normal;
    padding-left: 22px;
    padding-right: 22px;
  }

  .header-actions .btn {
    white-space: nowrap;
  }

  /* 36px of padding a side inside a card that already sits in a 24px gutter
     left treatment text 255px of a 375px screen. Buying back 36px is roughly
     one more word per line across every price list on the site. */
  .category-block {
    padding: 24px 18px;
  }

  /* The booking page has a single job. Address, contact and opening hours are
     useful, but stacked one per row on a phone they put three cards and about
     600px between the visitor and the booking widget, which started 1039px
     down the page. The widget goes first on phones, together with the "open it
     in a new window" fallback that belongs with it; the details keep their
     place underneath. */
  .booking-layout {
    display: flex;
    flex-direction: column;
  }

  .booking-layout .booking-frame { order: -1; }

  /* Timma gets the full width of the phone instead of 303px of it, which is
     the width its height was measured at. Edge to edge also reads as the
     booking tool being the page rather than a card sitting on it. */
  .booking-frame-wrap {
    padding: 0;
    border-radius: 0;
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
  }

  .booking-frame-wrap iframe {
    border-radius: 0;
  }

  /* The consent banner is fixed to the bottom of the screen and, on a 375x667
     phone, ran from y=436 to y=651. The hero's "Bestill time na" button sat at
     y=502, so on a first visit the banner physically covered it: a tap on the
     button landed on the banner text instead. On the page that exists to take
     bookings, the primary CTA was unreachable until consent was dismissed.

     The fix works from both ends. The hero loses the padding it does not need
     on a phone, which lifts the CTA, and the banner below is cut to about two
     thirds of its height. */
  .hero {
    padding: 24px 0 56px;
  }

  .rating-badge {
    margin-bottom: 10px;
  }

  .hero .lead {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .hero-actions {
    margin-top: 14px;
    gap: 12px;
  }

  .hero-actions .btn {
    padding: 12px 26px;
  }

  /* Footer links were 21px tall, and the phone number and email address on the
     contact page 23px. Those are the two things a salon visitor on a phone is
     most likely to be reaching for. */
  .footer-grid a,
  .footer-bottom a {
    display: inline-block;
    padding: 6px 0;
  }

  .footer-grid li {
    margin-bottom: 4px;
  }
}

/* ---- Cookie consent banner --------------------------------------------------
   Injected by assets/js/main.js. Both buttons are the same size and sit side by
   side: Norway's ekomlov requires refusing to be as easy as accepting, so a
   text-link "decline" beside a solid "accept" button would not pass.
   ---------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1 1 300px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.cookie-banner__actions .btn { min-width: 120px; justify-content: center; }
.cookie-manage-link { text-decoration: underline; }
@media (max-width: 640px) {
  /* Two across on phones, not one. Six cards in a single column makes the
     About page a very long scroll, and the portraits are the point. A tighter
     gap buys back room so each card still gets ~150px on a 375px screen. */
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
  }

  /* The portrait is a hard 160px circle. Two of those plus the gap need 336px
     of a 320px screen, so the right-hand column hung off the edge and took the
     page with it. Let the circle shrink to its column and stay round. */
  .team-card__portrait {
    width: 100%;
    max-width: 160px;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Compact enough to clear the hero CTA above it. See the .hero rules in the
     720px block for why that matters. Both buttons stay the same size and sit
     side by side, so refusing is still exactly as easy as accepting. */
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
  .cookie-banner__inner { padding: 12px 14px; gap: 9px; }
  .cookie-banner__text { font-size: 0.78rem; line-height: 1.4; flex-basis: 100%; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 16px;
    font-size: 0.88rem;
  }
}