/* =========================================================
   Family Tree — Public Design System
   Shared visual language for all public/member-facing pages.
   Loaded from views/partials/header.ejs so one file controls the
   overall look without changing each page's business logic.
   ========================================================= */

:root {
  --family-primary: #005a2b;
  --family-primary-strong: #004522;
  --family-gold: #e5b869;
  --family-gold-strong: #d6a24e;
  --family-bg: #f8f8f6;
  --family-surface: rgba(255,255,255,.82);
  --family-surface-solid: #ffffff;
  --family-surface-soft: rgba(255,255,255,.58);
  --family-text: #17201b;
  --family-muted: #69736d;
  --family-faint: #9aa39d;
  --family-border: rgba(0,90,43,.10);
  --family-border-gold: rgba(229,184,105,.24);
  --family-shadow-xs: 0 4px 16px rgba(25,38,29,.045);
  --family-shadow-sm: 0 10px 30px rgba(25,38,29,.07);
  --family-shadow-md: 0 18px 46px rgba(25,38,29,.09);
  --family-radius-sm: 14px;
  --family-radius-md: 20px;
  --family-radius-lg: 28px;
  --family-radius-xl: 34px;
  --family-ease: cubic-bezier(.22,1,.36,1);
  --family-header-h: 88px;
}

html.dark,
html[data-theme="dark"] {
  --family-bg: #070908;
  --family-surface: rgba(14,17,15,.78);
  --family-surface-solid: #0d100e;
  --family-surface-soft: rgba(19,23,20,.58);
  --family-text: #f2f4f2;
  --family-muted: #a5ada8;
  --family-faint: #707872;
  --family-border: rgba(255,255,255,.075);
  --family-border-gold: rgba(229,184,105,.18);
  --family-shadow-xs: 0 5px 18px rgba(0,0,0,.14);
  --family-shadow-sm: 0 14px 34px rgba(0,0,0,.22);
  --family-shadow-md: 0 22px 55px rgba(0,0,0,.28);
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}
html.dark,
html[data-theme="dark"] { color-scheme: dark; }

body.family-public-ui {
  min-height: 100vh;
  font-family: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--family-text);
  background-color: var(--family-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.family-public-ui::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 460px at 88% 0%, rgba(229,184,105,.075), transparent 62%),
    radial-gradient(820px 520px at 7% 10%, rgba(0,90,43,.045), transparent 66%);
}
html.dark body.family-public-ui::before,
html[data-theme="dark"] body.family-public-ui::before {
  background:
    radial-gradient(900px 460px at 88% 0%, rgba(229,184,105,.045), transparent 62%),
    radial-gradient(820px 520px at 7% 10%, rgba(0,90,43,.075), transparent 66%);
}

body.family-public-ui ::selection {
  background: rgba(229,184,105,.35);
  color: inherit;
}

body.family-public-ui :focus-visible {
  outline: 2px solid var(--family-gold) !important;
  outline-offset: 3px;
}

body.family-public-ui a,
body.family-public-ui button,
body.family-public-ui input,
body.family-public-ui textarea,
body.family-public-ui select {
  -webkit-tap-highlight-color: transparent;
}

body.family-public-ui a,
body.family-public-ui button {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 220ms;
  transition-timing-function: var(--family-ease);
}

body.family-public-ui button:active,
body.family-public-ui a[role="button"]:active {
  transform: translateY(1px) scale(.985);
}

/* ---------- Unified floating header ---------- */
#familySiteHeader {
  position: sticky;
  top: 0;
  z-index: 70;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#familySiteHeader .family-header-shell {
  width: min(100%, 1440px);
  min-height: var(--family-header-h);
  margin-inline: auto;
  padding: 12px clamp(18px, 3vw, 42px);
}

#familySiteHeader .family-desktop-nav {
  scrollbar-width: none;
  min-width: 0;
}
#familySiteHeader .family-desktop-nav::-webkit-scrollbar { display:none; }
#familySiteHeader .family-desktop-nav a {
  position: relative;
  line-height: 1.15;
  padding-block: 8px;
}
#familySiteHeader .family-desktop-nav a::after {
  content: "";
  position: absolute;
  right: 50%;
  left: 50%;
  bottom: 1px;
  height: 1.5px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0;
  transition: right .24s var(--family-ease), left .24s var(--family-ease), opacity .2s ease;
}
#familySiteHeader .family-desktop-nav a:hover::after,
#familySiteHeader .family-desktop-nav a[aria-current="page"]::after {
  right: 12%;
  left: 12%;
  opacity: .72;
}

#familySiteHeader .family-header-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
}
#familySiteHeader .family-header-icon:hover {
  background: rgba(0,90,43,.055);
  border-color: rgba(0,90,43,.08);
}
html.dark #familySiteHeader .family-header-icon:hover,
html[data-theme="dark"] #familySiteHeader .family-header-icon:hover {
  background: rgba(229,184,105,.07);
  border-color: rgba(229,184,105,.11);
}

/* We intentionally switch to the drawer before the horizontal nav gets cramped. */
@media (max-width: 1339px) {
  #familyDesktopNav { display: none !important; }
  #familyPublicNavBtn { display: inline-flex !important; }
  #familyPublicNavDrawer { display: flex !important; }
  #familyPublicNavOverlay.is-visible { display: block !important; }
  #familySiteHeader .family-header-title { display: none !important; }
}
@media (min-width: 1340px) {
  #familyDesktopNav { display: flex !important; }
  #familyPublicNavBtn { display: none !important; }
  #familyPublicNavDrawer { display: none !important; }
  #familyPublicNavOverlay { display: none !important; }
}

#familyPublicNavDrawer {
  width: min(360px, 88vw) !important;
  background: rgba(255,255,255,.96) !important;
  border-left: 1px solid var(--family-border) !important;
  box-shadow: -24px 0 70px rgba(24,34,27,.14) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html.dark #familyPublicNavDrawer,
html[data-theme="dark"] #familyPublicNavDrawer {
  background: rgba(8,10,9,.96) !important;
  box-shadow: -24px 0 70px rgba(0,0,0,.45) !important;
}
#familyPublicNavDrawer nav a { min-height: 46px; display:flex; align-items:center; }

/* ---------- Hero rhythm ---------- */
.family-page-hero,
.family-hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(34px, 5vw, 68px) !important;
  padding-bottom: clamp(28px, 4vw, 48px) !important;
}
.family-page-hero h1,
.family-page-hero h2,
.family-hero h1,
.family-hero h2 {
  margin-bottom: clamp(14px, 2vw, 22px) !important;
  letter-spacing: -.015em;
}
.family-page-hero p,
.family-hero p {
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.9;
}
.family-page-hero > .w-px,
.family-hero > .w-px {
  height: clamp(30px, 4vw, 46px) !important;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

/* ---------- Surfaces/cards ---------- */
.family-ui-card,
.glass-premium,
.royal-control-panel,
.tree-royal-frame {
  border-color: var(--family-border) !important;
  box-shadow: var(--family-shadow-sm);
}

.glass-premium,
.family-ui-card {
  border-radius: var(--family-radius-lg) !important;
}

body.family-public-ui .glass-premium:hover,
body.family-public-ui .family-ui-card:hover {
  box-shadow: var(--family-shadow-md);
}

/* Normalize excessively strong shadows in the public UI. */
body.family-public-ui .shadow-2xl { box-shadow: var(--family-shadow-md) !important; }
body.family-public-ui .shadow-xl { box-shadow: var(--family-shadow-sm) !important; }
body.family-public-ui .shadow-lg { box-shadow: var(--family-shadow-sm) !important; }

/* ---------- Forms ---------- */
body.family-public-ui input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.family-public-ui textarea,
body.family-public-ui select {
  border-radius: var(--family-radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body.family-public-ui input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
body.family-public-ui textarea:focus,
body.family-public-ui select:focus {
  border-color: rgba(229,184,105,.72) !important;
  box-shadow: 0 0 0 4px rgba(229,184,105,.11) !important;
  outline: none !important;
}

/* ---------- Buttons ---------- */
body.family-public-ui .family-btn-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--family-primary);
  color:#fff;
  font-weight:800;
  box-shadow: 0 8px 22px rgba(0,90,43,.13);
}
html.dark body.family-public-ui .family-btn-primary,
html[data-theme="dark"] body.family-public-ui .family-btn-primary {
  background: var(--family-gold);
  color:#111;
  box-shadow: 0 8px 22px rgba(229,184,105,.09);
}
body.family-public-ui .family-btn-primary:hover { transform: translateY(-1px); filter:brightness(1.035); }

body.family-public-ui .family-btn-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--family-border);
  background: var(--family-surface-soft);
  color:var(--family-text);
  font-weight:750;
}
body.family-public-ui .family-btn-secondary:hover {
  border-color: var(--family-border-gold);
  background: var(--family-surface-solid);
}

/* ---------- Footer ---------- */
body.family-public-ui .family-site-footer {
  border-top: 1px solid var(--family-border) !important;
  background: transparent !important;
  padding-block: 26px !important;
}
body.family-public-ui .family-site-footer p { color: var(--family-faint) !important; }

/* ---------- Tree experience ---------- */
.tree-royal-frame {
  position: relative;
  overflow: hidden;
}
.tree-floating-tools {
  position: absolute;
  z-index: 28;
  top: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--family-border);
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  box-shadow: var(--family-shadow-sm);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html.dark .tree-floating-tools,
html[data-theme="dark"] .tree-floating-tools {
  background: rgba(12,15,13,.86);
}
.tree-floating-tools button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--family-muted);
}
.tree-floating-tools button:hover {
  color: var(--family-primary);
  background: rgba(0,90,43,.055);
  border-color: rgba(0,90,43,.08);
}
html.dark .tree-floating-tools button:hover,
html[data-theme="dark"] .tree-floating-tools button:hover {
  color: var(--family-gold);
  background: rgba(229,184,105,.07);
  border-color: rgba(229,184,105,.1);
}
.tree-floating-tools .tool-separator {
  height:1px;
  background:var(--family-border);
  margin:1px 5px;
}
.tree-royal-frame:fullscreen,
.tree-royal-frame:-webkit-full-screen {
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  border-radius:0 !important;
  background:var(--family-bg) !important;
}
.tree-royal-frame:fullscreen .tree-stage,
.tree-royal-frame:-webkit-full-screen .tree-stage {
  min-height: calc(100vh - 48px) !important;
}
.tree-royal-frame:fullscreen .tree-hint-strip,
.tree-royal-frame:-webkit-full-screen .tree-hint-strip { display:none; }

/* ---------- Responsive polish ---------- */
@media (max-width: 767px) {
  :root { --family-header-h: 72px; }
  #familySiteHeader .family-header-shell { min-height:72px; padding:8px 14px; }
  #familySiteHeader img { max-height: 42px; }
  #familySiteHeader .family-user-profile-pill { display:none !important; }
  #familySiteHeader .family-header-icon { width:38px; height:38px; }

  .family-page-hero,
  .family-hero {
    padding-inline: 18px !important;
    padding-top: 28px !important;
    padding-bottom: 30px !important;
  }
  .family-page-hero h1,
  .family-page-hero h2,
  .family-hero h1,
  .family-hero h2 {
    font-size: clamp(2.15rem, 12vw, 3.35rem) !important;
    line-height: 1.14 !important;
  }
  .family-page-hero p,
  .family-hero p { font-size: 14px !important; line-height:1.8 !important; }

  body.family-public-ui main { overflow-x: clip; }
  body.family-public-ui .glass-premium,
  body.family-public-ui .family-ui-card { border-radius: 22px !important; }

  .tree-floating-tools {
    top:auto;
    bottom:58px;
    left:10px;
    flex-direction:row;
    gap:4px;
    padding:6px;
    border-radius:16px;
  }
  .tree-floating-tools button { width:36px; height:36px; border-radius:10px; }
  .tree-floating-tools .tool-separator { width:1px; height:24px; margin:6px 1px; }

  .royal-control-panel .royal-action { min-height:40px; }
}

@media (max-width: 480px) {
  #familySiteHeader .family-header-brand-copy { display:none !important; }
  #familySiteHeader .family-header-shell { padding-inline:12px; }
  .tree-floating-tools .tree-tool-optional { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  body.family-public-ui *,
  body.family-public-ui *::before,
  body.family-public-ui *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media (max-width: 767px) {
  /* Zoom/fit stay available in the floating dock, so keep the upper bar calm on phones. */
  .royal-control-panel #zoomIn,
  .royal-control-panel #zoomOut,
  .royal-control-panel #fit { display:none !important; }
  .royal-control-panel #resetView { flex: 1 1 180px; }
  .royal-control-panel #focusMode,
  .royal-control-panel #toggleDetails { flex:1 1 120px; }
}

/* Final token-based surface overrides. Kept at the end so page-local Tailwind
   utilities cannot accidentally reintroduce different card treatments. */
body.family-public-ui {
  background-color: var(--family-bg) !important;
}
body.family-public-ui .glass-premium {
  background: var(--family-surface) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.family-public-ui .royal-control-panel {
  background: var(--family-surface) !important;
  border: 1px solid var(--family-border) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.family-public-ui .tree-royal-frame {
  background: var(--family-surface-soft) !important;
  border: 1px solid var(--family-border) !important;
  border-radius: 28px !important;
}
body.family-public-ui .premium-input,
body.family-public-ui .royal-search {
  background-color: rgba(255,255,255,.64) !important;
  border-color: var(--family-border) !important;
}
html.dark body.family-public-ui .premium-input,
html.dark body.family-public-ui .royal-search,
html[data-theme="dark"] body.family-public-ui .premium-input,
html[data-theme="dark"] body.family-public-ui .royal-search {
  background-color: rgba(255,255,255,.035) !important;
}
body.family-public-ui .royal-action {
  border-radius: 999px !important;
  min-height: 42px;
}