:root{
--bg: #faf9ff;
--bg-accent: #f3efff;
--text: #221c35;
--muted: #6a6287;
--purple: #6c4dd6; /* primary */
--purple-600:#5b3fd1;
--purple-100:#ebe6ff;
--white:#ffffff;
--radius: 16px;
--shadow: 0 6px 30px rgba(30, 12, 94, 0.12);
}

/* --- FOUNDATION --- */
html, body {
box-sizing: border-box;
height: 100%;
}

body{
margin: 0;
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
color: var(--text);
background:
radial-gradient(1200px 600px at 15% -10%, var(--bg-accent), transparent 60%),
radial-gradient(1200px 600px at 85% 0%, var(--purple-100), transparent 60%),
var(--bg);
}

a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- GENERAL LAYOUT & TOPBAR --- */
.visually-hidden{ position:absolute; left:-9999px; }

/* --- NEW: Hero Logo Styling --- */
.hero-logo {
  display: block;
  margin: 0 auto 24px; /* Centers horizontally, adds 24px space below */
  max-width: 300px;   /* Controls the logo's size, you can adjust this */
  height: auto;       /* Maintains aspect ratio */
}

.topbar{
height: 64px;
display: flex; align-items: center; justify-content: space-between;
padding: 0 20px;
}

.brand{ display:flex; align-items:center; gap:10px; }
.logo{ height:36px; width:auto; object-fit:contain; }
.brand-text{ font-weight:700; letter-spacing:.2px; }

.login-btn{
display:inline-block; padding:8px 14px; border-radius:999px;
background: var(--purple); color: var(--white); text-decoration:none; font-weight:600;
box-shadow: 0 3px 10px rgba(106,77,214,.25);
}
.login-btn:hover{ background: var(--purple-600); }

.hero{
max-width: 1100px; margin: 24px auto 48px; padding: 0 16px;
}

.search-card{
margin: 36px auto 28px; padding: 32px 22px;
max-width: 720px; background: var(--white); border-radius: var(--radius);
box-shadow: var(--shadow); text-align:center;
}

#searchForm{
display:flex; gap:10px; align-items:center; justify-content:center;
}
#searchInput{
width: min(560px, 80vw);
border: 1px solid #e6e0ff; border-radius: 999px;
padding: 14px 18px; outline: none; font-size: 18px;
background: var(--bg-accent);
}
#searchInput:focus{ border-color: var(--purple); box-shadow: 0 0 0 3px rgba(108,77,214,.2); }

.search-btn{
padding: 12px 18px; border-radius: 999px; border: 0;
background: var(--purple); color: var(--white); font-weight: 700; cursor:pointer;
}
.search-btn:hover{ background: var(--purple-600); }
.subtle{ color: var(--muted); font-size: 14px; margin-top: 10px; }

.section{ margin-top: 40px; }
.section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.section h2{ margin:0; font-size: 22px; }
.view-all{ color: var(--purple-600); text-decoration: none; font-weight:600; }

/* --- LATEST SERMONS GRID --- */

.latest-wrap > .latest-grid {
list-style: none;
padding: 0;
margin: 24px auto 40px;
max-width: 1100px;
padding: 0 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.latest-wrap > .latest-grid > li {
margin: 0;
padding: 0;
}

.sermon-list{
list-style:none; padding:0; margin:0;
display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:14px;
}

.sermon-card {
background: var(--white);
border-radius: 14px;
padding: 16px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
text-decoration: none;
color: var(--text);
transition: all 0.2s ease-in-out;
}
.sermon-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(30, 12, 94, 0.16);
}

.sermon-title{ font-weight:700; margin:0; }
.sermon-meta{ color: var(--muted); font-size: 13px; }

/* Responsive adjustments for latest sermons grid */
@media (max-width: 768px) {
.latest-wrap > .latest-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.latest-wrap > .latest-grid {
grid-template-columns: 1fr;
}
}

/* --- BOOKS GRID --- */
.books-grid{
display:grid; gap:10px;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.book-pill{
background: var(--white); border:1px solid #e8e1ff; border-radius: 999px;
padding: 10px 14px; text-align:center; text-decoration:none; color: var(--text);
box-shadow: 0 2px 10px rgba(108,77,214,.10);
transition: all 0.2s ease-in-out;
}
.book-pill:hover{ border-color: var(--purple); box-shadow: 0 4px 14px rgba(108,77,214,.18); transform: translateY(-1px); }

/* --- WEEKEND CALENDAR STYLES (Card View) --- */
.calendar-wrap { max-width: 1100px; margin: 32px auto; }
.cal-header { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; }
.cal-title { font-size:1.4rem; font-weight:700; margin:0; }
.cal-nav { width:40px; height:40px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); cursor:pointer; }
.cal-nav:hover{ transform:translateY(-1px); }

.cal-subtle {
text-align: center;
color: var(--muted);
font-size: 0.95rem;
margin: 10px 0 25px;
}

/* Base grid for calendar: Two columns for Sunday/Wednesday */
.date-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
max-width: 1100px;
margin: 0 auto;
padding: 0 16px;
}

.date-card {
  padding: 16px;
  border-radius: var(--radius);
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.date-card.no-items {
display: none; /* Hide cards that don't have sermon items */
}

.date-card.has-items {
background: var(--white);
color: var(--text);
border: 2px solid var(--purple-100);
}

.date-card.has-items:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
border-color: var(--purple);
}

.day-head {
font-weight: 700;
font-size: 0.85rem;
color: var(--purple);
margin-bottom: 8px;
border-bottom: 1px dashed var(--purple-100);
padding-bottom: 4px;
}

.day-title {
font-size: 1rem;
font-weight: 700;
margin: 0;
line-height: 1.3;
color: var(--text);
}

.day-passage {
font-size: 0.9rem;
color: var(--muted);
margin: 4px 0 0;
flex-grow: 1; /* Allows this element to take up remaining space */
}

.day-meta {
font-size: 0.8rem;
color: var(--muted);
margin-top: 4px;
}

.empty-note {
font-size: 0.9rem;
margin: 8px 0 0;
}

/* --- FOOTER --- */
.footer{
max-width:1100px; margin: 32px auto; padding: 0 16px; color: var(--muted);
text-align:center;
}


/* --- NEW STYLES FOR SERMON DETAIL PAGE --- */
#audioWrap audio {
  width: 100%;
  margin-top: 1rem;
}

.sermon-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.sermon-link svg {
  width: 18px;
  height: 18px;
}

.sermon-link.youtube {
  background-color: #FF0000;
  color: white;
  border-color: #FF0000;
}
.sermon-link.youtube:hover {
  background-color: #c00;
  border-color: #c00;
  color: white;
  text-decoration: none;
}

#transcriptWrap {
  text-align: left;
}

#transcript {
  line-height: 1.6;
  background-color: var(--bg-accent);
  padding: 16px;
  border-radius: var(--radius);
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--purple-100);
}

/* Make h4 in more sermons list look good */
#moreList .sermon-title {
    font-size: 1rem; /* Adjust from h3 to h4 size */
    margin-bottom: 4px;
}