/* =====================================================
   LYNN TYLER SITE CSS (Clean + Section-Scoped + WAVE-friendly)
   - HERO: white
   - MAIN CONTENT: dark grey
   - Teal palette:
       on white: #0E6F7B (your top-left circle teal)
       on dark:  #14B8A6 (brighter for contrast)
   - Buttons: dark teal + white border + bigger/bolder type
===================================================== */

/* =========================
   TOKENS
========================= */
:root{
  /* Backgrounds */
  --bg-main: #0e1012;        /* main content background */
  --bg-dark: #0b0d0f;        /* navbar/footer background */
  --panel:   #14181c;        /* panels/cards */

  /* Text */
  --text:  #f2f5f7;
  --muted: #c9d1d9;

  /* Teals */
  --teal-on-light: #0E6F7B;  /* use on white hero */
  --teal-on-dark:  #14B8A6;  /* use on dark sections */

  /* Buttons */
  --btn-bg: #0f8f86;         /* dark teal button */
  --btn-hover: #19d1bf;

  /* Borders / Focus */
  --border: rgba(255,255,255,.14);
  --focus: #ffffff;
}

/* =========================
   BASE
========================= */
*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg-main); /* fallback */
  color: var(--text);
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.65;
}

/* Headline font */
h1, h2, h3, h4, .navbar-brand{
  font-family: "Cinzel", serif;
  letter-spacing: .06em;
}

/* Main wrapper is dark grey (your “original grey”) */
main{
  background: var(--bg-main);
  color: var(--text);
}

/* Paragraph width helper */
.page-intro{
  max-width: 75ch;
}

/* =========================
   ACCESSIBILITY: SKIP LINK
========================= */
.skip-link{
  position: absolute;
  left: 1rem;
  top: -60px;
  background: #000;
  color: #fff;
  padding: .5rem .9rem;
  z-index: 1000;
  border: 1px solid var(--border);
  border-radius: .4rem;
}
.skip-link:focus{ top: 1rem; }

/* =========================
   NAVBAR
========================= */
.navbar{
  background: var(--bg-dark) !important;
  border-bottom: 1px solid var(--border);
}

.navbar .nav-link{
  font-weight: 600;
}

/* Current page indicator */
.navbar .nav-link[aria-current="page"]{
  color: var(--teal-on-dark) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Search input readability */
.nav-search .form-control,
form[role="search"] .form-control{
  background: #fff;
  color: #000;
}

/* Dropdown menus */
.dropdown-menu{
  background: var(--bg-dark);
  border: 1px solid var(--border);
}
.dropdown-item{
  color: var(--text);
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: var(--panel);
  color: var(--teal-on-dark);
}
.dropdown-divider{
  border-color: var(--border);
}
.dropdown-submenu > .dropdown-menu{
  margin-left: .75rem;
}

/* =========================
   HERO (WHITE)
========================= */
.hero-section-light{
  background: #ffffff;
  color: #111;
  border-bottom: 1px solid rgba(0,0,0,.12);
  /* subtle separation from dark content */
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
}

/* Hero headings must use teal-on-light */
.hero-section-light h1,
.hero-section-light h2,
.hero-section-light h3,
.hero-section-light h4{
  color: var(--teal-on-light);
}

.hero-overline-dark{
  color: #1f2937;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: "Lato", system-ui, sans-serif;
  font-size: .85rem;
  margin: 0;
}

.hero-title-dark{
  color: var(--teal-on-light);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  margin: .2rem 0 0 0;
}

.hero-subtext-dark{
  color: #1f2937;
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1.05rem;
}

.hero-boxset{
  max-width: 240px;
  width: 100%;
  height: auto;
  border-radius: .5rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

/* Optional divider (safe on dark) */
.hero-divider{
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );
}

/* =========================
   DARK SECTIONS (main content)
========================= */
.section{
  padding: 4rem 0;
}

/* Headings in dark sections use teal-on-dark */
.section h1,
.section h2,
.section h3,
.section h4{
  color: var(--teal-on-dark);
}

.section h2{
  font-size: 2rem;
  margin-bottom: .75rem;
}

/* =========================
   BUTTONS (Dark teal + white border)
========================= */
.btn-custom{
  background: var(--btn-bg);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .04em;
  padding: .9rem 1.7rem;
  border-radius: .65rem;
  border: 2px solid #ffffff;       /* requested contrast border */
  text-decoration: none;
  display: inline-block;
}

.btn-custom:hover,
.btn-custom:focus{
  background: var(--btn-hover);
  color: #000 !important;
  border-color: #ffffff;
}

/* =========================
   TAGS (Book pages)
========================= */
.tag-list{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.tag-list span{
  background: #0b3a35;
  color: #fff;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
}

/* =========================
   TABLES (Book Facts) - readable
========================= */
.table.book-facts{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: .65rem;
  overflow: hidden;
}

.table.book-facts th{
  background: var(--bg-dark);
  color: var(--teal-on-dark);
  font-weight: 700;
  width: 34%;
  border-color: var(--border) !important;
}

.table.book-facts td{
  background: #ffffff;
  color: #000;
  border-color: rgba(0,0,0,.12) !important;
}

/* =========================
   IMAGES (helpers)
========================= */
.book-detail-cover{
  border-radius: .6rem;
  box-shadow: 0 14px 30px rgba(0,0,0,.6);
}

/* =========================
   FOOTER
========================= */
footer{
  background: var(--bg-dark);
  color: var(--muted);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 2rem 1rem;
  font-size: .9rem;
}

/* =========================
   FOCUS (WCAG)
========================= */
:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px){
  .hero-boxset{ max-width: 200px; }
  .section{ padding: 3rem 0; }
}