/*!
 * Etz Chaim Calendar — frontend styles
 * Loaded by the Etz Chaim Calendar plugin (etz-chaim-calendar.php).
 * Bump ECC_ASSET_VERSION in the plugin when editing this file so browsers
 * refresh their cache.
 */

:root{--ecc-navy:#1B365D;--ecc-navy-light:#2A4A7A;--ecc-gold:#C4A265;--ecc-gold-light:#D4B87A;--ecc-cream:#FAF7F2;--ecc-cream-dark:#F0EBE1;--ecc-shabbos-bg:#F5F0FF;--ecc-shabbos-border:#D8CCF0;--ecc-text-body:#3D3D3D;--ecc-text-muted:#6B7280;--ecc-border:#E5E0D5;--ecc-white:#FFFFFF;--ecc-holiday-bg:#FFF8E1;--ecc-fast-bg:#FFF3E0;}

/* ============ THIS WEEK STRIP (compact, side-by-side cards) ============ */
.ecc-this-week{background:var(--ecc-cream-dark);border-radius:10px 10px 0 0;padding:14px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:16px;align-items:stretch;border-bottom:1px solid var(--ecc-border);font-family:"Cera Pro","Montserrat",sans-serif}
.ecc-tw-left{display:flex;flex-direction:column;justify-content:center;min-width:0}
.ecc-tw-left h2{font-family:"Cera Pro","Montserrat",sans-serif;font-size:22px;color:var(--ecc-navy);font-weight:600;line-height:1.15;margin:0 0 4px}
.ecc-tw-date{font-size:12px;color:var(--ecc-text-muted)}
.ecc-tw-right{display:contents}
.ecc-parsha-card{background:var(--ecc-white);border-radius:8px;padding:12px 14px;border:1px solid var(--ecc-border);min-width:0;display:flex;flex-direction:column;gap:4px}
.ecc-parsha-label{font-size:9px;text-transform:uppercase;letter-spacing:1.4px;color:var(--ecc-text-muted);font-weight:600}
.ecc-parsha-name{font-family:"Cera Pro","Montserrat",sans-serif;font-size:18px;font-weight:600;color:var(--ecc-navy);line-height:1.1;margin:0}
.ecc-today-heb{font-size:11px;color:var(--ecc-gold);font-weight:500}
.ecc-today-eng{font-size:13px;font-weight:600;color:var(--ecc-navy)}
.ecc-today-divider{height:1px;background:var(--ecc-cream-dark);margin:4px 0}
.ecc-today-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px 12px;font-size:11px}
.ecc-tw-time-col{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ecc-tw-time-label{font-size:9px;color:var(--ecc-text-muted);text-transform:uppercase;letter-spacing:.5px}
.ecc-tw-time-value{font-size:12px;font-weight:600;color:var(--ecc-navy)}
.ecc-parsha-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.ecc-parsha-tag{background:var(--ecc-gold);color:var(--ecc-white);font-size:9px;font-weight:600;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.4px}
.ecc-shabbos-card{background:var(--ecc-white);border-radius:8px;padding:12px 14px;border:1px solid var(--ecc-border);min-width:0}
.ecc-shabbos-card h4{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--ecc-navy);margin:0 0 8px;font-weight:600}
.ecc-st-row{display:flex;justify-content:space-between;padding:3px 0;font-size:12px;border-bottom:1px solid var(--ecc-cream-dark)}
.ecc-st-row:last-child{border-bottom:none}
.ecc-st-label{color:var(--ecc-text-muted)}
.ecc-st-value{font-weight:600;color:var(--ecc-navy)}

/* ============ MONTH NAV ============ */
.ecc-month-nav{padding:12px 24px 8px;font-family:"Cera Pro","Montserrat",sans-serif;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ecc-month-nav h2{font-family:"Cera Pro","Montserrat",sans-serif;font-size:24px;font-weight:600;color:var(--ecc-navy);display:flex;align-items:center;gap:12px;margin:0;line-height:1.1}
.ecc-heb-month{font-size:16px;color:var(--ecc-gold);font-weight:400}
.ecc-nav-btn{background:none;border:2px solid var(--ecc-navy);color:var(--ecc-navy);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s;line-height:1;flex:0 0 auto}
.ecc-nav-btn:hover{background:var(--ecc-navy);color:var(--ecc-white)}
.ecc-month-actions{display:flex;gap:8px;flex-wrap:wrap}
.ecc-btn-primary,.ecc-btn-secondary{padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px;font-family:"Cera Pro","Montserrat",sans-serif;line-height:1.2}
.ecc-btn-primary{background:var(--ecc-navy);color:var(--ecc-white);border:none}
.ecc-btn-primary:hover{background:var(--ecc-navy-light)}
.ecc-btn-primary:disabled{opacity:.6;cursor:wait}
.ecc-btn-secondary{background:var(--ecc-white);color:var(--ecc-navy);border:2px solid var(--ecc-navy)}
.ecc-btn-secondary:hover{background:var(--ecc-navy);color:var(--ecc-white)}

/* Subscribe button + popover */
.ecc-subscribe-wrap{position:relative;display:inline-flex}
.ecc-subscribe-menu{
    position:absolute;top:calc(100% + 8px);right:0;z-index:50;
    min-width:260px;max-width:320px;
    background:var(--ecc-white);border:1px solid var(--ecc-border);border-radius:10px;
    box-shadow:0 12px 32px rgba(27,54,93,.16);
    padding:6px;
    font-family:"Cera Pro","Montserrat",sans-serif;
}
.ecc-subscribe-menu[hidden]{display:none}
.ecc-subscribe-opt{
    display:block;padding:10px 12px;border-radius:6px;
    text-decoration:none;color:var(--ecc-navy);
    transition:background .15s;
}
.ecc-subscribe-opt:hover,.ecc-subscribe-opt:focus{background:var(--ecc-cream-dark);outline:none}
.ecc-subscribe-opt strong{display:block;font-size:14px;font-weight:600;line-height:1.2}
.ecc-subscribe-opt span{display:block;font-size:11px;color:var(--ecc-text-muted);margin-top:2px;font-weight:500}
.ecc-subscribe-opt--alt{border-top:1px solid var(--ecc-cream-dark);margin-top:4px;padding-top:12px}
.ecc-subscribe-copy{
    width:100%;margin-top:4px;padding:8px 12px;
    background:transparent;border:1px dashed var(--ecc-border);
    color:var(--ecc-text-muted);font-size:11px;font-weight:600;
    border-radius:6px;cursor:pointer;letter-spacing:.4px;text-transform:uppercase;
    font-family:"Cera Pro","Montserrat",sans-serif;
    transition:all .15s;
}
.ecc-subscribe-copy:hover{background:var(--ecc-cream);color:var(--ecc-navy);border-style:solid}

/* ============ GRID ============ */
.ecc-container{padding:0 16px 16px}
.ecc-grid{display:grid;grid-template-columns:repeat(6,1fr) 1.3fr;border:1px solid var(--ecc-border);border-radius:10px;overflow:hidden;background:var(--ecc-white);font-family:"Cera Pro","Montserrat",sans-serif}
.ecc-day-header{background:var(--ecc-gold);color:var(--ecc-white);padding:6px;text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px}
.ecc-day-header.ecc-shabbos-hdr{background:var(--ecc-navy)}
.ecc-cell{border:1px solid var(--ecc-border);padding:5px 7px;min-height:78px;font-size:11px;position:relative;transition:background .15s}
.ecc-cell:hover{background:rgba(196,162,101,.04)}
.ecc-cell.ecc-empty{background:var(--ecc-cream);min-height:40px}
.ecc-cell.ecc-shabbos{background:var(--ecc-shabbos-bg);border-color:var(--ecc-shabbos-border);min-height:108px}
.ecc-cell.ecc-today{box-shadow:inset 0 0 0 2px var(--ecc-gold)}
.ecc-cell.ecc-special{background:var(--ecc-holiday-bg)}
.ecc-cell.ecc-fast{background:var(--ecc-fast-bg)}
.ecc-date-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px;gap:4px}
.ecc-eng-date{font-size:13px;font-weight:700;color:var(--ecc-navy);line-height:1}
.ecc-heb-date{font-size:9px;color:var(--ecc-gold);font-weight:500;line-height:1.2;text-align:right}
.ecc-holiday-name{font-size:10px;font-weight:700;color:var(--ecc-navy);margin-bottom:2px;line-height:1.2}
.ecc-time{font-size:10px;color:var(--ecc-text-body);margin-bottom:1px;line-height:1.25}
.ecc-time strong{font-weight:600;color:var(--ecc-navy)}
.ecc-event-badge{margin-top:3px;padding:2px 6px;border-radius:4px;font-size:9px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;color:var(--ecc-white);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecc-event-badge.ecc-color-navy{background:var(--ecc-navy)}
.ecc-event-badge.ecc-color-gold{background:var(--ecc-gold)}
.ecc-event-badge.ecc-color-red{background:#c0392b}
.ecc-event-badge.ecc-color-green{background:#27ae60}
.ecc-event-badge:hover{opacity:.85}
.ecc-shabbos-parsha{font-family:"Cera Pro","Montserrat",sans-serif;font-size:13px;font-weight:700;color:var(--ecc-navy);margin-bottom:2px;line-height:1.1}
.ecc-special-tags{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:3px}
.ecc-stag{background:var(--ecc-gold);color:var(--ecc-white);font-size:7px;font-weight:700;padding:1px 5px;border-radius:8px;text-transform:uppercase;letter-spacing:.3px}
.ecc-sh-times{font-size:10px}
.ecc-sh-times .ecc-sht-row{display:flex;justify-content:space-between;padding:0;line-height:1.3;gap:6px}
.ecc-sh-times .ecc-sht-label{color:var(--ecc-text-muted);font-size:9px}
.ecc-sh-times .ecc-sht-time{font-weight:600;color:var(--ecc-navy);font-size:10px;white-space:nowrap}
.ecc-footer{text-align:center;padding:14px;font-size:12px;color:var(--ecc-text-muted);border-top:1px solid var(--ecc-border);margin-top:8px;font-family:"Cera Pro","Montserrat",sans-serif}
.ecc-footer a{color:var(--ecc-navy)}
.ecc-loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--ecc-navy);font-size:16px}
.ecc-spinner{width:30px;height:30px;border:3px solid var(--ecc-border);border-top-color:var(--ecc-gold);border-radius:50%;animation:eccSpin .8s linear infinite;margin-right:12px}
@keyframes eccSpin{to{transform:rotate(360deg)}}

/* ============ TABLET ============ */
@media(max-width:1024px){
    .ecc-this-week{grid-template-columns:1fr 1fr;padding:14px 18px}
    .ecc-tw-left{grid-column:1 / -1}
    .ecc-tw-left h2{font-size:20px}
    .ecc-month-nav{padding:10px 18px 6px}
    .ecc-cell{min-height:84px;padding:5px;font-size:11px}
    .ecc-cell.ecc-shabbos{min-height:120px}
}

/* Hide the desktop-only "full" letters of day-headers on desktop too;
   the JS now renders headers as 1 letter + a span with the rest, so
   desktop needs the span visible. */
.ecc-day-header-full{display:inline}

/* The mobile detail panel is hidden on desktop (the grid cells already
   contain the same info). */
.ecc-mobile-day-panel{display:none}

/* ============ MOBILE (≤768px): real 7-col grid + tap-to-expand panel ============
   Compact month grid where each day cell is just the date number plus an
   optional dot indicator. Tapping a cell renders that day's full details
   into the detail panel below the grid (today is auto-selected on load).
*/
@media(max-width:768px){
    /* HARD overflow guard so nothing can horizontal-scroll */
    .ecc-this-week,.ecc-month-nav,.ecc-container,.ecc-grid,.ecc-cell,.ecc-footer,.ecc-mobile-day-panel{max-width:100%!important;min-width:0!important;box-sizing:border-box}
    .ecc-container{padding:0 10px 16px;overflow-x:hidden}

    /* Hero strip: stack and tighten */
    .ecc-this-week{grid-template-columns:1fr!important;padding:12px;gap:10px;border-radius:10px 10px 0 0}
    .ecc-tw-right{display:contents}
    .ecc-tw-left h2{font-size:18px;margin-bottom:2px}
    .ecc-tw-date{font-size:11px}
    .ecc-parsha-card,.ecc-shabbos-card{padding:10px 12px}
    .ecc-parsha-name{font-size:17px}
    .ecc-today-times{grid-template-columns:repeat(2,1fr);gap:6px 14px}

    /* Month nav: sticky two-row layout — title row + action row.
       Title row uses arrows on either side and centers the month name so
       it never truncates. Action buttons get a full-width row underneath
       as 50/50 pills with their text intact. */
    .ecc-month-nav{
        padding:12px 12px 10px;gap:10px;
        background:var(--ecc-white);
        position:sticky;top:0;z-index:10;
        border-bottom:1px solid var(--ecc-border);
        box-shadow:0 1px 2px rgba(0,0,0,.04);
        flex-wrap:wrap;justify-content:center;
    }
    .ecc-month-nav h2{
        order:1;flex:1 1 100%;
        font-size:18px;gap:10px;
        justify-content:space-between;
        align-items:center;
        flex-wrap:wrap;
        min-width:0;
    }
    .ecc-month-nav h2 #eccMonthTitle{
        flex:1 1 auto;text-align:center;
        white-space:normal;overflow:visible;
        line-height:1.15;
    }
    .ecc-heb-month{font-size:13px;white-space:nowrap;flex:1 1 100%;text-align:center;order:2;color:var(--ecc-gold)}
    .ecc-nav-btn{width:34px;height:34px;font-size:18px;flex:0 0 34px}
    .ecc-month-actions{
        order:3;width:100%;gap:6px;
        flex-wrap:nowrap;justify-content:stretch;
    }
    .ecc-month-actions > .ecc-btn-secondary,
    .ecc-month-actions > .ecc-btn-primary,
    .ecc-month-actions > .ecc-subscribe-wrap{
        flex:1 1 0;min-width:0;
    }
    .ecc-month-actions .ecc-btn-secondary,
    .ecc-month-actions .ecc-btn-primary{
        width:100%;
        padding:9px 8px;font-size:11px;letter-spacing:.3px;
        justify-content:center;text-align:center;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .ecc-month-actions svg{width:14px;height:14px;flex:0 0 14px}

    /* Subscribe popover anchored to the wrap; constrained to viewport width */
    .ecc-subscribe-menu{
        right:50%;
        transform:translateX(50%);
        min-width:240px;
        max-width:calc(100vw - 24px);
    }

    /* === Compact 7-column grid === */
    .ecc-grid{
        grid-template-columns:repeat(7,1fr)!important;
        border:1px solid var(--ecc-border);border-radius:10px;overflow:hidden;
        background:var(--ecc-white);
    }
    /* Day-of-week headers: single letter only on phone */
    .ecc-day-header{padding:6px 2px;font-size:10px;letter-spacing:0;line-height:1}
    .ecc-day-header-full{display:none}

    /* Empty cells stay visible (so the calendar grid keeps its shape) but smaller */
    .ecc-cell{
        min-height:46px!important;padding:4px 2px;font-size:11px;
        border:1px solid rgba(229,224,213,.6);
        display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
        gap:2px;cursor:pointer;position:relative;
        background:var(--ecc-white);
    }
    .ecc-cell.ecc-empty{background:var(--ecc-cream);min-height:46px!important;cursor:default}
    .ecc-cell:hover{background:rgba(196,162,101,.08)}

    /* Hide all the inner content — only date number + dot show on the grid */
    .ecc-cell .ecc-heb-date,
    .ecc-cell .ecc-holiday-name,
    .ecc-cell .ecc-shabbos-parsha,
    .ecc-cell .ecc-special-tags,
    .ecc-cell .ecc-sh-times,
    .ecc-cell .ecc-time,
    .ecc-cell .ecc-event-badge{display:none!important}

    .ecc-cell .ecc-date-row{margin:0;display:block}
    .ecc-cell .ecc-eng-date{font-size:14px;font-weight:600;line-height:1;color:var(--ecc-navy)}
    .ecc-cell .ecc-eng-date::after{content:none}

    /* Dots beneath the date indicate something is happening */
    .ecc-cell-dot{
        width:5px;height:5px;border-radius:50%;background:var(--ecc-text-muted);
        display:block;margin:0 auto;
    }
    .ecc-cell-dot--special{background:var(--ecc-gold)}
    .ecc-cell-dot--fast{background:#c0392b}
    .ecc-cell-dot--event{background:var(--ecc-navy)}

    /* Day-type backgrounds (subtle so the grid still reads as one calendar) */
    .ecc-cell.ecc-shabbos{background:var(--ecc-shabbos-bg)}
    .ecc-cell.ecc-special{background:var(--ecc-holiday-bg)}
    .ecc-cell.ecc-fast{background:var(--ecc-fast-bg)}

    /* Today + selected states */
    .ecc-cell.ecc-today .ecc-eng-date{
        background:var(--ecc-gold);color:var(--ecc-white);
        border-radius:50%;width:24px;height:24px;
        display:inline-flex;align-items:center;justify-content:center;
    }
    .ecc-cell.ecc-selected{
        box-shadow:inset 0 0 0 2px var(--ecc-navy);
        background:var(--ecc-cream-dark);
    }
    .ecc-cell.ecc-selected.ecc-shabbos{background:var(--ecc-shabbos-bg)}
    .ecc-cell.ecc-selected .ecc-eng-date{color:var(--ecc-navy)}

    /* === Mobile day-detail panel === */
    .ecc-mobile-day-panel{
        display:block;margin-top:14px;padding:18px;
        background:var(--ecc-white);border:1px solid var(--ecc-border);
        border-radius:12px;box-shadow:0 2px 6px rgba(27,54,93,.05);
        font-family:"Cera Pro","Montserrat",sans-serif;
    }
    .ecc-mdp-head{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--ecc-cream-dark)}
    .ecc-mdp-eyebrow{
        font-size:11px;color:var(--ecc-gold);font-weight:600;
        text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;
    }
    .ecc-mdp-title{
        font-family:"Cera Pro","Montserrat",sans-serif;font-size:24px;
        color:var(--ecc-navy);font-weight:600;margin:0;line-height:1.15;
    }
    .ecc-mdp-holiday{
        font-size:14px;font-weight:700;color:var(--ecc-navy);
        margin-bottom:6px;
    }
    .ecc-mdp-parsha{
        font-family:"Cera Pro","Montserrat",sans-serif;font-size:18px;
        color:var(--ecc-navy);font-weight:700;margin-bottom:6px;
    }
    .ecc-mdp-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
    .ecc-mdp-tags .ecc-stag{font-size:9px;padding:3px 8px}
    .ecc-mdp-times{margin-top:4px}
    .ecc-mdp-time-row{
        display:flex;justify-content:space-between;align-items:baseline;
        padding:8px 0;border-bottom:1px solid rgba(27,54,93,.06);gap:12px;
    }
    .ecc-mdp-time-row:last-child{border-bottom:none}
    .ecc-mdp-time-label{font-size:13px;color:var(--ecc-text-muted)}
    .ecc-mdp-time-value{font-size:14px;font-weight:700;color:var(--ecc-navy);white-space:nowrap}
    .ecc-mdp-note{
        margin-top:12px;padding:10px 12px;font-size:13px;font-style:italic;
        color:var(--ecc-navy);background:var(--ecc-cream);border-left:3px solid var(--ecc-gold);
        border-radius:4px;
    }
    .ecc-mdp-events{margin-top:14px}
    .ecc-mdp-events-label{
        font-size:11px;color:var(--ecc-text-muted);text-transform:uppercase;
        letter-spacing:.6px;font-weight:600;margin-bottom:6px;
    }
    .ecc-mdp-event{
        display:block;padding:10px 12px;border-radius:6px;margin-bottom:6px;
        color:var(--ecc-white);font-size:13px;font-weight:500;
        text-decoration:none;line-height:1.3;
    }
    .ecc-mdp-event:last-child{margin-bottom:0}
    .ecc-mdp-event.ecc-color-navy{background:var(--ecc-navy)}
    .ecc-mdp-event.ecc-color-gold{background:var(--ecc-gold)}
    .ecc-mdp-event.ecc-color-red{background:#c0392b}
    .ecc-mdp-event.ecc-color-green{background:#27ae60}
    .ecc-mdp-event-time{opacity:.85;font-weight:400;margin-left:6px}
    .ecc-mdp-empty{
        font-size:13px;color:var(--ecc-text-muted);font-style:italic;
        text-align:center;padding:8px 0;
    }

    /* Footer */
    .ecc-footer{padding:14px 12px;font-size:11px;line-height:1.6}
}

/* Tiny phones (≤360px): even tighter cells */
@media(max-width:360px){
    .ecc-cell{min-height:42px!important;padding:3px 1px}
    .ecc-cell .ecc-eng-date{font-size:12px}
    .ecc-cell.ecc-today .ecc-eng-date{width:22px;height:22px;font-size:12px}
    .ecc-day-header{font-size:9px;padding:5px 1px}
    .ecc-mobile-day-panel{padding:14px}
    .ecc-mdp-title{font-size:20px}
}

/* ============ PRINT ============ */
@media print{
    .ecc-this-week{display:none}
    .ecc-month-nav{padding:20px 0;justify-content:center}
    .ecc-month-nav button{display:none}
    .ecc-month-nav h2{font-size:28px;margin-bottom:0}
    .ecc-month-actions{display:none}
    .ecc-container{padding:0}
    .ecc-grid{margin:20px 0;grid-template-columns:repeat(6,1fr) 1.3fr}
    .ecc-day-header{display:block}
    .ecc-cell{min-height:80px;page-break-inside:avoid;border:1px solid #000;padding:6px}
    .ecc-cell.ecc-empty{display:block;background:#fff}
    .ecc-footer{display:none}
    body::before{content:"Etz Chaim Calendar";display:block;font-size:24px;font-weight:bold;margin-bottom:20px;text-align:center}
}