/* ═══════════════════════════════════════════════════════════════════
   Giáo Phận Nha Trang — Aero Style
   Primary: #02c99b  |  Glassmorphism + smooth gradients
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Teal palette */
  --t-50:   #edfbf8;
  --t-100:  #cef7ed;
  --t-200:  #9ef0db;
  --t-300:  #5de4c5;
  --t-400:  #1dcfab;
  --t-500:  #02c99b;  /* PRIMARY */
  --t-600:  #01a880;
  --t-700:  #018864;
  --t-800:  #016d50;
  --t-900:  #015840;

  /* Grays */
  --g-50:   #f9fafb;
  --g-100:  #f3f4f6;
  --g-200:  #e5e7eb;
  --g-300:  #d1d5db;
  --g-400:  #9ca3af;
  --g-500:  #6b7280;
  --g-600:  #4b5563;
  --g-700:  #374151;
  --g-800:  #1f2937;
  --g-900:  #111827;

  /* Semantic aliases */
  --primary:      #02c99b;
  --primary-dark: #018864;
  --primary-light:#9ef0db;

  /* Aero / Glass */
  --glass-bg:     rgba(255,255,255,0.78);
  --glass-border: rgba(2,201,155,0.18);
  --glass-blur:   blur(18px);
  --glass-shadow: 0 8px 32px rgba(2,201,155,0.10), 0 2px 8px rgba(0,0,0,0.06);

  /* Misc */
  --radius:   12px;
  --radius-lg:18px;
  --radius-xl:24px;
  --shadow:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 16px rgba(2,201,155,0.10), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:0 12px 32px rgba(2,201,155,0.12), 0 4px 10px rgba(0,0,0,0.06);
  --header-h: 70px;
}

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

body {
  font-family: 'Be Vietnam Pro', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--g-800);
  background: linear-gradient(160deg, #f0fdf9 0%, #f8fdfc 40%, #ffffff 100%);
  min-height: 100vh;
}

a { color: var(--t-700); text-decoration: none; }
a:hover { color: var(--t-900); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

h1,h2,h3,h4,h5 { font-weight: 700; line-height: 1.3; color: var(--g-800); }
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 1.25rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }

/* ── TOP BAR ─────────────────────────────────────────────────── */
.topbar {
  background: linear-gradient(90deg, var(--t-900) 0%, var(--t-700) 100%);
  color: rgba(255,255,255,.85);
  font-size: .78rem;
  padding: .3rem 0;
}
.topbar .container { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.topbar a { color: var(--t-200); transition: color .2s; }
.topbar a:hover { color:#fff; }
.topbar .social-links { display:flex; gap:.85rem; }

/* ── HEADER / NAV ────────────────────────────────────────────── */
.site-header {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 2px solid var(--primary);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 24px rgba(2,201,155,0.12), 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow .3s;
}
/* Logo */
.site-logo {
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; flex-shrink:0;
  min-width: 0;
}
.logo-icon {
  width:44px; height:44px; flex-shrink:0;
  background: linear-gradient(135deg, var(--t-500), var(--t-700));
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#fff;
  box-shadow: 0 3px 10px rgba(2,201,155,.4);
}
.logo-icon img { height:36px; width:36px; object-fit:contain; border-radius:8px; }
.logo-text .diocese { font-size:.92rem; font-weight:800; color:var(--t-800); line-height:1.2; white-space:nowrap; }
.logo-text .tagline { font-size:.62rem; color:var(--g-500); font-weight:400; white-space:nowrap; }

/* Header 3-column grid: Logo | Nav | Search */
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--header-h);
  gap: 1rem;
}

/* Nav wrapper — fills the middle column */
.nav-wrapper {
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  gap:.5rem;
}

/* Main nav */
.main-nav { display:flex; align-items:center; gap:.1rem; flex-wrap:nowrap; overflow:hidden; }
.main-nav > li { position:relative; flex-shrink:0; }
.main-nav > li > a {
  display:flex; align-items:center; gap:.25rem;
  padding:.35rem .65rem;
  font-size:.82rem; font-weight:600;
  color: var(--g-700);
  border-radius:30px;
  transition: color .2s, background .2s, box-shadow .2s;
  white-space: nowrap;
}
.main-nav > li > a:hover {
  color: var(--t-700);
  background: var(--t-50);
}
.main-nav > li > a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--t-500), var(--t-700));
  box-shadow: 0 3px 10px rgba(2,201,155,.3);
}
.main-nav > li > a i.fa-home,
.main-nav > li > a i.fa-church,
.main-nav > li > a i.fa-cross,
.main-nav > li > a i.fa-globe,
.main-nav > li > a i.fa-book-open,
.main-nav > li > a i.fa-praying-hands,
.main-nav > li > a i.fa-bullhorn { display:none; } /* hide category icons in nav to save space */
.main-nav > li > a .nav-chevron { font-size:.58rem; opacity:.65; margin-left:.1rem; }

/* Dropdown */
.main-nav .dropdown { position:relative; }
.dropdown-menu {
  display:none;
  position:absolute;
  top: calc(100% + 8px);
  left:0;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width:210px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--glass-border);
  z-index:200;
  padding:.4rem;
}
.main-nav .dropdown:hover .dropdown-menu { display:block; }
.dropdown-menu li a {
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .8rem;
  font-size:.83rem; color:var(--g-700);
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.dropdown-menu li a:hover { background:var(--t-50); color:var(--t-700); }

/* Search — right column */
.header-search { display:flex; align-items:center; flex-shrink:0; }
.header-search form { display:flex; align-items:center; }
.header-search input {
  border: 1.5px solid var(--g-200);
  border-radius: 30px 0 0 30px;
  padding:.35rem .85rem;
  font-size:.82rem;
  outline:none;
  width:170px;
  background:var(--g-50);
  transition: border-color .2s, box-shadow .2s, width .3s;
  font-family: inherit;
}
.header-search input:focus {
  border-color: var(--t-400);
  background:#fff;
  width:200px;
  box-shadow: 0 0 0 3px rgba(2,201,155,.1);
}
.header-search button {
  background: linear-gradient(135deg, var(--t-500), var(--t-700));
  color:#fff; border:none;
  padding:.35rem .85rem;
  border-radius:0 30px 30px 0;
  cursor:pointer; font-size:.85rem;
  transition: opacity .2s;
}
.header-search button:hover { opacity:.88; }

/* Hamburger — hidden on desktop, shown on mobile via media query */
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:.5rem; }
.hamburger span { display:block; width:24px; height:2px; background:var(--g-700); margin:5px 0; transition:transform .3s, opacity .3s; border-radius:2px; }

/* ── HERO BANNER ──────────────────────────────────────────────── */
.hero-banner {
  background: linear-gradient(135deg, var(--t-900) 0%, var(--t-700) 55%, var(--t-500) 100%);
  color:#fff;
  padding: 2.5rem 0;
  overflow:hidden;
  position:relative;
}
.hero-banner::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.07) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.09) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(2,201,155,.15) 0%, transparent 70%);
  pointer-events:none;
}
.hero-banner .container { position:relative; z-index:1; }
.hero-inner { display:grid; grid-template-columns:3fr 2fr; gap:2.5rem; align-items:center; }
.hero-badge {
  display:inline-block;
  background:rgba(255,255,255,.18);
  color:rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.25);
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.25rem .85rem; border-radius:30px; margin-bottom:.85rem;
  backdrop-filter: blur(4px);
}
.hero-title { font-size:clamp(1.4rem,3vw,2rem); color:#fff; margin-bottom:.75rem; }
.hero-excerpt { color:rgba(255,255,255,.85); margin-bottom:1.1rem; font-size:.95rem; line-height:1.7; }
.hero-meta { font-size:.78rem; color:rgba(255,255,255,.7); display:flex; gap:1rem; flex-wrap:wrap; }
.btn-hero {
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; color:var(--t-800);
  font-weight:700; font-size:.875rem;
  padding:.65rem 1.6rem; border-radius:30px; margin-top:1.1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  transition: transform .2s, box-shadow .2s;
}
.btn-hero:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.2); color:var(--t-800); }
.hero-image { border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.18); }
.hero-image img { width:100%; height:290px; object-fit:cover; }
.hero-image .placeholder-img {
  width:100%; height:290px;
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem;
}
.hero-image .placeholder-img span { font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:600; }

/* ── INFO STRIP ───────────────────────────────────────────────── */
.info-strip {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  padding: .85rem 0;
  box-shadow: 0 4px 20px rgba(2,201,155,.07);
}
.info-strip-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.info-strip-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem .9rem; border-radius:var(--radius);
  transition:background .2s;
  cursor:default;
}
.info-strip-item:hover { background:var(--t-50); }
.info-strip-item > i { font-size:1.4rem; color:var(--t-500); flex-shrink:0; width:32px; text-align:center; }
.info-strip-item strong { display:block; font-size:.82rem; font-weight:700; color:var(--t-800); }
.info-strip-item span { font-size:.72rem; color:var(--g-500); }

/* ── TICKER ───────────────────────────────────────────────────── */
.ticker-wrap {
  background:linear-gradient(90deg,var(--t-50),#fff,var(--t-50));
  border-top:1px solid var(--t-100);
  border-bottom:1px solid var(--t-100);
  padding:.5rem 0; overflow:hidden;
}
.ticker-inner { display:flex; align-items:center; gap:1rem; }
.ticker-label {
  background:linear-gradient(135deg,var(--t-500),var(--t-700));
  color:#fff; font-size:.72rem; font-weight:700;
  padding:.22rem .85rem; border-radius:30px;
  white-space:nowrap; flex-shrink:0;
  box-shadow:0 2px 8px rgba(2,201,155,.3);
}
.ticker-track { overflow:hidden; flex:1; }
.ticker-items { display:flex; gap:3rem; animation:ticker 35s linear infinite; white-space:nowrap; }
.ticker-items:hover { animation-play-state:paused; }
.ticker-items a { font-size:.875rem; color:var(--t-800); font-weight:500; transition:color .2s; }
.ticker-items a:hover { color:var(--t-500); }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SECTION ─────────────────────────────────────────────────── */
.section { padding:2.5rem 0; }
.section-alt { background:var(--t-50); }
.section-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.5rem; padding-bottom:.75rem;
  border-bottom:2px solid var(--t-100);
}
.section-title {
  font-size:1.15rem; font-weight:800; color:var(--t-800);
  display:flex; align-items:center; gap:.6rem;
}
.section-title::before {
  content:''; display:inline-block;
  width:4px; height:1.2em;
  background:linear-gradient(180deg,var(--t-500),var(--t-700));
  border-radius:2px;
}
.view-all {
  font-size:.78rem; font-weight:700; color:var(--t-600);
  border:1.5px solid var(--t-200);
  padding:.28rem .9rem; border-radius:30px;
  transition:background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.view-all:hover { background:var(--t-500); color:#fff; border-color:var(--t-500); }

/* ── CARD ─────────────────────────────────────────────────────── */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(2,201,155,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .25s, box-shadow .25s;
  display:flex; flex-direction:column;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card-img { aspect-ratio:16/9; overflow:hidden; flex-shrink:0; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.card:hover .card-img img { transform:scale(1.04); }
.card-img .placeholder {
  width:100%; height:100%;
  background:linear-gradient(135deg,var(--t-100),var(--t-200));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  color:var(--t-600); font-size:2.4rem;
  position:relative; overflow:hidden;
}
.card-img .placeholder::before {
  content:''; position:absolute;
  width:130px; height:130px; border-radius:50%;
  background:rgba(255,255,255,.35); top:-35px; right:-35px;
}
.card-img .placeholder::after {
  content:''; position:absolute;
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,.2); bottom:-20px; left:-20px;
}
.card-img .placeholder i { position:relative; z-index:1; }
.card-body { padding:1.1rem; flex:1; display:flex; flex-direction:column; }
.card-category { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--t-600); margin-bottom:.4rem; }
.card-title { font-size:.95rem; font-weight:700; margin-bottom:.5rem; line-height:1.45; flex:1; }
.card-title a { color:var(--g-800); }
.card-title a:hover { color:var(--t-700); }
.card-excerpt { font-size:.82rem; color:var(--g-500); margin-bottom:.75rem; line-height:1.6; }
.card-meta { font-size:.73rem; color:var(--g-400); display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:auto; }
.card-meta i { font-size:.68rem; }

/* ── FEATURED (large overlay card) ───────────────────────────── */
.featured-main { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); background:var(--g-800); }
.featured-main img { width:100%; height:380px; object-fit:cover; opacity:.72; }
.featured-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:2rem 1.5rem 1.5rem;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%);
}
.featured-overlay .badge { background:var(--t-500); color:#fff; font-size:.68rem; font-weight:700; padding:.2rem .65rem; border-radius:30px; text-transform:uppercase; letter-spacing:.04em; }
.featured-overlay h2 { color:#fff; font-size:clamp(1rem,2.5vw,1.4rem); margin-top:.5rem; }
.featured-overlay h2 a { color:#fff; }
.featured-overlay .meta { color:rgba(255,255,255,.68); font-size:.78rem; margin-top:.4rem; }

/* ── ANNOUNCEMENT LIST ────────────────────────────────────────── */
.announce-list { display:flex; flex-direction:column; gap:.45rem; }
.announce-item {
  display:flex; gap:.85rem; align-items:flex-start;
  padding:.65rem .85rem; border-radius:var(--radius);
  background:rgba(255,255,255,.8);
  border:1px solid var(--glass-border);
  transition:background .2s, transform .2s;
}
.announce-item:hover { background:var(--t-50); transform:translateX(3px); }
.announce-date {
  background:linear-gradient(135deg,var(--t-500),var(--t-700));
  color:#fff; border-radius:10px; text-align:center;
  min-width:44px; padding:.35rem .4rem;
  font-size:.68rem; font-weight:700; line-height:1.2; flex-shrink:0;
  box-shadow:0 2px 8px rgba(2,201,155,.3);
}
.announce-date .day { font-size:1.1rem; display:block; }
.announce-title { font-size:.87rem; font-weight:600; color:var(--g-800); line-height:1.4; }
.announce-title a { color:inherit; }
.announce-title a:hover { color:var(--t-700); }
.announce-badge { font-size:.7rem; background:var(--t-500); color:#fff; padding:.1rem .4rem; border-radius:4px; font-weight:700; display:inline-block; margin-bottom:.2rem; }

/* ── SCRIPTURE ────────────────────────────────────────────────── */
.scripture-card {
  background:linear-gradient(135deg,var(--t-800),var(--t-600));
  color:#fff; border-radius:var(--radius-lg); padding:1.75rem;
  position:relative; overflow:hidden;
  box-shadow:0 8px 32px rgba(2,201,155,.25);
}
.scripture-card::before {
  content:'"'; position:absolute; top:-20px; right:10px;
  font-size:10rem; opacity:.07; font-family:Georgia,serif; line-height:1;
}
.scripture-card h3 { color:#fff; margin-bottom:.85rem; font-size:1rem; }
.scripture-card p { font-size:.9rem; line-height:1.8; color:rgba(255,255,255,.85); }
.scripture-card .read-more {
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1.1rem; font-size:.8rem; color:rgba(255,255,255,.8);
  border-bottom:1px dotted rgba(255,255,255,.5);
  padding-bottom:.1rem;
}
.scripture-list { display:flex; flex-direction:column; gap:.5rem; }
.scripture-item {
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border-radius:var(--radius);
  padding:.85rem 1.1rem;
  box-shadow:var(--shadow);
  border-left:3px solid var(--t-500);
  transition:transform .2s, box-shadow .2s;
}
.scripture-item:hover { transform:translateX(3px); box-shadow:var(--shadow-md); }
.scripture-item h4 { font-size:.875rem; font-weight:600; margin-bottom:.25rem; }
.scripture-item h4 a { color:var(--g-800); }
.scripture-item h4 a:hover { color:var(--t-700); }
.scripture-item .date { font-size:.72rem; color:var(--g-400); }

/* ── CONTENT GRID + SIDEBAR ───────────────────────────────────── */
.content-grid { display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; }
.sidebar { display:flex; flex-direction:column; gap:1.5rem; }
.sidebar-box {
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  border-radius:var(--radius-lg);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.sidebar-box .sidebar-title {
  background:linear-gradient(135deg,var(--t-700),var(--t-500));
  color:#fff; font-size:.82rem; font-weight:700;
  padding:.75rem 1.1rem; text-transform:uppercase; letter-spacing:.05em;
}
.sidebar-list { padding:.4rem 0; }
.sidebar-list li { border-bottom:1px solid rgba(2,201,155,.07); }
.sidebar-list li:last-child { border-bottom:none; }
.sidebar-list li a {
  display:flex; justify-content:space-between; align-items:center;
  padding:.55rem 1.1rem; font-size:.85rem; color:var(--g-700);
  transition:background .15s, color .15s;
}
.sidebar-list li a:hover { background:var(--t-50); color:var(--t-700); }
.sidebar-list li a .count {
  font-size:.72rem; font-weight:700; color:#fff;
  background:var(--t-500); padding:.1rem .5rem; border-radius:30px;
}

/* ── ARTICLE PAGE ─────────────────────────────────────────────── */
.breadcrumb { font-size:.8rem; color:var(--g-400); margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.breadcrumb a { color:var(--t-600); }
.article-header { margin-bottom:1.5rem; }
.article-category { font-size:.75rem; font-weight:700; color:var(--t-600); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; }
.article-title { font-size:clamp(1.4rem,3vw,2rem); font-weight:800; color:var(--g-900); line-height:1.3; margin-bottom:.75rem; }
.article-meta { display:flex; gap:1rem; font-size:.8rem; color:var(--g-400); flex-wrap:wrap; }
.article-meta i { color:var(--t-500); font-size:.75rem; }
.article-thumbnail { border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.5rem; box-shadow:var(--shadow-md); }
.article-thumbnail img { width:100%; max-height:450px; object-fit:cover; }
.article-excerpt {
  background:linear-gradient(135deg,var(--t-50),rgba(2,201,155,.05));
  border-left:4px solid var(--t-500);
  padding:1.1rem 1.5rem; border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:1.5rem; font-size:.95rem; font-style:italic; color:var(--g-600);
}
.article-body { font-size:.975rem; line-height:1.85; color:var(--g-700); }
.article-body h2,.article-body h3 { color:var(--g-900); margin:1.5rem 0 .75rem; }
.article-body p { margin-bottom:1rem; }
.article-body ul,.article-body ol { margin:0 0 1rem 1.5rem; }
.article-body li { margin-bottom:.4rem; }
.article-body img { border-radius:var(--radius); box-shadow:var(--shadow-md); margin:1rem auto; }
.article-body blockquote { border-left:4px solid var(--t-500); padding:1rem 1.5rem; background:var(--t-50); border-radius:0 var(--radius) var(--radius) 0; margin:1.5rem 0; font-style:italic; }

/* Share buttons */
.share-buttons { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:2rem 0; }
.share-buttons span { font-size:.85rem; font-weight:600; color:var(--g-600); }
.share-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem 1rem; border-radius:30px; font-size:.82rem; font-weight:600;
  transition:opacity .2s, transform .2s;
}
.share-btn:hover { opacity:.85; transform:translateY(-1px); }
.share-btn.fb { background:#1877f2; color:#fff; }
.share-btn.tw { background:#1da1f2; color:#fff; }
.share-btn.copy { background:var(--g-100); color:var(--g-700); border:1px solid var(--g-200); }

/* Related */
.related-posts { margin-top:2rem; }
.related-title { font-size:1rem; font-weight:800; color:var(--t-800); margin-bottom:1rem; }
.related-item { display:flex; gap:.85rem; align-items:flex-start; padding:.65rem 0; border-bottom:1px solid var(--g-100); }
.related-item:last-child { border-bottom:none; }
.related-thumb { width:72px; height:56px; object-fit:cover; border-radius:var(--radius); flex-shrink:0; }
.related-item-title { font-size:.85rem; font-weight:600; line-height:1.4; color:var(--g-800); }
.related-item-title:hover { color:var(--t-700); }
.related-item-date { font-size:.72rem; color:var(--g-400); margin-top:.25rem; }

/* ── CATEGORY PAGE ────────────────────────────────────────────── */
.category-header {
  padding:1.5rem 0;
  background:linear-gradient(135deg,var(--t-900),var(--t-700));
  margin-bottom:2rem;
}
.category-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.15); color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:.3rem .9rem; border-radius:30px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem;
}
.category-header h1 { font-size:1.6rem; color:#fff; }
.category-header p { color:rgba(255,255,255,.75); font-size:.9rem; margin-top:.3rem; }

/* ── SEARCH ───────────────────────────────────────────────────── */
.search-header { background:var(--t-50); border-bottom:1px solid var(--t-100); padding:1.5rem 0; margin-bottom:2rem; }
.search-header h1 { font-size:1.4rem; color:var(--g-800); }
.search-header p { font-size:.9rem; color:var(--g-500); margin-top:.25rem; }
.search-card { display:flex; gap:1rem; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); margin-bottom:1rem; transition:box-shadow .2s; }
.search-card:hover { box-shadow:var(--shadow-md); }
.search-thumb { width:120px; height:90px; object-fit:cover; border-radius:var(--radius); flex-shrink:0; }
.search-placeholder { width:120px; height:90px; background:var(--t-100); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--t-400); font-size:1.75rem; flex-shrink:0; }
.search-body { flex:1; }
.search-category { font-size:.7rem; font-weight:700; color:var(--t-600); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem; }
.search-title { font-size:.97rem; font-weight:700; color:var(--g-800); margin-bottom:.4rem; line-height:1.4; }
.search-title a:hover { color:var(--t-700); }
.search-excerpt { font-size:.82rem; color:var(--g-500); line-height:1.6; margin-bottom:.5rem; }
.search-meta { font-size:.72rem; color:var(--g-400); }

/* ── PAGINATION ───────────────────────────────────────────────── */
.pagination { display:flex; gap:.4rem; align-items:center; justify-content:center; padding:1.5rem 0; flex-wrap:wrap; }
.pagination a, .pagination span {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  font-size:.85rem; font-weight:600;
  border:1.5px solid var(--g-200); color:var(--g-600);
  transition:background .15s, border-color .15s, color .15s;
}
.pagination a:hover { background:var(--t-50); border-color:var(--t-300); color:var(--t-700); }
.pagination .active { background:var(--t-500); border-color:var(--t-500); color:#fff; box-shadow:0 4px 12px rgba(2,201,155,.3); }
.pagination .disabled { opacity:.4; pointer-events:none; }

/* ── FOOTER ───────────────────────────────────────────────────── */
.site-footer { background:linear-gradient(160deg,var(--t-900),var(--g-900)); color:var(--t-100); margin-top:3rem; }
.footer-top { padding:3rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; }
.footer-brand .diocese { font-size:1.05rem; font-weight:800; color:#fff; }
.footer-brand .tagline { font-size:.8rem; color:var(--t-300); margin-top:.25rem; }
.footer-brand .desc { font-size:.83rem; color:rgba(255,255,255,.65); margin-top:.85rem; line-height:1.7; }
.footer-brand .contact-info { margin-top:1rem; font-size:.8rem; color:rgba(255,255,255,.65); display:flex; flex-direction:column; gap:.4rem; }
.footer-brand .contact-info i { color:var(--t-400); width:16px; }
.footer-heading { font-size:.82rem; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; }
.footer-links { display:flex; flex-direction:column; gap:.4rem; }
.footer-links a { font-size:.83rem; color:rgba(255,255,255,.6); transition:color .2s; }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:1rem 0; text-align:center; font-size:.76rem; color:rgba(255,255,255,.45); }
.social-links-footer { display:flex; gap:.65rem; margin-top:.85rem; }
.social-links-footer a {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; border-radius:10px; font-size:.85rem;
  transition:background .2s, transform .2s;
}
.social-links-footer a:hover { background:var(--t-600); transform:translateY(-2px); }

/* ── BACK TO TOP ──────────────────────────────────────────────── */
.back-to-top {
  position:fixed; bottom:1.5rem; right:1.5rem;
  background:linear-gradient(135deg,var(--t-500),var(--t-700));
  color:#fff; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  font-size:1rem; box-shadow:0 4px 16px rgba(2,201,155,.4);
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
  z-index:999; display:flex; align-items:center; justify-content:center;
}
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover { transform:translateY(-3px); }

/* ── BADGES ───────────────────────────────────────────────────── */
.badge { display:inline-block; font-size:.68rem; font-weight:700; padding:.2rem .6rem; border-radius:30px; text-transform:uppercase; letter-spacing:.04em; }
.badge-teal   { background:var(--t-100); color:var(--t-700); }
.badge-green  { background:#d1fae5; color:#065f46; }
.badge-amber  { background:#fef3c7; color:#92400e; }
.badge-red    { background:#fee2e2; color:#991b1b; }
.badge-solid  { background:var(--t-500); color:#fff; }

/* ── UTILS ────────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.4rem;
  background:linear-gradient(135deg,var(--t-500),var(--t-700));
  color:#fff; padding:.6rem 1.5rem; border-radius:30px;
  font-weight:700; font-size:.9rem;
  box-shadow:0 4px 14px rgba(2,201,155,.3);
  transition:opacity .2s, transform .2s;
}
.btn-primary:hover { color:#fff; opacity:.9; transform:translateY(-1px); }
.error-page { text-align:center; padding:5rem 1rem; }
.error-page h1 { font-size:5rem; color:var(--t-200); }
.error-page h2 { color:var(--g-700); margin-bottom:1rem; }
.error-page p { color:var(--g-500); margin-bottom:1.5rem; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .content-grid { grid-template-columns:1fr; }
  .sidebar { flex-direction:row; flex-wrap:wrap; }
  .sidebar .sidebar-box { flex:1; min-width:240px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid .footer-brand { grid-column:1/-1; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .info-strip-inner { grid-template-columns:repeat(2,1fr); }
  .nav-wrapper { justify-content:flex-end; }
}

@media (max-width: 768px) {
  .topbar .date-info { display:none; }
  .logo-text .tagline { display:none; }
  .hamburger { display:block; }
  .header-inner { grid-template-columns: 1fr auto; }
  .nav-wrapper {
    display:none;
    position:absolute; top:var(--header-h); left:0; right:0;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:2px solid var(--t-100);
    box-shadow:var(--shadow-lg);
    padding:1rem; flex-direction:column; z-index:999;
  }
  .nav-wrapper.open { display:flex; }
  .main-nav { flex-direction:column; align-items:flex-start; width:100%; gap:.25rem; overflow:visible; }
  .main-nav > li > a i.fa-home,
  .main-nav > li > a i.fa-church,
  .main-nav > li > a i.fa-cross,
  .main-nav > li > a i.fa-globe,
  .main-nav > li > a i.fa-book-open,
  .main-nav > li > a i.fa-praying-hands,
  .main-nav > li > a i.fa-bullhorn { display:inline; }
  .main-nav > li { width:100%; }
  .main-nav > li > a { padding:.6rem .85rem; border-radius:var(--radius); font-size:.9rem; }
  .dropdown-menu { position:static; box-shadow:none; border:none; padding-left:1rem; backdrop-filter:none; }
  .main-nav .dropdown:hover .dropdown-menu { display:none; }
  .main-nav .dropdown.open .dropdown-menu { display:block; }
  .header-search { display:none; }
  .header-search.mobile-search { display:flex; width:100%; margin-top:.5rem; }
  .header-search.mobile-search input { flex:1; border-radius:30px 0 0 30px; width:auto; }
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
  .hero-inner { grid-template-columns:1fr; }
  .hero-image { display:none; }
  .footer-grid { grid-template-columns:1fr; }
  .sidebar { flex-direction:column; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns:1fr; }
  .header-search { display:none; }
  .info-strip-inner { grid-template-columns:1fr 1fr; gap:.5rem; }
  .info-strip-item { padding:.4rem .6rem; }
  .info-strip-item > i { font-size:1.1rem; width:24px; }
}