/* ============================================
   LOGO — left aligned, properly sized
============================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(250,246,239,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(196,98,26,0.15);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  max-width: 1100px;
  margin: 0 auto;
  gap: 24px;
}

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo image sizing */
.site-logo .custom-logo-link {
  display: flex !important;
  align-items: center;
}

.site-logo .custom-logo-link img,
.site-logo .custom-logo {
  height: 50px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain;
  display: block !important;
  mix-blend-mode: multiply; /* removes black background */
}

/* Nav links */
.main-navigation { margin-left: auto; }
.main-navigation ul {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}
.main-navigation a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.main-navigation a:hover { color: var(--saffron-mid); }
.nav-cta {
  padding: 9px 20px !important;
  background: var(--saffron-mid) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.nav-cta:hover {
  background: var(--terracotta) !important;
  color: #FFFFFF !important;
}

/* ============================================
   HERO CONTENT
============================================ */
.hero-hook { color:var(--text-body); font-size:1rem; line-height:1.85; margin-bottom:12px; font-weight:400; }
.hero-now { color:var(--saffron-mid); font-size:1.15rem; margin:16px 0 10px; font-family:var(--font-serif); font-style:italic; font-weight:600; }
.hero-subtitle { color:var(--text-body); font-size:0.97rem; line-height:1.85; margin-bottom:32px; font-weight:400; }
.hero-body-text { margin:16px 0 32px; max-width:480px; }

/* ============================================
   TEACHER QUOTE
============================================ */
.teacher-quote {
  border-left: 3px solid var(--saffron-mid);
  padding: 16px 20px;
  margin: 0 0 20px;
  background: var(--saffron-pale);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--text-main);
  line-height: 1.75;
}

/* ============================================
   PROGRAMS & WORKSHOPS
============================================ */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}
.prog-card { background:var(--ivory); border:1px solid rgba(196,98,26,0.15); overflow:hidden; transition:transform 0.3s,box-shadow 0.3s; }
.prog-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(60,30,0,0.1); }
.prog-card-img { height:180px; overflow:hidden; }
.prog-card-img img { width:100%; height:100%; object-fit:cover; filter:saturate(0.85); transition:transform 0.4s; }
.prog-card:hover .prog-card-img img { transform:scale(1.04); }
.prog-card-img-placeholder { background:var(--saffron-pale); display:flex; align-items:center; justify-content:center; font-size:3rem; }
.prog-card-body { padding:24px; }
.prog-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.prog-type-badge { font-size:0.65rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--saffron-mid); border:1px solid rgba(196,98,26,0.3); padding:3px 10px; background:rgba(196,98,26,0.06); }
.prog-status-badge { font-size:0.68rem; font-weight:600; padding:3px 10px; border-radius:20px; letter-spacing:0.05em; }
.prog-title { font-family:var(--font-serif); font-size:1.3rem; color:var(--text-main); font-weight:600; margin-bottom:8px; line-height:1.3; }
.prog-desc { font-size:0.88rem; color:var(--text-sub); line-height:1.7; margin-bottom:16px; }
.prog-meta { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; padding:16px; background:var(--saffron-pale); border-left:2px solid var(--saffron-mid); }
.prog-meta-item { display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-body); font-weight:400; }
.prog-meta-icon { font-size:0.9rem; flex-shrink:0; }
.prog-btn { display:block; text-align:center; font-size:0.72rem; }
.prog-full-btn { display:block; text-align:center; padding:13px; background:rgba(231,76,60,0.08); border:1px solid rgba(231,76,60,0.3); color:#c0392b; font-size:0.75rem; font-weight:500; letter-spacing:0.1em; }
.prog-empty { text-align:center; padding:60px 24px; background:var(--ivory); border:1px dashed rgba(196,98,26,0.2); color:var(--text-sub); font-size:0.95rem; }
.prog-empty a { color:var(--saffron-mid); }
.past-programs { margin-top:48px; padding-top:40px; border-top:1.5px solid rgba(196,98,26,0.15); }
.past-title { font-family:var(--font-serif); font-size:1.4rem; color:var(--text-muted); font-weight:400; margin-bottom:20px; }
.past-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.past-card { background:var(--ivory); border:1px solid rgba(196,98,26,0.1); padding:16px 20px; opacity:0.75; }
.past-name { font-family:var(--font-serif); font-size:1rem; color:var(--text-main); font-weight:600; margin:8px 0 4px; }
.past-date { font-size:0.8rem; color:var(--text-muted); margin:2px 0; }

@media (max-width: 768px) {
  .programs-grid { grid-template-columns:1fr; }
  .past-grid { grid-template-columns:1fr; }
  .main-navigation { display:none; }
  .main-navigation.open { display:block; position:fixed; top:65px; left:0; right:0; background:var(--ivory); padding:24px; border-bottom:1px solid var(--cream); z-index:999; }
  .main-navigation.open ul { flex-direction:column; gap:16px; }
}