.vg-weather-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    padding: 18px;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.06);
    font-family: inherit;
}

.vg-weather-card__top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.vg-weather-card__eyebrow { margin-bottom:4px; font-size:14px; font-weight:700; }
.vg-weather-card__temperature { font-size:clamp(34px,8vw,48px); line-height:1; font-weight:700; }
.vg-weather-card__condition { margin-top:6px; font-size:16px; }
.vg-weather-card__icon { flex:0 0 auto; width:72px; height:72px; }
.vg-weather-card__details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(0,0,0,.08); }
.vg-weather-card__details > div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.vg-weather-card__details span { font-size:13px; opacity:.68; }
.vg-weather-card__details strong { font-size:14px; white-space:nowrap; }
.vg-weather-card__source { margin-top:12px; font-size:11px; opacity:.55; }
.vg-weather-error { padding:10px 12px; border-left:4px solid #b32d2e; background:#fff2f2; color:#7a1a1a; font-size:14px; }

/* Standalone compact shortcode */
.vg-weather-compact {
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    gap:10px;
    min-width:0;
    padding:6px 10px;
    background:transparent;
    color:inherit;
    font-family:inherit;
    line-height:1;
    white-space:nowrap;
}
.vg-weather-compact__primary,
.vg-weather-compact__secondary { display:flex; align-items:center; flex-wrap:nowrap; gap:7px; min-width:0; white-space:nowrap; }
.vg-weather-compact__icon { flex:0 0 auto; width:30px; height:30px; }
.vg-weather-compact__city { font-size:14px; font-weight:700; white-space:nowrap; }
.vg-weather-compact__temperature { font-size:18px; line-height:1; white-space:nowrap; }
.vg-weather-compact__condition,
.vg-weather-compact__item { font-size:12px; white-space:nowrap; }
.vg-weather-compact__item::before { content:"·"; margin-right:7px; opacity:.5; }

/*
 * Site weather bar
 * It is inserted AFTER header.site-header so Golo's own header flex/grid
 * is never changed by the weather plugin.
 */
.vg-weather-header-bar {
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:36px;
    padding:3px 18px;
    border-top:1px solid rgba(0,0,0,.04);
    border-bottom:1px solid rgba(0,0,0,.06);
    background:#fff;
    color:inherit;
    overflow:hidden;
    position:relative;
    z-index:20;
}

.vg-weather-header-bar .vg-weather-compact {
    width:100%;
    max-width:1440px;
    min-height:28px;
    padding:0;
    gap:8px;
    overflow:hidden;
    justify-content:center;
}

.vg-weather-header-bar .vg-weather-compact__primary,
.vg-weather-header-bar .vg-weather-compact__secondary {
    flex:0 0 auto;
    gap:6px;
    min-width:0;
}

.vg-weather-header-bar .vg-weather-compact__icon { width:22px; height:22px; }
.vg-weather-header-bar .vg-weather-compact__city { font-size:13px; }
.vg-weather-header-bar .vg-weather-compact__temperature { font-size:15px; }
.vg-weather-header-bar .vg-weather-compact__condition,
.vg-weather-header-bar .vg-weather-compact__item { font-size:12px; }

/* H/L is useful in the full weather card, but not in the navigation weather strip. */
.vg-weather-header-bar .vg-weather-compact__item:last-child { display:none; }

/* Mobile/PWA: still one intentional, slim line beneath the main header. */
@media (max-width: 767px) {
    .vg-weather-header-bar {
        min-height:34px;
        padding:3px 10px;
    }

    .vg-weather-header-bar .vg-weather-compact {
        justify-content:flex-start;
        gap:7px;
    }

    .vg-weather-header-bar .vg-weather-compact__icon { width:20px; height:20px; }
    .vg-weather-header-bar .vg-weather-compact__city { font-size:12px; }
    .vg-weather-header-bar .vg-weather-compact__temperature { font-size:14px; }
    .vg-weather-header-bar .vg-weather-compact__condition,
    .vg-weather-header-bar .vg-weather-compact__item { font-size:11px; }

    .vg-weather-header-bar .vg-weather-compact__secondary {
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .vg-weather-header-bar .vg-weather-compact__condition {
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:42vw;
    }
}

/* On very narrow phones, preserve city, temperature and rain rather than wrapping. */
@media (max-width: 390px) {
    .vg-weather-header-bar .vg-weather-compact__condition { display:none; }
    .vg-weather-header-bar .vg-weather-compact { justify-content:center; }
}


/* v0.4.1: normalise Golo home/place/post mobile templates so the site strip
 * renders identically everywhere. These rules intentionally win over page-level
 * shortcode/flex styles used by individual Golo templates. */
@media (max-width: 767px) {
    .vg-weather-header-bar {
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:3px 8px !important;
        min-height:34px !important;
        overflow:hidden !important;
    }

    .vg-weather-header-bar .vg-weather-compact {
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin:0 auto !important;
        padding:0 !important;
        gap:6px !important;
        white-space:nowrap !important;
        overflow:hidden !important;
    }

    .vg-weather-header-bar .vg-weather-compact__primary,
    .vg-weather-header-bar .vg-weather-compact__secondary {
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        width:auto !important;
        margin:0 !important;
        padding:0 !important;
        gap:5px !important;
        white-space:nowrap !important;
    }

    .vg-weather-header-bar .vg-weather-compact__secondary {
        min-width:0 !important;
        overflow:hidden !important;
    }

    .vg-weather-header-bar .vg-weather-compact__condition {
        max-width:none !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .vg-weather-header-bar .vg-weather-compact__item:last-child {
        display:none !important;
    }
}

@media (max-width: 390px) {
    .vg-weather-header-bar .vg-weather-compact__condition {
        display:none !important;
    }
}