/* Family Archive — five modern themes. Shared rounded design language. */
:root {
  --fa-radius: 18px;
  --fa-radius-sm: 12px;
  --fa-shadow: 0 10px 30px rgba(0,0,0,.10);
  --fa-transition: 180ms ease;
}

/* The selector is injected into the page and intentionally floats above existing layouts. */
#fa-theme-picker {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 100000;
  font-family: Arial, Helvetica, sans-serif;
}
#fa-theme-picker .fa-theme-button {
  border: 1px solid rgba(255,255,255,.38) !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  min-width: 96px;
  background: rgba(20,20,25,.72) !important;
  color: #fff !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(12px);
  cursor: pointer;
  font-weight: 800 !important;
  margin: 0 !important;
}
#fa-theme-picker .fa-theme-menu {
  display: none;
  margin-top: 8px;
  padding: 8px;
  min-width: 215px;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(18px);
}
#fa-theme-picker.open .fa-theme-menu { display: grid; gap: 5px; }
#fa-theme-picker .fa-theme-option {
  width: 100%;
  text-align: left;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  padding: 9px 11px !important;
  margin: 0 !important;
  cursor: pointer;
  font-weight: 800 !important;
  background: transparent !important;
}
#fa-theme-picker .fa-theme-option:hover,
#fa-theme-picker .fa-theme-option.active { transform: translateY(-1px); }

/* Universal rounded design rule */
button, input, select, textarea, .card, .panel, .box, .welcome,
.media-card, .media-item, .person-card, .family-card, .stat-card,
.action-card, .controls, .viewer-controls, .modal, .dialog,
img, video, audio, iframe, table, th, td {
  border-radius: var(--fa-radius-sm);
}
button, input, select, textarea { transition: var(--fa-transition); }
button { border-radius: 12px !important; }
img, video { overflow: hidden; }

/* Theme 1 — Dark & Elegant */
body.theme-dark {
  --fa-bg: #07111d;
  --fa-surface: #0e1c2c;
  --fa-surface-2: #14263a;
  --fa-text: #edf3fa;
  --fa-muted: #aebdca;
  --fa-accent: #a56bdb;
  --fa-accent-2: #e0a35a;
  --fa-border: rgba(255,255,255,.12);
  color: var(--fa-text) !important;
  background-color: var(--fa-bg) !important;
  background-image: linear-gradient(rgba(7,17,29,.84),rgba(7,17,29,.84)), var(--fa-site-bg, none) !important;
}
body.theme-dark header { background: linear-gradient(135deg,#0a1524,#1c2d43) !important; }
body.theme-dark nav { background: rgba(8,19,31,.94) !important; color: var(--fa-text) !important; }
body.theme-dark nav a, body.theme-dark h1, body.theme-dark h2, body.theme-dark h3,
body.theme-dark .welcome h2, body.theme-dark .card h3 { color: var(--fa-accent) !important; }
body.theme-dark .welcome, body.theme-dark .card, body.theme-dark .panel,
body.theme-dark section, body.theme-dark form, body.theme-dark .controls {
  background: var(--fa-surface) !important; color: var(--fa-text) !important; border-color: var(--fa-border) !important; box-shadow: var(--fa-shadow) !important;
}
body.theme-dark p, body.theme-dark label, body.theme-dark small { color: var(--fa-muted) !important; }
body.theme-dark button { background: var(--fa-accent) !important; color: #fff !important; border-color: var(--fa-accent) !important; }
body.theme-dark input, body.theme-dark select, body.theme-dark textarea { background: #0a1726 !important; color: #fff !important; border-color: var(--fa-border) !important; }

/* Theme 2 — Sunset Glow */
body.theme-sunset {
  --fa-bg: #fff4ec; --fa-surface: rgba(255,255,255,.90); --fa-surface-2: #fff0e3;
  --fa-text: #4d3028; --fa-muted: #7d6259; --fa-accent: #e96c3c; --fa-accent-2: #7d4d9d;
  --fa-border: rgba(233,108,60,.18); color: var(--fa-text) !important;
  background-color: var(--fa-bg) !important;
}
body.theme-sunset header { background: linear-gradient(135deg,#e85f3a,#f39b55,#8a579e) !important; }
body.theme-sunset nav { background: rgba(255,255,255,.92) !important; }
body.theme-sunset nav a, body.theme-sunset h1, body.theme-sunset h2, body.theme-sunset h3,
body.theme-sunset .welcome h2, body.theme-sunset .card h3 { color: var(--fa-accent) !important; }
body.theme-sunset .welcome, body.theme-sunset .card, body.theme-sunset .panel,
body.theme-sunset section, body.theme-sunset form, body.theme-sunset .controls {
  background: var(--fa-surface) !important; color: var(--fa-text) !important; border-color: var(--fa-border) !important; box-shadow: var(--fa-shadow) !important;
}
body.theme-sunset p, body.theme-sunset label, body.theme-sunset small { color: var(--fa-muted) !important; }
body.theme-sunset button { background: var(--fa-accent) !important; color: #fff !important; border-color: var(--fa-accent) !important; }
body.theme-sunset input, body.theme-sunset select, body.theme-sunset textarea { background: #fff !important; color: var(--fa-text) !important; border-color: var(--fa-border) !important; }

/* Theme 3 — Royal Heritage */
body.theme-royal {
  --fa-bg: #f7f1e5; --fa-surface: #fffaf0; --fa-surface-2: #f0e5d1;
  --fa-text: #30213b; --fa-muted: #6f6270; --fa-accent: #5d2a78; --fa-accent-2: #c49a45;
  --fa-border: rgba(93,42,120,.18); color: var(--fa-text) !important;
  background-color: var(--fa-bg) !important;
}
body.theme-royal header { background: linear-gradient(135deg,#3d1752,#6b2c82) !important; }
body.theme-royal nav { background: #fffaf0 !important; border-bottom: 1px solid rgba(196,154,69,.35); }
body.theme-royal nav a, body.theme-royal h1, body.theme-royal h2, body.theme-royal h3,
body.theme-royal .welcome h2, body.theme-royal .card h3 { color: var(--fa-accent) !important; }
body.theme-royal .welcome, body.theme-royal .card, body.theme-royal .panel,
body.theme-royal section, body.theme-royal form, body.theme-royal .controls {
  background: var(--fa-surface) !important; color: var(--fa-text) !important; border-color: var(--fa-border) !important; box-shadow: var(--fa-shadow) !important;
}
body.theme-royal button { background: var(--fa-accent) !important; color: #fff !important; border-color: var(--fa-accent) !important; }
body.theme-royal input, body.theme-royal select, body.theme-royal textarea { background: #fffdf7 !important; color: var(--fa-text) !important; border-color: var(--fa-border) !important; }

/* Theme 4 — Playful & Vibrant */
body.theme-playful {
  --fa-bg: #f7f8ff; --fa-surface: #ffffff; --fa-surface-2: #f2f5ff;
  --fa-text: #24304b; --fa-muted: #64708b; --fa-accent: #e83e79; --fa-accent-2: #16a6d9;
  --fa-border: rgba(65,85,150,.14); color: var(--fa-text) !important;
  background-color: var(--fa-bg) !important;
}
body.theme-playful header { background: linear-gradient(135deg,#e83e79,#7b55d8,#20a9d8) !important; }
body.theme-playful nav { background: #fff !important; }
body.theme-playful nav a, body.theme-playful h1, body.theme-playful h2, body.theme-playful h3,
body.theme-playful .welcome h2, body.theme-playful .card h3 { color: var(--fa-accent) !important; }
body.theme-playful .welcome, body.theme-playful .card, body.theme-playful .panel,
body.theme-playful section, body.theme-playful form, body.theme-playful .controls {
  background: var(--fa-surface) !important; color: var(--fa-text) !important; border-color: var(--fa-border) !important; box-shadow: var(--fa-shadow) !important;
}
body.theme-playful button { background: linear-gradient(135deg,#e83e79,#7b55d8) !important; color: #fff !important; border: none !important; }
body.theme-playful input, body.theme-playful select, body.theme-playful textarea { background: #fff !important; color: var(--fa-text) !important; border-color: var(--fa-border) !important; }

/* Theme 5 — Clean & Contemporary */
body.theme-clean {
  --fa-bg: #f4f7fb; --fa-surface: #ffffff; --fa-surface-2: #eef3f8;
  --fa-text: #182335; --fa-muted: #64748b; --fa-accent: #2878d4; --fa-accent-2: #48a7a0;
  --fa-border: rgba(30,60,90,.12); color: var(--fa-text) !important;
  background-color: var(--fa-bg) !important;
}
body.theme-clean header { background: linear-gradient(135deg,#1f5eaa,#3d8bd8) !important; }
body.theme-clean nav { background: rgba(255,255,255,.96) !important; }
body.theme-clean nav a, body.theme-clean h1, body.theme-clean h2, body.theme-clean h3,
body.theme-clean .welcome h2, body.theme-clean .card h3 { color: var(--fa-accent) !important; }
body.theme-clean .welcome, body.theme-clean .card, body.theme-clean .panel,
body.theme-clean section, body.theme-clean form, body.theme-clean .controls {
  background: var(--fa-surface) !important; color: var(--fa-text) !important; border-color: var(--fa-border) !important; box-shadow: 0 8px 24px rgba(30,60,90,.08) !important;
}
body.theme-clean button { background: var(--fa-accent) !important; color: #fff !important; border-color: var(--fa-accent) !important; }
body.theme-clean input, body.theme-clean select, body.theme-clean textarea { background: #fff !important; color: var(--fa-text) !important; border-color: var(--fa-border) !important; }

/* Keep the media viewer's own dark canvas dark in every theme. */
body.theme-sunset .lightbox, body.theme-royal .lightbox, body.theme-playful .lightbox,
body.theme-clean .lightbox, body.theme-dark .lightbox,
body.theme-sunset .modal-overlay, body.theme-royal .modal-overlay,
body.theme-playful .modal-overlay, body.theme-clean .modal-overlay,
body.theme-dark .modal-overlay { color: #fff !important; }

@media (max-width: 700px) {
  #fa-theme-picker { top: 8px; right: 8px; }
  #fa-theme-picker .fa-theme-menu { min-width: 190px; }
}

/* -------------------------------------------------------------------------
   28 Aug 2026 visual refinement — approved Family Archive direction
   - Header title +20% (36px -> 43px target)
   - Stronger header/title contrast in every theme
   - Keep the rounded, modern design language
   ------------------------------------------------------------------------- */
header h1,
header h1 a {
  font-size: 43px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: .1px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.22) !important;
}

header p {
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.22) !important;
}

/* The title sits on a coloured hero: use a deliberately high-contrast colour. */
body.theme-dark header h1,
body.theme-dark header h1 a,
body.theme-sunset header h1,
body.theme-sunset header h1 a,
body.theme-playful header h1,
body.theme-playful header h1 a,
body.theme-clean header h1,
body.theme-clean header h1 a {
  color: #fff !important;
}

body.theme-royal header h1,
body.theme-royal header h1 a {
  color: #fff4c7 !important;
}

/* Make the primary navigation read cleanly against its light surface. */
body.theme-sunset nav a,
body.theme-royal nav a,
body.theme-playful nav a,
body.theme-clean nav a {
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* Improve body copy contrast without changing the existing theme character. */
body.theme-sunset p,
body.theme-sunset label,
body.theme-sunset small,
body.theme-royal p,
body.theme-royal label,
body.theme-royal small,
body.theme-playful p,
body.theme-playful label,
body.theme-playful small,
body.theme-clean p,
body.theme-clean label,
body.theme-clean small {
  color: var(--fa-text) !important;
}

@media (max-width: 700px) {
  header h1,
  header h1 a {
    font-size: 36px !important;
  }
}