/* =========================================
   lifeprint-home.css -- HOME PAGE ONLY (RLP-HOME-01, 2026-10-12)
   Layers on lifeprint-style.css. Every selector is scoped to body.home or a
   .home-* class, so nothing here reaches any other page. Rules follow
   V:\cw\UI-STYLE-DIRECTIVE.md: 18 px+ Arial, bold navigation and buttons,
   2-3 px black borders, blue only on links, 44 px touch targets,
   :focus-visible ring, hover as an enhancement only, media edge-to-edge
   on phones. Encoding: ASCII. Line endings: CRLF.
   ========================================= */

/* --- base: the site stylesheet drops body to 16 px below 600 px; the home page keeps 18 px --- */
body.home { font-size: 18px; }
@media (max-width: 600px) {
  body.home { font-size: 18px; }
  body.home .nav-top { font-size: 18px; }
}
body.home main a { text-decoration: underline; }
body.home footer { font-size: 18px; padding: 6px 0 24px; }
/* links inside running text keep their place in the line but get a 44 px tall tap box (padding on an inline box) */
body.home main p a:not(.home-btn), body.home footer p a, .home-details a { padding: 12px 0; }

/* --- skip link and keyboard focus --- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: #fff; color: #0000ff; text-decoration: underline;
  font-weight: bold; padding: 12px 18px; border: 3px solid #000; border-radius: 10px;
}
.skip-link:focus { left: 10px; top: 10px; }
body.home a:focus-visible,
body.home button:focus-visible,
body.home input:focus-visible,
body.home summary:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
body.home #custom-search-input:focus { outline: 3px solid #1a73e8; outline-offset: 2px; box-shadow: none; }

/* --- top navigation (house .nav-top, lifted to 44 px targets) --- */
body.home .nav-top a {
  display: inline-block; padding: 10px 6px; min-height: 44px; box-sizing: border-box;
  line-height: 24px; text-decoration: underline;
}
body.home #custom-search-input { height: 44px; width: 190px; border-color: #000; }
/* the browser's own clear (x) control on a bold search box reads as a stray glyph (RLP-HOME-02 Item 5) */
body.home #custom-search-input::-webkit-search-cancel-button, #home-q::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* --- identity --- */
.home-hero { text-align: center; padding: 8px 0 2px; }
.home-brand { margin: 0; font-weight: bold; font-size: 18px; }
.home-hero h1 { font-weight: bold; font-size: 1.7em; line-height: 1.2; margin: 4px 0 8px; }
.home-tagline { margin: 0 auto 6px; max-width: 46em; }

/* --- the three actions --- */
.home-actions { display: grid; gap: 12px; margin: 8px 0 6px; }
@media (min-width: 700px) { .home-actions { grid-template-columns: 1fr 1fr 1fr; align-items: start; } }
.home-action { border: 3px solid #000; border-radius: 14px; padding: 12px 14px; background: #fff; margin: 0; }
.home-action__title { margin: 0 0 8px; font-size: 1.3em; line-height: 1.2; }
.home-action__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 10px; margin: 0 0 6px; }
.home-action__head .home-action__title { margin: 0; }
.home-action__more { display: inline-block; font-weight: bold; padding: 10px 0; min-height: 44px; box-sizing: border-box; line-height: 24px; }
.home-btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.home-btnrow--center { justify-content: center; }
.home-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 140px; min-height: 48px; padding: 10px 16px; box-sizing: border-box;
  font-weight: bold; font-size: 20px; line-height: 1.2; text-align: center;
  border: 2px solid #000; border-radius: 10px; background: #fff; color: #0000ff;
}
.home-btn--primary { background: #000; color: #fff; }
.home-btn--primary:hover { background: #ffff00; color: #000; }
.home-search-row { display: flex; flex-wrap: wrap; gap: 8px; }
.home-search-row input {
  flex: 1 1 120px; width: 120px; min-width: 0; min-height: 48px; box-sizing: border-box;
  padding: 8px 12px; font: inherit; font-size: 20px;
  border: 2px solid #000; border-radius: 10px; background: #fff; color: #000;
}
.home-search-row button {
  flex: 0 0 auto; min-height: 48px; box-sizing: border-box; padding: 8px 14px;
  font: inherit; font-size: 20px; font-weight: bold; cursor: pointer;
  background: #000; color: #fff; border: 2px solid #000; border-radius: 10px;
}
.home-search-row button:hover { background: #ffff00; color: #000; }
.home-help { margin: 8px 0 0; }

/* --- sections --- */
.home-section { margin: 22px 0 0; }
.home-section h2 { margin: 0 0 8px; font-size: 1.35em; }
.home-section h3 { margin: 0 0 6px; font-size: 1.15em; }
.home-section p { margin: 0 0 8px; }

/* --- counted facts --- */
.home-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-facts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .home-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-facts > :last-child:nth-child(odd) { grid-column: auto; }
}
.home-fact, body.home main a.home-fact {
  display: block; border: 2px solid #000; border-radius: 12px; padding: 10px 8px;
  text-align: center; text-decoration: none; background: #fff;
}
.home-fact__num { display: block; font-size: clamp(22px, 7.5vw, 30px); font-weight: bold; line-height: 1.1; color: #000; }
.home-fact__label { display: block; margin-top: 4px; color: #0000ff; text-decoration: underline; line-height: 1.3; }

/* --- lesson strip (house .lesson-nav, lifted to 44 px targets) --- */
body.home .lesson-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px; box-sizing: border-box;
  font-size: 20px; line-height: 1.2; color: #000; text-decoration: none;
}

/* --- dictionary letters --- */
.home-letters { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.home-letters a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px; box-sizing: border-box;
  border: 2px solid #000; border-radius: 8px; background: #fff;
  font-weight: bold; font-size: 20px; color: #000; text-decoration: none;
}

/* --- the one video: lazy, 16:9 by CSS, edge-to-edge on phones --- */
.home-video iframe {
  display: block; width: 100%; max-width: 854px; aspect-ratio: 16 / 9; height: auto;
  margin: 0 auto 8px; border: 0;
}
@media (max-width: 600px) {
  /* .page-wrap pads 15 px and the site's main rule pads 10 px: 25 px each side to reach the screen edge */
  .home-video iframe {
    margin-left: -25px; margin-right: -25px; width: calc(100% + 50px); max-width: none;
    border-radius: 0; box-shadow: none;
  }
}

/* --- resources by interest --- */
.home-groups { display: grid; gap: 14px; }
@media (min-width: 700px) { .home-groups { grid-template-columns: 1fr 1fr; } }
.home-group { border: 2px solid #000; border-radius: 12px; padding: 10px 14px; background: #fff; }
.home-group ul { list-style: none; margin: 0; padding: 0; }
.home-group li a { display: block; padding: 10px 4px; min-height: 44px; box-sizing: border-box; line-height: 24px; }

/* --- Dr. Bill --- */
.home-about__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.home-about__row img { width: 160px; height: 160px; border: 3px solid #000; border-radius: 14px; flex: 0 0 auto; }
.home-about__text { flex: 1 1 260px; }
.home-details { border: 2px solid #000; border-radius: 12px; padding: 0 12px; margin: 10px 0 0; background: #fff; }
.home-details summary {
  font-weight: bold; font-size: 20px; padding: 12px 4px; min-height: 44px; box-sizing: border-box;
  cursor: pointer; line-height: 1.2;
}
.home-details[open] summary { border-bottom: 2px solid #000; margin-bottom: 10px; }
.home-details p { margin: 0 0 10px; }
.home-details blockquote { margin: 8px 10px; padding-left: 10px; border-left: 3px solid #000; }
.home-details img { display: block; max-width: 100%; height: auto; margin: 8px auto 12px; }

/* --- support --- */
.home-support { border: 3px solid #000; border-radius: 14px; padding: 14px; text-align: center; background: #fff; }
.home-support img { width: 160px; height: 160px; margin: 0 auto 8px; display: block; }
.home-support .home-btnrow { margin: 10px 0; }
.home-support .home-btn { flex: 0 1 220px; }

/* --- ad slots: no reserved height or margin until Google reports the unit filled (RLP-HOME-02 Item 1); the site
   rule min-height:100px left about 170 px of blank between two headings when no ad is served, e.g. from disk --- */
body.home .ad-slot { min-height: 0; margin: 0; }
body.home .ad-slot:has(ins.adsbygoogle[data-ad-status="filled"]) { margin: 12px auto; }

/* --- since 1997 (RLP-HOME-02 Item 2): a centred band between the Support box and the footer rule --- */
.home-since { text-align: center; border-top: 2px solid #000; margin: 18px 0 0; padding: 12px 8px 4px; }
.home-since h2 { margin: 0 0 4px; font-size: 1.35em; }
.home-since p { margin: 0; }
.home-since a { display: inline-block; padding: 10px 4px; min-height: 44px; box-sizing: border-box; line-height: 24px; font-weight: bold; font-size: 20px; }

/* --- footer --- */
.home-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; font-weight: bold; }
.home-footer nav a { display: inline-block; padding: 10px 6px; min-height: 44px; box-sizing: border-box; line-height: 24px; text-decoration: underline; }
/* RLP-HOME-03 (validator V-01, A-09): the footer sentence link is blue, so it is underlined like every other text link */
body.home footer p a { text-decoration: underline; }

/* --- motion: none is used; transitions inherited from the site stylesheet stop here on request --- */
@media (prefers-reduced-motion: reduce) {
  body.home *, body.home *::before, body.home *::after { transition: none !important; animation: none !important; }
}

/* --- the one ad unit, at the very bottom of the page (RLP-HOME-04, owner ruling 2026-10-12): after the footer, inside
   .page-wrap (15 px gutters), centred; the home rule above keeps it at zero height until Google reports it filled --- */
.home-ad-bottom { text-align: center; }
body.home .home-ad-bottom:has(ins.adsbygoogle[data-ad-status="filled"]) { margin: 12px auto 24px; }
.home-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.home .home-ad-bottom:not(:has(ins.adsbygoogle[data-ad-status="filled"])) .home-visually-hidden { display: none; }