/* =========================================
   Dark Mode Toggle — Standalone Styles
   Only the variables + toggle switch needed
   outside WordPress (e.g. Next.js embed).
   ========================================= */

/* Variables used by the toggle */
:root {
    --mz-dm-card: #1f2937;
    --mz-dm-border: #374151;

    /* Track + knob */
    --mz-dm-track-bg: #e4e7ec;
    --mz-dm-track-border: #d3d7de;
    --mz-dm-knob-bg: #ffffff;
    --mz-dm-track-bg-dark: #374151;
    --mz-dm-track-border-dark: #4b5563;
    --mz-dm-knob-bg-dark: #111827;

    /* Icons. The "active" tones sit on the knob, the "idle" tones on the track.
       Both pairs clear 3:1 against their own backdrop (WCAG AA, non-text). */
    --mz-dm-sun-color: #f59e0b;      /* legacy name, kept: used elsewhere in the DM sheet */
    --mz-dm-sun-active: #d97706;     /* on the white knob */
    --mz-dm-sun-idle: #9ca3af;       /* on the dark track */
    --mz-dm-moon-active: #fbbf24;    /* on the dark knob */
    --mz-dm-moon-idle: #6b7280;      /* on the light track */

    /* Motion — 08-motion-principles.md scale */
    --mz-dm-duration: 200ms;
    --mz-dm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================================
   Toggle Switch — Fixed Position

   Geometry is intentionally physical (left / translateX), not logical:
   a switch is not text, and WordPress (RTL) and the Next.js embed must render
   the sun/moon on the same side. Sun left, moon right, in both directions.

   High specificity + !important required to defeat Elementor / theme global
   <button> styles that otherwise paint the toggle in the site accent color.
   ========================================= */
html body button.mz-dark-toggle,
html body button.mz-dark-toggle:hover,
html body button.mz-dark-toggle:focus,
html body button.mz-dark-toggle:active {
    position: fixed !important;
    top: 120px !important;
    left: 20px !important;
    width: 68px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--mz-dm-track-bg) !important;
    background-color: var(--mz-dm-track-bg) !important;
    background-image: none !important;
    border: 1px solid var(--mz-dm-track-border) !important;
    border-radius: 999px !important;
    display: block !important;
    cursor: pointer !important;
    z-index: 999999 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    transition: background-color var(--mz-dm-duration) var(--mz-dm-ease),
                border-color var(--mz-dm-duration) var(--mz-dm-ease),
                box-shadow var(--mz-dm-duration) var(--mz-dm-ease) !important;
    color: var(--mz-dm-card) !important;
    text-decoration: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Expand the hit area to 44px tall without growing the visible track. */
html body button.mz-dark-toggle::before {
    content: "" !important;
    position: absolute !important;
    inset: -5px 0 !important;
    border-radius: inherit !important;
}

html[data-theme="dark"] body button.mz-dark-toggle,
html[data-theme="dark"] body button.mz-dark-toggle:hover,
html[data-theme="dark"] body button.mz-dark-toggle:focus,
html[data-theme="dark"] body button.mz-dark-toggle:active {
    background: var(--mz-dm-track-bg-dark) !important;
    background-color: var(--mz-dm-track-bg-dark) !important;
    background-image: none !important;
    border-color: var(--mz-dm-track-border-dark) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* =========================================
   Knob — slides between the two icons
   ========================================= */
.mz-dark-toggle .mz-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mz-dm-knob-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transform: translateX(0);
    transition: transform var(--mz-dm-duration) var(--mz-dm-ease),
                background-color var(--mz-dm-duration) var(--mz-dm-ease);
    z-index: 1;
}

html[data-theme="dark"] .mz-dark-toggle .mz-toggle-knob {
    background: var(--mz-dm-knob-bg-dark);
    transform: translateX(32px);
}

/* =========================================
   Icons — both always visible.
   The one under the knob is the active mode.
   ========================================= */
.mz-dark-toggle .mz-icon-sun,
.mz-dark-toggle .mz-icon-moon {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    z-index: 2;
    transition: color var(--mz-dm-duration) var(--mz-dm-ease);
}

.mz-dark-toggle .mz-icon-sun {
    left: 7px;
}

.mz-dark-toggle .mz-icon-moon {
    left: 39px;
}

/* Light mode: sun is active (on the knob), moon is idle (on the track) */
.mz-dark-toggle .mz-icon-sun {
    color: var(--mz-dm-sun-active);
}

.mz-dark-toggle .mz-icon-moon {
    color: var(--mz-dm-moon-idle);
}

/* Dark mode: the roles swap */
html[data-theme="dark"] .mz-dark-toggle .mz-icon-sun {
    color: var(--mz-dm-sun-idle);
}

html[data-theme="dark"] .mz-dark-toggle .mz-icon-moon {
    color: var(--mz-dm-moon-active);
}

/* =========================================
   Hover & Press
   ========================================= */
html body button.mz-dark-toggle:hover {
    border-color: var(--mz-dm-sun-active) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35) !important;
}

html[data-theme="dark"] body button.mz-dark-toggle:hover {
    border-color: var(--mz-dm-moon-active) !important;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.35) !important;
}

html body button.mz-dark-toggle:active .mz-toggle-knob {
    transform: translateX(0) scale(0.92);
    transition-duration: 100ms;
}

html[data-theme="dark"] body button.mz-dark-toggle:active .mz-toggle-knob {
    transform: translateX(32px) scale(0.92);
    transition-duration: 100ms;
}

/* Accessibility — keyboard focus ring */
html body button.mz-dark-toggle:focus-visible {
    outline: 3px solid rgba(51, 100, 173, .45) !important;
    outline-offset: 3px !important;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html body button.mz-dark-toggle,
    .mz-dark-toggle .mz-toggle-knob,
    .mz-dark-toggle .mz-icon-sun,
    .mz-dark-toggle .mz-icon-moon {
        transition: none !important;
    }

    html body button.mz-dark-toggle:active .mz-toggle-knob {
        transform: translateX(0) !important;
    }

    html[data-theme="dark"] body button.mz-dark-toggle:active .mz-toggle-knob {
        transform: translateX(32px) !important;
    }
}

/* =========================================
   Mobile — the switch stands up

   Below the phone/tablet boundary the pill rotates to portrait: sun on top,
   moon on the bottom, knob sliding down instead of across. It keeps the toggle
   off the horizontal axis where thumbs and sticky UI compete for room on a
   narrow screen, and it stays clear of content pinned to the side edges.
   ========================================= */
@media (max-width: 767px) {
    html body button.mz-dark-toggle,
    html body button.mz-dark-toggle:hover,
    html body button.mz-dark-toggle:focus,
    html body button.mz-dark-toggle:active {
        width: 36px !important;
        height: 68px !important;
    }

    /* Track is narrower than the 44px minimum, so widen the hit area instead. */
    html body button.mz-dark-toggle::before {
        inset: 0 -5px !important;
    }

    /* Same 7 / 39 offsets as desktop, just on the other axis. */
    .mz-dark-toggle .mz-icon-sun {
        left: 7px;
        top: 7px;
        margin-top: 0;
    }

    .mz-dark-toggle .mz-icon-moon {
        left: 7px;
        top: 39px;
        margin-top: 0;
    }

    .mz-dark-toggle .mz-toggle-knob {
        transform: translateY(0);
    }

    html[data-theme="dark"] .mz-dark-toggle .mz-toggle-knob {
        transform: translateY(32px);
    }

    html body button.mz-dark-toggle:active .mz-toggle-knob {
        transform: translateY(0) scale(0.92);
    }

    html[data-theme="dark"] body button.mz-dark-toggle:active .mz-toggle-knob {
        transform: translateY(32px) scale(0.92);
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    html body button.mz-dark-toggle:active .mz-toggle-knob {
        transform: translateY(0) !important;
    }

    html[data-theme="dark"] body button.mz-dark-toggle:active .mz-toggle-knob {
        transform: translateY(32px) !important;
    }
}

/* =========================================
   Smooth Transition
   ========================================= */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.mz-transitioning,
html.mz-transitioning * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* The knob must keep its own timing during a theme switch, otherwise the
   blanket .mz-transitioning rule above suppresses the slide. */
html.mz-transitioning .mz-dark-toggle .mz-toggle-knob {
    transition: transform var(--mz-dm-duration) var(--mz-dm-ease),
                background-color var(--mz-dm-duration) var(--mz-dm-ease) !important;
}

/* =========================================
   Header forms (3.2.0)

   The toggle lives in the header now. Two forms, one behaviour
   (any [data-mz-theme-toggle] flips the theme, see mz-dark-mode.js):

     .mz-theme-btn     desktop, beside search: a bare icon, no circle
     .mz-theme-switch  phone and tablet, in the mega menu drawer head

   Both sit on the green header / drawer head, in both themes.
   This file is also what the Next.js site loads, so the two sites share
   one set of rules. Placement belongs to each header, not to this file.
   ========================================= */

/* A header form retires the floating toggle at the width it covers, from the
   first paint: the button from 1024px up (it is hidden below), the drawer
   switch below 1024px (the burger that opens the drawer is hidden above).
   A page with only one form keeps the floating toggle at the other width.
   display:none also takes it out of the tab order and the accessibility tree. */
@media (min-width: 1024px) {
    html body:has(.mz-theme-btn[data-mz-theme-toggle]) button#mzGlobalToggle {
        display: none !important;
    }
}
@media (max-width: 1023px) {
    html body:has(.mz-theme-switch[data-mz-theme-toggle]) button#mzGlobalToggle {
        display: none !important;
    }
}

/* ---------- Desktop: icon button ----------
   Explicit resets with !important: Elementor's kit styles every <button>
   (accent background, padding, border) and would otherwise paint it. */
html body button.mz-theme-btn,
html body button.mz-theme-btn:hover,
html body button.mz-theme-btn:focus,
html body button.mz-theme-btn:active {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-decoration: none !important;
    outline: none !important;
    transition: background-color var(--mz-dm-duration) var(--mz-dm-ease) !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Hover: a soft rounded square appears behind the icon. */
html body button.mz-theme-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

html body button.mz-theme-btn svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
}

/* Light: a white moon (the way to night). Dark: a gold sun (the way back). */
html body button.mz-theme-btn .mz-icon-sun {
    display: none !important;
}

html[data-theme="dark"] body button.mz-theme-btn,
html[data-theme="dark"] body button.mz-theme-btn:hover,
html[data-theme="dark"] body button.mz-theme-btn:focus,
html[data-theme="dark"] body button.mz-theme-btn:active {
    color: #d4a12a !important;
}

html[data-theme="dark"] body button.mz-theme-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body button.mz-theme-btn .mz-icon-sun {
    display: block !important;
}

html[data-theme="dark"] body button.mz-theme-btn .mz-icon-moon {
    display: none !important;
}

/* No circle means nothing outlines the control: keyboard focus must. */
html body button.mz-theme-btn:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* Below desktop the drawer switch takes over. */
@media (max-width: 1023px) {
    html body button.mz-theme-btn,
    html body button.mz-theme-btn:hover,
    html body button.mz-theme-btn:focus,
    html body button.mz-theme-btn:active {
        display: none !important;
    }
}

/* ---------- Phone and tablet: drawer switch ----------
   A <div role="switch">: the drawer unsets every <button> inside it.
   The whole row (label + track) is the control, so the label is a target too. */
html body .mz-theme-switch {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    border-radius: 999px !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

html body .mz-theme-switch .mz-theme-switch-label {
    color: #ffffff !important;
    font-family: Fredoka, Heebo, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Physical geometry, as in the floating switch: sun left, moon right. */
html body .mz-theme-switch .mz-theme-track {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 60px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    direction: ltr !important;
    transition: background-color var(--mz-dm-duration) var(--mz-dm-ease),
                border-color var(--mz-dm-duration) var(--mz-dm-ease) !important;
}

html body .mz-theme-switch .mz-theme-knob {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    transform: translateX(0) !important;
    transition: transform var(--mz-dm-duration) var(--mz-dm-ease),
                background-color var(--mz-dm-duration) var(--mz-dm-ease) !important;
    z-index: 1 !important;
}

html body .mz-theme-switch .mz-theme-track svg {
    position: absolute !important;
    top: 6px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    z-index: 2 !important;
    transition: color var(--mz-dm-duration) var(--mz-dm-ease) !important;
}

html body .mz-theme-switch .mz-icon-sun {
    left: 6px !important;
    color: var(--mz-dm-sun-active) !important;
}

html body .mz-theme-switch .mz-icon-moon {
    left: 36px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] body .mz-theme-switch .mz-theme-track {
    background: var(--mz-dm-track-bg-dark) !important;
    border-color: var(--mz-dm-track-border-dark) !important;
}

html[data-theme="dark"] body .mz-theme-switch .mz-theme-knob {
    background: var(--mz-dm-knob-bg-dark) !important;
    transform: translateX(28px) !important;
}

html[data-theme="dark"] body .mz-theme-switch .mz-icon-sun {
    color: var(--mz-dm-sun-idle) !important;
}

html[data-theme="dark"] body .mz-theme-switch .mz-icon-moon {
    color: var(--mz-dm-moon-active) !important;
}

html body .mz-theme-switch:focus-visible .mz-theme-track {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* The knob keeps its own timing through a theme switch (see .mz-transitioning above). */
html.mz-transitioning body .mz-theme-switch .mz-theme-knob {
    transition: transform var(--mz-dm-duration) var(--mz-dm-ease),
                background-color var(--mz-dm-duration) var(--mz-dm-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body button.mz-theme-btn,
    html body .mz-theme-switch .mz-theme-track,
    html body .mz-theme-switch .mz-theme-knob,
    html body .mz-theme-switch .mz-theme-track svg,
    html.mz-transitioning body .mz-theme-switch .mz-theme-knob {
        transition: none !important;
    }
}