/*
  Respektfullt föräldraskap – delad stil för alla sidor.

  Kundens undvikslista, respekterad rakt igenom: inget mörkt tema, inga
  animationer eller blinkande inslag, inga popups, korta texter.
  OBS: sätt aldrig overflow-x på body i det här projektet – det gör body till en
  egen scroll-container och slår ihjäl position:sticky i hela sidan.

  Alla interna länkar är RELATIVA (../priser/ osv), inte absoluta (/priser/).
  Det gör att sajten fungerar även om den monteras i en undermapp, och att kunden
  kan lägga upp mappen på vilket webbhotell som helst vid ett utköp.
*/

:root {
  --krita:       #fdf8f6;   /* varm papperston med rosa dragning */
  --dis:         #f6e5e0;   /* dammig rosa – bärande sektionsfärg */
  --dis-djup:    #efd6d0;   /* något mättare rosa för avgränsade ytor */
  --vit:         #fffdfc;
  --grafit:      #2e2a2b;
  --grafit-mjuk: #5d5658;
  --rosa:        #c08d87;   /* dekor och linjer, inte text */
  --rosa-djup:   #874d49;   /* enda rosa som får bära text. Mörkad tills den
                               klarar WCAG AA mot ALLA tre bakgrunderna:
                               6,3:1 mot krita, 5,4:1 mot dis, 4,8:1 mot dis-djup.
                               Ljusare än så och sidfotens rubriker faller under
                               4,5:1 mot den mättade rosa botten. */
  --linje:       rgba(135, 77, 73, 0.22);

  --rubrik: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --brod: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--krita);
  color: var(--grafit);
  font-family: var(--brod);
  font-size: 17px;
  line-height: 1.7;
}
img, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
[hidden] { display: none !important; }

.hopp { position: absolute; left: -9999px; top: 0; background: var(--grafit); color: var(--krita); padding: 10px 16px; z-index: 100; }
.hopp:focus { left: 8px; top: 8px; }

.inre { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 22px; }
.smal { max-width: 62ch; }

h1, h2, h3 { font-family: var(--rubrik); font-weight: normal; line-height: 1.16; margin: 0; }
h1 { font-size: clamp(30px, 5.6vw, 48px); letter-spacing: -0.015em; }
h2 { font-size: clamp(25px, 4vw, 35px); letter-spacing: -0.01em; }
h3 { font-size: 20px; }

.etikett {
  font-family: var(--brod); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--rosa-djup);
  margin: 0 0 14px; display: block;
}

/* ---------- Sidhuvud ---------- */
.topp { border-bottom: 1px solid var(--linje); background: var(--dis); }
.topp .inre { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; padding-top: 22px; padding-bottom: 22px; }

/* Märket + namnet. Märket ligger som <img>, alltså utan tillgång till sidans
   CSS-variabler – därför finns färdiga färgvarianter i logo/ i stället för en
   fil med currentColor. Filerna genereras av intern/logo/bygg.mjs.

   48 px, och det är ingen slump: den fulla versionen har tre ringar, och under
   ca 40 px flyter de ihop till en fläck. Vid 48 px läses alla tre. Ska märket
   någonstans mindre än så ska logo-liten.svg (två ringar, kraftigare) användas
   i stället – det är den faviconen bygger på. */
.ordbild { text-decoration: none; display: flex; align-items: center; gap: 14px; }
.ordbild-mark { flex: none; display: block; width: 48px; height: 48px; }
.ordbild-text { line-height: 1.06; }
.ordbild .rad1 { font-family: var(--rubrik); font-size: 22px; display: block; }
.ordbild .rad2 {
  font-family: var(--brod); font-size: 11.5px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--rosa-djup); display: block; margin-top: 3px;
}

.meny { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; }
.meny a { text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid var(--rosa); }
.meny a:hover, .meny a:focus { border-bottom-width: 2px; }
.meny a[aria-current="page"] { border-bottom-width: 2px; border-bottom-color: var(--grafit); }

/* ---------- Knappar ---------- */
.knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.knapp {
  font-size: 16px; text-decoration: none; padding: 13px 26px;
  border-radius: 3px; border: 1px solid var(--grafit); display: inline-block;
}
.knapp-fyll { background: var(--grafit); color: var(--krita); }
.knapp-fyll:hover { background: #443d3f; }
.knapp-tom { border-color: var(--rosa-djup); color: var(--rosa-djup); }
.knapp-tom:hover { background: var(--dis-djup); }

/* ---------- Hero (bara startsidan) ---------- */
.hero { background: var(--dis); padding: 66px 0 62px; }
.hero .inre { display: grid; gap: 38px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) {
  .hero .inre { grid-template-columns: 1.15fr 0.85fr; gap: 54px; }
  /* Bilden sist i koden men först i läsordning på små skärmar – på stora får
     texten stå kvar till vänster. */
}
.hero h1 { max-width: 15ch; }
.hero .ingress { font-size: clamp(17px, 2.1vw, 20px); max-width: 46ch; margin-top: 24px; }
.hero-bild {
  display: block; width: 100%; height: auto;
  border-radius: 8px; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: 62% 60%;   /* barnet sitter i nedre högra tredjedelen */
}
.villkorsrad { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 34px; font-size: 14.5px; color: var(--grafit-mjuk); }
.villkorsrad span { display: flex; align-items: baseline; gap: 9px; }
.villkorsrad span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rosa-djup); flex: none; }

/* ---------- Rubrikblock på undersidorna ---------- */
.sidtopp { background: var(--dis); padding: 58px 0 54px; }
.sidtopp .ingress { max-width: 56ch; margin-top: 18px; font-size: 18px; }

/* ---------- Sektioner ---------- */
section { padding: 62px 0; }
.dis { background: var(--dis); }
.avdelare { border-top: 1px solid var(--linje); }

/* Medvetet ingen numrerad stegrad någonstans på sajten: kunden säljer uttryckligen
   "inga metoder och inga quick fixes", och en numrerad lista ÄR formen för en
   metod. Löpande text säger samma sak utan att motsäga henne. */
.resonemang { max-width: 56ch; margin-top: 24px; font-size: 17.5px; }
.resonemang .lyft { font-family: var(--rubrik); font-size: clamp(20px, 2.5vw, 25px); line-height: 1.42; }

/* Rosa citatliknande ruta för det som ska landa mjukt */
.varm {
  background: var(--dis-djup); border-radius: 6px;
  padding: 28px 30px; margin-top: 36px; max-width: 58ch;
  font-family: var(--rubrik); font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5;
}

/* Länkrad vidare till nästa sida.
   Ingen default-understrykning: den skär genom underlängderna i ord som
   "bakgrund" och ser oavsiktlig ut. Pilen bär i stället att det är en länk, så
   att det inte bara är färgen som skiljer den från brödtext. Understrykning
   först vid hover och tangentbordsfokus, med luft under baslinjen. */
.vidare {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  margin-top: 42px; padding-top: 24px;
  border-top: 1px solid var(--linje);
  font-size: 16px;
}
.vidare a {
  color: var(--rosa-djup); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 10px;
}
.vidare a::after { content: "\2192"; font-size: 0.95em; }
.vidare a:hover, .vidare a:focus-visible {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}

/* ---------- Priser ---------- */
.prislista { margin-top: 34px; border-top: 1px solid var(--linje); max-width: 640px; }
.prisrad {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 4px 18px; padding: 18px 0; border-bottom: 1px solid var(--linje);
}
.prisrad .vad { font-size: 17px; }
.prisrad .vad small { display: block; font-size: 14.5px; color: var(--grafit-mjuk); }
.prisrad .kr { font-family: var(--rubrik); font-size: 21px; white-space: nowrap; }

.anpassat {
  margin-top: 34px; background: var(--dis-djup);
  border-radius: 6px; padding: 28px 30px; max-width: 60ch;
}
.anpassat h3 { margin-bottom: 10px; }

/* ---------- Om ---------- */
.om { display: grid; gap: 34px; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 820px) { .om { grid-template-columns: 1fr 300px; gap: 52px; } }
.om-text { max-width: 58ch; }

/* Porträttet är bara 263 px brett i original. Därför max 240 px visningsbredd –
   större än så skalas det upp och blir mjukt. Be om en högupplöst version om
   bilden någon gång ska ligga större. */
.portratt {
  display: block; width: 100%; max-width: 240px; height: auto;
  border-radius: 6px; aspect-ratio: 3 / 4; object-fit: cover;
  margin-bottom: 26px;
}

.merit { padding: 26px 28px; background: var(--dis); border-radius: 6px; }
.merit h3 { font-family: var(--brod); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rosa-djup); margin-bottom: 14px; }
.merit ul { list-style: none; margin: 0; padding: 0; }
.merit li { padding: 9px 0 9px 20px; font-size: 15.5px; position: relative; line-height: 1.5; }
.merit li + li { border-top: 1px solid var(--linje); }
.merit li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 1px; background: var(--rosa-djup); }

/* ---------- Podd och Instagram ---------- */
.kanaler { display: grid; gap: 18px; margin-top: 32px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .kanaler { grid-template-columns: 1fr 1fr; } }
.kanal { background: var(--vit); border: 1px solid var(--linje); border-radius: 6px; padding: 24px 26px; }
.kanal h3 { margin-bottom: 8px; }
.kanal p { font-size: 15.5px; color: var(--grafit-mjuk); }
/* Samma behandling som .vidare – pil i stället för default-understrykning. */
.kanal a {
  display: inline-flex; align-items: baseline; gap: 10px; margin-top: 10px;
  color: var(--rosa-djup); text-decoration: none;
}
.kanal a::after { content: "\2192"; font-size: 0.95em; }
.kanal a:hover, .kanal a:focus-visible {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}

/* ---------- Boka ---------- */
.kontakt h2 { max-width: 20ch; }
.kontakt .mejl {
  font-family: var(--rubrik); font-size: clamp(19px, 3vw, 26px);
  display: inline-block; text-decoration: none;
  border-bottom: 2px solid var(--rosa-djup); word-break: break-word;
}

/* ---------- Bokningskalender ----------
   VIKTIGT: det här är en ATTRAPP. Ingenting skickas någonstans – ingen backend,
   ingen kalender, ingen mottagare. Raden .bok-demo överst i rutan är det enda som
   säger det till besökaren. TA INTE BORT DEN så länge bokningen inte är kopplad
   till något: utan den ser kalendern skarp ut, och någon kan tro sig ha bokat. */
.bokning { background: var(--vit); border: 1px solid var(--linje); border-radius: 8px; padding: 24px; margin-top: 30px; max-width: 560px; }
.bok-demo { font-size: 13.5px; line-height: 1.5; color: var(--rosa-djup); border-bottom: 1px solid var(--linje); padding-bottom: 14px; margin-bottom: 18px; }
.bok-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.bok-topp strong { font-family: var(--rubrik); font-weight: normal; font-size: 19px; }
.bok-nav { font: inherit; font-size: 19px; line-height: 1; background: none; border: 1px solid var(--linje); border-radius: 4px; width: 36px; height: 36px; cursor: pointer; color: inherit; flex: none; }
.bok-nav:hover:not(:disabled) { background: var(--dis); }
.bok-nav:disabled { opacity: 0.28; cursor: default; }
.bok-veckodagar, .bok-rutnat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bok-veckodagar { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grafit-mjuk); text-align: center; margin-bottom: 7px; }
.bok-dag { font: inherit; font-size: 15px; aspect-ratio: 1; background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: inherit; padding: 0; }
.bok-dag:hover:not([disabled]) { background: var(--dis); }
.bok-dag[disabled] { color: rgba(46, 42, 43, 0.26); cursor: default; }
.bok-dag[aria-pressed="true"] { background: var(--rosa-djup); color: var(--krita); }
.bok-avsnitt { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linje); }
.bok-avsnitt h3 { font-family: var(--brod); font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rosa-djup); margin-bottom: 13px; }
.bok-tider { display: flex; flex-wrap: wrap; gap: 8px; }
.bok-tid { font: inherit; font-size: 15px; padding: 9px 16px; border: 1px solid var(--linje); border-radius: 4px; background: none; cursor: pointer; color: inherit; }
.bok-tid:hover { background: var(--dis); }
.bok-tid[aria-pressed="true"] { background: var(--rosa-djup); color: var(--krita); border-color: var(--rosa-djup); }
.bok-falt { display: grid; gap: 13px; }
.bok-falt label { font-size: 14.5px; }
.bok-falt input { font: inherit; font-size: 16px; width: 100%; padding: 11px 13px; border: 1px solid var(--linje); border-radius: 4px; background: var(--krita); color: inherit; margin-top: 5px; }
.bok-skicka { font: inherit; font-size: 16px; padding: 13px 26px; border: 1px solid var(--grafit); border-radius: 3px; background: var(--grafit); color: var(--krita); cursor: pointer; justify-self: start; }
.bok-skicka:hover { background: #443d3f; }
.bok-svar { margin-top: 18px; padding: 16px 18px; background: var(--dis-djup); border-radius: 4px; font-size: 15px; line-height: 1.55; }
/* Sju kolumner på en telefon ger ~37 px breda dagrutor. Bredden går inte att
   öka, men höjden är fri – så de får bli avlånga i stället för för små att
   träffa med tummen. */
@media (max-width: 520px) {
  .bokning { padding: 18px 15px; }
  .bok-dag { aspect-ratio: auto; min-height: 44px; }
}

/* ---------- Sidfot ---------- */
.fot { background: var(--dis-djup); padding: 46px 0 40px; font-size: 14.5px; color: var(--grafit-mjuk); }
.fot-grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .fot-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; } }
.fot h3 { font-family: var(--brod); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rosa-djup); margin-bottom: 11px; }
.fot ul { list-style: none; margin: 0; padding: 0; }
.fot li { margin-bottom: 7px; }
.fot a { text-decoration: none; }
.fot-slut { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--linje); display: flex; flex-wrap: wrap; gap: 5px 22px; font-size: 13.5px; }