/*
Theme Name:   SportDevos
Theme URI:    https://sportdevos.com
Description:  SportDevos WordPress theme. Standalone — no page builder required. Full design system built in: dark surfaces, crimson and gold palette, Bebas Neue / Playfair Display / Inter type stack, devotional page templates, browse and search archives. Requires Advanced Custom Fields (free).
Author:       Hungry Planet
Author URI:   https://hungryplanet.com
Template:     twentytwentyfour
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
Text Domain:  sportdevos
*/

/* ============================================================
   SPORTDEVOS DESIGN TOKENS
   ============================================================ */
:root {
  --sd-crimson:      #C8102E;
  --sd-crimson-dark: #9B0C23;
  --sd-charcoal:     #1A1A1A;
  --sd-surface:      #242424;
  --sd-surface2:     #2E2E2E;
  --sd-deep:         #111111;
  --sd-gold:         #8B7355;
  --sd-gold-light:   #C4A97A;
  --sd-white:        #FFFFFF;
  --sd-prose:        rgba(255,255,255,0.88);
  --sd-muted:        rgba(255,255,255,0.45);
  --sd-rule:         rgba(200,16,46,0.25);
  --sd-max-prose:    680px;
}



/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--sd-charcoal);
  color: var(--sd-prose);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--sd-crimson); text-decoration: none; }
a:hover { color: var(--sd-crimson-dark); }

img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   WORDPRESS ADMIN BAR FIX
   ============================================================ */
.admin-bar .sd-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .sd-nav { top: 46px; } }

/* ============================================================
   NAVIGATION
   ============================================================ */
.sd-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; flex-direction: row;
  align-items: center; justify-content: space-between;
  padding: 0 40px; height: 64px;
  background: rgba(18,18,18,0.98);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sd-rule);
}

.sd-nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.85rem; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.8); text-decoration: none;
  line-height: 1; flex-shrink: 0;
}
.sd-nav-logo .devos { color: var(--sd-crimson); }
.sd-nav-logo .dot   { color: rgba(255,255,255,0.4); }

.sd-nav-links {
  display: flex; gap: 28px; list-style: none;
  flex-shrink: 1;
}
.sd-nav-links a {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  text-decoration: none; transition: color 0.2s;
  white-space: nowrap;
}
.sd-nav-links a:hover { color: var(--sd-crimson); }

.sd-nav-cta {
  background: var(--sd-crimson); color: var(--sd-white) !important;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  padding: 10px 20px; border-radius: 2px;
  transition: background 0.2s; white-space: nowrap; flex-shrink: 0;
}
.sd-nav-cta:hover { background: var(--sd-crimson-dark) !important; }

/* Hamburger */
.sd-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 4px; flex-shrink: 0;
}
.sd-hamburger span {
  display: block; width: 24px; height: 2px;
  background: rgba(255,255,255,0.85); border-radius: 2px;
  transition: all 0.25s ease; transform-origin: center;
}
.sd-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sd-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sd-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sd-mobile-menu {
  display: none; position: fixed; top: 64px; left: 0; right: 0;
  background: rgba(14,14,14,0.98);
  border-bottom: 1px solid rgba(200,16,46,0.3);
  z-index: 99; flex-direction: column;
  padding: 16px 0 24px; backdrop-filter: blur(10px);
}
.sd-mobile-menu.open { display: flex; }
.sd-mobile-menu a {
  font-family: 'Inter', sans-serif; font-size: 0.85rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); text-decoration: none;
  padding: 14px 28px; border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s;
}
.sd-mobile-menu a:hover { color: var(--sd-crimson); }
.sd-mobile-menu .sd-mobile-cta {
  margin: 16px 28px 0; background: var(--sd-crimson);
  color: #fff !important; text-align: center;
  padding: 14px 28px !important; border-bottom: none !important;
  border-radius: 2px;
}

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.sd-page { padding-top: 64px; }

/* ============================================================
   DEVOTIONAL SINGLE PAGE
   ============================================================ */

/* Reading progress bar */
#sd-progress-bar {
  position: fixed; top: 64px; left: 0; right: 0;
  z-index: 98; height: 3px; pointer-events: none;
}
#sd-progress-fill {
  height: 100%; width: 0%;
  background: var(--sd-crimson); transition: width 0.1s linear;
}

/* Hero */
.sd-devo-hero {
  background: var(--sd-deep);
  padding: 48px 24px 0;
  position: relative; overflow: hidden;
}
.sd-devo-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 58px,
    rgba(255,255,255,0.02) 58px, rgba(255,255,255,0.02) 60px
  );
  pointer-events: none;
}
.sd-devo-hero::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 4px; background: var(--sd-crimson);
}
.sd-devo-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--sd-max-prose); margin: 0 auto;
}

.sd-crumb {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.sd-crumb span {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.sd-crumb .active { color: var(--sd-crimson); }
.sd-crumb .sep    { color: var(--sd-crimson); }

.sd-devo-eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--sd-crimson); margin-bottom: 12px;
}

.sd-devo-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 8vw, 4.8rem);
  line-height: 0.95; letter-spacing: 0.02em;
  color: var(--sd-white); margin-bottom: 24px;
}

.sd-meta-strip {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.08); margin-top: 32px;
}
.sd-meta-item {
  flex: 1; min-width: 130px;
  padding: 14px 0; border-right: 1px solid rgba(255,255,255,0.06);
}
.sd-meta-item:last-child { border-right: none; }
.sd-meta-label {
  display: block; font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 4px;
}
.sd-meta-value { font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.78); }

/* Section nav tabs */
.sd-section-nav {
  background: var(--sd-deep);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 64px; z-index: 80;
}
.sd-section-nav-inner {
  display: flex; overflow-x: auto;
  max-width: var(--sd-max-prose); margin: 0 auto;
  scrollbar-width: none;
}
.sd-section-nav-inner::-webkit-scrollbar { display: none; }
.sd-sec-tab {
  flex-shrink: 0; font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 12px 20px; border-bottom: 2px solid transparent;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
  text-decoration: none;
}
.sd-sec-tab:hover { color: rgba(255,255,255,0.7); }
.sd-sec-tab.active { color: var(--sd-crimson); border-bottom-color: var(--sd-crimson); }

/* Prose container */
.sd-prose-wrap {
  max-width: var(--sd-max-prose);
  margin: 0 auto; padding: 0 24px;
  background: var(--sd-charcoal);
}

/* Section block */
.sd-devo-section { padding-top: 56px; padding-bottom: 8px; }

.sd-section-label {
  display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.sd-section-label-text {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--sd-crimson); white-space: nowrap;
}
.sd-section-label-time {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sd-muted); white-space: nowrap;
}
.sd-section-label-rule {
  flex: 1; height: 1px; background: var(--sd-rule);
}

/* Prose paragraphs */
.sd-prose p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.05rem, 2.5vw, 1.15rem);
  line-height: 1.9; color: var(--sd-prose);
  margin-bottom: 1.5em;
}

/* Pull quote */
.sd-pull-quote {
  margin: 36px 0; padding: 24px 28px;
  background: var(--sd-surface2);
  border-left: 4px solid var(--sd-gold);
  border-radius: 0 3px 3px 0;
}
.sd-pull-quote p {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.05rem, 2.8vw, 1.2rem) !important;
  font-style: italic !important; line-height: 1.75 !important;
  color: rgba(255,255,255,0.92) !important; margin: 0 !important;
}

/* Scripture block */
.sd-scripture {
  margin: 32px 0; background: var(--sd-deep);
  border-left: 4px solid var(--sd-gold); border-radius: 3px;
  padding: 28px 28px 20px;
}
.sd-scripture p {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1rem, 2.5vw, 1.1rem) !important;
  font-style: italic !important; line-height: 1.85 !important;
  color: rgba(255,255,255,0.9) !important; margin-bottom: 10px !important;
}
.sd-scripture-ref {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sd-gold-light);
  display: block;
}

/* Discussion box */
.sd-discussion {
  background: var(--sd-deep); border-radius: 3px;
  padding: 28px; margin: 16px 0 24px;
}
.sd-discussion-eyebrow {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  margin-bottom: 12px; display: block;
}
.sd-discussion p {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.05rem, 2.8vw, 1.2rem) !important;
  font-style: italic !important; line-height: 1.75 !important;
  color: rgba(255,255,255,0.92) !important; margin: 0 !important;
}

.sd-facilitator-note {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important; line-height: 1.75 !important;
  color: rgba(255,255,255,0.4) !important; font-style: italic !important;
}

/* Send-off band */
.sd-sendoff {
  background: var(--sd-crimson);
  padding: 40px 28px; position: relative; overflow: hidden;
}
.sd-sendoff::before {
  content: '\201C'; position: absolute; right: -10px; top: -40px;
  font-family: 'Playfair Display', serif; font-size: 16rem;
  line-height: 1; color: rgba(255,255,255,0.07); pointer-events: none;
}
.sd-sendoff-eyebrow {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  margin-bottom: 12px; display: block;
}
.sd-sendoff p {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.1rem, 3vw, 1.4rem) !important;
  font-style: italic !important; line-height: 1.75 !important;
  color: var(--sd-white) !important; position: relative; z-index: 1;
  margin: 0 !important;
}

/* Section divider */
.sd-section-divider {
  height: 1px; background: rgba(255,255,255,0.06); margin: 48px 0 0;
}

/* Facilitator notes band */
.sd-facilitator-band {
  background: var(--sd-deep); padding: 36px 28px;
}
.sd-facilitator-band-title {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  margin-bottom: 28px; display: block;
}
.sd-fac-note {
  padding-left: 18px; border-left: 2px solid rgba(200,16,46,0.4);
  margin-bottom: 24px;
}
.sd-fac-note-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sd-gold-light);
  margin-bottom: 8px; display: block;
}
.sd-fac-note p {
  font-size: 0.88rem !important; line-height: 1.75 !important;
  color: rgba(255,255,255,0.55) !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important; margin: 0 !important;
}

/* Share row */
.sd-share-row {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 48px;
}
.sd-share-label {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--sd-muted);
}
.sd-share-btn {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 8px 16px;
  border: 1px solid rgba(200,16,46,0.35); border-radius: 2px;
  background: transparent; color: var(--sd-crimson); cursor: pointer;
  transition: all 0.2s;
}
.sd-share-btn:hover { background: var(--sd-crimson); color: #fff; }

/* Next devotional card */
.sd-next-card {
  background: var(--sd-surface2); padding: 32px 28px;
  border-top: 3px solid var(--sd-crimson); margin-top: 0;
}
.sd-next-eyebrow {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  margin-bottom: 14px; display: block;
}
.sd-next-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem; letter-spacing: 0.04em;
  color: var(--sd-white); margin-bottom: 8px; display: block;
}
.sd-next-desc {
  font-size: 0.85rem; color: rgba(255,255,255,0.5);
  line-height: 1.65; margin-bottom: 20px; display: block;
}
.sd-next-btn {
  display: inline-block; background: var(--sd-crimson); color: #fff;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  padding: 12px 24px; border-radius: 2px; transition: background 0.2s;
}
.sd-next-btn:hover { background: var(--sd-crimson-dark); }

/* ============================================================
   BROWSE / ARCHIVE PAGE
   ============================================================ */
.sd-archive-header {
  background: var(--sd-deep); padding: 80px 40px 60px;
  position: relative; overflow: hidden;
}
.sd-archive-header::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 4px; background: var(--sd-crimson);
}
.sd-archive-inner { max-width: 1100px; margin: 0 auto; }

.sd-archive-eyebrow {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--sd-crimson); margin-bottom: 16px;
}
.sd-archive-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 0.95; color: var(--sd-white); margin-bottom: 20px;
}
.sd-archive-desc {
  font-size: 1rem; line-height: 1.7; color: var(--sd-muted);
  max-width: 560px;
}

/* Filter chips */
.sd-filter-wrap {
  background: var(--sd-charcoal);
  padding: 28px 40px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sd-filter-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sd-chip {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 7px 16px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6); text-decoration: none;
  transition: all 0.2s; white-space: nowrap;
}
.sd-chip:hover, .sd-chip.active {
  background: var(--sd-crimson); border-color: var(--sd-crimson); color: #fff;
}

/* Devotional grid */
.sd-devo-grid {
  max-width: 1100px; margin: 0 auto;
  padding: 48px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2px;
}

/* Devotional card */
.sd-devo-card {
  background: var(--sd-surface);
  border-top: 3px solid transparent;
  transition: border-color 0.2s, background 0.2s;
  display: flex; flex-direction: column;
}
.sd-devo-card:hover { border-top-color: var(--sd-crimson); background: var(--sd-surface2); }
.sd-devo-card-inner { padding: 28px; flex: 1; }

.sd-card-crumb {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  margin-bottom: 10px; display: block;
}
.sd-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1.1;
  color: var(--sd-white); margin-bottom: 12px; display: block;
}
.sd-card-excerpt {
  font-size: 0.84rem; line-height: 1.65;
  color: rgba(255,255,255,0.5); margin-bottom: 20px;
}
.sd-card-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
}
.sd-card-meta-item {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.sd-card-meta-item span { color: var(--sd-gold-light); }
.sd-card-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.06);
  text-decoration: none; transition: background 0.2s;
}
.sd-card-link:hover { background: var(--sd-crimson); }
.sd-card-link span {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.sd-card-link:hover span { color: #fff; }

/* Free badge */
.sd-free-badge {
  display: inline-block;
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sd-crimson);
  border: 1px solid rgba(200,16,46,0.4);
  padding: 3px 8px; border-radius: 1px; margin-bottom: 10px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.sd-footer {
  background: #0A0A0A; color: rgba(255,255,255,0.25);
  padding: 32px 40px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 0.75rem; letter-spacing: 0.05em;
}
.sd-footer-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem; color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em; text-decoration: none;
}
.sd-footer-logo .devos { color: var(--sd-crimson); }
.sd-footer-links { display: flex; gap: 24px; }
.sd-footer-links a {
  color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.2s;
}
.sd-footer-links a:hover { color: var(--sd-crimson); }

/* ============================================================
   GATED / PAYWALL
   ============================================================ */
.sd-paywall {
  background: var(--sd-surface); padding: 60px 28px;
  text-align: center; margin: 48px 0;
  border-top: 3px solid var(--sd-crimson);
}
.sd-paywall-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem; letter-spacing: 0.04em;
  color: var(--sd-white); margin-bottom: 16px;
}
.sd-paywall-desc {
  font-size: 0.95rem; line-height: 1.7;
  color: var(--sd-muted); margin-bottom: 28px; max-width: 460px; margin-left: auto; margin-right: auto;
}
.sd-paywall-btn {
  display: inline-block; background: var(--sd-crimson); color: #fff;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  padding: 16px 36px; border-radius: 2px; transition: background 0.2s;
}
.sd-paywall-btn:hover { background: var(--sd-crimson-dark); }

/* ============================================================
   UTILITIES
   ============================================================ */
.sd-bg-charcoal  { background-color: var(--sd-charcoal); }
.sd-bg-deep      { background-color: var(--sd-deep); }
.sd-bg-surface   { background-color: var(--sd-surface); }
.sd-bg-crimson   { background-color: var(--sd-crimson); }
.sd-text-crimson { color: var(--sd-crimson); }
.sd-text-gold    { color: var(--sd-gold-light); }
.sd-text-muted   { color: var(--sd-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .sd-nav { padding: 0 20px; }
  .sd-nav-links, .sd-nav-cta { display: none; }
  .sd-hamburger { display: flex; }
  .sd-devo-grid { padding: 32px 20px; grid-template-columns: 1fr; }
  .sd-archive-header, .sd-filter-wrap { padding: 60px 20px; }
  .sd-meta-strip { flex-direction: column; }
  .sd-meta-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 12px 0; }
  .sd-footer { flex-direction: column; align-items: flex-start; padding: 28px 20px; }
}

@media (max-width: 480px) {
  .sd-pull-quote, .sd-scripture, .sd-discussion { padding: 20px; }
  .sd-sendoff { padding: 28px 20px; }
}

@media print {
  .sd-nav, #sd-progress-bar, .sd-section-nav, .sd-share-row { display: none; }
  .sd-page { padding-top: 0; }
}
/* ═══════════════════════════════════════════════════════════════════
   SPORTDEVOS SEARCH — ALL COMPONENTS
   Append the entire contents of this file to style.css
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Shared tokens (already in :root, confirming here) ──────────── */
:root {
  --charcoal:   #1A1A1A;
  --surface:    #242424;
  --crimson:    #C8102E;
  --gold:       #8B7355;
  --gold-light: #C4A97A;
  --prose:      rgba(255,255,255,0.88);
  --muted:      rgba(255,255,255,0.45);
}

/* ═══════════════════════════════════════════════════════════════════
   1. SHARED — chips & button
   ═══════════════════════════════════════════════════════════════════ */
.sd-chip {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.3;
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, color 0.18s ease;
}
.sd-chip:hover,
.sd-chip:focus-visible {
  background: var(--gold);
  color: var(--charcoal);
  outline: none;
}
.sd-chip--sm {
  font-size: 0.75rem;
  padding: 0.32rem 0.65rem;
}

.sd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  text-decoration: none;
}
.sd-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--prose);
}
.sd-btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); }

/* ═══════════════════════════════════════════════════════════════════
   2. FRONT-PAGE SEARCH HERO
   ═══════════════════════════════════════════════════════════════════ */
.sd-search-hero {
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 4.5rem 1.5rem;
}
.sd-search-hero__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.sd-search-hero__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--crimson);
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.sd-search-hero__heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.0;
  color: #fff;
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
}

.sd-search-hero__sub {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--prose);
  line-height: 1.65;
  margin: 0 0 2rem;
}

/* chips */
.sd-search-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

/* form */
.sd-search-hero__form { width: 100%; }

.sd-search-hero__input-wrap {
  display: flex;
  gap: 0;
  background: #111;
  border: 1px solid var(--gold);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}
.sd-search-hero__input-wrap:focus-within {
  box-shadow: 0 0 0 2px rgba(139,115,85,0.45);
}

.sd-search-hero__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--prose);
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  padding: 1rem 1.2rem;
}
.sd-search-hero__input::placeholder { color: var(--muted); }

.sd-search-hero__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--crimson);
  border: none;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.9rem 1.4rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.sd-search-hero__btn:hover { background: #a00d25; }

.sd-search-hero__hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.85rem 0 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Mobile */
@media (max-width: 520px) {
  .sd-search-hero { padding: 3rem 1rem; }
  .sd-search-hero__input-wrap { flex-direction: column; }
  .sd-search-hero__btn { justify-content: center; border-radius: 0; }
  .sd-search-hero__chips { display: none; } /* hide on smallest screens */
}

/* ═══════════════════════════════════════════════════════════════════
   3. ARCHIVE PAGE SEARCH BAR
   ═══════════════════════════════════════════════════════════════════ */
.sd-archive-search {
  background: #111;
  border: 1px solid rgba(139,115,85,0.3);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.sd-archive-search__form { margin-bottom: 0.85rem; }

.sd-archive-search__row {
  display: flex;
  gap: 0;
  border: 1px solid var(--gold);
  border-radius: 5px;
  overflow: hidden;
  background: var(--charcoal);
}
.sd-archive-search__row:focus-within {
  box-shadow: 0 0 0 2px rgba(139,115,85,0.4);
}

.sd-archive-search__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--prose);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
}
.sd-archive-search__input::placeholder { color: var(--muted); }

.sd-archive-search__btn {
  background: var(--crimson);
  border: none;
  color: #fff;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.sd-archive-search__btn:hover { background: #a00d25; }
.sd-archive-search__btn span {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 0.4rem;
  letter-spacing: 0.04em;
}

.sd-archive-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.sd-archive-search__chips-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.25rem;
}

@media (max-width: 520px) {
  .sd-archive-search__chips { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   4. SEARCH PAGE (page-search.php)
   ═══════════════════════════════════════════════════════════════════ */
.sd-search-page { background: var(--charcoal); color: var(--prose); }

/* Hero */
.sd-search-page__hero {
  background: #111;
  padding: 5rem 1.5rem 3.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sd-search-page__hero-inner { max-width: 680px; margin: 0 auto; }

.sd-search-page__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--crimson);
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.sd-search-page__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 8vw, 5rem);
  line-height: 0.95;
  color: #fff;
  margin: 0 0 1.2rem;
  letter-spacing: 0.02em;
}

.sd-search-page__desc {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--prose);
  line-height: 1.65;
  margin: 0;
}

/* Form section */
.sd-search-page__form-section {
  padding: 3rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sd-search-page__form-wrap { max-width: 720px; margin: 0 auto; }

.sd-search-page__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
}

.sd-search-page__input-row {
  display: flex;
  background: #111;
  border: 1px solid var(--gold);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.sd-search-page__input-row:focus-within {
  box-shadow: 0 0 0 3px rgba(139,115,85,0.35);
}

.sd-search-page__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--prose);
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  padding: 1.05rem 1.25rem;
}
.sd-search-page__input::placeholder { color: var(--muted); }

.sd-search-page__btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--crimson);
  border: none;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1rem 1.6rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.sd-search-page__btn:hover { background: #a00d25; }

.sd-search-page__hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 0;
}

/* Example cards */
.sd-search-page__examples {
  padding: 4rem 1.5rem;
  background: var(--charcoal);
}
.sd-search-page__examples-inner { max-width: 1100px; margin: 0 auto; }

.sd-search-page__examples-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #fff;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}
.sd-search-page__examples-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 2.5rem;
}

.sd-search-page__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.sd-example-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sd-example-card:hover {
  border-color: var(--gold);
  background: #2c2c2c;
}

.sd-example-card__icon {
  font-size: 1.4rem;
  line-height: 1;
}
.sd-example-card__situation {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
}
.sd-example-card__query {
  font-family: 'Playfair Display', serif;
  font-size: 0.9rem;
  color: var(--prose);
  line-height: 1.45;
  font-style: italic;
}

/* How it works */
.sd-search-page__how {
  background: var(--surface);
  padding: 4rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sd-search-page__how-inner { max-width: 800px; margin: 0 auto; }

.sd-search-page__how-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #fff;
  letter-spacing: 0.04em;
  margin: 0 0 2.5rem;
  text-align: center;
}

.sd-search-page__steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sd-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.sd-step__num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--crimson);
  flex-shrink: 0;
  min-width: 3rem;
}
.sd-step__title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.4rem;
  letter-spacing: 0.02em;
}
.sd-step__text {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--prose);
  line-height: 1.6;
  margin: 0;
}

/* Browse CTA */
.sd-search-page__browse-cta {
  background: var(--charcoal);
  padding: 3rem 1.5rem;
  text-align: center;
}
.sd-search-page__browse-cta-inner { max-width: 600px; margin: 0 auto; }

.sd-search-page__browse-cta-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

@media (max-width: 520px) {
  .sd-search-page__input-row { flex-direction: column; }
  .sd-search-page__btn { justify-content: center; }
  .sd-search-page__examples { padding: 2.5rem 1rem; }
  .sd-step { gap: 1rem; }
}

/* ──────────────────────────────────────────────
   Youth Sports audience flag badge and banner
   ──────────────────────────────────────────────────────────────── */

/* Badge — appears in search results and archive cards */
.sd-flag-badge {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 2px;
    vertical-align: middle;
}
.sd-flag-badge--youth-sports {
    background: #2563EB;
    color: #fff;
}

/* Banner — appears at top of individual devotional page */
.sd-flag-banner {
    padding: 0.7rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sd-flag-banner--youth-sports {
    background: rgba(37, 99, 235, 0.12);
    border-left: 4px solid #2563EB;
    color: #93B4F8;
}
/* ────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   5. SEARCH RESULTS PAGE (search.php)
   ═══════════════════════════════════════════════════════════════════ */
.sd-search-results-page { background: var(--charcoal); }

/* Results header */
.sd-results-header {
  background: #111;
  padding: 3.5rem 1.5rem 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sd-results-header__inner { max-width: 800px; margin: 0 auto; }

.sd-results-header__label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--crimson);
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.sd-results-header__query {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.6rem;
  font-style: italic;
}

.sd-results-header__count {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.sd-count-num {
  color: var(--gold-light);
  font-weight: 700;
}

/* Re-search form */
.sd-results-search-form__row {
  display: flex;
  border: 1px solid rgba(139,115,85,0.4);
  border-radius: 5px;
  overflow: hidden;
  background: var(--charcoal);
  max-width: 600px;
}
.sd-results-search-form__row:focus-within {
  border-color: var(--gold);
}
.sd-results-search-form__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--prose);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
}
.sd-results-search-form__input::placeholder { color: var(--muted); }
.sd-results-search-form__btn {
  background: var(--crimson);
  border: none;
  color: #fff;
  padding: 0.7rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.18s ease;
}
.sd-results-search-form__btn:hover { background: #a00d25; }

/* Results grid */
.sd-results-grid-wrap {
  padding: 2.5rem 1.5rem 4rem;
}
.sd-results-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

/* Result card */
.sd-result-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.18s ease;
}
.sd-result-card:hover { border-color: var(--gold); }
.sd-result-card--free { border-color: rgba(200,16,46,0.3); }

.sd-result-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.sd-result-card__cat {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crimson);
}
.sd-result-card__free {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--gold-light);
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
}
.sd-result-card__timing {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: var(--muted);
  margin-left: auto;
}

.sd-result-card__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.05;
}
.sd-result-card__link {
  color: #fff;
  text-decoration: none;
  transition: color 0.15s ease;
}
.sd-result-card__link:hover { color: var(--gold-light); }

.sd-result-card__excerpt {
  font-family: 'Playfair Display', serif;
  font-size: 0.88rem;
  color: var(--prose);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.sd-result-card__setting {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}
.sd-result-card__setting-label {
  font-weight: 700;
  color: var(--gold);
}

.sd-result-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crimson);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
  transition: color 0.15s ease;
}
.sd-result-card__cta:hover { color: var(--gold-light); }

/* No results */
.sd-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
}
.sd-no-results__icon { font-size: 3rem; margin: 0 0 1rem; }
.sd-no-results__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: #fff;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
}
.sd-no-results__text {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto 1.5rem;
}
.sd-no-results__suggestions { margin-bottom: 2rem; }
.sd-no-results__suggestions-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.75rem;
}
.sd-no-results__suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.sd-no-results__actions { margin-top: 1.5rem; }

/* Pagination */
.sd-results-pagination {
  padding: 0 1.5rem 3rem;
  display: flex;
  justify-content: center;
}
.sd-results-pagination ul {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sd-results-pagination a,
.sd-results-pagination span {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color: var(--prose);
  text-decoration: none;
  display: block;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sd-results-pagination a:hover { border-color: var(--gold); color: var(--gold-light); }
.sd-results-pagination .current span {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
}