/* Colorado Power Partners (CPP) Theme System */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/* Dark theme (default) */
:root, [data-theme="dark"] {
    --bg-dark: #0d1117;
    --bg-surface: #161b22;
    --bg-card: #1c2128;
    --bg-hover: #262c36;
    --border: #30363d;
    --text-primary: #f0f6fc;
    --text-secondary: #8b949e;
    --text-muted: #848d97;
    --accent: #e59537;
    /* Accent used as text (links, labels). --accent itself is for fills behind dark text. */
    --accent-text: #e59537;
    --accent-dim: rgba(229, 149, 55, 0.15);
    --accent-bright: #f5a742;
    --cpp-gold: #e59537;
    --cpp-gold-dim: rgba(229, 149, 55, 0.18);
    --virt-color: #f5a742;
    --virt-dim: rgba(245, 167, 66, 0.15);
    --twin-color: #f5a742;
    --twin-dim: rgba(245, 167, 66, 0.15);
    --human-color: #f0f6fc;
    --green: #3fb950;
    --green-dim: rgba(63, 185, 80, 0.15);
    --amber: #d29922;
    --amber-dim: rgba(210, 153, 34, 0.15);
    --quiet-color: #8b949e;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
}

/* Light theme — explicit !important to override brand-hydrator dynamic styles */
:root[data-theme="light"], [data-theme="light"], html[data-theme="light"] {
    --bg-dark: #f6f8fa !important;
    --bg-surface: #ffffff !important;
    --bg-card: #f0f2f5 !important;
    --bg-hover: #e6e8ec !important;
    --border: #d0d7de !important;
    --text-primary: #1f2328 !important;
    --text-secondary: #656d76 !important;
    --text-muted: #656d76 !important;
    --accent: #c97e28 !important;
    --accent-text: #9a5b12 !important;
    --accent-dim: rgba(201, 126, 40, 0.14) !important;
    --accent-bright: #e59537 !important;
    --cpp-gold: #c97e28 !important;
    --cpp-gold-dim: rgba(201, 126, 40, 0.16) !important;
    --virt-color: #b87318 !important;
    --virt-dim: rgba(184, 115, 24, 0.14) !important;
    --twin-color: #b87318 !important;
    --twin-dim: rgba(184, 115, 24, 0.14) !important;
    --human-color: #1f2328 !important;
    --green: #1a7f37 !important;
    --green-dim: rgba(26, 127, 55, 0.14) !important;
    --amber: #9a6700 !important;
    --amber-dim: rgba(154, 103, 0, 0.14) !important;
    --quiet-color: #656d76 !important;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06) !important;
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Theme Switcher */
.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px;
    position: relative;
    z-index: 10;
}

.theme-btn {
    background: none;
    border: none;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    transition: all 0.15s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.theme-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.theme-btn.active {
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Mobile first: on phones the top nav links become a swipeable strip instead of
   forcing the page wider than the screen. Pages set the nav's layout; these rules
   only let it shrink and scroll. */
@media (max-width: 760px) {
    .nav-links {
        min-width: 0;
        flex: 1 1 auto;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links > * { flex-shrink: 0; white-space: nowrap; }
    .nav-right { min-width: 0; flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; }
    .page-header-right { min-width: 0; flex-wrap: wrap; }
    /* Server-rendered pages (venues, rooms, profiles) use .top-nav with an unnamed link row. */
    .top-nav { flex-wrap: wrap; row-gap: 8px; }
    .top-nav > div { min-width: 0; flex-wrap: wrap; }
}

/* Phones: iOS zooms in when an input's text is under 16px, then members have to pinch back
   out to scroll. Keep every text field at 16px or more on touch screens and narrow windows. */
@media (max-width: 820px), (pointer: coarse) {
    /* :is() gives select and textarea the input selector's weight, so page class styles don't win. */
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
        font-size: 16px;
    }
}

/* On/off switch for settings: <span class="oc-switch-wrap"><input type="checkbox" role="switch" class="oc-switch">
   <span class="oc-switch-state" aria-hidden="true"></span></span>. The state text says On or Off, so it never
   relies on color alone; set aria-busy="true" on the input while saving. */
.oc-switch-wrap { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.oc-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 46px;
    height: 28px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid var(--text-muted);
    background: var(--bg-hover);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.oc-switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-secondary);
    transition: transform 0.15s, background-color 0.15s;
}
.oc-switch:checked { background: var(--accent); border-color: var(--accent-text); }
.oc-switch:checked::before { transform: translateX(18px); background: var(--bg-dark); }
.oc-switch:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.oc-switch:disabled { cursor: not-allowed; opacity: 0.5; }
.oc-switch[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.oc-switch-state { min-width: 2.2em; font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.oc-switch-state::before { content: "Off"; }
.oc-switch:checked + .oc-switch-state { color: var(--accent-text); }
.oc-switch:checked + .oc-switch-state::before { content: "On"; }
.oc-switch[aria-busy="true"] + .oc-switch-state::before { content: "…"; }
@media (prefers-reduced-motion: reduce) {
    .oc-switch, .oc-switch::before { transition: none; }
}

/* Social sign-in buttons (site/social-sign-in.js): full-width rows, one per provider. */
.social-list { display: grid; gap: 8px; }
.social-list[hidden] { display: none; }
.social-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 44px; padding: 10px 16px;
    font: inherit; font-size: 14px; font-weight: 600;
    color: var(--text-primary); background: var(--bg-card, var(--bg-surface));
    border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.social-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.social-btn:disabled { opacity: 0.6; cursor: wait; }
.social-ico { width: 18px; height: 18px; display: inline-flex; flex: none; }
.social-ico svg { width: 18px; height: 18px; }
.social-or {
    display: flex; align-items: center; gap: 10px; margin: 16px 0;
    font-size: 12px; color: var(--text-secondary);
}
.social-or::before, .social-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.social-or[hidden] { display: none; }