/*
 * Digital Theme – Design Improvements
 * Applied via design-improvements.css
 * Loaded after theme.css for clean overrides.
 *
 * Brand colours are read from the global colour tokens emitted on :root by
 * digital_settings_css() (see inc/controls/global-colors.php). Each var()
 * carries the previous hardcoded value as its fallback, so this file still
 * renders correctly on its own if that inline CSS is ever dequeued.
 */

/* ============================================================
   1. Fix Floating WooCommerce Cart & Account Icons
   ============================================================ */
/* Contain topside buttons inside their proper flex containers */
button.btn.btn-light.topside {
    position: relative;
    z-index: auto;
}

/* ============================================================
   2. Tighten Logo / Header Branding Area Whitespace
   ============================================================ */
.stylesix-header .container.stylesix {
    padding-top: 10px;
    padding-bottom: 10px;
}

.stylesix-header .container.stylesix .row {
    align-items: center;
}

.logo .img-fluid {
    transform: scale(0.85);
    max-width: 60%;
}

/* Site description below logo */
p.site-description {
    font-size: 0.78rem;
    color: #888;
    margin: 0;
    line-height: 1.3;
}

/* ============================================================
   3. Post Card – Stronger Titles & Hover Lift
   ============================================================ */
h2.entry-title {
    margin-bottom: 6px;
}

h2.entry-title a {
    color: #1a1a2e !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    display: block;
    transition: color 0.2s ease;
}

h2.entry-title a:hover {
    color: var(--dp-primary, #2196F3) !important;
}

/* Post card hover lift effect */
article.post .row.g-0.border.rounded {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

article.post .row.g-0.border.rounded:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-3px);
}

/* Thumbnail overflow clip so image doesn't spill on hover */
article.post .col-auto.d-lg-block {
    overflow: hidden;
}

/* ============================================================
   4. Read More – Styled as Pill Button
   ============================================================ */
.row.post-footer a.read-more-link {
    display: inline;
    background-color: var(--dp-primary, #2196F3);
    color: #fff !important;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background-color 0.2s ease;
    text-decoration: none;
    border: none;
}

.row.post-footer a.read-more-link:hover {
    background-color: var(--dp-primary-dark, #0c7cd5);
    opacity: 1;
    color: #fff !important;
}

/* ============================================================
   5. Footer – Better Spacing, Typography & Top Accent
   ============================================================ */
#wrapper-footer {
    border-top: 3px solid var(--dp-primary, #2196F3);
    padding: 16px 0;
}

footer#colophon .site-info {
    font-size: 0.85rem;
    color: #aaa;
    padding-top: 6px;
}

ul#footerhorizontal {
    padding-top: 4px;
}

ul#footerhorizontal li a {
    color: #bbb;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

ul#footerhorizontal li a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   6. Author Box – Card Style with Left Accent
   ============================================================ */
/* Target the common author wrapper class patterns this theme uses */
.author-box,
div[class*="author-style"],
.loop-templates-author,
article .author-section {
    border-left: 4px solid var(--dp-primary, #2196F3);
    background: #f4f8ff;
    border-radius: 0 6px 6px 0;
    padding: 16px 20px;
    margin: 24px 0;
}

/* Avatar styling */
.author-box img,
div[class*="author-style"] img {
    border-radius: 50%;
    border: 3px solid var(--dp-primary, #2196F3);
    margin-right: 12px;
}

/* "View all posts" link */
.author-box a,
div[class*="author-style"] a {
    font-weight: 600;
    font-size: 0.9rem;
}

/* ============================================================
   7. Single Post – Title / Comment Heading Hierarchy & Breadcrumbs
   ============================================================ */
/*
 * Size, weight, style and transform for the single post title are owned by
 * the Customizer (see digital_settings_css(), which emits an inline
 * `h1.entry-title { ... !important }` rule). Re-declaring them here would
 * out-specify that rule — `.single h1.entry-title` (0,2,1) beats
 * `h1.entry-title` (0,1,1) — and silently dead-end the control.
 *
 * The previous 1.65rem override also fell below the base h2 (1.8rem) and
 * h3 (1.7rem) sizes, so the post title rendered *smaller* than the
 * "One thought on ..." and "Leave a Reply" headings beneath it.
 *
 * Colour is left alone for the same reason: pro builds emit
 * `h1.entry-title{color: ... !important}` from premium/inc/css-output.php,
 * and free builds inherit --bs-body-color. Both are near-black already.
 */
.single h1.entry-title {
    line-height: 1.3;
    margin-bottom: 12px;
}

/* Comment headings are section labels, not content headings — hold them
   below the post title instead of leaving them at the base h2/h3 scale. */
.comments-area .comments-title {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 18px;
}

.comments-area .comment-reply-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}

@media (max-width: 767px) {
    .comments-area .comments-title {
        font-size: 1.2rem;
    }

    .comments-area .comment-reply-title {
        font-size: 1.05rem;
    }
}

/* The top-level list is already `list-style: none`, so the browser's default
   ol indent only pushed the comment cards out of line with the heading above
   them. Nested replies keep their indent through ol.children. */
.comments-area ol.comment-list {
    padding-left: 0;
}

/* Breadcrumb – extend background, remove jagged edge */
.breadcrumb-wrapper,
.breadcrumbs,
nav.breadcrumbs,
div.breadcrumb-area {
    background: #f0f4f8;
    padding: 8px 16px;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--dp-border, #dde5f0);
    margin-bottom: 16px;
}

/* Blockquote – softer left border accent instead of plain italic block */
.wp-block-quote,
.blockquote {
    border-left: 4px solid var(--dp-primary, #2196F3);
    background: #f4f8ff;
    padding: 14px 18px;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #444;
}

/* ============================================================
   8. Back-to-Top Button – Consistent Brand Color
   ============================================================ */
.scrollup,
.backtoup {
    background-color: var(--dp-primary, #2196F3) !important;
    border-radius: 8px;
    padding: 8px 10px;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.scrollup:hover,
.backtoup:hover {
    background-color: var(--dp-primary-dark, #0c7cd5) !important;
    transform: translateY(-2px);
}

/* ============================================================
   9. Navbar Active / Current Menu Item Highlight
   ============================================================ */
/* Desktop only. Below the breakpoint the rows go full width and stack, so a
   filled pill turns two adjacent current items (the auto home link and a
   hand-added "Home") into one tall grey slab -- section 13 gives mobile its
   own edge-marker treatment instead. */
@media (min-width: 768px) {
    .stylesix-header ul#main-menu li.current-menu-item>a.nav-link,
    .stylesix-header ul#main-menu li.current-menu-ancestor>a.nav-link {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }
}

/* ============================================================
   10. Sidebar Widgets – Subtle Card Borders
   ============================================================ */
#right-sidebar aside.widget,
#left-sidebar aside.widget {
    border: 1px solid var(--dp-border, #e8edf3);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
}

#right-sidebar .widget-title,
#left-sidebar .widget-title {
    font-size: 1.05rem;
    font-weight: 700;
    border-bottom: 2px solid var(--dp-primary, #2196F3);
    padding-bottom: 6px;
    margin-bottom: 12px;
}
/* ============================================================
   11. Keyboard Focus Visibility
   ============================================================ */
/*
 * Bootstrap resets `outline: 0` on interactive elements and substitutes a
 * box-shadow ring, which several theme rules then override. This guarantees a
 * visible focus indicator for keyboard users no matter what won the cascade.
 * Pointer users are unaffected -- :focus-visible only matches keyboard focus.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #0b64c0;
    outline-offset: 2px;
    border-radius: 2px;
}

/* The skip link must become visible once focused. */
.skip-link:focus,
.skip-link:focus-visible {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    display: inline-block;
    margin: 8px;
    padding: 10px 16px;
    background: #fff;
    color: #0b64c0;
    font-weight: 600;
    z-index: 100000;
}

/* ============================================================
   12. Masonry Posts Layout
   ============================================================ */
/*
 * CSS multi-column masonry. No JS and no layout library: the browser does the
 * balancing, so there is no reflow flash on load and none on resize.
 * break-inside is what stops a card being split across two columns.
 */
.digital-masonry {
    column-gap: 1rem;
}

.digital-masonry .masonry-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1rem;
    display: inline-block;
    width: 100%;
}

.digital-masonry.cols-2 { column-count: 2; }
.digital-masonry.cols-3 { column-count: 3; }
.digital-masonry.cols-4 { column-count: 4; }

@media (max-width: 991px) {
    .digital-masonry.cols-3,
    .digital-masonry.cols-4 { column-count: 2; }
}

@media (max-width: 575px) {
    .digital-masonry.cols-2,
    .digital-masonry.cols-3,
    .digital-masonry.cols-4 { column-count: 1; }
}

/* ============================================================
   13. Mobile Navigation (below the md breakpoint)
   ============================================================ */
/*
 * Below md the menu is a fixed drawer, not Bootstrap's inline collapse.
 *
 * The collapse panel is part of the document flow: it opens *underneath* the
 * navbar and pushes the page down. On these header styles the navbar sits
 * ~200px down (top strip, then the logo row), so an open menu started near the
 * fold and ran off the bottom of the screen -- you had to scroll the page to
 * reach half your own menu. Capping the list height only moved the problem,
 * because the cap cannot know how much room is left below the navbar.
 *
 * A drawer is pinned to the viewport instead, so it always occupies exactly
 * the screen height whatever is above it, and the list scrolls inside itself.
 * js/mobile-nav.js drives it (Bootstrap's collapse plugin animates height,
 * which is the wrong axis for this) and falls back to the plain collapse if
 * that script fails to load.
 *
 * The tokens carry the one thing CSS cannot read off the navbar -- whether its
 * background is dark or light -- so one set of rules serves all six header
 * styles. --dp-nav-surface is the drawer's own background; where a header
 * style exposes a Customizer colour, digital_settings_css() overrides it
 * with the live value.
 */
#wrapper-navbar {
    --dp-nav-line: rgba(255, 255, 255, 0.16);
    --dp-nav-hover: rgba(255, 255, 255, 0.12);
    --dp-nav-active: rgba(0, 0, 0, 0.22);
    --dp-nav-sub: rgba(0, 0, 0, 0.14);
    --dp-nav-toggler: #ffffff;
    --dp-nav-surface: #2196f3;
    --dp-nav-ink: #ffffff;
}

.styleone-header #wrapper-navbar {
    --dp-nav-surface: #3387d0;
}

.stylefour-header #wrapper-navbar {
    --dp-nav-surface: #03a9f4;
}

.stylefive-header #wrapper-navbar {
    --dp-nav-surface: #383e41;
}

/* The two header styles whose navbar is light: stylethree is #ffffff, styletwo
   is transparent over the page. */
.stylethree-header #wrapper-navbar,
.styletwo-header #wrapper-navbar {
    --dp-nav-line: rgba(0, 0, 0, 0.09);
    --dp-nav-hover: rgba(0, 0, 0, 0.05);
    --dp-nav-active: rgba(0, 0, 0, 0.08);
    --dp-nav-sub: rgba(0, 0, 0, 0.04);
    --dp-nav-toggler: #2f2b2b;
    --dp-nav-surface: #ffffff;
    --dp-nav-ink: #2f2b2b;
}

/* styletwo paints the toggler itself #464646 in theme.css, so its bars stay
   light even though the surrounding navbar is not. */
.styletwo-header #wrapper-navbar {
    --dp-nav-toggler: #ffffff;
}

/* The backdrop lives on <body>, outside #wrapper-navbar, so it cannot use the
   tokens above. It is only ever inserted below the breakpoint. */
.dp-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.dp-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* Hold the page still behind the open drawer. overscroll-behavior on the list
   stops a flick inside the menu from chaining through to the document. */
html.dp-nav-open,
html.dp-nav-open body {
    overflow: hidden;
}

@media (min-width: 768px) {

    .dp-nav-backdrop {
        display: none;
    }

    /* js/mobile-nav.js injects the drawer's title and close button once, at
       any width. Above the breakpoint the panel is the horizontal navbar, so
       that chrome would sit in front of the first menu item. */
    #wrapper-navbar .dp-nav-head {
        display: none;
    }
}

/* The toggler only exists below the breakpoint. These rules stay inside the
   media query: unscoped, `#wrapper-navbar .navbar-toggler` out-specifies
   Bootstrap's `.navbar-expand-md .navbar-toggler {display: none}` and the
   hamburger reappears beside the desktop tabs. */
@media (max-width: 767.98px) {

    /* ---------- Toggler: a real 44px target, bars that fold into an X ------ */
    #wrapper-navbar .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        color: var(--dp-nav-toggler);
        border: 1px solid var(--dp-nav-line);
        border-radius: 10px;
        background-color: var(--dp-nav-hover);
        transition: background-color 0.2s ease;
    }

    #wrapper-navbar .navbar-toggler:hover {
        background-color: var(--dp-nav-active);
    }

    /* Bootstrap's own focus ring is redundant next to the :focus-visible
       outline in section 11, and it fired on pointer clicks too. */
    #wrapper-navbar .navbar-toggler:focus {
        box-shadow: none;
    }

    /*
     * The middle bar is the background gradient, the outer two are the
     * pseudo-elements. All three ride currentColor, which is what lets one
     * rule serve light and dark navbars.
     */
    #wrapper-navbar .navbar-toggler-icon {
        position: relative;
        display: block;
        width: 22px;
        height: 16px;
        background-image: linear-gradient(currentColor, currentColor);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 2px;
    }

    #wrapper-navbar .navbar-toggler-icon::before,
    #wrapper-navbar .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 2px;
        background-color: currentColor;
    }

    #wrapper-navbar .navbar-toggler-icon::before {
        top: 0;
    }

    #wrapper-navbar .navbar-toggler-icon::after {
        bottom: 0;
    }

    /* ---------- The drawer ---------- */
    /*
     * display is forced because `.collapse:not(.show)` would otherwise pull it
     * out of the layout, and a display:none element cannot animate. Closed
     * state is transform + visibility instead: visibility:hidden also takes
     * the links out of the tab order and the accessibility tree, so nothing
     * focusable hides off-screen.
     */
    #wrapper-navbar .navbar-collapse {
        display: flex !important;
        flex-direction: column;
        /* Bootstrap sets align-items:center on .navbar-collapse for the
           horizontal desktop bar. Turned on its side that centres the header
           and the list on the cross axis and shrink-wraps both to their text
           instead of filling the drawer. */
        align-items: stretch;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: min(20rem, 88vw);
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 0;
        border: 0;
        background-color: var(--dp-nav-surface);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.28s ease, visibility 0.28s ease;
    }

    #wrapper-navbar .navbar-collapse.show {
        transform: none;
        visibility: visible;
    }

    /* Keep the WordPress toolbar reachable rather than buried under the
       drawer -- it is fixed at the top on small screens. */
    body.admin-bar #wrapper-navbar .navbar-collapse {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }

    /* ---------- Drawer header (injected by js/mobile-nav.js) ---------- */
    /*
     * The drawer chrome is our own markup, so nothing forces a colour onto it
     * the way digital_settings_css() does for .nav-link -- without this it
     * inherits the near-black body colour and the title and close X come out
     * dark on the brand background.
     */
    #wrapper-navbar .dp-nav-head {
        color: var(--dp-nav-ink);
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 56px;
        padding: 0.5rem 0.6rem 0.5rem 1.1rem;
        border-bottom: 1px solid var(--dp-nav-line);
    }

    #wrapper-navbar .dp-nav-title {
        overflow: hidden;
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-transform: uppercase;
        opacity: 0.75;
    }

    #wrapper-navbar .dp-nav-close {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background-color: transparent;
        color: inherit;
        transition: background-color 0.2s ease;
    }

    #wrapper-navbar .dp-nav-close:hover {
        background-color: var(--dp-nav-hover);
    }

    #wrapper-navbar .dp-nav-close svg {
        width: 20px;
        height: 20px;
    }

    /* Section 11's focus outline is a mid-blue that disappears against a blue
       drawer. Inside the drawer the ring rides the text colour instead. */
    #wrapper-navbar .navbar-collapse a:focus-visible,
    #wrapper-navbar .navbar-collapse button:focus-visible {
        outline-color: currentColor;
    }

    /* ---------- The list ---------- */
    /*
     * flex:1 + min-height:0 is what makes the list, and only the list, take
     * the leftover height and scroll. No vh cap: the drawer is already exactly
     * as tall as the viewport, so there is nothing left to guess at.
     */
    #wrapper-navbar #main-menu {
        flex: 1 1 auto;
        min-height: 0;
        max-width: none;
        margin: 0;
        padding: 0.25rem 0 1.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #wrapper-navbar #main-menu > li + li {
        border-top: 1px solid var(--dp-nav-line);
    }

    /* ---------- Rows ---------- */
    #wrapper-navbar #main-menu .nav-link,
    #wrapper-navbar #main-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        min-height: 48px;
        padding: 0.7rem 1.1rem;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.35;
        white-space: normal;
        border-radius: 0;
        transition: background-color 0.18s ease;
    }

    #wrapper-navbar #main-menu .nav-link:hover,
    #wrapper-navbar #main-menu .nav-link:focus,
    #wrapper-navbar #main-menu .dropdown-item:hover,
    #wrapper-navbar #main-menu .dropdown-item:focus {
        background-color: var(--dp-nav-hover);
    }

    /* An inset edge marker rather than a filled pill: it still reads when two
       current items land next to each other (the auto home link plus a
       hand-added "Home"), and it survives whatever colour the Customizer put
       behind it. */
    #wrapper-navbar #main-menu > li.current-menu-item > .nav-link,
    #wrapper-navbar #main-menu > li.current-menu-ancestor > .nav-link,
    #wrapper-navbar #main-menu > li.active > .nav-link,
    #wrapper-navbar #main-menu .dropdown-menu > li.current-menu-item > .dropdown-item {
        font-weight: 600;
        background-color: var(--dp-nav-active);
        box-shadow: inset 3px 0 0 currentColor;
    }

    /* digital_home_link_to_menu() emits an icon-only link. Inline in a row
       of desktop tabs that reads fine; stacked it is a lone glyph on a blank
       row, so the label that markup carries for screen readers becomes
       visible here. */
    #wrapper-navbar #main-menu .dp-home-label {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        white-space: normal !important;
    }

    #wrapper-navbar #main-menu .nav-link svg {
        top: 0;
        flex: 0 0 auto;
    }

    /* ---------- Submenus ---------- */
    #wrapper-navbar #main-menu .dropdown-toggle.nav-link {
        justify-content: space-between;
    }

    #wrapper-navbar #main-menu .dropdown-toggle.nav-link::after {
        margin-left: auto;
        transition: transform 0.2s ease;
    }

    #wrapper-navbar #main-menu .dropdown-toggle.nav-link[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    #wrapper-navbar #main-menu .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background-color: var(--dp-nav-sub);
    }

    /* One flat tint for the whole submenu tree. Letting each level add its own
       translucent layer turned a four-deep menu into four muddy shades of the
       brand colour; depth is carried by the indent instead. */
    #wrapper-navbar #main-menu .dropdown-menu .dropdown-menu {
        background-color: transparent;
    }

    #wrapper-navbar #main-menu .dropdown-menu > li + li {
        border-top: 1px solid var(--dp-nav-line);
    }

    #wrapper-navbar #main-menu .dropdown-menu .dropdown-item {
        padding-left: 2.1rem;
        font-weight: 400;
        background-color: transparent;
    }

    #wrapper-navbar #main-menu .dropdown-menu .dropdown-menu .dropdown-item {
        padding-left: 3.1rem;
    }

    #wrapper-navbar #main-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
        padding-left: 4.1rem;
    }

    /*
     * digital_WP_Bootstrap_Navwalker only hands a .dropdown-toggle to the
     * first level, so levels three and deeper have no control that could ever
     * open them. Unfolding them with their parent is what makes those pages
     * reachable on a phone at all.
     */
    #wrapper-navbar #main-menu .dropdown-menu.show .dropdown-menu {
        display: block;
    }

    /* theme.css turns the caret sideways on any submenu item that has
       children. Below the breakpoint those children are already unfolded
       underneath, so the arrow promised an interaction that does not exist. */
    #wrapper-navbar #main-menu .dropdown-menu li.dropdown > a::after {
        display: none;
    }

    /* ---------- Touch ---------- */
    /*
     * A finger cannot express hover, but it latches :hover onto whatever it
     * last touched, so a tapped row stayed in its hover colour until something
     * else was tapped -- the menu looked stuck on the item you had just used.
     * digital_settings_css() emits those hover colours with !important,
     * hence the matching !important and the extra id here.
     *
     * :not() keeps the current-page rows on their own marker rather than
     * letting this reset strip them back to the drawer colour.
     */
    @media (hover: none) {

        #wrapper-navbar #main-menu li:not(.current-menu-item):not(.current-menu-ancestor):not(.active) > a.nav-link:hover,
        #wrapper-navbar #main-menu li:not(.current-menu-item):not(.current-menu-ancestor) > a.dropdown-item:hover {
            background-color: inherit !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {

        .dp-nav-backdrop,
        #wrapper-navbar .navbar-collapse,
        #wrapper-navbar .navbar-toggler,
        #wrapper-navbar #main-menu .nav-link,
        #wrapper-navbar #main-menu .dropdown-item,
        #wrapper-navbar #main-menu .dropdown-toggle.nav-link::after {
            transition: none;
        }
    }

    /* ---------- Offcanvas variant (digital_navbar_type = offcanvas) ------ */
    /* Bootstrap's own offcanvas already is a drawer; it only needs sizing and
       the shared row styling above. */
    #wrapper-navbar .offcanvas {
        width: min(20rem, 88vw);
        border: 0;
    }

    /* theme.css insets the open panel by 2%, which would leave every row
       separator stopping short of the panel edge. */
    #wrapper-navbar .offcanvas#navbarNavOffcanvas {
        padding: 0;
    }

    #wrapper-navbar .offcanvas .offcanvas-header {
        justify-content: flex-end;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--dp-nav-line);
    }

    #wrapper-navbar .offcanvas .offcanvas-body {
        padding: 0;
    }

    /* ---------- Per-style trims ---------- */
    /* stylesix' top strip is two equal Bootstrap columns, which left the date
       column too narrow at phone widths -- it broke mid-token, as
       "Thursday, 27-Aug-" / "2026". Size it to its content and let the search
       group take what is left; the form already caps itself at 300px. */
    header#wrapper-navbar.topbarsix .row {
        flex-wrap: nowrap;
        align-items: center;
    }

    header#wrapper-navbar.topbarsix .col.text-start {
        /* `width` too, not just `flex`: Bootstrap's `.row > *` hands every
           column `width: 100%`, which on a nowrap row shoves the search out. */
        flex: 0 0 auto;
        width: auto;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    header#wrapper-navbar.topbarsix .col.text-end {
        min-width: 0;
    }

    /* stylethree parks a search field and a second offcanvas trigger beside
       the toggler; unpinned they crowded it. */
    .stylethree-header #wrapper-navbar .order-last {
        margin-left: auto;
    }

    /* styletwo is the one style with branding inside the navbar, so the logo
       has to leave room for the toggler. */
    .styletwo-header #wrapper-navbar .navbar-brand,
    .styletwo-header #wrapper-navbar .navbar-brand.custom-logo-link {
        max-width: 60%;
    }
}