/* ================================
   Macanović Family — styles.css
   Mobile-first, light theme
   ================================ */

:root{
  /* Colors */
  --bg:#ffffff;
  --surface:#f8f9fb;
  --text:#222222;
  --muted:#6b7280;
  --brand:#4f46e5;     /* indigo */
  --brand-2:#22c55e;   /* green */
  --card:#ffffff;
  --border:#e5e7eb;
  --error:#d62828;

  /* Effects */
  --radius:12px;
  --shadow:0 6px 20px rgba(0,0,0,.06);

  /* Layout */
  --container: 92vw;
  --container-max: 1280px;

  /* Type (fluid) */
  --fs-sm: clamp(.875rem, .84rem + .2vw, .95rem);
  --fs-md: clamp(1rem, .96rem + .3vw, 1.0625rem);
  --fs-lg: clamp(1.25rem, 1.05rem + 1.2vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.35rem + 2.2vw, 2.5rem);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.container{
  width: var(--container);
  max-width: var(--container-max);
  margin-inline:auto;
  padding: 1rem;
}

/* Header / Nav */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background:#fff;
  border-bottom:1px solid var(--border);
  backdrop-filter: saturate(140%) blur(8px);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap: wrap; /* allow wrap on small screens */
}
.brand{
  font-weight:800;
  letter-spacing:.2px;
  font-size: 1.05rem;
  color: var(--text);
  white-space: nowrap;
}
.brand .dot{ color: var(--brand); }

.nav{
  display:flex;
  gap:.25rem;
  overflow:auto hidden; /* small screens: horizontal scroll instead of wrapping */
  -webkit-overflow-scrolling: touch;
  padding-bottom:.25rem;
}
.nav a{
  display:inline-block;
  padding:.5rem .8rem;
  border-radius:999px;
  color:var(--text);
  white-space: nowrap;
}
.nav a.active, .nav a:hover{
  background:var(--surface);
  text-decoration:none;
}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  margin-top:3rem;
  background:var(--surface);
  text-align:center;
}
.site-footer p{
  color:var(--muted);
  font-size: var(--fs-sm);
}

/* Hero */
.hero{
  padding: 2.5rem 0;
  text-align:center;
}
.hero h1{
  margin:0 0 .5rem;
  font-size: var(--fs-xl);
}
.lead{
  color:var(--muted);
  margin: 0 auto 1.25rem;
  max-width: 60ch;
  font-size: var(--fs-md);
}

.cta{
  display:flex;
  gap:.6rem;
  justify-content:center;
  flex-wrap:wrap;
}
.button{
  display:inline-block;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#fff;
  padding:.7rem 1rem;
  border:none;
  border-radius: var(--radius);
  font-weight:600;
  box-shadow: var(--shadow);
}
.button.outline{
  background:transparent;
  color:var(--brand);
  border:1px solid var(--brand);
  box-shadow:none;
}

/* Cards / Grid */
.grid{
  display:grid;
  grid-template-columns: 1fr;         /* mobile first */
  gap:1rem;
  margin-top: 1.25rem;
}
@media (min-width: 640px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding:1rem;
  box-shadow: var(--shadow);
}
.card h2{ margin-top:0; font-size: var(--fs-lg); }
.more{ display:inline-block; margin-top:.25rem; }

/* Page sections */
.page-header{ margin: 1.5rem 0 .75rem; }
.prose h2{ margin-top:1.25rem; font-size: var(--fs-lg); }
.prose ul{ padding-left:1.15rem; }
.prose li{ margin:.4rem 0; }

/* Forms */
.form{ max-width: 720px; }
.field{
  margin:.85rem 0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
label{ font-weight:600; font-size: var(--fs-sm); }
input, textarea{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius: 10px;
  padding:.75rem .85rem;
  font-size: var(--fs-md);
}
input:focus, textarea:focus{ outline:2px solid var(--brand); }
textarea{ min-height: 160px; resize: vertical; }
.error{ color: var(--error); font-size:.85rem; min-height:1rem; }
.muted{ color: var(--muted); }
.actions{ display:flex; gap:.6rem; flex-wrap:wrap }

/* Honeypot (kept hidden) */
.honeypot{ display:none !important; }

/* Legend badges */
.legend{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin: 1rem 0;
}
.badge{
  display:inline-block;
  font-size:.8rem;
  font-weight:600;
  padding:.25rem .6rem;
  border-radius:999px;
  color:#fff;
  box-shadow: var(--shadow);
}
.badge.root{   background: var(--brand); }
.badge.spouse{ background: #d62828; }
.badge.child{  background: #22c55e; }

/* Family Tree */
.tree{ margin-top:.75rem; }
.tree ul{
  position:relative;
  padding-left: 1.1rem;   /* tighter on mobile */
  list-style:none;
  margin: .2rem 0;
}
.tree ul::before{
  content:"";
  position:absolute;
  top:0; left:.45rem; bottom:0;
  border-left:1px dashed var(--border);
}
.tree li{
  position:relative;
  padding:.25rem 0 .25rem 1rem;
}
.tree li::before{
  content:"";
  position:absolute;
  top:1rem; left:.45rem; width:.9rem;
  border-top:1px dashed var(--border);
}

/* Tree nodes stay subtle; borders carry meaning */
.node{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.35rem .55rem;
  cursor:pointer;
  display:inline-flex;
  gap:.5rem;
  align-items:baseline;
  box-shadow: var(--shadow);
  max-width: 100%;
}
.node .name{
  font-weight:700;
  font-size: var(--fs-sm);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node .years{
  color:var(--muted);
  font-size: .85em;
  white-space: nowrap;
}

/* role by border only (clean look) */
.node.root{   border-color: var(--brand); }
.node.spouse{ border-color: #d62828; }
.node.child{  border-color: #22c55e; }

/* Make tiny nodes tappable */
button.node{
  line-height:1.2;
  -webkit-tap-highlight-color: transparent;
}

/* Utilities */
.hide-desktop{ display: inline }
.hide-mobile{ display: none }

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive tweaks ---------- */

/* Small phones */
@media (max-width: 420px){
  .brand{ font-size: 1rem; }
  .button{ padding:.65rem .9rem; }
  .node{ padding:.32rem .5rem; }
  .tree ul{ padding-left: .9rem; }
  .tree li{ padding-left: .9rem; }
}

/* Tablets and up */
@media (min-width: 640px){
  .brand{ font-size: 1.15rem; }
  .hero{ padding: 3rem 0; }
}

/* Desktops */
@media (min-width: 960px){
  .brand{ font-size: 1.25rem; }
  .hero{ padding: 4rem 0; }
}

/* Optional: clamp long prose width for readability on desktop */
@media (min-width: 960px){
  .prose{ max-width: none; }
}

/* Ensure header nav doesn't wrap awkwardly on midsize screens */
@media (max-width: 720px){
  .header-inner{ gap:.5rem; }
}

/* Tables (if any in future) */
table{ width:100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td{ padding:.6rem; border:1px solid var(--border); text-align:left; }
th{ background: var(--surface); }

/* Code (if used in prose) */
code, pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 8px;
}
code{ padding:.15rem .35rem; }
pre{ padding:.8rem; overflow:auto }