/**
 * C2 Burger Menu Styles
 */

/* ==========================================================================
   WordPress Block Navigation Overrides
   ========================================================================== */

/* Hide the original WordPress block navigation open button when replaced */
.wp-block-navigation__responsive-container-open.c2-replaced {
    display: none !important;
}

/* Ensure our button displays properly within the WP nav block */
.wp-block-navigation .c2-burger-toggler {
    display: inline-flex !important;
}

/* ==========================================================================
   Button Base Styles
   ========================================================================== */
.c2-burger-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.c2-burger-toggler:focus {
    outline: none;
}

/* !important: other plugins reset `:focus { outline: 0 !important }` globally */
.c2-burger-toggler:focus-visible {
    /* Same color as the icon, which is contrast-checked against the background */
    outline: 2px solid var(--c2-burger-focus-color, currentColor) !important;
    outline-offset: 2px;
}

/* Caption Boxes (the legacy IDs only exist on the first toggler of a page) */
.c2-burger-caption {
    display: flex;
    align-items: center;
}

.c2-burger-caption-text {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: currentColor;
}

/* Caption box visibility is controlled per-side in PHP via the
   "Label Position" setting (inline style="display:none" when hidden). */

/* SVG Hamburger Icon Styles */
.ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.c2-burger-toggler .c2-burger-icon {
    width: 60px;
}

.ham .line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: var(--c2-burger-icon-color, #8c0013);
    stroke-width: 5.5;
    stroke-linecap: butt;
}

/* Rotate Animation - container rotates 45deg */
.hamRotate.active {
    transform: rotate(45deg);
}

.hamRotate180.active {
    transform: rotate(180deg);
}

/* Ham8 - Stroke-dasharray Animation */
.ham8 .top {
    stroke-dasharray: 40 160;
}

.ham8 .middle {
    stroke-dasharray: 40 142;
    transform-origin: 50%;
    transition: transform 400ms;
}

.ham8 .bottom {
    stroke-dasharray: 40 85;
    transform-origin: 50%;
    transition: transform 400ms, stroke-dashoffset 400ms;
}

/* Active state - X shape */
.ham8.active .top {
    stroke-dashoffset: -64px;
}

.ham8.active .middle {
    transform: rotate(90deg);
}

.ham8.active .bottom {
    stroke-dashoffset: -64px;
}

/* Navbar Toggler Bootstrap Override */
.navbar-toggler.c2-burger-toggler {
    border: none;
    padding: 8px 12px;
}

.navbar-toggler.c2-burger-toggler:focus {
    box-shadow: none;
}


/* Overlay Menu Styles */
.c2-overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c2-overlay-menu.active {
    opacity: 1;
    visibility: visible;
}

.c2-overlay-menu .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.c2-overlay-menu .menu li {
    margin: 20px 0;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.c2-overlay-menu.active .menu li {
    transform: translateY(0);
    opacity: 1;
}

.c2-overlay-menu .menu li:nth-child(1) { transition-delay: 0.1s; }
.c2-overlay-menu .menu li:nth-child(2) { transition-delay: 0.15s; }
.c2-overlay-menu .menu li:nth-child(3) { transition-delay: 0.2s; }
.c2-overlay-menu .menu li:nth-child(4) { transition-delay: 0.25s; }
.c2-overlay-menu .menu li:nth-child(5) { transition-delay: 0.3s; }
.c2-overlay-menu .menu li:nth-child(6) { transition-delay: 0.35s; }
.c2-overlay-menu .menu li:nth-child(7) { transition-delay: 0.4s; }
.c2-overlay-menu .menu li:nth-child(8) { transition-delay: 0.45s; }

.c2-overlay-menu .menu a {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

.c2-overlay-menu .menu a:hover {
    color: #ccc;
}

/* Z-index for the toggle button when overlay is active */
.c2-burger-toggler {
    position: relative;
    z-index: 100001; /* Above WP block nav overlay (z-index: 100000) */
}

/* ==========================================================================
   WordPress Block Navigation Overlay - Fullscreen Style
   ========================================================================== */

/* Ensure burger button stays visible when WP overlay is open */
.wp-block-navigation .c2-burger-toggler {
    z-index: 100001;
}

/* Hide the WP close button since our burger animates to X */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close {
    display: none !important;
}


/* --------------------------------------------------------------------------
   Fullscreen Overlay Container
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    background: #ffffff !important;
    z-index: 100000 !important;
    transform: scale(0);
    transform-origin: center center;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
    visibility: hidden;
    opacity: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.has-modal-open {
    transform: scale(1) !important;
    visibility: visible !important;
}

/* --------------------------------------------------------------------------
   Inner Dialog/Close Area
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-close {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.wp-block-navigation__responsive-dialog {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --------------------------------------------------------------------------
   Navigation Content Area
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px;
    width: 100% !important;
    max-width: none !important;
}

/* --------------------------------------------------------------------------
   Navigation List
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: auto !important;
}

/* --------------------------------------------------------------------------
   Navigation Items
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container .wp-block-navigation-item {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for menu items (starts after scale animation) */
.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(1) { transition-delay: 0.6s; }
.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(2) { transition-delay: 0.65s; }
.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(3) { transition-delay: 0.7s; }
.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(4) { transition-delay: 0.75s; }
.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(5) { transition-delay: 0.8s; }
.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(6) { transition-delay: 0.85s; }
.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(7) { transition-delay: 0.9s; }
.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(8) { transition-delay: 0.95s; }
.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(9) { transition-delay: 1.0s; }
.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(10) { transition-delay: 1.05s; }

/* --------------------------------------------------------------------------
   Navigation Links (extrasidebar style)
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    display: block !important;
    padding: 12px 20px !important;
    color: #4c4e4e !important;
    text-decoration: none !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
    background: transparent !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus-visible {
    color: #8c0013 !important;
    text-decoration: none !important;
    background: transparent !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation-item__content.active,
.wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    color: #4c4e4e !important;
    font-weight: 500 !important;
}

/* Link label span */
.wp-block-navigation__responsive-container .wp-block-navigation-item__label {
    color: inherit !important;
}

/* --------------------------------------------------------------------------
   Submenu Styles
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container .wp-block-navigation-submenu {
    width: auto !important;
    text-align: center !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
    position: static !important;
    display: none;
    width: auto !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 8px 20px !important;
    font-size: 18px !important;
    color: #4c4e4e !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: #8c0013 !important;
}

/* --------------------------------------------------------------------------
   Submenu disclosures
   JS adds .c2-disclosure to every item with a submenu and .c2-submenu-open to
   the expanded ones, and keeps aria-expanded on the toggle button in sync.
   The parent link keeps its full row; the chevron is drawn by the link (so it
   follows the link color in every state) and the real toggle button lies on
   top of the chevron as its hit area.
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container .wp-block-navigation-item.c2-disclosure {
    display: grid !important;
    grid-template-columns: minmax(0, max-content) minmax(44px, 1fr);
    align-items: stretch;
}

.wp-block-navigation__responsive-container .c2-disclosure > .wp-block-navigation-item__content {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid !important;
    grid-template-columns: subgrid;
    align-items: center;
    min-width: 0;
}

.wp-block-navigation__responsive-container .c2-disclosure > .wp-block-navigation-item__content > * {
    grid-column: 1;
}

.wp-block-navigation__responsive-container .c2-disclosure > .wp-block-navigation-item__content::after {
    content: '';
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    display: block;
    width: 7px;
    height: 7px;
    margin: 0 0 3px 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease, margin-bottom 0.3s ease;
}

.wp-block-navigation__responsive-container .c2-disclosure.c2-submenu-open > .wp-block-navigation-item__content::after {
    transform: rotate(-135deg);
    margin-bottom: -3px;
}

/* WordPress' own submenu button is the toggle (core hides it in the overlay). */
.wp-block-navigation__responsive-container .c2-disclosure > .c2-submenu-toggle.wp-block-navigation__submenu-icon {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: stretch;
    position: relative;
    z-index: 1;
    display: block !important;
    width: 44px !important;
    height: auto !important;
    min-height: 44px;
    margin: 0 0 0 -4px !important; /* roughly centres the 44px hit area on the chevron */
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    color: #4c4e4e;
    cursor: pointer;
    transform: none !important;
}

.wp-block-navigation__responsive-container .c2-disclosure > .c2-submenu-toggle.wp-block-navigation__submenu-icon svg {
    display: none !important;
}

.wp-block-navigation__responsive-container .c2-submenu-toggle:focus {
    outline: none;
}

.wp-block-navigation__responsive-container .c2-submenu-toggle:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: -6px;
}

/* Open-on-click submenus: the item itself is the toggle */
.wp-block-navigation__responsive-container .c2-disclosure > button.wp-block-navigation-item__content {
    width: 100%;
    border: none;
    font-family: inherit;
    text-align: inherit;
    cursor: pointer;
}

.wp-block-navigation__responsive-container .c2-disclosure > span.wp-block-navigation__submenu-icon {
    display: none !important;
}

.wp-block-navigation__responsive-container .c2-disclosure > .wp-block-navigation__submenu-container {
    grid-column: 1 / -1;
}

.wp-block-navigation__responsive-container .c2-disclosure:not(.c2-submenu-open) > .wp-block-navigation__submenu-container {
    display: none !important;
}

.wp-block-navigation__responsive-container .c2-disclosure.c2-submenu-open > .wp-block-navigation__submenu-container {
    display: block !important;
}

/* Accordion mode: animated; collapsed content is hidden (and inert via JS) */
.wp-block-navigation__responsive-container.c2-accordion .c2-disclosure > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.c2-accordion .c2-disclosure:not(.c2-submenu-open) > .wp-block-navigation__submenu-container {
    display: block !important;
    overflow: hidden !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    visibility: hidden;
    transition: max-height 0.4s ease, visibility 0s linear 0.4s !important;
}

.wp-block-navigation__responsive-container.c2-accordion .c2-disclosure.c2-submenu-open > .wp-block-navigation__submenu-container {
    max-height: 2000px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    visibility: visible;
    transition: max-height 0.4s ease, visibility 0s linear 0s !important;
}

/* The original list is hidden while the mega layout is shown */
.wp-block-navigation__responsive-container .wp-block-navigation__container[hidden] {
    display: none !important;
}

/* Dark/Light Theme Support */
@media (prefers-color-scheme: dark) {
    .c2-burger-toggler {
        color: #fff;
    }
}

@media (prefers-color-scheme: light) {
    .c2-burger-toggler {
        color: #000;
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .ham {
        width: 32px;
        height: 32px;
    }

    .c2-burger-caption-text {
        font-size: 12px;
    }

    .c2-overlay-menu .menu a {
        font-size: 20px;
    }

    /* Fullscreen overlay responsive */
    .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        font-size: 20px !important;
        padding: 10px 15px !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   Mega Menu Layout
   Applied when overlay_layout = 'mega'. JS adds .c2-mega-mode to the overlay
   and replaces the inner nav structure with .c2-mega-layout.
   ========================================================================== */

/* Reset the overlay's centred-flex so content fills the full height */
.wp-block-navigation__responsive-container.c2-mega-mode {
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.wp-block-navigation__responsive-container.c2-mega-mode
    .wp-block-navigation__responsive-close {
    height: 100% !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.wp-block-navigation__responsive-container.c2-mega-mode
    .wp-block-navigation__responsive-dialog {
    height: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.wp-block-navigation__responsive-container.c2-mega-mode
    .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 80px 60px 48px !important; /* top gap clears the burger button */
    flex: 1 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

/* --------------------------------------------------------------------------
   Mega layout wrapper
   -------------------------------------------------------------------------- */
.c2-mega-layout[hidden] {
    display: none !important;
}

.c2-mega-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Horizontal tab row (parent items)
   -------------------------------------------------------------------------- */
.c2-mega-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    border-bottom: 2px solid #cccccc;
    flex-shrink: 0;
}

.c2-mega-tab {
    margin: 0;
    display: flex;      /* lets both child types stretch to the same row height */
    align-items: stretch;
}

.c2-mega-tab-btn,
.c2-mega-tab-link {
    display: flex;
    align-items: center;
    padding: 14px 28px;
    background: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 18px;
    font-family: inherit;  /* buttons don't inherit font-family by default */
    font-weight: 500;
    line-height: inherit;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Strip remaining browser button chrome that differs from <a> */
.c2-mega-tab-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.c2-mega-tab-btn::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 8px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.c2-mega-tab-btn[aria-expanded="true"]::after {
    transform: rotate(-135deg);
}

.c2-mega-tab-btn:hover,
.c2-mega-tab-link:hover,
.c2-mega-tab-btn[aria-expanded="true"] {
    color: #8c0013;
    text-decoration: none;
}

.c2-mega-tab-btn:focus-visible,
.c2-mega-tab-link:focus-visible,
.c2-mega-grid-item a:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: -4px;
}

/* --------------------------------------------------------------------------
   Panel area (below the tab row)
   -------------------------------------------------------------------------- */
.c2-mega-panel-area {
    flex: 1;
    padding-top: 36px;
    overflow-y: auto;
}

.c2-mega-panel {
    display: none;
}

.c2-mega-panel.is-active {
    display: block;
    animation: c2MegaFadeIn 0.18s ease;
}

@keyframes c2MegaFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   4-column grid of child items
   -------------------------------------------------------------------------- */
.c2-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.c2-mega-grid-item a {
    display: block;
    padding: 14px 18px;
    color: inherit;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.c2-mega-grid-item a:hover {
    color: #8c0013;
    background-color: rgba(140, 0, 19, 0.06);
}

/* --------------------------------------------------------------------------
   Responsive: collapse grid on smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .wp-block-navigation__responsive-container.c2-mega-mode
        .wp-block-navigation__responsive-container-content {
        padding: 72px 32px 40px !important;
    }
}

@media (max-width: 768px) {
    .c2-mega-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .c2-mega-tab-btn,
    .c2-mega-tab-link {
        padding: 12px 18px;
        font-size: 15px;
    }

    .wp-block-navigation__responsive-container.c2-mega-mode
        .wp-block-navigation__responsive-container-content {
        padding: 64px 20px 32px !important;
    }
}

@media (max-width: 480px) {
    .c2-mega-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Sliding view (setting "Submenu display" = "Sliding view")
   While the Default layout is active, JS adds .c2-slide-mode to the overlay,
   hides the original list and shows .c2-slide-layout instead: one level per
   submenu, of which only .is-current is visible (the others are inert).
   Levels to the left of the current one have .is-before.
   Custom properties: --c2-slide-max-width, --c2-slide-duration,
   --c2-slide-offset-bottom, --c2-slide-offset-top (set by JS: bottom edge
   of the burger button).
   ========================================================================== */

/* Top-aligned instead of vertically centred: levels of different height must
   not move the area, and long levels scroll inside the overlay. */
.wp-block-navigation__responsive-container.c2-slide-mode {
    justify-content: flex-start !important;
    /* A scrollbar that appears for a long level must not shift the area */
    scrollbar-gutter: stable;
    /* Swiping past the end of a long level must not scroll the page behind */
    overscroll-behavior: contain;
}

.wp-block-navigation__responsive-container.c2-slide-mode .wp-block-navigation__responsive-close {
    height: auto !important;
    align-items: flex-start !important;
}

.wp-block-navigation__responsive-container.c2-slide-mode .wp-block-navigation__responsive-dialog {
    height: auto !important;
    justify-content: flex-start !important;
    padding-top: calc(var(--c2-slide-offset-top, 5rem) + 16px) !important;
    /* room below the last item, e.g. for a fixed bar at the bottom of the page */
    padding-bottom: var(--c2-slide-offset-bottom, 96px) !important;
}

.wp-block-navigation__responsive-container.c2-slide-mode .wp-block-navigation__responsive-container-content {
    justify-content: flex-start !important;
}

.c2-slide-layout[hidden] {
    display: none !important;
}

.c2-slide-layout {
    --c2-slide-inset: 20px;
    width: 100%;
    max-width: var(--c2-slide-max-width, 36rem);
    text-align: left;
}

.wp-block-navigation__responsive-container .c2-slide-layout .wp-block-navigation-item__content {
    box-sizing: border-box;
    max-width: 100%;
    padding-left: var(--c2-slide-inset) !important;
    padding-right: var(--c2-slide-inset) !important;
}

.c2-slide-track {
    position: relative;
    overflow: hidden;
    overflow: clip;
}

.c2-slide-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--c2-slide-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear var(--c2-slide-duration, 0.35s);
}

.c2-slide-level.is-before {
    transform: translateX(-100%);
}

/* The current level defines the height of the area */
.c2-slide-level.is-current {
    position: relative;
    transform: none;
    visibility: visible;
    transition: transform var(--c2-slide-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s;
}

.c2-slide-instant .c2-slide-level {
    transition: none !important;
}

.c2-slide-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wp-block-navigation__responsive-container .c2-slide-layout .wp-block-navigation-item {
    width: 100% !important;
    text-align: left !important;
}

/* Main item with a submenu: the whole row opens the submenu level */
.wp-block-navigation__responsive-container .c2-slide-layout .c2-slide-next {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    border: none;
    font-family: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}

.c2-slide-next::after,
.c2-slide-back::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.c2-slide-next::after {
    margin-left: auto;
    transform: rotate(-45deg);
}

.c2-slide-back::before {
    transform: rotate(135deg);
}

/* Submenu level: back button, heading, parent page, items */
.wp-block-navigation__responsive-container .c2-slide-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0 0 8px;
    padding: 8px var(--c2-slide-inset);
    background: transparent;
    border: none;
    color: #4c4e4e;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.wp-block-navigation__responsive-container .c2-slide-back:hover {
    color: #8c0013;
}

.wp-block-navigation__responsive-container .c2-slide-heading {
    margin: 0 !important;
    padding: 4px var(--c2-slide-inset) 8px;
    color: #4c4e4e;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
}

.wp-block-navigation__responsive-container .c2-slide-panel .c2-slide-list .wp-block-navigation-item__content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 20px !important;
}

/* !important: other plugins reset `:focus { outline: 0 !important }` globally */
.wp-block-navigation__responsive-container .c2-slide-back:focus,
.wp-block-navigation__responsive-container .c2-slide-next:focus {
    outline: none;
}

.wp-block-navigation__responsive-container .c2-slide-back:focus-visible,
.wp-block-navigation__responsive-container .c2-slide-next:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: -4px;
}

@media (max-width: 768px) {
    .c2-slide-layout {
        --c2-slide-inset: 15px;
    }

    .wp-block-navigation__responsive-container .c2-slide-heading {
        font-size: 24px;
    }

    .wp-block-navigation__responsive-container .c2-slide-panel .c2-slide-list .wp-block-navigation-item__content {
        font-size: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c2-slide-level,
    .c2-slide-level.is-current,
    .wp-block-navigation__responsive-container .c2-slide-layout .wp-block-navigation-item {
        transition: none !important;
    }
}