/* ==========================================================================
   Sati Certificate Program — Dashboard
   Palette variables live here; adjust colors in one place.
   ========================================================================== */

:root {
  /* Palette drawn from the Sati Center certificate */
  --teal: #17332C;       /* deep forest green — link/icon/accent color */
  --header-bg: #1F4A40;  /* a shade lighter than --teal — header & footer */
  --sage: #71917C;       /* muted sage green — hero card */
  --sage-dim: #64826E;   /* sage, slightly deeper (hero card border/divider) */
  --olive: #A9A15C;      /* certificate border gold-olive */
  --gold: #C9A24B;       /* dharma-wheel gold, used sparingly */
  --cream: #FAF5E7;      /* certificate parchment */
  --navy: #2E4F49;       /* deep green-teal for headings (was navy) */
  --slate: #3E5550;      /* body text, green-grey */
  --white: #FFFFFF;
  --page-bg: #EFEFEC; /* light grey page background */
  --tile-bg: #EBE8DD;    /* a shade darker than white — button/tile surface */
  --tile-bg-top: #F6F4EB; /* lighter top of the tile's bevel gradient */
  --sage-tint: #E3EAD8;  /* a light, warm grey-yellow shade of the hero card's sage green */
  --border: rgba(46, 79, 73, 0.75); /* thin dark input border */
  --hairline: #E2DECC;              /* subtle card/footer borders */

  /* Announcement category tags */
  --tag-registration-bg: #CFE8E4;
  --support-bg: #DDE4E2;    /* a greyer shade of the registration tag color */
  --tag-registration-fg: #1F5750;
  --tag-schedule-bg: #DCEEDC;
  --tag-schedule-fg: #35633A;
  --tag-faculty-bg: #F5E0BE;
  --tag-faculty-fg: #7A5A22;

  /* Fonts follow the ICP faculty portal: an elegant display serif for
     headings, a readable old-style serif for body, nav, and buttons. */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif; /* body/nav/buttons */

  --max-width: 1100px;
}

/* ---- Reset / base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--slate);
  background: var(--page-bg);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container.narrow {
  max-width: 760px;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--navy);
}

a {
  color: var(--teal);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* ==========================================================================
   Password gate (see auth.js)
   ========================================================================== */

/* While locked, hide everything except the gate overlay. */
html.locked body > *:not(.gate) {
  visibility: hidden;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  padding: 1.5rem;
}

.gate-box {
  text-align: center;
  max-width: 380px;
  width: 100%;
}

.gate-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--navy);
}

.gate-name span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.gate-box h1 {
  font-size: 2rem;
  font-weight: 400;
  margin: 1.25rem 0 0.5rem;
}

.gate-note {
  margin-bottom: 1.5rem;
}

.gate-box input {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--navy);
  text-align: center;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
}

.gate-box input:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.gate-box .btn {
  width: 100%;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
}

.gate-error {
  color: #8C2F1B;
  font-size: 0.9375rem;
  margin-top: 1rem;
  min-height: 1.5em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Embed mode (?embed=1): hide the site chrome inside an iframe
   ========================================================================== */

html.embedded .site-header,
html.embedded .site-footer {
  display: none;
}

html.embedded .layout {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  background: var(--header-bg);
  padding: 1.25rem 0;
}

.site-header a:focus-visible {
  outline-color: var(--white);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  /* Wider than the page's 1100px content column, so logo and nav spread
     out instead of clustering, but capped well short of the viewport
     edge so it stays visually balanced against the body below. */
  max-width: 1400px;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

/* The mark sits on a cream tile so the figure never sits on teal */
.logo-mark {
  width: auto;
  height: 52px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #FFFDF7 0%, var(--cream) 100%);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 7px 12px;
  box-sizing: content-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(46, 79, 73, 0.1),
    0 1px 1px rgba(0, 0, 0, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.22);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--white);
}

.logo-sub {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.site-nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: 1.24rem; /* nav base (0.9375rem) +15%, then +15% again */
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--white);
  border-bottom-color: var(--cream);
}

/* ==========================================================================
   Sidebar layout (ICP-style: buttons stacked on the left, content right)
   ========================================================================== */

.layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

/* Quicklinks bar on the left, top-aligned with the hero image card */
.sidebar {
  position: sticky;
  top: 1.5rem;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.7125rem; /* 0.75rem, 5% tighter */
  margin-bottom: 1.75rem;
}

/* Positioned above the nav's flow so the first tile's top edge
   lines up with the hero card's top edge. */
.sidebar-label {
  position: absolute;
  top: -2rem;
  left: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.sidebar .btn {
  text-align: left;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  text-align: center;
}

/* ---- Hero card: sage green, text left, framed lotus photo right ---- */

.hero-card {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
  background: var(--sage);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(23, 51, 44, 0.35);
  text-align: left;
  padding: 3rem;
  margin-bottom: 1.75rem;
}

.hero-card-text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-card-photo {
  flex: 1 1 45%;
  min-height: 280px;
  border-radius: 16px;
  border: 3px solid var(--gold);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
  background: url("zoltan-tasi-yanhwFwyoaU-unsplash.jpg") 50% 60% / cover no-repeat;
}

.hero-card h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0;
  max-width: 16ch;
}

.hero-rule {
  display: block;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  margin: 1.5rem 0;
}

.hero-card .subtitle {
  color: var(--cream);
  font-size: 1.1875rem;
  max-width: 34ch;
  margin: 0;
}


.subtitle {
  font-size: 1.1875rem;
  max-width: 48ch;
  margin: 0 auto 0.5rem;
}

/* ---- Buttons: soft rounded tiles, ICP-portal style ---- */

.btn {
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, var(--tile-bg-top) 0%, var(--tile-bg) 100%);
  border: 1px solid rgba(46, 79, 73, 0.14);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),   /* top bevel highlight */
    inset 0 -1px 0 rgba(46, 79, 73, 0.08),    /* bottom bevel edge */
    0 1px 1px rgba(46, 79, 73, 0.1),          /* contact shadow */
    0 6px 12px rgba(46, 79, 73, 0.14);        /* ambient lift */
  color: var(--navy);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  padding: 0.8125rem 1.5rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(46, 79, 73, 0.08),
    0 2px 2px rgba(46, 79, 73, 0.1),
    0 10px 18px rgba(46, 79, 73, 0.2);
  transform: translateY(-2px);
}

.btn:active {
  box-shadow:
    inset 0 1px 2px rgba(46, 79, 73, 0.18),
    0 1px 1px rgba(46, 79, 73, 0.08);
  transform: translateY(0);
}

/* ==========================================================================
   Announcements
   ========================================================================== */

.announcements {
  padding: 0 0 2rem;
  text-align: left;
}

.announcements h2,
.support h2 {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 400;
  margin-bottom: 1.75rem;
}

.announcements h2 {
  font-style: italic;
}

.announcement-feed {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.announcement-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(46, 79, 73, 0.06), 0 3px 8px rgba(46, 79, 73, 0.06);
  padding: 1.5rem 1.75rem 1.5rem 2.25rem;
}

/* Rounded capsule accent, inset from the card edge, colored per category */
.announcement-card::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 5px;
  border-radius: 999px;
  background: var(--teal);
}

.announcement-card[data-category="schedule"]::before {
  background: var(--tag-schedule-fg);
}

.announcement-card[data-category="faculty"]::before {
  background: var(--tag-faculty-fg);
}

.announcement-date {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.625rem;
}

.announcement-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--tag-registration-fg);
  background: var(--tag-registration-bg);
  border-radius: 999px;
  padding: 0.1875rem 0.75rem;
}

.announcement-card[data-category="schedule"] .announcement-tag {
  color: var(--tag-schedule-fg);
  background: var(--tag-schedule-bg);
}

.announcement-card[data-category="faculty"] .announcement-tag {
  color: var(--tag-faculty-fg);
  background: var(--tag-faculty-bg);
}

.announcement-title {
  font-size: 1.375rem;
  margin-bottom: 0.5rem;
}

.announcement-body a {
  color: var(--teal);
}

/* ==========================================================================
   Support contacts
   ========================================================================== */

.support {
  padding: 1rem 0;
  text-align: left;
}

.support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  text-align: left;
}

.support-card {
  background: var(--support-bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 1.75rem 2rem;
}

.support-card h3 {
  font-size: 1.375rem;
  margin-bottom: 0.5rem;
}

.support-card p {
  margin-bottom: 0.75rem;
}

.support-card a {
  font-weight: 600;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Teal footer bookends the teal header */
.site-footer {
  background: var(--header-bg);
  text-align: center;
  padding: 2.5rem 0;
}

.footer-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.footer-copy {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   Simple content pages (Theravada Studies, Spiritual Care, Faculty, Library)
   ========================================================================== */

.page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4.5rem;
}

.back-link {
  display: inline-block;
  color: var(--teal);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

.back-link:hover {
  text-decoration: underline;
}

.page-content h1 {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 1.75rem;
}

.page-content .page-intro {
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.page-content h2 {
  font-size: 1.625rem;
  font-weight: 500;
  margin: 2.25rem 0 0.75rem;
}

.page-content p {
  margin-bottom: 1rem;
}

.page-content ul {
  margin: 0 0 1rem 1.25rem;
}

.page-content li {
  margin-bottom: 0.5rem;
}

.page-content a {
  color: var(--teal);
}

/* Note card used for pending-content placeholders */
.page-note {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
}

/* Simple external-link list, used on the Sati Library page */
.link-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.link-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--teal);
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
}

.link-card:hover {
  border-left-color: var(--gold);
}

.link-card h2 {
  margin: 0 0 0.375rem;
  color: var(--navy);
}

.link-card p {
  margin: 0;
  color: var(--slate);
}

/* Course schedule entries */
.course-item {
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  margin-top: 1.75rem;
}

.course-item:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.course-item h2 {
  margin-top: 0;
  font-size: 1.5rem;
}

.course-units {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--slate);
}

.course-meta {
  color: var(--teal);
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}

.course-item h3 {
  font-size: 1.0625rem;
  margin: 1.5rem 0 0.75rem;
}

.seminar-list {
  margin-left: 1.25rem;
}

.seminar-list li {
  margin-bottom: 1.25rem;
  line-height: 1.55;
}

/* Google Calendar embed */
.calendar-embed-wrap {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.calendar-embed {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
}

.calendar-subscribe {
  margin-bottom: 0;
}

.calendar-subscribe .btn {
  display: inline-flex;
  width: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  /* Sidebar stacks above the content as a single column */
  .layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sidebar {
    position: relative;
  }

  /* Stack text above the photo on narrow screens */
  .hero-card {
    flex-direction: column;
    text-align: center;
    padding: 2rem;
    gap: 1.75rem;
  }

  .hero-card-text {
    align-items: center;
  }

  .hero-card h1 {
    margin: 0 auto;
  }

  .hero-card-photo {
    min-height: 220px;
  }
}

@media (max-width: 720px) {
  .header-inner {
    flex-direction: column;
    text-align: center;
  }

  .site-nav {
    justify-content: center;
  }

  .support-grid {
    grid-template-columns: 1fr;
  }
}