/*
Theme Name: The Blessed Hope
Theme URI: https://www.the-blessed-hope.com
Author: Dr. Eric Stricker
Description: Custom theme for The Blessed Hope, a daily Scripture devotional. Bold, art-led design built around Terri L. Stricker's original artwork, in a deep navy and antique gold palette anchored to the site's anchor mark (Hebrews 6:19).
Version: 1.5.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: blessed-hope
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  /* Brand / chrome (dark) */
  --navy: #16233A;
  --navy-deep: #101B2C;
  --cream: #F4F0E4;
  --gold: #D3A94B;
  --gold-deep: #B08A38;
  --rule-dark: rgba(244, 240, 228, 0.14);

  /* Reading surface (light) — used for long-form post body copy,
     kept separate from the bold navy/gold brand chrome so daily
     reading stays comfortable rather than dark-on-dark for 800+ words */
  --paper: #FBF8F1;
  --ink: #1B2A41;
  --ink-soft: #4E5A6E;
  --rule-light: #E5E0D3;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Hero artwork tint strength — 0.4 landed right after testing against
     both a light watercolor piece and a dark red mixed-media piece.
     Adjust here if a future artwork style needs a different balance. */
  --hero-tint-opacity: 0.4;

  --max: 1180px;
  --measure: 68ch;
  --radius: 6px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 780px) {
  .container { padding: 0 22px; }
  body { font-size: 16px; }
}

/* =========================================================
   SITE HEADER / NAV
   ========================================================= */
.site-header {
  background: var(--navy);
  padding: 22px 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand-lockup { display: flex; align-items: center; gap: 12px; color: var(--cream); }
.brand-lockup .anchor-mark { flex-shrink: 0; }
.brand-lockup .brand-text { display: flex; flex-direction: column; }
.brand-lockup .brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.brand-lockup .brand-tagline {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2px;
}
.custom-logo-link img { max-height: 44px; width: auto; display: block; }

.primary-nav ul { display: flex; gap: 30px; align-items: center; }
.primary-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cream);
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a { opacity: 1; color: var(--gold); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  color: var(--cream);
  padding: 8px 10px;
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .primary-nav { width: 100%; display: none; }
  .primary-nav.is-open { display: block; margin-top: 18px; }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-header .container { flex-wrap: wrap; }
}

/* =========================================================
   HERO — full-bleed artwork treatment
   ---------------------------------------------------------
   A flat navy wash sits over the artwork at a fixed opacity
   regardless of that day's colors, and the text itself sits
   in a fully opaque card rather than relying on a gradient
   fade — daily devotional art has no predictable palette, so
   contrast can't depend on the image cooperating. The wash
   also pulls every day's very different artwork toward one
   consistent site feel instead of the page re-skinning itself
   daily. See --hero-tint-opacity below to adjust strength.
   ========================================================= */
.hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  background-color: var(--navy);
  background-size: cover;
  background-position: center 30%;
  padding: 0 0 40px;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--navy);
  opacity: var(--hero-tint-opacity, 0.4);
}
.hero-card {
  position: relative;
  background: var(--navy);
  border-radius: 8px;
  padding: 28px 34px;
  max-width: 620px;
  text-align: center;
}
.hero-inner { position: relative; color: var(--cream); }
.hero-eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.hero h1, .hero .hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.hero-refs { font-size: 14.5px; color: var(--cream); opacity: 0.85; }
.hero-refs a { color: var(--gold); opacity: 1; }
.hero-refs a:hover { text-decoration: underline; }

@media (max-width: 780px) {
  .hero-card { padding: 22px 24px; margin: 0 22px; max-width: none; }
}

/* =========================================================
   POST HERO — single devotional posts only
   ---------------------------------------------------------
   Deliberately different from the homepage .hero above: the
   homepage is a preview/teaser context where a cropped,
   fixed-height banner is fine, but the actual post page is
   where the artwork itself is the point — so nothing is ever
   cropped here. The image is capped at 70% of the viewport
   height so a tall portrait piece can't push the actual
   devotional text far down the page, but it's a max-height
   cap (not a fixed box), so the image still scales down
   proportionally rather than being cropped to fit — a tall
   piece just ends up narrower than the container instead,
   centered on the navy background. Title sits in a plain
   band below the image rather than overlaid on it, so there's
   no tint/contrast concern regardless of that day's artwork.
   ========================================================= */
.post-hero-media {
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--navy);
}
.post-hero-img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
}
.post-hero-caption {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  max-width: 92%;
  margin: 0;
  padding: 9px 18px;
  background: rgba(16, 27, 44, 0.72);
  color: var(--cream);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  line-height: 1.4;
}
.post-hero-content {
  background: var(--navy);
  padding: 28px 0 30px;
  color: var(--cream);
}
.post-hero-content .hero-eyebrow { margin-bottom: 12px; }
.post-hero-content .hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

@media (max-width: 780px) {
  .post-hero-img { max-height: 55vh; }
  .post-hero-caption { font-size: 12px; padding: 7px 14px; }
}

/* Smaller title-bar hero, used on standard pages (About, Memorial, archive) */
.page-hero {
  background: var(--navy);
  padding: 56px 0 40px;
  color: var(--cream);
}
.page-hero .hero-eyebrow { margin-bottom: 12px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.01em;
}
.page-hero p.lede { margin-top: 14px; color: var(--cream); opacity: 0.8; max-width: 620px; font-size: 16px; }

/* =========================================================
   POST CARD (used in grids: archive, related, homepage strip)
   ========================================================= */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 34px 30px;
}
.post-card { color: var(--ink); }
.post-card .thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--rule-light);
  margin-bottom: 14px;
}
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.post-card a:hover .thumb img { transform: scale(1.035); }
.post-card .eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 8px;
}
.post-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.28;
  color: var(--ink);
  margin-bottom: 6px;
}
.post-card .refs { font-size: 13px; color: var(--ink-soft); }

/* Dark strip variant (mini cards on navy, no thumbnail — homepage "recent days" rail) */
.mini-strip {
  background: var(--navy);
  padding: 34px 0 54px;
}
.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px 26px;
  border-top: 1px solid var(--rule-dark);
  padding-top: 28px;
}
.mini-grid .eyebrow { color: var(--gold); }
.mini-grid h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--cream);
}
.mini-grid a:hover h4 { color: var(--gold); }

/* =========================================================
   SINGLE POST — reading surface
   ========================================================= */
.entry-wrap { background: var(--paper); }
.entry {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 56px 40px 72px;
}
.entry .refs-line {
  font-size: 14.5px;
  color: var(--gold-deep);
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule-light);
}
.entry .refs-line a { color: var(--gold-deep); border-bottom: 1px solid currentColor; }
.entry .refs-line a:hover { color: var(--ink); }
.entry-content p { margin: 0 0 22px; text-align: justify; }
.entry-content strong { font-weight: 600; }
.entry-content em { font-style: italic; }
.entry-content a { color: var(--gold-deep); border-bottom: 1px solid currentColor; }
.entry-content a:hover { color: var(--ink); }
/* Justify is the default for devotional body text (matching the original
   site), but individual paragraphs can still override it — either
   through the block editor's own alignment control, or (for Classic
   editor / imported HTML) the button added in functions.php. */
.entry-content .has-text-align-left,
.page-content .has-text-align-left { text-align: left; }
.entry-content .has-text-align-center,
.page-content .has-text-align-center { text-align: center; }
.entry-content .has-text-align-right,
.page-content .has-text-align-right { text-align: right; }
.entry-content .has-text-align-justify,
.page-content .has-text-align-justify { text-align: justify; }
.entry-content blockquote {
  margin: 28px 0; padding-left: 22px; border-left: 2px solid var(--gold);
  color: var(--ink-soft); font-style: italic;
}
.entry-caption {
  font-size: 14px; font-style: italic; color: var(--ink-soft);
  margin: -6px 0 26px;
}

/* Social share row — sits after the reading content, before prev/next nav */
.share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--measure);
  margin: 8px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--rule-light);
}
.share-label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 4px;
}
.share-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  transition: background-color 0.15s ease;
}
.share-icon:hover { background: var(--gold-deep); }
.share-icon svg { width: 16px; height: 16px; fill: currentColor; }

.post-nav {
  border-top: 1px solid var(--rule-light);
  margin-top: 8px; padding: 30px 0 0;
  display: flex; justify-content: space-between; gap: 20px;
}
.post-nav a { font-size: 14px; color: var(--ink-soft); }
.post-nav a:hover { color: var(--gold-deep); }
.post-nav .dir { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 4px; }
.post-nav .next { text-align: right; }

/* =========================================================
   STANDARD PAGE CONTENT
   ========================================================= */
.page-content {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 52px 40px 72px;
}
.page-content p { margin: 0 0 20px; text-align: justify; }
.page-content a { color: var(--gold-deep); border-bottom: 1px solid currentColor; }
.page-content h2 { font-family: var(--font-display); font-size: 24px; margin: 36px 0 16px; }

/* Gallery */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px; margin: 8px 0 44px;
}
.gallery-grid img { border-radius: var(--radius); width: 100%; }

/* Pray Today embeds */
.pray-today-columns {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.pray-today-columns .embed-panel { margin: 0; flex: 1 1 0; min-width: 0; }
@media (max-width: 780px) {
  .pray-today-columns { flex-direction: column; }
}
.embed-panel {
  background: var(--rule-light);
  border-radius: var(--radius);
  padding: 24px;
  margin: 20px 0;
}
.embed-panel .embed-note { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
.bh-embed-votd iframe { width: 100%; height: 160px; border: 0; }
.bh-embed-scroll { max-width: 100%; overflow-x: auto; }

/* =========================================================
   SEARCH / 404
   ========================================================= */
.search-form { display: flex; gap: 10px; max-width: 480px; }
.search-form input[type="search"] {
  flex: 1; padding: 11px 14px; border: 1px solid var(--rule-light);
  border-radius: var(--radius); font-family: var(--font-body); font-size: 15px;
  background: #fff; color: var(--ink);
}
.search-form button {
  background: var(--navy); color: var(--cream); border: none;
  padding: 0 20px; border-radius: var(--radius); font-weight: 500; font-size: 14px;
}
.search-form button:hover { background: var(--navy-deep); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--navy-deep); color: var(--cream); padding: 44px 0 34px; }
.site-footer .container { display: flex; align-items: center; }
.site-footer .copyright { font-size: 13px; opacity: 0.65; }

/* =========================================================
   COMMENTS
   ========================================================= */
.comments-area { max-width: var(--measure); margin: 0 auto; padding: 0 40px 64px; }
.comments-area h2 { font-family: var(--font-display); font-size: 20px; margin-bottom: 22px; }
.comment-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.comment-body { border-top: 1px solid var(--rule-light); padding-top: 16px; font-size: 15px; }
.comment-meta { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.comment-form input, .comment-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rule-light);
  border-radius: var(--radius); font-family: var(--font-body); font-size: 15px; margin-bottom: 12px;
}
.comment-form button {
  background: var(--navy); color: var(--cream); border: none;
  padding: 11px 22px; border-radius: var(--radius); font-weight: 500;
}

@media (max-width: 780px) {
  .entry, .page-content, .comments-area { padding-left: 22px; padding-right: 22px; }
}