/*
Theme Name: Optimal Spol 24/7
Theme URI: https://optimalspol.se
Author: AP Design
Author URI: https://apdesign.se
Description: Egenutvecklat FSE-blocktema för Optimal Spol 24/7 AB. theme.json är källan för design-tokens; den här stylesheeten hanterar det block-teman inte uttrycker: sticky nav med dropdown, FAQ-dragspel, före/efter-reglage, flödesanimation och kort-hovring.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
Text Domain: optimalspol
*/

/* ===========================================================
   Optimal Spol 24/7 — grafisk profil 2026
   Space Grotesk + IBM Plex Sans, navy #0B3C63 + ljusblå #5BC0F0
   Mobile-first: bas-CSS för 375px, skala UPP med min-width.
   =========================================================== */

:root {
  --navy: #0B3C63;
  --navy-ink: #072A44;
  --steel: #14568C;
  --cyan: #5BC0F0;
  --cyan-ink: #06263F;
  --cyan-dark: #15629C;
  --cyan-light: #86CFF3;
  --mist: #9AA9B8;
  --light: #EDF3F8;
  --line: #DCE6EF;
  --text: #1B2A3C;
  --text-muted: #5E7186;
  --text-soft: #7A8A99;
  --on-dark: #C4D6E5;
  --on-dark-soft: #9CC4DE;

  --display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  --maxw: 1200px;
  --pad: 20px;
  --radius: 16px;
}
@media (min-width: 700px) { :root { --pad: 28px; } }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body { font-family: var(--body); color: var(--text); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Flödesdash: animerad i hero, statisk i upprepade sektioner */
@keyframes os-dashflow { to { stroke-dashoffset: -44; } }
.flowdash { stroke-dasharray: 7 11; animation: os-dashflow 1.4s linear infinite; }
.flowdash-static { stroke-dasharray: 7 11; }

/* ---------- Layout ---------- */
.os-wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.os-section { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 700px) { .os-section { padding-top: 80px; padding-bottom: 80px; } }

.os-eyebrow {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-dark);
}
.os-eyebrow.on-dark { color: var(--cyan-light); }
.os-h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.05; color: var(--navy); font-size: clamp(28px, 5.2vw, 42px);
}
.os-h2.on-dark { color: #fff; }

/* ---------- Knappar ---------- */
.os-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; border-radius: 13px; padding: 14px 22px;
  font-size: 18px; min-height: 48px; border: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.os-btn svg { flex-shrink: 0; }
.os-btn-cyan { background: var(--cyan); color: var(--cyan-ink); }
.os-btn-cyan:hover { box-shadow: 0 16px 34px -18px rgba(91,192,240,.8); transform: translateY(-1px); }
.os-btn-navy { background: var(--navy); color: #fff; }
.os-btn-navy:hover { box-shadow: 0 16px 34px -18px rgba(11,60,99,.8); transform: translateY(-1px); }
.os-btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.3); color: #fff; font-weight: 700; }
.os-btn-ghost:hover { border-color: rgba(255,255,255,.6); }
.os-btn-outline { background: #fff; border: 1.5px solid #CDD9E4; color: var(--navy); font-weight: 700; }
.os-btn-outline:hover { border-color: var(--cyan); }

/* ---------- Tillgänglighet ---------- */
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.os-skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--cyan); color: var(--cyan-ink); padding: 12px 18px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
}
.os-skip:focus { left: 8px; top: 8px; }

/* ---------- Kvitto och fel i kontaktformuläret ----------
   Meddelandena ligger inuti formuläret, som står på mörk navy. Utan egen
   färg ärver de brödtextens mörka ton och blir oläsliga. */
.os-form-ok,
.os-form-fel {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: #fff;
}
.os-form-ok {
  background: rgba(91, 192, 240, .18);
  border-left: 4px solid var(--cyan);
}
.os-form-fel {
  background: rgba(255, 138, 138, .16);
  border-left: 4px solid #FF8A8A;
}