/* ============================================================
   rw-offcanvas-nav
   ============================================================

   EVERY VALUE HERE COMES FROM A CUSTOM PROPERTY, and that is the whole
   architecture. A theme themes this panel by ASSIGNING --rw-nav-* properties,
   never by out-specifying these selectors — the same arrangement the Gravity
   Forms theme layer uses, and for the same reason: a plugin that has to be
   beaten with specificity generates hundreds of lines of override CSS on every
   site that installs it. The plugin this replaces needed 168 such lines.

   The defaults below are a complete, shippable design. A site that assigns
   nothing still gets a working panel. A site with its own palette assigns four
   or five properties in one place.

   Nothing here uses !important, and nothing here touches an element the plugin
   did not render.
   ============================================================ */

.rw-offcanvas-panel {
    /* Panel */
    --rw-nav-bg:              #001624;
    --rw-nav-width:           320px;
    --rw-nav-shadow:          0 0 15px rgba(0, 0, 0, 0.6);
    --rw-nav-speed:           0.3s;
    --rw-nav-scrim:           rgba(0, 0, 0, 0.5);

    /* Logo block */
    --rw-nav-logo-max:        140px;
    --rw-nav-logo-padding:    30px 25px;

    /* Menu items */
    --rw-nav-item-bg:         #01385b;
    --rw-nav-item-bg-hover:   #146297;
    --rw-nav-item-bg-current: #df0b29;
    --rw-nav-item-color:      #ffffff;
    --rw-nav-item-size:       16px;
    --rw-nav-item-weight:     400;
    --rw-nav-item-padding:    11px 20px 13px;
    --rw-nav-item-gap:        1px;
    --rw-nav-subitem-size:    15px;
    --rw-nav-subitem-indent:  35px;

    /* Submenu toggle */
    --rw-nav-toggle-width:    52px;

}


/* ── Panel ───────────────────────────────────────────────────
   A modal <dialog> is centred and auto-sized by default, so becoming a
   full-height edge panel is entirely this rule's job. `margin: 0 0 0 auto`
   pins it right; swapping that to `0 auto 0 0` is the whole of a left-edge
   variant, should one ever be wanted.

   100dvh rather than 100vh: on mobile Safari, vh includes the area behind the
   collapsing address bar, so a 100vh panel is taller than the screen and its
   last menu item sits under the chrome. */
.rw-offcanvas-panel {
    width: min(var(--rw-nav-width), 85vw);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    background-color: var(--rw-nav-bg);
    box-shadow: var(--rw-nav-shadow);
    overflow: hidden;
}

.rw-offcanvas-panel__inner {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* This container carries tabindex="-1" and autofocus (see render.php) purely so
   focus lands on the panel rather than on the first menu item. It is never
   reachable by keyboard, so a ring on it is noise rather than an affordance —
   and drawing one would just relocate the "first thing looks selected" problem
   from the link to the panel. */
.rw-offcanvas-panel__inner:focus {
    outline: none;
}

/* The scrim. A pseudo-element of the dialog, so there is no overlay div to
   render, position, or keep in sync with the panel's open state. */
.rw-offcanvas-panel::backdrop {
    background-color: var(--rw-nav-scrim);
}


/* ── Open and close animation ────────────────────────────────
   A <dialog> toggles `display`, which is not an animatable property, so
   transitioning one in needs `allow-discrete` plus a @starting-style block
   giving the state to animate FROM. Both are recent: Chrome 117+,
   Safari 17.4+, Firefox 129+.

   OLDER BROWSERS GET NO SLIDE — the panel appears and disappears. That is
   deliberate and documented rather than papered over with a library: the panel
   is fully usable either way, and every part of it that matters (focus trap,
   Esc, inert background) is unaffected. */
.rw-offcanvas-panel,
.rw-offcanvas-panel::backdrop {
    transition:
        translate var(--rw-nav-speed) ease,
        opacity var(--rw-nav-speed) ease,
        overlay var(--rw-nav-speed) allow-discrete,
        display var(--rw-nav-speed) allow-discrete;
}

.rw-offcanvas-panel {
    translate: 100% 0;
}

.rw-offcanvas-panel::backdrop {
    opacity: 0;
}

.rw-offcanvas-panel[open] {
    translate: 0 0;
}

.rw-offcanvas-panel[open]::backdrop {
    opacity: 1;
}

@starting-style {
    .rw-offcanvas-panel[open] {
        translate: 100% 0;
    }

    .rw-offcanvas-panel[open]::backdrop {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-offcanvas-panel,
    .rw-offcanvas-panel::backdrop {
        transition: none;
    }
}


/* ── Logo block ──────────────────────────────────────────────
   Centred and capped. The image is rendered by wp_get_attachment_image, so it
   arrives with width/height attributes — height: auto alongside max-width is
   what stops those attributes squashing it. */
.rw-offcanvas-panel__head {
    padding: var(--rw-nav-logo-padding);
    text-align: center;
}

.rw-offcanvas-panel__logo {
    display: inline-block;
    max-width: var(--rw-nav-logo-max);
    height: auto;
}


/* ── Menu ────────────────────────────────────────────────────
   Rows are separated by --rw-nav-item-gap of the panel ground showing through,
   not by a border — which is why the ground is darker than the rows. One gap
   property changes the whole rhythm.

   Font family is deliberately NOT declared. The panel inherits the site's
   type, so this looks native on every theme it is installed on rather than
   importing an opinion. */
.rw-offcanvas-menu,
.rw-offcanvas-menu .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A row is a two-column grid: link, then toggle. Static positioning, and that
   matters — the toggle was absolutely positioned at height: 100% of the <li>,
   and since the <li> also contains the submenu, opening the accordion stretched
   the button down the whole panel and took its chevron with it. As a grid cell
   the button is exactly the height of its own row and cannot do that.

   Items with no children have no second cell, so the link spans both. */
.rw-offcanvas-menu .menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 0 0 var(--rw-nav-item-gap);
}

.rw-offcanvas-menu__link {
    grid-column: 1 / -1;
    display: block;
    padding: var(--rw-nav-item-padding);
    background-color: var(--rw-nav-item-bg);
    color: var(--rw-nav-item-color);
    font-size: var(--rw-nav-item-size);
    font-weight: var(--rw-nav-item-weight);
    text-transform: capitalize;
    text-decoration: none;
    transition: background-color var(--rw-nav-speed) ease-in-out;
}

.rw-offcanvas-menu .menu-item-has-children > .rw-offcanvas-menu__link {
    grid-column: 1;
}

/* NEUTRALISING THE THEME'S GLOBAL LINK STATES IS NOT OPTIONAL.
   Almost every theme carries something like

       a:hover, a:focus { color: …; text-decoration: underline; }

   which is 0-1-1 and therefore OUTRANKS the base rule above at 0-1-0. The
   symptom: showModal() moves focus to the first focusable element, so the
   moment the panel opens the first menu item renders in the theme's link
   colour with an underline — on this site, dark navy on the red current-item
   row. Observed exactly that.

   :focus is listed separately from :focus-visible on purpose. Programmatic
   focus (which is what showModal() does) frequently does not match
   :focus-visible, while the theme's plain a:focus matches regardless — so
   :focus-visible alone does not close the hole. This rule only resets the
   inherited colour and underline; it deliberately does NOT change the
   background, because a mouse click would otherwise leave the row stuck in a
   hover state after the pointer has gone.

   At 0-2-0 these beat a bare a:hover/a:focus. A theme that genuinely wants to
   restyle these states needs two classes to do it — see README. */
.rw-offcanvas-menu__link:hover,
.rw-offcanvas-menu__link:focus,
.rw-offcanvas-menu__link:focus-visible,
.rw-offcanvas-menu__link:active {
    color: var(--rw-nav-item-color);
    text-decoration: none;
}

/* The actual hover affordance, kept to the two states that should show it. */
.rw-offcanvas-menu__link:hover,
.rw-offcanvas-menu__link:focus-visible {
    background-color: var(--rw-nav-item-bg-hover);
}

/* The current row keeps its own ground through every state — without this the
   hover rule above would repaint the accent row on hover, which reads as the
   selection moving. */
.rw-offcanvas-menu .current-menu-item > .rw-offcanvas-menu__link:hover,
.rw-offcanvas-menu .current-menu-item > .rw-offcanvas-menu__link:focus-visible {
    background-color: var(--rw-nav-item-bg-current);
}

.rw-offcanvas-menu .current-menu-item > .rw-offcanvas-menu__link,
.rw-offcanvas-menu .current-menu-ancestor > .rw-offcanvas-menu__link {
    background-color: var(--rw-nav-item-bg-current);
}


/* ── Submenu toggle ──────────────────────────────────────────
   Second cell of the row grid. The divider is the panel ground showing
   through, matching the gap between rows. */
.rw-offcanvas-menu__toggle {
    grid-column: 2;
    width: var(--rw-nav-toggle-width);
    padding: 0;
    border: 0;
    border-left: var(--rw-nav-item-gap) solid var(--rw-nav-bg);
    background-color: var(--rw-nav-item-bg);
    color: var(--rw-nav-item-color);
    cursor: pointer;
    transition: background-color var(--rw-nav-speed) ease-in-out;
}

.rw-offcanvas-menu__toggle:hover,
.rw-offcanvas-menu__toggle:focus-visible {
    background-color: var(--rw-nav-item-bg-hover);
}

/* Drawn rather than an icon font: ShiftNav pulled in the whole of Font Awesome
   for two chevrons and a hamburger. This is a rotated border. */
.rw-offcanvas-menu__chevron {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: -45deg;
    translate: -2px 0;
    transition: rotate var(--rw-nav-speed) ease;
}

.rw-offcanvas-menu__toggle[aria-expanded="true"] .rw-offcanvas-menu__chevron {
    rotate: 45deg;
    translate: 0 -2px;
}


/* ── Submenu ─────────────────────────────────────────────────
   Closed by default and opened by the button's aria-expanded, so the ATTRIBUTE
   is the state — there is no separate class that could drift out of step with
   what assistive technology is told.

   THE GRID GOES ON THE WRAPPER, NOT THE <ul>. grid-template-rows: 0fr collapses
   only the first row, so applying it straight to a <ul> of three <li> hides
   item one and leaves the other two visible. The wrapper has exactly one child,
   which is what makes 0fr mean "all of it". Animating to 1fr then resolves to
   the content's own height, which height: auto cannot do. */
.rw-offcanvas-submenu {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--rw-nav-speed) ease;
}

.rw-offcanvas-submenu > .sub-menu {
    overflow: hidden;
    min-height: 0;
}

.rw-offcanvas-menu__toggle[aria-expanded="true"] + .rw-offcanvas-submenu {
    grid-template-rows: 1fr;
    margin-top: var(--rw-nav-item-gap);
}

.rw-offcanvas-submenu .rw-offcanvas-menu__link {
    padding-left: var(--rw-nav-subitem-indent);
    font-size: var(--rw-nav-subitem-size);
}

@media (prefers-reduced-motion: reduce) {
    .rw-offcanvas-submenu,
    .rw-offcanvas-menu__chevron {
        transition: none;
    }
}


/* ── Toggle button ───────────────────────────────────────────
   THE ICON IS AN SVG AND THE BUTTON HAS A REAL BOX. Both halves of that matter,
   and the original had neither.

   It used to be three CSS bars: the icon element WAS the middle bar (24x3px)
   with the outer two absolutely positioned at -7px and +7px — outside the
   element, and therefore outside the button, which had `padding: 0`. So the
   button's hit area was 24x3px. The pointer fell off it in the gaps between the
   bars, and on a touch screen it failed WCAG 2.5.8 (24x24 minimum) by an order
   of magnitude while LOOKING like a normal 24x17 icon.

   An SVG has honest bounds — its element box is the drawing — so that class of
   mismatch cannot come back. The fixed button size is separate and deliberate:
   the tap target should not silently shrink if the bar metrics change.

   currentColor on the stroke means a site colours this by setting `color` on
   the button and nothing else. */
.rw-offcanvas-toggle {
    /* DECLARED HERE, NOT IN THE PANEL BLOCK. The toggle lives in the theme's
       header and the panel is printed at the end of the document — they are
       siblings, not ancestor and descendant. Custom properties inherit DOWN
       the tree, so anything declared on .rw-offcanvas-panel can never reach
       this button. Declaring them on the element that uses them keeps each
       part self-contained, and a theme overrides them the same way: at
       0-1-0 on this same selector, winning on load order.

       The SIZE is the tap target and 44px is the floor, not a look. Shrink it
       only if a header genuinely cannot fit it. */
    --rw-nav-burger-size:  44px;
    --rw-nav-burger-width: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rw-nav-burger-size);
    height: var(--rw-nav-burger-size);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* height: auto with the viewBox's 24x17 ratio, so the bars keep their 3px
   weight and 7px spacing at the default width and scale proportionally if a
   site changes it. */
.rw-offcanvas-toggle__icon {
    display: block;
    width: var(--rw-nav-burger-width);
    height: auto;
}


/* ── Screen-reader text ──────────────────────────────────────
   The plugin ships its own rather than relying on the theme having one: this
   has to work on 150 themes, and .screen-reader-text is a convention, not a
   guarantee. */
/* No !important, unlike core's .screen-reader-text. Core needs it because that
   class is public API that themes fight over; this one is private to the
   plugin and nothing else targets it. */
.rw-offcanvas-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}