/* ============================================================
   HOME — User-Facing Page Styles
   Layout-first CMS: sections rendered within layout grid rows
   Class names aligned with home.js
   ============================================================ */

/* ==================== PAGE CONTAINER ==================== */
.home-page {
    width: 100%;
    min-height: 100%;
    padding: 0;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

#page-home.active {
    overflow-y: auto;
}

.hv2-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 80px 20px;
    color: #1E6332;
    font-size: 1.1rem;
}

.hv2-loading i {
    font-size: 1.4rem;
    animation: progressSpin 1s linear infinite;
}

/* ==================== EDIT FAB (employee only) ==================== */
.hv2-edit-fab {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(30, 99, 50, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hv2-edit-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(30, 99, 50, 0.45);
}

.hv2-edit-fab:active {
    transform: translateY(-1px);
}

/* ==================== LAYOUT ROW SYSTEM ==================== */
.hv2-row {
    display: flex;
    gap: 0;
}

.hv2-row--full {
    display: block;
}

.hv2-row--cols {
    display: grid;
    gap: 0;
}

.hv2-col {
    min-width: 0;
}

/* ==================== SECTION WRAPPER ==================== */
.hv2-section {
    padding: 32px 24px;
}

/* Section type modifiers (for targeted overrides) */
.hv2-section--image {
    padding: 16px 24px;
}

.hv2-section--hero {
    padding: 0;
}

.hv2-section--links {
    padding: 12px 24px;
}

/* ==================== SECTION TYPE: IMAGE (LOGO) ==================== */
.hv2-image {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    display: block;
}

.hv2-image-link {
    display: inline-block;
    text-decoration: none;
}

.hv2-image-link:hover .hv2-image {
    opacity: 0.85;
}

/* ==================== SECTION TYPE: HERO ==================== */
.hv2-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 48px 32px;
}

.hv2-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hv2-hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    width: 100%;
}

/* Alignment classes (set via JS class, not data attribute) */
.hv2-align-center {
    text-align: center;
}

.hv2-align-left {
    text-align: left;
}

.hv2-align-right {
    text-align: right;
}

.hv2-hero-headline {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Futura PT', 'Jost', sans-serif;
    margin: 0 0 12px;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.hv2-hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    font-family: 'Futura PT', 'Jost', sans-serif;
    margin: 0 0 24px;
    line-height: 1.5;
}

.hv2-hero-cta {
    display: inline-block;
    background: #fff;
    color: #1E6332;
    font-family: 'Futura PT', 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hv2-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    color: #1E6332;
    text-decoration: none;
}

/* ==================== SECTION TYPE: RICH TEXT ==================== */
.hv2-richtext {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

.hv2-richtext h1 {
    color: #1E6332;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.25;
}

.hv2-richtext h2 {
    color: #1E6332;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.3;
}

.hv2-richtext h3 {
    color: #1E6332;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.35;
}

.hv2-richtext p {
    color: #333;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 14px;
}

.hv2-richtext a {
    color: #1E6332;
    text-decoration: none;
    transition: color 0.15s ease;
}

.hv2-richtext a:hover {
    color: #2F8542;
    text-decoration: underline;
}

.hv2-richtext img {
    max-width: 100%;
    border-radius: 10px;
    height: auto;
}

.hv2-richtext ul,
.hv2-richtext ol {
    padding-left: 24px;
    margin: 0 0 14px;
}

.hv2-richtext li {
    margin-bottom: 6px;
}

.hv2-richtext blockquote {
    border-left: 4px solid #1E6332;
    margin: 16px 0;
    padding: 12px 20px;
    background: #F4F0E9;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #555;
}

/* ==================== SECTION TYPE: CARD ==================== */
.hv2-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    box-sizing: border-box;
}

.hv2-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.hv2-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.hv2-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    font-family: 'Futura PT', 'Jost', sans-serif;
    margin: 0 0 8px;
}

.hv2-card-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    font-family: 'Futura PT', 'Jost', sans-serif;
    margin: 0;
}

.hv2-card-link {
    display: inline-block;
    color: #1E6332;
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    text-decoration: none;
    font-family: 'Futura PT', 'Jost', sans-serif;
    transition: color 0.15s ease;
}

.hv2-card-link:hover {
    color: #2F8542;
    text-decoration: underline;
}

/* ==================== SECTION TYPE: GALLERY ==================== */
.hv2-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

/* Column-count variants */
.hv2-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.hv2-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.hv2-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }

.hv2-gallery-item {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: #e0e0e0;
}

.hv2-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.hv2-gallery-item:hover img {
    transform: scale(1.05);
}

.hv2-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    color: #fff;
    font-size: 13px;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

/* ==================== LIGHTBOX ==================== */
.hv2-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hv2-lightbox-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hv2-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10201;
}

.hv2-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.hv2-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10201;
}

.hv2-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.hv2-lightbox-prev {
    left: 20px;
}

.hv2-lightbox-next {
    right: 20px;
}

.hv2-lightbox-img-wrap {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hv2-lightbox-img-wrap img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 8px;
    object-fit: contain;
}

.hv2-lightbox-footer {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10201;
}

.hv2-lightbox-caption {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-family: 'Futura PT', 'Jost', sans-serif;
    margin-bottom: 4px;
}

.hv2-lightbox-counter {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

/* ==================== ANNOUNCEMENT SECTION ==================== */
.hv2-announcements-strip {
    padding: 0 20px;
    margin-bottom: 16px;
}
.hv2-announcements-strip:not(:empty) {
    padding-top: 20px;
}
.hv2-banner-strip {
    display: none; /* banners integrated into announcements strip */
}

/* ==================== WELCOME BAR (Greeting + Weather) ==================== */
.hv2-welcome-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 20px;
    margin: 0 0 6px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.hv2-welcome-bar:empty { display: none; }
.hv2-wb-left { min-width: 0; flex: 1 1 auto; }
.hv2-wb-greeting {
    font-family: 'Futura PT', 'Jost', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1E6332;
    letter-spacing: 0.2px;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Slow opacity transition drives the cross-fade between rotating greetings.
       _renderWelcomeBar() adds/removes .hv2-wb-greeting--fade to animate. */
    opacity: 1;
    transition: opacity 600ms ease-in-out;
}
.hv2-wb-greeting--fade { opacity: 0; }
.hv2-wb-greet-icon {
    font-size: 22px;
    line-height: 1;
    display: inline-block;
    /* Avoid flat emoji rendering on some browsers; keep them crisp */
    transform: translateY(-1px);
}

/* Small circular refresh button next to the greeting — regenerates with a
   different variation from the same applicable pool (birthday, holiday, etc.).
   Subtle gray by default, rotates 180° + tints green on hover. */
.hv2-wb-greet-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #9ca3af;
    font-size: 11px;
    cursor: pointer;
    transition: background 160ms, color 160ms, transform 400ms ease-out;
    flex-shrink: 0;
}
.hv2-wb-greet-refresh:hover {
    background: rgba(30, 99, 50, 0.08);
    color: #1E6332;
    transform: rotate(180deg);
}
.hv2-wb-greet-refresh:active {
    transform: rotate(360deg);
    transition: transform 600ms ease-out;
}
.hv2-wb-greet-refresh i { font-size: 11px; line-height: 1; }
/* Birthday greeting gets a warm gold-tinted background bubble so it stands
   out as the special "today is YOUR day" moment without being gaudy. */
.hv2-wb-greeting.greet-birthday {
    background: linear-gradient(135deg, #FFF8E1, #FFE9B3);
    padding: 6px 14px;
    border-radius: 20px;
    color: #8B6914;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.15);
}
.hv2-wb-greeting.greet-birthday-soon {
    color: #8B6914;
}
.hv2-wb-greeting.greet-holiday {
    color: #1E6332;
}
.hv2-wb-greeting.greet-firsttime {
    color: #1E6332;
    font-weight: 700;
}
.hv2-wb-name { color: #214A3E; }
.hv2-wb-center { flex: 0 1 auto; min-width: 0; display: flex; justify-content: center; }
.hv2-wb-center:empty { display: none; }

/* Announcement widget inside welcome bar */
.hv2-wb-ann-wrap {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #e8e4df;
    border-radius: 14px;
    padding: 8px 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    max-width: 420px;
    min-width: 260px;
    max-height: 320px;
    overflow: hidden;
}
.hv2-wb-ann-wrap[data-total="1"] { min-width: 240px; }
.hv2-wb-ann-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.hv2-wb-ann-headline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.hv2-wb-ann-pulse {
    position: relative;
    width: 8px; height: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hv2-wb-ann-pulse span {
    width: 8px; height: 8px;
    background: #1E6332;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(30, 99, 50, 0.5);
    animation: hv2WbAnnPulse 2s infinite;
}
@keyframes hv2WbAnnPulse {
    0%   { box-shadow: 0 0 0 0 rgba(30, 99, 50, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(30, 99, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 99, 50, 0); }
}
.hv2-wb-ann-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #1E6332;
    font-family: 'Futura PT', 'Jost', sans-serif;
}
.hv2-wb-ann-count {
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7280;
    background: #F4F0E9;
    padding: 1px 7px;
    border-radius: 10px;
}
.hv2-wb-ann-badges { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.hv2-wb-ann-badge {
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(30, 99, 50, 0.25);
}
.hv2-wb-ann-ack {
    font-size: 10.5px;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #fde68a;
}

/* Stacked announcement list — scrolls vertically inside the block when overflowing.
   Scrollbars are fully hidden (list is still fully scrollable via wheel / touch / keys). */
.hv2-wb-ann-cards {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    /* Firefox */
    scrollbar-width: none;
    /* IE / legacy Edge */
    -ms-overflow-style: none;
}
.hv2-wb-ann-cards::-webkit-scrollbar {
    /* Chromium / WebKit */
    width: 0;
    height: 0;
    display: none;
}
.hv2-wb-ann-cards--list { /* shared with block context */ }
.hv2-wb-ann-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.hv2-wb-ann-card:hover {
    background: #fafaf8;
    box-shadow: inset 3px 0 0 #1E6332;
}
.hv2-wb-ann-card.is-unread {
    background: #f0faf4;
}
.hv2-wb-ann-card.is-unread:hover {
    background: #e7f5ee;
    box-shadow: inset 3px 0 0 #1E6332;
}

/* Empty state — shown when the header is present but no announcements exist */
.hv2-wb-ann-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
    text-align: center;
    justify-content: center;
}
.hv2-wb-ann-empty i { font-size: 16px; color: #c8c4bd; }
.hv2-wb-ann-icon {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.hv2-wb-ann-body { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.hv2-wb-ann-title {
    font-family: 'Futura PT', 'Jost', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #231F20;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hv2-wb-ann-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: nowrap; overflow: hidden; }
.hv2-wb-ann-cat-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 8px;
    white-space: nowrap;
}
.hv2-wb-ann-mini-ack {
    font-size: 10.5px;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    padding: 1px 7px;
    border-radius: 8px;
    white-space: nowrap;
}
.hv2-wb-ann-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #1E6332;
    flex: 0 0 7px;
}
.hv2-wb-ann-chev { color: #9ca3af; font-size: 11px; flex-shrink: 0; }

@media (max-width: 768px) {
    .hv2-welcome-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px;
        gap: 10px;
    }
    .hv2-wb-greeting { font-size: 16px; }
    .hv2-wb-center { justify-content: stretch; }
    .hv2-wb-ann-wrap { max-width: none; }
}

/* ==================== ANNOUNCEMENTS BLOCK (singleton home-builder block) ==================== */
/* Container rendered by _renderAnnouncementsBlock. The inner .hv2-wb-ann-wrap
   fills the block's position; the stacked list inside scrolls when the number
   of announcements exceeds the block's height. Users can resize the block
   via the right-side panel if they want more items visible at once. */
.eff-ann-block {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}
.eff-ann-block .hv2-wb-ann-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100%;
    max-height: none;
    padding: 10px 14px;
    gap: 8px;
}
.eff-ann-block .hv2-wb-ann-head {
    flex: 0 0 auto;
}
.eff-ann-block .hv2-wb-ann-cards {
    flex: 1 1 auto;
    min-height: 0;
}

/* ==================== COMPACT ANNOUNCEMENTS ==================== */
.hv2-ann-section .hv2-ann-header { padding: 8px 14px; }
.hv2-ann-section .hv2-ann-title { font-size: 13px; }
.hv2-ann-section .hv2-ann-icon { font-size: 13px; }
.hv2-ann-section .hv2-ann-card { padding: 8px 14px; gap: 10px; }
.hv2-ann-section .hv2-ann-card-icon { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
.hv2-ann-section .hv2-ann-card-title { font-size: 13px; }
.hv2-ann-section .hv2-ann-card-preview {
    font-size: 12px;
    margin-top: 1px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hv2-ann-section .hv2-ann-card-meta { gap: 8px; }
.hv2-ann-section .hv2-ann-card-time { font-size: 11px; }

/* Section wrapper */
.hv2-ann-section {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e8e4df;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* Header */
.hv2-ann-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    gap: 10px;
}
.hv2-ann-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.hv2-ann-icon {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
}
.hv2-ann-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    font-family: 'Futura PT', 'Jost', sans-serif;
    letter-spacing: 0.3px;
}
.hv2-ann-unread-badge {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.18);
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.hv2-ann-ack-badge {
    font-size: 11px;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.hv2-ann-view-all {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Futura PT', 'Jost', sans-serif;
}
.hv2-ann-view-all:hover {
    background: rgba(255,255,255,0.22);
}
.hv2-ann-view-all i {
    margin-left: 4px;
    font-size: 10px;
    transition: transform 0.2s;
}
.hv2-ann-view-all:hover i {
    transform: translateX(3px);
}

/* Cards container */
.hv2-ann-cards {
    display: flex;
    flex-direction: column;
}

/* Individual card */
.hv2-ann-card {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f2f0ed;
    position: relative;
}
.hv2-ann-card:last-child {
    border-bottom: none;
}
.hv2-ann-card:hover {
    background: #fafaf8;
}
.hv2-ann-card.hv2-ann-new {
    background: linear-gradient(90deg, color-mix(in srgb, var(--hv2-ann-color) 4%, #fff) 0%, #fff 60%);
}
.hv2-ann-card.hv2-ann-new:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--hv2-ann-color) 7%, #fff) 0%, #fafaf8 60%);
}

/* Left accent bar for pinned/banner items */
.hv2-ann-card-accent {
    display: none;
}
.hv2-ann-card.hv2-ann-pinned .hv2-ann-card-accent {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--hv2-ann-color), color-mix(in srgb, var(--hv2-ann-color) 60%, #000));
    border-radius: 0;
}

/* Urgent pulse */
.hv2-ann-card.hv2-ann-urgent {
    animation: hv2AnnUrgent 3s ease-in-out infinite;
}
@keyframes hv2AnnUrgent {
    0%, 100% { background: #fff; }
    50% { background: #fef2f2; }
}

/* Category icon circle */
.hv2-ann-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

/* Body */
.hv2-ann-card-body {
    flex: 1;
    min-width: 0;
}
.hv2-ann-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hv2-ann-card-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #231F20;
    font-family: 'Futura PT', 'Jost', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.hv2-ann-cat-chip {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hv2-ann-cat-chip i {
    font-size: 9px;
}
.hv2-ann-pri {
    font-size: 12px;
    line-height: 1;
}
.hv2-ann-pri.urgent { color: #dc2626; }
.hv2-ann-pri.important { color: #d97706; }
.hv2-ann-pin {
    font-size: 10px;
    color: #C19A6B;
    transform: rotate(30deg);
}
.hv2-ann-card-preview {
    font-size: 12.5px;
    color: #6b7280;
    margin: 3px 0 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 480px;
}

/* Right meta */
.hv2-ann-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.hv2-ann-card-time {
    font-size: 11.5px;
    color: #9ca3af;
    white-space: nowrap;
}
.hv2-ann-card-ack {
    color: #d97706;
    font-size: 13px;
}
.hv2-ann-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1E6332;
    flex-shrink: 0;
    animation: hv2AnnDotPulse 2s ease-in-out infinite;
}
@keyframes hv2AnnDotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.hv2-ann-card-chevron {
    font-size: 11px;
    color: #d1d5db;
    transition: all 0.2s;
}
.hv2-ann-card:hover .hv2-ann-card-chevron {
    color: var(--hv2-ann-color, #1E6332);
    transform: translateX(2px);
}

/* ==================== SECTION TYPE: VIDEO ==================== */
.hv2-video {
    width: 100%;
    overflow: hidden;
}

.hv2-video iframe,
.hv2-video video {
    display: block;
    width: 100%;
    border: none;
}

.hv2-video-caption {
    font-size: 13px;
    color: #666;
    font-family: 'Futura PT', 'Jost', sans-serif;
    margin: 8px 0 0;
    text-align: center;
    line-height: 1.5;
}

/* ==================== SECTION TYPE: EMBED ==================== */
.hv2-embed {
    width: 100%;
    overflow: hidden;
}

.hv2-embed iframe {
    display: block;
    width: 100%;
    border: none;
}

/* ==================== SECTION TYPE: SOCIAL LINKS ==================== */
.hv2-social {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    padding: 16px;
    flex-wrap: wrap;
}

.hv2-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.hv2-social a:hover {
    transform: scale(1.1);
}

/* ==================== SECTION TYPE: COUNTDOWN ==================== */
.hv2-countdown {
    text-align: center;
    padding: 30px;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

.hv2-cd-num {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* ==================== SECTION TYPE: COLUMNS ==================== */
.hv2-columns {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.hv2-column {
    line-height: 1.7;
    font-family: 'Futura PT', 'Jost', sans-serif;
    font-size: 15px;
    color: #333;
    min-width: 0;
    word-wrap: break-word;
}

.hv2-column img {
    max-width: 100%;
    height: auto;
}

.hv2-column a {
    color: #1E6332;
    text-decoration: none;
}

.hv2-column a:hover {
    color: #2F8542;
    text-decoration: underline;
}

/* ==================== SECTION TYPE: ACCORDION / FAQ ==================== */
.hv2-accordion {
    padding: 16px;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

.hv2-accordion-item {
    border-radius: 8px;
    overflow: hidden;
}

.hv2-accordion-item summary {
    padding: 14px 18px;
    font-weight: 600;
    cursor: pointer;
    font-size: 15px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    color: #231F20;
    transition: background 0.15s ease;
}

.hv2-accordion-item summary:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* Remove default marker in all browsers */
.hv2-accordion-item summary::-webkit-details-marker {
    display: none;
}

.hv2-accordion-item summary::marker {
    display: none;
    content: '';
}

/* Rotate icon when open */
.hv2-accordion-item[open] summary i {
    transform: rotate(180deg);
}

.hv2-accordion-item summary i {
    font-size: 12px;
    color: #999;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

/* ==================== SECTION TYPE: DOCUMENT ==================== */
.hv2-document {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

.hv2-document iframe {
    display: block;
    width: 100%;
    border: none;
    min-height: 300px;
}

.hv2-doc-download {
    color: #1E6332;
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
    display: inline-block;
    text-decoration: none;
    transition: color 0.15s ease;
}

.hv2-doc-download:hover {
    color: #2F8542;
    text-decoration: underline;
}

/* ==================== SECTION TYPE: MAP ==================== */
.hv2-map {
    width: 100%;
}

.hv2-map iframe {
    display: block;
    width: 100%;
    border: none;
}

/* ==================== CANVAS BLOCK OVERRIDES (section types in free-form layout) ====================
   These rules make each block type fill its container on BOTH the live page
   (.hv2-canvas-block) AND the HUB Settings builder canvas (.hb-block-content).
   Without the builder selector, blocks with a min-height (e.g. .hv2-hero has
   min-height: 320px) show at their natural size leaving white space below. */
.hv2-canvas-block .hv2-video,
.hb-block-content .hv2-video {
    height: 100%;
}

.hv2-canvas-block .hv2-video iframe,
.hv2-canvas-block .hv2-video video,
.hb-block-content .hv2-video iframe,
.hb-block-content .hv2-video video {
    height: 100%;
    aspect-ratio: auto;
}

.hv2-canvas-block .hv2-embed,
.hb-block-content .hv2-embed {
    height: 100%;
}

.hv2-canvas-block .hv2-embed iframe,
.hb-block-content .hv2-embed iframe {
    height: 100%;
}

.hv2-canvas-block .hv2-countdown,
.hb-block-content .hv2-countdown {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hv2-canvas-block .hv2-columns,
.hb-block-content .hv2-columns {
    height: 100%;
}

.hv2-canvas-block .hv2-accordion,
.hb-block-content .hv2-accordion {
    height: 100%;
    overflow: auto;
}

.hv2-canvas-block .hv2-document,
.hb-block-content .hv2-document {
    height: 100%;
}

.hv2-canvas-block .hv2-document iframe,
.hb-block-content .hv2-document iframe {
    height: 100%;
    min-height: 0;
}

.hv2-canvas-block .hv2-map,
.hb-block-content .hv2-map {
    height: 100%;
}

.hv2-canvas-block .hv2-map iframe,
.hb-block-content .hv2-map iframe {
    height: 100%;
}

/* ==================== EMPTY STATE ==================== */
.hv2-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.hv2-empty-icon {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 16px;
}

.hv2-empty-icon i {
    font-size: inherit;
    color: inherit;
}

.hv2-empty-title {
    color: #666;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Futura PT', 'Jost', sans-serif;
    margin-bottom: 6px;
}

.hv2-empty-text {
    color: #999;
    font-size: 14px;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

/* ==================== RESPONSIVE (MOBILE) ==================== */
@media (max-width: 768px) {
    .hv2-row--cols {
        display: flex;
        flex-direction: column;
    }

    .hv2-hero {
        min-height: 220px;
        padding: 24px 16px;
    }

    .hv2-hero-headline {
        font-size: 1.6rem;
    }

    .hv2-hero-subtitle {
        font-size: 0.95rem;
    }

    .hv2-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .hv2-gallery--cols-3,
    .hv2-gallery--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .hv2-section {
        padding: 20px 16px;
    }

    .hv2-edit-fab {
        bottom: 80px;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .hv2-lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .hv2-lightbox-prev {
        left: 10px;
    }

    .hv2-lightbox-next {
        right: 10px;
    }

    .hv2-card {
        padding: 20px;
    }

    .hv2-richtext {
        max-width: 100%;
    }

    .hv2-links-nav {
        justify-content: flex-start;
    }

    .hv2-card-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    /* Video */
    .hv2-video-caption {
        font-size: 12px;
    }

    /* Countdown */
    .hv2-countdown {
        padding: 20px 12px;
    }

    .hv2-cd-num {
        font-size: 24px;
    }

    /* Columns — stack on mobile */
    .hv2-columns {
        display: flex !important;
        flex-direction: column;
        gap: 12px !important;
        padding: 12px;
    }

    /* Accordion */
    .hv2-accordion {
        padding: 12px;
    }

    .hv2-accordion-item summary {
        padding: 12px 14px;
        font-size: 14px;
    }

    /* Document */
    .hv2-document {
        padding: 16px;
        gap: 12px;
    }

    .hv2-document i {
        font-size: 28px !important;
    }

    /* Social */
    .hv2-social {
        padding: 12px;
    }

    /* Map */
    .hv2-map iframe {
        min-height: 200px;
    }
}

/* ==================== CANVAS LAYOUT (Free-form) ==================== */

.hv2-canvas {
    margin: 0;
    width: 100%;
}

.hv2-canvas-block {
    border-radius: 0;
}

/* Canvas-layout sections fill their block exactly — NO extra padding at the
   wrapper level. The default .hv2-section 32×24 padding is for grid-layout
   contexts (classic, portal, etc.) where sections stack in rows and need
   breathing space. Canvas blocks are absolute-positioned at user-chosen
   coordinates, so any extra padding here makes the live page look "inflated"
   compared to the builder canvas. Each section type's own renderer adds its
   own internal padding where it wants. */
.hv2-canvas-block .hv2-section {
    width: 100%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
}

.hv2-canvas-block .hv2-image,
.hb-block-content .hv2-image {
    width: 100%;
    height: 100%;
    max-height: none;
    /* object-fit comes from the renderer's inline style (user's Fit Mode choice) */
}

.hv2-canvas-block .hv2-hero,
.hb-block-content .hv2-hero {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hv2-canvas-block .hv2-card,
.hb-block-content .hv2-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hv2-canvas-block .hv2-richtext,
.hb-block-content .hv2-richtext {
    height: 100%;
    overflow: auto;
}

.hv2-canvas-block .hv2-gallery,
.hb-block-content .hv2-gallery {
    height: 100%;
}

.hv2-canvas-block .hv2-gallery-grid,
.hb-block-content .hv2-gallery-grid {
    height: 100%;
    overflow: hidden;
}

/* ---- Mobile: stacked vertically ---- */
.hv2-canvas-mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.hv2-canvas-mobile-block {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.hv2-canvas-mobile-block .hv2-section {
    width: 100%;
}

/* ==================== CALENDAR + WEATHER BLOCK ====================
   Shared styles also duplicated in home-builder.css so the widget looks
   identical whether rendered inside HUB Settings (builder canvas / preview
   window) or on the live published Home page. Class prefix .eff-calwx-*
   avoids collision with other widgets. Accent color injected via
   --calwx-accent custom property on the root element.
   ================================================================== */
.eff-calwx {
    --calwx-accent: #1E6332;
    position: relative;
    height: 100%;
    background: #fff;
    overflow: hidden;
    border: 1px solid #e8e4df;
    box-shadow: 0 4px 16px rgba(30, 99, 50, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    font-family: 'Futura PT', 'Jost', sans-serif;
    color: #231F20;
}

/* -- Weather header band — readable sizing with optional details sub-row -- */
.eff-calwx-wx {
    position: relative;
    background: linear-gradient(135deg, var(--calwx-accent) 0%, #2F8542 55%, #18A74B 100%);
    color: #fff;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}
.eff-calwx-wx-icon {
    font-size: 34px;
    line-height: 1;
    opacity: 0.95;
    animation: effCalwxFloat 3.2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}
.eff-calwx-wx-body { line-height: 1.15; }
.eff-calwx-wx-temp {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.4px;
}
.eff-calwx-wx-temp span {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
    margin-left: 2px;
}
.eff-calwx-wx-cond {
    font-size: 14px;
    opacity: 0.95;
    font-weight: 500;
    margin-top: 2px;
}
.eff-calwx-wx-meta {
    justify-self: end;
    text-align: right;
    font-size: 12.5px;
    opacity: 0.95;
    line-height: 1.45;
}
.eff-calwx-wx-loc,
.eff-calwx-wx-hilo { white-space: nowrap; }
.eff-calwx-wx-loc i { margin-right: 4px; font-size: 11px; }
.eff-calwx-wx-hilo i { font-size: 10px; }
.eff-calwx-wx-hilo i.fa-arrow-down { margin-left: 4px; }
.eff-calwx-wx-shine {
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);
    animation: effCalwxShine 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes effCalwxFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes effCalwxShine {
    0%      { left: -40%; }
    60%     { left: 120%; }
    100%    { left: 120%; }
}

/* -- Calendar body — tight spacing -- */
.eff-calwx-body {
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 4px;
}
.eff-calwx-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.eff-calwx-head-center {
    flex: 1;
    min-width: 0;
    text-align: center;
    line-height: 1.1;
}
.eff-calwx-month {
    font-size: 13px;
    font-weight: 700;
    color: #231F20;
    letter-spacing: 0.2px;
}
.eff-calwx-today {
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
    margin-top: 2px;
    letter-spacing: 0.2px;
}
.eff-calwx-today:empty { display: none; }
.eff-calwx-view {
    font-size: 9px;
    color: #9ca3af;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.eff-calwx-view i { margin-right: 3px; }
.eff-calwx-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.eff-calwx-dow > div {
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.5px;
    padding: 1px 0;
}

/* Grid */
.eff-calwx-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(24px, 1fr);
    gap: 2px;
    flex: 1;
    min-height: 0;
}
.eff-calwx-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    color: #475453;
    cursor: default;
    padding: 1px 0;
    transition: background 0.16s ease, transform 0.16s ease;
    min-height: 24px;
}
.eff-calwx-cell:hover { background: #F4F0E9; }
.eff-calwx-cell--empty { visibility: hidden; }
.eff-calwx-cell--today {
    background: var(--calwx-accent);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.32);
    animation: effCalwxTodayPulse 2.6s ease-in-out infinite;
}
.eff-calwx-cell--today:hover {
    background: var(--calwx-accent);
    transform: scale(1.04);
}
.eff-calwx-num { line-height: 1; }
.eff-calwx-dots {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    height: 6px;
    align-items: center;
    justify-content: center;
}
.eff-calwx-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}
/* Legacy single-color dot (kept for back-compat with any consumer that
   still injects the --has class). */
.eff-calwx-dot--has    { background: #1E6332; box-shadow: 0 0 0 2px rgba(30, 99, 50, 0.18); }
/* Per-kind colored dots so users can see at a glance which categories
   live on a given date. Blue=Event, Caramel=Announcement, Green=Funded. */
.eff-calwx-dot--event  { background: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18); }
.eff-calwx-dot--ann    { background: #C19A6B; box-shadow: 0 0 0 2px rgba(193, 154, 107, 0.22); }
.eff-calwx-dot--funded { background: #1E6332; box-shadow: 0 0 0 2px rgba(30, 99, 50, 0.20); }
.eff-calwx-dot--draft  { background: #C19A6B; box-shadow: 0 0 0 2px rgba(193, 154, 107, 0.22); }
.eff-calwx-dot--esign  { background: #d97706; box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.22); }

/* Text count chips ("1 Event", "5 Funded Claims") — hidden by default in
   the live widget context. The Native Home full-cal modal overrides this
   to display them via `.hn-fullcal-body .eff-calwx-chips { display: flex }`
   (higher specificity). The DOM is always emitted by the cell renderer so
   either context can pick what to show. */
.eff-calwx-chips { display: none; }

/* Count badge in the top-right corner for busy days (4+ items). Small
   neutral pill so the day number stays the focal point. */
.eff-calwx-count {
    position: absolute;
    top: 3px;
    right: 4px;
    background: #1E6332;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 1.5px #fff;
}
.eff-calwx-cell--today .eff-calwx-count { background: #fff; color: #1E6332; box-shadow: 0 0 0 1.5px #1E6332; }
.eff-calwx-cell--today .eff-calwx-dot--has {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

@keyframes effCalwxTodayPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(30, 99, 50, 0.32); }
    50%      { box-shadow: 0 2px 14px rgba(30, 99, 50, 0.55); }
}


/* Weather loading state (while fetching) */
.eff-calwx-wx-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.95;
}

/* Weather fallback — "Show me my weather" button inside green header */
.eff-calwx-wx--error {
    grid-template-columns: 1fr;
    padding: 10px 14px;
}
.eff-calwx-wx-btn {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    width: 100%;
}
.eff-calwx-wx-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}
.eff-calwx-wx-btn i { font-size: 16px; margin-bottom: 3px; }
.eff-calwx-wx-btn-main { font-size: 13px; font-weight: 700; }
.eff-calwx-wx-btn-sub { font-size: 10.5px; opacity: 0.85; font-weight: 500; }

/* ==================== LOCATION PERMISSION HELP MODAL ==================== */
.eff-calwx-loc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 22, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10200;
    padding: 20px;
    animation: effCalwxLocOverlayIn 180ms ease-out;
}
@keyframes effCalwxLocOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.eff-calwx-loc-modal {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Futura PT', 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
    animation: effCalwxLocModalIn 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes effCalwxLocModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.eff-calwx-loc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    color: #fff;
}
.eff-calwx-loc-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.eff-calwx-loc-head-text { flex: 1; min-width: 0; }
.eff-calwx-loc-title { font-size: 17px; font-weight: 700; line-height: 1.2; }
.eff-calwx-loc-sub { font-size: 12.5px; opacity: 0.85; margin-top: 2px; }
.eff-calwx-loc-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 120ms;
}
.eff-calwx-loc-close:hover { background: rgba(255,255,255,0.28); }
.eff-calwx-loc-body {
    padding: 20px 22px;
    overflow-y: auto;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.55;
}
.eff-calwx-loc-intro {
    margin: 0 0 16px;
    color: #374151;
}
.eff-calwx-loc-steps {
    margin: 0 0 14px;
    padding-left: 22px;
    color: #1f2937;
}
.eff-calwx-loc-steps li {
    margin-bottom: 10px;
}
.eff-calwx-loc-steps li b { color: #1E6332; }
.eff-calwx-loc-macnote {
    margin-top: 14px;
    padding: 12px 14px;
    background: #F4F0E9;
    border-left: 3px solid #C19A6B;
    border-radius: 6px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: #3f2c14;
}
.eff-calwx-loc-macnote i { color: #C19A6B; font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.eff-calwx-loc-macnote b { color: #6B4A28; }
.eff-calwx-loc-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}
.eff-calwx-loc-btn {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: transform 120ms, box-shadow 120ms, background 120ms;
}
.eff-calwx-loc-btn--secondary {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}
.eff-calwx-loc-btn--secondary:hover { background: #f3f4f6; }
.eff-calwx-loc-btn--primary {
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(30, 99, 50, 0.35);
}
.eff-calwx-loc-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.45);
}
@media (max-width: 600px) {
    .eff-calwx-loc-overlay { padding: 0; align-items: flex-end; }
    .eff-calwx-loc-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        animation: effCalwxLocSheetIn 240ms cubic-bezier(0.2, 0.9, 0.3, 1.05);
    }
    @keyframes effCalwxLocSheetIn {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .eff-calwx-loc-header { padding: 16px 18px; }
    .eff-calwx-loc-body { padding: 18px; font-size: 13.5px; }
    .eff-calwx-loc-footer { padding: 12px 16px env(safe-area-inset-bottom, 12px); }
    .eff-calwx-loc-btn { flex: 1; justify-content: center; }
}

/* Month nav buttons */
.eff-calwx-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.eff-calwx-nav {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.eff-calwx-nav:hover {
    background: #F4F0E9;
    color: var(--calwx-accent);
}

/* Cell states */
.eff-calwx-cell--skeleton {
    background: linear-gradient(90deg, #f3f2ec 25%, #faf8f3 50%, #f3f2ec 75%);
    background-size: 200% 100%;
    animation: effCalwxSkel 1.4s ease-in-out infinite;
    cursor: default;
}
@keyframes effCalwxSkel {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Adjacent-month days (start/end of grid that bleed in from the previous/next month)
   are rendered clearly dimmed so users instantly see they're outside the current month. */
.eff-calwx-cell--other {
    color: #cbd5e1;
    background: #f7f6f3;
    font-weight: 400;
    opacity: 0.85;
    cursor: default;
}
.eff-calwx-cell--other:hover {
    background: #f7f6f3;
    transform: none;
}
.eff-calwx-cell--has-events {
    cursor: pointer;
    outline: none;
}
.eff-calwx-cell--has-events:focus-visible {
    background: #F4F0E9;
    box-shadow: 0 0 0 2px var(--calwx-accent);
}
.eff-calwx-cell--has-events:hover {
    background: #F4F0E9;
    transform: translateY(-1px);
}
.eff-calwx-cell--today.eff-calwx-cell--has-events:hover {
    background: var(--calwx-accent);
    transform: translateY(-1px) scale(1.04);
}

/* Event popover — floating panel anchored near the clicked date cell */
.eff-calwx-pop {
    position: fixed;
    /* z-index 10300 — must sit above the Native Home full-calendar modal
       (10110) and the calendar event-detail modal (10200) so it floats over
       both contexts. The popover and event-detail modal never coexist
       (popover closes before opening the detail), so 10300 is safe. */
    z-index: 10300;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8e4df;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    font-family: 'Futura PT', 'Jost', sans-serif;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}
.eff-calwx-pop--in {
    opacity: 1;
    transform: translateY(0);
}
.eff-calwx-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    gap: 10px;
    flex-shrink: 0;
}
.eff-calwx-pop-date {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.eff-calwx-pop-close {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.15s ease;
}
.eff-calwx-pop-close:hover { background: rgba(255, 255, 255, 0.35); }
.eff-calwx-pop-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px;
}
.eff-calwx-pop-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.eff-calwx-pop-item + .eff-calwx-pop-item { border-top: 1px solid #f5f3ef; }
.eff-calwx-pop-item:hover { background: #fafaf7; }
.eff-calwx-pop-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.eff-calwx-pop-body { flex: 1; min-width: 0; line-height: 1.35; }
.eff-calwx-pop-title {
    font-size: 13px;
    font-weight: 700;
    color: #231F20;
    margin-bottom: 2px;
}
.eff-calwx-pop-sub {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    margin-bottom: 4px;
}
.eff-calwx-pop-desc {
    font-size: 12px;
    color: #475453;
    line-height: 1.45;
    margin-top: 2px;
}
.eff-calwx-pop-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--calwx-accent, #1E6332);
    text-decoration: none;
}
.eff-calwx-pop-link:hover { text-decoration: underline; }
.eff-calwx-pop-link i { font-size: 9px; }

/* Second-row weather details (feels-like, humidity, wind) */
.eff-calwx-wx-details {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    opacity: 0.95;
}
.eff-calwx-wx-details span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.eff-calwx-wx-details i { font-size: 11px; opacity: 0.9; }

/* "View Details" button row inside popover item */
.eff-calwx-pop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}
.eff-calwx-pop-viewbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit;
    padding: 5px 10px;
    border-radius: 6px;
    background: transparent;
    color: var(--pop-btn-color, #1E6332);
    border: 1px solid var(--pop-btn-color, #1E6332);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.eff-calwx-pop-viewbtn:hover {
    background: var(--pop-btn-color, #1E6332);
    color: #fff;
    transform: translateY(-1px);
}
.eff-calwx-pop-viewbtn i { font-size: 11px; }

/* ==================== EVENT DETAIL MODAL (full overlay) ==================== */
.eff-calwx-ev-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    /* No backdrop blur over the heavy home page behind (input lag). */
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.eff-calwx-ev-overlay--in { opacity: 1; }

.eff-calwx-ev-modal {
    background: #fff;
    border-radius: 16px;
    width: 80vw;
    min-width: 80vw;
    max-width: 92vw;
    min-height: 80vh;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.12);
    font-family: 'Futura PT', 'Jost', sans-serif;
    transform: scale(0.95) translateY(8px);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.eff-calwx-ev-overlay--in .eff-calwx-ev-modal {
    transform: scale(1) translateY(0);
}

.eff-calwx-ev-header {
    position: relative;
    padding: 22px 22px 20px;
    color: #fff;
    flex-shrink: 0;
}
.eff-calwx-ev-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.eff-calwx-ev-close:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: scale(1.05);
}
.eff-calwx-ev-header-top {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.eff-calwx-ev-cat,
.eff-calwx-ev-multi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
}
.eff-calwx-ev-cat i,
.eff-calwx-ev-multi i { font-size: 11px; }
.eff-calwx-ev-title {
    margin: 0 36px 8px 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    letter-spacing: 0.1px;
}
.eff-calwx-ev-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}
.eff-calwx-ev-date i { font-size: 11px; opacity: 0.85; }

.eff-calwx-ev-body {
    padding: 20px 22px 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.eff-calwx-ev-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.eff-calwx-ev-field-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.eff-calwx-ev-field-label i { color: #1E6332; font-size: 11px; }
.eff-calwx-ev-field-value {
    font-size: 14px;
    color: #231F20;
    line-height: 1.45;
}
.eff-calwx-ev-desc {
    font-size: 14px;
    color: #475453;
    line-height: 1.6;
    word-wrap: break-word;
}

/* Rich HTML description rendering — matches RTE styling for consistency */
.eff-calwx-ev-rich h1 { font-size: 22px; font-weight: 700; margin: 10px 0 6px; color: #231F20; line-height: 1.25; }
.eff-calwx-ev-rich h2 { font-size: 19px; font-weight: 700; margin: 10px 0 6px; color: #231F20; line-height: 1.25; }
.eff-calwx-ev-rich h3 { font-size: 16px; font-weight: 700; margin: 8px 0 5px; color: #231F20; line-height: 1.3; }
.eff-calwx-ev-rich p { margin: 8px 0; }
.eff-calwx-ev-rich ul,
.eff-calwx-ev-rich ol { padding-left: 24px; margin: 8px 0; }
.eff-calwx-ev-rich li { margin: 2px 0; }
.eff-calwx-ev-rich a {
    color: #1E6332;
    text-decoration: underline;
    font-weight: 600;
}
.eff-calwx-ev-rich a:hover { color: #2F8542; }
.eff-calwx-ev-rich strong, .eff-calwx-ev-rich b { font-weight: 700; color: #231F20; }
.eff-calwx-ev-rich img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.eff-calwx-ev-rich iframe {
    max-width: 100%;
    border-radius: 8px;
    margin: 10px 0;
}
.eff-calwx-ev-rich video {
    max-width: 100%;
    border-radius: 8px;
    margin: 10px 0;
}
/* Preserve the 16:9 wrapper around embedded videos */
.eff-calwx-ev-rich .hb-cal-embed {
    position: relative;
    padding-top: 56.25%;
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
}
.eff-calwx-ev-rich .hb-cal-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
}
.eff-calwx-ev-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1E6332;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 8px;
    background: #F4F0E9;
    border: 1px solid #e8e4df;
    word-break: break-all;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    align-self: flex-start;
}
.eff-calwx-ev-link:hover {
    background: #1E6332;
    color: #fff;
    border-color: #1E6332;
    transform: translateY(-1px);
}
.eff-calwx-ev-link i { font-size: 11px; opacity: 0.85; }

.eff-calwx-ev-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 20px;
    color: #9ca3af;
    font-size: 13px;
    font-style: italic;
    background: #fafaf7;
    border-radius: 10px;
    border: 1px dashed #e8e4df;
}
.eff-calwx-ev-empty i { color: #C19A6B; font-size: 16px; }

/* Responsive: tighten spacing in narrow containers */
@media (max-width: 480px) {
    .eff-calwx-wx {
        padding: 10px 12px;
        grid-template-columns: auto 1fr;
        gap: 10px;
    }
    .eff-calwx-wx-icon { font-size: 26px; }
    .eff-calwx-wx-temp { font-size: 22px; }
    .eff-calwx-wx-meta { display: none; }
    .eff-calwx-wx-details {
        gap: 10px;
        font-size: 10.5px;
        padding-top: 6px;
        margin-top: 2px;
    }
    .eff-calwx-body { padding: 12px 12px 8px; }
    .eff-calwx-cell { font-size: 10.5px; min-height: 24px; }
    .eff-calwx-pop { max-width: calc(100vw - 20px); }
    .eff-calwx-ev-overlay { padding: 12px; }
    .eff-calwx-ev-modal {
        width: 96vw; min-width: 0; max-width: 96vw;
        min-height: 0; max-height: calc(100vh - 24px); border-radius: 14px;
    }
    .eff-calwx-ev-header { padding: 18px 18px 16px; }
    .eff-calwx-ev-title { font-size: 18px; }
    .eff-calwx-ev-body { padding: 16px 18px 20px; gap: 14px; }
}

/* ==================== IN-APP LINK MODAL ====================
   Used when a block's link target is "_modal" — opens the URL in a centered
   iframe without leaving the hub. Overlay + card pattern with a header bar
   that shows the page label + an "open in new tab" shortcut + close button. */
.hv2-linkmodal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.hv2-linkmodal-overlay--in { opacity: 1; }

.hv2-linkmodal {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.18);
    font-family: 'Futura PT', 'Jost', sans-serif;
    transform: scale(0.96) translateY(6px);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.hv2-linkmodal-overlay--in .hv2-linkmodal {
    transform: scale(1) translateY(0);
}

.hv2-linkmodal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    flex-shrink: 0;
}
.hv2-linkmodal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.hv2-linkmodal-title > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.hv2-linkmodal-title i { font-size: 12px; opacity: 0.85; flex-shrink: 0; }

.hv2-linkmodal-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.hv2-linkmodal-open,
.hv2-linkmodal-close {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.hv2-linkmodal-open:hover,
.hv2-linkmodal-close:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: scale(1.05);
}

.hv2-linkmodal-frame {
    flex: 1 1 auto;
    width: 100%;
    border: none;
    background: #fafaf8;
    min-height: 0;
}

@media (max-width: 768px) {
    .hv2-linkmodal-overlay { padding: 12px; }
    .hv2-linkmodal {
        max-height: calc(100vh - 24px);
        border-radius: 10px;
    }
    .hv2-linkmodal-head { padding: 8px 12px; }
    .hv2-linkmodal-title { font-size: 12px; }
}