/* --- Page Accent Color --- */

/* Per-page accent color underlines the page H1. The CSS variable is set via
   inline style on .opers-page (see opers_enqueue_page_accent_inline_style in
   functions.php). Pages without a color fall back to transparent (no line). */
.opers-page .opers-page__title {
    border-bottom: 4px solid var(--opers-page-accent, transparent);
    padding-bottom: 0.5rem;
}


/* --- Sidebar Layout --- */


/* Main content appears first in the DOM (so the page <h1> precedes the
   sidebar <h2>); visually flip the columns on desktop so the sidebar
   still renders on the left. Mobile keeps DOM order (content first). */
@media (min-width: 782px) {
    .opers-sidebar-columns {
        flex-direction: row-reverse;
    }
}

/* Sidebar nav styles */
.opers-sidebar-nav-wrap {
    position: sticky;
    top: 220px;
    width: 100%;
}

/* When a parent block has sticky positioning via the editor,
   offset it below the site header (120px + 10px breathing room). */
.is-position-sticky:has(.opers-sidebar-nav-wrap) {
    top: 130px !important;
}

/* Sidebar heading */
.opers-sidebar-nav__heading {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wp--preset--color--blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #89a1c4;
    padding: 16px 0 17px;
    margin: 0 0 12px;
}

.opers-sidebar-nav-wrap .wp-block-navigation {
    flex-direction: column;
    gap: 0;
}

.opers-sidebar-nav-wrap .wp-block-navigation__container {
    flex-direction: column;
    gap: 0;
}

/* Nav list items */
.opers-sidebar-nav-wrap .wp-block-navigation-item {
    margin: 0 0 8px;
    padding: 0;
    width: 100%;
}

.opers-sidebar-nav-wrap .wp-block-navigation__container > .wp-block-navigation-item:last-child {
    margin-bottom: 0;
}

/* Per-page accent color: left border on the matching sidebar nav item. The
   CSS variable is set inline on the <li> by opers_nav_apply_page_accent.
   No left padding on the <li> so the link's highlight background sits flush
   against the colored border; the text indent lives on the <a>. */
.opers-sidebar-nav-wrap .wp-block-navigation-item.opers-nav-item--has-accent {
    border-left: 4px solid var(--opers-item-accent, transparent);
}

.opers-sidebar-nav-wrap .wp-block-navigation-item.opers-nav-item--has-accent
    > a.wp-block-navigation-item__content {
    padding-left: 12px;
}

/* display:block + width:100% makes the link fill the <li>, so the
   current-menu-item highlight background spans edge-to-edge. */
.opers-sidebar-nav-wrap .wp-block-navigation-item a.wp-block-navigation-item__content,
.opers-sidebar-nav-wrap .wp-block-navigation-item a.wp-block-navigation-item__content:visited {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    color: #2a4b7b;
    text-decoration: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 3px 5px;
    background: none;
}

.opers-sidebar-nav-wrap .wp-block-navigation-item a.wp-block-navigation-item__content:hover,
.opers-sidebar-nav-wrap .wp-block-navigation-item a.wp-block-navigation-item__content:focus {
    text-decoration: underline;
    color: #2a4b7b;
}

/* Active/current page — highlight the link, not the list item */
.opers-sidebar-nav-wrap .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content {
    background-color: var(--wp--preset--color--pale-blue);
}

/* Sub-menu: render inline (not flyout), hidden unless parent is active/ancestor.
   Uses !important to override core navigation block flyout styles
   (.wp-block-navigation .has-child .wp-block-navigation__submenu-container). */
.opers-sidebar-nav-wrap .wp-block-navigation__submenu-container {
    display: none !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    flex-direction: column;
}

.opers-sidebar-nav-wrap .current-menu-item > .wp-block-navigation__submenu-container,
.opers-sidebar-nav-wrap .current-menu-ancestor > .wp-block-navigation__submenu-container {
    display: flex !important;
}

/* Stack parent item and its submenu vertically */
.opers-sidebar-nav-wrap .wp-block-navigation-item.has-child {
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Hide the submenu toggle arrow — submenus expand automatically for active items */
.opers-sidebar-nav-wrap .wp-block-navigation-submenu__toggle {
    display: none !important;
}

.opers-sidebar-nav-wrap .wp-block-navigation__submenu-container a.wp-block-navigation-item__content,
.opers-sidebar-nav-wrap .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:visited {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #2a4b7b;
    text-decoration: none;
    padding: 3px 5px 3px 16px !important;
}

.opers-sidebar-nav-wrap .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover,
.opers-sidebar-nav-wrap .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus {
    text-decoration: underline;
    color: #2a4b7b;
}

/* Home page banner: offset the cover background image from the top edge. */
.opers-home-banner > img.wp-block-cover__image-background {
    margin-top: 20px;
}

/* Mobile adjustments */
@media (max-width: 781px) {
    /* Center the sidebar nav parent container */
    .is-position-sticky:has(.opers-sidebar-nav-wrap) {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Footer: center all content on mobile */
    .site-footer {
        padding-right: 15px !important;
        padding-left: 15px !important;
        text-align: center;
    }

    .site-footer__nav-section {
        flex-direction: column !important;
        align-items: center !important;
    }

    .site-footer__nav-col {
        align-items: center;
    }

    .site-footer__nav-list .wp-block-navigation__container {
        align-items: center !important;
    }

    .site-footer__bottom-left .wp-block-image {
        flex: 0 0 75px !important;
        width: 75px !important;
    }

    .site-footer__bottom-left .wp-block-image img {
        width: 75px !important;
        height: auto !important;
    }

    /* Footer bottom: stack logo, copyright, and social icons */
    .site-footer__bottom {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px;
    }

    .site-footer__bottom-left {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px;
    }

    .site-footer__bottom .wp-block-social-links {
        justify-content: center !important;
    }

    /* Banner cover: reset large left padding so content fits on screen */
    .opers-banner-content .wp-block-cover {
        padding-left: var(--wp--preset--spacing--4) !important;
        padding-right: var(--wp--preset--spacing--4) !important;
        min-height: 300px !important;
    }

    /* Banner inner group: constrain width and padding */
    .opers-banner-content .wp-block-cover__inner-container .wp-block-group {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Banner cover content: 2px Light Blue border on the white-background
       group inside the cover's inner container. */
    .opers-banner-content .wp-block-cover .wp-block-cover__inner-container > .wp-block-group.has-background {
        border: 2px solid var(--wp--preset--color--light-blue);
    }

    /* Home page: hide cover/banner image but keep inner content visible. */
    .opers-home-page .wp-block-cover {
        background-image: none !important;
        min-height: 0 !important;
        padding-left: var(--wp--preset--spacing--4) !important;
        padding-right: var(--wp--preset--spacing--4) !important;
    }

    .opers-home-page .wp-block-cover > .wp-block-cover__background,
    .opers-home-page .wp-block-cover > img.wp-block-cover__image-background,
    .opers-home-page .wp-block-cover > video.wp-block-cover__video-background {
        display: none !important;
    }

    .opers-home-page .wp-block-cover .wp-block-cover__inner-container {
        padding-top: var(--wp--preset--spacing--5) !important;
    }
}