/**
 * Brand Elmina — Events Calendar CSS
 * Standalone styles for the [elmina_calendar] shortcode widget.
 * Works independently of the theme; coordinates match the Brand Elmina design system.
 */

/* ------------------------------------------------------------------ */
/* Design tokens (mirrors theme main.css; safe to declare here too)   */
/* ------------------------------------------------------------------ */
:root {
    --be-gold:       #C9A84C;
    --be-gold-light: #E8C96A;
    --be-ink:        #1A1612;
    --be-warm-white: #FAF7F2;
    --be-sand:       #F0E8D8;
    --be-muted:      #6B5F4E;
    --be-serif:      'Cormorant Garamond', Georgia, serif;
    --be-sans:       'Jost', system-ui, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Calendar layout wrapper                                             */
/* ------------------------------------------------------------------ */
.cal-layout {
    display:        grid;
    grid-template-columns: 1fr 1fr;
    gap:            2.5rem;
    align-items:    start;
    font-family:    var(--be-sans, 'Jost', system-ui, sans-serif);
}

@media ( max-width: 900px ) {
    .cal-layout {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* Calendar widget                                                     */
/* ------------------------------------------------------------------ */
.cal-widget {
    background: var(--be-ink, #1A1612);
    border-radius: 4px;
    overflow: hidden;
    color: var(--be-warm-white, #FAF7F2);
}

/* Header row: prev / month-label / next */
.cal-header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    padding:        1rem 1.25rem;
    border-bottom:  1px solid rgba(201, 168, 76, 0.25);
}

.cal-month {
    font-family:    var(--be-serif, 'Cormorant Garamond', Georgia, serif);
    font-size:      1.2rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    color:          var(--be-gold, #C9A84C);
    text-align:     center;
    flex:           1;
}

.cal-nav {
    background:     transparent;
    border:         1px solid rgba(201, 168, 76, 0.4);
    color:          var(--be-gold, #C9A84C);
    width:          32px;
    height:         32px;
    border-radius:  2px;
    cursor:         pointer;
    font-size:      1rem;
    line-height:    1;
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:     background 0.2s, border-color 0.2s;
    flex-shrink:    0;
}

.cal-nav:hover,
.cal-nav:focus-visible {
    background:     rgba(201, 168, 76, 0.15);
    border-color:   var(--be-gold, #C9A84C);
    outline:        none;
}

/* Day-name header row: Su Mo Tu We Th Fr Sa */
.cal-days-header {
    display:        grid;
    grid-template-columns: repeat(7, 1fr);
    background:     rgba(201, 168, 76, 0.08);
    border-bottom:  1px solid rgba(201, 168, 76, 0.15);
}

.cal-day-name {
    text-align:     center;
    padding:        0.45rem 0;
    font-size:      0.65rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--be-gold, #C9A84C);
    opacity:        0.7;
}

/* Calendar grid */
.cal-grid {
    display:        grid;
    grid-template-columns: repeat(7, 1fr);
    gap:            1px;
    background:     rgba(255, 255, 255, 0.04);
    padding:        1px;
}

/* Individual day cell */
.cal-day {
    background:     var(--be-ink, #1A1612);
    text-align:     center;
    padding:        0.6rem 0.2rem;
    font-size:      0.82rem;
    color:          var(--be-warm-white, #FAF7F2);
    position:       relative;
    line-height:    1;
    user-select:    none;
}

.cal-day[role="button"] {
    cursor:         pointer;
    transition:     background 0.15s;
}

.cal-day[role="button"]:hover,
.cal-day[role="button"]:focus-visible {
    background:     rgba(201, 168, 76, 0.1);
    outline:        none;
}

/* Other-month days (faded) */
.cal-day.other-month {
    color:          rgba(250, 247, 242, 0.2);
}

/* Today highlight */
.cal-day.today {
    background:     var(--be-gold, #C9A84C);
    color:          var(--be-ink, #1A1612);
    font-weight:    700;
}

/* Has-event dot */
.cal-day.has-event::after {
    content:        '';
    display:        block;
    width:          5px;
    height:         5px;
    border-radius:  50%;
    background:     var(--be-gold, #C9A84C);
    margin:         3px auto 0;
}

.cal-day.today.has-event::after {
    background:     var(--be-ink, #1A1612);
}

/* Selected state */
.cal-day.selected {
    background:     rgba(201, 168, 76, 0.25);
    outline:        1px solid var(--be-gold, #C9A84C);
    outline-offset: -1px;
}

.cal-day.today.selected {
    background:     var(--be-gold-light, #E8C96A);
}

/* ------------------------------------------------------------------ */
/* Events list (sidebar)                                               */
/* ------------------------------------------------------------------ */
.cal-events {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.cal-events-title {
    font-family:    var(--be-serif, 'Cormorant Garamond', Georgia, serif);
    font-size:      1.4rem;
    font-weight:    600;
    color:          var(--be-ink, #1A1612);
    margin-bottom:  0.25rem;
    padding-bottom: 0.75rem;
    border-bottom:  1px solid var(--be-sand, #F0E8D8);
}

/* Single event row */
.event-item {
    display:        flex;
    gap:            1rem;
    align-items:    flex-start;
}

/* Date box (gold accent square) */
.event-date-box {
    background:     var(--be-gold, #C9A84C);
    color:          var(--be-ink, #1A1612);
    min-width:      56px;
    width:          56px;
    height:         56px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    border-radius:  2px;
    flex-shrink:    0;
    text-align:     center;
    line-height:    1.1;
}

.event-date-day {
    font-family:    var(--be-serif, 'Cormorant Garamond', Georgia, serif);
    font-size:      1rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.event-date-mon {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity:        0.8;
}

/* Event name */
.event-name {
    font-family:    var(--be-serif, 'Cormorant Garamond', Georgia, serif);
    font-size:      1.05rem;
    font-weight:    600;
    color:          var(--be-ink, #1A1612);
    line-height:    1.3;
    margin-bottom:  0.2rem;
}

/* Event description */
.event-desc {
    font-size:      0.82rem;
    color:          var(--be-muted, #6B5F4E);
    line-height:    1.5;
    margin:         0 0 0.4rem;
}

/* Event tag label */
.event-tag {
    display:        inline-block;
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--be-gold, #C9A84C);
    border:         1px solid var(--be-gold, #C9A84C);
    padding:        0.2em 0.55em;
    border-radius:  2px;
}

/* Book Now link inside event list */
.event-item .tour-card-link {
    display:        inline-flex;
    align-items:    center;
    gap:            0.35rem;
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--be-ink, #1A1612);
    text-decoration: none;
    border-bottom:  1px solid var(--be-gold, #C9A84C);
    padding-bottom: 1px;
    transition:     color 0.2s;
}

.event-item .tour-card-link:hover {
    color:          var(--be-gold, #C9A84C);
}

/* Loading state */
#calEventsList[style*="opacity: 0.5"],
#calEventsList[style*="opacity:0.5"] {
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* No-events message                                                   */
/* ------------------------------------------------------------------ */
.cal-events > p {
    font-size:      0.88rem;
    color:          var(--be-muted, #6B5F4E);
    padding:        1.5rem 0;
    margin:         0;
}

/* ------------------------------------------------------------------ */
/* Event popup modal overlay                                          */
/* ------------------------------------------------------------------ */
.be-event-modal {
    position:       fixed;
    inset:          0;
    z-index:        99999;
    display:        flex;
    align-items:    center;
    justify-content: center;
    padding:        1rem;
}
.be-event-modal[hidden] {
    display:        none !important;
}
.be-event-modal-backdrop {
    position:       absolute;
    inset:          0;
    background:     rgba(10, 15, 26, 0.75);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.be-event-modal-inner {
    position:       relative;
    z-index:        1;
    background:     #fff;
    width:          100%;
    max-width:      520px;
    max-height:     88vh;
    overflow:       hidden;
    border-radius:  3px;
    box-shadow:     0 24px 64px rgba(0,0,0,0.45);
    display:        flex;
    flex-direction: column;
}
.be-event-modal-scroll {
    overflow-y:     auto;
    -webkit-overflow-scrolling: touch;
    flex:           1;
}
.be-event-modal-close {
    position:       absolute;
    top:            0.65rem;
    right:          0.65rem;
    background:     rgba(10,15,26,0.55);
    border:         none;
    color:          #fff;
    font-size:      1.3rem;
    line-height:    1;
    width:          32px;
    height:         32px;
    border-radius:  50%;
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content: center;
    z-index:        2;
    transition:     background 0.2s;
}
.be-event-modal-close:hover {
    background:     rgba(201,168,76,0.85);
}

/* ── Popup card styles (inside modal) ────────────────────── */
.ev-popup-card { display: flex; flex-direction: column; }

.ev-popup-img {
    width:          100%;
    height:         200px;
    background:     var(--be-ink, #1A1612) center/cover no-repeat;
    position:       relative;
    flex-shrink:    0;
}
.ev-popup-img-placeholder {
    width:          100%;
    height:         100%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      3rem;
    color:          rgba(201,168,76,0.2);
}

.ev-popup-body {
    padding:        1.4rem 1.6rem 1.75rem;
    font-family:    var(--be-sans, 'Jost', system-ui, sans-serif);
}

/* Tags + type badge */
.ev-popup-tags {
    display:        flex;
    flex-wrap:      wrap;
    gap:            0.4rem;
    margin-bottom:  0.8rem;
    align-items:    center;
}
.ev-popup-tag {
    font-size:      0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background:     #f5f0e8;
    color:          #1A1612;
    padding:        0.2rem 0.55rem;
    border:         1px solid #ddd;
}
.ev-popup-type-badge {
    font-size:      0.6rem;
    letter-spacing: 0.07em;
    padding:        0.2rem 0.6rem;
    border-radius:  20px;
    font-weight:    500;
}
.ev-popup-type-annual  { background: rgba(201,168,76,0.15); color: #C9A84C; border: 1px solid rgba(201,168,76,0.4); }
.ev-popup-type-one-off { background: rgba(26,22,18,0.06);   color: #1A1612; border: 1px solid #ddd; }

/* Title */
.ev-popup-title {
    font-family:    var(--be-serif, 'Cormorant Garamond', Georgia, serif);
    font-size:      1.5rem;
    color:          #1A1612;
    margin:         0 0 0.25rem;
    line-height:    1.2;
    font-weight:    400;
}
.ev-popup-rec-note {
    font-size:      0.77rem;
    color:          #C9A84C;
    font-style:     italic;
    margin:         0 0 0.9rem;
}

/* Meta grid */
.ev-popup-meta-grid {
    display:        flex;
    flex-direction: column;
    gap:            0.45rem;
    background:     #faf6ee;
    border:         1px solid #e8dfc7;
    padding:        0.9rem 1rem;
    margin:         0.9rem 0;
    border-radius:  3px;
}
.ev-popup-meta-row {
    display:        flex;
    align-items:    flex-start;
    gap:            0.5rem;
    font-size:      0.82rem;
    color:          #1A1612;
    line-height:    1.5;
}
.ev-popup-meta-icon { flex-shrink: 0; margin-top: 0.05rem; }
.ev-popup-meta-row a { color: #C9A84C; text-decoration: none; }
.ev-popup-meta-row a:hover { text-decoration: underline; }
.ev-popup-booking-notice { color: #C9A84C; font-weight: 600; }

/* Programme */
.ev-popup-programme { margin: 0.9rem 0 1.1rem; }
.ev-popup-programme-label {
    font-size:      0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          #C9A84C;
    margin-bottom:  0.35rem;
}
.ev-popup-excerpt {
    font-size:      0.87rem;
    line-height:    1.75;
    color:          #6B5F4E;
    margin:         0;
}

/* Logos */
.ev-popup-logos {
    display:        flex;
    flex-wrap:      wrap;
    gap:            1.25rem;
    align-items:    flex-start;
    padding:        0.9rem 0 0.75rem;
    border-top:     1px solid #e8dfc7;
    margin-bottom:  1.1rem;
}
.ev-popup-logo-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.ev-popup-logo-label {
    font-size:      0.57rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          #6B5F4E;
}
.ev-popup-logo-img {
    max-height:     44px;
    max-width:      130px;
    object-fit:     contain;
}

/* CTA button */
.ev-popup-btn {
    display:        inline-block;
    padding:        0.7rem 1.6rem;
    background:     #C9A84C;
    color:          #1A1612;
    font-size:      0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight:    600;
    text-decoration: none;
    transition:     background 0.2s;
}
.ev-popup-btn:hover { background: #a8893e; color: #fff; }

/* Mobile adjustments */
@media (max-width: 480px) {
    .be-event-modal-inner {
        max-height:     94vh;
        border-radius:  3px 3px 0 0;
    }
    .ev-popup-body { padding: 1.1rem 1.2rem 1.5rem; }
    .ev-popup-title { font-size: 1.25rem; }
}

/* ------------------------------------------------------------------ */
/* Admin meta box styles (loaded on elmina_event screens)             */
/* ------------------------------------------------------------------ */
.form-table .bee-date-hint {
    font-size:      0.8rem;
    color:          #666;
    margin-top:     4px;
}