/* include/style.css — Grafted Trees Genealogy, "Parish Register"
   Loaded by pageHead() in include/header.php.
   Part 1 styles bare elements so every existing table-built page picks
   up the look unchanged. Part 2 is classes for the rewritten header,
   footer and (later) page layouts. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

:root {
  --gt-bg:      #f5efe3;   /* ivory ground */
  --gt-panel:   #fbf7ee;   /* raised panels, inputs */
  --gt-ink:     #2a2520;
  --gt-muted:   #6b5f52;
  --gt-rule:    #c9b48c;   /* brass hairlines */
  --gt-rule-2:  #e6dcc6;   /* fainter rule for table rows */
  --gt-accent:  #7a2e2e;   /* oxblood: links, primary buttons */
  --gt-accent-2:#9a7b3a;   /* brass: dates, hover */
  --gt-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --gt-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --gt-radius:  0px;
  --gt-max:     1200px;
}

/* ---------- Part 1: elements ---------- */

html { background: var(--gt-bg); }
body {
  margin: 0 auto;
  max-width: var(--gt-max);
  padding: 0 24px 40px;
  background: var(--gt-bg);
  color: var(--gt-ink);
  font-family: var(--gt-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
/* pages that used to set these via attributes */
body[bgcolor] { background: var(--gt-bg) !important; }

h1, h2, h3, h4 {
  font-family: var(--gt-display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--gt-ink);
  margin: 1.2em 0 0.4em;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
big { font-family: var(--gt-display); font-size: 1.4rem; font-weight: 600; }
small { font-size: 0.85rem; color: var(--gt-muted); }

a { color: var(--gt-accent); text-decoration: none; }
a:hover { color: var(--gt-accent-2); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--gt-rule); margin: 18px 0; }

/* Legacy tables. border=1 tables become ruled registers; border=0
   layout tables stay invisible but get sane cell padding. */
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 4px 8px; font-size: inherit; }   /* no vertical-align: valign= attrs must keep working (pedigree chart) */
th { vertical-align: top; }
th { font-family: var(--gt-body); font-weight: 600; text-align: left; color: var(--gt-muted);
     font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
table[border="1"] { border: 1px solid var(--gt-rule); background: var(--gt-panel); }
table[border="1"] td, table[border="1"] th { border-top: 1px solid var(--gt-rule-2); }
table[border="1"] tr:first-child td, table[border="1"] tr:first-child th { border-top: 0; }
table[frame="box"] { border: 1px solid var(--gt-rule); background: var(--gt-panel); }
table[bgcolor] { background: var(--gt-panel) !important; }
font[color="white"] { color: var(--gt-ink) !important; }

/* Form controls */
button, input[type="submit"], input[type="button"], .login {
  font-family: var(--gt-body);
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--gt-accent);
  border-radius: var(--gt-radius);
  background: transparent;
  color: var(--gt-accent);
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
}
button:hover, input[type="submit"]:hover, .login:hover {
  background: var(--gt-accent); color: #fff;
}
a:hover button { text-decoration: none; }
.gt-primary, button.gt-primary { background: var(--gt-accent); color: #fff; }
input[type="text"], input[type="password"], input[type="email"], select, textarea {
  font-family: var(--gt-body);
  font-size: 0.95rem;
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--gt-rule);
  border-radius: var(--gt-radius);
  background: var(--gt-panel);
  color: var(--gt-ink);
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gt-accent-2); outline-offset: 1px; }
label { font-size: 0.8rem; color: var(--gt-muted); }

img { max-width: 100%; }
img:not([height]) { height: auto; }      /* keep explicit height= on spacer/line images */
center { display: block; }

/* ---------- Part 2: header / footer ---------- */

.gt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 0 14px;
  border-bottom: 2px solid var(--gt-rule);
  margin-bottom: 8px;
}
.gt-brand {
  font-family: var(--gt-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gt-ink);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.gt-brand:hover { text-decoration: none; color: var(--gt-accent); }
.gt-brand span { font-weight: 500; color: var(--gt-muted); }

.gt-search { display: flex; align-items: flex-end; gap: 8px; margin: 0; }
.gt-search label { display: flex; flex-direction: column; gap: 3px; font-size: 0.7rem;
                   letter-spacing: 0.12em; text-transform: uppercase; }
.gt-search input[type="text"] { width: 140px; }

.gt-account { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.gt-account .gt-who { text-align: right; line-height: 1.2; }
.gt-account .gt-who small { display: block; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.65rem; }
.gt-account form { margin: 0; display: inline; }
.gt-notice { margin: 0 0 12px; padding: 8px 12px; text-align: center; background: var(--gt-panel);
             border: 1px solid var(--gt-rule); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }

.gt-footer {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--gt-rule);
  font-size: 0.8rem;
  color: var(--gt-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  body { padding: 0 14px 32px; font-size: 15px; }
  h1 { font-size: 2rem; }
  .gt-header { gap: 12px; padding-top: 12px; }
  .gt-brand { font-size: 1.4rem; }
  .gt-search { order: 3; width: 100%; }
  .gt-search input[type="text"] { width: 100%; }
  .gt-search label { flex-grow: 1; }
  .gt-account { margin-left: auto; }
  /* legacy tables get horizontal scroll instead of squashing */
  table[border="1"], table[frame="box"] { display: block; max-width: 100%; overflow-x: auto; }
}

/* ---------- Person page ---------- */
.gt-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0; }
.gt-favform { margin: 0; }

.gt-person-head {
  display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  padding: 20px 0 16px; border-bottom: 1px solid var(--gt-rule); margin-bottom: 16px;
}
.gt-portrait { margin: 0; flex: 0 0 auto; text-align: center; font-size: 0.75rem; color: var(--gt-muted); }
.gt-portrait img { max-width: 120px; border: 1px solid var(--gt-rule); background: var(--gt-panel); padding: 3px; }
.gt-person-title { flex: 1 1 320px; min-width: 0; }
.gt-name { margin: 0; font-size: 2.8rem; }
.gt-daterange { margin-top: 4px; font-size: 1.05rem; color: var(--gt-muted); }
.gt-person-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
.gt-viewchooser form { margin: 0; font-size: 0.85rem; color: var(--gt-muted); }
.gt-viewchooser select { max-width: 220px; }

.gt-person-meta { line-height: 1.6; }
.gt-person-meta:empty { display: none; }

.gt-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px;
  padding: 16px 20px; margin: 16px 0 24px;
  background: var(--gt-panel); border: 1px solid var(--gt-rule);
}
.gt-fact-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gt-muted); font-weight: 600; }
.gt-fact-value { font-size: 1.05rem; margin-top: 2px; }
.gt-fact-place { font-size: 0.85rem; color: var(--gt-muted); margin-top: 2px; }

.gt-events h2 { margin-top: 0; }
.gt-event {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--gt-rule-2);
}
.gt-year { font-weight: 600; color: var(--gt-accent-2); font-variant-numeric: tabular-nums; }
.gt-event-type { font-weight: 600; }
.gt-event-body table { margin-top: 4px; }
.gt-event-body th { font-size: 0.7rem; }

@media (max-width: 720px) {
  .gt-name { font-size: 2rem; }
  .gt-person-tools { align-items: flex-start; margin-left: 0; width: 100%; }
  .gt-event { grid-template-columns: 52px 1fr; }
}

/* Person page: two columns, family sidebar */
.gt-person-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.gt-person-side { padding: 18px 20px; background: var(--gt-panel); border: 1px solid var(--gt-rule); position: sticky; top: 16px; }
.gt-person-side h2 { font-size: 1.25rem; margin: 14px 0 4px; }
.gt-person-side h2:first-child { margin-top: 0; }
.gt-person-side h3 { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gt-muted); margin: 8px 0 2px; font-family: var(--gt-body); }
.gt-side-list { list-style: none; margin: 0; padding: 0; }
.gt-side-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--gt-rule-2); }
.gt-side-list li:last-child { border-bottom: 0; }
.gt-side-dates { font-size: 0.8rem; color: var(--gt-muted); white-space: nowrap; }
@media (max-width: 900px) {
  .gt-person-grid { grid-template-columns: 1fr; gap: 24px; }
  .gt-person-side { position: static; order: -1; }   /* family first on phones, like the mockup */
}

/* Person page: lower sections */
.gt-links { list-style: none; margin: 8px 0 16px; padding: 0; font-size: 0.95rem; }
.gt-links li { padding: 3px 0; }
.gt-link-label { display: inline-block; min-width: 68px; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gt-muted); font-weight: 600; }

.gt-sources, .gt-stats, .gt-comments { margin-top: 28px; }
.gt-sources h2, .gt-stats h2, .gt-comments h2 { margin-top: 0; }
.gt-thumbs { display: flex; flex-wrap: wrap; gap: 16px; }
.gt-thumb { margin: 0; max-width: 200px; font-size: 0.8rem; color: var(--gt-muted); text-align: center; }
.gt-thumb img { display: block; border: 1px solid var(--gt-rule); background: var(--gt-panel); padding: 3px; margin: 0 auto 4px; }
.gt-notes { margin-top: 16px; padding: 14px 18px; background: var(--gt-panel); border: 1px solid var(--gt-rule); white-space: pre-wrap; font-size: 0.95rem; line-height: 1.5; }

.gt-stats p { margin: 6px 0; }
.gt-stats h3 { margin: 16px 0 4px; }
.gt-gens { margin: 6px 0 12px; font-size: 0.85rem; }
.gt-gens th, .gt-gens td { text-align: center; padding: 3px 8px; }
.gt-rels { margin: 0 0 8px; padding-left: 20px; }

.gt-comment-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.gt-comment-form input[type="text"] { flex: 1 1 320px; }
.gt-comment-list { list-style: none; margin: 0; padding: 0; }
.gt-comment { padding: 10px 0; border-top: 1px solid var(--gt-rule-2); }
.gt-comment-head { display: flex; align-items: center; gap: 10px; }
.gt-comment-date { font-size: 0.8rem; color: var(--gt-muted); }
.gt-comment-del { margin-left: auto; }
.gt-comment-del input[type="submit"] { min-height: 28px; font-size: 0.75rem; padding: 0 8px; }
.gt-comment-body { margin-top: 4px; font-style: italic; }
.gt-updated { margin-top: 24px; font-size: 0.8rem; color: var(--gt-muted); }
.gt-person-side h2 .gt-side-note { font-family: var(--gt-body); font-size: 0.8rem; font-weight: 400; color: var(--gt-muted); margin-left: 8px; white-space: nowrap; }

/* Search page */
.gt-search-page { margin-top: 16px; }
.gt-search-form { margin-bottom: 24px; }
.gt-count { margin: 0 0 12px; color: var(--gt-muted); }
.gt-muted { color: var(--gt-muted); }
.gt-results { width: 100%; background: var(--gt-panel); border: 1px solid var(--gt-rule); }
.gt-results th { border-bottom: 1px solid var(--gt-rule); padding: 8px 10px; text-align: left; }
.gt-results td { padding: 7px 10px; border-top: 1px solid var(--gt-rule-2); }
.gt-results tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
@media (max-width: 900px) {
  .gt-results { display: block; overflow-x: auto; }
}

/* Advanced search form (front page + search page) */
.gt-searchform { margin: 0 0 8px; padding: 18px 20px; background: var(--gt-panel); border: 1px solid var(--gt-rule); }
.gt-sf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; align-items: start; }
.gt-sf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gt-sf-field > label, .gt-sf-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gt-muted); font-weight: 600; }
.gt-sf-field > label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.gt-sf-field input[type="text"], .gt-sf-field select { width: 100%; box-sizing: border-box; }
.gt-sf-range { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.gt-sf-range input { width: 100%; }
.gt-sf-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--gt-ink); font-weight: 400; margin-top: 4px; }
.gt-sf-wide { grid-column: 1 / -1; }
.gt-sf-wide .gt-sf-inline { margin-right: 18px; }
.gt-sf-actions { margin-top: 16px; }

/* Reflow by viewport too, not only by container width (the home-page form
   sits in a wide layout-table cell where auto-fit alone won't collapse). */
@media (max-width: 760px) { .gt-sf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .gt-sf-grid { grid-template-columns: 1fr; } }

/* Image viewer */
.gt-image-page { margin-top: 16px; }
.gt-image-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-size: 0.9rem; }
.gt-image { margin: 0; text-align: center; }
.gt-image img { display: inline-block; max-width: 100%; border: 1px solid var(--gt-rule); background: var(--gt-panel); padding: 4px; }
.gt-image figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--gt-muted); }
.gt-image-gate { max-width: 560px; margin: 32px auto; padding: 24px 28px; background: var(--gt-panel); border: 1px solid var(--gt-rule); text-align: center; }
.gt-image-gate h2 { margin-top: 0; }

/* Admin tabs + invites */
.gt-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gt-rule); margin: 16px 0 24px; }
.gt-tabs a {
  padding: 7px 18px;
  font-family: var(--gt-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--gt-muted);
  background: var(--gt-bg);
  border: 1px solid var(--gt-rule);
  border-bottom: none;
  margin-bottom: -1px;            /* overlap the strip's 1px rule */
}
.gt-tabs a:hover { color: var(--gt-accent); background: var(--gt-panel); }
.gt-tabs a.gt-tab-on {
  color: #fff;
  background: var(--gt-accent);
  border-color: var(--gt-accent);
}
.gt-invites code { font-size: 0.9em; }
.gt-invites .gt-inv-off td { color: var(--gt-muted); background: rgba(0,0,0,0.03); }
.gt-copy { min-height: 30px; font-size: 0.8rem; padding: 0 10px; }
.gt-invite-new { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 18px; padding: 16px 18px; background: var(--gt-panel); border: 1px solid var(--gt-rule); }
.gt-invite-new label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--gt-muted); }
.gt-invite-new input[type="text"], .gt-invite-new select { min-height: 34px; }

/* Home page: full-width search above the browse/recent columns */
.gt-home-search { width: 100%; margin-bottom: 20px; clear: both; }
.gt-treepick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gt-treepick label { display: flex; align-items: center; gap: 6px; margin: 0; }
.gt-treepick select { max-width: 22em; }

/* Home page tabs */
.gt-home-panel { padding: 4px 0 8px; }
.gt-home-panel h2 { margin: 20px 0 6px; }
.gt-home-panel h2:first-child { margin-top: 4px; }
.gt-home-panel h3 { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gt-muted); margin: 14px 0 4px; font-family: var(--gt-body); }
.gt-home-panel .gt-side-list { max-width: 640px; }
.gt-home-panel .gt-side-list li { display: block; }

/* SVG ancestor tree */
.gt-svgtree { max-width: 100%; border: 1px solid var(--gt-rule); background: var(--gt-bg); padding: 8px; }
.gt-svgtree svg { display: block; max-width: none; }
.gt-svgtree-ctl { font-size: 0.9rem; color: var(--gt-muted); }
.gt-svgtree-ctl select { min-height: 32px; }