/*
Theme Name: Apostolic Power Bible Institute — Emerald
Theme URI: https://example.com/
Author: Apostolic Power
Author URI: https://example.com/
Description: The Apostolic Power Bible Institute curriculum -- four years, forty courses, every weekly lesson and closing exam -- in a green, beige, and blue palette with a fixed sidebar course menu organized by year. Activating this theme replaces your site's current design with this one.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apostolic-power-institute-emerald
*/

/* -----------------------------------------------------------------------
   Palette: deep green sidebar, warm beige page, blue-hued accents.
   Kept to three families on purpose -- no extra decorative colors.
------------------------------------------------------------------------ */
:root{
  --green-950:#122019;
  --green-900:#17281f;
  --green-800:#1f3a2c;
  --green-700:#2c5240;
  --green-line:#33503f;
  --beige-050:#faf6ec;
  --beige-100:#f3ecd9;
  --beige-200:#e8ddc0;
  --beige-line:#d7c9a3;
  --ink:#26291f;
  --ink-soft:#5c6152;
  --blue-600:#2f5f78;
  --blue-500:#3d7a97;
  --blue-400:#5a9bb8;
  --blue-100:#dcebf1;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
  --sidebar-w: 300px;
  --radius: 5px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--beige-050);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue-600);text-decoration:none;}
a:hover{color:var(--blue-500);text-decoration:underline;}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--blue-400); outline-offset:2px;
}
hr{border:none;border-top:1px solid var(--beige-line);margin:2rem 0;}
h1,h2,h3{font-family:var(--font-display);color:var(--green-900);line-height:1.25;}
h1{font-size:2rem;margin:0 0 .5rem;}
h2{font-size:1.35rem;margin:2.25rem 0 .75rem;padding-top:1.25rem;border-top:1px solid var(--beige-line);}
h2:first-of-type{border-top:none;padding-top:0;}
h3{font-size:1.05rem;color:var(--green-700);margin:1.25rem 0 .5rem;}
ul,ol{padding-left:1.35rem;}

/* -----------------------------------------------------------------------
   App shell: fixed sidebar + scrolling content column.
------------------------------------------------------------------------ */
.apbi-shell{display:flex;min-height:100vh;}

/* Mobile top bar (hidden on desktop) */
.topbar{
  display:none;
  position:sticky;top:0;z-index:30;
  align-items:center;gap:.75rem;
  background:var(--green-950);color:var(--beige-100);
  padding:.75rem 1rem;
}
.topbar-title{font-family:var(--font-display);font-size:1.05rem;}
.menu-toggle{
  background:transparent;border:1px solid var(--green-line);color:var(--beige-100);
  border-radius:var(--radius);width:2.25rem;height:2.25rem;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.menu-toggle:hover{border-color:var(--blue-400);}

.sidebar-overlay{display:none;}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);
  flex:none;
  background:var(--green-950);
  color:var(--beige-100);
  position:sticky;
  top:0;
  align-self:flex-start;
  height:100vh;
  overflow-y:auto;
  padding:1.5rem 0 2.5rem;
  border-right:1px solid var(--green-line);
}
.sidebar-brand{padding:0 1.25rem 1.25rem;border-bottom:1px solid var(--green-line);margin-bottom:1rem;}
.sidebar-brand a{
  display:block;color:var(--beige-050);font-family:var(--font-display);font-size:1.2rem;line-height:1.3;
}
.sidebar-brand a:hover{color:var(--blue-400);text-decoration:none;}
.sidebar-brand small{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-400);margin-top:.35rem;}

.sidebar-nav{padding:0 .75rem;}
.nav-home{
  display:block;padding:.6rem .75rem;margin-bottom:.75rem;border-radius:var(--radius);
  color:var(--beige-100);font-weight:600;
}
.nav-home:hover{background:var(--green-800);text-decoration:none;color:var(--beige-050);}
.nav-home.active{background:var(--blue-600);color:#fff;}

details.nav-year{border-bottom:1px solid var(--green-line);}
details.nav-year:last-child{border-bottom:none;}
details.nav-year summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.7rem .75rem;border-radius:var(--radius);
  font-weight:600;color:var(--beige-100);
}
details.nav-year summary::-webkit-details-marker{display:none;}
details.nav-year summary:hover{background:var(--green-800);}
details.nav-year summary.active{color:var(--blue-400);}
details.nav-year summary .chev{
  font-size:.7rem;color:var(--blue-400);transition:transform .15s ease;flex:none;
}
details.nav-year[open] summary .chev{transform:rotate(90deg);}

.year-desc{
  font-size:.8rem;color:var(--beige-200);opacity:.8;
  padding:0 .75rem .5rem 1.1rem;margin:0;
}
.year-body a.year-link{
  display:block;padding:.4rem .75rem .4rem 1.1rem;font-size:.85rem;font-weight:600;
  color:var(--blue-400);
}
.year-body a.year-link:hover{text-decoration:none;color:var(--blue-100);}
.course-list-nav{list-style:none;margin:0 0 .5rem;padding:0;}
.course-list-nav li{margin:0;}
.course-list-nav a{
  display:block;padding:.4rem .75rem .4rem 1.1rem;font-size:.83rem;
  color:var(--beige-100);border-radius:var(--radius);
}
.course-list-nav a:hover{background:var(--green-800);text-decoration:none;color:var(--beige-050);}
.course-list-nav a.active{background:var(--blue-600);color:#fff;}
.course-list-nav a.is-done{color:#9bd6b4;}
.course-list-nav a .done-badge{color:#9bd6b4;margin-left:.3rem;}

/* Content column */
.content-col{flex:1;min-width:0;}
.wrap{max-width:820px;margin:0 auto;padding:2.5rem 1.75rem 5rem;}

.crumb{font-size:.8rem;color:var(--ink-soft);margin:0 0 1rem;}
.crumb a{color:var(--blue-600);}
.eyebrow{
  font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  font-size:.78rem;color:var(--blue-600);margin:0 0 .35rem;
}
.tagline{font-style:italic;color:var(--ink-soft);}
.lede{font-size:1.05rem;}
.meta{color:var(--ink-soft);}
.credits{color:var(--ink-soft);font-size:.88rem;}

.panel, .progress-row{
  background:var(--beige-100);border:1px solid var(--beige-line);border-radius:var(--radius);
}
.progress-row{
  padding:.6rem 1rem;font-family:var(--font-mono);font-size:.85rem;color:var(--green-800);
  display:inline-block;margin:1rem 0 1.5rem;
}

.year-list, .course-list{list-style:none;padding:0;margin:1.25rem 0;}
.year-list li, .course-list li{
  padding:1rem 1.1rem;margin-bottom:.9rem;background:var(--beige-100);
  border:1px solid var(--beige-line);border-left:4px solid var(--green-700);border-radius:var(--radius);
}
.year-list li strong, .course-list li strong{color:var(--green-900);}

label.week-check{
  display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--green-800);
  margin:.75rem 0 1.5rem;cursor:pointer;
}
label.week-check input{width:1.05rem;height:1.05rem;accent-color:var(--blue-500);}

details.answer-key{
  background:var(--blue-100);border:1px solid var(--blue-400);border-radius:var(--radius);
  padding:.75rem 1rem;margin:.5rem 0 1.25rem;
}
details.answer-key summary{cursor:pointer;color:var(--blue-600);font-weight:600;}
details.answer-key summary::-webkit-details-marker{color:var(--blue-500);}
details.answer-key[open] summary{margin-bottom:.5rem;}

footer.sitefoot{
  margin-top:3rem;padding:1.25rem 1.75rem 2.5rem;max-width:820px;margin-left:auto;margin-right:auto;
  border-top:1px solid var(--beige-line);color:var(--ink-soft);font-size:.85rem;
}

/* -----------------------------------------------------------------------
   Responsive: sidebar becomes an off-canvas drawer under 900px.
------------------------------------------------------------------------ */
@media (max-width:900px){
  .topbar{display:flex;}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:50;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:2px 0 18px rgba(0,0,0,.35);
  }
  .sidebar.is-open{transform:translateX(0);}
  .sidebar-overlay{
    display:none;position:fixed;inset:0;background:rgba(18,32,25,.55);z-index:40;
  }
  .sidebar-overlay.is-open{display:block;}
  .wrap{padding:1.75rem 1.25rem 4rem;}
}