/* =========================================
   Editorly — Main Stylesheet (v2)
   ========================================= */

/*
 * Global border-box reset.
 *
 * Without it, width and padding are added together, so any rule combining
 * width:100% with horizontal padding overflows its container by exactly the
 * padding amount. Several rules in this theme are written that way — the
 * search field, the comment form inputs, the newsletter input, the WooCommerce
 * checkout fields — so they were all quietly a few pixels too wide, which on a
 * narrow screen is enough to put a horizontal scrollbar across the whole page.
 *
 * This is the behaviour essentially all modern CSS assumes, and the rest of
 * the stylesheet was clearly written expecting it.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---- Design Tokens ---- */
:root {
    --ed-primary: var(--editorly-primary-color, #e8174d);
    --ed-primary-dark: #b8123d;
    --ed-dark-bg: #141414;
    --ed-blush-bg: #f5ede8;
    --ed-text: #141414;
    --ed-text-muted: #8a8a8a;
    --ed-border: #e5e5e5;
    --ed-bg-soft: #f7f7f7;
    --ed-radius: 16px;
    --ed-space-xs: 8px;
    --ed-space-sm: 16px;
    --ed-space-md: 24px;
    --ed-space-lg: 40px;
    --ed-space-xl: 64px;
    --ed-container: 1140px;
    --ed-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* ---- Stacking scale ----
       One source of truth for the overlay layers. These numbers were
       previously repeated as literals across main.css and header-styles.css,
       which is how the slide-out panel and its overlay drifted apart: a fix
       applied to one copy left the others behind.

       Highest first:
         skip link       must stay reachable above everything
         menu close      sits over the panel
         header          lifted while the menu is open, so the panel inside it
                         clears the overlay
         offcanvas panel
         offcanvas overlay

       The gaps are one unit because the layers are adjacent by design and
       nothing is meant to sit between them. That is safe as long as the values
       live here and nowhere else. */
    --ed-z-offcanvas-overlay: 99998;
    --ed-z-offcanvas-panel: 99999;
    --ed-z-header-menu-open: 100001;
    --ed-z-menu-close: 100002;
    --ed-z-skip-link: 100003;
}

/* ---- CRITICAL: global image reset ----
   Without it every featured image renders at its native pixel size and breaks
   the layout (sidebar and menu overlap). This is the first thing any theme
   reviewer checks. */
img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---- Base typography ---- */
html {
    height: 100%;
}

body {
    background-color: var(--ed-bg, #fff);
    font-family: var(--ed-font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ed-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---- Sticky Footer ----
   #page is the main wrapper (header.php opens <div id="page">).
   With flex-direction:column on body plus flex:1 on #page, the footer stays
   at the bottom of the viewport even when the content is short. */
#page {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Same automatic minimum size guard, one level up. */
    min-width: 0;
}

/* Unambiguous offset for the admin bar: padding on the body itself, with
   !important, so it cannot be overridden by the load order of other
   stylesheets (WordPress's own bump CSS, for instance). */
body.admin-bar {
    padding-top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        padding-top: 46px !important;
    }
}

.site-content {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0 0 var(--ed-space-sm);

    /*
     * A single long word — a URL, a German compound, "Internationalization" at
     * 2.4em — is wider than a narrow column can ever be, and a heading that
     * cannot wrap pushes its container past the viewport and puts the whole
     * page into horizontal scroll. Measured on the Split hero: at 820px with
     * the title column at 280px, one such word did exactly that.
     *
     * break-word only breaks when the word genuinely does not fit, so ordinary
     * headlines wrap between words as before.
     */
    overflow-wrap: break-word;
}

h1 { font-size: 2.6em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }

p {
    margin: 0 0 var(--ed-space-sm);
}

a {
    color: var(--ed-primary);
}

/* ---- Container ---- */
.site-content {
    max-width: var(--ed-container);
    margin: 0 auto;
    padding: var(--ed-space-lg) 20px;
    display: flex;
    gap: var(--ed-space-lg);
    align-items: flex-start;

    /*
     * Measured cause of the narrow-screen layout break.
     *
     * As a flex item, this container defaults to min-width:auto, which means
     * it refuses to shrink below the intrinsic minimum width of its contents.
     * With a horizontally scrolling component inside — a carousel, a wide
     * table — the container stopped following the viewport and jumped to its
     * own max-width instead: 390px of screen, 1140px of container.
     *
     * Everything below it then inherited a false idea of the available width.
     * Elementor's container settled at 767px, and any JavaScript slider that
     * measures its parent on init wrote its track and slide widths from that
     * number, producing a layout several thousand pixels wide.
     *
     * min-width:0 lets the container follow the viewport again. max-width:100%
     * keeps the existing --ed-container cap from ever exceeding the screen.
     */
    min-width: 0;

    /*
     * width:100% is required, not optional.
     *
     * In flexbox, an auto margin on the cross axis overrides align-items:
     * stretch. This container sets margin:0 auto to centre itself, and sits
     * inside #page, which is a column flex container — so it never stretches.
     * It sizes itself from its contents and the auto margins absorb whatever
     * is left over.
     *
     * That went unnoticed while min-width was auto, because the intrinsic
     * minimum width of a page's contents kept the box wide. Setting min-width
     * to 0 above released it, and on a 390px screen the container collapsed to
     * 225px with 83px of empty margin on either side.
     *
     * An explicit width gives it a definite size again: full width of the
     * parent, still capped by --ed-container, with the auto margins doing
     * nothing until there is genuine space left to centre within.
     */
    width: 100%;
    max-width: var(--ed-container);
}

/*
 * The same guard for the main column and for Elementor's containers. #primary
 * is a flex item of .site-content, and .e-con is a flex item in turn, so both
 * carry the same automatic minimum size unless told otherwise. Capping them at
 * 100% means an intrinsically wide descendant scrolls inside its own box
 * rather than stretching the column that holds it.
 */
#primary,
.elementor,
.e-con,
.e-con-inner {
    min-width: 0;
    max-width: 100%;
}


/* ---- Header ---- */
.site-header {
    border-bottom: 1px solid var(--ed-border);
}

.site-title {
    font-size: 1.4em;
    margin: 0;
}

.site-title a {
    color: var(--ed-text);
    text-decoration: none;
}

.main-navigation ul {
    display: flex;
    gap: var(--ed-space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    text-decoration: none;
    font-weight: 500;
}

.main-navigation li {
    position: relative;
}

/* ---- Menu item icons & badges ---- */
.menu-item-text .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 2px;
}

.menu-badge {
    display: inline-block;
    font-size: 0.65em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.4;
}

.menu-badge-new {
    background: #e8f5e9;
    color: var(--ed-success, #2e7d32);
}

.menu-badge-hot {
    background: #fdecea;
    color: var(--ed-primary, #e8174d);
}

/* ---- Dropdown Submenus (desktop) ---- */
.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--ed-panel-bg, #fff);
    border: 1px solid var(--ed-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 8px;
    flex-direction: column;
    gap: 0;
    z-index: 600;
}

.main-navigation .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

.main-navigation li:hover > .sub-menu {
    display: flex;
}

.main-navigation .sub-menu li {
    width: 100%;
}

.main-navigation .sub-menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--ed-text);
    font-weight: 400;
    white-space: nowrap;
}

.main-navigation .sub-menu a:hover {
    background: var(--ed-bg-soft);
    color: var(--ed-primary);
}

/* Dropdown animation variants (Theme Options → Navigation → Dropdown Animation) */
body.dropdown-animation-fade .main-navigation .sub-menu {
    opacity: 0;
    visibility: hidden;
    display: flex;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.dropdown-animation-fade .main-navigation li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

body.dropdown-animation-slide .main-navigation .sub-menu {
    opacity: 0;
    visibility: hidden;
    display: flex;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

body.dropdown-animation-slide .main-navigation li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ---- Mega Menu ---- */
.main-navigation li.has-mega-menu {
    position: static;
}

.main-navigation li.has-mega-menu > .sub-menu {
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--ed-container, 1140px);
    margin: 0 auto;
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--ed-space-md);
    padding: var(--ed-space-md);
}

.main-navigation li.has-mega-menu:hover > .sub-menu {
    display: flex;
}

.main-navigation li.has-mega-menu > .sub-menu > li {
    flex: 1 1 200px;
    width: auto;
}

/* A mega menu filled with an Elementor template: the panel is a plain canvas,
   so the template controls its own padding, columns and background. The list
   styling that suits sub-items would fight it. */
.main-navigation li.has-mega-menu > .sub-menu.mega-menu-template {
    display: block;
    padding: 0;
}

.main-navigation .mega-menu-template-content {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

@media (max-width: 782px) {
    /* On a phone the sub-items are shown instead: a panel designed for the
       full width of a desktop screen cannot work here. */
    .main-navigation li.has-mega-template > .sub-menu.mega-menu-template {
        display: none;
    }

    /* Unless there are no sub-items to fall back to. Hiding the panel then
       would leave the menu item doing nothing at all, which is worse than a
       panel that has to scroll. These start expanded, so the panel is visible
       as soon as the menu opens. */
    .main-navigation li.has-mega-template-only.is-expanded > .sub-menu.mega-menu-template {
        display: block;
    }

    /* Only the panel that is not already inside a scrolling offcanvas needs a
       scroller of its own. */
    .main-navigation:not(.offcanvas-navigation) li.has-mega-template-only.is-expanded > .sub-menu.mega-menu-template {
        max-height: 70vh;
        overflow-y: auto;
    }
}

.main-navigation li.has-mega-menu > .sub-menu > li > .sub-menu {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 8px;
}

.menu-toggle {
    display: none;
}

/* ---- Mobile Navigation ---- */
@media (max-width: 782px) {
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        color: var(--ed-text, #222);
    }

    /* ---- Hamburger always on the left on mobile ----
       .main-navigation, which holds the menu-toggle button, becomes the first
       flex item inside .header-inner, so the visitor always finds the
       hamburger at the top left whichever Header Style (1-6) is active.
       Style 2 (Centered) is deliberately excluded: it already has its own
       stacked, centred mobile layout where "left" and "right" carry no
       meaning. Style 3 needs a separate rule because its .main-navigation
       lives inside .header-right rather than directly inside .header-inner
       as a sibling of .site-branding. */
    .header-style-1 .main-navigation,
    .header-style-5 .main-navigation,
    .header-style-6 .main-navigation {
        order: -1;
    }

    /*
     * The header row keeps space-between from the desktop layout, which was
     * written for three items. On a phone the header extras are hidden, so only
     * the hamburger and the logo remain and space-between throws them to
     * opposite edges — putting the logo underneath the floating dark mode
     * toggle in the top right corner.
     *
     * Grouped from the left instead, which also reads better: the logo sits
     * beside the button rather than stranded across the screen.
     */
    .site-header:not(.header-style-2) .header-inner {
        justify-content: flex-start;
        gap: 14px;
    }

    /* Room at the end of the row so the logo never runs under the toggle,
       whichever corner it is in. */
    body.mobile-logo-left .site-header:not(.header-style-2) .header-inner .site-branding {
        margin-right: 56px;
    }

    /*
     * Centred logo: positioned rather than spaced.
     *
     * Auto margins would centre the logo in whatever room the menu button and
     * the reserved corner left over, which is not the middle of the header —
     * and it would shift as the button or the toggle changed size. Absolute
     * centring puts it in the middle of the header whatever sits beside it.
     */
    body.mobile-logo-center .site-header:not(.header-style-2) .header-inner {
        position: relative;
    }

    body.mobile-logo-center .site-header:not(.header-style-2) .header-inner .site-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        /* Kept clear of the menu button on one side and the floating toggle on
           the other, so a wide logo shrinks rather than sliding under either. */
        max-width: calc(100% - 130px);
        text-align: center;
    }

    body.mobile-logo-center .site-header:not(.header-style-2) .header-inner .site-branding img {
        margin-left: auto;
        margin-right: auto;
    }

    .header-style-4 .menu-toggle {
        order: -1;
    }

    .header-style-3 .header-right {
        order: -1;
    }

    .header-style-3 .header-left {
        order: 1;
    }

    .main-navigation .sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding-left: var(--ed-space-sm);
        display: none;
    }

    .main-navigation li:hover > .sub-menu,
    body.dropdown-animation-fade .main-navigation li:hover > .sub-menu,
    body.dropdown-animation-slide .main-navigation li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .main-navigation li.menu-item-has-children.is-expanded > .sub-menu {
        display: flex;
    }

    .main-navigation li.has-mega-menu > .sub-menu {
        max-width: none;
    }

    /* Inside Header Style 4's own offcanvas panel the menu is just a list:
       the panel around it already handles position, width and sliding. */
    .main-navigation.offcanvas-navigation .menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: static;
        transform: none;
        visibility: visible;
        width: auto;
        max-width: none;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    /* Default mobile style: simple dropdown panel below the header */
    body:not(.mobile-menu-offcanvas) .main-navigation .menu {
        display: none;
    }

    body:not(.mobile-menu-offcanvas) .main-navigation .menu.is-open {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* A variable, so dark mode changes it by redefining the value rather
           than by fighting this selector's specificity. */
        background: var(--ed-panel-bg, #fff);
        border-top: 1px solid var(--ed-border);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        padding: var(--ed-space-sm) 20px;
        z-index: 500;
    }

    /* Off-canvas mobile style.
       :not(.offcanvas-navigation) is essential. Header Style 4 renders its own
       offcanvas panel, and that panel's <nav> carries both class names. Without
       the exclusion the rules below turn the <ul> inside it into a second,
       nested panel of its own — and since the is-open class is set on the
       <nav>, the inner list stays translated off screen and the panel opens
       empty. */
    body.mobile-menu-offcanvas .main-navigation:not(.offcanvas-navigation) .menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--ed-mobile-menu-width, 300px);
        max-width: 85vw;
        background: var(--ed-panel-bg, #fff);
        /* Enough to clear the close button floating above, not the 80px that
           was needed when the button sat inside the list. */
        padding: 56px 24px 24px;
        justify-content: flex-start;
        align-items: stretch;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s ease;
        /* Same layer as the offcanvas panel in header-styles.css: the slide-out
           menu of the other header styles is just as full-screen and belongs in
           the same place in the stacking order. This used to be 999, corrected
           by a second rule immediately below it; the two are now one. */
        z-index: var(--ed-z-offcanvas-panel);
        overflow-y: auto;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    }

    body.mobile-menu-offcanvas .main-navigation:not(.offcanvas-navigation) .menu.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    /* .editorly-mobile-menu-overlay used to be styled here and in the tablet
       band below, on a separate 998/999 scale of its own. No JS or template
       ever created an element with that class — the working overlay is
       .editorly-menu-overlay, built in main.js. The rules were dead weight and
       a standing invitation to fix the wrong copy, so they are gone. */
}

/* ---- Blog Layouts (archive/index grid) ---- */
.posts-wrapper.layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--ed-grid-columns, 3), 1fr);
    gap: var(--ed-space-md);
}

.posts-wrapper.layout-list .post-card {
    display: flex;
    gap: var(--ed-space-md);
    margin-bottom: var(--ed-space-md);
}

.posts-wrapper.layout-masonry {
    columns: var(--ed-grid-columns, 3);
    column-gap: var(--ed-space-md);
}

.posts-wrapper.layout-masonry .post-card {
    break-inside: avoid;
    margin-bottom: var(--ed-space-md);
}

.post-card {
    background: var(--ed-panel-bg, #fff);
    border: 1px solid var(--ed-border);
    border-radius: var(--ed-card-radius, var(--ed-radius));
    overflow: hidden;
}

.post-card .post-thumbnail {
    display: block;
    aspect-ratio: var(--ed-thumb-ratio, 16 / 10);
    overflow: hidden;
    border-radius: var(--ed-card-image-radius, var(--ed-card-radius, var(--ed-radius)));
}

.post-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.post-card .post-content {
    padding: var(--ed-card-padding, 16px);
}

.post-card .entry-header .entry-title {
    font-size: var(--ed-card-title-size, 19px) !important;
    margin: 0 0 var(--ed-space-xs);
}

.post-card .entry-title a {
    color: var(--ed-text);
    text-decoration: none;
}

.post-card .entry-summary,
.post-card .read-more {
    margin: 0;
    font-size: var(--ed-card-text-size, 15px);
    text-decoration: none;
}

.post-card .read-more:hover {
    color: var(--ed-primary);
}

.post-card .read-more {
    display: inline-block;
    margin-top: var(--ed-space-xs);
    font-weight: 600;
}

.post-card .entry-header .entry-meta {
    margin: 0 0 var(--ed-space-xs);
    font-size: var(--ed-card-text-size, 15px);
}

.entry-meta {
    font-size: 0.85em;
    color: var(--ed-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ed-space-xs);
    margin: 0 var(--ed-space-sm) var(--ed-space-xs);
}

.entry-meta a {
    color: inherit;
    text-decoration: none;
}

.entry-meta a:hover {
    color: var(--ed-primary);
}

.entry-meta > * {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Single Post ---- */
#primary {
    flex: 1;
    min-width: 0;
}

.entry-header {
    margin-bottom: var(--ed-space-md);
}

/* ---- Post Format badge ---- */
.editorly-format-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    color: var(--ed-text-muted);
}

.post-thumbnail .editorly-format-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75em;
}

.post-thumbnail {
    position: relative;
}

.post-thumbnail-no-image {
    background: var(--ed-bg-soft);
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-thumbnail-no-image .editorly-format-badge {
    position: static;
    background: none;
    color: var(--ed-text-muted);
    font-size: 1.2em;
}

/* ---- Quote format: larger, more expressive entry-content ---- */
.format-quote .entry-content {
    font-size: 1.3em;
    font-style: italic;
    text-align: center;
    color: var(--ed-text-muted);
}

/* ---- Link format CTA button ---- */
.editorly-format-link-cta {
    margin-bottom: var(--ed-space-md);
}

.editorly-format-link-cta a {
    display: inline-block;
    background: var(--ed-primary);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

/* ---- Breadcrumbs ---- */
.editorly-breadcrumbs {
    margin-bottom: var(--ed-space-md);
    font-size: 0.9em;
    color: var(--ed-text-muted);
}

.editorly-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.editorly-breadcrumbs li:not(:last-child)::after {
    content: '/';
    margin-left: 6px;
    color: var(--ed-border);
}

.editorly-breadcrumbs a {
    color: var(--ed-text-muted);
    text-decoration: none;
}

.editorly-breadcrumbs a:hover {
    color: var(--ed-primary);
}

.editorly-breadcrumbs [aria-current="page"] {
    color: var(--ed-text);
}

/* ---- Hero Featured Image style ---- */
.post-hero-image {
    position: relative;
    min-height: 360px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 0 var(--ed-space-lg);
    border-radius: var(--ed-radius);
    overflow: hidden;
}

.post-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.post-hero-content {
    position: relative;
    z-index: 2;
    padding: var(--ed-space-md);
}

.post-hero-content .entry-title {
    color: #fff;
    margin: 0;
}

/* ---- Split Hero (Featured Image Display → "Split") ---- */
/*
   Grid rather than flex. The flex version held its ratio correctly — measured
   at several widths, a 55/45 basis rendered exactly 55/45, because shrinkage
   is weighted by flex-basis — so this is not a bug fix. It is for the setting:
   two fractions say the ratio outright, where flex states it as a basis whose
   real width depends on grow, shrink and the gap all at once. A value a site
   owner picks should land as the number they picked, by inspection.

   The ratio comes from Theme Options -> Single Post -> Split Image Width. */
.post-split-hero {
    display: grid;
    grid-template-columns: var(--ed-split-image, 60fr) var(--ed-split-info, 40fr);
    align-items: center;
    gap: var(--ed-space-xl, 40px);
    margin: 0 0 var(--ed-space-lg);
}

.post-split-image {
    min-width: 0;
    border-radius: var(--ed-radius);
    overflow: hidden;
}

.post-split-image img {
    display: block;
    width: 100%;
    height: auto;
}

.post-split-info {
    min-width: 0;
    /* The tagline, author name and role share the narrow column with the
       title and need the same protection. */
    overflow-wrap: break-word;
}

.post-split-info .entry-title {
    font-size: 2.4em;
    margin: 0 0 var(--ed-space-sm);
}

.post-split-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ed-space-sm);
    margin-bottom: var(--ed-space-sm);
}

.post-split-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: var(--ed-text-muted);
}

.post-split-badge .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.post-split-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--ed-space-md);
}

.post-split-author img {
    border-radius: 50%;
    flex-shrink: 0;
}

.post-split-author-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.post-split-author-name {
    font-weight: 700;
}

.post-split-author-role {
    font-size: 0.85em;
    color: var(--ed-text-muted);
}

@media (max-width: 782px) {
    /* Stacked: the ratio is meaningless once there is only one column, and the
       image gets the full width whatever the setting says. */
    .post-split-hero {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: var(--ed-space-md);
    }

    .post-split-info .entry-title {
        font-size: 1.7em;
    }
}

.entry-header .entry-title {
    font-size: 2.2em;
    margin-bottom: var(--ed-space-xs);
}

.editorly-tagline {
    font-size: 1.15em;
    color: var(--ed-text-muted);
    margin: 0 0 var(--ed-space-sm);
}

.entry-header .entry-meta {
    margin: 0;
    font-size: 0.95em;
}

.post-thumbnail {
    margin-bottom: var(--ed-space-md);
    border-radius: var(--ed-radius);
    overflow: hidden;
}

.entry-content {
    font-size: 1.05em;
}

/*
 * The Elementor wrapper (class "elementor") is explicitly excluded from the
 * width constraint above. Elementor manages the width of each of its own
 * sections and containers; without this exclusion EVERY Elementor-built page
 * would be locked to var(--ed-content-width) no matter what is set inside
 * Elementor itself (Site Settings, section width and so on), because the
 * constraint is applied from the outside and Elementor has no way to know
 * about it or override it.
 */
.entry-content > *:not(.elementor) {
    max-width: var(--ed-content-width, 760px);
}

.entry-content h2,
.entry-content h3 {
    margin-top: var(--ed-space-lg);
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 var(--ed-space-sm);
    padding-left: 1.4em;
}

.entry-content li {
    margin-bottom: 6px;
}

.entry-content blockquote {
    border-left: 4px solid var(--ed-primary);
    margin: var(--ed-space-md) 0;
    padding: var(--ed-space-xs) var(--ed-space-md);
    color: var(--ed-text-muted);
    font-style: italic;
}

/* ---- Table of Contents ---- */
.editorly-toc {
    background: var(--ed-bg-soft);
    border: 1px solid var(--ed-border);
    border-radius: var(--ed-radius);
    padding: var(--ed-space-md);
    margin-bottom: var(--ed-space-lg);
    max-width: 720px;
}

.editorly-toc .toc-toggle {
    background: none;
    border: none;
    font-weight: 700;
    font-size: 1.05em;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
}

.editorly-toc .toc-toggle::after {
    content: '\2212';
    margin-left: auto;
}

.editorly-toc .toc-toggle[aria-expanded="false"]::after {
    content: '+';
}

.editorly-toc .toc-list {
    margin: var(--ed-space-sm) 0 0;
    padding-left: 1.2em;
}

.editorly-toc .toc-list.is-collapsed {
    display: none;
}

.editorly-toc .toc-sub {
    margin-left: 1em;
    font-size: 0.9em;
}

.editorly-toc a {
    text-decoration: none;
}

/* ---- Article Header Row: TOC card + Article Summary card ----
   See editorly_render_toc_and_summary_row() in inc/template-tags.php.
   When both are present (.has-both) they sit side by side in two columns.
   When only one is present the same container simply has a single child and
   grid-template-columns:1fr makes it full width naturally, with no change. */
.editorly-article-header-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ed-space-md);
    margin-bottom: var(--ed-space-lg);
    max-width: var(--ed-content-width, 760px);
}

.editorly-article-header-row.has-both {
    grid-template-columns: 1fr 1fr;
}

.editorly-toc-card,
.editorly-summary-card {
    background: var(--ed-bg-soft);
    border: 1px solid var(--ed-border);
    border-radius: var(--ed-radius);
    padding: var(--ed-space-md);
}

.editorly-toc-card-title,
.editorly-summary-card-title {
    margin: 0 0 var(--ed-space-sm);
    font-size: 1.1em;
}

.editorly-toc-card .toc-list {
    margin: 0;
    padding-left: 1.2em;
}

.editorly-toc-card .toc-sub {
    margin-left: 1em;
    font-size: 0.9em;
}

.editorly-toc-card a {
    text-decoration: none;
    color: inherit;
}

.editorly-toc-card a:hover {
    color: var(--ed-primary);
}

.editorly-summary-card {
    border-left: 4px solid var(--ed-primary);
}

.editorly-summary-card p {
    margin: 0;
    color: var(--ed-text-muted);
}

@media (max-width: 600px) {
    .editorly-article-header-row.has-both {
        grid-template-columns: 1fr;
    }
}

/* scroll-behavior:smooth is now applied conditionally from PHP
   (editorly_custom_css_vars in inc/template-functions.php), respecting the
   "Smooth Scroll" toggle in Theme Options -> General. */

/* ---- Site Layout: Boxed ---- */
body.site-layout-boxed {
    background: #e5e5e5;
}

body.site-layout-boxed #page {
    max-width: 1400px;
    margin: 0 auto;
    background: var(--ed-bg, #fff);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}

@media (max-width: 1440px) {
    body.site-layout-boxed #page {
        max-width: 100%;
    }
}

/* ---- Preloader ---- */
.editorly-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--ed-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.editorly-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.editorly-preloader-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--ed-border, #e5e5e5);
    border-top-color: var(--ed-primary, #e8174d);
    border-radius: 50%;
    animation: editorly-spin 0.8s linear infinite;
}

@keyframes editorly-spin {
    to {
        transform: rotate(360deg);
    }
}

html[data-editorly-scheme="dark"] .editorly-preloader {
    background: #121212;
}

/* ---- Ad Slots ---- */
.editorly-ad-slot {
    text-align: center;
    margin: var(--ed-space-md) 0;
    overflow-x: auto;
}

.editorly-ad-slot:empty {
    display: none;
}

.editorly-ad-header {
    max-width: var(--ed-container);
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* ---- Newsletter Widget ---- */
.editorly-newsletter-widget .newsletter-description {
    color: var(--ed-text-muted);
    margin-bottom: var(--ed-space-sm);
}

.editorly-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletter-email-input {
    padding: 10px 12px;
    border: 1px solid var(--ed-border);
    border-radius: 4px;
    width: 100%;
}

.newsletter-submit-button {
    background: var(--ed-primary);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.newsletter-admin-notice {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ---- Blog Pagination: Load More / Infinite Scroll ---- */
.editorly-load-more-wrap {
    text-align: center;
    margin-top: var(--ed-space-lg);
}

.editorly-load-more-btn {
    background: var(--ed-primary);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.editorly-load-more-btn:hover {
    opacity: 0.85;
}

.editorly-load-more-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.editorly-infinite-scroll-loading {
    text-align: center;
    color: var(--ed-text-muted);
    margin-top: var(--ed-space-lg);
}

.editorly-infinite-scroll-loading[hidden] {
    display: none;
}

/* ---- Numbered pagination ----
   Covers two different structures with one set of rules:

     the_posts_pagination()   <nav class="pagination"><div class="nav-links">
                              with the links as direct children.
     WooCommerce              <nav class="woocommerce-pagination"><ul class="page-numbers">
                              with each link wrapped in its own <li>.

   Note that the WooCommerce <ul> itself carries the class "page-numbers", which
   is why the item rules below are scoped through "li" rather than matching that
   class on its own — otherwise the whole list would be drawn as one large pill. */
.pagination,
.woocommerce-pagination {
    margin-top: var(--ed-space-lg);
}

.pagination .nav-links,
.woocommerce-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* WooCommerce's own stylesheet gives these list items borders and float. */
.woocommerce-pagination ul.page-numbers li {
    display: flex;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
}

.pagination .nav-links .page-numbers,
.woocommerce-pagination li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40px keeps every target comfortably tappable on a phone. */
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--ed-bg-soft);
    color: var(--ed-text);
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination .nav-links .page-numbers.current,
.woocommerce-pagination li .page-numbers.current {
    background: var(--ed-primary);
    color: #fff;
}

.pagination .nav-links a.page-numbers:hover,
.woocommerce-pagination li a.page-numbers:hover {
    background: var(--ed-primary);
    color: #fff;
}

.pagination .nav-links a.page-numbers:focus-visible,
.woocommerce-pagination li a.page-numbers:focus-visible {
    outline: 2px solid var(--ed-primary);
    outline-offset: 2px;
}

/* The ellipsis is a gap marker, not a destination: no pill, no hit area. */
.pagination .nav-links .page-numbers.dots,
.woocommerce-pagination li .page-numbers.dots {
    min-width: 0;
    padding: 0 4px;
    background: none;
    color: var(--ed-text-muted);
}

.pagination .nav-links .prev,
.pagination .nav-links .next,
.woocommerce-pagination li .prev,
.woocommerce-pagination li .next {
    padding: 0 20px;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .pagination .nav-links .page-numbers,
    .woocommerce-pagination li .page-numbers {
        transition: none;
    }
}

/* ---- Popular Posts Widget ---- */
.editorly-popular-posts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.popular-post-item {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: var(--ed-space-sm);
    padding-bottom: var(--ed-space-sm);
    border-bottom: 1px solid var(--ed-border);
}

.popular-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.popular-post-thumb img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.popular-post-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.popular-post-title {
    font-weight: 600;
    color: var(--ed-text);
    text-decoration: none;
    font-size: 0.95em;
    line-height: 1.3;
}

.popular-post-views {
    font-size: 0.8em;
    color: var(--ed-text-muted);
}

.entry-footer {
    margin-top: var(--ed-space-lg);
    padding-top: var(--ed-space-sm);
    border-top: 1px solid var(--ed-border);
    font-size: 0.9em;
}

.entry-footer .tag-links a {
    color: inherit;
    text-decoration: none;
}

.entry-footer .tag-links a:hover {
    color: var(--ed-primary);
}

/* ---- Archive Page Header ---- */
.page-header {
    margin-bottom: var(--ed-space-lg);
}

.page-header .page-title {
    margin-bottom: var(--ed-space-xs);
}

.archive-post-count {
    color: var(--ed-text-muted);
    font-size: 0.95em;
    margin: 0 0 var(--ed-space-sm);
}

.archive-description {
    color: var(--ed-text-muted);
    max-width: 720px;
    margin-bottom: var(--ed-space-sm);
}

.archive-tags-cloud {
    margin-top: var(--ed-space-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.archive-tags-cloud a {
    display: inline-block;
    background: var(--ed-bg-soft);
    color: var(--ed-text-muted) !important;
    padding: 4px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px !important;
}

.archive-tags-cloud a:hover {
    background: var(--ed-primary);
    color: #fff !important;
}

/* ---- Author Box ---- */
.author-box {
    display: flex;
    gap: var(--ed-space-md);
    background: var(--ed-bg-soft);
    border-radius: var(--ed-radius);
    padding: var(--ed-space-md);
    margin-top: var(--ed-space-lg);
    align-items: flex-start;
}

.archive-author-box {
    margin-top: var(--ed-space-md);
}

/* ---- Previous / Next Post Navigation ---- */
.post-navigation {
    margin-top: var(--ed-space-lg);
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ed-space-md);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    background: var(--ed-bg-soft);
    border-radius: var(--ed-radius);
    overflow: hidden;
}

.post-navigation a {
    display: block;
    padding: var(--ed-space-md);
    text-decoration: none;
    color: var(--ed-text);
    height: 100%;
}

.post-navigation .nav-direction {
    display: block;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ed-text-muted);
    margin-bottom: 6px;
    font-weight: 700;
}

.post-navigation .nav-title {
    display: block;
    font-weight: 800;
    line-height: 1.3;
}

.post-navigation .nav-next {
    text-align: right;
}

.post-navigation a:hover .nav-title {
    color: var(--ed-primary);
}

@media (max-width: 600px) {
    .post-navigation .nav-links {
        grid-template-columns: 1fr;
    }

    .post-navigation .nav-next {
        text-align: left;
    }
}

.author-avatar img {
    border-radius: 50%;
    width: 64px;
    height: 64px;
}

.author-name {
    margin: 0 0 4px;
    font-size: 1.05em;
}

.author-bio {
    margin: 0;
    color: var(--ed-text-muted);
    font-size: 0.95em;
}

/* ---- Related Posts ---- */
.related-posts {
    margin-top: var(--ed-space-xl);
    padding-top: var(--ed-space-lg);
    border-top: 1px solid var(--ed-border);
}

.related-posts-title {
    margin-bottom: var(--ed-space-md);
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ed-space-md);
}

.related-post-thumb img {
    border-radius: var(--ed-radius);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
}

.related-post-title {
    font-size: 0.95em;
    margin-top: var(--ed-space-xs);
}

.related-post-title a {
    color: var(--ed-text);
    text-decoration: none;
}

/* ---- Sidebar & Widgets ---- */
.widget-area {
    flex: 0 0 var(--ed-sidebar-width, 300px);
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

body.sidebar-left .site-content {
    flex-direction: row-reverse;
}

/* ---- Reading Rail (Split featured image style) ----
   The rail lives inside the article, below the hero, and the two-column grid
   that holds it starts there as well. It used to sit in the sidebar's flex
   slot, as a sibling of .site-main, which put it alongside the hero too: the
   featured image was left sharing its row with a 300px column and rendered at
   roughly half the width the layout is built around. The hero now spans the
   full container and the rail begins underneath it.

   align-items:start, so the rail keeps its own height instead of being
   stretched to match an article that may be many screens long. */
.editorly-split-body {
    display: grid;
    grid-template-columns: var(--ed-sidebar-width, 300px) minmax(0, 1fr);
    gap: var(--ed-space-lg);
    align-items: start;
}

/* Explicit placement, so the rail can sit on the left while staying after the
   article in the source — see the note in template-parts/content-single.php. */
.editorly-split-body .editorly-toc-rail {
    grid-column: 1;
    grid-row: 1;
}

.editorly-split-main {
    grid-column: 2;
    grid-row: 1;
}

/* minmax(0, 1fr) above and this together are what let a wide table or a
   carousel inside the post scroll on their own rather than stretching the
   column: a grid item's automatic minimum size is its content, not zero. */
.editorly-split-main {
    min-width: 0;
}


.editorly-toc-rail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ed-space-md);
}

body.sticky-sidebar .editorly-toc-rail {
    position: sticky;
    top: var(--ed-space-md);
}

.editorly-toc-rail .editorly-toc-card {
    max-width: none;
}

.editorly-rail-card {
    background: var(--ed-bg-soft);
    border: 1px solid var(--ed-border);
    border-radius: var(--ed-radius);
    padding: var(--ed-space-md);
}

.editorly-rail-card-title {
    margin: 0 0 var(--ed-space-sm);
    font-size: 1.1em;
}

.editorly-rail-topic-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.editorly-rail-topic-link {
    display: inline-block;
    background: var(--ed-panel-bg, #fff);
    border: 1px solid var(--ed-border);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.85em;
    text-decoration: none;
    color: inherit;
}

.editorly-rail-topic-link:hover {
    color: var(--ed-primary);
    border-color: var(--ed-primary);
}

.editorly-rail-topic-link.is-tag {
    color: var(--ed-text-muted);
}

.editorly-rail-latest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ed-space-sm);
}

.editorly-rail-latest-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.editorly-rail-latest-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

.editorly-rail-latest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editorly-rail-latest-title {
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    line-height: 1.35;
}

.editorly-rail-latest-title:hover {
    color: var(--ed-primary);
}

@media (max-width: 1024px) {
    /* One column. The explicit placement is released so both blocks fall back
       to source order — article, then rail — which is how the rail behaved
       below this width before the layout changed. */
    .editorly-split-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .editorly-split-body .editorly-toc-rail,
    .editorly-split-main {
        grid-column: auto;
        grid-row: auto;
    }

    body.sticky-sidebar .editorly-toc-rail {
        position: static;
    }
}

body.no-sidebar .widget-area {
    display: none;
}

/* ---- Sticky Sidebar --------------------------------------------------
   A JS-free technique: .site-content row uses align-items:stretch instead of
   flex-start, so the sidebar's own box grows as tall as the main content.
   position:sticky then sticks within the bounds of that box, which means it
   stops exactly where the main content ends, before the footer begins, with
   nothing to measure in JS. */
body.sticky-sidebar .site-content {
    align-items: stretch;
}

body.sticky-sidebar .widget-area {
    position: sticky;
    top: 20px;
}

/* When Sticky Header is also enabled, a little more top spacing keeps the
   sidebar from hiding behind it. The offset is approximate, since the exact
   sticky header height varies by header style. */
body.sticky-sidebar.has-sticky-header .widget-area {
    top: calc(var(--ed-header-height, 16px) + 40px);
}

@media (max-width: 782px) {
    body.sticky-sidebar .widget-area {
        position: static;
    }
}

.widget {
    margin-bottom: var(--ed-space-lg);
    padding-bottom: var(--ed-space-lg);
    border-bottom: 1px solid var(--ed-border);
}

.widget:last-child {
    border-bottom: none;
}

.widget-title {
    font-size: 1.1em;
    margin-bottom: var(--ed-space-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget ul li {
    margin-bottom: var(--ed-space-xs);
    padding-bottom: var(--ed-space-xs);
    border-bottom: 1px solid var(--ed-border);
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget a {
    text-decoration: none;
}

/* ---- Search Form (widget, 404 page, no-results, header search toggle) ---- */
.search-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.search-form .search-field {
    flex: 1;
    width: 100%;
    min-width: 180px;
    padding: 10px 14px;
    border: 1px solid var(--ed-border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.95em;
    background: var(--ed-panel-bg, #fff);
    transition: border-color 0.2s ease;
    color: var(--ed-text);
}

.search-form .search-field:focus {
    outline: none;
    border-color: var(--ed-primary);
}

.search-form .search-submit {
    padding: 10px 22px;
    background: var(--ed-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.search-form .search-submit:hover {
    opacity: 0.85;
}

.search-form label {
    flex: 1;
    min-width: 180px;
    margin: 0;
}

.search-form .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Search Block (the Gutenberg "Search" block, used in block-based
   widget areas). Its markup differs completely from the classic search form
   above, so it needs styling of its own. ---- */
.wp-block-search__inside-wrapper {
    border: none;
}

.wp-block-search__input {
    padding: 10px 14px !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 999px 0 0 999px !important;
    font-family: inherit;
    font-size: 0.95em;
}

.wp-block-search__input:focus {
    outline: none;
    border-color: var(--ed-primary) !important;
}

.wp-block-search__button {
    background: var(--ed-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 999px 999px 0 !important;
    padding: 10px 22px !important;
    font-weight: 600;
    cursor: pointer;
    fill: #fff;
}

.wp-block-search__button:hover {
    opacity: 0.85;
}

.wp-block-search__button-only .wp-block-search__button {
    border-radius: 999px !important;
}

/* ---- Comments ---- */
.comments-area {
    margin-top: var(--ed-space-xl);
    max-width: 720px;
}

.comments-title {
    margin-bottom: var(--ed-space-md);
}

.comment-list {
    list-style: none;
    margin: 0 0 var(--ed-space-xl);
    padding: 0;
}

.comment-list .children {
    list-style: none;
    margin: var(--ed-space-md) 0 0 var(--ed-space-lg);
    padding: 0;
}

.comment-list li {
    margin-bottom: var(--ed-space-md);
    padding-bottom: var(--ed-space-md);
    border-bottom: 1px solid var(--ed-border);
}

.comment-body .comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--ed-space-xs);
}

.comment-author.vcard {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-author .avatar {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.comment-author .fn {
    font-style: normal;
    font-weight: 700;
    font-size: 0.95em;
}

.comment-author .says {
    display: none;
}

.comment-metadata {
    font-size: 0.8em;
}

.comment-metadata a {
    color: var(--ed-text-muted);
    text-decoration: none;
}

.comment-content {
    margin-left: 50px;
    color: var(--ed-text);
}

.comment-content p {
    margin: 0 0 var(--ed-space-xs);
}

.comment-body .reply {
    margin-left: 50px;
    margin-top: var(--ed-space-xs);
}

.comment-reply-link {
    display: inline-block;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--ed-primary);
    text-decoration: none;
    border: 1px solid var(--ed-border);
    border-radius: 999px;
    padding: 4px 14px;
}

.comment-reply-link:hover {
    background: var(--ed-primary);
    color: #fff;
    border-color: var(--ed-primary);
}

.no-comments {
    color: var(--ed-text-muted);
}

/* ---- Comment Form ("Leave a Reply") ---- */
.comment-respond {
    background: var(--ed-bg-soft);
    border-radius: var(--ed-radius);
    padding: var(--ed-space-lg);
}

.comment-reply-title {
    margin: 0 0 var(--ed-space-sm);
    font-size: 1.4em;
}

.comment-reply-title small {
    margin-left: 10px;
    font-size: 0.5em;
    font-weight: 600;
}

.comment-reply-title small a {
    color: var(--ed-text-muted);
}

.comment-notes,
.comment-form p.logged-in-as {
    color: var(--ed-text-muted);
    font-size: 0.9em;
    margin-bottom: var(--ed-space-md);
}

.comment-form p {
    margin-bottom: var(--ed-space-md);
}

.comment-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ed-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1em;
    background: var(--ed-panel-bg, #fff);
    transition: border-color 0.2s ease;
    color: var(--ed-text);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--ed-primary);
}

.comment-form textarea {
    resize: vertical;
    min-height: 140px;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85em;
    color: var(--ed-text-muted);
}

.comment-form-cookies-consent input {
    margin-top: 3px;
}

.comment-form .form-submit {
    margin-bottom: 0;
}

.comment-form #submit {
    background: var(--ed-primary);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.comment-form #submit:hover {
    opacity: 0.85;
}

@media (max-width: 600px) {
    .comment-respond {
        padding: var(--ed-space-md);
    }

    .comment-content,
    .comment-body .reply {
        margin-left: 0;
    }
}

/* ---- Footer ---- */
.site-footer {
    background: var(--ed-footer-bg, #f7f7f7);
    border-top: 1px solid var(--ed-border);
    margin-top: var(--ed-space-xl);
    padding: var(--ed-space-lg) 20px;
}

.footer-top {
    max-width: var(--ed-container);
    margin: 0 auto var(--ed-space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ed-space-md);
}

.footer-logo {
    display: inline-block;
}

.footer-logo img {
    max-height: 36px;
    width: auto;
}

.footer-logo-text {
    font-weight: 700;
    font-size: 1.2em;
    color: var(--ed-text);
    text-decoration: none;
}

.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-social-icons a {
    color: var(--ed-text-muted, #6b6b6b);
    transition: color 0.2s ease;
}

.footer-social-icons a:hover {
    color: var(--ed-primary);
}

.footer-widgets {
    max-width: var(--ed-container);
    margin: 0 auto var(--ed-space-md);
    display: grid;
    gap: var(--ed-space-md);
}

.footer-widgets.footer-columns-1 { grid-template-columns: 1fr; }
.footer-widgets.footer-columns-2 { grid-template-columns: repeat(2, 1fr); }
.footer-widgets.footer-columns-3 { grid-template-columns: repeat(3, 1fr); }
.footer-widgets.footer-columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 782px) {
    .footer-widgets {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Reveal Footer effect -----------------------------------------------
   The classic "parallax reveal footer" technique: the footer becomes fixed
   behind the page, and #page takes a margin-bottom equal to the footer's real
   height (measured dynamically in JS, see main.js) so it leaves exactly enough
   room for the footer to be revealed at the end of the scroll. The normal
   flex-based sticky-footer layout (see body{} above) has to be switched off,
   because the two techniques are incompatible. */

body.reveal-footer {
    display: block;
}

body.reveal-footer #page {
    position: relative;
    z-index: 2;
    background: var(--ed-bg, #fff);
    min-height: 100vh;
}

body.reveal-footer .site-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    margin-top: 0;
}

/* ---- Footer navigation menu ---- */
.site-footer .main-navigation,
#footer-menu {
    max-width: var(--ed-container);
    margin: 0 auto var(--ed-space-md);
}

#footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ed-space-md);
    list-style: none;
    padding: 0;
}

#footer-menu.footer-menu-vertical {
    flex-direction: column;
    align-items: center;
    gap: var(--ed-space-xs);
}

#footer-menu li {
    margin: 0;
}

#footer-menu a {
    color: var(--ed-text-muted);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
}

#footer-menu a:hover {
    color: var(--ed-primary);
}

@media (max-width: 782px) {
    #footer-menu.footer-menu-horizontal {
        flex-direction: column;
        align-items: center;
        gap: var(--ed-space-xs);
    }
}

.site-info {
    max-width: var(--ed-container);
    margin: 0 auto;
    font-size: 0.9em;
    color: var(--ed-text-muted);
}

/* ---- Back to Top button ---- */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ed-primary);
    color: #fff;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 999;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*
 * Hidden on smartphones. The button sits in the same bottom-right corner as
 * the Mobile Bottom Navigation and would overlap it, and on a touch screen a
 * quick swipe up already gets the visitor back to the top far faster than
 * reaching for a 44px target. The breakpoint matches the one the bottom bar
 * uses, so the two rules can never disagree.
 */
@media (max-width: 781px) {
    .back-to-top {
        display: none;
    }
}

/* ---- Screen reader text ---- */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/*
 * The skip link is the exception: it is visually hidden like any other
 * screen-reader text until it takes focus, at which point it must become a
 * fully visible, clickable control. Without the focus rule a keyboard user
 * would tab to something they cannot see.
 */
.skip-link:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    /* The highest value in the theme: a keyboard user must always be able to
       reach this, whatever else is on screen. */
    z-index: var(--ed-z-skip-link);
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    margin: 0;
    padding: 12px 20px;
    background: var(--ed-bg, #fff);
    color: var(--ed-primary);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    font-weight: 600;
    text-decoration: none;
}

/*
 * ---- Focus visibility ----
 * A single consistent focus ring for every interactive element. :focus-visible
 * is used rather than :focus so the ring appears for keyboard and assistive
 * technology users but not on a mouse click, which is what makes designers
 * remove focus styles altogether. The :focus fallback below covers browsers
 * without :focus-visible support.
 *
 * outline-offset keeps the ring clear of the element's own border, and using
 * outline rather than border means nothing shifts position when focus moves.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ed-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus {
        outline: 2px solid var(--ed-primary);
        outline-offset: 2px;
    }
}

/*
 * Visitors who have asked their operating system to reduce motion get the same
 * interface without the animation. Transitions are collapsed rather than
 * removed so state changes still register, and smooth scrolling is turned off
 * because it is a common trigger for motion sensitivity.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Responsive ---- */
@media (max-width: 782px) {
    .site-content {
        flex-direction: column;
        padding: var(--ed-space-md) 16px;

        /*
         * align-items must return to stretch once the layout stacks.
         *
         * The desktop rule sets align-items:flex-start so the main column and
         * the sidebar align to the top of the row. In a column layout the
         * cross axis is horizontal, so that same value means "align to the
         * left and take only as much width as your content wants" — every
         * child shrinks to its content width instead of filling the screen.
         *
         * The effect was severe on anything whose own width depends on its
         * parent: on a 390px screen the main column measured 92px, and the
         * WooCommerce cart inside it collapsed with it.
         */
        align-items: stretch;
    }

    .widget-area {
        flex: 1 1 100%;
    }

    .main-navigation ul {
        display: none;
    }

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

    .posts-wrapper.layout-masonry {
        columns: 1;
    }

    .posts-wrapper.layout-grid {
        grid-template-columns: 1fr;
    }

    .entry-header .entry-title {
        font-size: 1.6em;
    }
}

/* ---- Tablet: cap columns at 2 before the mobile breakpoint, so settings
   using 4-6 columns do not get cramped on medium screens ---- */
@media (min-width: 783px) and (max-width: 1024px) {
    .posts-wrapper.layout-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .posts-wrapper.layout-masonry {
        columns: 2 !important;
    }
}

/* ---- Login / Register Popup ---- */
.editorly-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
}

.editorly-auth-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.editorly-auth-box {
    position: relative;
    max-width: 380px;
    margin: 8vh auto;
    background: var(--ed-panel-bg, #fff);
    border-radius: 12px;
    padding: var(--ed-space-lg);
    max-height: 84vh;
    overflow-y: auto;
}

.editorly-auth-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--ed-bg-soft);
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
}

.editorly-auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: var(--ed-space-md);
}

.editorly-auth-tab {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--ed-border);
    background: var(--ed-panel-bg, #fff);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.editorly-auth-tab.is-active {
    background: var(--ed-primary);
    border-color: var(--ed-primary);
    color: #fff;
}

.editorly-auth-message {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: var(--ed-space-md);
    font-size: 0.9em;
}

.editorly-auth-message.is-error {
    background: rgba(220, 53, 69, 0.1);
    color: var(--ed-error, #dc3545);
}

.editorly-auth-message.is-success {
    background: rgba(76, 175, 80, 0.1);
    color: var(--ed-success, #4caf50);
}

.editorly-auth-form .form-row {
    margin-bottom: var(--ed-space-md);
}

.editorly-auth-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 6px;
}

.editorly-auth-form input[type="text"],
.editorly-auth-form input[type="email"],
.editorly-auth-form input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ed-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box;
}

.editorly-auth-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9em;
}

.editorly-auth-remember label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

.editorly-auth-submit {
    width: 100%;
    background: var(--ed-primary);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.editorly-auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.editorly-auth-note {
    font-size: 0.8em;
    color: var(--ed-text-muted);
    text-align: center;
    margin-top: var(--ed-space-sm);
}

/* Honeypot: invisible to real visitors, only bots see and fill it. */
.editorly-auth-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body.editorly-auth-open {
    overflow: hidden;
}

/* ---- Authentication page template + reset password ---- */

/* The same panel, standing on its own page instead of floating over one.
   It reads the shared --ed-panel-bg token, so dark mode changes it by
   redefining a value rather than by out-specifying this rule. */
.editorly-auth-page {
    max-width: var(--ed-container);
    margin: 0 auto;
    padding: var(--ed-space-xl) var(--ed-space-sm);
}

.editorly-auth-inline {
    max-width: 420px;
    margin: 0 auto;
    background: var(--ed-panel-bg, #fff);
    border: 1px solid var(--ed-border);
    border-radius: var(--ed-radius);
    padding: var(--ed-space-lg);
}

.editorly-auth-panel-title {
    margin: 0 0 var(--ed-space-xs);
    font-size: 1.4em;
    line-height: 1.3;
}

.editorly-auth-intro {
    margin: 0 0 var(--ed-space-md);
    font-size: 0.92em;
    color: var(--ed-text-muted);
}

.editorly-auth-hint {
    margin: 6px 0 0;
    font-size: 0.8em;
    color: var(--ed-text-muted);
}

/* The field and its Show/Hide button share one row. The button is a sibling,
   not an overlay, so it never covers the text the visitor is typing and stays
   reachable by keyboard in the natural order. */
.editorly-auth-password-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.editorly-auth-password-wrap input[type="password"],
.editorly-auth-password-wrap input[type="text"] {
    /* Flex items default to min-width:auto, which lets a long value push the
       field wider than its row. Without this the button is shoved off the
       edge on a narrow screen. */
    min-width: 0;
    flex: 1 1 auto;
}

.editorly-auth-toggle-password {
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid var(--ed-border);
    border-radius: 8px;
    background: var(--ed-bg-soft);
    color: inherit;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
}

.editorly-auth-toggle-password:hover {
    border-color: var(--ed-primary);
    color: var(--ed-primary);
}

/* A password field is one of the few places a visible focus ring genuinely
   matters, so it is stated rather than left to the browser default. */
.editorly-auth-form input:focus-visible,
.editorly-auth-toggle-password:focus-visible {
    outline: 2px solid var(--ed-primary);
    outline-offset: 2px;
}

/* On the page template the button is also used as a link back to log in. */
a.editorly-auth-submit {
    display: block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .editorly-auth-page {
        padding: var(--ed-space-md) var(--ed-space-sm);
    }

    .editorly-auth-inline {
        padding: var(--ed-space-md);
    }
}

/* ---- Avatar ---- */
.editorly-user-avatar {
    border-radius: 50%;
    vertical-align: middle;
}

.header-account {
    display: flex;
    align-items: center;
}

.header-account-link {
    display: flex;
    align-items: center;
}

.header-account-link .dashicons {
    font-size: 22px;
}

/* =========================================
   Mobile Bottom Navigation
   See editorly_render_mobile_bottom_nav() in inc/mobile-bottom-nav.php.
   Visible ONLY below 782px; the footer is hidden at the same breakpoint
   when the feature is enabled (body.has-mobile-bottom-nav), otherwise it
   keeps displaying normally at every screen width.
   The bar is built from up to five owner-configured slots, so the item
   count varies — items are centred and width-capped to stay legible.
   ========================================= */
.editorly-mobile-bottom-nav {
    display: none;
}

@media (max-width: 782px) {
    body.has-mobile-bottom-nav .site-footer {
        display: none;
    }

    body.has-mobile-bottom-nav {
        /* Bottom breathing room so the fixed bar never covers the last
           slice of page content. */
        padding-bottom: 64px;
    }

    .editorly-mobile-bottom-nav {
        display: flex;
        align-items: stretch;
        justify-content: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 60px;
        background: var(--ed-panel-bg, #fff);
        border-top: 1px solid var(--ed-border);
        z-index: 900;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }

    html[data-editorly-scheme="dark"] .editorly-mobile-bottom-nav {
        background: #1a1a1a;
        border-top-color: #333;
    }
}

.editorly-mobile-nav-item {
    /* flex-basis 0 keeps every enabled slot equal; max-width stops two or
       three items from sprawling across a wide phone. */
    flex: 1 1 0;
    max-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--ed-text-muted, #6b6b6b);
    font-family: inherit;
}

.editorly-mobile-nav-item .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
}

.editorly-mobile-nav-label {
    font-size: 0.68em;
    font-weight: 600;
}

.editorly-mobile-nav-item.is-active,
.editorly-mobile-nav-item:hover {
    color: var(--ed-primary);
}

.editorly-mobile-nav-cart-icon {
    position: relative;
    display: inline-flex;
}

.editorly-mobile-nav-cart-icon .editorly-mini-cart-count {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--ed-primary);
    color: #fff;
    font-size: 0.6em;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* ---- Search overlay (triggered by the bottom nav's Search icon) ---- */
.editorly-mobile-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1002;
    background: rgba(0, 0, 0, 0.5);
}

.editorly-mobile-search-overlay.is-open {
    display: block;
}

.editorly-mobile-search-inner {
    background: var(--ed-panel-bg, #fff);
    padding: 20px;
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    gap: 12px;
}

html[data-editorly-scheme="dark"] .editorly-mobile-search-inner {
    background: #1a1a1a;
}

.editorly-mobile-search-inner .search-form {
    flex: 1;
}

.editorly-mobile-search-close {
    background: none;
    border: none;
    font-size: 1.8em;
    line-height: 1;
    cursor: pointer;
    color: var(--ed-text, #222);
    padding: 4px 8px;
}

/*
 * The header is lifted above the overlay while the menu is open.
 *
 * The panel lives inside the header, and a sticky header is position:fixed with
 * a z-index of its own — which makes it a stacking context. Everything inside
 * is then stacked relative to the header, not to the page, so the panel's own
 * z-index counts for nothing against an overlay that sits on the body. The
 * result was a menu correctly opened but buried underneath its own backdrop:
 * the page went dark, the links stopped responding, and only the close button
 * — which is on the body, not in the header — stayed reachable.
 *
 * Raising the header for as long as the menu is open takes the panel with it.
 * position:relative is added only to a header that is not already positioned,
 * so a stuck header keeps its fixed placement.
 */
body.editorly-menu-open .site-header {
    z-index: var(--ed-z-header-menu-open);
}

/*
 * A stuck header needs the lift stated at matching strength. The sticky rule
 * in header-styles.css is
 *   .has-sticky-header .site-header.is-stuck:not(.header-transparent)
 * — four class-level selectors — while the rule above carries two classes and
 * an element. The sticky rule therefore won, the header stayed at z-index 500
 * once the page was scrolled, and the panel went back under the overlay. The
 * bug appeared only after scrolling, because only then is .is-stuck present.
 */
body.editorly-menu-open.has-sticky-header .site-header.is-stuck:not(.header-transparent) {
    z-index: var(--ed-z-header-menu-open);
}

body.editorly-menu-open .site-header:not(.is-stuck) {
    position: relative;
}

/* ---- Slide-out menu: close button and overlay ----
   Created by main.js for Header Styles 1, 2, 3, 5 and 6, whose slide-out
   shipped with neither. Header Style 4 has its own pair in its template. */
.editorly-menu-close {
    display: none;
    /* Fixed rather than absolute: the button sits over the panel but lives in
       the body, so it has no positioned ancestor to measure against. */
    position: fixed;
    top: 12px;
    right: 12px;
    /* Above the header, which is itself lifted while the menu is open. */
    z-index: var(--ed-z-menu-close);
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    font-size: 30px;
    line-height: 1;
    /* A solid disc rather than a bare glyph. Against a white panel a plain
       cross is faint, and against the admin bar it disappeared entirely. */
    background: var(--ed-bg, #fff);
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    color: inherit;
    cursor: pointer;
}

.editorly-menu-overlay {
    display: none;
    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);
}

/* Above 782px the WordPress admin bar is fixed and 32px tall, so a button at
   the very top of the screen lands on it. Below that width the bar is
   absolute and scrolls away, leaving nothing to clear. */
body.admin-bar .editorly-menu-close {
    top: 44px;
}

@media (max-width: 782px) {
    body.admin-bar .editorly-menu-close {
        top: 12px;
    }

    body.mobile-menu-offcanvas.editorly-menu-open .editorly-menu-close {
        display: block;
    }

    /*
     * The overlay belongs to the slide-out panel, so it appears only when that
     * is the mobile menu style in use. Without the condition it was also being
     * drawn over the dropdown style, which has no panel to sit beneath it — the
     * page went dark, every link stopped responding, and only the close button
     * was left reachable above it.
     */
    body.mobile-menu-offcanvas .editorly-menu-overlay.is-visible {
        display: block;
    }



    /* The page behind must not scroll while the panel is open, or a swipe
       intended for the menu moves the article underneath instead. */
    /* Locking the page behind is likewise only right for a panel that covers
       it. A dropdown leaves the page visible, and freezing it there would stop
       a visitor scrolling for no reason. */
    body.mobile-menu-offcanvas.editorly-menu-open {
        overflow: hidden;
    }
}

/* =========================================
   Tablet: extend the mobile header up to 1024px
   =========================================
   The theme changes layout at 782px, which is the phone breakpoint. A tablet
   in portrait is only a little wider — 820px on most, 834px on the larger ones
   — so it lands on the full desktop header, where a menu of any length has
   nowhere near the room it needs. Landscape at 1024px is the same picture with
   a sidebar competing for width as well.

   When "Switch to Mobile Menu Below" is set to 1024px, this band repeats the
   mobile presentation between 783px and 1024px. It is written as a band rather
   than by changing the main breakpoint, so a site that is happy with the
   current behaviour is untouched.
   ========================================= */


/* The bottom bar follows the same breakpoint as the menu.
   Its own rules stop at 782px, so on a tablet the classic footer returned
   while the header had already switched to its mobile form — two different
   ideas of "small screen" on the same page. This band carries the bar, and the
   hidden footer, up to 1024px when that is what the site is set to. */
@media (min-width: 783px) and (max-width: 1024px) {
    body.nav-breakpoint-1024.has-mobile-bottom-nav .site-footer {
        display: none;
    }

    body.nav-breakpoint-1024.has-mobile-bottom-nav {
        padding-bottom: 64px;
    }

    body.nav-breakpoint-1024 .editorly-mobile-bottom-nav {
        display: flex;
        align-items: stretch;
        justify-content: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 60px;
        z-index: 900;
        /* The background, border and shadow are declared here as well as in the
           phone rules. They were only in the phone query, so extending the bar
           to tablets left it transparent — the page scrolled through it. */
        background: var(--ed-panel-bg, #fff);
        border-top: 1px solid var(--ed-border);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }

    html[data-editorly-scheme="dark"] body.nav-breakpoint-1024 .editorly-mobile-bottom-nav {
        background: #1a1a1a;
        border-top-color: #333;
    }

    /* The bar is wider here than on a phone, so the items are given a little
       more room rather than being stretched across the whole width. */
    body.nav-breakpoint-1024 .editorly-mobile-nav-item {
        max-width: 160px;
    }

    /* The back to top button shares the corner with the bar on a phone and is
       hidden there; the same applies once the bar reaches a tablet. */
    body.nav-breakpoint-1024.has-mobile-bottom-nav .back-to-top {
        display: none;
    }
}

@media (min-width: 783px) and (max-width: 1024px) {
    /* The nav is no longer a flex item competing for width, so the menu
       position setting has nothing to act on here. */
    body.nav-breakpoint-1024 .site-header .main-navigation {
        flex: 0 0 auto;
    }

    /* The sidebar stacks under the content, so the article is not squeezed
       into half a tablet screen. */
    body.nav-breakpoint-1024 .site-content {
        flex-direction: column;
        align-items: stretch;
    }

    body.nav-breakpoint-1024 .widget-area {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* =========================================
   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 .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        color: var(--ed-text, #222);
    }

    body.nav-breakpoint-1024 .header-style-1 .main-navigation,
    body.nav-breakpoint-1024 .header-style-5 .main-navigation,
    body.nav-breakpoint-1024 .header-style-6 .main-navigation {
        order: -1;
    }

    /* Same grouping as on phones — see the note beside the phone rule. */
    body.nav-breakpoint-1024 .site-header:not(.header-style-2) .header-inner {
        justify-content: flex-start;
        gap: 14px;
    }

    body.nav-breakpoint-1024.mobile-logo-left .site-header:not(.header-style-2) .header-inner .site-branding {
        margin-right: 56px;
    }

    body.nav-breakpoint-1024.mobile-logo-center .site-header:not(.header-style-2) .header-inner {
        position: relative;
    }

    body.nav-breakpoint-1024.mobile-logo-center .site-header:not(.header-style-2) .header-inner .site-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        max-width: calc(100% - 130px);
        text-align: center;
    }

    body.nav-breakpoint-1024.mobile-logo-center .site-header:not(.header-style-2) .header-inner .site-branding img {
        margin-left: auto;
        margin-right: auto;
    }

    body.nav-breakpoint-1024 .header-style-4 .menu-toggle {
        order: -1;
    }

    body.nav-breakpoint-1024 .header-style-3 .header-right {
        order: -1;
    }

    body.nav-breakpoint-1024 .header-style-3 .header-left {
        order: 1;
    }

    body.nav-breakpoint-1024 .main-navigation .sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding-left: var(--ed-space-sm);
        display: none;
    }

    body.nav-breakpoint-1024 .main-navigation li:hover > .sub-menu,
    body.nav-breakpoint-1024.dropdown-animation-fade .main-navigation li:hover > .sub-menu,
    body.nav-breakpoint-1024.dropdown-animation-slide .main-navigation li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    body.nav-breakpoint-1024 .main-navigation li.menu-item-has-children.is-expanded > .sub-menu {
        display: flex;
    }

    body.nav-breakpoint-1024 .main-navigation li.has-mega-menu > .sub-menu {
        max-width: none;
    }

    body.nav-breakpoint-1024 .main-navigation.offcanvas-navigation .menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: static;
        transform: none;
        visibility: visible;
        width: auto;
        max-width: none;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    body.nav-breakpoint-1024:not(.mobile-menu-offcanvas) .main-navigation .menu {
        display: none;
    }

    body.nav-breakpoint-1024:not(.mobile-menu-offcanvas) .main-navigation .menu.is-open {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--ed-panel-bg, #fff);
        border-top: 1px solid var(--ed-border);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        padding: var(--ed-space-sm) 20px;
        z-index: 500;
    }

    body.nav-breakpoint-1024.mobile-menu-offcanvas .main-navigation:not(.offcanvas-navigation) .menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--ed-mobile-menu-width, 300px);
        max-width: 85vw;
        background: var(--ed-panel-bg, #fff);
        padding: 56px 24px 24px;
        justify-content: flex-start;
        align-items: stretch;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s ease;
        z-index: var(--ed-z-offcanvas-panel);
        overflow-y: auto;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    }

    body.nav-breakpoint-1024.mobile-menu-offcanvas .main-navigation:not(.offcanvas-navigation) .menu.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    body.nav-breakpoint-1024.mobile-menu-offcanvas.editorly-menu-open .editorly-menu-close {
        display: block;
    }

    body.nav-breakpoint-1024.mobile-menu-offcanvas .editorly-menu-overlay.is-visible {
        display: block;
    }

    body.nav-breakpoint-1024.mobile-menu-offcanvas .main-navigation:not(.offcanvas-navigation) .menu.is-open {
        padding-top: 64px;
    }

    body.nav-breakpoint-1024.mobile-menu-offcanvas.editorly-menu-open {
        overflow: hidden;
    }
}