/* ═══════════════════════════════════════════════════════════
   DAILY ZOHAR — LAG B'OMER COUNTDOWN  |  dzc-style.css
   Palette: Deep Midnight × Antique Gold × Warm Ivory
══════════════════════════════════════════════════════════════ */

/* ── Google Fonts (loaded via @import for plugin compatibility) ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

/* ── CSS Custom Properties ── */
#dzc-banner {
    --dzc-bg-from:   #07091a;
    --dzc-bg-mid:    #0e1535;
    --dzc-bg-to:     #07091a;
    --dzc-gold:      #c8a96e;
    --dzc-gold-lt:   #f0d890;
    --dzc-gold-dk:   #8a6c38;
    --dzc-ivory:     #f5f0e6;
    --dzc-glow:      rgba(200, 169, 110, 0.35);
    --dzc-h:         100px;           /* banner height */
    --dzc-font-disp: 'Cinzel', 'Palatino Linotype', serif;
    --dzc-font-body: 'Crimson Text', Georgia, serif;
}

/* ── Banner Shell ── */
#dzc-banner {
    position:   relative;
    width:      100%;
    height:     var(--dzc-h);
    overflow:   hidden;
    display:    flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        var(--dzc-bg-from) 0%,
        var(--dzc-bg-mid)  50%,
        var(--dzc-bg-to)   100%
    );

    /* Subtle top + bottom gold rule lines */
    border-top:    1px solid var(--dzc-gold-dk);
    border-bottom: 1px solid var(--dzc-gold-dk);

    /* Divi / page-builder resets */
    box-sizing:  border-box;
    margin:      0;
    padding:     0;
    font-size:   16px;
    line-height: 1;
    z-index:     9999;
}

/* Gold shimmer overlay (pseudo) */
#dzc-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 120% at 50% 50%,
        rgba(200, 169, 110, 0.08) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* Repeating ornamental border pattern — top + bottom */
#dzc-banner::after {
    content: '';
    position: absolute;
    left:  0;
    right: 0;
    top:   0;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--dzc-gold-dk)  0px,
        var(--dzc-gold)     6px,
        var(--dzc-gold-dk)  12px,
        transparent         12px,
        transparent         18px
    );
    opacity: 0.55;
}

/* ── Starfield Canvas ── */
#dzc-stars {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    display:  block;
    pointer-events: none;
}

/* ── Flame / Candle Icon ── */
.dzc-flame {
    position:     absolute;
    left:         32px;
    top:          50%;
    transform:    translateY(-50%);
    width:        36px;
    height:       52px;
    margin-top:   -4px;          /* optical center nudge */
    filter:       drop-shadow(0 0 8px rgba(255, 180, 0, 0.7));
    animation:    dzc-flicker 2.8s ease-in-out infinite;
}

/* Mirror flame on right side */
.dzc-flame + .dzc-flame,
#dzc-banner > .dzc-flame:last-of-type {
    left:  auto;
    right: 32px;
    transform: translateY(-50%) scaleX(-1);
}

@keyframes dzc-flicker {
    0%, 100% { transform: translateY(-50%) scale(1)    rotate(-0.5deg); filter: drop-shadow(0 0 8px  rgba(255, 180, 0, 0.7)); }
    30%       { transform: translateY(-50%) scale(1.04) rotate( 0.8deg); filter: drop-shadow(0 0 14px rgba(255, 200, 0, 0.9)); }
    60%       { transform: translateY(-50%) scale(0.97) rotate(-0.4deg); filter: drop-shadow(0 0 6px  rgba(255, 160, 0, 0.6)); }
}

/* ── Inner Content ── */
.dzc-inner {
    position:        relative;
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             18px;
    padding:         0 90px;         /* room for the flames */
    width:           100%;
    box-sizing:      border-box;
}

/* ── Label / Sub-label ── */
.dzc-label,
.dzc-sublabel {
    font-family:    var(--dzc-font-disp);
    color:          var(--dzc-gold);
    letter-spacing: 0.08em;
    text-shadow:    0 0 12px var(--dzc-glow);
    white-space:    nowrap;
}

.dzc-label {
    font-size:  1rem /* 0.72rem;*/
    font-weight: 600;
    text-transform: uppercase;
}

.dzc-sublabel {
    font-size:   1rem;/* 0.65rem; */
    font-weight: 400;
    color:       var(--dzc-gold-dk);
    text-shadow: none;
}

.dzc-sublabel sup {
    font-size: 0.55em;
    vertical-align: super;
}

/* ── Countdown Widget ── */
.dzc-countdown {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.dzc-unit {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    min-width:      48px;
}

.dzc-num {
    font-family:    var(--dzc-font-disp);
    font-size:      1.85rem;
    font-weight:    700;
    color:          var(--dzc-gold-lt);
    letter-spacing: 0.03em;
    text-shadow:
        0 0 18px rgba(240, 216, 144, 0.6),
        0 2px 6px rgba(0,0,0,0.5);
    line-height:    1;
    min-width:      2ch;
    text-align:     center;
    transition:     text-shadow 0.3s;
}

.dzc-num:not([data-prev]) {
    animation: dzc-pop 0.25s ease;
}

@keyframes dzc-pop {
    0%   { transform: scale(1.15); opacity: 0.6; }
    100% { transform: scale(1);    opacity: 1;   }
}

.dzc-cap {
    font-family:    var(--dzc-font-body);
    font-size:      0.52rem;
    font-style:     italic;
    color:          var(--dzc-gold-dk);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top:     1px;
}

.dzc-sep {
    font-family:  var(--dzc-font-disp);
    font-size:    1.5rem;
    font-weight:  700;
    color:        var(--dzc-gold-dk);
    padding-bottom: 10px;          /* align with numbers, above captions */
    user-select:  none;
}

/* ── Celebration Message ── */
.dzc-celebrate {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     0 8px;
    animation:   dzc-fadein 1.8s ease forwards;
}

.dzc-cel-text {
    font-family:    var(--dzc-font-disp);
    font-size:      1.4rem;
    font-weight:    600;
    color:          var(--dzc-ivory);
    letter-spacing: 0.06em;
    text-align:     center;
    line-height:    1.45;
    text-shadow:
        0 0 20px rgba(200, 169, 110, 0.5),
        0 1px 4px rgba(0,0,0,0.7);
}

.dzc-star {
    font-size:  1.1rem;
    color:      var(--dzc-gold);
    text-shadow: 0 0 10px var(--dzc-glow);
    animation:  dzc-spin-star 8s linear infinite;
    display:    inline-block;
    flex-shrink: 0;
}

.dzc-star:last-child {
    animation-direction: reverse;
}

@keyframes dzc-spin-star {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

@keyframes dzc-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════
   RESPONSIVE  —  narrow viewports
══════════════════════════════════════════════ */
@media (max-width: 700px) {
    #dzc-banner { height: auto; min-height: 72px; padding: 8px 0; }
    .dzc-flame  { display: none; }
    .dzc-inner  { padding: 0 12px; gap: 10px; flex-wrap: wrap; justify-content: center; }
    .dzc-label,
    .dzc-sublabel { display: none; }          /* keep only the timer on small screens */
    .dzc-num  { font-size: 1.4rem; }
    .dzc-sep  { font-size: 1.1rem; }
    .dzc-cel-text { font-size: 0.68rem; }
}

@media (max-width: 440px) {
    .dzc-unit { min-width: 38px; }
    .dzc-num  { font-size: 1.2rem; }
}