/* =========================================
   Editorly — Dark Mode
   Activated through [data-editorly-scheme="dark"] on <html>
   ========================================= */

html[data-editorly-scheme="dark"] {
    --ed-text: #e8e8e8;
    --ed-text-muted: #a0a0a0;
    --ed-border: #333333;
    --ed-bg-soft: #1e1e1e;

    /*
     * These two were missing, which is why anything built on them stayed light
     * in dark mode: the menu panels, the close button over them. Overriding the
     * variable is the right fix rather than writing a darker rule for each —
     * the panel backgrounds carry a long selector and a rule aimed at them
     * from here would lose on specificity, which is exactly what happened.
     */
    --ed-bg: #121212;
    --ed-panel-bg: #1e1e1e;
}

html[data-editorly-scheme="dark"] body {
    background: #121212;
    color: var(--ed-text);
}

html[data-editorly-scheme="dark"] .site-header,
html[data-editorly-scheme="dark"] .editorly-sticky-title,
html[data-editorly-scheme="dark"] .header-style-5 .header-topbar {
    background: #1a1a1a;
    border-color: #333;
}

html[data-editorly-scheme="dark"] .post-card,
html[data-editorly-scheme="dark"] .editorly-post-card,
html[data-editorly-scheme="dark"] .related-post-card,
html[data-editorly-scheme="dark"] .author-box,
html[data-editorly-scheme="dark"] .editorly-review-widget,
html[data-editorly-scheme="dark"] .woocommerce .editorly-products-grid li.product,
html[data-editorly-scheme="dark"] .offcanvas-navigation {
    /* Only the border is stated here. Every surface listed above now reads
       --ed-panel-bg for its background, which this file redefines once in the
       :root block, so there is nothing left to repeat per selector.

       This rule previously carried a background as well. When --ed-panel-bg was
       introduced it was removed on the understanding that all of these had been
       converted to the variable — but only .offcanvas-navigation actually had.
       The rest still held a literal #fff, so they lost their dark background
       with nothing to replace it: near-white text on a white card. They are all
       on the variable now, which is what makes this rule safe to keep short. */
    border-color: #333;
}

html[data-editorly-scheme="dark"] .site-title a,
html[data-editorly-scheme="dark"] h1,
html[data-editorly-scheme="dark"] h2,
html[data-editorly-scheme="dark"] h3,
html[data-editorly-scheme="dark"] h4,
html[data-editorly-scheme="dark"] .entry-title,
html[data-editorly-scheme="dark"] .post-card .entry-title a {
    color: #f5f5f5;
}

html[data-editorly-scheme="dark"] .site-footer {
    background: #1a1a1a;
    border-color: #333;
}

html[data-editorly-scheme="dark"] .share-btn {
    background: #1e1e1e;
    color: #e8e8e8;
}

/* ---- Toggle button ---- */
#editorly-dark-mode-toggle {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ed-border, #e5e5e5);
    cursor: pointer;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#editorly-dark-mode-toggle .icon-moon {
    display: none;
}

html[data-editorly-scheme="dark"] #editorly-dark-mode-toggle {
    background: #1e1e1e;
    color: #f5f5f5;
    border-color: #333;
}

html[data-editorly-scheme="dark"] #editorly-dark-mode-toggle .icon-sun {
    display: none;
}

html[data-editorly-scheme="dark"] #editorly-dark-mode-toggle .icon-moon {
    display: inline;
}

@media (max-width: 782px) {
    #editorly-dark-mode-toggle {
        bottom: auto;
        left: auto;
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        z-index: 1001;
    }

    /* The toggle is position:fixed, and below this width the admin bar is
       position:absolute and scrolls away with the page, so there is nothing to
       clear. The offset only pushed the button down into the content. */
    body.admin-bar #editorly-dark-mode-toggle {
        top: 16px;
    }

    /* Hidden while the offcanvas menu is open (Header Style 4), since both are
       fixed to the same corner of the screen and the toggle would sit on top
       of the panel.

       Driven by a class the script adds to the body, not by :has(). :has() is
       not available in every browser still in use, and there it failed
       silently — the toggle simply stayed on top of the open menu. */
    body.editorly-offcanvas-open #editorly-dark-mode-toggle {
        display: none;
    }
}

/* =========================================
   WPForms in dark mode
   ========================================= */
/*
   WPForms paints its labels, fields and descriptions from its own variables.
   Redefining those is far better than writing a colour rule per element: one
   block covers every field type the plugin has, including ones this theme has
   never seen.

   The variables are declared twice on purpose. WPForms emits its own set either
   on :root or on the form container depending on version and settings, and a
   declaration on the container wins over anything inherited from the document —
   so covering only one of the two would work on some sites and silently fail on
   others. */
html[data-editorly-scheme="dark"],
html[data-editorly-scheme="dark"] .wpforms-container,
html[data-editorly-scheme="dark"] .wpforms-container-full,
html[data-editorly-scheme="dark"] div.wpforms-container-full {
    --wpforms-label-color: var(--ed-text);
    --wpforms-label-sublabel-color: var(--ed-text-muted);
    --wpforms-field-text-color: var(--ed-text);
    --wpforms-field-background-color: var(--ed-panel-bg, #1e1e1e);
    --wpforms-field-border-color: var(--ed-border);
}

/* A safety net for older WPForms builds, which paint some text directly rather
   than through a variable. Matched to the plugin's own selector shape so it
   lands at the same weight, with the scheme attribute tipping it over. */
html[data-editorly-scheme="dark"] div.wpforms-container-full .wpforms-field-label,
html[data-editorly-scheme="dark"] div.wpforms-container-full .wpforms-field-label-inline,
html[data-editorly-scheme="dark"] div.wpforms-container-full .wpforms-page-indicator-page-title,
html[data-editorly-scheme="dark"] div.wpforms-container-full legend {
    color: var(--ed-text);
}

html[data-editorly-scheme="dark"] div.wpforms-container-full .wpforms-field-description,
html[data-editorly-scheme="dark"] div.wpforms-container-full .wpforms-field-sublabel {
    color: var(--ed-text-muted);
}

/* The fields themselves are stated directly, not only through the variables.
   WPForms binds its variable set to the form's own id on some builds, and an
   id outranks any number of classes — so a redefinition alone leaves the text
   boxes white on a dark page. A white input in a dark form is a defect rather
   than a preference, which is why this one takes over rather than yielding. */
html[data-editorly-scheme="dark"] div.wpforms-container-full input[type="text"],
html[data-editorly-scheme="dark"] div.wpforms-container-full input[type="email"],
html[data-editorly-scheme="dark"] div.wpforms-container-full input[type="url"],
html[data-editorly-scheme="dark"] div.wpforms-container-full input[type="tel"],
html[data-editorly-scheme="dark"] div.wpforms-container-full input[type="number"],
html[data-editorly-scheme="dark"] div.wpforms-container-full input[type="password"],
html[data-editorly-scheme="dark"] div.wpforms-container-full input[type="search"],
html[data-editorly-scheme="dark"] div.wpforms-container-full textarea,
html[data-editorly-scheme="dark"] div.wpforms-container-full select {
    background-color: var(--ed-panel-bg, #1e1e1e);
    border-color: var(--ed-border);
    color: var(--ed-text);
}

/* =========================================
   Elementor's own post widgets in dark mode
   =========================================
   Elementor's Posts widget paints its Cards skin white from its own
   stylesheet, at a selector of two classes. Two classes plus an element
   outranks that, so nothing here needs !important.

   That margin is the point, and it is what makes this safe to ship switched
   on. When the site owner picks a card colour in the widget, Elementor writes
   it against that element's unique class, which outranks this rule — so their
   choice stands and the theme only steps in where nothing was chosen.

   Only surfaces are touched: the card, its border, the meta separator and the
   meta text. Title and "read more" colours are deliberately left alone. They
   are legible on either surface and normally come from the site's global
   palette, which is a decision the owner made rather than a dark-mode defect.
   ========================================= */
html[data-editorly-scheme="dark"] .elementor-post__card {
    background-color: var(--ed-panel-bg, #1e1e1e);
    border-color: var(--ed-border);
}

html[data-editorly-scheme="dark"] .elementor-post__card .elementor-post__meta-data {
    border-top-color: var(--ed-border);
    color: var(--ed-text-muted);
}

/* =========================================
   Elementor backgrounds in dark mode
   =========================================
   A background image chosen for a light page — a paper texture, a pale
   illustration, a photograph with a bright cast — usually fights the dark
   palette rather than complementing it, and often leaves text unreadable.

   Two ways to deal with it, because the right answer differs per site:

   1. The "Remove Elementor Backgrounds in Dark Mode" option under Colors,
      which applies site-wide and outputs the body.editorly-dark-no-elementor-bg
      rules below.
   2. The .dark-no-bg class, added to a single section or container through
      Elementor's CSS Classes field (Advanced tab), when only some of them
      should lose their background.

   background-image is cleared rather than background, so a solid colour set in
   Elementor still applies and the section does not collapse to transparent
   unless that is what the site owner chose. !important is needed because
   Elementor writes these backgrounds into its own generated stylesheet, which
   loads after the theme's.
   ========================================= */

/* Backgrounds set in Elementor's Page Settings or Site Settings are written
   onto the body itself — Elementor emits rules such as
   body.elementor-page-123 { background-image: ... } for a page, and
   .elementor-kit-45 { ... } for the site default, where that kit class also
   lives on the body. Targeting the body covers both, and html is included for
   the rarer case of a background applied there. */
html[data-editorly-scheme="dark"] body.editorly-dark-no-elementor-bg,
html[data-editorly-scheme="dark"] body.editorly-dark-no-elementor-bg .elementor-section,
html[data-editorly-scheme="dark"] body.editorly-dark-no-elementor-bg .elementor-container,
html[data-editorly-scheme="dark"] body.editorly-dark-no-elementor-bg .e-con,
html[data-editorly-scheme="dark"] body.editorly-dark-no-elementor-bg .e-con-inner,
html[data-editorly-scheme="dark"] body.editorly-dark-no-elementor-bg .elementor-widget-wrap,
html[data-editorly-scheme="dark"] .dark-no-bg,
html[data-editorly-scheme="dark"] .dark-no-bg > .elementor-container,
html[data-editorly-scheme="dark"] .dark-no-bg > .e-con-inner {
    background-image: none !important;
}

/* Elementor renders section overlays as a separate absolutely positioned
   layer, so clearing the background alone would leave a tint floating over
   nothing. */
html[data-editorly-scheme="dark"] body.editorly-dark-no-elementor-bg .elementor-background-overlay,
html[data-editorly-scheme="dark"] .dark-no-bg > .elementor-background-overlay {
    background-image: none !important;
    opacity: 0 !important;
}

/* The toggle sits bottom-left by default and moves to the top-right on phones,
   where the mobile bottom bar occupies that corner. When the bar is carried up
   to tablet widths, the toggle has to move with it — otherwise it lands on top
   of the bar on exactly the screens the setting was meant to fix. */
@media (min-width: 783px) and (max-width: 1024px) {
    body.nav-breakpoint-1024.has-mobile-bottom-nav #editorly-dark-mode-toggle {
        bottom: auto;
        left: auto;
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        z-index: 1001;
    }
}

/* Group headings stay quieter than the items they label, but must not vanish
   against the dark surface. */
html[data-editorly-scheme="dark"] .main-navigation .menu-group-heading-text {
    color: var(--ed-text-muted);
}