/* ==========================================================
   Conscious Temple Calendar v1.0
   Part 1
   Variables • Wrapper • Header • Weekdays • Grid
========================================================== */


/* ==========================================================
   1. CSS VARIABLES
========================================================== */

:root{

    --ct-primary:#9C0000;
    --ct-primary-dark:#7A0000;

    --ct-secondary:#C89B3C;

    --ct-cream:#FBF4E0;
    --ct-cream-light:#FFFDF7;

    --ct-white:#FFFFFF;

    --ct-text:#3A2A1A;
    --ct-text-light:#666666;

    --ct-border:#ECECEC;

    --ct-shadow:
        0 18px 45px rgba(0,0,0,.08);

    --ct-radius-xl:24px;
    --ct-radius-lg:18px;
    --ct-radius-md:10px;
    --ct-radius-sm:6px;

    --ct-transition:.30s ease;

}


/* ==========================================================
   2. RESET
========================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

.ct-calendar{

    width:100%;

    padding:40px 20px;

}


/* ==========================================================
   3. CALENDAR WRAPPER
========================================================== */

.calendar-wrapper{

    width:100%;

    max-width:1200px;

    margin:40px auto;

    background:var(--ct-white);

    border-radius:var(--ct-radius-xl);

    overflow:hidden;

    box-shadow:var(--ct-shadow);

}


/* ==========================================================
   4. HEADER
========================================================== */

.calendar-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:28px 34px;

    background:var(--ct-primary);

}

.calendar-header h2{

    margin:0;

    flex:1;

    text-align:center;

    color:var(--ct-cream);

    font-family:"Cormorant Garamond", serif;

    font-size:40px;

    font-weight:600;

    letter-spacing:.5px;

    line-height:1.2;

}


/* ==========================================================
   5. NAVIGATION BUTTONS
========================================================== */

.nav-btn{

    width:48px;

    height:48px;

    flex-shrink:0;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:var(--ct-cream);

    color:var(--ct-primary);

    font-size:20px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--ct-transition);

    box-shadow:
        0 6px 18px rgba(0,0,0,.15);

}

.nav-btn:hover{

    background:var(--ct-secondary);

    color:var(--ct-white);

    transform:translateY(-2px);

}

.nav-btn:active{

    transform:scale(.96);

}


/* ==========================================================
   6. WEEKDAYS
========================================================== */

.weekdays{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    background:var(--ct-cream);

    border-bottom:1px solid var(--ct-border);

}

.weekdays div{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px 8px;

    font-size:16px;

    font-weight:600;

    color:var(--ct-primary);

    letter-spacing:.2px;

}


/* ==========================================================
   7. CALENDAR GRID
========================================================== */

.calendar-grid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    background:var(--ct-white);

}


/* ==========================================================
   END OF PART 1
========================================================== */
/* ==========================================================
   8. DAY CELLS
========================================================== */

.day{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    min-height:170px;

    padding:10px;

    border-right:1px solid var(--ct-border);

    border-bottom:1px solid var(--ct-border);

    background:var(--ct-white);

    transition:var(--ct-transition);

    overflow:hidden;

}

.day:hover{

    background:var(--ct-cream-light);

}


/* ==========================================================
   9. EMPTY DAYS
========================================================== */

.day.empty{

    background:#FAFAFA;

    cursor:default;

}

.day.empty:hover{

    background:#FAFAFA;

}


/* ==========================================================
   10. DAY NUMBER
========================================================== */

.day-number{

    width:34px;

    height:34px;

    margin-bottom:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:15px;

    font-weight:700;

    color:var(--ct-text);

    transition:var(--ct-transition);

}


/* ==========================================================
   11. TODAY
========================================================== */

.day.today{

   background:#FFF7E8;

}

.day.today .day-number{

    background:var(--ct-primary);

    color:#fff;

    box-shadow:0 5px 14px rgba(156,0,0,.35);
    margin-bottom:10px;

}


/* ==========================================================
   12. EVENT CONTAINER
========================================================== */

.day .event-band:first-of-type{

    margin-top:2px;

}


/* ==========================================================
   13. EVENT BAND
========================================================== */

.event-band{

    width:100%;

    display:block;

    margin-bottom:4px;

    padding:3px 8px;

    border-radius:8px;

    font-size:11px;

    font-weight:600;

    line-height:1.2;

    color:#fff;

    cursor:pointer;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    transition:all .25s ease;

    user-select:none;
    box-shadow:
     0 2px 6px rgba(0,0,0,.12);

}


/* Hover */

.event-band:hover{

    transform:translateY(-2px);

box-shadow: 0 6px 15px rgba(0,0,0,.18);
    opacity:.94;

   

}


/* Click */

.event-band:active{

    transform:scale(.98);

}


/* ==========================================================
   14. MULTIPLE EVENTS
========================================================== */

.day .event-band:last-child{

    margin-bottom:0;

}


/* ==========================================================
   15. CATEGORY COLORS
========================================================== */


/* Meditation */

.event-band.meditation{

    background:#2E7D32;

}


/* Satsang */

.event-band.satsang{

    background:#1565C0;

}


/* Retreat */

.event-band.retreat{

    background:#6A1B9A;

}


/* Workshop */

.event-band.workshop{

    background:#EF6C00;

}


/* Celebration */

.event-band.celebration{

    background:#800000;

}


/* Yoga */

.event-band.yoga{

    background:#00897B;

}


/* Default */

.event-band.default{

    background:#777777;

}


/* ==========================================================
   16. LONG TITLES
========================================================== */

.event-band{

    text-overflow:ellipsis;

    overflow:hidden;

    white-space:nowrap;

}


/* ==========================================================
   17. EVENT STACK SPACING
========================================================== */

.day{

    gap:2px;

}


/* ==========================================================
   18. OPTIONAL SCROLL
   (Enable if more than 5 events in a day)
========================================================== */

/*
.day{

    overflow-y:auto;

}

.day::-webkit-scrollbar{

    width:5px;

}

.day::-webkit-scrollbar-thumb{

    background:#DDD;

    border-radius:20px;

}
*/


/* ==========================================================
   END OF PART 2
========================================================== */
/* ==========================================================
   19. EVENT POPUP OVERLAY
========================================================== */

.event-popup{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.60);

    backdrop-filter:blur(4px);

    z-index:99999;

    animation:fadeOverlay .25s ease;

}


/* ==========================================================
   20. POPUP CONTAINER
========================================================== */

.popup-content{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:92%;

    max-width:600px;

    background:#ffffff;

    border-radius:20px;

    padding:35px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.20);

    animation:popupZoom .30s ease;

}


/* ==========================================================
   21. POPUP CLOSE BUTTON
========================================================== */

.popup-close{

    position:absolute;

    top:18px;

    right:22px;

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    cursor:pointer;

    color:#777;

    font-size:24px;

    transition:.25s;

}

.popup-close:hover{

    background:#F4F4F4;

    color:var(--ct-primary);

}


/* ==========================================================
   22. POPUP TITLE
========================================================== */

.popup-content h2{

    margin:0 0 25px;

    color:var(--ct-primary);

    font-family:"Cormorant Garamond", serif;

    font-size:34px;

    font-weight:600;

    line-height:1.2;

}


/* ==========================================================
   23. POPUP DETAILS
========================================================== */

.popup-content p{

    margin:12px 0;

    color:var(--ct-text);

    line-height:1.7;

    font-size:15px;

}

.popup-content strong{

    color:var(--ct-primary);

    font-weight:600;

}


/* ==========================================================
   24. REGISTER BUTTON
========================================================== */

.popup-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:28px;

    padding:14px 28px;

    background:var(--ct-primary);

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.popup-button:hover{

    background:var(--ct-secondary);

    color:#fff;

    transform:translateY(-2px);

}


/* ==========================================================
   25. POPUP DIVIDER
========================================================== */

.popup-content hr{

    border:none;

    border-top:1px solid #ECECEC;

    margin:22px 0;

}


/* ==========================================================
   26. LINKS
========================================================== */

.popup-content a{

    color:var(--ct-primary);

}

.popup-content a:hover{

    color:var(--ct-secondary);

}


/* ==========================================================
   27. ANIMATIONS
========================================================== */

@keyframes popupZoom{

    from{

        opacity:0;

        transform:translate(-50%,-46%) scale(.95);

    }

    to{

        opacity:1;

        transform:translate(-50%,-50%) scale(1);

    }

}

@keyframes fadeOverlay{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ==========================================================
   28. UTILITY CLASSES
========================================================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.hidden{

    display:none !important;

}


/* ==========================================================
   29. ACCESSIBILITY
========================================================== */

.nav-btn:focus,

.popup-button:focus,

.popup-close:focus,

.event-band:focus{

    outline:2px solid var(--ct-secondary);

    outline-offset:2px;

}


/* ==========================================================
   END OF PART 3
========================================================== */
/* ==========================================================
   30. LARGE DESKTOP
========================================================== */

@media (min-width:1400px){

    .calendar-wrapper{

        max-width:1400px;

    }

    .day{

        min-height:185px;

    }

    .calendar-header h2{

        font-size:44px;

    }

}


/* ==========================================================
   31. TABLET
========================================================== */

@media (max-width:1024px){

    .ct-calendar{

        padding:30px 15px;

    }

    .calendar-header{

        padding:22px;

    }

    .calendar-header h2{

        font-size:32px;

    }

    .weekdays div{

        padding:14px 4px;

        font-size:14px;

    }

    .day{

        min-height:140px;

        padding:8px;

    }

    .day-number{

        width:30px;

        height:30px;

        font-size:14px;

    }

    .event-band{

        font-size:10px;

        padding:4px 6px;

    }

}


/* ==========================================================
   32. MOBILE
========================================================== */

@media (max-width:768px){

    .ct-calendar{

        padding:20px 10px;

    }

    .calendar-wrapper{

        border-radius:16px;

    }

    .calendar-header{

        padding:15px;

    }

    .calendar-header h2{

        font-size:24px;

    }

    .nav-btn{

        width:38px;

        height:38px;

        font-size:16px;

    }

    .weekdays div{

        padding:10px 2px;

        font-size:11px;

    }

    .day{

        min-height:90px;

        padding:4px;

    }

    .day-number{

        width:24px;

        height:24px;

        margin-bottom:4px;

        font-size:12px;

    }

    .event-band{

        font-size:9px;

        padding:2px 4px;

        border-radius:4px;

        margin-bottom:2px;

    }

    .popup-content{

        width:94%;

        padding:22px;

    }

    .popup-content h2{

        font-size:26px;

    }

    .popup-content p{

        font-size:14px;

    }

    .popup-button{

        width:100%;

        justify-content:center;

    }

}


/* ==========================================================
   33. SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .calendar-header{

        padding:12px;

    }

    .calendar-header h2{

        font-size:20px;

    }

    .nav-btn{

        width:34px;

        height:34px;

        font-size:14px;

    }

    .weekdays div{

        font-size:10px;

    }

    .day{

        min-height:78px;

    }

    .day-number{

        font-size:11px;

    }

    .event-band{

        font-size:8px;

        padding:2px 3px;

    }

}


/* ==========================================================
   34. PRINT
========================================================== */

@media print{

    .calendar-header{

        background:#ffffff !important;

        color:#000 !important;

    }

    .nav-btn{

        display:none;

    }

    .popup-button{

        display:none;

    }

    .event-popup{

        display:none !important;

    }

}


/* ==========================================================
   35. DARK MODE READY
========================================================== */

@media (prefers-color-scheme:dark){

    .calendar-wrapper{

        background:#ffffff;

    }

}


/* ==========================================================
   36. IMAGE OPTIMIZATION
========================================================== */

.calendar-wrapper img{

    max-width:100%;

    height:auto;

}


/* ==========================================================
   37. SMOOTH SCROLL
========================================================== */

html{

    scroll-behavior:smooth;

}


/* ==========================================================
   38. PERFORMANCE
========================================================== */

.event-band,
.nav-btn,
.popup-button{

    will-change:transform;

}


/* ==========================================================
   39. SELECTION
========================================================== */

::selection{

    background:#9C0000;

    color:#ffffff;

}


/* ==========================================================
   40. END OF FILE
========================================================== */

/*
============================================================

Conscious Temple Calendar
Version : 1.0

Features

✓ Responsive Desktop
✓ Responsive Tablet
✓ Responsive Mobile
✓ Popup
✓ Event Bands
✓ Category Colors
✓ Smooth Animation
✓ Accessibility
✓ Print Friendly
✓ Future Ready

============================================================
*/

/* ==========================================
   Calendar Ribbon Layer
========================================== */

.calendar-container{

    position:relative;

}

/* Layer above calendar */

.calendar-ribbons{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:5;

}

/* Future Ribbon */

.multi-day-ribbon{

    position:absolute;

    height:24px;

    border-radius:8px;

    background:#2E7D32;

    color:#fff;

    font-size:12px;

    font-weight:600;

    display:flex;

    align-items:center;

    padding:0 10px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    box-shadow:0 3px 8px rgba(0,0,0,.18);

}
#eventPopup .popup-button{

    display:inline-block;
    padding:14px 24px;
    background:#9C0000;
    color:#FBF4E0 !important;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    border-radius:10px;
    transition:0.3s;

}

#eventPopup .popup-button:hover{

    background:#C89B3C;
    color:#3A2A1A !important;

}