/* =========================================================
   Urfokusfoto – stil
   Färger, typografi och sektionsstilar för den nya designen.
   Ändra värdena högst upp om du vill justera hela sajten på en gång.
   ========================================================= */

:root{
  --uf-sand:#F7F2EA;
  --uf-sand2:#EFE6D9;
  --uf-ink:#2C2521;
  --uf-ink-soft:#5A4F47;
  --uf-clay:#B0745A;
  --uf-line:rgba(44,37,33,.14);
  --uf-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --uf-sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* ---------- Bas ---------- */
body{
  background:var(--uf-sand);
  color:var(--uf-ink);
  font-family:var(--uf-sans);
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.uf-serif{
  font-family:var(--uf-serif);
  font-weight:400;
  line-height:1.12;
}
h1{font-size:clamp(2.8rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:1.5rem}
p{max-width:62ch}
.has-text-align-center p,
.uf-center p{margin-left:auto;margin-right:auto}

/* Liten versal etikett ovanför rubriker */
.uf-eyebrow{
  font-size:.72rem !important;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--uf-clay);
  margin-bottom:1rem;
  max-width:none;
}

/* Ingress */
.uf-lead{font-size:1.12rem;color:var(--uf-ink-soft)}

/* Sektionsluft */
.uf-section{padding-block:clamp(70px,10vw,130px) !important}

/* Rubriker ska inte hamna bakom en fast meny vid ankarlänkar */
:target,[id]{scroll-margin-top:96px}

/* ---------- Knappar ---------- */
.wp-block-button__link{
  border-radius:999px !important;
  padding:.95rem 1.9rem !important;
  font-family:var(--uf-sans);
  font-size:.82rem !important;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  background-color:var(--uf-ink);
  color:var(--uf-sand);
  border:1px solid var(--uf-ink);
  transition:.25s ease;
}
.wp-block-button__link:hover{
  background-color:var(--uf-clay) !important;
  border-color:var(--uf-clay) !important;
  color:#fff !important;
  transform:translateY(-2px);
}
.is-style-outline .wp-block-button__link,
.uf-btn-ghost .wp-block-button__link{
  background-color:transparent;
  color:var(--uf-ink);
  border-color:var(--uf-ink);
}
/* Ljus variant för mörka sektioner */
.uf-dark .wp-block-button__link,
.uf-btn-light .wp-block-button__link{
  background-color:transparent;
  color:#fff;
  border-color:rgba(247,242,234,.6);
}
.uf-dark .wp-block-button__link:hover,
.uf-btn-light .wp-block-button__link:hover{
  background-color:#fff !important;
  color:var(--uf-ink) !important;
  border-color:#fff !important;
}

/* ---------- Hero ---------- */
.uf-hero{min-height:100svh !important}
.uf-hero h1{color:#fff;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.uf-hero p{color:rgba(255,255,255,.92)}
.uf-hero .uf-eyebrow{color:rgba(255,255,255,.85)}
.uf-hero .wp-block-cover__inner-container{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:inherit;padding-bottom:clamp(50px,8vh,110px);
}

/* ---------- Faktaband ---------- */
.uf-band{
  background:var(--uf-ink) !important;
  color:#EFE6D9;
  padding:34px 0 !important;
  text-align:center;
  gap:24px;
}
.uf-band p{margin:0;max-width:none}
.uf-band span,
.uf-band em{
  font-style:normal;
  display:block;
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.85;
}
.uf-band strong{
  font-family:var(--uf-serif);
  font-weight:400;
  font-size:1.35rem;
  color:#fff;
  display:block;
  margin-top:4px;
}

/* ---------- Mörka sektioner ---------- */
.uf-dark{background:var(--uf-ink) !important;color:var(--uf-sand)}
.uf-dark h1,.uf-dark h2,.uf-dark h3{color:#fff}
.uf-dark p,.uf-dark li{color:rgba(247,242,234,.85)}
.uf-dark a{color:#fff}

/* Pilpunktlista i mörk sektion */
.uf-arrows{list-style:none;padding-left:0}
.uf-arrows li{padding:.55rem 0 .55rem 2rem;position:relative}
.uf-arrows li:before{content:"\2192";position:absolute;left:0;color:var(--uf-clay)}

/* Ram runt textruta i mörk sektion */
.uf-boxed{
  border:1px solid rgba(247,242,234,.28);
  background:rgba(0,0,0,.18);
  border-radius:3px;
  padding:34px !important;
}

/* ---------- Tjänstekort ---------- */
.uf-cards{gap:26px}
.uf-cards .wp-block-column{
  background:var(--uf-sand);
  border:1px solid var(--uf-line);
  border-radius:3px;
  overflow:hidden;
  padding:0 0 34px !important;
  transition:.3s ease;
}
.uf-cards .wp-block-column:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px -30px rgba(44,37,33,.55);
}
.uf-cards figure{margin:0 0 26px !important}
.uf-cards figure img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s ease;
}
.uf-cards .wp-block-column:hover figure img{transform:scale(1.06)}
.uf-cards h3,
.uf-cards p,
.uf-cards ul,
.uf-cards .wp-block-buttons{padding-inline:28px}
.uf-cards h3{margin-bottom:.3em}
.uf-cards ul{list-style:none;padding-left:28px;font-size:.95rem;color:var(--uf-ink-soft)}
.uf-cards ul li{padding:.3rem 0 .3rem 1.4rem;position:relative}
.uf-cards ul li:before{
  content:"";position:absolute;left:0;top:1em;width:8px;height:1px;background:var(--uf-clay);
}
.uf-price{
  font-family:var(--uf-serif);
  font-size:1.35rem;
  color:var(--uf-clay);
}

/* ---------- Löften ---------- */
.uf-promise{gap:26px}
.uf-promise .wp-block-column{
  background:var(--uf-sand2);
  border-top:2px solid var(--uf-clay);
  border-radius:3px;
  padding:34px 32px !important;
}
.uf-promise p{font-size:.98rem;color:var(--uf-ink-soft)}

/* ---------- Steg ---------- */
.uf-steps{gap:40px;counter-reset:ufstep}
.uf-steps .wp-block-column{counter-increment:ufstep}
.uf-steps .wp-block-column:before{
  content:"0" counter(ufstep);
  font-family:var(--uf-serif);
  font-size:2.6rem;
  color:var(--uf-clay);
  display:block;
  line-height:1;
  margin-bottom:.3rem;
}
.uf-steps p{font-size:.97rem;color:var(--uf-ink-soft)}

/* ---------- Galleri ---------- */
.wp-block-gallery img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.wp-block-gallery figure:hover img{transform:scale(1.05)}
.uf-insta img{aspect-ratio:1;object-fit:cover;width:100%}

/* ---------- Vanliga frågor ---------- */
.wp-block-details{
  border-bottom:1px solid var(--uf-line);
  padding:20px 0;
}
.wp-block-details summary{
  font-family:var(--uf-serif);
  font-size:1.3rem;
  cursor:pointer;
  list-style:none;
}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary:after{content:"+";float:right;color:var(--uf-clay);font-size:1.4rem;line-height:1}
.wp-block-details[open] summary:after{content:"\2013"}
.wp-block-details p{color:var(--uf-ink-soft);font-size:.98rem}

/* ---------- Formulär ---------- */
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=url],select,textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--uf-line);
  border-radius:2px;
  background:transparent;
  font-family:inherit;
  font-size:1rem;
}
.uf-dark input,.uf-dark select,.uf-dark textarea{
  border-color:rgba(247,242,234,.3);
  color:#fff;
}
.uf-dark label{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,242,234,.7);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--uf-clay)}
.uf-dark input::placeholder,.uf-dark textarea::placeholder{color:rgba(247,242,234,.45)}

/* ---------- Meny som inte krånglar vid scroll ---------- */
/* OBS: lägg aldrig backdrop-filter direkt på headern om temat har en
   mobilmeny med position:fixed – då stängs menyn in i headern och syns
   bara som en smal remsa. Därför ligger bakgrunden i ett pseudo-element. */
header.uf-scrolled{position:relative}
header.uf-scrolled:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(247,242,234,.96);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--uf-line);
}

/* ---------- Mobil ---------- */
@media(max-width:781px){
  h1{font-size:2.6rem}
  .uf-band .wp-block-column{margin-bottom:16px}
  .uf-cards .wp-block-column{margin-bottom:20px}
  .uf-boxed{padding:26px !important}
}

/* ---------- Dölj sidtiteln på startsidan ---------- */
.home .wp-block-post-title,
.home .entry-title,
.home .page-title{ display:none !important; }
.home .wp-block-group.has-tertiary-background-color:has(.wp-block-post-title){ display:none !important; }

/* ---------- Tjänstekort: lika höga kolumner, lika stora knappar ---------- */
.uf-cards{ align-items:stretch !important; }
.uf-cards .wp-block-column{
  display:flex;
  flex-direction:column;
}
/* Bilden fyller rutan utan att beskära mitt i motivet */
.uf-cards figure{ margin:0 0 26px !important; }
.uf-cards figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 30%;
  display:block;
}
/* Knapparna hamnar alltid i nederkant och får samma bredd */
.uf-cards .wp-block-buttons{
  margin-top:auto !important;
  padding-top:1.4rem;
}
.uf-cards .wp-block-button{ width:100%; }
.uf-cards .wp-block-button__link{
  display:block;
  width:100%;
  text-align:center;
  padding-inline:1rem !important;
}

/* ---------- Tillbaka till toppen ---------- */
.uf-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border:1px solid rgba(247,242,234,.25);
  border-radius:50%;
  background:var(--uf-ink);
  color:var(--uf-sand);
  font-size:1.2rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .25s ease;
  z-index:80;
  box-shadow:0 10px 30px -12px rgba(44,37,33,.6);
}
.uf-top.show{ opacity:1; transform:none; pointer-events:auto; }
.uf-top:hover{ background:var(--uf-clay); color:#fff; }
.uf-top:focus-visible{ outline:2px solid var(--uf-clay); outline-offset:3px; }
@media(max-width:781px){
  .uf-top{ right:16px; bottom:16px; width:44px; height:44px; }
}

/* ---------- Galleri-sidan ---------- */
.uf-gallery-page .wp-block-gallery{ gap:16px; }
.uf-gallery-page .wp-block-gallery figure{ border-radius:2px; overflow:hidden; }

/* ---------- Knapptext på en rad i tjänstekorten ---------- */
.uf-cards .wp-block-button__link{ white-space:nowrap; letter-spacing:.12em; }

/* ---------- Galleri-sidan (sid-ID 14) ---------- */
/* Galleriet bryter ut ur den smala textspalten och blir en bred, jämn rutnätsvy */
body.page-id-14 .wp-block-gallery{
  gap:14px !important;
  margin-top:48px;
}
body.page-id-14 .wp-block-gallery .wp-block-image{
  flex-grow:0 !important;
  flex-basis:calc(33.333% - 10px) !important;
  margin:0 !important;
}
body.page-id-14 .wp-block-gallery .wp-block-image img{
  width:100%;
  height:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:2px;
}
/* Rubrik och ingress centreras som på startsidan */
body.page-id-14 .wp-block-post-content > h2,
body.page-id-14 .wp-block-post-content h2{ text-align:center; }
body.page-id-14 .wp-block-post-content h2 + p{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  font-size:1.12rem;
  color:var(--uf-ink-soft);
}
/* Knappen under galleriet centreras */
body.page-id-14 .wp-block-buttons{
  justify-content:center;
  display:flex;
  margin-top:48px;
}
@media(max-width:781px){
  body.page-id-14 .wp-block-gallery .wp-block-image{
    flex-basis:calc(50% - 7px) !important;
  }
}