/*
================================================
 Arboritecture custom overrides
 Template: Cassiopeia Extended
 Active style: Cassiopeia Extended - Arbor
================================================
*/


/* ======================================================================
   1. GLOBAL STYLES & VARIABLES
====================================================================== */

:root {
    --body-color: #f4f7f2 !important;
    --template-bg-light: #f4f7f2 !important;
    --template-bg-dark: #2c3e2f !important;
    --cassiopeia-font-family-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

body {
    background-color: #f4f7f2 !important;
    color: #2c3e2f !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.site-grid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    background: white !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
    padding: 2rem !important;
}

main,
.container-component,
.com-content-article,
.item-page {
    background: transparent !important;
    padding: 0 !important;
}


/* ======================================================================
   2. TYPOGRAPHY
====================================================================== */

h1, .page-header, .item-title, .contentheading {
    font-size: 2.2rem !important;
    /*border-left: 6px solid #4a7c59 !important;*/
    padding-left: 1rem !important;
    margin-bottom: 1.5rem !important;
    color: #2c5e2f !important;
    font-weight: 600 !important;
}

h2 {
    font-size: 1.8rem !important;
    color: #3a6b3f !important;
    border-bottom: 2px solid #d0e2bc !important;
    padding-bottom: 0.5rem !important;
    margin-top: 1.5rem !important;
}

h3 {
    font-size: 1.4rem !important;
    color: #4a7c59 !important;
}


/* ======================================================================
   3. LINKS & BUTTONS
====================================================================== */

a:not(.alphabet-nav a):not(.ref-link):not(.floating-back) {
    color: #4a7c59 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

a:not(.alphabet-nav a):not(.ref-link):not(.floating-back):hover {
    color: #2c5e2f !important;
    text-decoration: underline !important;
}

.btn, button {
    background: #e9f0e4 !important;
    border: none !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: 50px !important;
    color: #2c5e2f !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn:hover, button:hover {
    background: #4a7c59 !important;
    color: white !important;
    transform: scale(1.02) !important;
}


/* ======================================================================
   4. NAVIGATION & TOPBAR (SQUARE CORNERS - BUT KEEP MENU ROUND)
====================================================================== */

/* Topbar - square corners & full width */
.container-topbar {
    background: #d9e8cf !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.3rem 0 !important;
    margin-bottom: 0.5rem !important;
}

.container-topbar img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
}

.container-topbar .mod-banners,
.container-topbar .bannergroup,
.container-topbar .mod-banners__item,
.container-topbar [class*="banner"] {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* Navigation container - square corners */
.container-nav {
    background: #e9f0e4 !important;
    border-radius: 0 !important;
    padding: 0.3rem 1rem !important;
    margin-top: 0.5rem !important;
}

/* Menu buttons - KEEP ROUND CORNERS */
.container-nav a,
.container-nav ul.mod-menu > li > a {
    border-radius: 30px !important;
    padding: 0.5rem 1rem !important;
}

.container-nav a:hover {
    background: #4a7c59 !important;
    color: white !important;
}

/* Dropdown menus */
.dropdown-menu {
    border-radius: 8px !important;
}


/* ======================================================================
   5. TABLES
====================================================================== */

table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: white !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

th {
    background: #d9e8cf !important;
    color: #1e3a24 !important;
    padding: 0.8rem !important;
    font-weight: 600 !important;
}

td {
    padding: 0.8rem !important;
    border-bottom: 1px solid #dce8d4 !important;
}


/* ======================================================================
   6. FORMS
====================================================================== */

input, textarea, select {
    border: 2px solid #cbdcc0 !important;
    border-radius: 50px !important;
    padding: 0.6rem 1rem !important;
    font-size: 1rem !important;
    background: white !important;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: #4a7c59 !important;
    box-shadow: 0 0 0 3px rgba(74,124,89,0.2) !important;
}


/* ======================================================================
   7. FOOTER
====================================================================== */

footer, [class*="footer"] {
    background: #e9f0e4 !important;
    color: #3e5a3c !important;
    border-radius: 20px !important;
    padding: 1.5rem !important;
    text-align: center !important;
    margin-top: 2rem !important;
}


/* ======================================================================
   8. DESKTOP MENU (TEXT-LIKE WRAP)
====================================================================== */

@media (min-width: 769px) {
    .container-header ul.mod-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.05rem 0.2rem;
        margin: 0;
        padding: 0;
    }

    .container-header ul.mod-menu > li {
        margin: 0;
        padding: 0;
        display: inline;
    }

    .container-header ul.mod-menu > li > a {
        display: inline;
        padding: 0;
        margin: 0;
        line-height: 1;
    }
}


/* ======================================================================
   9. YOUTUBE GALLERY (DMA PAGE)
====================================================================== */

.yt-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

.yt-item {
    text-align: center;
    padding: 0.3rem;
}

.yt-item iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 6px;
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.yt-caption {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    line-height: 1.3;
}

.yt-item:hover iframe {
    transform: scale(1.01);
    transition: 0.2s ease;
}

@media (max-width: 992px) {
    .yt-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .yt-gallery {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}


/* ======================================================================
   10. GLOSSARY PAGE - COMPLETELY IGNORE user.css
====================================================================== */

/* Add this class to your glossary page body: class="glossary-page" */
body.glossary-page .site-grid,
body.glossary-page .container-component,
body.glossary-page .com-content-article,
body.glossary-page .item-page {
    all: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body.glossary-page {
    padding: 2rem 1rem !important;
}

body.glossary-page .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    background: white !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
    padding: 2rem !important;
}


/* ======================================================================
   11. MOBILE FIXES
====================================================================== */

@media (max-width: 768px) {
    .site-grid {
        padding: 1rem !important;
    }
    
    h1, .page-header, .item-title {
        font-size: 1.6rem !important;
    }

    .container-header,
    .container-header .navbar {
        line-height: 1 !important;
    }

    .container-header .navbar {
        min-height: unset !important;
    }

    .container-header .navbar-brand {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .container-header .navbar-toggler {
        transform: translateY(0);
    }
}

/* ======================================================================
   12. REMOVE BORDERS AROUND TOP BANNER & BETWEEN BANNER AND NAVIGATION
====================================================================== */

/* Remove any border from the top banner itself */
.container-topbar,
.container-topbar .mod-banners,
.container-topbar .bannergroup,
.container-topbar .mod-banners__item,
.container-topbar [class*="banner"],
.container-topbar img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove border between top banner and navigation */
.container-topbar + .container-nav,
.container-topbar + * .container-nav,
.container-nav {
    border-top: none !important;
    border-top-width: 0 !important;
    border-top-style: none !important;
}

/* Also check for any margin that might create a visible gap line */
.container-topbar {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

.container-nav {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Remove any horizontal rule or separator that might be auto-generated */
hr,
.separator,
.divider {
    display: none !important;
}

/* ======================================================================
   13. FINAL FIX - REMOVE STUBBORN BANNER BORDERS (TOP & BOTTOM)
====================================================================== */

/* Target the actual banner module container on your site */
.mod-banners,
.bannergroup,
.banneritem,
.banneritem__image {
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Specifically remove borders from the image itself */
.container-topbar img,
.mod-banners img,
.banneritem img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    vertical-align: bottom !important; /* Removes tiny gap below image that can look like a line */
    display: block !important;
}

/* Remove ANY margin/padding that could create a visible line gap */
.container-topbar {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Critical: Remove borders from the grid cell containing the banner */
.site-grid > [class*="topbar"],
.site-grid > .grid-child,
.banner-wrapper {
    border-top: none !important;
    border-bottom: none !important;
}

/* Kill any HR tags near the banner */
.container-topbar + hr,
hr + .container-topbar,
.container-topbar hr {
    display: none !important;
}

/* ======================================================================
   14. COMPLETE FIX - COMPACT MENU CONTAINER (DESKTOP + MOBILE)
====================================================================== */

/* Force the nav container to shrink-wrap its content */
.container-nav,
.container-nav .navbar,
.container-nav .navbar-inner {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove flex stretching that creates empty space */
.container-nav .navbar {
    display: block !important;
    align-items: normal !important;
}

/* Desktop menu - compact and wrap-friendly */
@media (min-width: 769px) {
    .container-nav {
        padding: 0.2rem 1rem !important;
    }
    
    .container-header ul.mod-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem 0.5rem !important;
        margin: 0 !important;
        padding: 0.2rem 0 !important;
    }
    
    .container-header ul.mod-menu > li {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .container-header ul.mod-menu > li > a {
        display: inline-block !important;
        padding: 0.3rem 0.8rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
    }
}

/* Mobile menu - centered hamburger, no extra space above/below */
@media (max-width: 768px) {
    .container-nav {
        padding: 0 !important;
    }
    
    .container-nav .navbar {
        position: relative !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0 1rem !important;
    }
    
    /* Remove any header/brand area above the toggler */
    .container-nav .navbar-header {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }
    
    .container-nav .navbar-toggler {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0.3rem 0.6rem !important;
    }
}

/* Remove ALL empty space from any parent containers */
.container-header,
.site-grid > .grid-child,
body.glossary-page .site-grid {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* If there's an empty logo or brand area, kill it */
.navbar-brand,
.logo,
[class*="logo"] {
    display: none !important;
}

/* ======================================================================
   15. CENTER MENU AS A GROUP - DEBUG VERSION
====================================================================== */

@media (min-width: 769px) {
    .container-nav {
        display: flex !important;
        justify-content: center !important;
    }
    
    .container-header ul.mod-menu {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        margin: 0 auto !important;
    }
}

/* ======================================================================
   16. COMPACT MOBILE DROPDOWN MENU ITEMS
====================================================================== */

@media (max-width: 768px) {
    /* Reduce spacing between menu items */
    .container-nav ul.mod-menu,
    .container-nav .navbar-nav,
    .container-nav .nav-menu {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .container-nav ul.mod-menu > li,
    .container-nav .navbar-nav > li,
    .container-nav .nav-menu > li {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .container-nav ul.mod-menu > li > a,
    .container-nav .navbar-nav > li > a,
    .container-nav .nav-menu > li > a {
        padding: 0.4rem 1rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }
    
    /* Remove any extra spacing from dropdown containers */
    .container-nav .dropdown-menu,
    .container-nav .nav-child {
        padding: 0.25rem 0 !important;
        margin: 0 !important;
    }
    
    .container-nav .dropdown-menu > li,
    .container-nav .nav-child > li {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .container-nav .dropdown-menu > li > a,
    .container-nav .nav-child > li > a {
        padding: 0.3rem 1rem !important;
        line-height: 1.3 !important;
    }
}

/* ======================================================================
   17. PREVENT HAMBURGER FROM MOVING WHEN MENU OPENS
====================================================================== */

@media (max-width: 768px) {
    /* Make the navbar position context fixed */
    .container-nav .navbar {
        position: relative !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* Keep the hamburger button fixed in place */
    .container-nav .navbar-toggler {
        position: relative !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    
    /* Prevent the navbar header from shifting */
    .container-nav .navbar-header {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }
    
    /* Keep the collapse container from affecting button position */
    .container-nav .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #e9f0e4 !important;
        z-index: 1000 !important;
    }
}

/* ======================================================================
   18. MAKE DROPDOWN MENU FULL WIDTH ON MOBILE
====================================================================== */

@media (max-width: 768px) {
    /* Make the collapse container full width */
    .container-nav .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        background: #e9f0e4 !important;
        z-index: 1000 !important;
    }
    
    /* Ensure the menu list takes full width */
    .container-nav .navbar-nav,
    .container-nav ul.mod-menu {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Make each menu item full width */
    .container-nav .navbar-nav > li,
    .container-nav ul.mod-menu > li {
        width: 100% !important;
        display: block !important;
    }
    
    /* Style the menu links to fill the width */
    .container-nav .navbar-nav > li > a,
    .container-nav ul.mod-menu > li > a {
        display: block !important;
        width: 100% !important;
        padding: 0.6rem 1rem !important;
    }
}

/* ======================================================================
   19. MODIFIED - SQUARE TOP CORNERS, ROUNDED BOTTOM CORNERS
====================================================================== */

.site-grid {
    border-radius: 0 0 24px 24px !important;  /* Square on top, rounded on bottom */
}

/* For the Glossary page - also square on top, rounded on bottom */
body.glossary-page .container {
    border-radius: 0 0 24px 24px !important;
}

/* ======================================================================
  20. FORCE COVERFLOW TO BE FULL WIDTH - NO MARGINS ANYWHERE
====================================================================== */
.books-carousel {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.books-carousel {
    margin-top: -50px !important;
}

/* Center books vertically in the black strip and reduce bottom padding */
.books-carousel {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
}

/* Adjust swiper vertical alignment */
.swiper {
    margin: auto 0 !important;
}

/* Reduce bottom space below carousel */
.books-carousel .swiper-pagination {
    bottom: 5px !important;
}

/* ======================================================================
  21. REMOVE THE WHITE BOX COMPLETELY ON BOOKS PAGE itemid-129
====================================================================== */

body.itemid-129 .site-grid {
    background: #1a1a1a !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
}


/*****/




/* ======================================================================
  22. MAKE THE COVERFLOW TRULY FULL WIDTH
====================================================================== */

/*========================== */
/*ORIGINAL*/
/*
body.itemid-129 .books-carousel {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: -50px !important;
}
*/
/*Replacement css on HTML 2026.05.24 19:00*/
/*
.books-carousel {
    margin-left: -15px !important;
    margin-right: -15px !important;
    width: calc(100% + 30px) !important;
}
*/
/*========================== */





/* Mobile fix for dark background */
@media (max-width: 768px) {
    body.itemid-129 .site-grid {
        background: #1a1a1a !important;
    }
}

/* ======================================================================
  23. HIDE ARTICLE PAGINATION ON BOOKS PAGE
====================================================================== */

/*
body.itemid-129 .pagination {
    display: none !important;
}
*/

/* ======================================================================
  24. HIDE ARTICLE PAGINATION ON EVERYWHERE
====================================================================== */


body .pagination {
    display: none !important;
}



/* ======================================================================
  TEST //// FIND THE CORRECT ITEM ID FOR PAGE ////
====================================================================== */


/*
body::before {
    content: attr(class) !important;
    display: block !important;
    background: red !important;
    color: white !important;
    padding: 10px !important;
    font-size: 16px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
}
*/

/* BOOKS PAGE */
/*
site com_content wrapper-fluid view-article no-layout no-task itemid-129
*/