/* ============================================================
   BY THE WELL — LECTIONARY DISPLAY (FINAL CLEAN CSS)
   MOBILE RESPONSIVE FIXED VERSION — 2025
   ============================================================ */

/* ------------------------------------------------------------
   GLOBAL WRAPPER
------------------------------------------------------------ */
.lectionary-wrap {
    max-width: 1200px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    padding: 0 15px; /* mobile padding fix */
}

/* ------------------------------------------------------------
   WEEK BLOCK

.btw-week-box {
    background: #fff;
    padding: 40px;
    border-radius: 18px;
    border-left: 12px solid #3f1b63;
    margin-bottom: 40px;
}------------------------------------------------------------ */

/* ============================================================
   UNIVERSAL BORDER STYLE FOR ALL SEASONS (RCL + UCA)
   Matches screenshot: rounded outer border + thick left strip
============================================================ */
.btw-week-box {
    position: relative;
    padding: 40px;
    border-radius: 28px;
    border: 4px solid transparent; /* colour applied per season */
    background: #fff;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Thick inner left strip */
.btw-week-box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    border-radius: 28px 0 0 28px;
}


.btw-week-title {
    font-size: 20px;
    margin: 15px 0;
    font-weight: 700;
}

.btw-date {
    font-size: 16px;
    margin-bottom: 20px;
}

.btw-week-top {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Badges */
.btw-season-badge,
.btw-year-badge {
    background: #eee;
    padding: 8px 22px;
    border-radius: 30px;
    font-weight: bold;
    white-space: nowrap;
}

/* ============================================================
   FIX: Year badge must align right
============================================================ */

.btw-week-top {
    display: flex;
    justify-content: space-between; /* season left / year right */
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

/* Make season badge group left */
.btw-season-badge {
    margin-right: auto;
}

/* Make year badge stick to right */
.btw-year-badge {
    margin-left: auto;
}

/* ======================================================
   ACTIVE MENU ITEM ONLY — BLUE BORDER
   Works for UABB Creative Menu
   ====================================================== */


/* Add border to active (current) menu */
.menu.uabb-creative-menu-horizontal > .menu-item.current-menu-item > a,
.menu.uabb-creative-menu-horizontal > .menu-item.current_page_item > a {
    border-bottom: 3px solid #0278b9 !important;
    color: #0278b9 !important;
}

/* Remove any border from ALL other menu links */
.menu.uabb-creative-menu-horizontal > .menu-item > a {
    border-bottom: none !important;
}

.menu.uabb-creative-menu-horizontal > .menu-item {
    position: relative;
    padding-right: 24px;
    margin-right: 24px;
}

.menu.uabb-creative-menu-horizontal > .menu-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: #ccc;
    opacity: 0.8;
}
/* ------------------------------------------------------------
   READINGS
------------------------------------------------------------ */
.btw-readings {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 30px;
}

.btw-reading-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    
}

.btw-reading-icon {
    margin-right: 6px;
}

/* ------------------------------------------------------------
   EPISODE GRID
------------------------------------------------------------ */
.btw-episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.btw-episode-card {
    background: #f9f9f9;
    padding: 22px;
    border-radius: 12px;
}

.btw-episode-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Audio */
.btw-audio-box {
    margin-top: 15px;
    padding: 12px;
    border: 1px solid #0278b9;
    background: #f0f8ff;
    border-radius: 10px;
    width: 100%;
    max-width: 100%;
}

.btw-audio-box audio {
    width: 100%;
    max-width: 100%;
    display: block;
}

.btw-download-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    color: #0278b9;
}

/* ------------------------------------------------------------
   BUTTONS
------------------------------------------------------------ */
.btw-readmore-btn {
    background: #0278b9;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
}

.btw-readmore-btn:hover {
    background: #015a8c;
}

/* ------------------------------------------------------------
   RESPONSIVE FIXES
------------------------------------------------------------ */
@media (max-width: 850px) {
    .btw-episodes-grid {
        grid-template-columns: 1fr;
    }

    .btw-week-box {
        padding: 25px;
    }

    .btw-week-title {
        font-size: 18px;
    }

    .btw-readings {
        flex-direction: column;
        gap: 12px;
    }
}

/* ============================================================
   SEASON COLOURS

.season-advent        { border-left-color: #5a2d82 !important; }
.season-christmas     { border-left-color: #d4af37 !important; }
.season-epiphany      { border-left-color: #0277bd !important; }
.season-lent          { border-left-color: #6a1b9a !important; }
.season-holyweek      { border-left-color: #000 !important; }
.season-easter        { border-left-color: #fdd835 !important; }
.season-pentecost     { border-left-color: #1b5e20 !important; }
.season-special       { border-left-color: #00897b !important; }
.season-ucaevent      { border-left-color: #005c99 !important; }
============================================================ */
.season-advent {
    border-color: #5a2d82 !important;
}
.season-advent:before {
    background: #5a2d82 !important;
}

.season-christmas {
    border-color: #d4af37 !important;
}
.season-christmas:before {
    background: #d4af37 !important;
}
/*.season-epiphany {
    border-color: #2E7D32 !important;
}

.season-epiphany:before {
    background: #2E7D32 !important;
} /* Grey */
.season-lent {
    border-color: #6a1b9a !important;
}
.season-lent:before {
    background: #6a1b9a !important;
}
/*.season-holyweek {
    border-color: #000 !important;
}
.season-holyweek:before {
    background: #000 !important;
}
.season-easter {
    border-color: #fdd835 !important;
}
.season-easter:before {
    background: #fdd835 !important;
}*/
.season-pentecost {
    border-color: #1b5e20 !important;
}
.season-pentecost:before {
    background: #1b5e20 !important;
}
.season-special {
    border-color: #00897b !important;
}
.season-special:before {
    background: #00897b !important;
}
/*.season-ucaevent {
    border-color: #005c99 !important;
}
.season-ucaevent:before {
    background: #005c99 !important;
}*/



/* ----------------------------------------
   EPIPHANY SUNDAYS (Green override)
---------------------------------------- */
/* ===========================
   EPIPHANY CUSTOM LOGIC
   =========================== */

/* Default Epiphany = grey */
.season-epiphany {
    border-color: #fdd835 !important;
}
.season-epiphany:before {
    background: #fdd835 !important;
}
.season-epiphany .btw-season-badge {
    background: #fdd835 !important;
    color: #000 !important;
}

/* EPIPHANY SUNDAYS = Green */
.epiphany-sunday {
    border-color: #2E7D32 !important;
}
.epiphany-sunday:before {
    background: #2E7D32 !important;
}
.epiphany-sunday .btw-season-badge {
    background: #2E7D32 !important;
    color: #fff !important;
}

/* FESTIVAL DAYS (Epiphany of the Lord & Transfiguration) = Grey */
.epiphany-grey {
    border-color: #fdd835 !important;
}
.epiphany-grey:before {
    background: #fdd835 !important;
}
.epiphany-grey .btw-season-badge {
    background: #fdd835 !important;
    color: #000 !important;
}

/* DEFAULT HOLY WEEK COLOUR (Fallback = RED) */

/* --- Default Holy Week (Purple) --- */
.season-holyweek {
    border-color: #6A1B9A !important;
}
.season-holyweek:before {
    background: #6A1B9A !important;
}

/* --- Monday, Tuesday, Wednesday of Holy Week (Purple) --- */
.holyweek-purple {
    border-color: #6A1B9A !important;
}
.holyweek-purple:before {
    background: #6A1B9A !important;
}

/* --- Maundy Thursday (Gold) --- */
.holyweek-thursday {
    border-color: #D4AF37 !important;
}
.holyweek-thursday:before {
    background: #D4AF37 !important;
}

/* --- Good Friday (Red) --- */
.holyweek-friday {
    border-color: #B71C1C !important;
}
.holyweek-friday:before {
    background: #B71C1C !important;
}

/* --- Holy Saturday (Purple) --- */
.holyweek-saturday {
    border-color: #6A1B9A !important;
}
.holyweek-saturday:before {
    background: #6A1B9A !important;
}

/* ============================
   DEFAULT HOLY WEEK (Purple)
============================ */
.season-holyweek .btw-season-badge {
    background: #6A1B9A !important;
    color: #fff !important;
}

/* ============================
   Monday–Wednesday of Holy Week
============================ */
.holyweek-purple .btw-season-badge {
    background: #6A1B9A !important;
    color: #fff !important;
}

/* ============================
   Maundy Thursday (Gold)
============================ */
.holyweek-thursday .btw-season-badge {
    background: #D4AF37 !important;
    color: #000 !important;
}

/* ============================
   Good Friday (Red)
============================ */
.holyweek-friday .btw-season-badge {
    background: #B71C1C !important;
    color: #fff !important;
}

/* ============================
   Holy Saturday (Purple)
============================ */
.holyweek-saturday .btw-season-badge {
    background: #6A1B9A !important;
    color: #fff !important;
}
/* ============================
   Easter
============================ */
.season-easter {
    border-color: #fdd835 !important; /* gold */
}
.season-easter:before {
    background: #fdd835 !important;
}

.season-easter .btw-season-badge {
    background: #fdd835 !important;
    color: #000 !important;
}

.pentecost-day {
    border-color: #B71C1C !important;
}
.pentecost-day:before {
    background: #B71C1C !important;
}
.pentecost-day .btw-season-badge {
    background: #B71C1C !important;
    color: #fff !important;
}



/* Badge colours */
.season-advent .btw-season-badge      { background: #5a2d82; color: #fff; }
.season-christmas .btw-season-badge   { background: #d4af37; color: #000; }

/*.season-epiphany .btw-season-badge {background: #2E7D32 !important;
    color: #fff !important;
}*/

.season-lent .btw-season-badge        { background: #6a1b9a; color: #fff; }
/*.season-holyweek .btw-season-badge    { background: #000; color: #fff; }
.season-easter .btw-season-badge      { background: #fdd835; color: #000; }*/
.season-pentecost .btw-season-badge   { background: #1b5e20; color: #fff; }
/*.season-special .btw-season-badge     { background: #00897b; color: #fff; }*/
.epiphany-sunday .btw-season-badge {
    background: #2E7D32 !important;
    color: #fff !important;
}

/* ===============================
   SPECIAL SEASON STYLING
================================ */
.season-special {
    border-left: 6px solid #00897b; /* purple (or choose Synod colour) */
}

.season-special:before {
    background: #00897b;
}

.season-special .btw-season-badge {
    background: #00897b;
    color: #fff;
}



/* ============================================================
   PHP SEASON TABS (FIXED FOR MOBILE)
============================================================ */

.btw-season-tabs-php {
    display: flex;
    gap: 12px;
    padding: 10px 0 15px;
    overflow-x: auto; /* KEY FIX */
    white-space: nowrap; /* prevents wrapping */
    border-bottom: 3px solid #ddd;
    scroll-behavior: smooth;
}

.btw-season-tabs-php .btw-tab-btn {
    padding: 10px 16px;
    background: #e6e6e6;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    border: 2px solid transparent;
    transition: 0.2s ease-in-out;
    flex-shrink: 0; /* MAKES MOBILE SLIDER WORK */
}

.btw-season-tabs-php .btw-tab-btn:hover {
    background: #d0d0d0;
}

.btw-season-tabs-php .btw-tab-btn.active-tab {
    background: #0278b9;
    color: #fff;
    border-color: #015a8b;
}

/* ============================================================
   YEAR TABS (MATCHED + MOBILE FIXED)
============================================================ */

.btw-year-tabs {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    white-space: nowrap;
    margin: 20px 0;
}

.btw-year-tab {
    padding: 10px 18px;
    background: #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    flex-shrink: 0;
}

.btw-year-tab.active {
    background: #0278b9;
    color: #fff;
    border: 2px solid #015a8b;
}

/* UCA event block */
.uca-event-box {
    background:#fffdf3;
    padding:25px;
    margin:25px 0;
    border-left:12px solid #c77d00;
    border-radius:10px;
}

.uca-event-title {
    font-size:24px;
    font-weight:bold;
    margin-bottom:10px;
}

/* ============================================================
   MOBILE FIX FOR WEEK BOX + AUDIO PLAYER + BADGES
============================================================ */

@media (max-width: 600px) {

    /* Week box should never overflow */
    .btw-week-box {
        padding: 18px;
        border-radius: 22px;
        margin: 20px 0;
        width: 100% !important;
        box-sizing: border-box;
        overflow: hidden; /* fixes left border curve overflow */
    }

    /* Fix overflow from season + year badges */
    .btw-week-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .btw-season-badge,
    .btw-year-badge {
        padding: 6px 14px;
        font-size: 14px;
        display: inline-block;
    }

    /* Episode cards span full width */
    .btw-episodes-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    /* Audio wrapper MUST be full width and not overflow */
    .btw-audio-box {
        width: 100% !important;
        box-sizing: border-box;
        padding: 10px !important;
        margin-top: 12px;
    }

    /* Force native audio player to be responsive */
    .btw-audio-box audio {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px;
    }

    /* Download link spacing */
    .btw-download-link {
        margin-top: 6px;
        font-size: 13px;
    }
}

.btw-description-full,
.btw-description-short {
    margin-bottom: 15px;
}

.btw-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: middle;
}


/* ============================================================
   UCA EVENT COLOURS ONLY 
============================================================ */

/* ===============================
   UCA EVENT CARD – BASE
================================ */
.btw-week-box.season-ucaevent {
    position: relative;
    padding: 40px 40px 40px 60px; /* extra left space for bar */
    border-radius: 28px;
    background: #fff;
    margin: 40px 0;
    overflow: hidden;
   /*  height: 250px !important;*/
}


.btw-week-box.season-ucaevent::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px; /* 🔹 THICKNESS HERE */
    background: #ccc; /* fallback */
    border-radius: 28px 0 0 28px;
}


.btw-week-box.season-ucaevent.uca-colour-blue {
     border-color: #0055cc !important;
}



.btw-week-box.season-ucaevent.uca-colour-red {
     border-color: #cc0000 !important;
}


.btw-week-box.season-ucaevent.uca-colour-black {
     border-color: #000 !important;
}


.btw-week-box.season-ucaevent.uca-colour-creation {
     border-color: #2e8b57 !important;
}


.btw-week-box.season-ucaevent.uca-colour-blue::before {
    background: #0055cc;
}

.btw-week-box.season-ucaevent.uca-colour-red::before {
    background: #cc0000;
}

.btw-week-box.season-ucaevent.uca-colour-black::before {
    background: #000;
}

.btw-week-box.season-ucaevent.uca-colour-creation::before {
    background: #2e8b57;
}





/* Badge base */
.btw-season-badge {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 20px;
    font-weight: 600;
    color: #fff;
}

/* Badge colours follow card */
.uca-colour-blue .btw-season-badge {
    background: #0055cc;
    color: #fff;
}

.uca-colour-red .btw-season-badge {
    background: #cc0000;
    color: #fff;
}

.uca-colour-black .btw-season-badge {
    background: #000;
    color: #fff;
}

.uca-colour-creation .btw-season-badge {
    background: #2e8b57;
    color: #fff;
}

/* ============================================================
   INJECTED UCA EVENT COLOURS ONLY 
============================================================ */

.uca-inline {
    border-color: #243E8C !important;
}
.uca-inline:before {
    background: #243E8C !important;
}
.uca-inline .btw-season-badge {
    background: #243E8C !important;
    color: #fff !important;
}