/*
Theme Name: Nilssons
Theme URI: https://nilssonsputs.se
Author: Hatten av Kommunikation
Description: Tema för Nilssons Fönsterputs & Service. Byggt med temaverkstad (run 1, 2026-10-24) från designunderlaget i webbsidor/nilssonsputs/design/.
Requires at least: 6.6
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nilssons
*/

/*
Designunderlaget har redan ett eget system (CSS-variabler, få klasser), så
det följer med i stort sett ordagrant (SKILL.md Wave 7). Klasserna här är
klas-* (organismer/molekyler i block-patterns.md) plus quiz-/formulär-
klasserna från designen, som används inne i html-blocken.
*/

:root {
  --kram: #f7f0e9;
  --kram-mork: #efe4d8;
  --marin: #272251;
  --marin-mjuk: #4a4573;
  --sand: #c2a990;
  --vit: #fffdfa;
  --linje: #e2d5c6;
  --radie: 14px;
}

/* === Bas === */
body { background: var(--kram); color: var(--marin); hyphens: manual; -webkit-hyphens: manual; }
h1, h2, h3, h4, h5, h6, .wp-block-heading { color: var(--marin); text-wrap: balance; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a { text-decoration-color: var(--sand); text-underline-offset: 3px; }
/* Marginaler som i designen (blockGap är 0 i theme.json): rubriker 0 0 .5em,
   stycken 0 0 1em. Kolumnrader har egna uttryckliga mellanrum. */
h1, h2, h3, .wp-block-heading { margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.wp-block-image { margin: 0; }
.wp-block-post-content .wp-block-columns { gap: 22px; margin: 0; }

/* Sektionerna ligger kant i kant, utan blockGap emellan. */
.wp-block-post-content > .alignfull { margin-block: 0; }
.wp-site-blocks > * { margin-block: 0; }

/* === Organism: sektion (.klas-section) === */
.klas-section { padding-top: 88px; padding-bottom: 88px; }
.klas-section--vit { background: var(--vit); }
.klas-section--marin { background: var(--marin); color: var(--kram); }
.klas-section--marin .wp-block-heading { color: var(--kram); }
.klas-section--marin a { color: var(--kram); }
.klas-section--efter-topp { padding-top: 24px; }
.klas-section--smal > p { max-width: 720px; }

/* === Molekyl: sektionshuvud (.klas-sektion-huvud) === */
.klas-sektion-huvud { margin-bottom: 44px; }
.klas-sektion-huvud > * { max-width: 640px; }

/* Smalare text i en constrained-sektion ska ligga i innehållskolumnens
   vänsterkant, inte centreras: WordPress ger barnen margin auto. */
.klas-hero > p.has-ingress-font-size,
.klas-section--smal > p {
  margin-left: max(0px, calc((100% - 1080px) / 2)) !important;
  margin-right: auto !important;
}
.klas-sektion-huvud > p { color: var(--marin-mjuk); font-size: 1.1rem; }

/* === Knapp, konturvariant (is-style-outline) === */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--marin);
  border: 2px solid var(--marin);
  padding: .85em 1.5em;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--marin); color: var(--vit); }
.klas-section--marin .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--kram); border-color: var(--kram); }
.wp-block-buttons { gap: 12px; margin-top: 28px; }

/* === Organism: Hero (.klas-hero) — vänsterställd, som designen === */
.klas-hero { text-align: left; padding-top: 64px; padding-bottom: 24px; }
.klas-hero .has-ingress-font-size { max-width: 36em; }
.klas-hero--media { padding-top: 72px; padding-bottom: 88px; }
.klas-hero--media .wp-block-columns { gap: 56px; }
.klas-hero--media .has-ingress-font-size { max-width: 34em; }
.klas-hero-bild { position: relative; }
.klas-hero-bild .wp-block-image { margin: 0; }
.klas-hero-bild img { border-radius: var(--radie); aspect-ratio: 4/5; object-fit: cover; width: 100%; display: block; }
.klas-lapp {
  position: absolute; left: -28px; bottom: 32px;
  background: var(--vit); border-radius: var(--radie);
  padding: 16px 20px; box-shadow: 0 12px 30px rgba(39,34,81,.12); max-width: 250px;
}
.klas-lapp p { margin: 0; font-size: .92rem; color: var(--marin-mjuk); }
.klas-lapp p.klas-lapp-pris { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.6rem; line-height: 1.1; color: var(--marin); }

/* === Organism: Kort-grid (.klas-card-grid) + boxat kort (.klas-glass-card) === */
.klas-card-grid .wp-block-columns { gap: 22px; margin-bottom: 22px; }
.klas-card-grid .wp-block-columns:last-of-type { margin-bottom: 0; }
.klas-glass-card {
  background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie);
  padding: 28px; height: 100%; box-sizing: border-box;
}
.klas-section--vit .klas-glass-card { background: var(--kram); }
.klas-glass-card .wp-block-heading { margin-bottom: .35em; }
.klas-glass-card p:last-child { margin-bottom: 0; }
.klas-ikon { width: 44px; height: 44px; color: var(--marin); display: block; margin-bottom: 18px; }
.klas-card-grid .wp-block-column { display: flex; flex-direction: column; }

/* === Organism: Bild + text (.klas-duo) === */
.wp-block-columns.klas-duo { gap: 56px; }
.klas-duo .wp-block-image { margin: 0; }
.klas-duo .wp-block-image img { border-radius: var(--radie); width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.klas-duo--hog .wp-block-image img { aspect-ratio: 4/5; object-position: center top; }
.klas-duo .klas-mellanrubrik { margin-top: 40px; }

/* === Atom: Chip + rad (.klas-chip, .klas-chip-row) === */
.klas-chip-row { gap: 10px; margin-top: 22px; }
.klas-chip {
  margin: 0; border: 1px solid rgba(247,240,233,.4); border-radius: 999px;
  padding: .45em 1.1em; font-weight: 600; line-height: 1.4;
}

/* === Molekyl: Pristabell (.klas-pristabell, .klas-price-table) === */
.klas-pristabell { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: 28px; height: 100%; box-sizing: border-box; }
.klas-pristabell .wp-block-heading { margin: 0 0 .6em; }
.klas-price-table { margin: 0; }
.klas-price-table table { width: 100%; border-collapse: collapse; }
.klas-price-table td { border: 0; border-top: 1px solid var(--linje); padding: 12px 0; }
.klas-price-table td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.klas-finstilt { font-size: .92rem; color: var(--marin-mjuk); margin-top: 18px; }

/* === Atom: Lista, faktavariant (.klas-fact-list) === */
.klas-fact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.klas-fact-list li { background: var(--vit); border-left: 4px solid var(--sand); border-radius: 0 var(--radie) var(--radie) 0; padding: 16px 20px; }
.klas-section--vit .klas-fact-list li { background: var(--kram); }

/* === Organism: CTA-banner (.klas-cta-banner) === */
.klas-cta-banner {
  background: var(--kram-mork); color: var(--marin); border: 1px solid var(--linje);
  border-radius: 22px; padding: 56px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.klas-cta-banner .wp-block-heading { margin: 0 0 .25em; }
.klas-cta-banner p { margin: 0; color: var(--marin-mjuk); }
.klas-cta-banner .wp-block-buttons { margin: 0; }
.klas-cta-banner > * { margin-block: 0 !important; }

/* === Sidhuvud (.klas-site-header) === */
.klas-site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247,240,233,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linje);
}
.klas-site-header > .wp-block-group { min-height: 76px; gap: 24px; }
.klas-logo { margin: 0; }
.klas-logo img { height: 56px; width: auto; display: block; }
.klas-site-header .klas-site-nav { margin-left: auto; font-weight: 600; font-size: .97rem; gap: 26px; }
.klas-site-nav a { text-decoration: none; }
.klas-site-nav .current-menu-item a, .klas-site-nav a:hover { text-decoration: underline; text-decoration-color: var(--sand); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.klas-site-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--kram); color: var(--marin); }
.klas-header-ring { margin: 0; }
.klas-header-ring .wp-block-button__link { padding: .65em 1.2em; font-size: .95rem; white-space: nowrap; }

/* === Sidfot (.klas-site-footer) === */
.klas-site-footer { background: var(--marin); color: #d9d3e6; padding-top: 64px; padding-bottom: 96px; font-size: .97rem; }
.klas-site-footer .wp-block-columns { gap: 32px; }
.klas-site-footer .wp-block-heading { color: var(--kram); font-family: var(--wp--preset--font-family--body); font-size: .95rem; font-weight: 700; margin-bottom: .8em; }
.klas-site-footer a { color: var(--kram); text-decoration: none; }
.klas-site-footer a:hover { text-decoration: underline; }
.klas-site-footer p { margin-block: 0 .4em; }
.klas-site-footer .klas-slogan { font-family: var(--wp--preset--font-family--heading); font-size: 1.6rem; color: var(--kram); line-height: 1.2; margin-bottom: .6em; }

/* === Ringknapp i mobilen (.klas-ring) === */
.wp-block-buttons.klas-ring { display: none; }

/* === Formulären (html-block, markup ordagrant ur designen) === */
.quiz{scroll-margin-top:96px;background:var(--vit);border:1px solid var(--linje);border-radius:22px;padding:40px;max-width:820px;margin:0 auto}
.quiz-steg{display:none}
.quiz-steg.aktiv{display:block;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.quiz-progress{display:flex;gap:6px;margin-bottom:28px}
.quiz-progress i{flex:1;height:5px;border-radius:5px;background:var(--linje)}
.quiz-progress i.klar{background:var(--marin)}
.quiz h2:focus{outline:none}
.quiz h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 .5em}
.quiz h3{font-size:1.45rem;margin:0 0 .3em}
.quiz p{margin:0 0 1em}
.val{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:24px 0}
.val label{position:relative;cursor:pointer}
.val input{position:absolute;opacity:0;pointer-events:none}
.val .ruta{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;border:2px solid var(--linje);border-radius:var(--radie);padding:22px 12px;background:var(--kram);font-weight:600;transition:border-color .15s,background .15s;height:100%;box-sizing:border-box}
.val .ruta svg{width:64px;height:64px;color:var(--marin)}
.val .ruta small{font-weight:400;color:var(--marin-mjuk);font-size:.85rem}
.val input:checked + .ruta{border-color:var(--marin);background:#ecebf4}
.val input:focus-visible + .ruta{outline:3px solid var(--sand);outline-offset:2px}
.val input:disabled + .ruta{opacity:.4;cursor:not-allowed}
.falt{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:16px}
.falt label{font-weight:600;font-size:.95rem}
.falt input,.falt textarea{width:100%;min-width:0;box-sizing:border-box;font:inherit;color:var(--marin);background:var(--kram);border:1px solid var(--linje);border-radius:10px;padding:.8em 1em}
.falt input:focus,.falt textarea:focus{outline:2px solid var(--marin);outline-offset:1px;border-color:transparent}
.falt input[type=file]{padding:.6em}
.falt-rad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}
.quiz-nav .tillbaka{background:none;border:none;font:600 1rem var(--wp--preset--font-family--body);color:var(--marin);cursor:pointer;padding:.6em 0}
.quiz .knapp{display:inline-block;background:var(--marin);color:var(--vit);text-decoration:none;font:600 1rem var(--wp--preset--font-family--body);padding:.85em 1.5em;border-radius:999px;border:2px solid var(--marin);cursor:pointer}
.quiz .knapp:hover{background:#17133a;border-color:#17133a}
.riktpris{background:var(--kram);border-radius:var(--radie);padding:24px;margin:20px 0;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px}
.riktpris strong{font-family:var(--wp--preset--font-family--heading);font-size:2.4rem;line-height:1}
.riktpris span{color:var(--marin-mjuk);font-size:.95rem}
.sammanfattning{margin:0;padding:0;list-style:none;border-top:1px solid var(--linje)}
.sammanfattning li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--linje)}
.sammanfattning li span:first-child{color:var(--marin-mjuk)}
.finstilt{font-size:.92rem;color:var(--marin-mjuk)}
.tack{text-align:center;padding:24px 0}
.quiz .tack{border-top:1px solid var(--linje);margin-top:24px}
.formular-del{margin-bottom:12px}
.formular-del .val{margin-top:12px}
.formular-fel{color:var(--marin);font-weight:600;background:var(--kram-mork);border-radius:10px;padding:.6em 1em}
.kryss{display:flex;gap:10px;align-items:center;font-weight:600;margin:8px 0 0;cursor:pointer}
.kryss input{width:20px;height:20px;accent-color:var(--marin)}
.klas-forfragan { scroll-margin-top: 76px; }

/* === Mobil === */
@media (max-width: 900px) {
  .wp-block-buttons.klas-header-ring { display: none; }
  .klas-hero--media { padding-top: 40px; padding-bottom: 64px; }
  .klas-hero--media .wp-block-columns, .wp-block-columns.klas-duo { gap: 32px; }
  .klas-hero-bild .klas-lapp { left: 16px; }
  .klas-section { padding-top: 64px; padding-bottom: 64px; }
  .klas-section--efter-topp { padding-top: 16px; }
  .klas-cta-banner { padding: 36px 28px; }
  .quiz { padding: 26px 20px; }
  .falt-rad { grid-template-columns: minmax(0,1fr); }
  .wp-block-buttons.klas-ring { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; margin: 0; justify-content: center; }
  .klas-ring .wp-block-button { width: 100%; }
  .klas-ring .wp-block-button__link {
    width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; gap: 10px;
    font-weight: 700; padding: 15px; box-shadow: 0 10px 24px rgba(39,34,81,.35);
  }
  .klas-ring .wp-block-button__link::before {
    content: ""; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("assets/telefon.svg") center/contain no-repeat; mask: url("assets/telefon.svg") center/contain no-repeat;
  }
}
/* Kolumnerna staplas under 782px (WordPress standard). Omvänd duo: bild till vänster bara på dator. */
@media (min-width: 782px) {
  .klas-duo--omvand > .wp-block-column:first-child { order: 2; }
}
@media (max-width: 781px) {
  .klas-site-footer .wp-block-columns { gap: 24px; }
}
/* Långa svenska ord ("Bostadsrättsförening") får avstavas bara på de minsta
   skärmarna, som nödutgång (LARDOMAR § 2). */
@media (max-width: 360px) {
  h1, h2, .wp-block-heading { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 560px) {
  .klas-logo img { height: 44px; }
  /* Kort med ikon: ikonen bredvid rubriken, annars blir korten skärmhöga (LARDOMAR § 2). */
  .klas-glass-card:has(> .klas-ikon) { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 22px; }
  .klas-glass-card > .klas-ikon { width: 36px; height: 36px; margin: 0; }
  .klas-glass-card:has(> .klas-ikon) > .wp-block-heading { margin: 0; }
  .klas-glass-card:has(> .klas-ikon) > p { grid-column: 1 / -1; margin-top: .6em; }
}