/* ===========================
   GLOBAL THEME (site-wide)
   =========================== */

/* Default (your requested gradient) */
:root{
  /* Page background */
  --bg: linear-gradient(120deg, #6a85ff 0%, #82e0ff 100%);

  /* UI gradient used by header/footer bars */
  --ui-1: #6a85ff;
  --ui-2: #82e0ff;

  /* Optional text tone for meta theme-color */
  --theme-color: var(--ui-1);
}

/* ---------- Presets users can pick ---------- */
:root[data-theme="midnight"]{
  --bg:
    radial-gradient(1200px 700px at 40% -200px, rgba(53,83,148,.45), transparent 70%),
    radial-gradient(900px 600px at 100% 0%, rgba(31,82,113,.35), transparent 60%),
    #0b1220;
  --ui-1: #38527a; --ui-2: #1b233a;
  --theme-color: #1b233a;
}
:root[data-theme="sunset"]{
  --bg: linear-gradient(180deg, #ff9a9e 0%, #fad0c4 100%);
  --ui-1: #ff9a9e; --ui-2: #fcb7c9;
  --theme-color: #ff9a9e;
}
:root[data-theme="mint"]{
  --bg: linear-gradient(180deg, #a1ffce 0%, #faffd1 100%);
  --ui-1: #6cd6a2; --ui-2: #c9f8b5;
  --theme-color: #6cd6a2;
}
:root[data-theme="ocean"]{
  --bg: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  --ui-1: #0072ff; --ui-2: #00c6ff;
  --theme-color: #0072ff;
}
:root[data-theme="forest"]{
  --bg: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
  --ui-1: #134e5e; --ui-2: #71b280;
  --theme-color: #134e5e;
}
:root[data-theme="orchid"]{
  --bg: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
  --ui-1: #a18cd1; --ui-2: #fbc2eb;
  --theme-color: #a18cd1;
}
:root[data-theme="brand"]{
  --bg: linear-gradient(135deg, #6c63ff 0%, #48c6ef 100%);
  --ui-1: #6c63ff; --ui-2: #48c6ef;
  --theme-color: #6c63ff;
}

/* ---------- Extra professional & Apple-like presets ---------- */
:root[data-theme="apple-gloss"]{
  /* Soft Big-Sur style blue glass */
  --bg: linear-gradient(180deg,#a1c4fd 0%, #c2e9fb 100%);
  --ui-1:#7ab3ff; --ui-2:#bfe2ff;
  --theme-color:#7ab3ff;
}

:root[data-theme="oled"]{
  /* Battery-friendly pure black */
  --bg:#000000;
  --ui-1:#0a0a0a; --ui-2:#151515;
  --theme-color:#000000;
}

:root[data-theme="slate-pro"]{
  /* Neutral, professional dark */
  --bg: linear-gradient(180deg,#0f172a 0%, #1f2937 100%);
  --ui-1:#0f172a; --ui-2:#1f2937;
  --theme-color:#0f172a;
}

:root[data-theme="graphite"]{
  /* Subtle gray metal */
  --bg: linear-gradient(135deg,#2c3e50 0%, #434343 100%);
  --ui-1:#2c3e50; --ui-2:#434343;
  --theme-color:#2c3e50;
}

:root[data-theme="royal-indigo"]{
  /* Deep, premium indigo/purple */
  --bg: linear-gradient(135deg,#3730a3 0%, #7c3aed 100%);
  --ui-1:#3730a3; --ui-2:#7c3aed;
  --theme-color:#3730a3;
}

:root[data-theme="emerald-pro"]{
  /* Fresh but professional green */
  --bg: linear-gradient(135deg,#059669 0%, #34d399 100%);
  --ui-1:#059669; --ui-2:#34d399;
  --theme-color:#059669;
}

:root[data-theme="rose-gold"]{
  /* Soft Apple-ish rose gold */
  --bg: linear-gradient(135deg,#f6d7d2 0%, #eab8a6 100%);
  --ui-1:#e39e8f; --ui-2:#f4c7ba;
  --theme-color:#e39e8f;
}

:root[data-theme="steel"]{
  /* Clean corporate steel */
  --bg: linear-gradient(135deg,#64748b 0%, #94a3b8 100%);
  --ui-1:#475569; --ui-2:#64748b;
  --theme-color:#475569;
}

:root[data-theme="teal-pro"]{
  /* Calm teal */
  --bg: linear-gradient(135deg,#14b8a6 0%, #06b6d4 100%);
  --ui-1:#0f766e; --ui-2:#0ea5a5;
  --theme-color:#0f766e;
}

:root[data-theme="copper"]{
  /* Warm copper */
  --bg: linear-gradient(135deg,#b45309 0%, #f59e0b 100%);
  --ui-1:#92400e; --ui-2:#d97706;
  --theme-color:#92400e;
}

:root[data-theme="lavender-pro"]{
  /* Gentle professional lavender */
  --bg: linear-gradient(135deg,#a78bfa 0%, #c4b5fd 100%);
  --ui-1:#7c3aed; --ui-2:#a78bfa;
  --theme-color:#7c3aed;
}

:root[data-theme="carbon"]{
  /* Ultra-neutral dark gray */
  --bg: linear-gradient(135deg,#0b0b0b 0%, #1b1b1b 100%);
  --ui-1:#0e0e0e; --ui-2:#1a1a1a;
  --theme-color:#0b0b0b;
}

/* ===========================
   FULL-BLEED BACKGROUND LAYER
   (prevents left/right gutters)
   =========================== */

html, body{
  margin: 0;
  min-height: 100%;
  /* Don’t paint the gradient here — we’ll paint a fixed layer instead */
  background: transparent !important;
  overflow-x: clip;             /* kill horizontal overflow that creates gutters */
}

/* Paint the theme gradient on a fixed viewport layer */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;                  /* behind everything */
  background: var(--bg) no-repeat fixed;
  background-size: cover;       /* always cover edge-to-edge */
  pointer-events: none;
}

/* ===========================
   HEADER + FOOTER THEMING
   =========================== */
.navbar,
footer.site-footer,
.site-footer,
footer{
  background: linear-gradient(120deg, var(--ui-1, #7b8fff) 0%, var(--ui-2, #84d3fa) 100%) !important;
}

/* If a footer lives inside a centered wrapper, keep it full-bleed */
footer.site-footer, .site-footer, footer{
  width: 100%;
}

/* Ensure common wrappers don’t repaint a background that would show as gutters */
#app, .app,
.site-content, .page-wrapper, .content,
.container.main-content, main.main-content,
.container, .wrapper, .site, .page{
  background: transparent !important;
  background-image: none !important;
  max-width: 100%;
}

/* Media should never push the layout wider than the viewport */
img, video, canvas{ max-width: 100%; height: auto; }

/* Side drawers/menus shouldn’t expand page width */
.main-nav{ max-width: 100vw; overflow-x: hidden; }

/* ===========================
   PALETTE BUTTON + DROPDOWN
   (Material Symbols)
   =========================== */

.theme-btn{
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 1201;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff; cursor: pointer;
}

.theme-menu{
  position: fixed;
  right: 12px;
  top: calc(56px + env(safe-area-inset-top, 0px));
  z-index: 1201;
  width: 220px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(20, 24, 40, .55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.theme-item{
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 0; background: transparent; color: #fff;
  border-radius: 10px; cursor: pointer;
}
.theme-item:hover{ background: rgba(255,255,255,.10); }

.swatch{ width: 22px; height: 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); }

.theme-item[data-theme="default"] .swatch{ background: linear-gradient(120deg, #6a85ff, #82e0ff); }
.theme-item[data-theme="midnight"] .swatch{ background: linear-gradient(120deg, #38527a, #1b233a); }
.theme-item[data-theme="sunset"]   .swatch{ background: linear-gradient(120deg, #ff9a9e, #fcb7c9); }
.theme-item[data-theme="mint"]     .swatch{ background: linear-gradient(120deg, #6cd6a2, #c9f8b5); }
.theme-item[data-theme="ocean"]    .swatch{ background: linear-gradient(120deg, #0072ff, #00c6ff); }
.theme-item[data-theme="forest"]   .swatch{ background: linear-gradient(120deg, #134e5e, #71b280); }
.theme-item[data-theme="orchid"]   .swatch{ background: linear-gradient(120deg, #a18cd1, #fbc2eb); }
.theme-item[data-theme="brand"]    .swatch{ background: linear-gradient(120deg, #6c63ff, #48c6ef); }

/* ---------- Swatches for the new themes ---------- */
.theme-item[data-theme="apple-gloss"]   .swatch{ background: linear-gradient(120deg,#7ab3ff,#bfe2ff); }
.theme-item[data-theme="oled"]          .swatch{ background: linear-gradient(120deg,#000000,#151515); }
.theme-item[data-theme="slate-pro"]     .swatch{ background: linear-gradient(120deg,#0f172a,#1f2937); }
.theme-item[data-theme="graphite"]      .swatch{ background: linear-gradient(120deg,#2c3e50,#434343); }
.theme-item[data-theme="royal-indigo"]  .swatch{ background: linear-gradient(120deg,#3730a3,#7c3aed); }
.theme-item[data-theme="emerald-pro"]   .swatch{ background: linear-gradient(120deg,#059669,#34d399); }
.theme-item[data-theme="rose-gold"]     .swatch{ background: linear-gradient(120deg,#f6d7d2,#eab8a6); }
.theme-item[data-theme="steel"]         .swatch{ background: linear-gradient(120deg,#64748b,#94a3b8); }
.theme-item[data-theme="teal-pro"]      .swatch{ background: linear-gradient(120deg,#14b8a6,#06b6d4); }
.theme-item[data-theme="copper"]        .swatch{ background: linear-gradient(120deg,#b45309,#f59e0b); }
.theme-item[data-theme="lavender-pro"]  .swatch{ background: linear-gradient(120deg,#a78bfa,#c4b5fd); }
.theme-item[data-theme="carbon"]        .swatch{ background: linear-gradient(120deg,#0b0b0b,#1b1b1b); }