/* =========================================
   Editorly — Header Styles CSS (1-6)
   ========================================= */

.site-header {
    background: var(--ed-header-bg, #fff);
    border-bottom: 1px solid var(--ed-border, #eee);
}

/* ---- Header Extras: Social Icons / Language Switcher / CTA Button ---- */
.header-extras {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 20px;
}

.header-social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-social-icons a {
    color: var(--ed-text, #222);
    display: flex;
}

.header-social-icons a:hover {
    color: var(--ed-primary, #e8174d);
}

.header-social-icons .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.header-language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    font-weight: 600;
}

.header-language-switcher a {
    color: var(--ed-text-muted, #6b6b6b);
    text-decoration: none;
}

.header-language-switcher a.is-active,
.header-language-switcher a:hover {
    color: var(--ed-primary, #e8174d);
}

.header-cta-button {
    background: var(--ed-primary, #e8174d);
    color: #fff;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9em;
    text-decoration: none;
    white-space: nowrap;
}

.header-cta-button:hover {
    opacity: 0.85;
    color: #fff;
}

/* "Simplify Mobile Header" follows the chosen breakpoint: on a site set to
   1024px the header has already become its mobile form on tablets, so the
   extras should step aside there too. */
@media (max-width: 782px) {
    .header-extras.hide-on-mobile {
        display: none;
    }
}

@media (min-width: 783px) and (max-width: 1024px) {
    body.nav-breakpoint-1024 .header-extras.hide-on-mobile {
        display: none;
    }
}

/* ---- Top Bar (independent of the Header Style) ---- */
.editorly-top-bar {
    background: var(--ed-topbar-bg, #1a1a1a);
    color: var(--ed-topbar-text, #fff);
    font-size: 0.85em;
    min-height: var(--ed-topbar-height, 38px);
    display: flex;
    align-items: center;
}

.editorly-top-bar-inner {
    width: 100%;
    margin: 0;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    box-sizing: border-box;
}

.editorly-top-bar-contact {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.top-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ed-topbar-text, #fff);
    opacity: 0.85;
    text-decoration: none;
}

.top-bar-item:hover {
    color: var(--ed-topbar-text, #fff);
    opacity: 1;
}

.top-bar-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.editorly-top-bar-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.editorly-top-bar-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.editorly-top-bar-social a {
    color: var(--ed-topbar-text, #fff);
    opacity: 0.85;
    display: flex;
}

.editorly-top-bar-social a:hover {
    color: var(--ed-topbar-text, #fff);
    opacity: 1;
}

.editorly-top-bar-social .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.editorly-top-bar-woo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.editorly-top-bar-woo a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ed-topbar-text, #fff);
    opacity: 0.85;
    text-decoration: none;
}

.editorly-top-bar-woo a:hover {
    color: var(--ed-topbar-text, #fff);
    opacity: 1;
}

.editorly-top-bar-woo .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.top-bar-cart-count {
    opacity: 0.75;
}

@media (max-width: 782px) {
    .editorly-top-bar-inner {
        justify-content: center;
        text-align: center;
    }

    .editorly-top-bar-contact,
    .editorly-top-bar-right {
        justify-content: center;
    }
}

/* Sticky Header: a JS-toggled position:fixed (class .is-stuck) rather than CSS
   position:sticky, to avoid the well-known problems sticky positioning has
   inside nested flexbox containers, which our sticky-footer layout uses. The
   JS (main.js) adds and removes the class on scroll and inserts a spacer div
   of matching height so the content does not jump upwards. */
.has-sticky-header .site-header:not(.header-transparent) {
    transition: box-shadow 0.2s ease;
}

.has-sticky-header .site-header.is-stuck:not(.header-transparent) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* The WordPress admin bar (#wpadminbar) is position:fixed; top:0 and is 32px
   tall on desktop, 46px on mobile. Without this offset the sticky header would
   hide behind or below it when an admin is logged in. */
body.admin-bar .has-sticky-header .site-header.is-stuck:not(.header-transparent) {
    top: 32px;
}

@media (max-width: 782px) {
    /*
     * No admin bar offset on phones. WordPress switches #wpadminbar to
     * position:absolute below 782px, so it scrolls away with the page; a fixed
     * element compensating for a bar that is no longer there ends up floating
     * below the top of the screen. Absolutely positioned elements still need
     * the offset, because they sit in the document flow beneath the bar.
     */
    body.admin-bar .has-sticky-header .site-header.is-stuck:not(.header-transparent) {
        top: 0;
    }
}

/* Height and visibility are set dynamically by the JS (main.js); this is just
   the baseline so it cannot pick up stray CSS from elsewhere. */
.editorly-header-spacer {
    display: none;
    width: 100%;
}

.header-inner {
    /* Follows the site container by default, or its own wider limit when the
       header is set to full width. One variable either way, so the header
       styles below need no branch of their own. */
    max-width: var(--ed-header-max-width, var(--ed-container, 1140px));
    margin: 0 auto;
    padding: var(--ed-header-height, 16px) 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-navigation ul {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    text-decoration: none;
    color: inherit;
}

.menu-toggle {
    display: none;
    background: none;
    border: 1px solid #ccc;
    padding: 6px 12px;
    cursor: pointer;
}

/* ---- Style 1: Classic (the default layout) ---- */
.header-style-1 .header-inner {
    justify-content: space-between;
}

/* ---- Style 2: Centered ---- */
.header-style-2 .header-centered {
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.header-style-2 .header-centered .header-extras {
    position: absolute;
    top: 8px;
    right: 20px;
    margin-left: 0;
}

@media (max-width: 782px) {
    .header-style-2 .header-centered .header-extras {
        position: static;
        top: auto;
        right: auto;
        margin-top: 8px;
    }
}

.header-style-2 .nav-centered ul {
    justify-content: center;
}

/* ---- Style 3: Left aligned + search icon ---- */
.header-style-3 .header-inner {
    justify-content: space-between;
}

.header-style-3 .header-left {
    display: flex;
    align-items: center;
    gap: 32px;
}

.header-style-3 .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
}

.header-search-form {
    max-width: var(--ed-container, 1140px);
    margin: 0 auto;
    padding: 0 20px 16px;
}

.header-search-form[hidden] {
    display: none;
}

/* ---- Style 4: Minimal + Offcanvas ---- */
.header-style-4 .header-inner {
    justify-content: space-between;
}

.editorly-hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 18px;
}

.editorly-hamburger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
}

.minimal-toggle {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.offcanvas-navigation {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--ed-mobile-menu-width, 300px);
    height: 100%;
    /* A slide-out panel is a fixed-height box, so a menu taller than the screen
       has to scroll inside it. Without this the items below the fold were
       simply unreachable. overscroll-behavior stops a swipe that reaches the
       end of the list from dragging the page behind the panel. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--ed-panel-bg, #fff);
    /*
     * A full-screen navigation panel belongs near the top of the stacking
     * order: while it is open it is the only thing the visitor can interact
     * with, so nothing should sit over it. At the previous value of 1000 any
     * floating element from a plugin — a greeting bar, a chat bubble, a cookie
     * notice — landed on top of the menu.
     *
     * The scale itself now lives in the :root token block in main.css, as
     * --ed-z-* custom properties, so the layers can no longer drift apart the
     * way this panel and its overlay once did. Reading order there, highest
     * first: skip link, menu close button, header while the menu is open,
     * offcanvas panel, offcanvas overlay. Below them sit the reading progress
     * and sticky title bars (9999) and the sticky header (1002), which are far
     * enough away not to need tokens.
     */
    z-index: var(--ed-z-offcanvas-panel);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.offcanvas-navigation.is-open {
    transform: translateX(0);
}

.offcanvas-inner {
    padding: 30px 24px;
}

.offcanvas-inner ul {
    flex-direction: column;
    gap: 16px;
}

.offcanvas-close {
    background: none;
    border: none;
    font-size: 1.6em;
    cursor: pointer;
    margin-bottom: 20px;
}

.offcanvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    /* Directly beneath the panel, above everything else. */
    z-index: var(--ed-z-offcanvas-overlay);
    display: none;
}

body.admin-bar .offcanvas-navigation,
body.admin-bar .offcanvas-overlay {
    top: 32px;
}

@media (max-width: 782px) {
    /* Both are position:fixed, so no admin bar offset on phones — see the note
       above the sticky header rule. */
    body.admin-bar .offcanvas-navigation,
    body.admin-bar .offcanvas-overlay {
        top: 0;
    }
}

.offcanvas-overlay.is-visible {
    display: block;
}

/* ---- Style 5: Magazine (top bar + main nav) ---- */
.header-topbar {
    background: #222;
    color: #fff;
    font-size: 0.85em;
}

.topbar-inner {
    max-width: var(--ed-container, 1140px);
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-social {
    display: flex;
    gap: 12px;
}

.topbar-social a {
    color: #fff;
    text-decoration: none;
}

.header-style-5 .header-main .header-inner {
    justify-content: space-between;
}

/* ---- Style 6: Transparent overlay ---- */
.header-style-6.header-transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: none;
    z-index: 100;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.header-style-6 .header-inner {
    transition: padding 0.25s ease;
}

.header-style-6 .site-title a,
.header-style-6 .main-navigation a {
    color: #fff;
}

/* Extra breathing room only for Style 6: as a floating/transparent overlay
   it needs more vertical space than the in-flow styles (1-5), which already
   get their spacing from the global --ed-header-height option. We add this
   on top of that option instead of raising it globally, so Styles 1-5 stay
   unaffected. */
.header-style-6 .header-inner {
    padding-top: calc(var(--ed-header-height, 16px) + 20px);
    padding-bottom: calc(var(--ed-header-height, 16px) + 20px);
}

/* Once stuck/solid, collapse back to the same compact height Styles 1-5 use —
   the extra breathing room above was only meant for the initial state where
   the header floats over a large hero, not for a normal solid sticky bar. */
.header-style-6.header-scrolled .header-inner {
    padding-top: var(--ed-header-height, 16px);
    padding-bottom: var(--ed-header-height, 16px);
}

.header-style-6.header-scrolled {
    position: fixed;
    background: var(--ed-header-bg, #fff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

body.admin-bar .header-style-6.header-transparent,
body.admin-bar .header-style-6.header-scrolled {
    top: 32px;
}

@media (max-width: 782px) {
    /* The transparent state is position:absolute, so it sits in the document
       below the admin bar and still needs the offset. */
    body.admin-bar .header-style-6.header-transparent:not(.header-scrolled) {
        top: 46px;
    }

    /* The scrolled state is position:fixed, so it does not. */
    body.admin-bar .header-style-6.header-scrolled {
        top: 0;
    }
}

/* The transparent/floating Style 6 ignores normal document flow by design
   (position:absolute). When a Top Bar is present the header has to be pushed
   below it, otherwise the two overlap completely.
   CAUTION #1: this must NOT apply to .header-scrolled, the stuck/fixed state.
   The Top Bar is not fixed, so once the page is scrolled and the header
   sticks, the Top Bar has already left the viewport.
   CAUTION #2: the .header-transparent class is NEVER removed; the JS simply
   adds .header-scrolled alongside it. A selector such as
   ".header-style-6.header-transparent" therefore also matches the header in
   its scrolled state, whatever class list is written. An explicit
   :not(.header-scrolled) is required, or the same permanent gap comes back. */
body.has-top-bar .header-style-6.header-transparent:not(.header-scrolled) {
    top: var(--ed-topbar-height, 38px);
}

body.admin-bar.has-top-bar .header-style-6.header-transparent:not(.header-scrolled) {
    top: calc(32px + var(--ed-topbar-height, 38px));
}

@media (max-width: 782px) {
    body.admin-bar.has-top-bar .header-style-6.header-transparent:not(.header-scrolled) {
        top: calc(46px + var(--ed-topbar-height, 38px));
    }
}

.header-style-6.header-scrolled .site-title a,
.header-style-6.header-scrolled .main-navigation a {
    color: #222;
}

/* ---- Site Branding: Mobile Logo / Sticky Logo swap ----
   CSS-only, so it works the same regardless of caching/CDN setup — no
   user-agent sniffing, no extra requests beyond the images already output. */
.site-logo-mobile,
.site-logo-sticky {
    display: none;
}

.site-logo-mobile img,
.site-logo-sticky img {
    max-height: 40px;
    width: auto;
}

@media (max-width: 782px) {
    .site-branding .site-logo-mobile {
        display: inline-block;
    }

    .site-branding .site-logo-desktop {
        display: none;
    }
}

.site-header.is-stuck .site-branding .site-logo-sticky,
.site-header.header-scrolled .site-branding .site-logo-sticky {
    display: inline-block;
}

.site-header.is-stuck .site-branding .site-logo-desktop,
.site-header.header-scrolled .site-branding .site-logo-desktop {
    display: none;
}

/* When both mobile and sticky rules would apply at once, the Sticky Logo wins.
   It is usually the more deliberate choice, a dark variant over a solid
   background for instance, than the general mobile fallback. */
@media (max-width: 782px) {
    .site-header.is-stuck .site-branding .site-logo-mobile,
    .site-header.header-scrolled .site-branding .site-logo-mobile {
        display: none;
    }

    .site-header.is-stuck .site-branding .site-logo-sticky,
    .site-header.header-scrolled .site-branding .site-logo-sticky {
        display: inline-block;
    }
}

/* ---- Site Branding: Dark Mode Logo ----
   The same CSS-only pattern as the Mobile/Sticky Logo above, driven by the
   data-editorly-scheme attribute (see inc/dark-mode.php). It comes AFTER the
   mobile and sticky rules so it wins at equal specificity when both apply,
   for example dark mode and a stuck header at the same time. */
.site-logo-dark-mode {
    display: none;
}

.site-logo-dark-mode img {
    max-height: 40px;
    width: auto;
}

html[data-editorly-scheme="dark"] .site-branding .site-logo-dark-mode {
    display: inline-block;
}

html[data-editorly-scheme="dark"] .site-branding .site-logo-desktop,
html[data-editorly-scheme="dark"] .site-branding .site-logo-mobile,
html[data-editorly-scheme="dark"] .site-branding .site-logo-sticky {
    display: none !important;
}

@media (max-width: 782px) {
    html[data-editorly-scheme="dark"] .site-branding .site-logo-dark-mode {
        display: inline-block;
    }
}

/* ---- Style 6: Hero background the transparent header floats over ---- */
.editorly-style6-hero {
    position: relative;
    min-height: 60vh;
    background: linear-gradient( 135deg, var( --editorly-primary-color, #0073aa ) 0%, var( --ed-secondary, #1a1a2e ) 100% );
}

.editorly-style6-hero.has-image {
    background-image: var( --ed-style6-hero-image );
    background-size: cover;
    background-position: center;
}

/* Darkening overlay only when there's a real photo, so white header/nav text
   stays readable regardless of how bright the uploaded photo is. */
.editorly-style6-hero.has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba( 0, 0, 0, 0.35 );
}

@media (max-width: 782px) {
    .editorly-style6-hero {
        min-height: 45vh;
    }
}

/* ---- Responsive (all styles) ---- */
@media (max-width: 782px) {
    .main-navigation ul {
        display: none;
    }

    .menu-toggle {
        display: inline-block;
    }

    .header-style-4 .main-navigation ul {
        display: flex;
    }

    .header-style-3 .header-left {
        gap: 16px;
    }
}

/* =========================================
   Offcanvas submenus at any width
   =========================================
   Header Style 4 uses its offcanvas panel on desktop as well, not only on
   phones. Inside a slide-out panel there is no hover to open a submenu: the
   parent item is clicked and the script sets .is-expanded on it.

   Those rules previously lived only inside the mobile media query, so at
   desktop width a submenu in the offcanvas panel stayed at opacity 0 and
   visibility hidden and could never be opened — including a mega menu panel
   holding an Elementor template, which rendered into the page with its content
   intact and was simply never shown.
   ========================================= */

.offcanvas-navigation .sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding-left: var(--ed-space-sm);
    min-width: 0;
    width: auto;
}

.offcanvas-navigation li.is-expanded > .sub-menu {
    display: block;
}

/* A mega menu panel inside the offcanvas is a plain block: the Elementor
   template inside controls its own layout, and the full-width positioning used
   on a horizontal menu bar makes no sense in a narrow slide-out panel. */
.offcanvas-navigation li.has-mega-menu > .sub-menu.mega-menu-template {
    position: static;
    left: auto;
    width: auto;
    max-width: 100%;
    padding: 0;
    /* No scroll of its own: the offcanvas panel around it already scrolls, and
       a scroller inside a scroller gives two scrollbars and a panel that traps
       the swipe halfway down. */
    max-height: none;
    overflow: visible;
}

/* Hover must not open anything here — the panel is click-driven, and a stray
   hover-open would fight the accordion. */
.offcanvas-navigation li:hover > .sub-menu {
    display: none;
}

.offcanvas-navigation li.is-expanded:hover > .sub-menu {
    display: block;
}

/* ---- Offcanvas submenu toggle button ----
   Added by the script beside each parent item. It carries the arrow so the
   parent link itself is left alone: the link still goes to its page, and the
   submenu has its own control. */
.offcanvas-navigation li.menu-item-has-children {
    position: relative;
}

.offcanvas-navigation .submenu-toggle {
    position: absolute;
    top: 4px;
    right: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

/* The arrow is drawn in CSS rather than loaded as an icon font, so it inherits
   the menu's colour and needs no extra request. */
.offcanvas-navigation .submenu-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -6px 0 0 -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.offcanvas-navigation li.is-expanded > .submenu-toggle::before {
    transform: rotate(-135deg);
    margin-top: -2px;
}

/* Room for the button so a long menu label does not run underneath it. */
.offcanvas-navigation li.menu-item-has-children > a {
    padding-right: 40px;
}

/* A parent whose link is only a placeholder opens on the label itself, so it
   has no arrow button and needs no room reserved for one. The chevron is drawn
   on the link instead, so the item still reads as something that opens. */
.offcanvas-navigation li.has-placeholder-link > a {
    padding-right: 40px;
    position: relative;
}

.offcanvas-navigation li.has-placeholder-link > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.offcanvas-navigation li.has-placeholder-link.is-expanded > a::after {
    transform: rotate(-135deg);
    margin-top: -2px;
}


/* ---- No rules under menu items ----
   Menu items carry no borders of their own, and nothing else should give them
   any. Plugin stylesheets and Elementor's own frontend CSS both style lists
   broadly enough to reach a navigation menu, which showed up as a thin line
   under every item.

   Written against the list items and links only. The chevrons on the submenu
   toggles are drawn with borders on pseudo-elements, so those are untouched. */
.main-navigation li,
.main-navigation li > a,
.offcanvas-navigation li,
.offcanvas-navigation li > a,
.editorly-mobile-bottom-nav a,
.footer-menu li,
.footer-menu li > a {
    border: none;
    box-shadow: none;
    text-decoration: none;
}

/* =========================================
   Group headings and the app-style slide-out menu
   =========================================
   A long slide-out menu reads better broken into named sections, and on a
   phone an app-like list is more familiar than a website dropdown. Both are
   built from the menu itself: a heading is a menu item marked as one under
   Appearance → Menus, so the site owner arranges everything in the same place
   they already manage the menu.
   ========================================= */

/* ---- Group heading ----
   Rendered as a span rather than a link, so it is not in the tab order and is
   not announced as a link. */
.main-navigation li.menu-group-heading {
    pointer-events: none;
}

.main-navigation .menu-group-heading-text {
    display: block;
    padding: 18px 0 6px;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ed-text-muted);
}

/* The first heading has no items above it to separate from. */
.main-navigation li.menu-group-heading:first-child .menu-group-heading-text {
    padding-top: 0;
}

/* On a horizontal menu bar a heading makes no sense: there are no sections to
   label, and it would sit in the row looking like a broken link. */
/* Group headings belong to the slide-out menu, so they are hidden only where
   the menu is actually a horizontal bar — which on a site set to the 1024px
   breakpoint does not begin until above that width. */
@media (min-width: 783px) {
    body:not(.nav-breakpoint-1024) .main-navigation:not(.offcanvas-navigation) > ul > li.menu-group-heading {
        display: none;
    }
}

@media (min-width: 1025px) {
    body.nav-breakpoint-1024 .main-navigation:not(.offcanvas-navigation) > ul > li.menu-group-heading {
        display: none;
    }
}

/* ---- Dot badge ----
   A marker rather than a word, for an item that has something new without
   needing to say what. */
.menu-badge-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 8px;
    border-radius: 50%;
    background: #e02b2b;
    vertical-align: middle;
}

/* ---- App style ----
   Wider rows, circular icons and clear section breaks. Applies only inside the
   slide-out panel — Header Style 4's own panel, and the slide-out used by the
   other header styles on mobile. On a horizontal menu bar these proportions do
   not fit. */
body.slideout-menu-app .offcanvas-navigation .menu > li > a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 40px 4px 0;
    font-size: 1.05em;
}

body.slideout-menu-app .offcanvas-navigation .menu > li > a .dashicons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 20px;
    /* The circle is the frame; the glyph should not push against it. */
    line-height: 1;
    opacity: 0.85;
}

/* The label sits beside the circle rather than wrapping under it. */
body.slideout-menu-app .offcanvas-navigation .menu-item-text {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body.slideout-menu-app .offcanvas-navigation .menu-group-heading-text {
    padding: 26px 0 10px;
}

/* Sub-items are indented under their parent rather than given circles of their
   own, which would compete with the top-level rows. */
body.slideout-menu-app .offcanvas-navigation .sub-menu > li > a {
    padding: 10px 0 10px 60px;
    font-size: 0.95em;
}


/* The same app styling for the slide-out used by Header Styles 1, 2, 3, 5 and
   6. It has to be inside a media query: mobile-menu-offcanvas is a setting, so
   the class sits on the body at every width, and without the query these rules
   reached the horizontal menu bar on desktop and forced its labels to wrap. */
/* The app styling applies wherever the slide-out is actually in use: phones
   always, and tablets as well on a site set to the 1024px breakpoint. Two
   queries rather than one wider range, so a site left at 782px does not get
   app styling on a header that still shows a horizontal menu. */
@media (max-width: 782px) {
    body.slideout-menu-app.mobile-menu-offcanvas .main-navigation .menu > li > a {
        display: flex;
        align-items: center;
        gap: 16px;
        /* Vertical padding kept small: the icon circle is 44px tall and sets
           the row height on its own, so padding here only adds to a row that
           is already comfortable. The gap between rows is the setting. */
        padding: 4px 40px 4px 0;
        font-size: 1.05em;
    }

    /* An icon that resolves to nothing would otherwise leave an empty circle the
   size of a real one. :empty cannot help here — the element has no content in
   either case — so the circle is drawn only when a dashicons-* class is
   actually present. */
body.slideout-menu-app.mobile-menu-offcanvas .main-navigation .menu > li > a .dashicons[class*="dashicons-"] {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Circle and glyph are separate settings, so the ring can be sized to
           the row while the icon inside it is sized for legibility. The
           dashicons font sets width and height from font-size, so all three
           have to follow the same value or the glyph is clipped. */
        flex: 0 0 var(--ed-menu-icon-circle, 42px);
        width: var(--ed-menu-icon-circle, 42px);
        height: var(--ed-menu-icon-circle, 42px);
        border: 1px solid currentColor;
        border-radius: 50%;
        font-size: var(--ed-menu-icon-size, 24px);
        line-height: 1;
        opacity: 0.85;
    }

    body.slideout-menu-app.mobile-menu-offcanvas .main-navigation .menu-item-text {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
    }

    body.slideout-menu-app.mobile-menu-offcanvas .main-navigation .menu-group-heading-text {
        padding: 26px 0 10px;
    }

    body.slideout-menu-app.mobile-menu-offcanvas .main-navigation .sub-menu > li > a {
        padding: 10px 0 10px 60px;
        font-size: 0.95em;
    }
}

@media (min-width: 783px) and (max-width: 1024px) {
    body.nav-breakpoint-1024.slideout-menu-app.mobile-menu-offcanvas .main-navigation .menu > li > a {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 4px 40px 4px 0;
        font-size: 1.05em;
    }

    body.nav-breakpoint-1024.slideout-menu-app.mobile-menu-offcanvas .main-navigation .menu > li > a .dashicons {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Circle and glyph are separate settings, so the ring can be sized to
           the row while the icon inside it is sized for legibility. The
           dashicons font sets width and height from font-size, so all three
           have to follow the same value or the glyph is clipped. */
        flex: 0 0 var(--ed-menu-icon-circle, 42px);
        width: var(--ed-menu-icon-circle, 42px);
        height: var(--ed-menu-icon-circle, 42px);
        border: 1px solid currentColor;
        border-radius: 50%;
        font-size: var(--ed-menu-icon-size, 24px);
        line-height: 1;
        opacity: 0.85;
    }

    body.nav-breakpoint-1024.slideout-menu-app.mobile-menu-offcanvas .main-navigation .menu-item-text {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
    }

    body.nav-breakpoint-1024.slideout-menu-app.mobile-menu-offcanvas .main-navigation .menu-group-heading-text {
        padding: 26px 0 10px;
    }

    body.nav-breakpoint-1024.slideout-menu-app.mobile-menu-offcanvas .main-navigation .sub-menu > li > a {
        padding: 10px 0 10px 60px;
        font-size: 0.95em;
    }
}


/* A horizontal menu bar keeps each label on one line. Flex items shrink to
   their minimum content width by default, so a label of more than one word was
   breaking after every word as soon as the bar ran short of room. */
/* Labels stay on one line on a horizontal bar. In a slide-out panel they
   should wrap normally, so this follows the same breakpoint split. */
@media (min-width: 783px) {
    body:not(.nav-breakpoint-1024) .main-navigation:not(.offcanvas-navigation) > ul > li > a {
        white-space: nowrap;
    }
}

@media (min-width: 1025px) {
    body.nav-breakpoint-1024 .main-navigation:not(.offcanvas-navigation) > ul > li > a {
        white-space: nowrap;
    }
}

/* =========================================
   Logo size
   =========================================
   Width is set, height follows, so an uploaded image is never distorted
   whatever its proportions. Applied to the image inside the branding area
   rather than to the link around it, so the clickable area stays the size of
   the logo itself.

   The mobile value is separate because a header has far less room on a phone:
   a logo sized for a desktop screen crowds out the menu button beside it.
   ========================================= */

.site-branding img {
    width: var(--ed-logo-width, 180px);
    max-width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 782px) {
    .site-branding img {
        width: var(--ed-logo-width-mobile, 130px);
    }
}

/* The mobile logo width applies wherever the header is in its mobile form,
   which on a site set to the 1024px breakpoint includes tablets. */
@media (min-width: 783px) and (max-width: 1024px) {
    body.nav-breakpoint-1024 .site-branding img {
        width: var(--ed-logo-width-mobile, 130px);
    }
}

/* A full width header still needs breathing room at the edges of the screen,
   or the logo and the menu sit flush against them. */
body.header-full-width .header-inner {
    padding-left: 32px;
    padding-right: 32px;
}

@media (max-width: 782px) {
    body.header-full-width .header-inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================================
   Menu position
   =========================================
   Where the menu sits between the logo and the header extras.

   Scoped through .site-header, which is where the header-style class actually
   lives — an earlier version excluded Style 2 with body:not(.header-style-2),
   but the body never carries that class, so the exclusion never matched and
   the rules reached Style 2 as well, stretching the nav and breaking its
   centred layout.

   The nav takes the free space in the header row and the menu is justified
   within it. Applied above the layout breakpoint only: below it the menu is a
   slide-out panel, where left or right has no meaning. Style 2 centres its
   menu by design and Style 4 keeps its menu in a panel, so neither takes part.
   ========================================= */

/*
 * Two queries rather than one.
 *
 * These rules lay the menu out horizontally, so they must not apply where the
 * menu has become a slide-out panel. A site left on the 782px breakpoint uses
 * the first; a site switched to 1024px uses the second, which starts above
 * that width.
 *
 * A single min-width:783px query reached into the tablet band and re-displayed
 * the horizontal menu there — with a higher specificity than the rule hiding
 * it, so the page ended up showing both the menu and the button that was
 * supposed to replace it.
 */
@media (min-width: 783px) {
    body:not(.nav-breakpoint-1024) .site-header:not(.header-style-2) .main-navigation:not(.offcanvas-navigation) {
        flex: 1 1 auto;
        min-width: 0;
    }

    body:not(.nav-breakpoint-1024) .site-header:not(.header-style-2) .main-navigation:not(.offcanvas-navigation) > ul {
        display: flex;
    }

    body:not(.nav-breakpoint-1024).menu-align-left .site-header:not(.header-style-2) .main-navigation:not(.offcanvas-navigation) > ul {
        justify-content: flex-start;
        /* Clear of the logo. Only the left setting needs it: centre and right
           already have space on that side. */
        padding-left: var(--ed-space-lg, 40px);
    }

    body:not(.nav-breakpoint-1024).menu-align-center .site-header:not(.header-style-2) .main-navigation:not(.offcanvas-navigation) > ul {
        justify-content: center;
    }

    body:not(.nav-breakpoint-1024).menu-align-right .site-header:not(.header-style-2) .main-navigation:not(.offcanvas-navigation) > ul {
        justify-content: flex-end;
    }
}

@media (min-width: 1025px) {
    body.nav-breakpoint-1024 .site-header:not(.header-style-2) .main-navigation:not(.offcanvas-navigation) {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.nav-breakpoint-1024 .site-header:not(.header-style-2) .main-navigation:not(.offcanvas-navigation) > ul {
        display: flex;
    }

    body.nav-breakpoint-1024.menu-align-left .site-header:not(.header-style-2) .main-navigation:not(.offcanvas-navigation) > ul {
        justify-content: flex-start;
        padding-left: var(--ed-space-lg, 40px);
    }

    body.nav-breakpoint-1024.menu-align-center .site-header:not(.header-style-2) .main-navigation:not(.offcanvas-navigation) > ul {
        justify-content: center;
    }

    body.nav-breakpoint-1024.menu-align-right .site-header:not(.header-style-2) .main-navigation:not(.offcanvas-navigation) > ul {
        justify-content: flex-end;
    }
}

/* An avatar fills the circle rather than sitting inside it. */
.header-account-link img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.header-account-link.account-style-outline {
    border: 1px solid currentColor;
}

.header-account-link.account-style-outline:hover {
    color: var(--ed-primary);
    border-color: var(--ed-primary);
}

.header-account-link.account-style-filled {
    color: #fff;
    background: var(--ed-primary);
}

.header-account-link.account-style-filled:hover {
    background: var(--ed-primary-dark, var(--ed-primary));
}

.header-account-link.account-style-plain:hover {
    color: var(--ed-primary);
}

/* An avatar has its own edges, so a border or fill around it would read as a
   second frame. The class is set in PHP rather than using :has(), which is not
   available in every browser still in use. */
.header-account-link.has-avatar {
    border: none;
    background: none;
    padding: 0;
}

/* =========================================
   Tablet band — header and navigation
   =========================================
   Counterparts of the phone rules above, for sites where "Switch to Mobile
   Menu Below" is set to 1024px.

   The theme was written around a single fixed breakpoint, so many rules
   assumed 782px would never move. Extending the header to tablets one rule at
   a time kept leaving pieces behind — a transparent bottom bar, a logo still
   at desktop size, header extras sitting beside the menu button. The header
   and navigation rules are reproduced here in full for the wider range, so
   nothing is carried across without the styling that belongs with it.

   Rules that are genuinely about a small screen rather than about the header —
   grid column counts, heading sizes, the split post hero — are deliberately
   left out: a tablet has the room for them.
   ========================================= */

@media (min-width: 783px) and (max-width: 1024px) {
    body.nav-breakpoint-1024 .editorly-top-bar-inner {
        justify-content: center;
        text-align: center;
    }

    body.nav-breakpoint-1024 .editorly-top-bar-contact,
    body.nav-breakpoint-1024 .editorly-top-bar-right {
        justify-content: center;
    }

    body.nav-breakpoint-1024 .header-style-2 .header-centered .header-extras {
        position: static;
        top: auto;
        right: auto;
        margin-top: 8px;
    }

    body.nav-breakpoint-1024 .site-branding .site-logo-mobile {
        display: inline-block;
    }

    body.nav-breakpoint-1024 .site-branding .site-logo-desktop {
        display: none;
    }

    body.nav-breakpoint-1024 .site-header.is-stuck .site-branding .site-logo-mobile,
    body.nav-breakpoint-1024 .site-header.header-scrolled .site-branding .site-logo-mobile {
        display: none;
    }

    body.nav-breakpoint-1024 .site-header.is-stuck .site-branding .site-logo-sticky,
    body.nav-breakpoint-1024 .site-header.header-scrolled .site-branding .site-logo-sticky {
        display: inline-block;
    }

    html[data-editorly-scheme="dark"] body.nav-breakpoint-1024 .site-branding .site-logo-dark-mode {
        display: inline-block;
    }

    body.nav-breakpoint-1024 .main-navigation ul {
        display: none;
    }

    body.nav-breakpoint-1024 .menu-toggle {
        display: inline-block;
    }

    body.nav-breakpoint-1024 .header-style-4 .main-navigation ul {
        display: flex;
    }

    body.nav-breakpoint-1024 .header-style-3 .header-left {
        gap: 16px;
    }

    body.nav-breakpoint-1024.header-full-width .header-inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---- Custom header and footer templates ----
   When an Elementor template replaces the built-in header or footer, the
   wrapper carries no styling of its own: the template controls its layout,
   spacing and background, and any padding or border from the theme would fight
   it. Only the sticky-footer behaviour is kept, since that belongs to the page
   rather than to the footer's own design. */
.site-header-custom {
    border-bottom: none;
    background: none;
    padding: 0;
}

.site-footer-custom {
    border-top: none;
    background: none;
    padding: 0;
    margin-top: auto;
}

/* =========================================
   Separate mobile menu
   =========================================
   When a menu is assigned to the Mobile Menu location, both navs are in the
   markup and the stylesheet shows whichever belongs at the current width. The
   choice cannot be made in PHP: the server does not know the screen width, and
   a cached page would be wrong for half its visitors.
   ========================================= */

/* Above the breakpoint the mobile nav is not rendered at all. display:none
   rather than visibility, so it takes no space and is skipped by assistive
   technology and by keyboard navigation. */
.mobile-navigation {
    display: none;
}

@media (max-width: 782px) {
    body.has-separate-mobile-menu .mobile-navigation {
        display: block;
    }

    /* The primary nav steps aside, but its menu-toggle button belongs to the
       header rather than to either list, so it stays. */
    body.has-separate-mobile-menu .main-navigation:not(.mobile-navigation) > ul {
        display: none;
    }
}

@media (min-width: 783px) and (max-width: 1024px) {
    body.nav-breakpoint-1024.has-separate-mobile-menu .mobile-navigation {
        display: block;
    }

    body.nav-breakpoint-1024.has-separate-mobile-menu .main-navigation:not(.mobile-navigation) > ul {
        display: none;
    }
}

/* ---- Row spacing ----
   Set from Theme Options → Navigation. The gap sits between rows; the padding
   inside each link stays as the style requires, so a row never loses its
   tap target. */
.main-navigation .menu {
    row-gap: var(--ed-menu-row-gap, 6px);
}


/* The dashicons font draws its glyph inside a box that follows font-size, but
   the class also sets width and height to 20px of its own. Left alone, raising
   the font size makes the glyph overflow that box and it is clipped rather
   than growing. */
body.slideout-menu-app .main-navigation .menu > li > a .dashicons::before {
    font-size: inherit;
    width: auto;
    height: auto;
    line-height: 1;
}