/* ============================================================
   PLDC — Professional & Leadership Development Center
   Shared stylesheet: marble, stone, and gold palette
   ============================================================ */

:root {
  --marble: #f4efdf;
  --marble-dark: #e3dcc4;
  --stone: #b9b09a;
  --stone-dark: #8d8570;
  --gold: #d4af37;
  --gold-bright: #f0c94a;
  --gold-deep: #a07d1c;
  --ink: #2b2a26;
  --sky-top: #fdf6e3;
  --sky-mid: #f6e3b8;
  --sky-warm: #eecf8f;
  --paper: #fffdf6;

  /* Program accents */
  --msu-accent: #1f3a5f;      /* navy */
  --pmology-accent: #6d1f2c;  /* burgundy */
  --fmology-accent: #245034;  /* hunter green */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

img { max-width: 100%; }

a { color: var(--gold-deep); }

.smallcaps {
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

/* ---------- Header ---------- */
.site-header {
  background: linear-gradient(#fffef9, #f7f1de);
  border-bottom: 3px double var(--gold);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
}

.site-header .brand img { height: 52px; width: auto; }

.site-header .brand .brand-name {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 1.15rem;
  line-height: 1.2;
}

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

.site-nav a {
  text-decoration: none;
  color: var(--ink);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 1.02rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

/* ---------- Hero (homepage) ---------- */
.hero {
  background: #ffffff;
  padding: 2.25rem 1rem 0;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--marble-dark);
}

.hero .tagline {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-style: italic;
  color: #6b5a2a;
  margin-bottom: 0.35rem;
}

.hero .subtag {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: #7a6d4a;
  margin-bottom: 1.5rem;
}

.building-wrap {
  max-width: 1050px;
  margin: 0 auto;
}

.building-wrap svg { display: block; width: 100%; height: auto; }

/* Doors inside the SVG */
.door-link { cursor: pointer; }

.door-link .door-glow { opacity: 0; transition: opacity 0.35s ease; }
.door-link:hover .door-glow,
.door-link:focus .door-glow { opacity: 1; }

.door-link .door-panel {
  transition: transform 0.45s ease;
  transform-box: fill-box;
}
.door-link:hover .door-panel,
.door-link:focus .door-panel {
  transform: perspective(600px) rotateY(-28deg);
  transform-origin: left center;
}

.door-link .door-sign { transition: filter 0.3s ease; }
.door-link:hover .door-sign,
.door-link:focus .door-sign { filter: brightness(1.18); }

.door-link:focus { outline: none; }

.door-link .door-frame { opacity: 0; transition: opacity 0.3s ease; }
.door-link:hover .door-frame,
.door-link:focus .door-frame,
.door-link.opening .door-frame { opacity: 1; }

.photo-hero { border-radius: 14px; box-shadow: 0 10px 28px rgba(40, 32, 10, 0.22); }

.door-link.opening .door-panel {
  transform: perspective(600px) rotateY(-70deg);
  transform-origin: left center;
}
.door-link.opening .door-glow { opacity: 1; }

/* ---------- Door cards below the hero ---------- */
.programs {
  max-width: 1050px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

.programs h2 {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 1.7rem;
  margin-bottom: 0.4rem;
}

.programs .lead {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 2rem;
  color: #55503f;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.program-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(#fffef9, #f6efdb);
  border: 1px solid var(--marble-dark);
  border-top: 6px solid var(--card-accent, var(--gold));
  border-radius: 10px;
  padding: 1.5rem 1.4rem 1.6rem;
  box-shadow: 0 3px 10px rgba(80, 65, 20, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.program-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 22px rgba(80, 65, 20, 0.18);
}

.program-card .door-icon {
  font-size: 1.9rem;
  margin-bottom: 0.5rem;
}

.program-card h3 {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 1.25rem;
  color: var(--card-accent, var(--ink));
  margin-bottom: 0.5rem;
}

.program-card p { font-size: 0.98rem; color: #4c4736; }

.program-card .enter {
  display: inline-block;
  margin-top: 0.9rem;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
}

.program-card:hover .enter { text-decoration: underline; }

.card-msu { --card-accent: var(--msu-accent); }
.card-pmology { --card-accent: var(--pmology-accent); }
.card-fmology { --card-accent: var(--fmology-accent); }

/* ---------- Program pages ---------- */
/* Program banners: real marble texture, true to the epoch of the building */
.program-hero {
  text-align: center;
  padding: 3rem 1.25rem 2.5rem;
  background: url('../assets/marble-slab.jpg') center / cover no-repeat;
  border-bottom: 4px double var(--gold);
}

.program-hero .kicker {
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--gold-deep);
  margin-bottom: 0.5rem;
}

.program-hero h1 {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  line-height: 1.15;
  margin-bottom: 0.65rem;
  /* brushed-gold mounted letters, like the PROVEN wall sign */
  background: linear-gradient(165deg, #ecd691 0%, #cfae55 30%, #a8862e 52%, #e8cf83 72%, #b3903a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(1px 2px 1.5px rgba(70, 58, 35, 0.5));
}

.program-hero .program-tagline {
  font-style: italic;
  font-size: clamp(1.05rem, 2.3vw, 1.3rem);
  color: #6e6249;
  max-width: 42rem;
  margin: 0 auto;
}

.page-msu { --page-accent: var(--msu-accent); --page-accent-dark: #12233b; }
.page-pmology { --page-accent: var(--pmology-accent); --page-accent-dark: #40121b; }

.program-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

.program-body h2 {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 1.5rem;
  color: var(--page-accent, var(--ink));
  margin: 2rem 0 0.75rem;
}

.program-body h2:first-child { margin-top: 0; }

.program-body p { margin-bottom: 1rem; }

.offerings {
  list-style: none;
  display: grid;
  gap: 0.9rem;
  margin: 1rem 0 0;
}

.offerings li {
  background: linear-gradient(#fffef9, #f7f1de);
  border: 1px solid var(--marble-dark);
  border-left: 5px solid var(--page-accent, var(--gold));
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
}

.offerings li strong {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 1.08rem;
  margin-bottom: 0.15rem;
}

/* ---------- MSU Lobby stairs ---------- */
.stairs {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}

.stair {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(#fffef9, #f6efdb);
  border: 1px solid var(--marble-dark);
  border-left: 6px solid var(--page-accent, var(--gold));
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  box-shadow: 0 3px 10px rgba(80, 65, 20, 0.10);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* each stair steps a little further "up and in" */
.stair:nth-child(2) { margin-left: 5%; }
.stair:nth-child(3) { margin-left: 10%; }
.stair:nth-child(4) { margin-left: 15%; }

a.stair:hover {
  transform: translate(4px, -4px);
  box-shadow: 0 10px 20px rgba(80, 65, 20, 0.18);
}

.stair .step-no {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(var(--gold-bright), var(--gold-deep));
  color: #241c05;
  font-weight: bold;
  font-size: 1.15rem;
  border: 1px solid var(--gold-deep);
}

.stair .stair-text { flex: 1; font-size: 0.98rem; color: #4c4736; }

.stair .stair-text strong {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 1.15rem;
  color: var(--page-accent, var(--ink));
  margin-bottom: 0.15rem;
}

.stair .stair-go {
  flex: none;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
}

.stair.coming { opacity: 0.6; }

@media (max-width: 640px) {
  .stair:nth-child(2), .stair:nth-child(3), .stair:nth-child(4) { margin-left: 0; }
}

.cta-block {
  margin-top: 2.5rem;
  text-align: center;
  background: linear-gradient(#fdf8e7, #f3e8c6);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 1.8rem 1.4rem;
}

.cta-block h2 { margin-top: 0; }

.cta-button {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.7rem 1.6rem;
  background: linear-gradient(var(--gold-bright), var(--gold-deep));
  color: #241c05;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--gold-deep);
  box-shadow: 0 3px 8px rgba(100, 78, 15, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(100, 78, 15, 0.45);
}

/* ---------- Footer ---------- */
.site-footer {
  background: #2e2a1e;
  color: #d8cfae;
  text-align: center;
  padding: 1.6rem 1.25rem;
  font-size: 0.95rem;
}

.site-footer a { color: var(--gold-bright); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer .foot-programs {
  margin-bottom: 0.5rem;
  font-variant: small-caps;
  letter-spacing: 0.08em;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .site-header { justify-content: center; text-align: center; }
  .site-nav { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .door-link .door-panel,
  .program-card,
  .cta-button { transition: none; }
}