/* ============================================================
   Weerwidget (Content → Weer) — gedeeld over alle portalthema's.
   Apart bestand: wordt uitsluitend geladen wanneer het widget aan
   staat (B14: uit is écht uit). De lucht-gradient komt server-side
   als inline style mee zodat de statische variant zonder JS klopt;
   de levende laag (canvas, fase 4) tekent hier bovenop.
   Referentie: design/weer/weer-beheer-mockup-w4-levend.html (W4).
   ============================================================ */

.pw-widget{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    width:100%;
    max-width:100%;
    box-shadow:0 22px 55px rgba(10,14,40,.35);
    font-weight:600;
    isolation:isolate;
    color:#fff;
    /* In een flex-kolom-rail (hogerheide) zou overflow:hidden de automatische
       minimumhoogte op 0 zetten, waardoor de kaart platgedrukt wordt en zijn eigen
       inhoud afsnijdt. De kaart mag nooit krimpen — de rail scrollt dan maar. */
    flex-shrink:0;
}
/* Stapel-wrapper linkermenu + widget (één grid-cel in de bestaande 3-koloms grids). In de
   thema-rails is geen extra marge nodig: die regelen spacing zelf (margin-bottom of gap). */
.portal-left-col-v20{display:grid;gap:16px;min-width:0}

/* ── Vormgeving (instelbaar in beheer): hoeken, schaduw en grootte. De basisstijl is
   "rond + schaduw + normaal"; alleen afwijkende keuzes zetten een modifier-klasse. ── */
.pw-radius-zacht{border-radius:14px}
.pw-radius-recht{border-radius:6px}
/* De beheerkeuze "geen schaduw" wint bewust van thema-overrides (zoals hogerheide's
   --hh-schaduw): uit is uit, op elk thema. */
.pw-widget.pw-noshadow{box-shadow:none !important}

.pw-size-compact .pw-inner{padding:14px 14px 11px}
.pw-size-compact .pw-top{margin-bottom:8px}
.pw-size-compact .pw-title{font-size:.76rem}
.pw-size-compact .pw-icon{font-size:34px}
.pw-size-compact .pw-temp{font-size:2.3rem}
.pw-size-compact .pw-desc{font-size:.9rem}
.pw-size-compact .pw-now{gap:11px;margin-bottom:10px}
.pw-size-compact .pw-row{padding:7px 2px;font-size:.87rem}
.pw-size-compact .pw-panel{padding:2px 11px 9px}
.pw-size-compact .pw-alert{font-size:.8rem;padding:6px 9px}
.pw-size-compact .pw-fact{font-size:.78rem}

.pw-size-ruim .pw-inner{padding:22px 22px 18px}
.pw-size-ruim .pw-title{font-size:.9rem}
.pw-size-ruim .pw-icon{font-size:52px}
.pw-size-ruim .pw-temp{font-size:3.4rem}
.pw-size-ruim .pw-desc{font-size:1.05rem}
.pw-size-ruim .pw-row{padding:11px 2px;font-size:.98rem}
.pw-size-ruim .pw-alert{font-size:.9rem}
.pw-size-ruim .pw-fact{font-size:.87rem}

/* Lagen: lucht (inline gradient) → donkere leesbaarheids-overlay → canvas (fase 4) → inhoud */
.pw-sky{position:absolute;inset:0;z-index:0}
.pw-shade{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    /* Donkere overlay bovenin zodat witte titel/temperatuur op élke lucht leesbaar blijft,
       ook op de lichtste (sneeuwdag). */
    background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 55%);
}
.pw-canvas{position:absolute;inset:0;z-index:2;pointer-events:none}
.pw-inner{position:relative;z-index:4;padding:18px 18px 14px}

.pw-top{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.pw-title{
    color:#fff;font-weight:800;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;
    text-shadow:0 1px 6px rgba(0,0,0,.35);
}

/* KNMI-banner: officiële kleuren, ongeacht lucht of thema — herkenbaarheid boven esthetiek. */
.pw-knmi{display:flex;align-items:center;gap:10px;border-radius:12px;padding:9px 12px;font-size:.86rem;font-weight:800;margin-bottom:12px;line-height:1.3}
.pw-knmi small{display:block;font-weight:600;font-size:.74rem;opacity:.9}
.pw-knmi strong{display:block}
.pw-knmi-geel{background:#fef9c3;color:#854d0e;border:1px solid #fde047}
.pw-knmi-oranje{background:#ffedd5;color:#9a3412;border:1px solid #fdba74}
.pw-knmi-rood{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;animation:pwKnmiPulse 2.2s infinite}
@keyframes pwKnmiPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)}50%{box-shadow:0 0 0 7px rgba(220,38,38,0)}}

.pw-now{display:flex;align-items:center;gap:14px;margin-bottom:13px;color:#fff}
.pw-icon{font-size:44px;line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3))}
.pw-temp{font-size:2.9rem;font-weight:800;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.pw-temp sup{font-size:1.4rem;top:-.9em;position:relative;vertical-align:baseline}
.pw-desc{font-size:.98rem;margin-top:2px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.4)}

/* Licht paneel binnen de kaart: gegarandeerd AA-contrast voor detailregels/meldingen/weetje. */
.pw-panel{background:rgba(255,255,255,.94);border-radius:14px;padding:4px 13px 11px;color:#22333a}
.pw-row{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px dashed #dfe5e3;color:#43555b;font-size:.92rem}
.pw-row:last-child{border-bottom:none}
.pw-row b{color:#22333a;font-weight:700;text-align:right}
.pw-alert{display:flex;align-items:center;gap:9px;background:#eef4f2;color:#0f5f5c;border-radius:10px;padding:8px 11px;font-size:.85rem;font-weight:700;margin-top:8px}
.pw-fact{border-top:1px dashed #dfe5e3;margin-top:9px;padding-top:9px;color:#5d6d74;font-size:.82rem;line-height:1.5}

.pw-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.pw-updated{color:rgba(255,255,255,.85);font-size:.73rem;text-shadow:0 1px 5px rgba(0,0,0,.4);margin-left:auto}

/* Geolocatie-link (B6): server-side verborgen; weather.js toont hem alleen bij support. */
.pw-geo{
    display:inline-flex;align-items:center;gap:6px;
    border:none;background:none;padding:0;margin:0;
    color:#fff;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer;
    text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.pw-geo:hover .pw-geo-txt{text-decoration:underline}
.pw-geo[hidden]{display:none}

/* De rails (en dus het widget) verdwijnen onder 1280px — zelfde gedrag als het linkermenu
   zelf; de mobiele navigatie neemt het over. Spiegelt de bestaande verbergregels. */
@media(max-width:1280px){
    .portal-home-inner-v147 .pw-widget,
    .portal-home-inner-v147 .portal-left-col-v20,
    .portal-contact-v1473 .pw-widget,
    .portal-contact-v1473 .portal-left-col-v20,
    .portal-auth-v148 .pw-widget,
    .portal-auth-v148 .portal-left-col-v20{display:none}
}

/* ── Levende laag (fase 4): elementen die weather.js alleen aanmaakt wanneer de
   beheer-toggle aan staat én de bezoeker geen "verminder beweging" heeft. ── */

/* Zonnegloed: overdag bij helder weer, draait langzaam rond. */
.pw-sun{
    position:absolute;top:-46px;right:-38px;width:190px;height:190px;border-radius:50%;
    z-index:1;pointer-events:none;
    background:radial-gradient(circle,rgba(255,214,120,.9) 0%,rgba(255,190,80,.3) 45%,transparent 70%);
    animation:pwSunSpin 40s linear infinite;
}
@keyframes pwSunSpin{to{transform:rotate(360deg)}}

/* Getekende maan met echte fase ('s nachts); per stijl een eigen karakter. */
.pw-moon{
    position:absolute;top:44px;right:16px;z-index:1;pointer-events:none;
    display:grid;place-items:center;
    filter:drop-shadow(0 0 16px rgba(220,230,255,.5));
}
.pw-moon-dimmed{opacity:.4}
.pw-moon-realistisch{animation:pwMoonFloat 8s ease-in-out infinite}
.pw-moon-sikkel{animation:pwMoonGlow 5s ease-in-out infinite}
@keyframes pwMoonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pwMoonGlow{
    0%,100%{filter:drop-shadow(0 0 12px rgba(245,205,130,.45))}
    50%{filter:drop-shadow(0 0 26px rgba(245,205,130,.85))}
}

/* Onweersflits: weather.js stuurt de opacity aan op willekeurige momenten. */
.pw-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:3;pointer-events:none}

/* Deinend weericoon, alleen wanneer de levende laag actief is. */
.pw-live .pw-icon{animation:pwIconBob 4s ease-in-out infinite}
@keyframes pwIconBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Verminder beweging: geen enkele widget-animatie (B13) — weather.js maakt de levende
   elementen dan al niet aan; dit is de CSS-zijde van dezelfde garantie. */
@media (prefers-reduced-motion: reduce){
    .pw-knmi-rood{animation:none}
    .pw-sun,.pw-moon-realistisch,.pw-moon-sikkel,.pw-live .pw-icon{animation:none}
}