/*
 * .custom-nav — Top-level sticky navigation bar.
 * Flexbox spreads the logo group, nav links, and action buttons across the full width.
 * White background with a subtle box-shadow visually separates it from page content.
 * position: sticky + top: 0 + z-index: 1000 keeps the bar locked to the top of the
 * viewport and layered above all regular content while the user scrolls.
 */
.custom-nav {
    display: flex;
    align-items: center;
    padding: 15px 40px;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    will-change: transform;
}

.nav-logo {
    order: -1;
    margin-right: 25px;
    flex-shrink: 0;
}

/*
 * .nav-left-group — Container for the logo and desktop navigation links.
 * Flexbox with a 25px gap keeps the logo and the link list evenly spaced
 * and vertically centred without needing manual margins.
 */
.nav-left-group {
    display: flex;
    align-items: center;
    gap: 25px;
}

/*
 * .nav-logo h2 — Site logo heading inside the nav bar.
 * Removes the default heading margin so the text sits flush within the flex container.
 * The BBOS brand blue (#1C48AA) and heavy font-weight make the logo stand out.
 */
.nav-logo h2 {
    margin: 0;
    color: rgb(0, 70, 190);
    font-weight: 900;
}

/*
 * .nav-menu-wrapper — Wrapper around the desktop navigation link list.
 * Flex display ensures the inner <ul> and any sibling elements stay aligned.
 */
.nav-menu-wrapper {
    display: flex;
    align-items: center;
}

/*
 * .nav-links — Horizontal list of primary navigation links.
 * Flex row direction lays the <li> items side-by-side.
 * list-style, margin, and padding resets strip the default <ul> bullet/spacing.
 */
.nav-links {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

/*
 * .nav-links li — Individual navigation list item.
 * Flex display with vertical centering ensures the pipe separator pseudo-element
 * and the anchor text sit at the same baseline.
 * white-space: nowrap prevents link labels from wrapping onto a second line.
 */
.nav-links li {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/*
 * .nav-links li:not(:last-child)::after — Pipe separator between nav items.
 * Inserts a "|" character as a decorative divider after every list item except the last.
 * Horizontal margins create breathing room on either side of the pipe.
 */
.nav-links li:not(:last-child)::after {
    content: "|";
    margin: 0 15px;
    color: #1C48AA;
    font-weight: 400;
}

/*
 * .nav-links a — Individual navigation link anchor.
 * Removes the default underline and sets the brand blue colour and a compact font size.
 * transition on color produces a smooth fade when the user hovers.
 */
.nav-links a {
    text-decoration: none;
    color: #1C48AA;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease;
}

/*
 * .nav-links a:hover — Hover state for desktop navigation links.
 * Switches the link colour to BBOS yellow on hover, providing clear interactive feedback
 * while maintaining brand consistency.
 */
.nav-links a:hover {
    color: #F8D648;
}

/*
 * .nav-right-group — Container for the right-hand CTA buttons (Store and Member).
 * Flexbox with a 15px gap keeps the two buttons evenly spaced and vertically centred.
 * The slideUpFade animation gives the button group a subtle entrance on page load.
 */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    animation: slideUpFade 0.6s ease-out forwards;
}

/*
 * .btn-store — "Visit Store" call-to-action button in the nav bar.
 * Solid BBOS yellow background with brand blue text creates strong visual contrast.
 * padding, border-radius, and white-space: nowrap give it a pill-like, compact appearance.
 * !important overrides are required to win specificity over WordPress theme defaults.
 */
.btn-store {
    background-color: #F8D648 !important;
    color: #1C48AA !important;
    text-decoration: none;
    padding: 6px 20px;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 4px;
}

/*
 * .btn-store:hover — Hover state for the Store button.
 * Keeps the yellow background unchanged on hover so the button remains visually stable;
 * the cursor change alone signals interactivity without a colour shift.
 */
.btn-store:hover {
    background-color: #F8D648 !important;
}

/*
 * .btn-member — "Member Login" outlined button in the nav bar.
 * Transparent background with a solid brand blue border distinguishes it as a secondary
 * action next to the filled Store button.
 * A larger border-radius (20px) gives it a rounded pill shape to contrast the Store button.
 */
.btn-member {
    background-color: transparent;
    color: #1C48AA !important;
    border: 2px solid #1C48AA;
    text-decoration: none;
    padding: 8px 20px;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 20px;
}

/*
 * @keyframes slideUpFade — Entrance animation used by .nav-right-group.
 * Starts the element invisible and shifted 10px downward, then fades it in and slides it
 * up to its natural position, producing a smooth upward reveal effect.
 */
@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/*
 * @media (max-width: 768px) — Mobile layout adjustments for the navigation bar.
 * Reduces horizontal padding on .custom-nav and tightens the left group gap to reclaim
 * space on small screens. Ensures the mobile menu toggle, icon row, and individual icons
 * are properly flex-aligned for touch-friendly interaction.
 */
@media (max-width: 768px) {
    .custom-nav { padding: 15px 20px; }
    .nav-logo { order: 0; margin-right: 0; }
    .nav-left-group { flex: 1; }
    .nav-right-group { flex: 1; justify-content: flex-end; margin-left: 0; }
    .mobile-menu-toggle { cursor: pointer; align-items: center; }
    .mobile-icons { gap: 20px; align-items: center; }
    .icon-mobile { display: flex; align-items: center; justify-content: center; }
    .icon-mobile svg { width: 28px; height: 28px; display: block; }
}

/* Mobile menu overlay */
/*
 * .mobile-menu-overlay — Full-screen dimmed backdrop behind the mobile menu panel.
 * Fixed positioning with inset: 0 stretches it to cover the entire viewport.
 * z-index: 9999 ensures it layers above all other content, including the sticky nav.
 * backdrop-filter blur creates a frosted-glass effect on the page content beneath.
 * Hidden by default (display: none) and made visible by the .is-open class.
 */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/*
 * .mobile-menu-overlay.is-open — Active/visible state of the mobile menu overlay.
 * Toggled by JavaScript; switching display to block reveals the full overlay and
 * the menu panel inside it.
 */
.mobile-menu-overlay.is-open {
    display: block;
}

/*
 * .mobile-menu-panel — Slide-down white panel containing the mobile navigation.
 * Absolutely positioned at the top of the overlay so it appears to drop down from
 * the top of the screen. Flex column direction stacks the header, links, and social
 * bar vertically inside the panel.
 */
.mobile-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

/*
 * .mobile-menu-header — Top row of the mobile menu panel.
 * Flexbox with space-between spreads the logo, icon group, and close button across the
 * full panel width. The bottom border visually separates the header from the link list.
 */
.mobile-menu-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #ccc;
}

/*
 * .mobile-menu-close — Close (X) button for dismissing the mobile menu panel.
 * Strips all default button chrome (background, border, padding) so it renders as a
 * plain icon button. Fixed width (36px) keeps it aligned with the header icon group.
 */
.mobile-menu-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex: 1;
}

/*
 * .mobile-menu-logo img, .mobile-menu-logo a img — Logo image inside the mobile menu header.
 * Constrains the logo to a max height of 40px while letting width scale proportionally,
 * keeping the logo legible without distorting its aspect ratio.
 */
.mobile-menu-logo img,
.mobile-menu-logo a img {
    max-width: 140px;
    height: auto;
    width: auto;
}

/*
 * .mobile-nav-links li (first declaration) — Mobile navigation list item with a bottom border.
 * Applies a 1px solid divider between each nav link row using the mid-grey #ccc.
 * Overridden further down by a second declaration using the lighter #eee; the lower
 * specificity rule wins for most contexts.
 */
.mobile-nav-links li {
    border-bottom: 1px solid #ccc;
}

/*
 * .mobile-menu-header-icons — Icon cluster (e.g. search, account) in the mobile menu header.
 * Flex row with a 16px gap spaces the icon links evenly and aligns them vertically.
 * Fixed 36px width and justify-content: flex-end mirror the close button width so the
 * header logo stays visually centred between them.
 */
.mobile-menu-header-icons {
    display: flex;
    gap: 20px;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

/*
 * .mobile-menu-header-icons a — Anchor wrapper around each icon in the mobile menu header.
 * Flex display centres the SVG or image icon vertically within the clickable anchor area.
 */
.mobile-menu-header-icons a {
    display: flex;
    align-items: center;
}

.mobile-menu-header-icons a svg { width: 28px; height: 28px; display: block; }

/*
 * .mobile-nav-links — Unordered list of navigation links inside the mobile menu panel.
 * Resets default list styling (bullets, padding, margin) so the links fill the panel
 * edge-to-edge with no extraneous whitespace.
 */
.mobile-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * .mobile-nav-links li — Individual item in the mobile navigation list.
 * A light grey bottom border (1px #eee) provides subtle separation between each link row
 * without adding visual weight.
 */
.mobile-nav-links li {
    border-bottom: 1px solid #eee;
}

/*
 * .mobile-nav-links li a — Navigation link anchor inside the mobile menu.
 * Block display makes the entire row tappable, not just the text.
 * Large font size (1.75rem) and generous padding (20px 25px) create comfortable
 * touch targets for mobile users.
 */
.mobile-nav-links li a {
    display: block;
    padding: 20px 25px;
    color: #1C48AA;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 400;
}

/*
 * .mobile-menu-social — Social media icon bar at the bottom of the mobile menu panel.
 * Brand blue background contrasts with the white panel, visually anchoring the footer
 * of the menu. Flex with space and centering distributes the social icon links evenly.
 * margin-top: auto pushes this bar to the bottom of the flex column panel.
 */
.mobile-menu-social {
    display: flex;
    gap: 60px;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #1C48AA;
    margin-top: auto;
    color: #fff;
}

/*
 * .mobile-menu-close svg line — SVG close icon stroke inside the mobile menu close button.
 * Increases the stroke width to 4px so the X icon is bold and clearly visible at small sizes.
 */
.mobile-menu-close svg line {
    stroke-width: 4px;
}

/*
 * .mobile-menu-social a — Social media link anchors in the mobile menu footer bar.
 * White colour ensures icons are legible against the brand blue background.
 * Flex display vertically centres any SVG or image icon within the anchor.
 */
.mobile-menu-social a {
    color: #fff;
    display: flex;
    align-items: center;
}

/*
 * body.mobile-menu-open .custom-nav — Nav bar stacking context when the mobile menu is open.
 * Drops the sticky nav's z-index to 1 so the mobile menu overlay (z-index: 9999)
 * fully covers it, preventing the nav from bleeding through the menu backdrop.
 */
body.mobile-menu-open {
    overflow: hidden;
}

body.mobile-menu-open .custom-nav {
    z-index: 1000;
}

/*
 * .site-footer — Outer wrapper for the page footer section.
 * White background with a top border separates the footer from the main content.
 * Generous padding (60px top, 40px bottom) gives the footer content room to breathe.
 */
.site-footer {
    background-color: #ffffff;
    padding: 60px 20px 40px;
    border-top: 1px solid #eaeaea;
}

/*
 * .footer-container — Centred inner content container for the footer.
 * max-width: 1200px with auto horizontal margins keeps content readable on wide screens
 * by preventing the footer layout from stretching too far.
 */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/*
 * .footer-top-grid — CSS Grid layout for the upper footer columns.
 * On mobile it defaults to a single-column stack (1fr) with centred text.
 * The 40px gap and bottom margin ensure columns are spaced before the footer bottom strip.
 * Overridden in the min-width: 769px media query for a multi-column desktop layout.
 */
.footer-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
    margin-bottom: 50px;
}

/*
 * .footer-logo — Brand logo text rendered inside the footer.
 * Large font size (2rem) and heavy weight (900) give it visual prominence.
 * Brand blue colour ties the footer logo to the nav bar logo for brand consistency.
 */
.footer-logo {
    color: #1C48AA;
    font-size: 2rem;
    font-weight: 900;
    margin: 0 0 20px 0;
}

/*
 * .footer-logo-link — Anchor wrapper around the footer logo.
 * Removes default link underline styling and sets display: block so the entire logo
 * area is clickable, not just the inline text.
 */
.footer-logo-link {
    text-decoration: none;
    display: block;
}

/*
 * .social-heading — "Follow Us" or similar heading above the footer social icons.
 * Large, bold brand blue text makes the section heading stand out.
 * display: block and width: 100% ensure it occupies a full row above the icon row.
 * !important overrides fight WordPress core/theme styles that may set margin or text-align.
 */
.social-heading {
    color: #1C48AA;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 !important;
    text-align: center !important;
    width: 100%;
    display: block;
}

/*
 * .social-icons — Row of social media icon links in the footer.
 * Flex with centred justification and a 25px gap distributes icons evenly.
 * Negative margin-top pulls the row closer to the heading above it.
 */
.social-icons {
    display: flex;
    gap: 25px;
    justify-content: center;
}

/*
 * .social-icons a — Individual social icon link anchor.
 * Smooth transition on the transform property enables the hover lift animation below.
 */
.social-icons a { transition: transform 0.2s ease; }

/*
 * .social-icons a:hover — Hover state for social icon links.
 * Translates the icon 3px upward on hover to create a subtle lift/bounce effect
 * that draws attention and confirms interactivity to the user.
 */
.social-icons a:hover { transform: translateY(-3px); }

/*
 * .footer-col — A single column inside the footer top grid.
 * Flex column layout stacks the heading, list, and any other children vertically.
 * Centred alignment on both axes ensures content lines up on mobile (single-column view).
 */
.footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

/*
 * .footer-col h4 — Column heading inside a footer column (e.g. "Products", "Support").
 * Brand blue colour and heavy weight make these section headings clearly readable.
 * display: block !important and width: 100% ensure the heading spans the full column
 * even when WordPress outputs it inside an inline context.
 */
.footer-col h4 {
    color: #1C48AA;
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 15px 0 !important;
    display: block !important;
    width: 100%;
}

/*
 * .footer-col ul — Unordered list of links within a footer column.
 * Strips default list styling (bullets, padding, margin) so the links render as a
 * clean vertical stack with no extraneous indentation or disc markers.
 */
.footer-col ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    width: 100%;
}

/*
 * .footer-col li — Individual list item inside a footer column link list.
 * Bottom margin adds breathing room between each link row.
 * display: block !important overrides any inline or flex context set by the theme.
 */
.footer-col li {
    margin-bottom: 15px;
    display: block !important;
}

/*
 * .brand-col — The logo/social/brand column in the footer grid.
 * Flex column with centred alignment and a 35px gap stacks the logo, social heading,
 * and icon row with consistent spacing on all screen sizes.
 */
.brand-col {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
    gap: 35px;
}

/*
 * .footer-col a — Link anchors inside footer columns.
 * Light blue (#5587d6) colour distinguishes footer links from body text while still
 * fitting within the brand palette. Small font size (0.95rem) keeps the link list compact.
 */
.footer-col a {
    color: #5587d6;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

/*
 * .footer-col a:hover — Hover state for footer column links.
 * Darkens the link to the full brand blue and adds an underline, giving clear
 * visual feedback that the link is interactive.
 */
.footer-col a:hover {
    color: #1C48AA;
    text-decoration: underline;
}

/*
 * .footer-tagline — Centred tagline section above the footer bottom strip.
 * Text-align centre and bottom margin push this headline visually apart from the
 * legal links and copyright text below it.
 */
.footer-tagline {
    text-align: center;
    margin-bottom: 40px;
}

/*
 * .footer-tagline h2 — The main tagline heading in the footer.
 * clamp() on font-size provides fluid typography: it scales between 1.5rem and 2.2rem
 * relative to viewport width, keeping the heading proportional without media queries.
 */
.footer-tagline h2 {
    color: #1C48AA;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    margin: 0;
}

/*
 * .footer-bottom — Bottom strip of the footer containing legal links and copyright.
 * Centred text and a top border visually separate this strip from the column grid above.
 * padding-top provides breathing room between the border and the content.
 */
.footer-bottom {
    text-align: center;
    border-top: 1px solid #eaeaea;
    padding-top: 30px;
}

/*
 * .desktop-legal-links — Container for the inline legal/policy navigation links.
 * Bottom margin pushes the copyright text below it further down for visual separation.
 */
.desktop-legal-links { margin-bottom: 20px; }

/*
 * .desktop-legal-links a — Legal link anchors (Privacy, Terms, etc.).
 * Muted grey colour keeps these links visually secondary to the main footer content.
 */
.desktop-legal-links a { color: #999; text-decoration: none; font-size: 0.9rem; }

/*
 * .desktop-legal-links a:hover — Hover state for legal link anchors.
 * Shifts the colour to brand blue on hover to confirm interactivity.
 */
.desktop-legal-links a:hover { color: #1C48AA; }

/*
 * .desktop-legal-links .divider — Explicit pipe divider element between legal links.
 * Sets a light grey colour and horizontal margins matching the auto-generated
 * ::before pseudo-element dividers on the <li> items.
 */
.desktop-legal-links .divider { color: #ccc; margin: 0 10px; }

/* wp_nav_menu outputs <li> items — style them inline with CSS dividers */
/*
 * .desktop-legal-links li — List items output by wp_nav_menu for the legal link list.
 * display: inline collapses them onto one line; list-style and padding/margin resets
 * remove bullet points and default spacing injected by WordPress's menu markup.
 */
.desktop-legal-links li { display: inline; list-style: none; padding: 0; margin: 0; }

/*
 * .desktop-legal-links li + li::before — Auto-generated pipe divider between legal link items.
 * Uses the adjacent sibling combinator to insert a "|" before every <li> after the first,
 * creating a compact inline legal link row without needing explicit divider HTML elements.
 */
.desktop-legal-links li + li::before { content: "|"; color: #ccc; margin: 0 10px; }

/*
 * .desktop-legal-links ul — The <ul> wrapper output by wp_nav_menu inside legal links.
 * display: inline keeps the entire list on one line so it flows within the footer strip.
 * Resets list styling and spacing added by the browser's default UA stylesheet.
 */
.desktop-legal-links ul { display: inline; list-style: none; padding: 0; margin: 0; }

/*
 * .copyright — Copyright notice text in the footer bottom strip.
 * Small, muted grey text keeps this secondary information visually subordinate.
 * Bottom margin separates it from the disclaimer text below.
 */
.copyright {
    color: #999;
    font-size: 0.85rem;
    margin: 0 0 15px 0;
}

/*
 * .disclaimer — Legal disclaimer text at the very bottom of the footer.
 * Very small font size (0.65rem) and a lighter grey colour signal that this is
 * fine-print content. max-width and auto margins keep long text readable by
 * constraining its line length on wide screens.
 */
.disclaimer {
    color: #b5b5b5;
    font-size: 0.65rem;
    line-height: 1.6;
    max-width: 1000px;
    margin: 0 auto;
}

/*
 * @media (max-width: 768px) — Mobile-specific overrides for the footer section.
 * Centres the social heading icon row on small screens and tightens the social icon gap.
 * Increases the disclaimer font size slightly for better readability on mobile.
 * Converts the legal links container to a flex row with wrapping so links reflow
 * gracefully instead of overflowing on narrow screens.
 */
@media (max-width: 768px) {
    .social-heading .hide-desktop {
        justify-content: center;
        width: 100%;
    }

    .social-icons {
        gap: 18px;
    }

    .disclaimer {
        font-size: 0.75rem;
    }

    .desktop-legal-links {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 8px;
    }
}

/*
 * @media (min-width: 769px) — Desktop layout for the footer top grid.
 * Switches the single-column mobile grid to a 4-column layout (2fr for the brand column,
 * 1fr for each of the three link columns). Left-aligns text to suit the wider layout.
 * Social icons are also left-aligned to match the brand column's text alignment.
 */
@media (min-width: 769px) {
    .footer-top-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        text-align: left;
        gap: 20px;
    }
    .social-icons { justify-content: flex-start; }
}

/* ── Nav dropdown (sub-menu) ─────────────────────────────────────────────── */

/* Desktop: absolute-positioned dropdown revealed on hover */
.nav-links li {
    position: relative;
}
.nav-links .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #f1f2f2;
    border-radius: 0 0 4px 4px;
    box-shadow: none;
    z-index: 1010;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-links li:hover > .sub-menu,
.nav-links li.is-open > .sub-menu {
    display: block;
}
/* Remove the pipe separator that appears between top-level items */
.nav-links .sub-menu li::after {
    display: none !important;
}
.nav-links .sub-menu li {
    display: block;
    width: 100%;
    position: relative;
}
.nav-links .sub-menu li:not(:last-child)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px;
    height: 1px;
    background: #1C48AA;
}
.nav-links .sub-menu a {
    display: block;
    padding: 10px 18px;
    color: #1C48AA;
    font-size: 14px;
    white-space: nowrap;
    text-align: center !important;
}
.nav-links .sub-menu a:hover {
    color: #1C48AA;
    background: #dde0e8;
}

/* Mobile: accordion — sub-menu hidden until JS adds .is-open */
.mobile-nav-links .sub-menu {
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
    background: #f0f3fa;
}
.mobile-nav-links .sub-menu.is-open {
    display: block;
}
.mobile-nav-links .sub-menu li {
    border-bottom: 1px solid #dce3f0 !important;
}
.mobile-nav-links .sub-menu li:last-child {
    border-bottom: none !important;
}
.mobile-nav-links .sub-menu li a {
    padding: 15px 25px 15px 36px;
    font-size: 0.95rem;
    font-weight: 400;
    color: #1C48AA;
}
.mobile-nav-links .sub-menu li a:hover {
    color: #F8D648;
}
/* Chevron on parent items that have children — rotates when open */
.mobile-nav-links li.menu-item-has-children > a::after {
    content: '›';
    float: right;
    font-size: 1.3rem;
    line-height: 1.2;
    transition: transform 0.2s;
}
.mobile-nav-links li.menu-item-has-children.is-open > a::after {
    transform: rotate(90deg);
}