/* =======================================================
   HANDVERKER — GLOBAL THEME
   Robust, ryddig, tydelig. Oransje aksent.
   Spiller fint med oppdatert base.html (glass-header/foot).
   ======================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Base surfaces */
  --bg:#f6f7f9;        /* sidebakgrunn (off-white) */
  --card:#ffffff;      /* kort/panel */
  --elev:#eef1f5;      /* inputs/raised */
  --line:rgba(2,6,23,.12);

  /* Typography */
  --text:#0f172a;      /* slate-900 */
  --muted:#475569;     /* slate-600 */

  /* Brand (Signal Orange) */
  --accent:#f97316;    /* orange-500 */
  --accent-2:#fdba74;  /* orange-300 */

  /* Radii & shadow */
  --r-xs:8px; --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);

  /* Spacing scale */
  --space-1:6px; --space-2:10px; --space-3:14px;
  --space-4:18px; --space-5:24px; --space-6:32px; --space-7:42px;

  /* Layout helpers */
  --section-y: clamp(32px, 6vw, 72px);
  --grid-gap: 14px;
}

/* ---------- Base reset ---------- */
*{ box-sizing: border-box }
html, body{
  margin:0; padding:0; overflow-x:hidden;
  background:var(--bg); color:var(--text);
  scroll-behavior:smooth;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:none }
hr{ border:0; border-top:1px solid var(--line); margin:20px 0 }
.container{ max-width:1200px; margin:0 auto; padding:0 16px }
.container.narrow{ max-width:860px }

/* Accessible focus */
:where(a,button,input,select,textarea,.btn,.chip):focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 70%, #fff 30%);
  outline-offset:2px; border-radius:10px;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
}

/* ---------- Typography ---------- */
.brand__title{ font-family:"Outfit", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight:800; letter-spacing:.2px }
h1,.h1{ font-weight:800; letter-spacing:.2px; line-height:1.08; font-size: clamp(30px, 5vw, 52px); margin:0 0 var(--space-2) }
h2,.h2{ font-weight:800; letter-spacing:.2px; line-height:1.1;  font-size: clamp(22px, 3.2vw, 34px); margin:0 0 var(--space-2) }
h3,.h3{ font-weight:700; line-height:1.15; font-size: clamp(18px, 2.2vw, 22px); margin:0 0 var(--space-2) }
.lead{ color:var(--muted); font-size: clamp(16px, 1.8vw, 18px) }
.text-muted,.muted{ color:var(--muted) }
h1,h2,h3,.brand__title{ text-wrap: balance }

/* ---------- Buttons (Bootstrap-safe) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.05rem; border-radius:var(--r-md); border:1px solid var(--line);
  font-weight:700; letter-spacing:.2px; cursor:pointer;
  background:var(--card); color:var(--text);
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.btn:hover{ transform: translateY(-1px); background:#f9fbfe }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none }

.btn-primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#111 !important; border-color: transparent;
  box-shadow: 0 10px 24px rgba(249,115,22,.22);
}
.btn-primary:hover{ filter: brightness(1.03) }

.btn-secondary{
  background: #eef2f6; color:var(--text) !important; border-color: #d6dde7;
}
.btn-secondary:hover{ background:#e7ecf3 }

/* Bootstrap var overrides så teksten ikke blir hvit */
.btn{
  --bs-btn-color: var(--text);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-color: var(--text);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-bg: initial;
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: #f9fbfe;
  --bs-btn-hover-border-color: var(--line);
  --bs-btn-active-bg: #eef2f6;
  --bs-btn-active-border-color: var(--line);
}
.btn-primary{
  --bs-btn-hover-color: #111;
  --bs-btn-active-color: #111;
}

/* ---------- Chips / Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius:999px; padding:.35rem .7rem; font-weight:800; letter-spacing:.2px;
  color:#111 !important;
}
.chip{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--line); color:var(--text);
  padding:.5rem .85rem; border-radius:999px; font-weight:700; letter-spacing:.2px; cursor:pointer;
  transition: transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.chip:hover{ transform:translateY(-1px); border-color:var(--accent) }
.chip.is-active{
  background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#111; border-color: transparent;
  box-shadow:0 8px 18px rgba(249,115,22,.22);
}

/* ---------- Cards / Panels ---------- */
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding: var(--space-5);
  color:var(--text);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(2,6,23,.14) }

/* ---------- Forms ---------- */
.input, .textarea, select.input{
  width:100%;
  background: var(--elev);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:var(--r-md);
  padding:.7rem .9rem; font-size:1rem;
}
.input::placeholder, .textarea::placeholder{ color: color-mix(in srgb, var(--muted) 80%, #fff 20%) }
.input:focus, .textarea:focus, select.input:focus{
  outline:none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, #fff 65%);
}
textarea.textarea{ resize:vertical; min-height:110px }

/* ---------- Sections & layout helpers ---------- */
.section{ padding: var(--section-y) 0 }
.grid{ display:grid; gap: var(--grid-gap) }
.cluster{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.stack > * + *{ margin-top: var(--space-3) }
.round{ border-radius:999px }
.rounded{ border-radius:var(--r-lg) }
.shadow{ box-shadow: var(--shadow) }

/* Light slab (lys stripe mellom seksjoner) */
.bg-slab{
  background: linear-gradient(180deg,#ffffff,#f6f7f9);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}

/* ---------- HERO (side-agnostisk) ---------- */
.hero{
  position:relative; width:100%;
  min-height: clamp(480px, 62vh, 720px);
  display:grid; align-items:center;
  background: none; /* ingen egen overlay her (styres i handverker.html) */
}
.hero::after{ content:none }

/* ---------- Media wrappers / crops ---------- */
.media{ position: relative; width:100%; overflow:hidden; border-bottom:1px solid var(--line) }
.media--3x2{ aspect-ratio: 3 / 2 }  /* tjenester */
.media--4x3{ aspect-ratio: 4 / 3 }  /* prosjekter */
.media__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  background: linear-gradient(180deg,#f0f3f7,#e8edf4);
}

/* ---------- Galleri / prosjektgrid ---------- */
.gallery-grid{
  display:grid; gap:14px; align-items:center;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gallery-grid .card{ padding:0 }
.gallery-grid img{ width:100%; height:auto; display:block }

/* ---------- Prosess-liste ---------- */
.process-list{ list-style:none; padding:0; margin:.6rem 0 0; color:var(--text) }
.process-list li{ display:flex; gap:.6rem; align-items:flex-start; margin:.25rem 0 }

/* ---------- CTA-kort ---------- */
.cta-card .btn{ min-width:220px }

/* ---------- FAQ (details/summary) ---------- */
details{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  overflow:hidden; transition: border-color .2s ease;
}
details[open]{ border-color: color-mix(in srgb, var(--accent) 45%, var(--line) 55%) }
details > summary{
  cursor:pointer; list-style:none; padding: .85rem 1rem; font-weight:700; color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.5));
  min-height:44px; display:flex; align-items:center;
}
details > summary::-webkit-details-marker{ display:none }
details > *:not(summary){ padding: 0 1rem 1rem }

/* ---------- Utilities ---------- */
.hide{ display:none !important }
.center{ text-align:center }
.w-100{ width:100% }
.max-w-52ch{ max-width:52ch }
.mt-1{ margin-top:6px } .mt-2{ margin-top:10px } .mt-3{ margin-top:14px } .mt-4{ margin-top:18px }
.mb-1{ margin-bottom:6px } .mb-2{ margin-bottom:10px } .mb-3{ margin-bottom:14px } .mb-4{ margin-bottom:18px }

/* ---------- Animations ---------- */
.fade-in{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease }
.fade-in.visible{ opacity:1; transform:none }
.reveal-on-hover{ transition: filter .25s ease, transform .25s ease }
.reveal-on-hover:hover{ filter: brightness(1.04); transform: translateY(-2px) }

/* ---------- Sticky mobile CTA (optional) ---------- */
.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index: 1100;
  display:flex; gap:10px; justify-content:center; padding:10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(246,247,249,.98));
  border-top:1px solid var(--line);
  backdrop-filter: saturate(130%) blur(8px);
}
@media (min-width: 860px){ .sticky-cta{ display:none !important } }

/* ---------- Tables ---------- */
.table-wrap{ width:100% }
table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card) }
th, td{ padding:.7rem .8rem; border-bottom:1px solid var(--line) }
th{ text-align:left; font-weight:700; background:#f2f5fa; color:#0f172a }
tr:hover td{ background:#f7f9fc }

/* =======================================================
   PAGE: Handverker (polish)
   ======================================================= */

/* Trust-kort under hero */
.trust-cards .card{ padding:.7rem 1rem; text-align:center }
.trust-cards .card div{ font-weight:900; font-size:1.15rem }

/* Tjenestekort — bilde topp, knapp bunn */
.service-card{ display:flex; flex-direction:column; height:100% }
.service-card .p-3{ flex:1 }

/* Pricing */
.pricing-wrap{ padding: clamp(24px,4.5vw,54px) 0 }
.pricing{
  display:grid; gap:14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 992px){ .pricing{ grid-template-columns: 1fr } }

.plan{
  display:flex; flex-direction:column;
  background: var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding: var(--space-5);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan:hover{ transform: translateY(-2px) }

.plan__head{ text-align:center; margin-bottom:10px }
.plan__title{
  margin:0 0 6px; font-weight:800; letter-spacing:.2px;
  font-size: clamp(18px,2.1vw,22px); color:#0f172a;
}
.price{ display:flex; align-items:flex-end; justify-content:center; gap:6px }
.price__from{ color:var(--muted); font-weight:700 }
.price__value{ font-weight:900; line-height:1; font-size: clamp(26px, 4.6vw, 36px); color:#0f172a }
.price__suffix{ color:var(--muted); margin-bottom:2px }

.plan__list{ list-style:none; padding:0; margin:12px 0 16px; display:grid; gap:8px }
.plan__list li{ display:flex; align-items:flex-start; gap:.5rem }
.plan__list li::before{
  content:""; width:8px; height:8px; margin-top:.45rem; border-radius:999px;
  background: linear-gradient(180deg,var(--accent),var(--accent-2));
  flex:0 0 8px;
}
.plan__cta{ margin-top:auto }

.plan--featured{
  position:relative;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
  box-shadow: 0 18px 42px rgba(0,0,0,.12), 0 10px 24px rgba(249,115,22,.18);
  transform: translateY(-4px);
}
.plan--featured .plan__badge{
  position:absolute; top:12px; left:12px;
  padding:.3rem .6rem; font-weight:800; letter-spacing:.2px;
  border-radius:999px; color:#111;
  background: linear-gradient(180deg,var(--accent),var(--accent-2));
  border:1px solid color-mix(in srgb, var(--accent) 30%, #000 70%);
  box-shadow: var(--shadow);
}

/* =======================================================
   MOBILE POLISH
   ======================================================= */
html, body{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
@media (max-width: 640px){
  :root{
    --section-y: clamp(28px, 7vw, 56px);
    --grid-gap: 12px;
  }
  .section{ padding: var(--section-y) 0 }
  .input, .textarea, select.input{ font-size:16px } /* iOS anti-zoom */
}
@media (max-width: 992px){
  .pricing{ grid-template-columns: 1fr; gap: 12px }
  .plan{ padding: clamp(16px, 4vw, 22px) }
  .plan--featured{ order: -1; transform: none }
}

/* Nav-lenker i header får ikke “fade” i kontrast på hover */
.nav-links a:hover{ color: var(--text) !important }

/* Bilder med onerror får hyggelig placeholder */
img[onerror] { background: linear-gradient(180deg, #eff3f7, #e9eef4) !important }

/* ---------- Print ---------- */
@media print{
  *{ box-shadow:none!important; text-shadow:none!important }
  a[href]:after{ content:"" }
  .site-header, .site-footer, .site-subfoot, .sticky-cta{ display:none !important }
  .card{ border-color:#000 }
}
/* --- FIX: Lesbarhet i hero-skjemaet (frys mørk tekst) --- */
.hero .card,
.hero .card p,
.hero .card small,
.hero .card label{ color: var(--text); }
.hero .card .text-muted{ color: var(--muted) !important; }

/* --- HERO chips på mørk bakgrunn --- */
.hero [aria-label="Tillitsverdier"] .chip{
  background: rgba(255,255,255,.96) !important;
  color:#0f172a !important;
  border:1px solid rgba(2,6,23,.12) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* --- Demo-badge synlig i overlay (forsiden) --- */
.site-header--overlay .nav-links .demo-badge{
  background: rgba(255,255,255,.98) !important;
  color:#0b1220 !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  border: none;
}
.site-header--overlay.is-solid .nav-links .demo-badge{
  background:#f1f5f9 !important;
}

/* --- Skjul divider rett under hero på forsiden --- */
.has-hero .first-fold-divider{ display:none; }

/* --- Sikkerhetsnett: demo-tekst i hero-skjemaet er alltid lesbar --- */
.hero .card .text-muted,
.hero .card p,
.hero .card small{ color: var(--muted) !important; }

/* Demo-notis: alltid lesbar */
.demo-note{
  display:block;
  margin-top:.6rem;
  padding:.55rem .75rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;          /* lys bakgrunn, funker også over foto */
  color:#0f172a;            /* mørk tekst for kontrast */
  font-size:.92rem;
  line-height:1.35;
  word-break:break-word;
}

/* Sørg for at knapperader kan wrappe teksten istedenfor å klippe den */
.actions-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  flex-wrap:wrap;           /* <— viktig */
}
.actions-wrap > *{
  flex:0 0 auto;
}
.actions-wrap .demo-note{
  flex:1 1 100%;            /* notisen legger seg pent under knapperaden */
}
#demoNote, #demoNote * {
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
}
/* === FINAL KILL-SWITCH: Demo-note skal være SVART === */
#demoNote,
#demoNote *{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  fill:#0f172a !important;
  stroke:#0f172a !important;
  text-shadow:none !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}
#demoNote{
  background:#fff !important;
  border:1px solid var(--line) !important;
}
/* Hvis den blir gjort om til "toast" e.l. etter submit */
#demoNote.is-toast,
#demoNote.is-toast *{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
}
#demoNote,
.hero .card #demoNote{
  background:#000 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  text-shadow:none !important;
}
#demoNote *{ color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* Toggle-knapp skal alltid ligge over meny-panelet */
.nav-toggle { position: relative; z-index: 1101; }

/* Selve dropp-menyen (mobil) skal ligge under knappen, men over innhold */
@media (max-width: 992px){
  .site-header.open .nav-links{
    flex-direction: column;          /* stable lenkene i kolonne */
    align-items: stretch;
    padding: 12px 16px;
    gap: 6px;
  }
}


/* Mørk bakgrunn bak mobilmeny */
.mobile-overlay{
  position: fixed; inset: 0;
  background: rgba(2,6,23,.5);
  backdrop-filter: blur(2px);
  z-index: 900;              /* was 1090 — senk under header (1000) */
  opacity: 0; transition: opacity .25s ease;
}

.mobile-overlay[hidden]{ display:none; }
.mobile-overlay.is-open{ opacity: 1; }