/*
 * METEO SANTA SUSANNA
 * Fitxer: public/assets/css/header.css
 * Versió: 1.5.8p1
 *
 * Desenvolupament i proveïdor: SOMOSDIGITAL.NET
 * © 2026 SOMOSDIGITAL.NET
 */


/* METEO SANTA SUSANNA v1.2 */

.site-header-v12{
    width:100%;
    background:
        radial-gradient(circle at 14% -25%,rgba(255,255,255,.90),transparent 31rem),
        linear-gradient(135deg,#e9f8ff 0%,#c9e9fb 52%,#a8d3ec 100%);
    color:#12324a;
    box-shadow:0 8px 24px rgba(31,76,108,.14);
}

.site-header-v12__top{
    width:100%;
}

.site-header-v12__top-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    max-width:1320px;
    min-height:122px;
    margin:0 auto;
    padding:14px 24px 12px;
}

.site-header-v12__brand{
    display:flex;
    align-items:center;
    gap:19px;
    min-width:0;
    color:inherit;
    text-decoration:none;
}

.site-header-v12__logo{
    flex:0 0 auto;
    width:118px;
    max-width:118px;
    max-height:92px;
    object-fit:contain;
    filter:drop-shadow(0 7px 12px rgba(0,0,0,.16));
}

.site-header-v12__brand-copy{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
    padding-left:20px;
    border-left:1px solid rgba(18,50,74,.20);
}

.site-header-v12__brand-copy strong{
    color:#0b2d4a;
    font-size:clamp(1.55rem,2.7vw,2.8rem);
    line-height:1;
    letter-spacing:.03em;
    font-weight:800;
    white-space:nowrap;
}

.site-header-v12__brand-copy span{
    color:#176d9e;
    font-size:clamp(.85rem,1.15vw,1.08rem);
    line-height:1.3;
    font-weight:550;
}

.site-header-v12__datetime{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    min-width:220px;
    padding-left:24px;
    border-left:1px solid rgba(18,50,74,.20);
}

.site-header-v12__clock{
    display:flex;
    align-items:center;
    gap:9px;
    color:#0b2d4a;
    font-size:clamp(1.5rem,2.35vw,2.3rem);
    font-weight:800;
    font-variant-numeric:tabular-nums;
}

.site-header-v12__clock > span{
    color:#176d9e;
}

#headerDateV12{
    color:#176d9e;
    font-size:.95rem;
    font-weight:550;
    text-transform:capitalize;
}

.site-header-v12__menu-wrap{
    width:100%;
    padding:0 24px 16px;
}

.site-header-v12__menu-bar{
    position:relative;
    max-width:1320px;
    margin:0 auto;
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    background:linear-gradient(180deg,#0e4f82 0%,#0a3e68 100%);
    box-shadow:
        0 10px 24px rgba(8,46,77,.20),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.site-header-v12__menu-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:54px;
    padding:0 14px;
}

.site-header-v12__links{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
}

.site-header-v12__link{
    position:relative;
    display:inline-flex;
    align-items:center;
    min-height:46px;
    padding:0 13px;
    color:rgba(255,255,255,.86);
    font-size:.88rem;
    font-weight:400;
    text-decoration:none;
    white-space:nowrap;
    transition:background .2s ease,color .2s ease;
}

.site-header-v12__link:hover,
.site-header-v12__link:focus-visible{
    color:#fff;
    background:rgba(255,255,255,.07);
}

.site-header-v12__link.is-active{
    color:#83d4ff;
}

.site-header-v12__link.is-active::after{
    content:"";
    position:absolute;
    right:12px;
    bottom:0;
    left:12px;
    height:3px;
    border-radius:3px 3px 0 0;
    background:#83d4ff;
}

.site-header-v12__link.is-disabled{
    opacity:.46;
    pointer-events:none;
}

.site-header-v12__languages{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
    gap:7px;
}

.site-header-v12__language{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:30px;
    padding:3px 5px;
    border:1px solid transparent;
    border-radius:8px;
    text-decoration:none;
}

.site-header-v12__language svg{
    display:block;
    width:27px;
    height:17px;
    border-radius:2px;
}

.site-header-v12__language.is-active{
    border-color:#83d4ff;
    background:rgba(131,212,255,.13);
    box-shadow:0 0 0 2px rgba(131,212,255,.10);
}

.site-header-v12__toggle{
    display:none;
    width:44px;
    height:42px;
    padding:9px 10px;
    border:0;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    cursor:pointer;
}

.site-header-v12__toggle span{
    display:block;
    width:100%;
    height:2px;
    margin:4px 0;
    border-radius:2px;
    background:#fff;
}

.site-header-v12 + main{
    padding-top:20px !important;
}

@media (max-width:980px){
    .site-header-v12__top-inner,
    .site-header-v12__menu-bar{
        max-width:calc(100% - 8px);
    }

    .site-header-v12__brand-copy strong{
        white-space:normal;
    }

    .site-header-v12__link{
        padding-inline:10px;
        font-size:.82rem;
    }
}

@media (max-width:760px){
    .site-header-v12__top-inner{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
        min-height:0;
        padding:12px 16px 10px;
    }

    .site-header-v12__brand{
        width:100%;
        gap:12px;
    }

    .site-header-v12__logo{
        width:82px;
        max-width:82px;
        max-height:66px;
    }

    .site-header-v12__brand-copy{
        padding-left:12px;
    }

    .site-header-v12__brand-copy strong{
        font-size:1.35rem;
    }

    .site-header-v12__brand-copy span{
        font-size:.78rem;
    }

    .site-header-v12__datetime{
        width:100%;
        min-width:0;
        align-items:flex-start;
        padding:8px 0 0;
        border-top:1px solid rgba(18,50,74,.16);
        border-left:0;
    }

    .site-header-v12__menu-wrap{
        padding:0 12px 14px;
    }

    .site-header-v12__menu-bar{
        border-radius:14px;
    }

    .site-header-v12__toggle{
        display:block;
        margin:6px 8px 6px auto;
    }

    .site-header-v12__menu-panel{
        display:none;
        align-items:stretch;
        flex-direction:column;
        gap:8px;
        padding:8px 10px 12px;
        border-top:1px solid rgba(255,255,255,.12);
    }

    .site-header-v12__menu-panel.is-open{
        display:flex;
    }

    .site-header-v12__links{
        align-items:stretch;
        flex-direction:column;
        overflow:visible;
    }

    .site-header-v12__link{
        min-height:42px;
        padding:0 12px;
        border-radius:8px;
        font-size:.9rem;
    }

    .site-header-v12__link.is-active::after{
        display:none;
    }

    .site-header-v12__languages{
        justify-content:flex-start;
        padding:4px 2px 0;
    }

    .site-header-v12 + main{
        padding-top:16px !important;
    }
}


/* v1.2a – neutralisiert die globale header-Regel aus assets/css/style.css */
body > header.site-header-v12{
    display:block !important;
    flex-direction:initial !important;
    justify-content:initial !important;
    align-items:initial !important;
    gap:0 !important;
    padding:0 !important;
    border-bottom:0 !important;
    position:static !important;
}

/* Beide Headerzeilen müssen untereinander stehen */
.site-header-v12__top,
.site-header-v12__menu-wrap{
    display:block !important;
    width:100% !important;
    flex:0 0 auto !important;
}

/* Die Menüleiste bleibt zentriert unter Logo und Uhrzeit */
.site-header-v12__menu-wrap{
    clear:both !important;
}

.site-header-v12__menu-bar{
    width:100% !important;
    max-width:1320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


/* v1.2b – Smartphone-Optimierungen */
@media (max-width:760px){

    /* Hamburger links statt rechts */
    .site-header-v12__toggle{
        display:block !important;
        margin:6px auto 6px 8px !important;
    }

    /* Menüpanel mit Flaggen sichtbar unter dem Hamburger */
    .site-header-v12__menu-panel{
        align-items:stretch !important;
    }

    .site-header-v12__languages{
        display:flex !important;
        justify-content:flex-start !important;
        align-items:center !important;
        gap:8px !important;
        padding:8px 2px 2px !important;
        border-top:1px solid rgba(255,255,255,.12);
    }

    .site-header-v12__language{
        display:inline-flex !important;
        visibility:visible !important;
        opacity:1 !important;
    }

    /* Titel auf dem Handy kleiner und einzeilig */
    .site-header-v12__brand-copy strong{
        font-size:1.08rem !important;
        line-height:1.05 !important;
        letter-spacing:.01em !important;
        white-space:nowrap !important;
    }

    .site-header-v12__brand-copy{
        min-width:0 !important;
    }
}

/* Sehr kleine Geräte */
@media (max-width:420px){
    .site-header-v12__brand{
        gap:9px !important;
    }

    .site-header-v12__logo{
        width:68px !important;
        max-width:68px !important;
        max-height:58px !important;
    }

    .site-header-v12__brand-copy{
        padding-left:9px !important;
    }

    .site-header-v12__brand-copy strong{
        font-size:.96rem !important;
    }

    .site-header-v12__brand-copy span{
        font-size:.68rem !important;
    }
}


/* v1.2c – Hamburger links, Flaggen dauerhaft direkt rechts daneben */
.site-header-v12__menu-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 14px;
}

.site-header-v12__mobile-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
    order:2;
}

.site-header-v12__mobile-actions .site-header-v12__toggle{
    display:none;
}

.site-header-v12__mobile-actions .site-header-v12__languages{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    margin-left:auto;
}

.site-header-v12__menu-panel{
    flex:1 1 auto;
    order:1;
    padding:0 !important;
}

@media (max-width:760px){
    .site-header-v12__menu-bar{
        display:block !important;
        padding:0 !important;
    }

    .site-header-v12__mobile-actions{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        width:100% !important;
        min-height:54px;
        padding:5px 8px !important;
        order:initial;
    }

    .site-header-v12__mobile-actions .site-header-v12__toggle{
        display:block !important;
        flex:0 0 auto !important;
        margin:0 !important;
    }

    .site-header-v12__mobile-actions .site-header-v12__languages{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:7px !important;
        margin-left:auto !important;
        padding:0 !important;
        border-top:0 !important;
    }

    .site-header-v12__mobile-actions .site-header-v12__language{
        display:inline-flex !important;
        visibility:visible !important;
        opacity:1 !important;
        width:36px !important;
        height:28px !important;
        padding:3px 4px !important;
    }

    .site-header-v12__mobile-actions .site-header-v12__language svg{
        width:24px !important;
        height:16px !important;
    }

    .site-header-v12__menu-panel{
        display:none;
        width:100%;
        padding:8px 10px 12px !important;
        border-top:1px solid rgba(255,255,255,.12);
    }

    .site-header-v12__menu-panel.is-open{
        display:flex !important;
    }
}


/* v1.2.7 – überflüssigen Tendenz-Strich bei UV & Solar ausblenden */
.v0996-uvsolar #solarTrend{
    display:none !important;
}


/* v1.4.6b2 – compact French navigation and reliable mobile panel */
html[lang="fr"] .site-header-v12__menu-bar{
    gap:5px;
    padding-inline:8px;
}
html[lang="fr"] .site-header-v12__link{
    padding-inline:8px;
    font-size:.88rem;
}
@media (max-width:760px){
    .site-header-v12__menu-bar{position:relative;z-index:50}
    .site-header-v12__mobile-actions{position:relative;z-index:52}
    .site-header-v12__toggle{position:relative;z-index:53;touch-action:manipulation}
    .site-header-v12__menu-panel{
        position:relative;
        z-index:51;
        background:linear-gradient(180deg,#0e4f82 0%,#0a3e68 100%);
    }
    html[lang="fr"] .site-header-v12__link{font-size:.88rem;padding-inline:12px}
}

/* v1.4.6b3 – identical menu typography, compact French spacing */
html[lang="fr"] .site-header-v12__link{
    font-family:inherit;
    font-weight:400;
}

/* v1.4.6b4 – universal controls and flexible long-language navigation */
.site-header-v12__languages{
    display:flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
}
.site-header-v12__language{
    margin:0;
}
.site-header-v12__nav{
    min-width:0;
    flex:1 1 auto;
}
.site-header-v12__menu{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-width:0;
}
.site-header-v12__link{
    flex:0 1 auto;
    white-space:nowrap;
}
.site-header-v12__controls{
    flex:0 0 auto;
    margin-left:auto;
}

/* French keeps compact menu-link spacing only. */
html[lang="fr"] .site-header-v12__link{
    padding-inline:8px;
    font-size:.88rem;
    font-family:inherit;
    font-weight:400;
}
html[lang="fr"] .site-header-v12__languages{
    gap:12px;
}
@media (max-width:1180px) and (min-width:761px){
    .site-header-v12__link{
        padding-inline:9px;
    }
    html[lang="fr"] .site-header-v12__link{
        padding-inline:6px;
    }
}

/* v1.4.6b5 – fixed, language-independent theme control width */
.site-header-v12__theme{
    box-sizing:border-box;
    flex:0 0 88px;
    width:88px;
    min-width:88px;
    max-width:88px;
    justify-content:center;
    gap:7px;
    padding-inline:9px;
    overflow:hidden;
}
.site-header-v12__theme-label{
    display:block;
    min-width:0;
    max-width:44px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
@media(max-width:760px){
    .site-header-v12__theme{
        flex-basis:82px;
        width:82px;
        min-width:82px;
        max-width:82px;
        padding-inline:7px;
    }
}

/* v1.4.6d2 – tighter desktop menu spacing without changing typography */
@media (min-width: 761px){
    .site-header-v12__menu{
        gap:0;
    }
    .site-header-v12__link{
        padding-inline:8px;
    }
    html[lang="fr"] .site-header-v12__link{
        padding-inline:7px;
    }
}
@media (min-width: 1181px){
    .site-header-v12__link{
        padding-inline:7px;
    }
    html[lang="fr"] .site-header-v12__link{
        padding-inline:6px;
    }
}


/* v1.5.6a – desktop navigation as compact rounded menu tiles.
   Mobile hamburger menu intentionally keeps its existing appearance. */
@media (min-width:761px){
    .site-header-v12__menu-panel{
        padding:7px 10px;
    }

    .site-header-v12__links{
        gap:6px;
        padding:0;
    }

    .site-header-v12__link{
        min-height:38px;
        padding:0 11px;
        border:1px solid rgba(255,255,255,.24);
        border-radius:9px;
        background:rgba(255,255,255,.035);
        transition:
            background .18s ease,
            border-color .18s ease,
            color .18s ease,
            transform .18s ease;
    }

    .site-header-v12__link:hover,
    .site-header-v12__link:focus-visible{
        color:#fff;
        border-color:rgba(255,255,255,.48);
        background:rgba(255,255,255,.11);
        transform:translateY(-1px);
    }

    .site-header-v12__link.is-active{
        color:#0b3f67;
        border-color:#9bdcff;
        background:#9bdcff;
        box-shadow:0 2px 8px rgba(0,0,0,.13);
    }

    .site-header-v12__link.is-active::after{
        display:none;
    }

    .site-header-v12__link.is-disabled{
        border-color:rgba(255,255,255,.10);
        background:rgba(255,255,255,.018);
    }
}

@media (max-width:760px){
    .site-header-v12__links{
        gap:0;
    }

    .site-header-v12__link{
        border:0;
        background:transparent;
        transform:none;
    }

    .site-header-v12__link:hover,
    .site-header-v12__link:focus-visible{
        transform:none;
    }
}


/* v1.5.6d – larger Verdana navigation, hover glow and earlier hamburger breakpoint */
@media (min-width:1481px){
    .site-header-v12__top-inner{
        max-width:1540px;
        gap:22px;
    }

    .site-header-v12__brand{
        flex:1 1 auto;
    }

    .site-header-v12__brand-copy strong{
        font-size:clamp(1.8rem,2.35vw,2.75rem);
    }

    .site-header-v12__live{
        flex:0 0 300px;
        min-width:300px;
        padding:10px 20px;
        border-left:1px solid rgba(18,50,74,.18);
        border-right:1px solid rgba(18,50,74,.18);
        font-variant-numeric:tabular-nums;
    }

    .site-header-v12__live-main{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:24px;
        color:#0b2d4a;
    }

    .site-header-v12__live-item{
        display:flex;
        align-items:center;
        gap:7px;
        white-space:nowrap;
    }

    .site-header-v12__live-icon{
        color:#1687b8;
        font-size:1.25rem;
        line-height:1;
    }

    .site-header-v12__live-main strong{
        font-size:1.18rem;
        font-weight:800;
    }

    .site-header-v12__live-rain{
        display:flex;
        justify-content:center;
        gap:14px;
        margin-top:7px;
        color:#176d9e;
        font-size:.72rem;
        line-height:1.25;
        white-space:nowrap;
    }

    .site-header-v12__live-rain strong{
        color:#0b2d4a;
        font-weight:700;
    }

    .site-header-v12__datetime{
        flex:0 0 230px;
        min-width:230px;
        padding-left:0;
        border-left:0;
    }

    .site-header-v12__menu-bar{
        max-width:1540px !important;
        overflow:hidden;
    }

    .site-header-v12__menu-panel{
        flex:1 1 auto;
        min-width:0;
        gap:6px;
    }

    .site-header-v12__links{
        min-width:0;
        gap:4px;
        overflow:hidden;
    }

    .site-header-v12__link{
        min-height:38px;
        padding:0 9px;
        border:1px solid rgba(255,255,255,.25);
        border-radius:9px;
        background:transparent;
        color:rgba(255,255,255,.90);
        font-family:Verdana,Geneva,Tahoma,sans-serif;
        font-size:.84rem;
        font-weight:400;
        letter-spacing:-.01em;
    }

    .site-header-v12__link:hover,
    .site-header-v12__link:focus-visible{
        color:#fff;
        border-color:rgba(131,212,255,.72);
        background:rgba(131,212,255,.11);
        box-shadow:
            0 0 0 1px rgba(131,212,255,.08) inset,
            0 0 12px rgba(131,212,255,.18);
        transform:none;
    }

    .site-header-v12__link.is-active{
        color:#fff;
        border-color:#83d4ff;
        background:transparent;
        box-shadow:
            0 0 0 1px rgba(131,212,255,.20) inset,
            0 0 8px rgba(131,212,255,.10);
    }

    .site-header-v12__mobile-actions{
        flex:0 0 auto;
        min-width:0;
        margin-left:2px;
    }

    .site-header-v12__tools{
        display:flex;
        align-items:center;
        gap:8px;
        min-width:0;
    }

    .site-header-v12__mobile-actions .site-header-v12__languages{
        flex-wrap:nowrap;
        gap:6px;
        margin-left:0;
    }

    .site-header-v12__mobile-actions .site-header-v12__language{
        flex:0 0 36px;
        width:36px;
        height:30px;
        padding:3px 4px;
    }

    .site-header-v12__mobile-actions .site-header-v12__language svg{
        width:25px;
        height:16px;
    }
}

/* Tablet / smaller laptop: use hamburger navigation instead of squeezing desktop menu. */
@media (max-width:1480px){
    .site-header-v12__menu-bar{
        display:block !important;
        padding:0 !important;
        overflow:visible !important;
    }

    .site-header-v12__mobile-actions{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        width:100% !important;
        min-height:54px;
        padding:5px 8px !important;
        order:initial;
    }

    .site-header-v12__mobile-actions .site-header-v12__toggle{
        display:block !important;
        flex:0 0 auto !important;
        margin:0 !important;
    }

    .site-header-v12__mobile-actions .site-header-v12__languages{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:7px !important;
        margin-left:auto !important;
        padding:0 !important;
        border-top:0 !important;
    }

    .site-header-v12__mobile-actions .site-header-v12__language{
        display:inline-flex !important;
        visibility:visible !important;
        opacity:1 !important;
        width:36px !important;
        height:28px !important;
        padding:3px 4px !important;
    }

    .site-header-v12__mobile-actions .site-header-v12__language svg{
        width:24px !important;
        height:16px !important;
    }

    .site-header-v12__menu-panel{
        display:none !important;
        width:100%;
        padding:8px 10px 12px !important;
        border-top:1px solid rgba(255,255,255,.12);
        background:linear-gradient(180deg,#0e4f82 0%,#0a3e68 100%);
    }

    .site-header-v12__menu-panel.is-open{
        display:flex !important;
    }

    .site-header-v12__links{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        width:100%;
        gap:0;
        overflow:visible;
    }

    .site-header-v12__link{
        min-height:42px;
        padding:0 12px;
        border:0;
        border-radius:0;
        background:transparent;
        font-family:inherit;
        font-size:.88rem;
        letter-spacing:0;
        transform:none;
    }

    .site-header-v12__link.is-active{
        color:#83d4ff;
        border:0;
        background:transparent;
        box-shadow:none;
    }
}


/* v1.5.6e – fixed hover position and symbolic live-weather header */
@media (min-width:1481px){
    .site-header-v12__link,
    .site-header-v12__link:hover,
    .site-header-v12__link:focus-visible,
    .site-header-v12__link.is-active{
        transform:none !important;
    }

    .site-header-v12__menu-panel,
    .site-header-v12__links{
        padding-top:2px;
        padding-bottom:2px;
    }

    .site-header-v12__live{
        flex-basis:330px;
        min-width:330px;
    }

    .site-header-v12__live-main{
        gap:25px;
    }

    .site-header-v12__live-item{
        gap:6px;
    }

    .site-header-v12__live-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:22px;
        color:#0789c1;
        font-size:1.15rem;
        line-height:1;
    }

    .site-header-v12__live-icon--temp{
        font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;
    }

    .site-header-v12__live-icon--wind{
        font-size:1.45rem;
        font-weight:700;
        transform:rotate(0deg);
    }

    .site-header-v12__trend{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width:14px;
        font-size:1.05rem;
        font-weight:900;
        line-height:1;
    }

    .site-header-v12__trend.is-up{
        color:#168746;
    }

    .site-header-v12__trend.is-down{
        color:#d23838;
    }

    .site-header-v12__trend.is-stable{
        color:#d38a00;
    }

    .site-header-v12__live-rain{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        margin-top:8px;
        color:#0b2d4a;
        font-size:.76rem;
    }

    .site-header-v12__live-rain-icon{
        color:#0789c1;
        font-size:1rem;
        line-height:1;
    }

    .site-header-v12__live-separator{
        color:rgba(18,50,74,.42);
        font-weight:400;
    }

    .site-header-v12__live-rain strong{
        color:#0b2d4a;
        font-weight:700;
    }
}


/* v1.5.6f – monochrome weather icons and dark-mode live header */
@media (min-width:1481px){
    .site-header-v12__live-icon,
    .site-header-v12__live-rain-icon{
        color:#0789c1;
    }

    .site-header-v12__live-icon svg,
    .site-header-v12__live-rain-icon svg{
        display:block;
        width:100%;
        height:100%;
        fill:none;
        stroke:currentColor;
        stroke-width:1.9;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .site-header-v12__live-icon--temp{
        width:21px;
        height:24px;
    }

    .site-header-v12__live-icon--wind{
        width:28px;
        height:24px;
        font-size:initial;
        font-weight:initial;
        transform:none;
    }

    .site-header-v12__live-rain-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:24px;
        height:21px;
        font-size:initial;
    }
}

/* Dark theme: live values and symbols become white.
   Trend arrows deliberately retain green/red/orange status colours. */
html[data-theme="dark"] .site-header-v12__live{
    color:#fff;
}

html[data-theme="dark"] .site-header-v12__live-main,
html[data-theme="dark"] .site-header-v12__live-main strong,
html[data-theme="dark"] .site-header-v12__live-rain,
html[data-theme="dark"] .site-header-v12__live-rain strong{
    color:#fff;
}

html[data-theme="dark"] .site-header-v12__live-icon,
html[data-theme="dark"] .site-header-v12__live-rain-icon{
    color:#fff;
}

html[data-theme="dark"] .site-header-v12__live-separator{
    color:rgba(255,255,255,.48);
}

html[data-theme="dark"] .site-header-v12__trend.is-up{
    color:#28b968;
}

html[data-theme="dark"] .site-header-v12__trend.is-down{
    color:#ff4d4d;
}

html[data-theme="dark"] .site-header-v12__trend.is-stable{
    color:#f2a51a;
}


/* v1.5.6g – live weather remains visible on tablet/smaller laptop.
   Navigation may already be hamburger while the top live block stays active. */
@media (min-width:1001px) and (max-width:1480px){
    .site-header-v12__top-inner{
        max-width:1380px;
        gap:18px;
        padding-inline:18px;
    }

    .site-header-v12__brand{
        flex:1 1 auto;
        min-width:0;
    }

    .site-header-v12__brand-copy strong{
        font-size:clamp(1.55rem,2.5vw,2.25rem);
    }

    .site-header-v12__brand-copy span{
        font-size:clamp(.78rem,1.15vw,.98rem);
    }

    .site-header-v12__live{
        display:block !important;
        flex:0 0 270px;
        min-width:270px;
        padding:8px 14px;
        border-left:1px solid rgba(18,50,74,.18);
        border-right:1px solid rgba(18,50,74,.18);
        font-variant-numeric:tabular-nums;
    }

    .site-header-v12__live-main{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:18px;
    }

    .site-header-v12__live-item{
        gap:5px;
    }

    .site-header-v12__live-main strong{
        font-size:1.02rem;
    }

    .site-header-v12__live-icon{
        width:20px;
        height:21px;
    }

    .site-header-v12__live-icon--wind{
        width:26px;
        height:21px;
    }

    .site-header-v12__trend{
        min-width:13px;
        font-size:.95rem;
    }

    .site-header-v12__live-rain{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
        margin-top:6px;
        font-size:.70rem;
        white-space:nowrap;
    }

    .site-header-v12__live-rain-icon{
        width:22px;
        height:19px;
    }

    .site-header-v12__datetime{
        flex:0 0 215px;
        min-width:215px;
        padding-left:0;
        border-left:0;
    }

    .site-header-v12__clock{
        font-size:clamp(1.35rem,2.25vw,2rem);
    }

    #headerDateV12{
        font-size:.87rem;
    }
}

/* Handheld layout remains without the live block for now.
   v1.5.6h will define its mobile presentation. */
@media (max-width:1000px){
    .site-header-v12__live{
        display:none !important;
    }
}

/* Dark mode: weather symbols use exactly the header clock-icon blue.
   Values stay white; trend arrows keep semantic colours. */
html[data-theme="dark"] .site-header-v12__live-icon,
html[data-theme="dark"] .site-header-v12__live-rain-icon{
    color:#176d9e;
}

html[data-theme="dark"] .site-header-v12__live-main strong,
html[data-theme="dark"] .site-header-v12__live-rain strong{
    color:#fff;
}


/* v1.5.6h – mobile live-weather layout.
   Brand stays on top; live values sit left below it, clock/date on the right. */
@media (max-width:1000px){
    .site-header-v12__top-inner{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:
            "brand brand"
            "live datetime";
        align-items:center !important;
        gap:10px 14px !important;
        padding:12px 16px 10px !important;
    }

    .site-header-v12__brand{
        grid-area:brand;
        width:100%;
        min-width:0;
    }

    .site-header-v12__live{
        grid-area:live;
        display:block !important;
        min-width:0 !important;
        width:auto !important;
        padding:8px 10px 7px 0 !important;
        border:0 !important;
        font-variant-numeric:tabular-nums;
    }

    .site-header-v12__live-main{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:13px !important;
        min-width:0;
    }

    .site-header-v12__live-item{
        display:flex;
        align-items:center;
        gap:4px !important;
        min-width:0;
        white-space:nowrap;
    }

    .site-header-v12__live-main strong{
        font-size:.92rem !important;
        font-weight:800;
        white-space:nowrap;
    }

    .site-header-v12__live-icon{
        width:18px !important;
        height:20px !important;
        flex:0 0 auto;
    }

    .site-header-v12__live-icon--wind{
        width:23px !important;
        height:20px !important;
    }

    .site-header-v12__trend{
        min-width:11px !important;
        font-size:.88rem !important;
    }

    .site-header-v12__live-rain{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:6px !important;
        margin-top:5px !important;
        font-size:.68rem !important;
        white-space:nowrap;
    }

    .site-header-v12__live-rain-icon{
        width:19px !important;
        height:17px !important;
        flex:0 0 auto;
    }

    .site-header-v12__datetime{
        grid-area:datetime;
        width:auto !important;
        min-width:138px !important;
        align-items:flex-end !important;
        padding:7px 0 7px 14px !important;
        border-top:0 !important;
        border-left:1px solid rgba(18,50,74,.16) !important;
    }

    .site-header-v12__clock{
        justify-content:flex-end;
        gap:6px !important;
        font-size:1.45rem !important;
        white-space:nowrap;
    }

    #headerDateV12{
        max-width:190px;
        text-align:right;
        font-size:.72rem !important;
        line-height:1.25;
    }
}

/* Small phones: keep live + time side by side, but tighten both blocks. */
@media (max-width:520px){
    .site-header-v12__top-inner{
        gap:8px 9px !important;
        padding-inline:12px !important;
    }

    .site-header-v12__brand{
        gap:10px !important;
    }

    .site-header-v12__logo{
        width:72px !important;
        max-width:72px !important;
        max-height:60px !important;
    }

    .site-header-v12__brand-copy{
        padding-left:9px !important;
    }

    .site-header-v12__brand-copy strong{
        font-size:1rem !important;
    }

    .site-header-v12__brand-copy span{
        font-size:.66rem !important;
        line-height:1.22 !important;
    }

    .site-header-v12__live{
        padding-right:4px !important;
    }

    .site-header-v12__live-main{
        gap:8px !important;
    }

    .site-header-v12__live-main strong{
        font-size:.80rem !important;
    }

    .site-header-v12__live-icon{
        width:16px !important;
        height:18px !important;
    }

    .site-header-v12__live-icon--wind{
        width:20px !important;
        height:18px !important;
    }

    .site-header-v12__trend{
        font-size:.78rem !important;
        min-width:9px !important;
    }

    .site-header-v12__live-rain{
        gap:4px !important;
        font-size:.60rem !important;
    }

    .site-header-v12__live-rain-icon{
        width:17px !important;
        height:15px !important;
    }

    .site-header-v12__datetime{
        min-width:116px !important;
        padding-left:9px !important;
    }

    .site-header-v12__clock{
        font-size:1.14rem !important;
        gap:4px !important;
    }

    #headerDateV12{
        max-width:132px;
        font-size:.62rem !important;
    }
}

/* Dark mode: live weather symbols use the exact same blue as the clock icon. */
html[data-theme="dark"] .site-header-v12__clock > span,
html[data-theme="dark"] .site-header-v12__live-icon,
html[data-theme="dark"] .site-header-v12__live-rain-icon{
    color:#8bc9eb !important;
}

html[data-theme="dark"] .site-header-v12__live-main strong,
html[data-theme="dark"] .site-header-v12__live-rain strong{
    color:#fff !important;
}


/* v1.5.6h1 – phone refinement after real-device review */
@media (max-width:767px){
    .site-header-v12__top-inner{
        grid-template-columns:minmax(0,1fr) minmax(150px,42%);
        gap:8px 10px !important;
    }

    .site-header-v12__live{
        min-width:0 !important;
        padding:7px 4px 7px 0 !important;
    }

    /* Temperature and wind must remain on the same row. */
    .site-header-v12__live-main{
        display:grid !important;
        grid-template-columns:max-content max-content;
        align-items:center !important;
        justify-content:start !important;
        column-gap:10px !important;
        row-gap:0 !important;
        width:100%;
    }

    .site-header-v12__live-item{
        min-width:0;
        gap:4px !important;
    }

    .site-header-v12__live-main strong{
        font-size:.86rem !important;
    }

    .site-header-v12__live-icon{
        width:17px !important;
        height:19px !important;
    }

    .site-header-v12__live-icon--wind{
        width:22px !important;
        height:19px !important;
    }

    .site-header-v12__trend{
        min-width:10px !important;
        font-size:.82rem !important;
    }

    /* Rain is a centered second row below temperature + wind. */
    .site-header-v12__live-rain{
        width:100% !important;
        justify-content:center !important;
        margin-top:6px !important;
        padding-left:0 !important;
        gap:5px !important;
        font-size:.66rem !important;
        text-align:center;
    }

    .site-header-v12__live-rain-icon{
        width:18px !important;
        height:16px !important;
    }

    /* Give the clock/date column enough room for the year. */
    .site-header-v12__datetime{
        min-width:150px !important;
        width:100% !important;
        padding-left:10px !important;
    }

    .site-header-v12__clock{
        font-size:1.22rem !important;
    }

    #headerDateV12{
        width:100%;
        max-width:none !important;
        font-size:.62rem !important;
        line-height:1.2;
        white-space:normal;
    }
}

@media (max-width:430px){
    .site-header-v12__top-inner{
        grid-template-columns:minmax(0,1fr) 145px;
        gap:7px 8px !important;
        padding-inline:10px !important;
    }

    .site-header-v12__live-main{
        column-gap:7px !important;
    }

    .site-header-v12__live-main strong{
        font-size:.81rem !important;
    }

    .site-header-v12__datetime{
        min-width:145px !important;
        padding-left:8px !important;
    }

    .site-header-v12__clock{
        font-size:1.15rem !important;
    }

    #headerDateV12{
        font-size:.59rem !important;
    }
}

/* Keep the exact same SVG symbols and semantic arrows as desktop/tablet. */
@media (max-width:767px){
    .site-header-v12__live-icon svg,
    .site-header-v12__live-rain-icon svg{
        display:block;
        width:100%;
        height:100%;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:1.9;
        stroke-linecap:round;
        stroke-linejoin:round;
    }
}


/* v1.5.6i – force the same SVG weather icons on tablet.
   Prevent inherited/global rules from falling back to black glyph-like symbols. */
@media (min-width:768px) and (max-width:1480px){
    .site-header-v12__live-icon,
    .site-header-v12__live-rain-icon{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        color:#0789c1;
        font-family:inherit !important;
        font-size:initial !important;
        font-weight:initial !important;
        line-height:1 !important;
        background:transparent !important;
    }

    .site-header-v12__live-icon svg,
    .site-header-v12__live-rain-icon svg{
        display:block !important;
        width:100% !important;
        height:100% !important;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:1.9 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;
        visibility:visible !important;
        opacity:1 !important;
    }

    .site-header-v12__live-icon--temp{
        width:20px !important;
        height:22px !important;
    }

    .site-header-v12__live-icon--wind{
        width:27px !important;
        height:22px !important;
        transform:none !important;
    }

    .site-header-v12__live-rain-icon{
        width:22px !important;
        height:19px !important;
    }

    /* Dark tablet uses exactly the same blue as the clock icon. */
    html[data-theme="dark"] .site-header-v12__live-icon,
    html[data-theme="dark"] .site-header-v12__live-rain-icon{
        color:#8bc9eb !important;
    }
}


/* v1.5.6j – colour correction ONLY; no geometry changes. */
@media (max-width:1480px){
  .site-header-v12__live-icon,
  .site-header-v12__live-rain-icon { color:#0789c1 !important; }

  html[data-theme="dark"] .site-header-v12__live-icon,
  html[data-theme="dark"] .site-header-v12__live-rain-icon { color:#8bc9eb !important; }

  .site-header-v12__trend--up,
  .site-header-v12__trend.trend-up,
  .site-header-v12__trend.is-up,
  .site-header-v12__trend.up { color:#159447 !important; }

  .site-header-v12__trend--down,
  .site-header-v12__trend.trend-down,
  .site-header-v12__trend.is-down,
  .site-header-v12__trend.down { color:#e53935 !important; }

  .site-header-v12__trend--flat,
  .site-header-v12__trend.trend-flat,
  .site-header-v12__trend.is-flat,
  .site-header-v12__trend.flat { color:#d28a00 !important; }
}


/* v1.5.6j1 – responsive hamburger menu typography only.
   Desktop untouched; no layout/spacing/header geometry changes. */
@media (max-width:1480px){
    .site-header-v12__menu-panel .site-header-v12__link{
        font-family:Verdana,Geneva,Tahoma,sans-serif !important;
        font-size:.96rem !important;
        font-weight:400 !important;
        letter-spacing:-.01em !important;
    }
}

@media (max-width:767px){
    .site-header-v12__menu-panel .site-header-v12__link{
        font-size:1rem !important;
    }
}