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

   GLOBAL

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

body {

    margin: 0;

    padding: 0;

    background: #f4f1ea;

    font-family: "Segoe UI", sans-serif;

}



.app-container {

    width: 95%;

    max-width: 1400px;

    margin: 40px auto;

    text-align: center;

}



.title {

    font-size: 32px;

    color: #5a3e1b;

    margin-bottom: 5px;

}



.subtitle {

    font-size: 20px;

    color: #7a5a33;

    margin-bottom: 10px;

}



.instructions {

    font-size: 16px;

    color: #5a3e1b;

    margin-bottom: 30px;

}



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

   MAIN LAYOUT

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

.main-layout {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 60px;

}



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

   LEFT SIDE — CALENDAR

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

.calendar-box {

    width: 540px;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.calendar-container {

    border: 4px solid #4b2e19;

    padding: 4px 6px;

    border-radius: 10px;

    background-color: #fff8f0;

}



.calendar-header-inside {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    padding: 8px 0;

    background-color: #e8d5c0;

    border-radius: 6px;

    margin-bottom: 10px;

}



.month-label {

    font-size: 20px;

    font-weight: bold;

}



.nav-btn {

    background-color: lch(74.97% 24.93 78.38);

    border: none;

    padding: 6px 12px;

    font-size: 18px;

    border-radius: 6px;

    cursor: pointer;

}



.nav-btn:hover {

    background-color: #bfa07a;

}



.calendar-weekdays {

    display: grid;

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

    margin-bottom: 10px;

}



.calendar-weekdays div {

    text-align: center;

    font-weight: bold;

    font-size: 14px;

}



.calendar-days {

    display: grid;

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

    gap: 6px;

}



.calendar-day {

    background: #fff8ec;

    border: 1px solid #d2c7b8;

    border-radius: 6px;

    padding: 8px 0;

    text-align: center;

    cursor: pointer;

    font-size: 16px;

    color: #5a3e1b;

    transition: background-color 0.2s ease;

    display: flex;

    align-items: center;

}



.calendar-day:hover {

    background-color: rgba(0, 0, 0, 0.15);

}



.calendar-day.selected,

.calendar-day.today {

    background-color: rgba(4, 56, 105, 0.35);

    border-radius: 6px;

}



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

   RIGHT SIDE PANEL

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

.right-panel {

    width: 380px;

    display: flex;

    flex-direction: column;

    gap: 22px;

}



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

   LANGUAGE BOX

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

.language-box {

    background: #fff8f0;

    border: 2px solid #4b2e19;

    border-radius: 10px;

    padding: 14px;

    text-align: left;

}









.side-title {

    font-size: 20px;

    font-weight: bold;

    color: #4b2e19;

    margin-bottom: 10px;

}



.lang-option {

    display: block;

    margin-bottom: 8px;

    font-size: 16px;

}



.lang-note {

    font-size: 13px;

    color: #5a3e1b;

    margin-top: 10px;

}



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

   SPECIAL CHURCH DAYS

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

.special-days-box {

    background: #fff8f0;

    border: 2px solid #4b2e19;

    border-radius: 10px;

    padding: 14px;

    text-align: left;

}



.special-days-box ul {

    padding-left: 20px;

}



.inner-list {

    padding-left: 20px;

    margin-top: 6px;

    font-size: 14px;

}



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

   SEARCH

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





.search-hint {

    font-size: 14px;

    color: #5a3e1b;

    margin-top: 6px;

}



/* .search-results {

    width: 100%;

    padding: 12px;

    background: #fff8f0;

    border: 2px solid #4b2e19;

    border-radius: 10px;

    max-height: 300px;

    overflow-y: auto;

} */



.search-section {

    width: 100%;

}



.search-bar {

    width: 100%;

    box-sizing: border-box;   /* ⭐ VERY IMPORTANT */

    padding: 18px;

    font-size: 20px;

    border: 3px solid #4b2e19;

    border-radius: 12px;

    background-color: #fff8f0;

}



.search-results {

    width: 100%;

    box-sizing: border-box;   /* keeps perfect alignment */

}



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

   BUTTON

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

.load-btn {

    width: 100%;

    padding: 14px;

    margin-top: 12px;

    background: #8c6239;

    color: white;

    border: none;

    border-radius: 8px;

    font-size: 20px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.25s ease;

}



.load-btn:hover {

    background: #6e4d2c;

}

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

   FINAL DISPLAY PAGE STYLE

   (Updated to match screenshot)

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



.display-body {

    background: black;

    color: white;

    margin: 0;

    padding: 0;

    font-family: "Segoe UI", sans-serif;

    min-height: 100vh;


    display: flex;

    justify-content: center;

    align-items: flex-start;

}



.verse-container {

    width: 90%;

    max-width: 900px;

    text-align: center;



    margin-top: 60px;

    padding: 0;



}





/* GEEZ REFERENCE — SMALLER + GREY */

.geez-ref {

    font-size: 26px;

    color: #d0d0d0;

    margin-bottom: 55px;

}















/* CLOSE BUTTON — SAME AS BEFORE */

.close-btn {

    position: fixed;

    bottom: 25px;

    right: 25px;



    background: transparent;

    border: 1px solid white;

    border-radius: 6px;



    color: white;

    font-size: 18px;

    padding: 6px 14px;



    cursor: pointer;

    opacity: 0.85;

    transition: opacity 0.2s ease;

}



.close-btn:hover {

    opacity: 1;

}

/* Make items in the calendar column sit closer together */

.calendar-box {

    width: 540px;

    display: flex;

    flex-direction: column;

    gap: 4px;   /* was larger before */

}



/* Reduce space under the selected date text */

.selected-date-text {

    font-size: 18px;

    color: #7a5a33;

    font-weight: 600;

    margin-top: 6px;

    margin-bottom: 0;   /* key change */

}



/* Pull the Show Misbak button up closer */

.load-btn {

    width: 100%;

    padding: 14px;

    margin-top: 4px;    /* was bigger before */

    background: #8c6239;

    color: white;

    border: none;

    border-radius: 8px;

    font-size: 20px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.25s ease;

}

.calendar-box {

    display: flex;

    flex-direction: column;

    gap: 8px; /* keeps everything close */

}



.load-btn {

    margin-top: 4px; /* removes big gap */

}

.search-section {

    position: relative;   /* ⭐ makes dropdown align perfectly */

    width: 100%;

}



.search-dropdown {

    width: 100%;          /* ⭐ EXACT same width as search bar */

    background: white;

    border: 2px solid #4b2e19;

    border-radius: 8px;

    margin-top: 4px;

    display: none;

    position: absolute;

    top: 100%;            /* ⭐ sits directly under search bar */

    left: 0;

    z-index: 10;

    max-height: 260px;

    overflow-y: auto;

}





/* EACH RESULT ITEM */

.dropdown-item {

    display: block;

    padding: 12px;

    text-decoration: none;

    color: #4b2e19;

    font-size: 18px;

    border-bottom: 1px solid #e6d8c8;

    cursor: pointer;

}



.dropdown-item:hover {

    background: #f4e7d6;

}

.geez-big {

    font-weight: bold;

    font-size: 120%;   /* 20% larger */

}



.calendar-weekdays div:first-child {

    color: black;

    font-weight: bold;

}

.calendar-days > div:nth-child(7n + 1) .geez-big,

.calendar-days > div:nth-child(7n + 1) .eth-number,

.calendar-days > div:nth-child(7n + 1) .greg-number {

    color: red;

    font-weight: bold;

}

.calendar-weekdays div {

    font-size: 110%;   /* 20% bigger */

    font-weight: bold;

}



.empty-day {

    visibility: hidden;

}



.how-to-box {

    background: #fff8f0;

    border: 2px solid #4b2e19;

    border-radius: 10px;

    padding: 14px 18px;

    margin-bottom: 20px;

    width: 100%;

    max-width: 540px;

    font-size: 16px;

    color: #5a3e1b;

    line-height: 1.6;

}



.how-step {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 6px 0;

}



.how-icon {

    font-size: 20px;

}



.how-title {

    font-size: 22px;

    color: #4b2e19;

    margin-top: 10px;

    margin-bottom: 6px;

    text-align: center;

    font-weight: 700;

}



.how-steps {

    font-size: 15px;

    color: #7a5a33;

    text-align: center;

    margin-bottom: 25px;

    line-height: 1.5;

}



.how-title {

    font-size: 22px;

    color: #4b2e19;

    margin-top: 10px;

    margin-bottom: 4px;

    text-align: center;

    font-weight: 700;

}



.how-steps {

    text-align: center;

    line-height: 1.5;

    margin: 2px 0 14px 0;

    color: #7a5a33;

}



.how-steps.amharic {

    font-size: 17px;

    font-weight: 600;

}



.how-steps.english {

    font-size: 14.5px;   /* ≈ 85% of Amharic */

    opacity: 0.9;

}



.title-row.single-lang {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: 10px;

}



.single-lang .title,

.single-lang .subtitle {

    text-align: center;

    margin: 0;

}



/* ⭐ FORCE PERFECT ALIGNMENT BETWEEN WEEKDAYS AND GRID */

.calendar-weekdays,

.calendar-days {

    width: 100%;

    display: grid;

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

    box-sizing: border-box;

    padding: 0; /*keeps borders aligned inside container */

}



/* Center content inside each calendar cell */

.calendar-day {

    display: flex;

    justify-content: center;   /* center horizontally */

    align-items: center;       /* center vertically */

}



/* If your day content is wrapped in inner divs/spans, center those too */

.calendar-day > * {

    text-align: center;

    width: 100%;

}



/* Reduce vertical space between Geez and Gregorian numbers */

.geez-big {

    margin-bottom: 0px;

    line-height: 1.1;

}



.eth-number {

    margin-top: 0px;

    margin-bottom: 0px;

    line-height: 1.1;

}



.greg-number {

    margin-top: 0px;

    line-height: 1.1;

}







/* Make Geez number bigger */

.geez-big {

    font-size: 150%;

    font-weight: bold;

    margin-right: 2px;   /* pulls Gregorian number closer */

}



/* Reduce horizontal gap between Ethiopian + Gregorian numbers */

.eth-number,

.greg-number {

    margin-left: -3px;   /* tighten spacing */

}



/* Remove box styling from Language Selection */

.language-box {

    border: none;

    background: none;

    padding: 0;

}



/* Remove box styling from Special Church Days */

.special-days-box {

    border: none;

    background: none;

    padding: 0;

}



.holiday-container {

    margin-top: 5px;

}



.holiday-section {

    margin-bottom: 12px;

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

    border-radius: 8px;

    background: #fff8f0;

}



/* .holiday-header {

    padding: 10px 12px;

    font-weight: 700;

    font-size: 18px;

    cursor: pointer;

    background: #e8d5c0;

    border-radius: 8px 8px 0 0;

} */



.holiday-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.holiday-item {

    padding: 8px 12px;

    cursor: pointer;

    border-top: 1px solid var(--border);

}



.holiday-item:hover {

    background: #f2e6d8;

}





/* Two‑column layout for long holiday lists */

.holiday-list.two-column {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px 12px;

}



.holiday-list.two-column .holiday-item {

    border-top: none;

    padding: 6px 8px;

}











.holiday-list.two-column .holiday-item {

    border-top: none;

    padding: 6px 8px;

}

/* 

.holiday-list {

    display: block;

} */



.holiday-list.two-column {

    /* display: grid; */

    grid-template-columns: 1fr 1fr;

    gap: 6px 12px;

}



/* Default: hidden by JS */

.holiday-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



/* Two‑column layout ONLY when visible */

.holiday-list.two-column {

    grid-template-columns: 1fr 1fr;

    gap: 6px 12px;

}



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

   CLEAN HOLIDAY SECTION CSS

   (FINAL — overrides everything above)

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



/* Container */

.holiday-container {

    margin-top: 15px;

}



/* Each category block */

.holiday-section {

    margin-bottom: 12px;

    border: 1px solid #c8b8a6;

    border-radius: 8px;

    background: #fff8f0;

}



/* Category header */

.holiday-header {

    position: relative;

    padding: 10px 28px 10px 12px; /* right padding reduced */

    font-weight: 700;

    font-size: 18px;

    cursor: pointer;

    background: #e8d5c0;

    border-radius: 8px 8px 0 0;

}



/* Arrow (collapsed)

.holiday-header::after {

    content: "▸";

    position: absolute;

    right: 6px;  /* arrow closer */

    /* top: 50%;

    transform: translateY(-50%);

    font-size: 18px;

} */ */





/* Arrow (expanded) */

.holiday-header.open::after {

    content: "▾";

}



/* Holiday list (hidden by JS) */

.holiday-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



/* Holiday item */

.holiday-item {

    padding: 8px 12px;

    cursor: pointer;

    border-top: 1px solid #d8c8b6;

}



.holiday-item:hover {

    background: #f2e6d8;

}



/* Two‑column layout for ዐቢይ ጾም */

/* .holiday-list.two-column {

    display: grid !important;

    grid-template-columns: 1fr 1fr;

    gap: 6px 12px;

} */



.holiday-list.two-column .holiday-item {

    border-top: none;

    padding: 6px 8px;

}



.holiday-list.two-column {

    grid-template-columns: 1fr 1fr;

    gap: 6px 12px;

}





/* FINAL FIX — SHRINK HEADER TO CONTENT */

.holiday-header {

    display: inline-flex;        /* shrink to content */

    align-items: center;

    gap: 6px;                    /* space between text and arrow */

    padding: 8px 12px;

    font-weight: 700;

    font-size: 18px;

    cursor: pointer;

    background: #e8d5c0;

    border-radius: 8px;

}



/* Arrow next to text */

.holiday-header::after {

    content: "▸";

    font-size: 18px;

}



/* Expanded arrow */

.holiday-header.open::after {

    content: "▾";

}



/* Increase spacing between calendar column and right panel */

.main-layout {

    gap: 100px;   /* increase or decrease as you like */

}



/* Align right panel with top of calendar grid */

.right-panel {

    margin-top: 0;          /* reset any inherited spacing */

    align-self: flex-start; /* force alignment to top */

}



.language-box {

    margin-top: 0;

}



/* Dropdown styling */

.language-dropdown {

    width: 100%;

    padding: 12px;

    font-size: 16px;

    border: 2px solid #4b2e19;

    border-radius: 8px;

    background: #fff8f0;

    cursor: pointer;

}



/* Move language box up to align with calendar grid */

.language-box {

    margin-top: 0;

    margin-bottom: 10px;

    padding: 0;

}




.logo {

    font-size: 26px;   /* slightly larger */

    font-weight: 700;

    color: #003366;

}



.main-nav {

    display: flex;

    gap: 25px;

}



.nav-link {

    text-decoration: none;

    font-size: 18px;

    color: #003366;

    font-weight: 600;

    transition: 0.2s;

}



.nav-link:hover {

    color: #0055aa;

}


.misbak-box {

    margin-top: 6px;

    margin-bottom: 18px;

    padding: 14px 18px;

    background: #faf7f2;

    border: 1px solid #e2d9c8;

    border-radius: 8px;

    font-family: "Noto Sans Ethiopic", serif;

    line-height: 1.6;

}



/* .misbak-geez-text {

    font-size: 22px;

    font-weight: 500;

    margin-bottom: 10px;

    white-space: pre-line;

} */



.misbak-geez-ref {

    font-size: 20px;

    font-weight: 600;

    text-align: right;

    margin-top: 6px;

    color: #5a4632;

}





.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap; /* allows title to move on small screens */

    gap: 10px;

}



.header-title {

    flex: 1 1 100%;

    text-align: center;

    font-size: 20px;

    font-weight: 600;

    margin-top: 6px;

}



/* Desktop menu visible, mobile menu hidden */

.main-nav {

    display: flex;

    gap: 20px;

}



.mobile-menu-icon {

    display: none;

}



.mobile-menu {

    display: none;

}



/* MOBILE FIX */

@media (max-width: 768px) {



    /* Hide desktop menu on mobile */

    .main-nav {

        display: none;

    }



    /* Show hamburger icon */

   .mobile-menu-icon {

    display: none;        /* hidden on desktop */

    font-size: 28px;

    cursor: pointer;

    color: white;

    padding: 5px 10px;

}





    /* Mobile dropdown menu */

    .mobile-menu {

        display: none;

        background: #333;

        padding: 10px 0;

        width: 100%;

    }



    .mobile-menu a {

        display: block;

        padding: 12px 20px;

        color: white;

        text-decoration: none;

        border-bottom: 1px solid #444;

    }

}



@media (max-width: 768px) {

    .mobile-menu-icon {

        display: block;

    }

}



@media (max-width: 768px) {

    .main-nav {

        display: none !important;

    }

}



.mobile-menu-icon {

    z-index: 9999;

    position: relative;

}



/* Desktop defaults */

.main-nav {

    display: flex;

    gap: 20px;

}



.mobile-menu-icon {

    display: none;

    font-size: 28px;

    cursor: pointer;

    color: white;

    padding: 5px 10px;

    position: relative;

    z-index: 9999;

}



/* Mobile menu hidden by default */

.mobile-menu {

    display: none;

    background: #333;

    width: 100%;

}



.mobile-menu a {

    display: block;

    padding: 12px 20px;

    color: white;

    text-decoration: none;

    border-bottom: 1px solid #444;

}



/* MOBILE FIXES */

@media (max-width: 768px) {



    /* Hide desktop menu */

    .main-nav {

        display: none !important;

    }



    /* Show hamburger */

    .mobile-menu-icon {

        display: block;

    }



    /* Header layout */

    .header-inner {

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

}



.mobile-menu-icon {

    display: none;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    padding: 8px;

    z-index: 9999;

}



.mobile-menu-icon span {

    width: 28px;

    height: 3px;

    background-color: white;   /* ⭐ ALWAYS visible */

    border-radius: 2px;

    display: block;

}



@media (max-width: 768px) {

    .mobile-menu-icon {

        display: flex;

    }



    .main-nav {

        display: none !important;

    }

}



.mobile-menu-icon {

    display: none;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    padding: 8px;

    z-index: 9999;

}



.mobile-menu-icon span {

    width: 28px;

    height: 3px;

    background-color: black;   /* ⭐ NOW BLACK */

    border-radius: 2px;

    display: block;

}



@media (max-width: 768px) {

    .mobile-menu-icon {

        display: flex;

    }



    .main-nav {

        display: none !important;

    }

}





/* MOBILE LAYOUT FIX */

@media (max-width: 768px) {



    /* Stack everything vertically */

    .main-layout {

        display: flex;

        flex-direction: column;

        gap: 20px;

        width: 100%;

    }



    /* 1️⃣ Language selection FIRST */

    .right-panel {

        order: 1;

        width: 100%;

    }



    /* 2️⃣ How to use + calendar + show misbak SECOND */

    .calendar-box {

        order: 2;

        width: 100%;

    }



    /* 3️⃣ Special holidays AFTER Show Misbak */

    .special-days-box {

        order: 3;

        width: 100%;

    }



    /* 4️⃣ Search box LAST */

    .search-section {

        order: 4;

        width: 100%;

    }



    /* Make calendar fit mobile */

    /* .calendar-container {

        width: 100%;

        overflow-x: auto;

    } */

    

    .calendar-container {

    width: 100%;

    overflow-x: visible; /* prevents grid from collapsing */

}





    /* Misbak preview spacing */

    .misbak-box {

        margin-top: 16px;

        margin-bottom: 16px;

    }



    /* Improve spacing for instructions */

    .how-title,

    .how-steps {

        padding: 0 10px;

    }

}



.holidays-section {

    display: block;

    width: 100%;

}



.holiday-container {

    min-height: 50px;

    display: block;

}



/* DESKTOP LAYOUT */

.main-layout {

    display: flex;

    gap: 60px;

}



.left-column {

    width: 63%;

}



.right-column {

    width: 37%;

}

/* 

.calendar-container {

    max-width: 75%;  

    margin: 0 auto;  

} */



.calendar-container {

    max-width: 100% !important;

}





.language-section,

.search-section {

    display: flex;

    flex-direction: column;

    align-items: flex-start; /* ⭐ left align everything */

}



.language-dropdown {

    width: 70%;

    max-width: 300px;

}



/* .search-bar {

    width: 80%;

    max-width: 300px;

} */



.holidays-section {

    display: flex;

    flex-direction: column;

    align-items: flex-start; /* ⭐ left align everything */

}



.holiday-container {

    width: 100%;

    display: block;

}



.holidays-section {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.holiday-container {

    width: 100%;

    display: block;

}



.holiday-section {

    width: 100%;

    margin-bottom: 10px;

}



.holiday-header {

    font-weight: bold;

    cursor: pointer;

    padding: 4px 0;

    text-align: left;

}



.holiday-list {

    margin-left: 10px;

    padding-left: 0;

}



.holiday-item {

    list-style: none;

    padding: 3px 0;

    text-align: left;

}



@media (max-width: 768px) {



    .main-layout {

        flex-direction: column;

        width: 100%;

    }



    .left-column,

    .right-column {

        width: 100% !important;   /* ⭐ FULL WIDTH */

        max-width: 100% !important;

    }



    .calendar-container {

        width: 100% !important;   /* ⭐ calendar full width */

    }

}



/* Ensure the whole section aligns left */

.holidays-section {

    display: flex;

    flex-direction: column;

    align-items: flex-start; /* ⭐ left align everything */

    width: 100%;

}



/* Ensure each category section aligns left */

.holiday-section {

    width: 100%;

    text-align: left; /* ⭐ force left alignment */

}



/* Header (category title) left aligned */

.holiday-header {

    width: 100%;

    text-align: left;

    padding: 4px 0;

    cursor: pointer;

}



/* The list container */

.holiday-list {

    width: 100%;

    margin: 0;

    padding-left: 0; /* remove indentation */

    text-align: left;

}



/* Each holiday item */

.holiday-item {

    list-style: none;

    padding: 4px 0;

    text-align: left; /* ⭐ force left alignment */

}



@media (max-width: 768px) {



    .language-section {

        width: 100%;

        padding: 10px 0;

        margin-bottom: 10px;

        display: flex;

        flex-direction: column;

        align-items: flex-start; /* left aligned */

    }



    .language-dropdown {

        width: 60%;

        max-width: 250px;

    }

}



/* ⭐ Desktop: right-align language selector */

@media (min-width: 769px) {

    .language-section {

        display: flex;

        flex-direction: column;

        align-items: flex-end; /* ⭐ RIGHT ALIGN */

        text-align: right;

    }



    .language-dropdown {

        width: auto;

    }

}



/* Geez verse number */

.geez-ref {

    font-size: calc(0.9vw + 0.9vh);

    margin-top: 10px;

}



/* Make sure the container stays readable */


html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: auto;
}

.calendar-weekdays,

.calendar-days {

    display: grid;

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

    width: 100%;

}

/* 

.calendar-weekdays,

.calendar-days {

    display: grid;

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

    min-width: 490px; 

    width: 100%;

} */



.calendar-weekdays,

.calendar-days {

    display: grid;

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

    width: 100%;

}



/* .calendar-container {

    overflow-x: auto;

    overflow-y: hidden;

} */



@media (max-width: 768px) {

    .calendar-header-inside {

        display: grid !important;

        grid-template-columns: 1fr auto 1fr; /* left button | month | right button */

        align-items: center;

        justify-items: center;

        background-color: #e8d5c0;

        border-radius: 6px;

        padding: 8px 0;

        margin-bottom: 10px;

    }



    #prevMonth {

        justify-self: start;

    }



    #nextMonth {

        justify-self: end;

    }



    .month-label {

        text-align: center;

        width: 100%;

    }

}



.calendar-grid {

  display: grid;

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

  gap: 4px;

}



/* DESKTOP: compact centered calendar */

@media (min-width: 769px) {

    .calendar-container {

        width: 540px;

        max-width: 540px;

        margin: 0 auto;

        overflow-x: visible;

    }

}



/* DESKTOP FIX — keep menu visible + align Language row */

/* FORCE Language + Dropdown on one line for ALL screen sizes */

.language-section {

    display: flex !important;

    flex-direction: row !important;   /* always side-by-side */

    align-items: center !important;   /* vertical alignment */

    justify-content: flex-end !important; /* right aligned */

    gap: 10px;

    width: 100%;

    margin: 0;                        /* remove extra space above */

    padding: 0;

}



/* Remove extra spacing from label */

.side-title {

    margin: 0 !important;

}



/* Keep dropdown compact */

.language-dropdown {

    width: auto !important;

}



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

   UNIFIED OPTION TITLES

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

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

OPTION SECTION LEFT ALIGN STYLE

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

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

OPTION TITLE MODERN STYLE

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



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

OPTION TITLE STACK STYLE

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



.option-title {

    display: flex;

    flex-direction: column;

    text-align: left;



    padding-left: 14px;

    border-left: 4px solid #3b82f6;



    font-weight: 600;

    line-height: 1.5;

    margin-bottom: 22px;

}



/* Amharic top line */

.option-amharic {

    font-size: 18px;

    font-weight: 700;

    color: #1f2937;

}



/* English second line */

.option-english {

    font-size: 14px;

    font-weight: 400;

    color: #6b7280;

    margin-top: 4px;

}



/* Mobile responsiveness */

@media (max-width: 768px) {

    .option-amharic {

        font-size: 17px;

    }



    .option-english {

        font-size: 13px;

    }

}



/* Slight spacing improvement */

.section {

    margin-bottom: 25px;

}



.calendar-container {

    overflow-x: auto;

}



@media (min-width: 769px) {

    .calendar-container {

        overflow-x: visible;

    }

}



/* DESKTOP: Align How-To with Language row */

@media (min-width: 769px) {



    .main-layout {

        align-items: flex-start;   /* force same top alignment */

    }



    .how-to-use {

        margin-top: 0 !important;  /* remove extra top space */

        padding-top: 0;

    }



    .language-section {

        margin-top: 0 !important;

    }



}



/* Remove space above Option 2 title */

.holidays-section {

    margin-top: 0 !important;

    padding-top: 0;

}



.holidays-section .option-title,

.holidays-section h3 {

    margin-top: 0 !important;

}



html, body {

    margin: 0;

    padding: 0;

    height: 100%;

    width: 100%;

}



.display-body {

    height: 100vh;

    width: 100vw;

    background: black;

    color: white;

    display: flex;

    flex-direction: column;

}



/* Top controls */

.controls {

    display: flex;

    justify-content: space-between;

    padding: 15px;

}



/* Text display area */


.verse-container {
    flex: 1;
    width: 95%;
    max-width: 100%;
    padding: 40px 0;   /* ⬅ FIXED */
    box-sizing: border-box;

    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    overflow-y: auto;
}




/* Main text */

.geez-text {

    font-size: clamp(32px, 6vw, 90px);

    font-weight: bold;

    line-height: 1.4;

}



.english-text {

    font-size: clamp(20px, 3vw, 40px);

    margin-top: 10px;

}



/* Verse numbers - increased size and responsive */

.geez-ref, .english-ref {

    font-size: clamp(18px, 3vw, 50px); /* bigger than before */

    opacity: 0.8;

    margin-top: 10px;

}



/* Buttons */

.close-btn, .fullscreen-btn {

    padding: 10px 18px;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-size: 14px;

}



/* Optional: ensure small phones don't break layout */

@media (max-width: 480px) {

    .verse-container {

        padding: 20px 5vw;

    }

    .geez-text {

        font-size: clamp(24px, 8vw, 80px);

    }

    .english-text {

        font-size: clamp(16px, 4vw, 36px);

    }

    .geez-ref, .english-ref {

        font-size: clamp(14px, 4vw, 40px);

    }

}



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

   LANGUAGE SELECTOR — FINAL FIX

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



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

   LANGUAGE SELECTOR — FINAL FIX

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



/* Always keep label + dropdown on one line */

.language-selector {

    display: flex !important;

    flex-direction: row !important;

    justify-content: flex-end !important;

    align-items: center !important;

    gap: 10px;

    width: 100%;

    padding: 0 10px;

}



/* Label styling */

.language-selector label {

    font-size: 16px;

    font-weight: 600;

    color: #4b2e19;

    white-space: nowrap;   /* prevents wrapping */

}



/* Dropdown styling */

.language-selector select {

    padding: 8px 12px;

    font-size: 16px;

    border: 2px solid #4b2e19;

    border-radius: 8px;

    background: #fff8f0;

    cursor: pointer;

}



/* Mobile: still horizontal + right aligned */

@media (max-width: 768px) {

    .language-selector {

        justify-content: flex-end !important;

        padding-right: 12px;

    }

}





/* Keep month label on one line in mobile */

@media (max-width: 768px) {

    .month-label {

        white-space: nowrap;      /* prevents line break */

        font-size: 18px;          /* optional: slightly smaller for mobile */

        overflow: hidden;         /* prevents overflow issues */

        text-overflow: ellipsis;  /* optional: protects layout if text is too long */

    }

}



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

   HOW PAGE — ISOLATED STYLES

   (Safe merge, no conflicts)

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



.how-wrapper {

    max-width: 900px;

    margin: 40px auto;

    padding: 20px;

    background: #f4f1ea;

    font-family: "Segoe UI", sans-serif;

    color: #4b2e19;

}



/* Titles (namespaced to avoid conflict with main .title/.subtitle) */

.how-title {

    text-align: center;

    font-size: 34px;

    font-weight: 800;

    margin-bottom: 10px;

    color: #3a240f;

}



.how-subtitle {

    text-align: center;

    font-size: 20px;

    margin-bottom: 30px;

    color: #6a4a2a;

}



/* Section box */

.how-section {

    background: #fff8f0;

    border: 2px solid #d8c8b6;

    border-radius: 12px;

    padding: 22px 26px;

    margin-bottom: 28px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.08);

}



/* Section title */

.how-section-title {

    font-size: 22px;

    font-weight: 800;

    margin-bottom: 14px;

    color: #4b2e19;

    display: flex;

    align-items: center;

    gap: 10px;

}



/* Steps */

.how-step {

    margin: 12px 0;

    font-size: 17px;

    line-height: 1.6;

    display: flex;

    gap: 10px;

}



.how-step-icon {

    font-size: 22px;

    width: 28px;

}






@media (max-width: 768px) {



    /* Allow the calendar to shrink instead of overflow */

    .calendar-weekdays,

    .calendar-days,

    .calendar-grid {

        grid-template-columns: repeat(7, minmax(40px, 1fr)) !important;

    }



    /* Ensure the container never clips the right border */

    .calendar-container {

        width: 100% !important;

        overflow-x: auto !important;

        padding-right: 4px; /* ensures border stays visible */

        box-sizing: border-box;

    }



    /* Prevent parent layout from squeezing the calendar */

    .main-layout {

        gap: 20px !important;

    }



    /* Ensure the calendar column uses full width */

    .calendar-box {

        width: 100% !important;

    }

}



.site-header {

    background: #f3e9d8;

    border-bottom: 3px solid #6b4f2b;

    padding: 20px 0;   /* taller header */

}



.header-inner {

    width: 95%;

    max-width: 1100px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



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

LOGO STACK (AMHARIC TOP / ENGLISH BOTTOM)

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



.logo {

    display: flex;

    flex-direction: column;   /* Forces vertical stacking */

    align-items: flex-start;  /* Left aligned */

    line-height: 1.2;

}



.logo-am {

    display: block;

    font-size: 20px;

    font-weight: 700;

    color: #1f2937;

}



.logo-en {

    display: block;

    font-size: 14px;

    font-weight: 400;

    color: #6b7280;

    margin-top: 3px;

}



/* Make sure no media query overrides this */

@media (max-width: 768px) {

    .logo {

        flex-direction: column;  /* Force stack even on mobile */

        align-items: flex-start;

    }

}



/* Desktop Nav */

.main-nav {

    display: flex;

    gap: 35px;

}



.nav-link {

    text-decoration: none;

    color: #4b3621;

    display: flex;

    flex-direction: column;

    align-items: center;

    transition: 0.3s;

}



.nav-link:hover {

    color: #a36a2a;

}



.nav-am {

    font-size: 18px;

    font-weight: bold;

}



.nav-en {

    font-size: 12px;

    margin-top: 3px;

    opacity: 0.7;

}





.misbak-preview {

    display: flex;

    gap: 20px;

    margin-top: 20px;

    padding: 20px;

    background: #fafafa;

    border-radius: 12px;

    border: 1px solid #ddd;

}



.misbak-left, .misbak-right {

    flex: 1;

}



.misbak-title {

    font-size: 20px;

    margin-bottom: 10px;

    font-weight: bold;

    text-align: center;

}



/* .geez-text {

    font-family: "Noto Sans Ethiopic", serif;

    font-size: 28px;

    white-space: pre-wrap;

    line-height: 1.7;

} */



.trans-text {

    font-size: 22px;

    white-space: pre-wrap;

    line-height: 1.7;

}



.geez-ref, .trans-ref {

    font-size: 16px;

    margin-top: 10px;

    text-align: center;

    opacity: 0.7;

    color: #333; /* or any visible color */

}







/* Desktop/tablet: side-by-side */

.misbak-preview {

    display: flex;

    flex-direction: row;

    gap: 20px;

    margin-top: 20px;

    padding: 20px;

    background: #fafafa;

    border-radius: 12px;

    border: 1px solid #ddd;

}



/* Mobile: stack vertically */

@media (max-width: 768px) {

    .misbak-preview {

        flex-direction: column;

    }

}





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

   FULLSCREEN MISBAK PAGE (display.html)

   Scoped so it does NOT affect index.html

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

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

   FULLSCREEN MISBAK DISPLAY (display.html only)

   Black background + white text

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



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

   FULLSCREEN MISBAK DISPLAY (display.html only)

   Black background + white text

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



.display-body {

    background-color: #000 !important;

    color: #fff !important;

    min-height: 100vh;

    padding: 40px 20px;

    font-family: "Noto Sans Ethiopic", "Abyssinica SIL", sans-serif;

}



/* Center container */

.display-body .verse-container {

    max-width: 900px;

    margin: 0 auto;

    padding: 20px;

    text-align: center;

}



/* Geez Misbak — large and beautiful */

.display-body .geez-text {

    font-size: 70px;

    line-height: 1.4;

    font-weight: 600;

    color: #fff !important;

    white-space: pre-line;

    margin-bottom: 20px;

}



/* Geez reference */

.display-body .geez-ref {

    font-size: 26px;

    color: #ccc !important;

    margin-top: 10px;

    opacity: 0.9;

}



/* Amharic text */

.display-body .amharic-text {

    font-size: 32px;

    line-height: 1.5;

    color: #eee !important;

    white-space: pre-line;

    margin-top: 40px;

}



/* English / French / German text */

.display-body .english-text {

    font-size: 28px;

    line-height: 1.5;

    color: #fff !important;

    white-space: pre-line;

    margin-top: 40px;

    max-width: 90%;

    margin-left: auto;

    margin-right: auto;

}



/* Translation reference */

.display-body .english-ref {

    font-size: 22px;

    color: #bbb !important;

    margin-top: 10px;

    opacity: 0.85;

}



/* Buttons on black background */

.display-body .controls button {

    background: #222 !important;

    color: #fff !important;

    border: 1px solid #444;

    padding: 10px 18px;

    border-radius: 6px;

    cursor: pointer;

}



.display-body .controls button:hover {

    background: #333 !important;

}

/* ============================
   FOOTER — MATCH HEADER LAYOUT
============================ */

.site-footer {
    width: 100%;
    background: #f3e9d8;      /* same beige as header */
    padding: 18px 0 20px 0;   /* ⭐ extra bottom space, same colour */
    margin: 0;
    border-top: none;         /* no top line */
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LEFT SIDE */
.footer-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-title .amharic {
    font-size: 20px;
    font-weight: 700;
    color: #4b2e19;
}

.footer-title .english {
    font-size: 16px;
    font-weight: 600;
    color: #4b2e19;
    margin-top: 2px;
}

/* RIGHT SIDE */
.footer-nav {
    display: flex;
    gap: 35px;
}

.footer-link {
    text-decoration: none;
    color: #4b2e19;
    font-weight: 600;
    transition: 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-link .amharic {
    font-size: 18px;
    font-weight: 700;
}

.footer-link .english {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 2px;
}

.footer-link:hover {
    color: #7a5a33;
}

/* Remove accidental white gaps */
body {
    margin: 0 !important;
    padding: 0 !important;
}




/* ⭐ GEEZ — max 3 lines, lighter */
.geez-text {
    display: -webkit-box;
    /* -webkit-line-clamp: 4; */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 32px;
    line-height: 1.4;
    margin-bottom: 18px;
}

/* ⭐ AMHARIC — full size but lighter spacing */
.amharic-text {
    font-size: 34px;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* ⭐ OTHER LANGUAGES — 75% of Amharic */
.english-text,
.english-ref {
    font-size: 26px ;
    line-height: 1.35;
    margin-bottom: 10px;
}

/* ⭐ Reduce vertical burden */
.geez-ref,
.english-ref {
    margin-top: 4px;
    margin-bottom: 10px;
}

/* ⭐ Make whole display lighter */
.verse-container {
    width: 95%;
    max-width: 900px;
    padding: 20px;
    box-sizing: border-box;

    height: auto;        /* ⭐ allow full expansion */
    max-height: none;    /* ⭐ remove artificial limit */
    overflow-y: visible; /* ⭐ no cutting */
}

/* ⭐ UNIVERSAL RESPONSIVE FONT SIZE FOR ALL VERSES */
/* ⭐ UNIVERSAL FONT SIZE FOR ALL LANGUAGES */
.geez-text,
.amharic-text,
.english-text {
    font-size: calc(1.6vw + 1.6vh);   /* same size for all */
    line-height: 1.45;                /* tighter spacing */
    white-space: pre-line;
    margin-bottom: 10px;              /* reduced gap */
}

/* ⭐ VERSE NUMBERS — unified + compact */
.geez-ref,
.english-ref {
    font-size: calc(1.1vw + 1.1vh);
    margin-top: 4px;
    margin-bottom: 12px;
    color: #d0d0d0;
}

/* ⭐ SAME FONT SIZE FOR ALL LANGUAGES */
.geez-text,
.amharic-text,
.english-text {
    font-size: calc(1.7vw + 1.7vh);   /* larger + responsive */
    line-height: 1.35;                /* tighter spacing */
    white-space: pre-line;
    margin-top: 0;
    margin-bottom: 8px;               /* very small gap */
}

/* ⭐ VERSE NUMBERS — compact + aligned */
.geez-ref,
.english-ref {
    font-size: calc(1.2vw + 1.2vh);
    margin-top: 2px;
    margin-bottom: 10px;
    color: #d0d0d0;
}

/* ⭐ REDUCE ALL PARAGRAPH SPACING */
.verse-container p {
    margin-top: 0;
    margin-bottom: 8px;   /* small, clean spacing */
}

/* ⭐ CONTAINER — allow full content, no cutting */
.verse-container {
    width: 90%;
    max-width: 900px;
    padding: 10px;
    margin-top: 10px;
    overflow: visible;
    box-sizing: border-box;
}

/* ⭐ DISPLAY BODY — center everything tightly */
.display-body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 5px;
}

/* ⭐ Restore fullscreen button position */
.controls {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;   /* always on top */
    display: flex;
    gap: 10px;
}

/* Make fullscreen button visible again */
.fullscreen-btn {
    background: transparent;
    border: 1px solid white;
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.85;
}

.fullscreen-btn:hover {
    opacity: 1;
}

/* ⭐ RESET DISPLAY PAGE LAYOUT */
.display-body {
    background: black;
    color: white;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", sans-serif;
}

/* ⭐ CONTAINER: fits inside screen, scrolls only if needed */
.verse-container {
    width: 90%;
    max-width: 900px;
    margin: 20px auto;
    padding: 10px 16px;
    box-sizing: border-box;

    max-height: calc(100vh - 80px);  /* keep inside screen */
    overflow-y: auto;                /* scroll if very long */
}

/* ⭐ SAME FONT SIZE FOR ALL LANGUAGES */
.geez-text,
.amharic-text,
.english-text {
    font-size: min(3.0vh, 2.4vw) ;  /* same size, responsive */
    line-height: 1.4;
    white-space: pre-line;
    margin: 4px 0;
}

/* ⭐ VERSE NUMBERS — slightly smaller but consistent */
.geez-ref,
.english-ref {
    font-size: min(2.4vh, 1.9vw) ;
    margin: 4px 0 8px 0;
    color: #0f0e0e51;
}

/* ⭐ REMOVE ANY EXTRA BIG SPACING BETWEEN PARAGRAPHS */
.verse-container p {
    margin-top: 0;
    margin-bottom: 6px;
}

/* ⭐ DISPLAY PAGE ONLY */
.display-body {
    background: black;
    color: white;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", sans-serif;
}

/* Container for verses */
.display-body .verse-container {
    width: 90%;
    max-width: 900px;
    margin: 20px auto;
    padding: 10px 16px;
    box-sizing: border-box;

    max-height: calc(100vh - 60px);  /* keep inside screen */
    overflow-y: auto;                /* scroll only if very long */
}


/* ============================
   CLEAN DISPLAY PAGE RESET
============================ */

.display-body {
    background: black;
    color: white;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", sans-serif;
}

/* Container that holds all verses */
.display-body .verse-container {
    width: 90%;
    max-width: 900px;
    margin: 20px auto;
    padding: 10px 16px;
    box-sizing: border-box;

    max-height: calc(100vh - 80px);  /* keep inside screen */
    overflow-y: auto;                /* scroll only if very long */
}

/* ⭐ SAME FONT SIZE FOR ALL LANGUAGES */
.display-body .geez-text,
.display-body .amharic-text,
.display-body .english-text {
    font-size: min(3.0vh, 2.4vw) ;  /* same size, responsive */
    line-height: 1.35;
    white-space: pre-line;
    margin: 4px 0;
}

/* ⭐ Verse numbers (slightly smaller) */
.display-body .geez-ref,
.display-body .english-ref {
    font-size: min(2.4vh, 1.9vw) ;
    margin: 4px 0 10px 0;
    color: #d0d0d0;
}

/* ⭐ Remove extra spacing between paragraphs */
.display-body .verse-container p {
    margin-top: 0;
    margin-bottom: 6px;
}

/* ============================
   PERFECT FULL‑SCREEN DISPLAY
============================ */

.display-body {
    background: black;
    color: white;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", sans-serif;
}

/* Container fills the screen with small padding */
.display-body .verse-container {
    width: 92%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 10px;
    box-sizing: border-box;

    height: calc(100vh - 40px);   /* fills screen */
    overflow-y: auto;             /* scroll only if VERY long */
}

/* ⭐ SAME FONT SIZE FOR ALL LANGUAGES — BIGGER */
.display-body .geez-text,
.display-body .amharic-text,
.display-body .english-text {
    font-size: calc(4.2vh + 1.2vw);  /* BIG + responsive */
    line-height: 1.25;                          /* tight spacing */
    white-space: pre-line;
    margin: 0 0 12px 0;
    text-align: center;
}

/* ⭐ Verse numbers slightly smaller */
.display-body .geez-ref,
.display-body .english-ref {
    font-size: calc(2.6vh + 0.8vw);
    margin: 0 0 16px 0;
    color: #d0d0d0;
    text-align: center;
}

/* Remove all extra paragraph spacing */
.display-body .verse-container p {
    margin-top: 0;
    margin-bottom: 8px;
}

/* ============================
   INDEX PAGE GEEZ FONT (below calendar)
============================ */

.index-geez {
    font-size: 20px;        /* adjust as you like */
    line-height: 1.4;
    white-space: pre-line;
    margin: 6px 0;
}


.display-body .verse-container {
    width: 92%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 10px;
    box-sizing: border-box;

    height: auto;                 /* ⭐ allow full expansion */
    max-height: calc(100vh - 40px);
    overflow-y: auto;             /* ⭐ scroll only if VERY long */
}
.display-body .geez-text {
    font-size: calc(4.0vh + 1.2vw);  /* base size */
    line-height: 1.32;
    white-space: pre-line;
    margin: 0 0 12px 0;
    text-align: center;
}

.display-body .amharic-text,
.display-body .english-text {
    font-size: calc((4.0vh + 1.2vw) * 0.75);  /* 75% of Geez */
    line-height: 1.32;
    white-space: pre-line;
    margin: 0 0 10px 0;
    text-align: center;
}

/* ============================================
   INDEX PAGE — CUSTOM REFERENCE STYLES
   (These apply ONLY on index.html)
============================================ */

.index-geez-ref {
    font-size: 20px;
    color: #080708;
    font-weight: 600;
    text-align: right;
    margin-top: 4px;
    margin-bottom: 0;
}

.index-trans-ref {
    font-size: 18px;
    color: #0c0c0c;
    font-weight: 500;
    text-align: right;
    margin-top: 2px;
    margin-bottom: 0;
}


.hover-card {
    position: fixed;
    display: none;
    max-width: 320px;
    background: #fff8e6;
    border: 1px solid #d8c9a7;
    padding: 12px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    font-size: 14px;
    line-height: 1.35;
    white-space: pre-line;
    animation: fadeIn 0.15s ease-out;
}

.fc-geez {
    margin-bottom: 4px;
}

.fc-ref {
    font-weight: bold;
    text-align: right;
    margin-top: 2px;
    margin-bottom: 6px;
}

.fc-trans {
    margin-top: 4px;
}

.fc-trans-ref {
    text-align: right;
    margin-top: 6px;
    color: #444;
}/* Category header */
.holiday-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff3d6;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    color: #5a3e1b;
    border: 1px solid #e2d3b3;
    transition: background 0.2s ease;
    margin-bottom: 8px;
}

.holiday-header:hover {
    background: #ffe9b8;
}

/* Two-column list of names */
.holiday-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}

/* Name row: name then + */
.sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    padding: 4px 2px;
}

.holiday-subtitle {
    overflow-wrap: break-word;
    white-space: normal;
}

/* Plus/minus icon after name */
.holiday-subtoggle {
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px;
    flex-shrink: 0;
}

/* Dropdown card inserted under clicked item */
.sub-details {
    grid-column: 1 / -1; /* span both columns */
    background: #fff8e6;
    border: 1px solid #d8c9a7;
    padding: 12px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    margin-top: -4px;
    animation: fadeIn 0.15s ease-out;
}

.sd-geez {
    font-size: 18px;
    margin-bottom: 4px;
}

.sd-ref {
    font-weight: bold;
    text-align: right;
    margin-top: 2px;
    margin-bottom: 6px;
}

.sd-trans {
    margin-top: 4px;
    font-size: 16px;
    line-height: 1.4;
}

.sd-engref {
    text-align: right;
    margin-top: 6px;
    color: #444;
    font-size: 14px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Selected day + Today */
.calendar-day.selected,
.calendar-day.today {
    background-color: lch(74.97% 24.93 78.38); /* same as arrow */
    color: #5a3e1b;                            /* your warm brown text */
    border: 1px solid #c8b8a6;                 /* subtle warm border */
    border-radius: 6px;
}

.calendar-day:hover {
    background-color: #e8d5c0;   /* EXACT same as header background */
    color: #5a3e1b;              /* your warm brown text */
    border: 1px solid #c8b8a6;   /* subtle warm border */
}


/* Active (when pressing/tapping) */
.calendar-day:active {
    background-color: #d2b48c; /* same as arrow */
    color: #5a3e1b;
    border: 1px solid #bfa07a;
}
/* Dropdown header */
.dropdown-header {
    background: #e8d5c0;            /* same as your header bg */
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: #5a3e1b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* Arrow icon */
.dropdown-arrow {
    font-size: 20px;
    transition: transform 0.2s ease;
}

/* Hidden content */
.dropdown-content {
    display: none;
    padding: 10px 4px;
    line-height: 1.6;
    color: #5a3e1b;
}

/* When open */
.dropdown-content.open {
    display: block;
}

/* Rotate arrow when open */
.dropdown-header.open .dropdown-arrow {
    transform: rotate(90deg);
}
/* OPTION 2 ONLY — brighter header */
.dropdown-header[onclick="toggleOpt2Instructions()"] {
    background-color: #f9f5ee; /* soft bright beige */
    color: #3a2f1f; /* warm brown text */
    border: 1px solid #e8e0d4; /* subtle border */
    
}
/* OPTION 2 ONLY — brighter header */
.dropdown-header[onclick="toggleOpt1Instructions()"] {
    background-color: #f9f5ee; /* soft bright beige */
    color: #3a2f1f; /* warm brown text */
    border: 1px solid #e8e0d4; /* subtle border */
}
.flashcard {
    background: #fffdf8; /* soft bright beige */
    border: 1px solid #e8e0d4;
    padding: 14px 18px;
    border-radius: 10px;
    margin: 10px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.flashcard p {
    margin: 6px 0;
    line-height: 1.55;
}
/* OPTION 1 ONLY — match Option 2 header color */

/* OPTION 3 header matches Option 1 & 2 */
.option3-header {
    background-color: #f9f5ee;
    color: #3a2f1f;
    border: 1px solid #e8e0d4;
    line-height: 1.35;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* English subtitle smaller + softer */
.option3-header .english-sub {
    font-size: 90%;
    opacity: 0.9;
    display: block;
    margin-top: 2px;
}

/* Spacing under dropdown */
#opt3Instructions {
    margin-bottom: 10px;
}
/* Smaller font for translated Misbak preview (English / German / French) */
#previewTrans {
    font-size: 17px;      /* adjust to 13–15px depending on your taste */
    line-height: 1.4;
}

#previewTransRef {
    font-size: 15px;      /* reference slightly smaller */
    opacity: 1;
}
/* ✅ Remove inner borders from holiday flashcards */
.holiday-item {
    border: none !important;
    background: transparent !important;
    padding: 10px 12px !important;
}

/* ✅ Remove top border between items */
.holiday-item + .holiday-item {
    border-top: none !important;
}

/* ✅ Remove borders from two-column layout */
.holiday-list.two-column .holiday-item {
    border: none !important;
    padding: 10px 12px !important;
}

/* ✅ Keep hover effect soft and elegant */
.holiday-item:hover {
    background: #f7efe4 !important;
}
.holiday-section {
    border: none !important;
    background: #fff8f0 !important;
}

.holiday-header {
    border-bottom: 1px solid #d8c8b6 !important;
}
/* ⭐ Remove bold from Amharic instruction text */
.option-amharic {
    font-weight: normal !important;
}
.search-bar-container {
    position: relative;
    margin-top: 10px;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff8f0;
    border: 1px solid #d8c8b6;
    border-radius: 6px;
    z-index: 9999;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.search-section {
    width: 100%;
    margin-top: 20px;
}

.search-bar-container {
    position: relative;
    width: 100%;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff8f0;
    border: 1px solid #d8c8b6;
    border-radius: 6px;
    z-index: 9999;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}


/* Reduce space between flashcard and search bar */
#opt3Instructions {
    margin-bottom: 6px !important;   /* was larger before */
    padding-bottom: 0 !important;
}

#opt3Instructions .flashcard {
    margin-bottom: 6px !important;   /* reduce gap */
    padding-bottom: 6px !important;
}

/* Reduce space above the search bar */
.search-section {
    margin-top: 4px !important;
}
/* Increase space between search box and footer */
.search-section {
    margin-bottom: 50px !important;   /* adjust to 30, 50, 60 as you like */
}

.display-body {
    overflow-y: auto;
}












/* 17/04 */


/* 03/04 */


@media (max-width: 768px) {
    .option1-header {
        width: 100%;
        text-align: center;
        justify-content: center;
        gap: 10px;
    }
}
.option1-header {
    width: 540px;              /* match calendar width */
    max-width: 100%;
    margin: 0 auto 10px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}


/* Amharic main title */
.option1-header .opt-title {
    font-size: 20px;           /* match other option headers */
    font-weight: 700;
    color: #4b2e19;
    line-height: 1.3;
}


/* English subtitle */
.option1-header .english-sub {
    font-size: 15px;           /* match your other subtitles */
    font-weight: 500;
    color: #6b4a2b;
}
.holiday-list {
    width: 540px;          /* match header + calendar */
    max-width: 100%;       /* responsive */
    margin: 0 auto;        /* center it */
}


.holiday-item {
    width: 100%;           /* fill the 540px container */
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .holiday-list {
        width: 100%;
    }
}
/* Make Option 2 categories the same width as the header */
.holiday-container,
.holiday-section {
    width: 540px !important;   /* match Option 1 + calendar width */
    max-width: 100%;
    margin: 0 auto !important; /* center it */
}


/* Make each category item fill that width */
.holiday-header,
.holiday-list,
.holiday-item {
    width: 100% !important;
    box-sizing: border-box;
}




/* Selected language full‑width */
.english-text {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;   /* keep centered */
}


/* Selected language verse number full‑width + right aligned */
.english-ref {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: right;
}
/* Selected language full width + full flex stretch */
#mainVerse {
    width: 100% !important;
    align-self: stretch !important;   /* ⬅ horizontal full width */
    flex-grow: 1 !important;          /* ⬅ vertical expansion */
    text-align: center;
}


/* Selected language verse number full width + right aligned */
#mainVerseNo {
    width: 100% !important;
    align-self: stretch !important;
    text-align: right !important;
}
/* ============================
   FINAL VERTICAL SPACING FIX
   (Always wins)
============================ */


/* Geez main text */
#geezMisbak {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}


/* Geez verse number */
#geezVerseNo {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}


/* Amharic verse */
#amharicVerse {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}


/* Selected language verse */
#mainVerse {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}


/* Selected language verse number */
#mainVerseNo {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Remove global line-height that was stretching everything */
.verse-container * {
    line-height: 1.4 !important;
}
.amharic-text {
    font-family: "Noto Sans Ethiopic", "Abyssinica SIL", serif;
    font-size: 34px;
    line-height: 1.5;
    margin: 0 0 20px 0;
    white-space: pre-wrap;
    text-align: center;
    width: 100%;
}
.english-text {
    font-size: 32px;
    line-height: 1.6;
    margin: 0 0 18px 0;
    white-space: pre-wrap;
    text-align: center;
    width: 100%;
}
.english-ref {
    font-size: 24px;
    color: #c0c0c0;
    margin: 0;
    text-align: right;
    width: 100%;
}
/* ============================
   AUTO‑SCALE DISPLAY PAGE TEXT
   (Keeps all languages visible)
============================ */


/* Make the verse container fill the screen */
.verse-container {
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* no vertical centering */
    overflow: hidden;            /* prevent scroll */
    padding: 20px 0 !important;
}


/* Scale all text based on viewport height */
#geezMisbak,
#geezVerseNo,
#amharicVerse,
#mainVerse,
#mainVerseNo {
    font-size: calc(1.6vh + 1vw) !important;
    line-height: 1.25 !important;
    margin: 0 0 12px 0 !important;
    width: 100% !important;
}


/* Make verse numbers slightly smaller */
#geezVerseNo,
#mainVerseNo {
    font-size: calc(1.2vh + 0.8vw) !important;
}
/* --- DISPLAY TEXT LAYOUT --- */






/* Geez (if you use it as a block) */
.geez-text {
    font-size: calc(1.6vh + 1vw);
    line-height: 1.3;
    margin: 0 0 10px 0;
    white-space: pre-wrap;
    text-align: center;
}


/* Amharic */
.amharic-text {
    font-family: "Noto Sans Ethiopic", "Abyssinica SIL", serif;
    font-size: calc(1.6vh + 1vw);
    line-height: 1.3;
    margin: 0 0 10px 0;
    white-space: pre-wrap;
    text-align: center;
}


/* Selected language (English/French/etc.) */
.english-text {
    font-size: calc(1.6vh + 1vw);
    line-height: 1.3;
    margin: 0 0 10px 0;
    white-space: pre-wrap;
    text-align: center;
}


/* Reference */
.english-ref,
.geez-ref {
    font-size: calc(1.1vh + 0.8vw);
    line-height: 1.2;
    margin: 4px 0 0 0;
    text-align: right;
    color: #c0c0c0;
}
/* Scale Geez, Amharic, English UP to fill screen */
#geezMisbak,
#geezVerseNo,
#amharicVerse,
#mainVerse,
#mainVerseNo {
    font-size: calc(2.4vh + 1.4vw) !important;  /* BIGGER */
    line-height: 1.25 !important;
    margin: 0 0 14px 0 !important;
    width: 100% !important;
}


/* Verse numbers slightly smaller */
#geezVerseNo,
#mainVerseNo {
    font-size: calc(1.6vh + 1vw) !important;
}
.verse-container {
    height: 100vh;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 40px;
    box-sizing: border-box;


    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}
.verse-container * {
    font-size: 3vh;   /* starting size */
    line-height: 1.25;
}


.verse-container {
    transform-origin: top center;
    overflow: hidden;
}
/* --- Fullscreen verse layout, no scroll --- */


.display-body {
    background: black;
    color: white;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}


.verse-container {
    width: 100%;
    max-width: 1000px;
    height: 100vh;
    margin: 0 auto;
    padding: 24px 40px;
    box-sizing: border-box;


    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden; /* no scroll */
}


/* Geez main text */
#geezMisbak {
    font-size: 3.0vh;
    line-height: 1.25;
    margin: 0 0 1.6vh;
    white-space: pre-wrap;
    text-align: center;
}


/* Geez verse number */
#geezVerseNo {
    font-size: 1.8vh;
    margin: 0 0 1.8vh;
    text-align: right;
    color: #d0d0d0;
}


/* Amharic verse */
#amharicVerse {
    font-family: "Noto Sans Ethiopic", "Abyssinica SIL", serif;
    font-size: 2.7vh;
    line-height: 1.25;
    margin: 0 0 1.6vh;
    white-space: pre-wrap;
    text-align: center;
}


/* Selected language verse */
#mainVerse {
    font-size: 2.5vh;
    line-height: 1.25;
    margin: 0 0 1.4vh;
    white-space: pre-wrap;
    text-align: center;
}


/* Selected language verse number */
#mainVerseNo {
    font-size: 1.8vh;
    margin: 0;
    text-align: right;
    color: #c0c0c0;
}
/* --- FINAL FULLSCREEN DISPLAY FIX --- */


.verse-container {
    width: 100%;
    max-width: 1000px;
    height: 100vh;
    margin: 0 auto;
    padding: 24px 40px;
    box-sizing: border-box;


    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden; /* no scroll */
}


/* Geez */
#geezMisbak {
    font-size: 3.0vh;
    line-height: 1.25;
    margin: 0 0 1.6vh;
    white-space: pre-wrap;
    text-align: center;
}


/* Geez verse number */
#geezVerseNo {
    font-size: 1.8vh;
    margin: 0 0 1.8vh;
    text-align: right;
    color: #d0d0d0;
}


/* Amharic */
#amharicVerse {
    font-size: 2.7vh;
    line-height: 1.25;
    margin: 0 0 1.6vh;
    white-space: pre-wrap;
    text-align: center;
}


/* Selected language */
#mainVerse {
    font-size: 2.5vh;
    line-height: 1.25;
    margin: 0 0 1.4vh;
    white-space: pre-wrap;
    text-align: center;
}


/* Selected language verse number */
#mainVerseNo {
    font-size: 1.8vh;
    margin: 0;
    text-align: right;
    color: #c0c0c0;
}



/* --- TRUE FULLSCREEN CONTAINER --- */
.verse-container {
    width: 100vw !important;      /* full screen width */
    max-width: 100vw !important;  /* override old 900px limit */
    height: 100vh !important;     /* full screen height */
    padding: 3vh 4vw;
    margin: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;             /* no scroll */
}
/* --- FULL WIDTH TEXT BLOCKS --- */
#amharicVerse,
#mainVerse {
    width: 100vw !important;      /* full screen width */
    max-width: 100vw !important;
    text-align: center;
    white-space: pre-wrap;
    margin: 0 0 1.6vh 0;
}
#geezMisbak {
    margin-top: 1vh !important;
}
/* --- INCREASE AMHARIC + SELECTED LANGUAGE --- */

#amharicVerse {
    font-size: 2.8vh !important;   /* was 2.2vh */
    line-height: 1.28 !important;
    margin: 0 0 1.4vh 0 !important;
    width: 100vw !important;
    text-align: center;
}

#mainVerse {
    font-size: 2.6vh !important;   /* was 2.0vh */
    line-height: 1.28 !important;
    margin: 0 0 1.2vh 0 !important;
    width: 100vw !important;
    text-align: center;
}

#mainVerseNo {
    font-size: 1.9vh !important;   /* slightly bigger */
    margin: 0 !important;
    text-align: center !important;
}
/* --- RESPONSIVE FONT SCALING FOR ALL SCREENS --- */

/* Base (default for laptops and mid-size screens) */
#geezMisbak {
    font-size: 3.2vh;
}
#amharicVerse {
    font-size: 2.8vh;
}
#mainVerse {
    font-size: 2.6vh;
}
#mainVerseNo {
    font-size: 1.8vh;
}

/* Large monitors (≥ 1600px width) */
@media (min-width: 1600px) {
    #geezMisbak {
        font-size: 3.8vh;
    }
    #amharicVerse {
        font-size: 3.4vh;
    }
    #mainVerse {
        font-size: 3.2vh;
    }
    #mainVerseNo {
        font-size: 2.0vh;
    }
}

/* Medium screens (tablets, Surface Pro, 1000–1599px width) */
@media (min-width: 1000px) and (max-width: 1599px) {
    #geezMisbak {
        font-size: 3.4vh;
    }
    #amharicVerse {
        font-size: 3.0vh;
    }
    #mainVerse {
        font-size: 2.8vh;
    }
}

/* Small screens (≤ 999px width) */
@media (max-width: 999px) {
    #geezMisbak {
        font-size: 2.6vh;
    }
    #amharicVerse {
        font-size: 2.3vh;
    }
    #mainVerse {
        font-size: 2.1vh;
    }
}
/* --- KEEP SELECTED LANGUAGE + REFERENCE TOGETHER --- */

#mainVerse {
    width: 100%;
    text-align: center;
    margin: 0 0 1.2vh 0;
    display: block;
}

#mainVerseNo {
    width: 100%;
    text-align: right;
    margin: 0;
    padding-right: 2vw;   /* slight inward pull so it sits under the text */
    display: block;
}
/* --- KEEP SELECTED LANGUAGE + REFERENCE TOGETHER --- */

.selected-block {
    width: 100vw;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center; /* center the main verse */
    margin: 0;
    padding: 0;
}

/* Selected language text */
#mainVerse {
    width: 90vw;
    text-align: center;
    margin: 0 0 1.2vh 0;
}

/* Psalm reference directly under it */
#mainVerseNo {
    width: 90vw;
    text-align: center;
    margin: 0;
    padding-right: 1vw; /* slight inward pull */
}
/* --- MATCH SELECTED LANGUAGE REF TO GEEZ REF SIZE --- */

#mainVerseNo {
    font-size: 1.8vh !important;   /* same as Geez ref */
    line-height: 1.2 !important;
    margin: 0 !important;
    width: 100%;
    text-align: center !important;
    padding-right: 2vw;            /* keeps it under the selected language */
}
/* --- FINAL ALIGNMENT + SIZE FIX FOR PSALM REFERENCE --- */

#mainVerseNo {
    font-size: 26px !important;   /* same as Geez ref */
    color: #d0d0d0 !important;    /* same grey tone */
    line-height: 1.2 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    width: 100% !important;
    padding-right: 2vw !important; /* slight inward pull under selected language */
    display: block !important;
}
/* --- BALANCED FONT SIZE FIX --- */

/* Geez reference stays same */
#geezVerseNo {
    font-size: 26px !important;
    color: #d0d0d0 !important;
}

/* Selected language reference matches Amharic/French size */
#mainVerseNo {
    font-size: 20px !important;   /* smaller than Geez, same as Amharic/French */
    color: #d0d0d0 !important;
    line-height: 1.2 !important;
    margin-top: 10px !important;
    text-align: center !important;
    width: 100%;
    padding-right: 2vw;
}
/* ============================
   FULLY RESPONSIVE DISPLAY PAGE
   using clamp() for smooth scaling
============================ */

/* Geez main text */
#geezMisbak {
    font-size: clamp(2.4vh, 2.2vw, 4.2vh);
    line-height: 1.28;
    margin-bottom: 1.4vh;
    text-align: center;
}

/* Geez reference */
#geezVerseNo {
    font-size: clamp(1.6vh, 1.4vw, 2.4vh);
    color: #d0d0d0;
    text-align: center;
    margin-bottom: 2vh;
}

/* Amharic */
#amharicVerse {
    font-size: clamp(2.0vh, 1.9vw, 3.2vh);
    line-height: 1.28;
    margin-bottom: 1.4vh;
    text-align: center;
}

/* Selected language */
#mainVerse {
    font-size: clamp(1.8vh, 1.7vw, 3.0vh);
    line-height: 1.28;
    margin-bottom: 1.2vh;
    text-align: center;
}

/* Selected language reference */
#mainVerseNo {
    font-size: clamp(1.4vh, 1.3vw, 2.2vh);
    color: #d0d0d0;
    text-align: center;
    padding-right: 2vw;
    margin-top: 0.5vh;
}

/* 🔹 Geez — 1.3× larger than others */
#geezMisbak {
    font-size: clamp(3.8vh, 4.0vw, 6.8vh) !important; /* increased */
    line-height: 1.28 !important;
    margin: 0 0 2.0vh 0 !important; /* space before Geez ref */
    width: 100% !important;
    text-align: center !important;
}

/* 🔹 Geez reference — space before Amharic */
#geezVerseNo {
    font-size: clamp(2.2vh, 2.0vw, 3.4vh) !important; /* increased */
    line-height: 1.2 !important;
    margin: 0 0 2.4vh 0 !important; /* ⭐ space before Amharic */
    width: 100% !important;
    text-align: right !important;
    padding-right: 2vw !important;
}

/* 🔹 Amharic — bigger + proportional + fills screen */
#amharicVerse {
    font-size: clamp(3.4vh, 3.6vw, 5.8vh) !important; /* increased */
    line-height: 1.32 !important;
    margin: 0 0 2.4vh 0 !important; /* ⭐ space before selected language */
    width: 100% !important;
    text-align: center !important;
}

/* 🔹 Selected language — bigger + proportional */
#mainVerse {
    font-size: clamp(3.0vh, 3.4vw, 5.2vh) !important; /* increased */
    line-height: 1.32 !important;
    margin: 0 0 2.0vh 0 !important;
    width: 100% !important;
    text-align: center !important;
}

/* 🔹 Selected language reference — proportional */
#mainVerseNo {
    font-size: clamp(2.0vh, 1.8vw, 3.2vh) !important; /* increased */
    line-height: 1.2 !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: right !important;
    padding-right: 2vw !important;
}
/* Add space between language selector and Option 2 header */
.right-column {
    padding-top: 20px;   /* adjust to 25px or 30px if you want more */
}

/* Make Option 2 look exactly like Option 1 */
.option2-header {
    background: #fff8f0;          /* same beige background */
    border: 1px solid #c8b8a6;    /* same border style */
    border-radius: 8px;           /* same rounded corners */
    padding: 10px 12px;           /* same padding */
    width: 100%;                  /* full span left-to-right */
    display: flex;                /* same layout as Option 1 */
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;       /* ensures perfect alignment */
}