/*
Theme Name: Uppsala Elbolag Pro v2.5.6
Theme URI: https://uppsalaelbolag.se/
Author: Uppsala Elbolag
Description: CTA-färger i Customizer + Portalen-steg (visa/dölj + redigera texter) i Anpassa.
Version: 1.0.1
Text Domain: ueprov2
*/
:root{--ink:#0f172a;--muted:#64748b;--b:#e5e7eb;--bg:#fff;--bg2:#f8fafc;--accent:#0ea5e9;--portal:#f97316;--contact:#16a34a;--r:16px;--sh:0 10px 30px rgba(0,0,0,.08);--logo-h:52px}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;background:#fff}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.site-container{max-width:1200px;margin:0 auto;padding:18px 20px}
.header{position:sticky;top:0;z-index:999;background:#fff;border-bottom:1px solid var(--b);transition:box-shadow .2s ease}
.header .inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.header.is-stuck{box-shadow:0 8px 20px rgba(0,0,0,.06)}.header .branding img{max-height:var(--logo-h);height:auto;width:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap}
.nav a{font-weight:600;color:#0f172a;position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);transition:width .18s ease}
.nav a:hover::after,.nav .current-menu-item>a::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:12px;border:1px solid var(--ink);font-weight:600;background:#fff;transition:transform .06s ease, box-shadow .18s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(14,165,233,.25)}
.btn.portal,.btn.portal.primary{background:var(--portal);border-color:var(--portal);color:#fff;box-shadow:0 8px 20px rgba(249,115,22,.25)}
.btn.portal:hover{filter:brightness(0.96)}
.btn.contact,.btn.phone,.btn.contact.primary{background:var(--contact);border-color:var(--contact);color:#fff;box-shadow:0 8px 20px rgba(22,163,74,.25)}
.btn.contact:hover,.btn.phone:hover{filter:brightness(0.96)}
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center;padding:42px 0}
.hero .eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.hero h1{font-size:clamp(28px,4.6vw,52px);line-height:1.1;margin:.2em 0 .3em}
.hero p{color:var(--muted);font-size:18px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.kv{border-radius:16px;border:1px solid var(--b);background:#f8fafc;padding:6px;min-height:340px}
.kv img{display:block;width:100%;height:auto;border-radius:12px;object-fit:contain}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--b);border-radius:var(--r);box-shadow:var(--sh);padding:18px}
.strip{margin-top:18px;border:1px solid var(--b);border-radius:16px;background:#f8fafc;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer{border-top:1px solid var(--b);margin-top:40px}.footer .cols{display:grid;grid-template-columns:2fr 1fr;gap:18px}.small{color:var(--muted);font-size:13px}
.ue-jour-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--b);border-radius:999px;padding:6px 10px;background:#fff;font-size:13px}.ue-jour-dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.wpcf7-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wpcf7-form .form-row.single{grid-template-columns:1fr}
.wpcf7-form .field{display:flex;flex-direction:column;gap:6px}
.wpcf7-form input[type=text],.wpcf7-form input[type=tel],.wpcf7-form input[type=email],.wpcf7-form input[type=date],.wpcf7-form select,.wpcf7-form textarea{width:100%;padding:12px 14px;border:1px solid var(--b);border-radius:12px;background:#fff}
.wpcf7-form .actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.wpcf7-form input[type=submit]{cursor:pointer;background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:12px;padding:12px 16px;font-weight:600}
.ue-portal{padding-top:8px}.ue-portal .portal-intro{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:0 0 8px}
.ue-portal .portal-intro .eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:12px;margin-bottom:4px}
.ue-portal .portal-intro h1{margin:.2em 0}
.ue-portal .grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start;margin-top:0}
.ue-portal .side{align-self:start}.ue-portal .side .box+.box{margin-top:12px}
.ue-portal .card{background:#fff;border:1px solid var(--b);border-radius:16px;box-shadow:var(--sh);padding:18px}
@media (min-width:1100px){ .ue-portal .side{position:sticky; top:92px}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:10px 0 18px}
.step{background:#fff;border:1px solid var(--b);border-radius:16px;box-shadow:var(--sh);padding:14px}
.step .num{display:inline-flex;width:28px;height:28px;border-radius:999px;align-items:center;justify-content:center;border:1px solid var(--b);margin-bottom:8px;font-weight:700;color:#0f172a}
.step h3{margin:4px 0 8px;font-size:16px}
@media (max-width:980px){
  .site-container{padding:16px}.hero{grid-template-columns:1fr;padding:22px 0}.kv{min-height:200px}
  .grid{grid-template-columns:1fr;gap:14px}.wpcf7-form .form-row{grid-template-columns:1fr}.steps{grid-template-columns:1fr}
  .btn{padding:12px 16px}
}

/* Visually hide skip-link until focus */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;margin:0;clip:auto;white-space:normal}

/* Center header branding and place menu below */
.header .inner{flex-direction:column;align-items:center;gap:8px}
.branding{text-align:center}

/* Jour aktiv badge */
.badge{display:inline-flex;align-items:center;font-weight:600;border-radius:9999px;padding:6px 10px;font-size:14px}
.badge-jour{background:#ef4444;color:#fff}
.badge-jour .dot{display:inline-block;width:8px;height:8px;border-radius:9999px;background:#fff;margin-right:8px}


/* Hide visual skip-link if any theme output shows it */
.skip-link, .screen-reader-text, a[href="#content"]{
  position:absolute !important;
  top:-9999px !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}


/* UE: Jour-indikator layout och puls */
.indicator-row{ display:flex; align-items:center; justify-content:center; gap: var(--indicator-gap,8px); min-height:18px; margin-top:6px; }
.blink-indicator{ width: var(--jour-dot,10px); height: var(--jour-dot,10px); border-radius:999px; display:inline-block; animation:puls var(--jour-speed-green,2.2s) ease-in-out infinite; }
.blink-indicator.dot-green{ background: var(--jour-green,#16a34a); animation-duration: var(--jour-speed-green,2.2s); }
.blink-indicator.dot-orange{ background: var(--jour-orange,#f97316); animation-duration: var(--jour-speed-orange,2s); }
.blink-indicator.dot-red{ background: var(--jour-red,#dc2626); animation-duration: var(--jour-speed-red,1.8s); }
.jour-text{ font-size: var(--jour-label,12px); line-height:1; }
@keyframes puls{ 0%,100%{opacity:.45} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .blink-indicator{ animation:none } }