/* ========== Base (layout + defaults) ========== */
:root{
  --primary:#73264D; /* fallback; overridden by inline style in base.html */
  --accent:#C9A34E;
  --blue:#1F3A5F;
  --ink:#1b1d20;
  --paper:#fff;
  --muted:#eee;
  --card:#f7f8fa;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.6;text-rendering:optimizeLegibility;
}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
a:focus{outline:2px solid var(--accent);outline-offset:2px}

.wrap{max-width:1100px;margin:0 auto;padding:16px}

/* Header shell (theme will decorate it) */
.header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 16px 12px 16px;
  border-bottom:1px solid #eceef2;
}
.brand{display:flex;gap:10px;align-items:center}
.site-title{font-weight:800;color:var(--ink);letter-spacing:.2px}
.nav{
  position:relative;
  display:block;
}
.nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:14px;
}
.nav__list--nested{
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin:0;
  padding:0;
}
.nav__item{position:relative;}
.nav__link,
.nav__label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
}
.nav__link:hover,
.nav__label:hover{color:var(--ink);}
.nav__link--external{white-space:nowrap;}
.nav__item-main{display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.nav__submenu-toggle{
  border:none;
  background:none;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  border-radius:6px;
  cursor:pointer;
  transition:color .2s ease, background .2s ease;
}
.nav__submenu-toggle:hover,
.nav__submenu-toggle:focus{color:var(--ink);background:rgba(0,0,0,.05);}
.nav__chevron{font-size:0.7rem;transition:transform .2s ease;}
.nav__submenu-toggle[aria-expanded="true"] .nav__chevron{transform:rotate(180deg);}
.nav__submenu{
  margin-top:10px;
  border:1px solid #eceef2;
  border-radius:12px;
  background:var(--paper);
  padding:10px 12px;
  min-width:200px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.nav__submenu .nav__list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.nav__submenu .nav__item{width:100%;}
.nav__submenu .nav__link,
.nav__submenu .nav__label{
  color:var(--ink);
}
.nav__submenu .nav__link:hover{
  color:var(--primary);
}
.nav__submenu[hidden]{display:none;}
.nav__badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  background:var(--accent);
  color:#000;
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.nav-toggle{
  display:none;
  position:relative;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid #eceef2;
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.nav-toggle:hover{border-color:var(--accent)}
.nav-toggle:focus{outline:2px solid var(--accent);outline-offset:2px}
.nav-toggle__bar{
  width:20px;
  height:2px;
  border-radius:999px;
  background:var(--ink);
  display:block;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle__label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:768px){
  .header{flex-wrap:wrap;}
  .nav{
    position:absolute;
    top:100%;
    right:16px;
    left:16px;
    display:none;
    background:var(--paper);
    border:1px solid #eceef2;
    border-radius:12px;
    padding:14px 16px;
    margin-top:10px;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    z-index:20;
  }
  .nav.is-open{display:block;}
  .nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .nav__item-main{
    width:100%;
    justify-content:space-between;
  }
  .nav__submenu{
    position:static;
    border:1px solid #eceef2;
    box-shadow:none;
    margin-top:8px;
    padding:8px 12px;
  }
  .nav-toggle{display:inline-flex;}
}

@media (min-width:769px){
  .nav__list{flex-direction:row;}
  .nav__submenu{position:absolute;top:calc(100% + 8px);left:0;}
}

.footer{
  border-top:1px solid #eceef2;margin-top:48px;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
}

h1,h2,h3{line-height:1.25;margin:0 0 8px 0}
h1{font-size:2rem}
h2{font-size:1.35rem}

/* Cards + grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{
  background:var(--card);
  border:1px solid #eceef2;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.card .thumb img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.card-body{padding:12px}
.card h2{margin:6px 0}
.card .dek{color:var(--muted);font-size:0.95rem}
.card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* Badges + post bits (base look; themes colorize) */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 8px;border-radius:999px;font-size:.82rem;font-weight:600;
  color:#0b0c0e;background:#eef2f6;border:1px solid #dde3ea;
}
.badge.date{background:#fff;border-color:#eceef2;color:#4b5058}
.badge.hope{}
.badge.news{}

.post .dek{font-size:1.1rem;color:#444;margin-top:6px}
.hero img{width:100%;border-radius:10px;border:1px solid #eceef2}
.hero figcaption{font-size:0.9rem;color:#6a6f77;margin-top:6px}
.disclaimer{
  margin-top:24px;color:#30343a;font-size:0.95rem;
  border-left:4px solid var(--accent);padding:10px 12px;background:#fbfff4;border-radius:8px
}
.body a{
  background:linear-gradient( to top, color-mix(in srgb,var(--primary) 25%, transparent) 0%, transparent 2px);
  background-repeat:no-repeat;background-size:100% 2px;background-position:0 100%;
  text-decoration:none
}
.body a:hover{background-size:100% 100%;color:#000}
hr{border:none;border-top:1px solid #eceef2;margin:20px 0}

/* ========== Theme: Subtle (default) ========== */
.theme-subtle .header::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--blue) 50%,var(--accent));
  border-radius:2px 2px 0 0;
}
.theme-subtle .badge.hope{
  background:color-mix(in srgb, var(--accent) 18%, #fff);
  border-color:color-mix(in srgb, var(--accent) 35%, #e5f5d6);color:#224000;
}
.theme-subtle .badge.news{
  background:color-mix(in srgb, var(--blue) 15%, #fff);
  border-color:color-mix(in srgb, var(--blue) 35%, #d8e9ff);color:#0b2b55;
}

/* ========== Theme: Bold Magazine ========== */
.theme-bold .header{
  background:linear-gradient(90deg,var(--primary),var(--blue),var(--accent));
  color:#fff;border-bottom:4px solid var(--blue);padding:20px;
}
.theme-bold .header a{color:#fff;font-weight:600}
.theme-bold .site-title{font-size:1.4rem}
.theme-bold .card{border-radius:12px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.theme-bold .card-body{padding:14px;border-top:3px solid var(--primary);background:#fff}
.theme-bold .badge.hope{background:var(--accent);color:#000;border-color:var(--accent)}
.theme-bold .badge.news{background:var(--blue);color:#fff;border-color:var(--blue)}
.theme-bold a:hover{color:var(--primary)}
.theme-bold .disclaimer{background:var(--accent);color:#000;padding:12px;border-radius:6px}

/* ========== Theme: Neon (dark) ========== */
.theme-neon{
  --paper:#0a0a0f; --ink:#eee; --muted:#aaa; --card:#1a1a25;
}
.theme-neon body{background:var(--paper);color:var(--ink)}
.theme-neon .header{
  background:linear-gradient(90deg,var(--primary),var(--blue),var(--accent));
  color:#fff;padding:20px;box-shadow:0 0 15px var(--primary);
  border-bottom:0;
}
.theme-neon .header a{color:#fff;font-weight:bold}
.theme-neon a{color:var(--accent);text-shadow:0 0 4px var(--accent)}
.theme-neon a:hover{color:var(--primary);text-shadow:0 0 6px var(--primary)}
.theme-neon .card{background:var(--card);border:1px solid #333;border-radius:12px;
  box-shadow:0 0 12px rgba(255,20,147,.2)}
.theme-neon .card-body{padding:16px}
.theme-neon .badge.hope{background:var(--accent);color:#000;border-color:var(--accent);text-shadow:none}
.theme-neon .badge.news{background:var(--blue);color:#fff;border-color:var(--blue)}
.theme-neon .disclaimer{border-left:5px solid var(--primary);background:#141420;color:var(--ink);padding:12px;border-radius:6px}

.ad-slot {
  margin: 24px 0;
  min-height: 90px;
  display: block;
  text-align: center;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.02) 10px, rgba(0,0,0,0.02) 20px);
  color: rgba(0,0,0,0.4);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px;
}

.ad-slot::before {
  content: 'Ad placeholder';
}

/* ========== Consent & Privacy Controls ========== */
.consent-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #d6dae2;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  padding: 18px 20px;
  z-index: 9999;
}
.consent-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.consent-banner__inner p {
  margin: 0;
  font-size: 0.95rem;
}
.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.button {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 8px 18px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.button--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.button--primary:hover {
  filter: brightness(.95);
}
.button--secondary {
  background: #f5f6f9;
  color: var(--ink);
  border-color: #c7ccd8;
}
.button--secondary:hover {
  background: #eef1f6;
}
button.consent-manage {
  border: none;
  background: none;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
button.consent-manage:hover,
button.consent-manage:focus {
  text-decoration: underline;
}
[data-requires-consent]:not([data-consent-state]),
[data-requires-consent][data-consent-state="blocked"] {
  display: none !important;
}
[data-requires-consent][data-consent-state="granted"] {
  display: unset !important;
}

@media (max-width:768px){
  .footer{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
}
.header .nav.is-open{background:var(--paper);}
.header .nav.is-open .nav__link,
.header .nav.is-open .nav__link:visited,
.header .nav.is-open .nav__label{color:var(--ink) !important;}
.header .nav.is-open .nav__link:hover{color:var(--primary) !important;}
.theme-bold .nav.is-open{background:#ffffff;}
.theme-bold .nav.is-open .nav__link,
.theme-bold .nav.is-open .nav__link:visited,
.theme-bold .nav.is-open .nav__label{color:#1b1d20 !important;}
.theme-bold .nav__submenu .nav__link,
.theme-bold .nav__submenu .nav__label{color:#1b1d20;}
.theme-bold .nav__submenu .nav__link:hover{color:var(--primary);}


.post--editor{max-width:760px;margin:0 auto;padding-bottom:40px;}
.post__kicker{text-transform:uppercase;font-size:0.8rem;letter-spacing:0.1em;color:var(--muted);margin-bottom:8px;}
.post__meta{font-size:0.9rem;color:var(--muted);margin-top:12px;margin-bottom:24px;}
.hero--editor{margin:28px 0;}
.hero--editor img{border-radius:12px;border:1px solid #eceef2;width:100%;}
.hero__credit{font-size:0.85rem;color:var(--muted);margin-top:8px;text-align:center;}
.post__footer{margin-top:32px;border-top:1px solid #eceef2;padding-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.post__tags{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;}
.post__tags li{background:#eef2f6;color:#27303d;padding:4px 10px;border-radius:999px;font-size:0.8rem;}
.editor-description{font-size:1.05rem;color:var(--muted);max-width:720px;margin-bottom:24px;}
.editor-section{margin-top:36px;}
.editor-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;}
.editor-list__item{display:flex;gap:16px;align-items:flex-start;border:1px solid #eceef2;border-radius:12px;padding:14px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.04);}
.editor-list__thumb{flex:0 0 180px;display:block;overflow:hidden;border-radius:10px;border:1px solid #eceef2;background:#f6f8fb;aspect-ratio:16/9;}
.editor-list__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.editor-list__body{flex:1;display:flex;flex-direction:column;gap:6px;}
.editor-list__title{font-weight:700;color:var(--ink);}
.editor-list__title:hover{color:var(--primary);}
.editor-list__meta{display:block;font-size:0.85rem;color:var(--muted);}
.editor-list__dek{margin:6px 0 0 0;color:var(--muted);max-width:720px;}

@media (max-width:768px){
  .editor-list__item{flex-direction:column;}
  .editor-list__thumb{flex:initial;width:100%;aspect-ratio:16/9;}
}


blockquote {
  background: #f6f8fb;
  border-left: 4px solid var(--primary);
  margin: 24px 0;
  padding: 16px 20px;
  border-radius: 12px;
  color: var(--muted);
  font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }