/*
Primary stylesheet for the Maple theme
*/

/* default includes phone screen (mobile first design)*/
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-content-1), sans-serif;
}

body {
    display: flex;
    flex-direction: column;
}

body.maple-hide-title .entry-title {
    display: none;
}

body.maple-hide-title .page-header {
    padding-top: 0;
}

body.maple-hide-title .hero {
    margin-top: -20px;
}

h1 {
    text-align: center;
    text-justify: auto;
}

h2 {
    text-align: center;
    text-justify: auto;
}

main {
    flex: 1;
}
/* 1) Parent flex container, wrap on narrow screens */
.homepage {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px; /* spacing between columns */
    margin: 20px;
    padding-right: 20px; /* add right-side padding to mirror left spacing on wide screens */

}

/* 2) Left column: homepage-content takes ~75% */
.homepage-content-left {
    flex: 0 0 60%;
    box-sizing: border-box;

    /* border + shadow */
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    /* inner padding */
    padding: 20px;
    background: #fff;

    text-align: justify;
    text-justify: inter-word;
}

.homepage-content-right {
    flex: 0 0 40%;
    box-sizing: border-box;
    min-width: 200px; /* prevents it from getting too narrow */

    /* border + shadow */
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    /* inner padding */
    padding: 20px;
    background: #fff;
}

/* you already have .homepage-content-inner, but you can adjust padding here if needed */
.homepage-content-inner {
    /* border + shadow */
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    padding: 20px;
}

.homepage-content-fullwidth {
    box-sizing: border-box;
    margin: 0 auto;

    /* border + shadow */
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    /* inner padding */
    padding: 20px;
    background: #fff;

    text-align: justify;
    text-justify: inter-word;
}

/* Container for the articles using CSS Grid */
.maple-article-container {
    display: grid;
    gap: 20px;
    padding: 10px 0;
}

/* Each article card styling */
.maple-article {
    background: white;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 6px;
}

.maple-article-title {
    font-size: 2em;
    margin-bottom: 10px;
    color: var(--foreground);
}

.maple-article.no-separator {
    border-top: none;
}

/* Ensure footer sticks to the bottom when content is short */
footer {
    margin-top: auto;
}

a {
    text-decoration: none;
}

.maple-footer-container {
    margin: 0 auto;
    background-color: var(--primary);
    color: var(--secondary);
    padding: 5px 0;
    text-align: center;
    font-size: 0.8em;
}

.maple-footer-container a {
    color: var(--secondary);
    display: inline-flex;          /* make the link a flex container */
    align-items: center;           /* vertically center text + image */
    gap: 0.4em;                    /* optional: space between text and logo */
    text-decoration: none;         /* optional: remove underline */
}

.maple-footer-logo {
    width: 50px;
    height: auto;
    display: block;                /* ensures no extra baseline spacing */
}

.maple-top-menu-container {
    background-color: var(--background);
    color: var(--primary);
    width: 100%;
}

.maple-menu-transparent {
    background-color: transparent;
}

.maple-hero-logo-container {
    display: flex;
    justify-content: center;
    align-items: center; /* optional: also centers vertically */
    margin: 0;
}

.maple-menu {
    /*background-color: var(--color-background-2);*/
    background-color: none;
    color: var(--foreground);
    width: 100%;
    border-bottom: 1px solid var(--border);
}

.maple-menu-container {
    background: var(--primary);
}

.maple-menu-bg {
    background-color: var(--primary);
}

/* Ensure logo in main menu doesn’t overflow and cause overlap */
.maple-menu .custom-logo-link img {
    display: inline-block;
    margin: 10px;
    padding: 0;
    max-height: 180px;
    height: auto;
    width: auto;
}

.maple-top-menu-links-container {
    max-width: 480px;
    margin: 0;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
}

.maple-top-menu-links-left {
    display: flex;
    align-items: center;
    gap: 15px; /* Adjust spacing between links as desired */
}

.maple-menu-links-left .custom-logo-link:hover {
    opacity: 0.8;
}

.maple-top-menu-links-right {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    /* Make links flow starting from the left (leftmost first) */
    justify-self: start;
    justify-content: flex-start; /* ensure items begin at the left within the right section */
    flex-direction: row; /* explicit default to avoid inherited reversals */
}

.maple-top-menu-links-left-item {
    display: inline-block;
    font-size: 1em;
    margin: 0 10px;
    text-decoration: none;
}

.maple-top-menu-links-left-item a {
    text-decoration: none;
    color: var(--primary);
}

/* Overall menu container */
.maple-menu-links {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Left, center (logo), right */
    align-items: center; /* Vertically center all items */
    width: 100%;
    padding: 0;
    margin: 0 auto;
    position: relative;
}

.menu-links-nohero {
    margin-bottom: -20px;
}

.menu-links-hero {
    margin-bottom: 10px;
}

/* Apply this class to the Image block */
.responsive-image {
    display: flex;              /* Make the block itself a flex item */
    justify-content: center;    /* Center the image horizontally */
    align-items: center;        /* Center vertically if needed */
    width: 100%;                /* Allow it to fill the parent width */
}

/* Target the <img> inside the Image block */
.responsive-image img {
    max-width: 100%;            /* Prevent overflow */
    height: auto;               /* Maintain aspect ratio */
    object-fit: contain;        /* Keep the whole image visible */
    display: block;             /* Remove inline-gap issues */
}

.transform-menu {
    transform: translateY(-25px);
}

.transform-menu.transform-menu-links {
    transform: translateY(-43px);
}

/* Left section: right-aligned menu items flowing outward */
.maple-menu-links-left {
    display: flex;
    justify-content: flex-end; /* Align items to the right */
    flex-direction: row-reverse; /* First item closest to center */
    gap: 15px;
    grid-column: 1;
    justify-self: end;
}

/* Center section: logo */
.maple-menu-links-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 2;
    justify-self: center;
    gap: 15px;
}

/* Right section: left-aligned menu items flowing outward */
.maple-menu-links-right {
    display: flex;
    justify-content: flex-start; /* Align items to the left */
    flex-direction: row; /* First item closest to center */
    gap: 5px;
    grid-column: 3;
    justify-self: start;
}

.transform-menu-links {
    transform: translateY(-18px);
}

/* Menu link styling */
.maple-menu-links-item a {
    display: inline-block;
    font-size: 1.2em;
    margin: 8px 0px;
    padding: 4px 8px;
    color: var(--foreground);
    border: 1px solid var(--border);
    background-color: var( --background);
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.maple-menu-links-item a:hover {
    background-color: var(--foreground);
    color: var(--background);
}

/* Optional: logo hover effect */
.maple-menu-links-middle .custom-logo-link:hover {
    opacity: 0.8;
}


/* Remove any existing button rounding from Bootstrap */
.maple-top-menu-links-container .btn-group .btn {
    font-size: 1.1em;
    border-radius: 0;
    border-width: 1px;
    border-color: var(--accent);
    background-color: var(--secondary);
    color: var(--primary);
    width: auto;
    padding: 3px 10px;
    margin-left: 0;
    margin-right: 0;
}
.maple-top-menu-links-container .btn-group .btn:hover {
    background-color: var(--primary);
    color: var(--secondary);
}

.btn-primary {
    /* border-radius: 8px !important; */
    text-decoration: none !important;
}

.btn-primary:hover {
    text-decoration: none !important;
}

/* Left button: rounded on the left */
.maple-top-menu-links-container .btn-group .btn.btn-left {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: 0;
}

/* Middle button: no rounding */
.maple-top-menu-links-container .btn-group .btn.btn-middle {
    border-radius: 0;
}

/* Right button: rounded on the right */
.maple-top-menu-links-container .btn-group .btn.btn-right {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-left: 0;
}

/* small tablet screen css */
@media (min-width: 480px) {
    .maple-top-menu-links-container,
    .maple-menu-links {
        max-width: 760px;
        /*font-size: 1.2rem;*/
    }
}

/* tablet screen css */
@media (min-width: 768px) {
    .maple-top-menu-links-container,
    .maple-menu-links {
        max-width: 1000px;
        /*font-size: 1.2rem;*/
    }
}

/* laptop/desktop screen css */
@media (min-width: 1024px) {
    .maple-top-menu-links-container,
    .maple-menu-links {
        max-width: 1200px;
        /*font-size: 1rem;*/
    }
}

/* large screen css */
@media (min-width: 1280px) {
    .maple-top-menu-links-container,
    .maple-menu-links {
        max-width: 1400px;
        /*font-size: 1rem;*/
    }
}

/* Sliders container: align and size to match links container */
.maple-top-menu-sliders-container {
    max-width: 480px;
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 0 20px;
}

@media (min-width: 480px) {
    .maple-top-menu-sliders-container {
        max-width: 760px;
    }
}

@media (min-width: 768px) {
    .maple-top-menu-sliders-container {
        max-width: 1000px;
    }
}

@media (min-width: 1024px) {
    .maple-top-menu-sliders-container {
        max-width: 1200px;
    }
}

@media (min-width: 1280px) {
    .maple-top-menu-sliders-container {
        max-width: 1400px;
    }
}

/* Moved from inline <style id="maple-banner-css"> in Header.php */
.maple-banner {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    max-height: 400px;
}

/* Responsive banner heights
@media (min-width: 1400px) {
    .maple-banner { min-height: 700px; }
}
@media (min-width: 1200px) {
    .maple-banner { min-height: 600px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .maple-banner { min-height: 420px; }
}

@media (max-width: 767px) {
    .maple-banner { min-height: 260px; }
}

/* =========================
   Mobile drawer navigation
   ========================= */
.maple-mobile-hamburger {
    position: absolute;
    display: none; /* shown on small screens */
    top: 12px;
    right: 12px;
    width: 42px;
    height: 36px;
    border: 1px solid var(--border);
    background: none;
    color: var(--button-text);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 10001;
}
.maple-mobile-hamburger .maple-hamburger-bar {
    display: block;
    width: 22px;
    height: 1px;
    background: currentColor;
    margin: 2px 0;
}
.maple-mobile-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 30px;
    background: transparent;
    border: 0;
    color: var(--button-text);
}
.maple-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10000;
}

.maple-mobile-overlay {
    display: none;
}

.maple-mobile-overlay.is-visible {
    display: block;
}

.maple-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 85%;
    max-width: 380px;
    background: var(--secondary);
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
    z-index: 10002;
    overflow-y: auto;
    box-sizing: border-box;
}

.maple-mobile-drawer.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.maple-mobile-drawer-inner { padding-top: 56px; padding-right: 12px; padding-bottom: 24px; padding-left: 12px; }

/* Ensure menus render stacked in the drawer */
.maple-mobile-drawer .maple-top-menu-container,
.maple-mobile-drawer .maple-menu,
.maple-mobile-drawer .maple-top-menu-sliders-container {
    display: block;
    max-width: none;
    border: 0;
}
.maple-mobile-drawer .maple-top-menu-links-container,
.maple-mobile-drawer .maple-menu-links {
    max-width: none;
    margin: 0;
}
.maple-mobile-section { margin-bottom: 10px; }
.maple-mobile-banner-image img { max-width: 100%; height: auto; display: block; margin: 10px auto 0; }

/* Prevent background scroll when drawer open */
body.maple-mobile-drawer-open { overflow: hidden; }

.desktop-hide {
    display: none;
}

.menu-desktop-hide {
    display: none;
}

/* Small-screen behavior: show hamburger, hide desktop menus */
@media (max-width: 1199px) {
    html {
        /*overflow-x: hidden;*/
    }
    /* Provide space so the fixed hamburger sits above content (e.g., logo/banner) */
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Fixed top bar background to match menu color */
    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--secondary);
        z-index: 9999; /* below hamburger (10001) and overlay (10000) */
        pointer-events: none;
    }

    .homepage {
        display: block;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding-right: 0;
        border: none;
    }

    .homepage-content-left,
    .homepage-content-right {
        flex: 1 100%;
        padding: 5px;
    }

    .maple-menu-container {
        z-index: 10000;
        background: var(--secondary);
    }

    .maple-mobile-hamburger {
        display: inline-flex;
    }

    .maple-menu-bg {
        background: none;
    }

    /* Hide desktop-mounted menus (they are duplicated inside the drawer) */
    .maple-top-menu-container,
    .maple-menu,
    .maple-top-menu-sliders-container { display: none; }

    /* Mobile drawer: add bottom padding to hero logo image for visual balance */
    .maple-hero-logo-container img {
        margin-bottom: 12px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .maple-hero-logo-container {
        background-color: var(--secondary);
    }

    .mobile-hide {
        display: none !important;
    }

    .desktop-hide {
        display: flex;
    }

    .menu-desktop-hide {
        display: block;
    }
}


/* Mobile drawer: plain text, right-justified stacked links */
.maple-mobile-drawer .maple-top-menu-sliders-container { display:none !important; }
.maple-mobile-drawer .maple-top-menu-links-container,
.maple-mobile-drawer .maple-menu-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 0;
    padding: 0 8px;
}
.maple-mobile-drawer .maple-top-menu-links-left,
.maple-mobile-drawer .maple-top-menu-links-right,
.maple-mobile-drawer .maple-menu-links-left,
.maple-mobile-drawer .maple-menu-links-middle,
.maple-mobile-drawer .maple-menu-links-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.maple-mobile-drawer .maple-top-menu-links-left-item,
.maple-mobile-drawer .maple-top-menu-links-right-item,
.maple-mobile-drawer .maple-menu-links-item {
    display: block;
    width: 100%;
    margin: 0;
}
.maple-mobile-drawer .maple-top-menu-links-left-item a,
.maple-mobile-drawer .maple-top-menu-links-right-item a,
.maple-mobile-drawer .maple-menu-links-item a {
    display: inline;
    padding: 8px 0;
    margin: 6px 0;
    background: transparent;
    border: 0;
    color: var(--primary);
    text-decoration: none;
}
.maple-mobile-drawer .maple-top-menu-links-left-item a:hover,
.maple-mobile-drawer .maple-top-menu-links-right-item a:hover,
.maple-mobile-drawer .maple-menu-links-item a:hover {
    text-decoration: underline;
    background: transparent;
}
/* Remove transforms/shifts inside drawer */
.maple-mobile-drawer .maple-menu-links,
.maple-mobile-drawer .transform-menu,
.maple-mobile-drawer .transform-menu-links { transform: none; }
/* Hide buttons, search and in-menu logos in drawer */
.maple-mobile-drawer .btn-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.maple-mobile-drawer .btn-group .btn {
    background: transparent;
    border: 0;
    color: var(--primary);
    padding: 0;
    margin: 6px 0;
    width: auto;
    text-align: right;
}
.maple-mobile-drawer .btn-group .btn:hover {
    text-decoration: underline;
    background: transparent;
    color: var(--primary);
}
.maple-mobile-drawer .maple-search-form-container {
    width: 100%;
    margin-top: 6px;
}
.maple-mobile-drawer .custom-logo-link { display: none !important; }