/*
 ============================================================
 dark.css: Dark mode for Living In Vero / Starfish Team
 Load AFTER site.css. Works in two ways:
   1. Automatically when the visitor's OS is set to dark
   2. Manually via <html data-theme="dark"> / "light" (see theme-toggle.js)
 ============================================================
*/

/* ── Manual dark ─────────────────────────────────────────── */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-nav-bg:          #1d2d3a;
    --color-nav-link:        #e6edf3;
    --color-nav-link-hover:  #ffffff;
    --color-nav-link-border: #3a566b;
    --color-nav-hover-bg:    #2d5573;
    --color-nav-sub-bg:      rgba(20,32,43,0.85);

    --color-masthead-bg:     #121c26;
    --color-masthead-shadow: #000000;

    --color-sidebar-bg-from: #1a2430;
    --color-sidebar-bg-to:   #2a4a63;
    --color-sidebar-border:  #3a4655;

    --color-content-border:  #3a4655;
    --color-body-bg:         #161b22;

    --color-footer-bg:       #10161c;
    --color-footer-border:   #3a4655;
    --color-footer-text:     #c9d1d9;
    --color-footer-link:     #9aa7b3;
    --color-footer-link-hover: #ffffff;

    --color-link:            #8ab8e0;
    --color-link-hover:      #ffffff;
    --color-text:            #e6edf3;

    --shadow-masthead: 0px 0px 30px #000;
    --shadow-nav:      0px 0px 30px rgba(0,0,0,.6);
    --shadow-footer:   inset 0px 16px 2px rgba(255,255,255,.03);
}

/* ── Automatic dark (OS preference), unless visitor chose light ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-nav-bg:          #1d2d3a;
        --color-nav-link:        #e6edf3;
        --color-nav-link-hover:  #ffffff;
        --color-nav-link-border: #3a566b;
        --color-nav-hover-bg:    #2d5573;
        --color-nav-sub-bg:      rgba(20,32,43,0.85);

        --color-masthead-bg:     #121c26;
        --color-masthead-shadow: #000000;

        --color-sidebar-bg-from: #1a2430;
        --color-sidebar-bg-to:   #2a4a63;
        --color-sidebar-border:  #3a4655;

        --color-content-border:  #3a4655;
        --color-body-bg:         #161b22;

        --color-footer-bg:       #10161c;
        --color-footer-border:   #3a4655;
        --color-footer-text:     #c9d1d9;
        --color-footer-link:     #9aa7b3;
        --color-footer-link-hover: #ffffff;

        --color-link:            #8ab8e0;
        --color-link-hover:      #ffffff;
        --color-text:            #e6edf3;

        --shadow-masthead: 0px 0px 30px #000;
        --shadow-nav:      0px 0px 30px rgba(0,0,0,.6);
        --shadow-footer:   inset 0px 16px 2px rgba(255,255,255,.03);
    }
}

/* ── Rules that site.css hard-codes (not variables) ──────── */
/* Selectors are written twice (manual + automatic) on purpose. */

/* Darken the fixed background photo */
:root[data-theme="dark"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(8,12,18,.72);
    z-index: -1;
    pointer-events: none;
}
:root[data-theme="dark"] .p7DMM01 ul ul a,
:root[data-theme="dark"] .p7DMM01 ul ul a:hover { color: #e6edf3; }
:root[data-theme="dark"] .p7DMM01 ul ul a:hover { background-color: rgba(255,255,255,0.12); border-color: #5d7b92; }
:root[data-theme="dark"] .p7DMM01 ul ul a { border-color: #3a566b; }
:root[data-theme="dark"] .p7DMM01 ul ul a.current_mark { color: #8ab8e0; }
:root[data-theme="dark"] img { opacity: .92; }
:root[data-theme="dark"] .fancy { border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background-color: #0f141a;
    color: #e6edf3;
    border: 1px solid #3a4655;
}
:root[data-theme="dark"] table.mft-adaptive td,
:root[data-theme="dark"] table.mft-adaptive th { border-color: #3a4655; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(8,12,18,.72);
        z-index: -1;
        pointer-events: none;
    }
    :root:not([data-theme="light"]) .p7DMM01 ul ul a,
    :root:not([data-theme="light"]) .p7DMM01 ul ul a:hover { color: #e6edf3; }
    :root:not([data-theme="light"]) .p7DMM01 ul ul a:hover { background-color: rgba(255,255,255,0.12); border-color: #5d7b92; }
    :root:not([data-theme="light"]) .p7DMM01 ul ul a { border-color: #3a566b; }
    :root:not([data-theme="light"]) .p7DMM01 ul ul a.current_mark { color: #8ab8e0; }
    :root:not([data-theme="light"]) img { opacity: .92; }
    :root:not([data-theme="light"]) .fancy { border-color: rgba(255,255,255,.12); }
    :root:not([data-theme="light"]) input,
    :root:not([data-theme="light"]) textarea,
    :root:not([data-theme="light"]) select {
        background-color: #0f141a;
        color: #e6edf3;
        border: 1px solid #3a4655;
    }
    :root:not([data-theme="light"]) table.mft-adaptive td,
    :root:not([data-theme="light"]) table.mft-adaptive th { border-color: #3a4655; }
}

/* ── Toggle button ───────────────────────────────────────── */
/* Switch: sun on the left, moon on the right, knob slides */
.theme-toggle {
    position: fixed;
    right: 14px;
    bottom: 56px;           /* sits above the fixed footer */
    z-index: 30;
    width: 62px;
    height: 32px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #517186;
    background: #7BA4C1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
    transition: background-color .25s ease, border-color .25s ease;
    font-size: 15px;
    line-height: 30px;
}
.theme-toggle .tt-icon {
    position: absolute;
    top: 0;
    width: 30px;
    text-align: center;
    pointer-events: none;
}
.theme-toggle .tt-sun  { left: 1px; }
.theme-toggle .tt-moon { right: 1px; }
.theme-toggle .tt-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    transition: transform .25s ease, background-color .25s ease;
}
.theme-toggle:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* On state (dark) */
.theme-toggle[aria-checked="true"] {
    background: #1d2d3a;
    border-color: #3a566b;
}
.theme-toggle[aria-checked="true"] .tt-knob {
    transform: translateX(30px);
    background: #e6edf3;
}

/* ── Menu theme button (emoji, in toolbar + last menu item) ── */
.theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    padding: 4px 8px;
    vertical-align: middle;
    opacity: .9;
}
.theme-btn:hover, .theme-btn:focus { opacity: 1; }
.p7DMM01 ul li.p7dmm-desktop-only { padding: 10px 0; }
.p7DMM01 ul li.p7dmm-desktop-only .theme-btn { padding: 10px 12px; }
@media only screen and (max-width: 700px) {
    .p7dmm-desktop-only { display: none !important; }
}