/* ============================================================
   The Family Garden — refreshed stylesheet
   Warm garden palette, responsive, readable. Keeps the soul
   of the original (rose/cream) but cleans up the layout.
   ============================================================ */

:root {
  --rose:        #8c2f39;  /* deep garden rose — evolved from the old maroon */
  --rose-soft:   #a8454f;
  --sage:        #6b7d5e;  /* muted garden green */
  --sage-deep:   #4f5e44;
  --cream:       #faf6ee;  /* warm paper */
  --cream-deep:  #f1e9da;
  --ink:         #3a322c;  /* soft near-black for body text */
  --gold:        #b8893b;  /* aged-brass accent */
  --rule:        #d9cdb8;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  line-height: 1.75;
}

/* HOMEPAGE ONLY: Linda's potted-flowers-on-brick strip (garden4.jpg),
   tiled vertically down the left edge over a matching salmon wall fill.
   Scoped to .home so it does NOT override the individual backgrounds
   on every other page. */
body.home {
  --wall: #d99e8f;            /* sampled salmon stucco from garden4.jpg */
  background-color: var(--wall);
  background-image: url("images/garden4.jpg");
  background-repeat: repeat-y;
  background-position: top left;
  background-attachment: scroll;
}

/* ---------- Layout ---------- */
.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 22px 64px;
}

.site-header {
  background: var(--sage-deep);
  color: var(--cream);
  text-align: center;
  padding: 34px 20px 26px;
  border-bottom: 5px solid var(--gold);
}

.site-header h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.1rem);
  letter-spacing: 0.5px;
  font-weight: 600;
}

.site-header .tagline {
  margin: 10px 0 0;
  font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  color: var(--cream-deep);
}

.site-header .dedication {
  margin: 16px auto 0;
  max-width: 640px;
  font-size: 0.98rem;
  color: #e7dcc8;
}

/* sticky family-line nav */
.familynav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--cream-deep);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  padding: 10px 8px;
  font-size: 0.92rem;
}
.familynav a {
  display: inline-block;
  margin: 3px 8px;
  color: var(--sage-deep);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.familynav a:hover { color: var(--rose); border-bottom-color: var(--rose); }

/* ---------- Intro / dedication card ---------- */
.intro {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 5px solid var(--rose);
  border-radius: 6px;
  padding: 22px 26px;
  margin: 30px 0;
  box-shadow: 0 2px 10px rgba(58,50,44,0.06);
}
.intro img { max-width: 200px; height: auto; float: left; margin: 4px 20px 12px 0; border-radius: 4px; }
.intro p { margin: 0 0 12px; }
.intro .signoff { font-style: italic; color: var(--rose); }
.intro::after { content: ""; display: block; clear: both; }

/* ---------- Section blocks per family line ---------- */
/* opaque cream card so link text stays crisp over Linda's flower wall */
.section {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px 24px 22px;
  margin: 24px 0 0;
  scroll-margin-top: 70px;
  box-shadow: 0 2px 10px rgba(58,50,44,0.07);
}
.section > h2 {
  color: var(--rose);
  font-size: 1.5rem;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 6px;
}
.section .lead { color: var(--sage-deep); margin: 8px 0 14px; }

/* link lists within a section */
.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 22px;
}
.links li { margin: 0; }
.links a {
  color: var(--rose);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.links a:hover { border-bottom-color: var(--rose); }
.links .note { color: var(--ink); font-size: 0.92rem; opacity: 0.75; }

/* ---------- Generic links anywhere ---------- */
a { color: var(--rose); }
a:hover { color: var(--rose-soft); }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 30px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 20px 24px;
  font-size: 0.9rem;
  color: #6e645a;
  text-align: center;
  box-shadow: 0 2px 10px rgba(58,50,44,0.07);
}
.site-footer a { color: var(--sage-deep); }

/* ============================================================
   Readability layer for legacy / Ancestral Quest pages.
   Applied via class="legacy" on the original <body>. Keeps her
   hand-made background and all content; just makes the old
   fixed-width, tiny-font pages readable and mobile-friendly.
   ============================================================ */
body.legacy {
  /* her background= attribute on <body> is preserved by the HTML;
     we only set sizing/spacing here, not the background image.

     Her layout used a per-page left "spacer" column (<td width="175">,
     "185", etc.) sized to clear that page's own border artwork. We
     HONOR that spacer instead of imposing our own indent, so every page
     indents exactly as she designed and her border art is never covered. */
  font-size: 1.25rem;
  line-height: 1.75;
  padding: 18px 16px 48px;
}

/* Force readable text on the legacy pages. The old <font size> tags set
   small fixed sizes; we override them with absolute rem values so the
   body copy is genuinely larger. Big headings (size 4+) are left alone
   so they still stand out. !important is needed to beat the inline tags. */
body.legacy, body.legacy p, body.legacy td, body.legacy li,
body.legacy span, body.legacy div, body.legacy blockquote {
  font-size: 1.25rem !important;
  line-height: 1.7 !important;
}
body.legacy font[size="1"] { font-size: 1.05rem !important; }
body.legacy font[size="2"] { font-size: 1.18rem !important; }
body.legacy font[size="3"] { font-size: 1.30rem !important; }
body.legacy font[size="4"] { font-size: 1.5rem !important; }
/* leave font size 5,6,7 (titles) at their natural large size */

/* Keep her original layout tables as-designed; only cap width so wide
   data tables don't force horizontal scroll. We do NOT zero her spacer
   columns — those are what hold the content clear of her border art. */
body.legacy table { max-width: 100%; }
body.legacy img { max-width: 100%; height: auto; }
body.legacy td { vertical-align: top; }

/* Put the soft readable cream panel ONLY behind the real content cell,
   never behind her left spacer column. Her layout tables are always
   "[narrow spacer td][wide content td]", so the content cell is the
   one that FOLLOWS another td in the same row. Targeting "td + td"
   catches the content cell on every page regardless of its pixel width,
   leaving the first (spacer) cell transparent so her border art shows. */
body.legacy > table > tbody > tr > td + td,
body.legacy > table > tr > td + td {
  background: rgba(250, 246, 238, 0.92);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(58,50,44,0.10);
  padding: 12px 24px !important;
}

/* READABILITY GUARANTEE: the content panel is light cream, so any text
   inside it must be dark enough to read. The old pages contain white and
   pale/bright font colors (originally meant for dark backgrounds) that
   would be invisible or hard to read on the cream panel. Force those
   specific light colors to a dark, readable ink inside the panel only —
   her dark-background art areas (outside the panel) keep their light text. */
body.legacy td + td font[color="#FFFFFF" i],
body.legacy td + td font[color="white" i],
body.legacy td + td font[color="#FFFFCC" i],
body.legacy td + td font[color="#FFFF99" i],
body.legacy td + td font[color="#FFFF66" i],
body.legacy td + td font[color="#FFFF00" i],
body.legacy td + td font[color="#FFCCCC" i],
body.legacy td + td font[color="#FFCC99" i],
body.legacy td + td font[color="#FFCC66" i],
body.legacy td + td font[color="#FFCCFF" i],
body.legacy td + td font[color="#CCFFCC" i],
body.legacy td + td font[color="#CCFFFF" i],
body.legacy td + td font[color="#CCCCFF" i],
body.legacy td + td font[color="#CC99FF" i],
body.legacy td + td font[color="#FFFFFF" i],
body.legacy td + td font[color="#FF6666" i],
body.legacy td + td font[color="#FF6699" i],
body.legacy td + td font[color="#FF66CC" i],
body.legacy td + td font[color="#FF99CC" i],
body.legacy td + td font[color="#99FF99" i],
body.legacy td + td font[color="#00FF00" i],
body.legacy td + td font[color="#6666FF" i] {
  color: #4a2b2f !important;   /* dark warm ink, readable on cream */
}
/* also catch pale colors set via inline style or span */
body.legacy td + td [style*="color:#ffffff" i],
body.legacy td + td [style*="color: #ffffff" i],
body.legacy td + td [style*="color:white" i] {
  color: #4a2b2f !important;
}

/* Some pages set the whole-page default text color to white/pale via the
   <body text="..."> attribute (for their dark background). Inside the
   cream content panel that default would be invisible, so set a dark
   default there. Text that has its OWN explicit dark <font color> still
   wins; only the inherited pale default is corrected. */
body.legacy td + td { color: #3a322c; }

/* On narrow screens her wide border tiles awkwardly and the fixed
   spacer would squeeze text; let content use the full width there. */
@media (max-width: 700px) {
  body.legacy > table > tbody > tr > td:first-child:empty,
  body.legacy > table > tr > td:first-child:empty { display: none; }
  body.legacy td[width] { width: auto !important; }
}

/* a small "back to home" bar we inject at the top of legacy pages */
.home-bar {
  font: 600 1rem/1 "Iowan Old Style", Palatino, Georgia, serif;
  margin: 0 0 14px;
}
.home-bar a {
  display: inline-block;
  background: var(--sage-deep);
  color: var(--cream);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 20px;
}
.home-bar a:hover { background: var(--rose); }
.home-bar a.home-bar-search { margin-left: 8px; background: var(--rose); }
.home-bar a.home-bar-search:hover { background: var(--sage-deep); }

/* ============================================================
   Absolutely-positioned pages (nextgen, radford-bible, butler,
   daddy-into, ration-book, radford-bible2). Linda hand-placed photos
   at fixed pixel coordinates relative to the page top. Our readability
   changes (larger fonts, cream panel, an in-flow home bar) shift the
   flow and make those fixed photos overlap the text.

   For these pages we OPT OUT of the reflow: keep her original sizing
   and layout so the coordinates line up as she designed, and float the
   home bar over the top corner so it consumes no vertical space.
   ============================================================ */
body.noflow { font-size: 1rem; line-height: normal; padding: 0; }
body.noflow p, body.noflow td, body.noflow span, body.noflow div,
body.noflow li, body.noflow blockquote,
body.noflow font[size="1"], body.noflow font[size="2"],
body.noflow font[size="3"], body.noflow font[size="4"] {
  font-size: revert !important;
  line-height: normal !important;
}
body.noflow > table > tbody > tr > td + td,
body.noflow > table > tr > td + td {
  background: none; box-shadow: none; border-radius: 0; padding: revert !important;
}
body.noflow .home-bar {
  position: absolute; top: 8px; left: 8px; margin: 0; z-index: 10;
}
body.noflow .home-bar a { padding: 6px 12px; font-size: 0.9rem; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .intro img { float: none; display: block; margin: 0 auto 16px; }
  .page { padding: 0 14px 48px; }
  .section { padding: 16px 16px 18px; }
  .links { grid-template-columns: 1fr; }   /* single column on phones */

  /* garden4.jpg is a wide desktop strip; on a phone, scrolling it as a
     fixed layer is janky and would force sideways scroll. Anchor it,
     scaled to the viewport width, over the matching salmon wall. */
  body {
    background-attachment: scroll;
    background-size: 200% auto;   /* show the flowers without forcing h-scroll */
  }
}

/* Guard against any element forcing horizontal scroll on small screens */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }