html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   Frain Genealogy — "heritage" theme
   A warm parchment palette with a deep-navy accent (a nod to the legacy
   site's #000080) and serif display headings for a family-history feel.
   ========================================================================== */
:root {
  --heritage-navy: #1f3a5f;
  --heritage-navy-dark: #16293f;
  --heritage-gold: #a67c00;
  --heritage-parchment: #faf7f0;
  --heritage-ink: #2d2a26;
}

body {
  background-color: var(--heritage-parchment);
  color: var(--heritage-ink);
  /* Pin the body typeface + size instead of inheriting Bootstrap's defaults
     (the system stack resolves to Segoe UI on Windows). */
  font-family: "Verdana", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
}

/* Serif headings throughout for a classic look */
h1, h2, h3, h4, h5, .navbar-brand {
  font-family: Verdana, "Times New Roman", serif; font-size: 14px;
}

.navbar-brand { color: var(--heritage-navy) !important; font-weight: 700; }

/* --- Hero header --- */
.hero-genealogy {
  background: linear-gradient(135deg, var(--heritage-navy), var(--heritage-navy-dark));
  color: #fff;
  border-radius: .75rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;          /* stacks on narrow screens */
  text-align: center;
}
.hero-crest {
  height: 140px;
  width: auto;
  flex: 0 0 auto;
  border-radius: .4rem;
  background: #fff;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hero-genealogy h1 { font-size: 2.75rem; letter-spacing: .5px; margin-bottom: .5rem; }
.hero-genealogy .entry-count {
  display: inline-block;
  margin-top: .75rem;
  padding: .35rem 1rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 2rem;
  font-size: 1.05rem;
}
.hero-genealogy .entry-count strong { color: #ffd77a; }

/* --- Section titles with a gold underline --- */
.section-title {
  text-align: center;
  color: var(--heritage-navy);
  position: relative;
  margin: 2rem 0 1.25rem;
}
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--heritage-gold);
  margin: .5rem auto 0;
  border-radius: 2px;
}

/* --- Surname "cloud": bigger = more people --- */
.surname-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}
.surname-tag {
  background: #fff;
  border: 1px solid #e3dcc9;
  border-left: 4px solid var(--heritage-gold);
  border-radius: .4rem;
  padding: .4rem .8rem;
  color: var(--heritage-ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.surname-tag .count { color: var(--heritage-navy); font-weight: 700; }

/* --- Cards --- */
.card {
  border: 1px solid #e3dcc9;
  border-radius: .6rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.card-header {
  background: var(--heritage-navy);
  color: #fff;
  font-family: Georgia, serif;
  border-top-left-radius: .6rem !important;
  border-top-right-radius: .6rem !important;
}
.list-group-item a { color: var(--heritage-navy); text-decoration: none; }
.list-group-item a:hover { text-decoration: underline; }

.btn-primary {
  background-color: var(--heritage-navy);
  border-color: var(--heritage-navy);
}
.btn-primary:hover { background-color: var(--heritage-navy-dark); border-color: var(--heritage-navy-dark); }

/* Site-wide: all hyperlinks navy (buttons keep their own styling) */
a:not(.btn) { color: var(--heritage-navy); }
a:not(.btn):hover { color: var(--heritage-navy-dark); }

/* Keep links legible on the dark navy surfaces (hero banner, card headers) */
.hero-genealogy a:not(.btn), .card-header a:not(.btn) { color: #fff; }
.hero-genealogy a:not(.btn):hover, .card-header a:not(.btn):hover { color: #ffd77a; }

/* Person page keeps its bolder Arial link styling (colour comes from the rule above) */
.person-page a:not(.btn) { font-family: Arial; font-size: 13px; font-weight: bold; }

/* "Descendants of ..." heading — mirrors the legacy geneology.css .Title rule.
   Needs to out-specify the site-wide serif heading rule above. */
.person-page h2.person-title {
  font-family: Verdana;
  font-size: 12pt;
  font-style: italic;
  font-weight: bold;
}

/* Tighter vertical rhythm than Bootstrap's 1rem defaults, so the narrative
   sentences and the fact/child lists read as compact blocks. */
.person-page p { margin-bottom: .4rem; }
.person-page ol, .person-page ul { margin-bottom: .15rem; }
.person-page li { margin-bottom: 0; }
/* Bootstrap gives h5 a .5rem bottom margin; zero it so a "Facts about ..."
   heading sits directly on its list, the way the "Children of" block reads. */
.person-page h5 { margin-top: .45rem; margin-bottom: .05rem; }
.person-page hr { margin: .9rem 0; }

/* ==========================================================================
   Photo scrapbook — recreates the legacy photoindex.asp "scrapbook" look:
   a parchment panel, a title banner, and square framed thumbnails 5-per-row.
   ========================================================================== */
.scrapbook {
  background: url('/photos/images/sbook_background.gif') repeat;
  border: 1px solid #cdbf9a;
  border-radius: 8px;
  padding: 1.75rem 1rem;
  box-shadow: inset 0 0 50px rgba(0,0,0,.05), 0 3px 12px rgba(0,0,0,.12);
  /* Shrink the panel to the thumbnail grid instead of spanning the column, then
     centre it. fit-content follows the grid's responsive 5/3/2-column steps. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
/* Title plaque -- a white rounded banner flanked by the ornate sbook_title
   flourish graphics, matching the legacy photoindex.asp title. */
.scrapbook-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: fit-content;
  margin: 0 auto 1.25rem;
  padding: 5px 24px;
  background: #fff;
  border: 1px solid #d7cfb8;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.scrapbook-title span {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-size: 1.15rem;
  color: #000;
}
.scrapbook-title::before,
.scrapbook-title::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 34px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.scrapbook-title::before { background-image: url('/photos/images/sbook_title_left.gif'); }
.scrapbook-title::after  { background-image: url('/photos/images/sbook_title_right.gif'); }
.scrapbook-grid {
  /* Flex-wrap (not a fixed 5-column grid) so a partial last row -- or a page
     with fewer than 5 photos -- stays centred instead of hugging the left.
     The max-width caps the row at 5 thumbs (116px each + 18px gaps). */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 18px;
  max-width: calc(116px * 5 + 18px * 4);
  margin-inline: auto;
}
.scrapbook-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
  background: #fff;
  border: 1px solid #8a8a8a;
  padding: 5px;                                /* white photo "mat" */
  box-shadow: 2px 3px 6px rgba(0,0,0,.35);
  transition: transform .12s ease;
}
.scrapbook-thumb:hover { transform: scale(1.06) rotate(-1deg); }
.scrapbook-pager {
  text-align: center;
  margin: 0 0 1.25rem;
  font-family: Arial, sans-serif;
  font-size: 9px;
  color: var(--heritage-gold);
}
.scrapbook-pager img { vertical-align: middle; border: 0; }

/* Index frame spans the column (like the legacy 90%-wide scrapbook in the
   screenshot) instead of hugging the thumbnail grid; the grid stays centred. */
.scrapbook-index { width: auto; max-width: 100%; }

/* "Back to <name>" link, centred inside the frame like the legacy page. */
.scrapbook-back { text-align: center; margin-top: 1.5rem; }

@media (max-width: 700px) { .scrapbook-grid { grid-template-columns: repeat(3, 116px); } }
@media (max-width: 460px) { .scrapbook-grid { grid-template-columns: repeat(2, 116px); } }

/* ==========================================================================
   Legacy ornate scrapbook border (from photoindex.asp / photodetail.asp).
   Additive: layer this class onto .scrapbook to swap the simple CSS panel for
   the real sbook_index_* corner + edge frame, rebuilt as a CSS 9-slice. Earlier
   background layers paint on top, so the four corner emblems sit over the
   repeating edge strips, which sit over the parchment fill. Corners are 28px
   (top) / 27px (bottom); left edge 8px, right edge 7px.
   ========================================================================== */
.scrapbook-framed {
  border: 0;
  border-radius: 0;
  background:
    url('/photos/images/sbook_index_top_left.gif')     top    left  no-repeat,
    url('/photos/images/sbook_index_top_right.gif')    top    right no-repeat,
    url('/photos/images/sbook_index_bottom_left.gif')  bottom left  no-repeat,
    url('/photos/images/sbook_index_bottom_right.gif') bottom right no-repeat,
    url('/photos/images/sbook_index_top.gif')          top    left  repeat-x,
    url('/photos/images/sbook_index_bottom2.gif')      bottom left  repeat-x,
    url('/photos/images/sbook_index_left2.gif')        top    left  repeat-y,
    url('/photos/images/sbook_index_right2.gif')       top    right repeat-y,
    url('/photos/images/sbook_background.gif')         top    left  repeat;
  padding: 40px 30px;
  box-shadow: 0 3px 12px rgba(0,0,0,.12);
}

/* ==========================================================================
   Single-photo detail (photodetail.asp): date, caption, prev/up/next nav,
   the photo framed with the sbook_inside_* corners, and the red photo id.
   ========================================================================== */
.scrapbook-detail { text-align: center; position: relative; }
.sbook-detail-date {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  color: #000;
}
.sbook-detail-caption {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-size: .8rem;
  color: #000;
  margin-top: .25rem;
}
.sbook-detail-nav { margin: 1rem 0; }
.sbook-detail-nav a { display: inline-block; margin: 0 4px; }
.sbook-detail-id {
  /* Pinned to the far bottom-right corner of the frame, just inside the
     bottom-right corner emblem (the frame reserves ~40px bottom / 30px right). */
  position: absolute;
  right: 38px;
  bottom: 8px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-size: 12px;
  color: #CC0000;
  margin: 0;
}

/* Inner photo frame -- the sbook_inside_* corners/edges (all 25px) as a 9-slice. */
.sbook-photo-frame {
  display: inline-block;
  background:
    url('/photos/images/sbook_inside_top_left.gif')     top    left  no-repeat,
    url('/photos/images/sbook_inside_top_right.gif')    top    right no-repeat,
    url('/photos/images/sbook_inside_bottom_left.gif')  bottom left  no-repeat,
    url('/photos/images/sbook_inside_bottom_right.gif') bottom right no-repeat,
    url('/photos/images/sbook_inside_top.gif')          top    left  repeat-x,
    url('/photos/images/sbook_inside_bottom.gif')       bottom left  repeat-x,
    url('/photos/images/sbook_inside_left.gif')         top    left  repeat-y,
    url('/photos/images/sbook_inside_right.gif')        top    right repeat-y;
  padding: 25px;
}
.sbook-photo-frame img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  height: auto;
}

/* Photo-count total on the index page, framed with the same sbook_inside_*
   9-slice as the detail photo. Corners are 25px, so the padding can't go below
   that without the emblems overlapping. Centred by a text-center wrapper. */
.scrapbook-total {
  display: inline-block;
  background:
    url('/photos/images/sbook_inside_top_left.gif')     top    left  no-repeat,
    url('/photos/images/sbook_inside_top_right.gif')    top    right no-repeat,
    url('/photos/images/sbook_inside_bottom_left.gif')  bottom left  no-repeat,
    url('/photos/images/sbook_inside_bottom_right.gif') bottom right no-repeat,
    url('/photos/images/sbook_inside_top.gif')          top    left  repeat-x,
    url('/photos/images/sbook_inside_bottom.gif')       bottom left  repeat-x,
    url('/photos/images/sbook_inside_left.gif')         top    left  repeat-y,
    url('/photos/images/sbook_inside_right.gif')        top    right repeat-y;
  padding: 25px 35px;
  margin: 1rem 0 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: .8rem;
  font-weight: bold;
  color: #000;
  text-align: center;
}

/* ==========================================================================
   Pedigree chart (pedigree_view.asp) — a left-to-right ancestor tree.
   The subject sits at the left; each generation of ancestors fans out to the
   right. Built from nested <ul>/<li> (see _PedigreeNode.cshtml) so the bracket
   connector lines can be drawn purely in CSS: a horizontal stub from each box
   to a shared vertical "spine", which links a father/mother pair back to their
   child. Replaces the legacy spacer-GIF <table> grid.
   ========================================================================== */
/* Break the chart out of the centred Bootstrap .container to use the full
   browser width -- 5 generations are too wide for the ~1140px container, so this
   lets all columns show on a normal monitor (narrower screens still scroll). */
.pedigree-page {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 1.5rem;
}
.pedigree-scroll {
  overflow-x: auto;             /* wide charts scroll instead of breaking layout */
  padding: .5rem 0 1rem;
  display: flex;
  /* Centre the chart when it fits; "safe" falls back to left-align (so the
     subject isn't scrolled off-screen) when it's wider than the viewport. */
  justify-content: safe center;
}
.pedigree-tree {
  display: flex;
  min-width: max-content;       /* keep column widths; scroll if the page is narrow */
}
.pedigree-tree ul {
  display: flex;
  flex-direction: column;
  justify-content: center;      /* a parent lines up with the midpoint of its two children */
  list-style: none;
  margin: 0;
  padding-left: 2rem;           /* the gap that holds the connector lines */
  position: relative;
}
.pedigree-tree > ul { padding-left: 0; }   /* the subject has nothing to its left */
.pedigree-tree li {
  display: flex;
  align-items: center;
  position: relative;
  padding: .3rem 0;
}

/* Horizontal line from a child box out to the spine (centred on each ancestor list). */
.pedigree-tree ul::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1rem;                  /* half of the 2rem gap */
  border-top: 2px solid #c4b48f;
}
.pedigree-tree > ul::before { display: none; }

/* Horizontal stub from the spine into each ancestor box. */
.pedigree-tree li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1rem;                  /* the spine sits at the midpoint of the gap */
  width: 1rem;
  border-top: 2px solid #c4b48f;
}
/* Vertical spine linking a father/mother pair; the two halves meet at the centre. */
.pedigree-tree li::after {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0;
  bottom: 0;
  border-left: 2px solid #c4b48f;
}
.pedigree-tree li:first-child::after { top: 50%; }     /* upper (father) half only */
.pedigree-tree li:last-child::after  { bottom: 50%; }  /* lower (mother) half only */
.pedigree-tree > ul > li::before,
.pedigree-tree > ul > li::after { display: none; }     /* the subject has no incoming line */

/* ---- Boxes ---- */
.ped-box {
  position: relative;
  z-index: 1;                   /* paint over the connector lines behind it */
  width: 15rem;                 /* room for "B: 7 Sep 1905 - Culver, KS" lines */
  background: #fff;
  border: 1px solid #e3dcc9;
  border-left: 4px solid #adb5bd;
  border-radius: .4rem;
  padding: .35rem 1.35rem .4rem .6rem;   /* right room for the re-root arrow */
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.ped-male   { border-left-color: var(--heritage-navy); }   /* true == male in the legacy data */
.ped-female { border-left-color: #8a3b4d; }
.ped-empty {
  border-style: dashed;
  border-left-color: #e3dcc9;
  background: #fbf9f4;
  min-height: 2.5rem;
}
.pedigree-page .ped-name {
  display: block;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.15;
  margin-bottom: .1rem;
}
/* Born / Married / Died detail lines inside each box. */
.ped-fact {
  font-size: .62rem;
  line-height: 1.3;
  color: #3a352d;
  white-space: nowrap;          /* keep each date/place on one line so box heights
                                   stay uniform and the connector brackets align */
  overflow: hidden;             /* long places clip with an ellipsis (full text on hover) */
  text-overflow: ellipsis;
}
.ped-lbl {
  display: inline-block;
  width: 1.1rem;
  font-weight: 700;
  color: #6c5f4b;
}

/* The re-root arrow: recentres the whole chart on that ancestor. */
.pedigree-page .ped-reroot {
  position: absolute;
  top: .3rem;
  right: .4rem;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}

/* The subject's spouse, tucked beneath them (outside the ancestor connector flow). */
.ped-spouse {
  position: absolute;
  top: calc(100% + .55rem);
  left: 0;
  opacity: .95;
}
.ped-spouse-label {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c5f4b;
}
/* ===== Admin per-person menu (mainadmin.asp replacement) ===== */
/* Two link columns centred as a group beneath the heading. */
.admin-menu {
    gap: .5rem 5rem;
}
.admin-menu .admin-action {
    color: #cc0000;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.admin-menu .admin-action:hover {
    text-decoration: underline;
}

/* Admin search results: size to content and give columns tidy spacing
   instead of stretching across the whole page. */
.admin-results th,
.admin-results td {
    padding-right: 2.5rem;
}
.admin-results th:last-child,
.admin-results td:last-child {
    padding-right: .5rem;
}


/* ===== Reversed secondary button =====
   Reversed from Bootstrap's outline button: filled at rest, outlined on hover,
   rather than the other way round. Overriding the --bs-btn-* variables (instead
   of the colour properties directly) keeps the focus ring, active and disabled
   states working through Bootstrap's own cascade. Used by the "Back to ..."
   buttons and the home page Explore links. Pair with .btn:
   <a class="btn btn-reverse">&laquo; Back to ...</a> */
.btn-reverse {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #6c757d;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-active-color: #6c757d;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
}