/* =========================
   Start Page - Styles
   v3.12
   ========================= */

:root{
  --bg: #0e0e12;
  --bg-soft: #17171d;
  --bg-softer: #1e1e26;
  --text: #e9e9ef;
  --muted: #a9acb5;
  --card: #14141a;
  --border: #2a2a34;
  --focus: hsl(210, 90%, 60%);
  /* --purple and --accent are set inline by PHP based on hue */
}

.theme-light{
  --bg: #f4f6f9;
  --bg-soft: #ffffff;
  --bg-softer: #f1f3f6;
  --text: #101114;
  --muted: #5a606d;
  --card: #ffffff;
  --border: #dfe3ea;
  --focus: hsl(210, 75%, 38%);
}

/* Base */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* Links */
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Containers */
.container{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 16px 0;
}

/* Header */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: linear-gradient(180deg, color-mix(in hsl, var(--purple) 26%, #000 74%), transparent 120px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.brand{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
}
.brand-link{ display:flex; align-items:center; gap:10px; }
.brand-link:hover{ text-decoration: none; }
.brand-logo{ height: 28px; width:auto; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
.brand h1{ margin:0; font-size:20px; letter-spacing:.2px; font-weight:700; color:#fff; }

/* Search in header */
.header-search{ display:flex; align-items:center; justify-content:center; }
.header-search input[type="search"]{
  width: clamp(160px, 38vw, 420px);
  padding: 10px 12px;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}
.header-search input[type="search"]::placeholder{ color: var(--muted); }
.header-search input[type="search"]:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in hsl, var(--focus) 35%, transparent);
}

/* Top actions — high-contrast chips */
.top-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.top-actions a{
  --chip-bg: color-mix(in hsl, var(--accent) 88%, #000 12%);
  color: #0d0f14;
  background: var(--chip-bg);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in hsl, var(--purple) 24%, #000 76%);
  font-weight: 600; letter-spacing:.1px; text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
.theme-light .top-actions a{ color:#0b0c10; border-color: color-mix(in hsl, var(--purple) 18%, #000 82%); }
.top-actions a:hover{ filter:saturate(1.08) brightness(1.02); transform: translateY(-0.5px); }
.top-actions a:active{ transform: translateY(0); }

/* Tabs */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0 14px; }
.tab-btn{
  appearance:none; border:1px solid var(--border);
  background: var(--bg-soft); color: var(--text);
  padding: 8px 12px; border-radius: 10px; cursor:pointer;
}
.tab-btn.active{
  border-color: color-mix(in hsl, var(--purple) 55%, var(--border) 45%);
  background: color-mix(in hsl, var(--purple) 18%, var(--bg-soft) 82%);
  box-shadow: inset 0 0 0 1px color-mix(in hsl, var(--accent) 18%, transparent);
}
.tab-content{ display:none; }
.tab-content.active{ display:block; }

/* Headings */
h2.category-header{
  margin: 18px 0 10px;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
}

/* Grid of tiles */
.grid{ display:flex; flex-wrap: wrap; gap: 14px; }

/* Tiles: stack vertically (icon above title) everywhere */
.tile{transition: box-shadow .2s ease, transform .08s ease; 
  position: relative;               /* for tooltip anchor */
  display:flex; flex-direction: column; align-items:center; text-align:center;
  gap: 10px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-width: 140px;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.tile:hover{ transform: translateY(-1px); border-color: color-mix(in hsl, var(--purple) 35%, var(--border) 65%); text-decoration: none; }
.tile .thumb{
  width: 64px; height: 64px; flex: 0 0 auto;
  display:grid; place-items:center; overflow:hidden;
  border-radius: 10px; background: var(--bg-softer); border: 1px solid var(--border);
}
.tile 
.tile .title{ font-size: 16px; font-weight: 600; color: var(--text); }

/* Hover Notes tooltip (reads data-note) */
.tile[data-note]:hover::after{
  content: attr(data-note);
  position: absolute;
  z-index: 40;
  left: 50%;
  transform: translate(-50%, -8px);
  max-width: 320px;
  white-space: normal;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in hsl, var(--bg-soft) 80%, var(--purple) 20%);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  pointer-events: none;
}

/* Admin preview extras */
.admin-preview .inline-delete{ margin-top:6px; align-self:stretch; display:flex; justify-content:center; }
.admin-preview .inline-delete button{ width:100%; max-width:140px; }

/* Drag & drop handle (bigger, squared hover, no weird circle) */
.drag-handle{
  appearance:none; border:0; background:transparent; color: var(--muted);
  cursor: grab; font-size: 22px; line-height: 1; padding: 6px 8px; margin: -4px 0 2px 0;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.drag-handle:hover{ color: var(--accent); background: var(--bg-softer); }
.drag-active{ cursor: grabbing; }
.tile.is-dragging{ opacity: 0; }
.drag-float{
  position: fixed; left:0; top:0; z-index: 2000;
  pointer-events:none; opacity: .92; transform: translate(0,0);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.placeholder{
  border: 2px dashed color-mix(in hsl, var(--accent) 60%, var(--border) 40%);
  background: color-mix(in hsl, var(--accent) 8%, transparent);
}

/* Cards & common UI */
.card{ background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin: 10px 0 16px; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.muted{ color: var(--muted); }

/* Forms */
form label{ display:flex; flex-direction: column; gap: 8px; margin: 8px 0; font-weight: 600; }
input[type="text"],input[type="url"],input[type="password"],input[type="number"],input[type="search"],select,textarea{
  appearance:none; width:100%; padding: 10px 12px; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; outline: none;
}
textarea{ min-height: 120px; resize: vertical; }
select[multiple]{ min-height: 140px; }
option:checked{ background: var(--select-selected-bg) !important; color: #0b0c10; }
.theme-light option:checked{ color: #0b0c10; }

/* Range sliders: cap max width so they don't span full screen */
input[type="range"]{ width: 100%; max-width: 520px; }
.form-grid input[type="range"]{ width: 100%; max-width: 520px; }

/* Admin forms: one option per line */
.form-grid{ display:grid; grid-template-columns: 1fr !important; gap:12px; }

/* Hue controls */
.hue-row{ display:grid; grid-template-columns: 1fr 1fr auto; gap:12px; align-items:end; }
.hue-swatch-wrap{ display:flex; align-items:center; justify-content:center; }
.hue-swatch{ width:42px; height:28px; border-radius:8px; border:2px solid var(--purple); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.25); }

/* Buttons */
button, .button-like, input[type="submit"]{
  appearance:none; cursor:pointer; text-decoration:none;
  background: var(--accent); color:#0d0f14;
  border: 1px solid color-mix(in hsl, var(--purple) 25%, #000 75%);
  padding: 10px 14px; border-radius: 10px; font-weight:700;
  box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
button:hover, .button-like:hover{ filter:saturate(1.05) brightness(1.02); }
button:disabled{ opacity:.6; cursor:not-allowed; }
button.danger{ background: linear-gradient(180deg, #e34c4c, #d03434); color:#fff; border-color:#7c1f1f; }

/* Admin preview sizes (still slightly smaller) */
.admin-preview .grid{ gap: 12px; }
.admin-preview .grid .tile{ padding: 10px; }
@media (min-width: 680px){
  .admin-preview 
  .admin-preview 
}

/* Sections manager */
.sections-sortable{ display:grid; gap:12px; }
.section-card{ background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding:10px; }
.section-card-header{ display:flex; align-items:center; gap:8px; margin-bottom:8px; color: var(--muted); }
.section-actions{ display:flex; gap:8px; margin-top:8px; }

/* Footer */
.site-footer{ margin-top:24px; border-top:1px solid var(--border); background: var(--bg-soft); }
.site-footer small{ color: var(--muted); }

/* Focus outlines */
a:focus, button:focus, input:focus, select:focus, textarea:focus{
  outline: 3px solid color-mix(in hsl, var(--focus) 55%, transparent);
  outline-offset: 2px; border-color: var(--focus);
}

/* Utility */
.inline-add-section input[type="text"]{ margin:0; }

/* --- Section admin divider via pseudo-element (no handle clash) --- */
.sections-sortable .section-card{
  position: relative;
  padding-top: 8px;
  padding-bottom: 12px;
}
.sections-sortable .section-card:not(:last-child)::after{
  content: "";
  display: block;
  height: 1px;
  margin-top: 10px;
  background: var(--border);
}
/* End Section admin divider */

/* Chip multiselect */
.chip-multi-wrap{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 0;}
.chip{border:1px solid var(--border, rgba(255,255,255,.15));background:rgba(255,255,255,.04);color:inherit;border-radius:999px;padding:.35rem .7rem;cursor:pointer;line-height:1;}
.chip:hover{transform:translateY(-1px);}
.chip.selected{background:var(--accent, #8b5cf6);border-color:transparent;color:#fff;font-weight:600;}

/* Admin section save button distinct color */
.section-actions button{
  background: var(--ok, #10b981);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
.section-actions button:hover{ filter: brightness(0.95); }
.section-actions button:active{ filter: brightness(0.9); }

/* Hide drag handles in Sections list; show simple dividers instead */
.sections-sortable .drag-handle{ display:none !important; }

/* Thin divider between sections (admin) */
.section-divider{height:1px;margin:12px 0;background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);}

/* Divider light-mode tweak */
@media (prefers-color-scheme: light){
  .section-divider{ background: linear-gradient(90deg, transparent, rgba(0,0,0,.18), transparent); }
}

/* Make tile title adopt the accent hue on hover */
.tile:hover .title{ color: var(--accent); }
.tile .title a{ color: inherit; text-decoration: none; }
.tile:hover .title a{ color: var(--accent); }

/* Card variants */
body.card-flat .tile{ box-shadow:none; }
body.card-soft .tile{ box-shadow:0 6px 20px rgba(0,0,0,.18); }
body.card-elevated .tile{ box-shadow:0 12px 30px rgba(0,0,0,.28); }

/* Theme presets (admin) */
.preset-row{ display:flex; flex-wrap:wrap; gap:8px; }
.preset{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:transparent; color:inherit;
  padding:8px 12px; border-radius:999px; cursor:pointer;
}
.preset:hover{ background:rgba(255,255,255,.06); }
.preset .dot{ display:inline-block; width:12px; height:12px; border-radius:50%; }

/* ===== Accent-driven polish ===== */

/* 1) Subtle gradient underline for headers (works on both main & admin) */
header, .site-header, .admin-header {
  position: relative;
}
header::after, .site-header::after, .admin-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:6px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 65%, transparent) 0%, color-mix(in oklab, var(--accent) 30%, transparent) 70%, transparent 95%);
  opacity:1;
  pointer-events:none;
}

/* 2) Native control accent (checkboxes, radios, range sliders, progress) */
:root { accent-color: var(--accent); }

/* 3) Focus rings that match the theme hue */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent) 75%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* 4) Text selection uses the theme hue (subtle) */
::selection {
  background: color-mix(in oklab, var(--accent) 35%, transparent);
  color: inherit;
}

/* 5) Chip hover gets a faint accent border without altering selected look */
.chip:not(.selected):hover{
  border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
}

/* ===== Background styles ===== */
:root{
  --bg-image: none;
  --bg-opacity: 0;
  --bg-blur: 0px;
}
/* Layered background via body::before so content stays crisp */
body.bg-style-gradient::before,
body.bg-style-mesh::before,
body.bg-style-image::before{ /* BG explicit props */
  background-image: var(--bg-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
}
body.bg-style-gradient::before{
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--accent) 24%, transparent), transparent),
    radial-gradient(900px 600px at 120% 20%, color-mix(in oklab, var(--accent) 14%, transparent), transparent);
  opacity:.85;
}
body.bg-style-mesh::before{
  background:
    radial-gradient(600px 400px at 15% 10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(700px 450px at 85% 20%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(800px 500px at 60% 90%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%);
  opacity:.75;
}
body.bg-style-image::before{ /* BG explicit props */
  background-image: var(--bg-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background: var(--bg-image) center/cover no-repeat;
  filter: blur(var(--bg-blur));
  opacity: var(--bg-opacity);
}

/* Admin controls layout */
.bg-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.bg-row input, .bg-row select{ background:transparent; color:inherit; border:1px solid var(--border); border-radius:8px; padding:6px 8px; }
.bg-row label{ display:flex; align-items:center; gap:6px; }

/* Background picker visibility + sizing */
.bg-row select{
  min-width: 220px;
  color: var(--text) !important;
  background: var(--bg-softer) !important;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
}
/* Force option text to be visible across browsers */
.bg-row option{
  color: #111;
  background: #fff;
}
@media (prefers-color-scheme: dark){
  .bg-row option{
    color: #fff;
    background: #111;
  }
}
.bg-row label{ color: var(--text); }

/* Background upload form */
.bg-upload{ display:flex; gap:8px; align-items:center; }
.bg-upload input[type="file"]{ background:transparent; color:inherit; }
.bg-upload button{
  background: var(--bg-softer); color: var(--text);
  border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:pointer;
}
.bg-upload button:hover{ filter: brightness(1.05); }

/* Ensure ::before layer stacking */
body{ position: relative; }

/* Per-section mini save buttons */
.mini-save-wrap{ display:flex; justify-content:flex-end; margin-top:10px; }
.mini-save{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}
.mini-save:hover{ filter: brightness(1.05); }

/* Per-section mini save buttons (accented) */
.mini-save-wrap{ display:flex; justify-content:flex-end; margin-top:10px; }
.mini-save{
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 1px 8px rgba(0,0,0,.06);
}
.mini-save:hover{ filter: brightness(.92); }
.mini-save:active{ transform: translateY(1px); }

/* Saved toast */
.mini-saved-toast{
  position: relative;
  margin-top: 8px;
  margin-left: auto;
  width: max-content;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  background: color-mix(in oklab, var(--accent) 18%, #0000);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: .9em;
}
.mini-saved-toast.show{ opacity: 1; transform: translateY(0); }

/* Admin notices */
.notice{padding:.75rem 1rem;border-radius:.6rem;margin:1rem 0;border:1px solid var(--border);} .notice.success{background:rgba(0,200,0,.08);border-color:rgba(0,200,0,.35);} .notice.error{background:rgba(200,0,0,.08);border-color:rgba(200,0,0,.35);}

/* Admin width fix: match sections block to card width */
.admin .sections, .admin .sections-section, .admin .section-tabs-list {
  max-width: 720px;
  margin-left: 0;
}

/* Hide mini 'Save settings' button in Sections (Tabbed pages) */
#admin-sections button[title*='Save settings'],
#admin-sections input[type='submit'][value*='Save settings' i],
.sections-admin button[title*='Save settings'],
.sections-admin input[type='submit'][value*='Save settings' i]{ display:none !important; }




/* Canonical tile thumb centering (public + admin identical) */
.tile .thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.tile .thumb img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
  margin:0;
}


/* Ensure admin preview anchor wraps mimic public tile layout */
.admin-preview .tile > a{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
}