/* Slipmästarna — kompletterande stilar.
   Allt som går att göra i theme.json ligger där. Här ligger bara sådant
   blockredigeraren inte täcker: formulär, tabellramar, hover-states på kort. */

:root {
  --sm-linje: 0.5px solid rgba(0, 0, 0, 0.10);
  --sm-linje-stark: 0.5px solid rgba(0, 0, 0, 0.18);
  --sm-radie: 8px;
  --sm-radie-stor: 12px;
}

/* ---- Hoppa till innehåll ---- */
.sm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: #0E0E0E; color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--sm-radie) 0; font-size: .9375rem;
}
.sm-skip:focus { left: 0; }

/* ---- Kort ---- */
.sm-kort {
  background: var(--wp--preset--color--vit);
  border: var(--sm-linje);
  border-radius: var(--sm-radie-stor);
  transition: border-color .18s ease;
}
.sm-kort:hover { border-color: rgba(227, 100, 58, .55); }
.sm-kort--markerat { border: 0.5px solid var(--wp--preset--color--primar); }

/* Etikett ovanför kortrubrik */
.sm-etikett {
  display: inline-block;
  font-size: .75rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wp--preset--color--primar);
}

/* ---- Sifferstegen ---- */
.sm-steg-nr {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--wp--preset--color--primar); color: #fff;
  font-size: .9375rem; font-weight: 500; line-height: 1;
}

/* ---- Prisrad ---- */
.sm-pris { font-size: 2.25rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.sm-pris--text { font-size: 1.5rem; }
.sm-pris small { font-size: .9375rem; font-weight: 400; color: var(--wp--preset--color--gra-600); letter-spacing: 0; }

/* ---- Tabeller ---- */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td {
  border: none; border-bottom: var(--sm-linje);
  padding: .85rem .5rem; text-align: left; vertical-align: top;
}
.wp-block-table th { font-weight: 500; color: var(--wp--preset--color--gra-600); font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; }
.wp-block-table tr:last-child td { border-bottom: none; }

/* ---- Detaljer / FAQ-dragspel ---- */
.wp-block-details {
  border-bottom: var(--sm-linje);
  padding: 1.1rem 0;
}
.wp-block-details summary {
  cursor: pointer; font-weight: 500; font-size: 1.0625rem;
  letter-spacing: -.012em; list-style: none; position: relative; padding-right: 2rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  color: var(--wp--preset--color--primar); font-weight: 400; font-size: 1.375rem; line-height: 1;
}
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > :not(summary) { margin-top: .75rem; color: var(--wp--preset--color--gra-600); }

/* ---- Bokningsformulär ---- */
.sm-form { display: grid; gap: 1.1rem; }
.sm-form__rad { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .sm-form__rad--tva { grid-template-columns: 1fr 1fr; } }
.sm-form label { display: block; font-size: .8125rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--gra-600); margin-bottom: .4rem; }
.sm-form input[type="text"],
.sm-form input[type="email"],
.sm-form input[type="tel"],
.sm-form select,
.sm-form textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 1rem; color: var(--wp--preset--color--svart);
  background: var(--wp--preset--color--vit);
  border: var(--sm-linje-stark); border-radius: var(--sm-radie);
  padding: .7rem .85rem; -webkit-appearance: none; appearance: none;
}
.sm-form select { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A4A4A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.25rem; }
.sm-form textarea { min-height: 110px; resize: vertical; }
.sm-form input:focus, .sm-form select:focus, .sm-form textarea:focus {
  outline: none; border-color: var(--wp--preset--color--primar);
  box-shadow: 0 0 0 3px rgba(227, 100, 58, .12);
}
.sm-form ::placeholder { color: var(--wp--preset--color--gra-400); }
.sm-form__hjalp { font-size: .8125rem; color: var(--wp--preset--color--gra-600); margin: .3rem 0 0; }
.sm-form__knapp {
  background: var(--wp--preset--color--primar); color: #fff; border: none;
  border-radius: var(--sm-radie); padding: .85rem 1.75rem;
  font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer;
  justify-self: start; transition: background .15s ease;
}
.sm-form__knapp:hover { background: var(--wp--preset--color--primar-mork); }
.sm-form__samtycke { display: flex; gap: .65rem; align-items: flex-start; font-size: .8125rem; color: var(--wp--preset--color--gra-600); }
.sm-form__samtycke label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .8125rem; margin: 0; }
.sm-form__honung { position: absolute; left: -9999px; }

.sm-notis { border-radius: var(--sm-radie); padding: 1rem 1.15rem; font-size: .9375rem; margin-bottom: 1.5rem; }
.sm-notis--ok  { background: rgba(59, 109, 17, .08);  border: 0.5px solid rgba(59, 109, 17, .35); }
.sm-notis--fel { background: rgba(163, 45, 45, .07);  border: 0.5px solid rgba(163, 45, 45, .35); }

/* ---- Sidhuvud ---- */
.sm-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 243, 240, .88);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: var(--sm-linje);
}
.sm-header .wp-block-navigation { font-size: .9375rem; }
.sm-header .wp-block-navigation a:hover { text-decoration: none; color: var(--wp--preset--color--primar); }
.sm-header .wp-block-navigation .current-menu-item a { color: var(--wp--preset--color--primar); }

/* ---- Sidfot ---- */
.sm-footer a { color: var(--wp--preset--color--svart); }
.sm-footer a:hover { color: var(--wp--preset--color--primar); text-decoration: none; }
.sm-footer .wp-block-list { list-style: none; padding-left: 0; }
.sm-footer .wp-block-list li { margin-bottom: .55rem; font-size: .9375rem; }

/* ---- Innehållstypografi ---- */
.sm-ingress { font-size: 1.25rem; line-height: 1.5; color: var(--wp--preset--color--gra-600); letter-spacing: -.012em; }
.sm-svar { font-size: 1.125rem; line-height: 1.55; }

/* Bilder */
.wp-block-image img { border-radius: var(--sm-radie-stor); }

/* Ingen skugga någonstans — varumärkesregel */
* { box-shadow: none; }
.sm-form input:focus, .sm-form select:focus, .sm-form textarea:focus { box-shadow: 0 0 0 3px rgba(227, 100, 58, .12); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Svenska sammansatta ord ---- */
/* WordPress sätter overflow-wrap: break-word på rubriker, vilket bryter
   "underhållsslipning" mitt i ordet. Avstavning ger ett korrekt bindestreck
   i stället. Kräver att webbplatsens språk är svenska. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  /* Bryt hellre med bindestreck än mitt i ordet. Långa sammansatta ord i
     rubriker är märkta med mjuka bindestreck (­) där de får delas. */
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Kort i en kolumnrad ska bli lika höga */
.wp-block-columns > .wp-block-column > .is-style-sm-kort,
.wp-block-columns > .wp-block-column > .is-style-sm-kort-markerat {
  height: 100%;
  box-sizing: border-box;
}

/* Kortrubriker: lite mindre, så att långa sammansatta ord får plats */
.is-style-sm-kort > .wp-block-heading,
.is-style-sm-kort-markerat > .wp-block-heading {
  font-size: 1.5rem;
  letter-spacing: -.024em;
}

/* Prisraden i tjänstekorten */
.sm-pris { margin-top: .75rem; margin-bottom: 1.25rem; }
.sm-etikett + .wp-block-heading { margin-top: .35rem; }

/* Sidhuvudet på små skärmar */
@media (max-width: 600px) {
  .sm-header .wp-block-buttons .wp-block-button__link { padding-left: 1rem; padding-right: 1rem; }
}

/* ---- Logotyp i sidhuvudet ---- */
.sm-logo { display: block; line-height: 0; }
.sm-logo img {
  display: block;
  width: 232px;
  height: auto;
  max-width: 100%;
}
@media (max-width: 781px) {
  .sm-logo img { width: 180px; }
}
@media (max-width: 400px) {
  .sm-logo img { width: 150px; }
}

/* Etiketter i Space Mono enligt varumärkesmanualen */
.sm-etikett {
  font-family: var(--wp--preset--font-family--space-mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primar);
}

/* Priser i Space Mono — "data, inte löften". Prefix som "från" hålls
   ihop med talet så att raden inte bryts mitt i prisuppgiften. */
.sm-pris {
  font-family: var(--wp--preset--font-family--space-mono);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.sm-pris small {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 300;
  white-space: nowrap;
}
/* Text-priser ("Offert") är ord, inte data — sätts i Outfit. */
.sm-pris--text {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -.02em;
}
.sm-steg-nr {
  font-family: var(--wp--preset--font-family--space-mono);
  font-weight: 700;
}
.sm-logo--footer img { width: 200px; margin-bottom: .35rem; }

/* ---- Omdömen ---- */
.sm-betyg { color: var(--wp--preset--color--primar); letter-spacing: .12em; font-size: 1rem; line-height: 1; }