/* ============================================================
   Brighter Life Media — local static rebuild
   Design tokens extracted from the live Divi/WordPress site
   (brighterlifemedia.com) on 2026-07-21.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sedan&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* --- Palette (sampled from computed styles on the live site) --- */
  --navy: #2f4858;          /* header/footer + secondary CTA text */
  --navy-dark: #22333e;
  --rust: #b14d38;          /* primary CTA (rgb(177,77,56)) */
  --rust-dark: #96402e;
  --ink: rgba(0, 0, 0, 0.7);/* body copy */
  --ink-strong: #000;       /* headings */
  --bg-tint: #f0f0f0;       /* alternating section bg, rgba(0,0,0,.06) on white */
  --line: rgba(0, 0, 0, 0.1);
  --white: #fff;

  /* --- Type --- */
  --font-heading: "Sedan", Georgia, "Times New Roman", serif;
  --font-body: "Inter", Helvetica, Arial, sans-serif;

  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--ink-strong);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 16px;
}

h1 { font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 26px; }
h4 { font-size: 20px; }

p { margin: 0 0 20px; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 10px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--rust);
  color: var(--white);
}
.btn-primary:hover { background: var(--rust-dark); }

.btn-ghost {
  background: transparent;
  color: var(--navy);
  padding: 16px 0;
}
.btn-ghost:hover { color: var(--rust); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }

/* --- Header --- */
.site-header {
  background: var(--navy);
  color: var(--white);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
  gap: 24px;
}
.site-header .logo img { height: 46px; width: auto; }
.site-header .logo { display: flex; align-items: center; }

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}
.main-nav a {
  font-size: 16px;
  color: var(--white);
  opacity: 0.92;
}
.main-nav a:hover,
.main-nav a.active { opacity: 1; border-bottom: 2px solid var(--rust); }

/* Active nav highlight driven by <body data-active="KEY"> so the nav itself can
   stay a single shared SSI include (/nav.html) with no per-link active markup. */
body[data-active="about"] .main-nav a[data-nav="about"],
body[data-active="blog"] .main-nav a[data-nav="blog"],
body[data-active="home"] .main-nav a[data-nav="home"],
body[data-active="what"] .main-nav a[data-nav="what"],
body[data-active="vision"] .main-nav a[data-nav="vision"],
body[data-active="meditation"] .main-nav a[data-nav="meditation"],
body[data-active="videos"] .main-nav a[data-nav="videos"],
body[data-active="contact"] .main-nav a[data-nav="contact"] { opacity: 1; border-bottom: 2px solid var(--rust); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 26px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .main-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav li { border-top: 1px solid rgba(255,255,255,0.12); }
  .main-nav a { display: block; padding: 14px 0; }
  .site-header .wrap { flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
  .nav-toggle { display: block; }
}

/* --- Hero / generic page header band --- */
.hero {
  background: var(--bg-tint);
  padding: 90px 0;
}
.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.hero .lede { font-size: 18px; max-width: 46ch; }

@media (max-width: 780px) {
  .hero { padding: 56px 0; }
  h1 { font-size: 42px; }
  .hero-split { grid-template-columns: 1fr; gap: 40px; }
}

.panel {
  border: 2px solid var(--line);
  padding: 30px;
}

.book-cover { display: flex; justify-content: center; }
.book-cover img {
  max-width: 320px;
  width: 100%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.book-cover-small { justify-content: flex-start; }
.book-cover-small img { max-width: 200px; }
@media (max-width: 780px) {
  .book-cover { order: -1; }
  .book-cover img { max-width: 220px; }
}

/* --- Sections --- */
section.block { padding: 80px 0; }
section.block.tint { background: var(--bg-tint); }
section.block.dark { background: var(--navy); color: rgba(255,255,255,0.85); }
section.block.dark h1, section.block.dark h2, section.block.dark h3 { color: var(--white); }

.center { text-align: center; }
.narrow { max-width: 74ch; margin-left: auto; margin-right: auto; }

/* --- Blog cards --- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; }
.post-card .thumb {
  aspect-ratio: 4/3;
  background: var(--bg-tint);
  overflow: hidden;
  margin-bottom: 20px;
}
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .meta {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 8px;
}
.post-card h3 { margin-bottom: 10px; font-size: 22px; }
.post-card p { font-size: 15px; flex: 1; }
.post-card .read-more { font-weight: 700; font-size: 14px; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; }
.post-card .read-more:hover { color: var(--rust); }

/* --- Single article --- */
.article-head { padding: 70px 0 40px; border-bottom: 1px solid var(--line); }
.article-meta { font-size: 14px; color: var(--ink); opacity: 0.75; margin-bottom: 6px; }
.hero-caption { font-size: 12px; opacity: 0.55; margin: 8px 0 0; }
.article-meta a { color: var(--rust); font-weight: 600; }

/* Article hero image: source photos/illustrations arrive at wildly
   different native ratios (some even portrait), so force every hero into
   the same landscape frame and crop to fit rather than showing whatever
   ratio the source happened to be. */
.hero-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top: 36px;
}
.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.article-body { padding: 50px 0; max-width: 74ch; margin: 0 auto; }
.article-body.has-toc { max-width: none; }
.article-body.has-toc .wrap { max-width: var(--container); }
.article-body.has-toc .article-main { max-width: 74ch; }
.article-body h2 { font-size: 28px; margin-top: 40px; }
.article-body h3 { font-size: 22px; margin-top: 32px; }
.article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 20px; }
.article-body li { margin-bottom: 8px; }
.article-body img { margin: 30px 0; }
.article-body img.alignleft { float: left; margin: 6px 24px 20px 0; max-width: 45%; }
.article-body img.alignright { float: right; margin: 6px 0 20px 24px; max-width: 45%; }
.article-body img.aligncenter { float: none; margin: 30px auto; }
.article-body::after { content: ""; display: table; clear: both; }

/* In-article links. Line 41 resets every <a> to `color: inherit; text-decoration:
   none`, and nav / .article-meta / .tag-list / .article-toc / .site-pointer each
   restore their own styling later. Article body copy never did, so ~172 in-body
   links across 20 pages rendered identically to body text - invisible, including
   affiliate links. Scoped to .article-main (the content column) rather than
   .article-body, because .article-toc is a sibling of it: that keeps the "On This
   Page" rail clean without needing an override. .tag-list is a <div> with direct
   <a> children, so `li a` here cannot reach the category tags. */
.article-main p a,
.article-main li a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-main p a:hover,
.article-main li a:hover { color: var(--rust-dark); }
@media (max-width: 600px) {
  .article-body img.alignleft,
  .article-body img.alignright { float: none; max-width: 100%; margin: 20px 0; }
}
.article-body blockquote {
  border-left: 3px solid var(--rust);
  margin: 30px 0;
  padding: 4px 0 4px 24px;
  font-style: italic;
  color: var(--ink-strong);
}
.article-body strong { color: var(--ink-strong); }

.tag-list { display: flex; gap: 10px; flex-wrap: wrap; margin: 30px 0 0; }
.tag-list a {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  padding: 6px 14px;
  background: var(--bg-tint);
  color: var(--navy);
}
.tag-list a:hover { background: var(--navy); color: var(--white); }

/* --- Certifications grid (About page) --- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}
@media (max-width: 780px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cert-grid { grid-template-columns: 1fr; } }

.cert-card {
  background: var(--white);
  border: 2px solid var(--line);
  padding: 26px;
}
.cert-card .year { color: var(--rust); font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.cert-card h4 { margin-bottom: 6px; }
.cert-card p { font-size: 14px; margin: 0; opacity: 0.8; }

.about-portrait { max-width: 320px; }
.about-portrait img { border: 2px solid var(--line); }

/* --- Contact form --- */
.contact-form { max-width: 640px; }
.contact-form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  margin-bottom: 22px;
  background: var(--white);
  color: var(--ink-strong);
}
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--navy); }
.form-note { font-size: 13px; opacity: 0.65; margin-top: -8px; }

/* --- Signup form (BirdSend embed) --- */
.signup-form {
  max-width: 440px;
  margin: 36px auto 0;
  background: var(--white);
  border-radius: 4px;
  padding: 32px;
  text-align: left;
}
.signup-form label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-strong);
  margin-bottom: 6px;
}
.signup-form input[type="text"],
.signup-form input[type="email"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  margin-bottom: 18px;
  background: var(--white);
  color: var(--ink-strong);
}
.signup-form input:focus { outline: none; border-color: var(--navy); }
.signup-form .btn-primary { width: 100%; border: none; }
.signup-form .form-disclaimer { font-size: 12px; opacity: 0.6; margin: 14px 0 0; text-align: center; }

/* --- Article table of contents (sidebar) ---
   Opt-in per article: only rendered when a post has 2+ H2 headings.
   Same pattern as the timeyourpeace.com sticky "On this page" sidebar,
   recoloured to this site's navy/rust palette. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  grid-template-areas: "main toc";
  gap: 3rem;
}
.article-main { grid-area: main; min-width: 0; }
.article-toc { grid-area: toc; }

.article-toc-inner {
  position: sticky;
  top: 24px;
  background: var(--bg-tint);
  border: 2px solid var(--line);
  padding: 26px;
}
.article-toc .label {
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--rust);
  margin-bottom: 16px;
}
.article-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.article-toc a {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  display: block;
}
.article-toc a:hover,
.article-toc a.is-active { color: var(--rust); }
.article-toc a.is-active { font-weight: 700; }

@media (max-width: 960px) {
  .article-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "toc" "main";
  }
  .article-toc-inner { position: static; margin-bottom: 30px; }
}

/* --- Legal pages --- */
.legal-body { max-width: 74ch; margin: 0 auto; }
.legal-body h2 { font-size: 22px; margin-top: 36px; }
.legal-body p, .legal-body li { font-size: 15px; }

/* --- Footer --- */
.site-footer {
  background: #000;
  color: rgba(255,255,255,0.75);
  padding: 50px 0 30px;
}
.site-footer .tagline {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--white);
  margin-bottom: 26px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}
.footer-links a:hover { color: var(--rust); }
.copyright { font-size: 13px; opacity: 0.6; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; }

/* --- Vision boards lead-magnet layout --- */
.check-list { list-style: none; padding: 0; margin: 30px 0; }
.check-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 16px;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rust);
  font-weight: 700;
}

.cta-band {
  background: var(--navy);
  color: var(--white);
  padding: 70px 0;
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { opacity: 0.85; max-width: 60ch; margin-left: auto; margin-right: auto; }

/* --- Video hub (affirmation-videos) ---
   Horizontal 16:9 videos in a single centered column, each with a curated
   description underneath (intro paragraph + affirmations in a stand-out card). */
.video-list {
  display: flex;
  flex-direction: column;
  gap: 72px;
  max-width: 640px;
  margin: 0 auto;
}
/* Centre the embed and the title/intro text under each video. */
.video-card { display: flex; flex-direction: column; text-align: center; }
.video-embed {
  aspect-ratio: 16 / 9;
  width: 640px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--navy-dark);
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-title { font-size: 28px; margin: 26px 0 12px; }
.video-intro { font-size: 16px; margin-bottom: 22px; }

/* Affirmation list stays left-aligned inside its centred card for readability. */
.affirmation-card {
  background: rgba(177, 77, 56, 0.06);
  border-left: 3px solid var(--rust);
  padding: 26px 30px;
  text-align: left;
}
.affirmation-card .eyebrow { margin-bottom: 16px; }
.affirmation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: aff;
}
.affirmation-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 13px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-strong);
}
.affirmation-list li:last-child { margin-bottom: 0; }
.affirmation-list li::before {
  counter-increment: aff;
  content: counter(aff);
  position: absolute;
  left: 0;
  top: 1px;
  width: 23px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  background: var(--rust);
  color: var(--white);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
}

/* --- Pagination --- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 64px;
}
.pager a,
.pager span {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  min-width: 44px;
  text-align: center;
  padding: 11px 15px;
  border: 2px solid var(--line);
  color: var(--navy);
}
.pager a:hover { border-color: var(--rust); color: var(--rust); }
.pager .current { background: var(--navy); color: var(--white); border-color: var(--navy); }
.pager .disabled { opacity: 0.35; }
.pager .ellipsis { border-color: transparent; min-width: 0; padding: 11px 4px; }

/* --- Cross-site pointer: affirmation posts feed dailyaffirmationstatements.com --- */
.site-pointer {
  margin: 34px 0 0;
  padding: 18px 22px;
  background: var(--bg-tint);
  border-left: 3px solid var(--rust);
  font-size: 15px;
  line-height: 1.6;
}
.site-pointer strong { color: var(--navy); font-weight: 700; }
.site-pointer a { color: var(--rust); font-weight: 600; text-decoration: underline; }
.site-pointer a:hover { color: var(--rust-dark); }