/* ============================================================
   EL SANTERO / RETABLO SANCTUM — Shared Stylesheet
   
   Theme is controlled by SITE_THEME in config.php:
     define('SITE_THEME', 'dark');   ← current dark mode
     define('SITE_THEME', 'light');  ← light mode matching ahouseofsaints.com
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lato:wght@300;400;700&family=IM+Fell+English:ital@0;1&family=Titillium+Web:wght@300;400;600;700&display=swap');

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ══════════════════════════════════════════════════════════
   DARK THEME (default — deep brown / gold / candlelit)
   ══════════════════════════════════════════════════════════ */
:root[data-theme="dark"], :root {
  /* Core palette */
  --gold:       #d4a843;
  --gold2:      #b8860b;
  --gold-hover: rgba(184,134,11,.08);

  /* Backgrounds */
  --bg:         #120800;
  --bg2:        #1e0f00;
  --bg3:        #2a1800;
  --bg-header:  #0d0500;

  /* Borders */
  --border:     #3a2508;

  /* Text */
  --text:       #e8d5a0;
  --muted:      #8b7355;
  --text-dark:  #1a0800;

  /* Categories */
  --saints:     #4a90d9;
  --angels:     #9b59b6;
  --hearts:     #e74c3c;

  /* Status */
  --active:     #27ae60;
  --draft:      #e67e22;

  /* Shadows */
  --shadow-card: 0 12px 32px rgba(0,0,0,.5);
  --shadow-hero: 0 4px 24px rgba(184,134,11,.3);

  /* Header gradient */
  --header-bg:  linear-gradient(180deg,#0d0500 0%,#1a0c00 60%,rgba(26,12,0,0) 100%);
  --footer-bg:  linear-gradient(0deg,#080300,#0d0500);
  --card-bg:    linear-gradient(160deg,#2a1800,#1e0f00);

  /* Hero text shadow */
  --hero-text-shadow: 0 4px 24px rgba(184,134,11,.3);
}

/* ══════════════════════════════════════════════════════════
   LIGHT THEME — warm parchment / cream / matching ahouseofsaints.com
   ══════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* Exact values extracted from saints.ahouseofsaints.com + ahouseofsaints.com */

  /* Gold — warm antique gold for headings and accents */
  --gold:       #8b6914;
  --gold2:      #6b4e00;
  --gold-hover: rgba(139,105,20,.08);

  /* Backgrounds — matches saints.ahouseofsaints.com #f8f9fa */
  --bg:         #f8f9fa;
  --bg2:        #ffffff;
  --bg3:        #eef0f2;
  --bg-header:  #ffffff;

  /* Borders — light grey as on main site */
  --border:     #e0e0e0;

  /* Text — matches main site #333 charcoal */
  --text:       #333333;
  --muted:      #6c757d;
  --text-dark:  #ffffff;

  /* Categories — vivid enough for light background */
  --saints:     #2c6fa8;
  --angels:     #7b3fa0;
  --hearts:     #c0392b;

  /* Status — teal accent matches main site buttons (#65b89e) */
  --active:     #65b89e;
  --draft:      #e67e22;

  /* Shadows — subtle on light */
  --shadow-card: 0 2px 12px rgba(0,0,0,.08);
  --shadow-hero: 0 2px 8px rgba(0,0,0,.1);

  /* Header — plain white like main site */
  --header-bg:  #ffffff;
  --footer-bg:  linear-gradient(0deg,#1f1e33,#25243c); /* matches main site footer #25243c */
  --card-bg:    linear-gradient(160deg,#eef0f2,#ffffff);

  /* Hero text shadow */
  --hero-text-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Light theme font override — Titillium Web matches ahouseofsaints.com */
[data-theme="light"] body {
  font-family: 'Titillium Web', Arial, sans-serif;
}
[data-theme="light"] .brand-text h1,
[data-theme="light"] .hero h2,
[data-theme="light"] .saint-name,
[data-theme="light"] .related-title,
[data-theme="light"] .sidebar-title,
[data-theme="light"] .section-label,
[data-theme="light"] .footer-brand {
  font-family: 'Titillium Web', Arial, sans-serif;
  font-weight: 700;
}

/* Light theme — header is solid white, not gradient */
[data-theme="light"] .site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Light theme — cards get a clean white background with subtle border */
[data-theme="light"] .saint-card,
[data-theme="light"] .sidebar-section,
[data-theme="light"] .related-card {
  background: #ffffff;
  border-color: #e0e0e0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .saint-card:hover,
[data-theme="light"] .related-card:hover {
  box-shadow: var(--shadow-card);
  border-color: #b0b0b0;
}

/* Light theme — muted text is darker for readability */
[data-theme="light"] .card-feast,
[data-theme="light"] .hero-stat-label,
[data-theme="light"] .brand-text small {
  color: var(--muted);
}

/* Light theme — hero section light background */
[data-theme="light"] .hero {
  background: #f8f9fa;
}
[data-theme="light"] .hero::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(101,184,158,.08) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 100%, rgba(44,111,168,.04) 0%, transparent 50%);
}

/* Light theme — footer uses main site dark navy */
[data-theme="light"] .site-footer {
  background: linear-gradient(0deg,#1f1e33,#25243c);
  color: #ffffff;
}
[data-theme="light"] .footer-brand,
[data-theme="light"] .footer-links a,
[data-theme="light"] .footer-tagline {
  color: rgba(255,255,255,.85);
}
[data-theme="light"] .footer-copy {
  color: rgba(255,255,255,.4);
}

/* ── Base body ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Lato', sans-serif;
  min-height: 100vh;
}

/* ── Shared header ── */
.site-header {
  background: var(--header-bg);
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand { display:flex; align-items:center; gap:14px; text-decoration:none }
.brand-text h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--gold);
  letter-spacing: .15em;
  line-height: .9;
}
.brand-text small {
  font-size: .6rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
   line-height: .9;
}


.header-nav { display:flex; align-items:center; gap:4px }
.header-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: 7px 12px;
  border-radius: 4px;
  transition: color .2s, background .2s;
}
.header-nav a:hover { color:var(--gold); background:var(--gold-hover) }
.header-nav a.active { color:var(--gold) }

/* ── Shared footer ── */
.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--border);
  padding: 32px 28px;
  text-align: center;
}
.footer-brand {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: .15em;
  margin-bottom: 6px;
}
.footer-tagline {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: .75rem;
  letter-spacing: .08em;
  transition: color .2s;
}
.footer-links a:hover { color:var(--gold) }
.footer-copy { font-size:.68rem; color:var(--muted); opacity:.5; letter-spacing:.08em }

/* ── Shared badges ── */
.badge {
  font-size: .56rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-saints { background:rgba(74,144,217,.15);  color:var(--saints); border:1px solid rgba(74,144,217,.3) }
.badge-angels { background:rgba(155,89,182,.15);  color:var(--angels); border:1px solid rgba(155,89,182,.3) }
.badge-hearts { background:rgba(231,76,60,.15);   color:var(--hearts); border:1px solid rgba(231,76,60,.3) }

/* ── Shared buttons ── */
.btn {
  padding: 9px 18px;
  border-radius: 6px;
  font-size: .78rem;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .2s;
}
.btn:hover { opacity: .85 }
.btn-gold {
  background: linear-gradient(135deg,var(--gold2),#6b4e00);
  color: #1a0800;
  font-weight: 700;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
.btn-shop {
  background: linear-gradient(135deg,var(--gold2),#6b4e00);
  color: var(--text-dark);
  font-weight: 700;
}

/* ── Shared feast banner ── */
.feast-banner {
  background: linear-gradient(90deg,rgba(212,168,67,.08),rgba(212,168,67,.03),rgba(212,168,67,.08));
  border-top: 1px solid rgba(212,168,67,.15);
  border-bottom: 1px solid rgba(212,168,67,.15);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.feast-label {
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  letter-spacing: .15em;
  color: var(--gold);
  white-space: nowrap;
}
.feast-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.feast-pill {
  background: rgba(212,168,67,.1);
  border: 1px solid rgba(212,168,67,.2);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .75rem;
  color: var(--gold);
  text-decoration: none;
  transition: background .2s;
}
.feast-pill:hover { background:rgba(212,168,67,.2) }

/* ── Breadcrumb ── */
.breadcrumb-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  font-size: .72rem;
  color: var(--muted);
}
.breadcrumb-bar a { color:var(--muted); text-decoration:none; transition:color .2s }
.breadcrumb-bar a:hover { color:var(--gold) }
.breadcrumb-bar span { margin:0 6px }

/* ── Patronage chips ── */
.pat-chip {
  background: rgba(212,168,67,.1);
  border: 1px solid rgba(212,168,67,.2);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: .78rem;
  color: var(--gold);
  text-decoration: none;
  transition: background .2s;
}
.pat-chip:hover { background:rgba(212,168,67,.2) }

/* ── Tags ── */
.tag {
  font-size: .72rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: all .2s;
}
.tag:hover { border-color:var(--gold2); color:var(--gold) }

/* ── Section label ── */
.section-label {
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold2);
  margin-bottom: 10px;
}

/* ── Pagination ── */
.pagination { display:flex; justify-content:center; gap:5px; flex-wrap:wrap; margin-top:36px }
.pagination a, .pagination span {
  padding: 7px 13px;
  border-radius: 5px;
  font-size: .78rem;
  text-decoration: none;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all .2s;
}
.pagination a:hover { border-color:var(--gold2); color:var(--gold) }
.pagination span.current {
  background: var(--gold2);
  border-color: var(--gold2);
  color: #1a0800;
  font-weight: 700;
}

/* ── Mobile filter button (browse page) ── */
.mobile-filter-btn {
  display: none;
  width: 100%;
  padding: 11px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: .1em;
  cursor: pointer;
  margin-bottom: 12px;
  align-items: center;
  justify-content: space-between;
}
@media(max-width:860px) { .mobile-filter-btn { display:flex }
.desktop-only { display: none; }
 }