/* =============================================================================
   LEMLICH AWARDS — PROGRAM PAGE
   Styles for template-lemlich-program.php
   Version: 1.0.0
   ============================================================================= */

/* Inherits lemlich.css banner styles. This file covers everything below the banner. */

/* Divi body background reset */
body.page-template-template-lemlich-program {
  background-color: #fff !important;
}

/* Reset Divi's default p and h padding within the program page */
#lp-page p,
#lp-page h1,
#lp-page h2,
#lp-page h3,
#lp-page h4,
.lp-modal p,
.lp-modal h1,
.lp-modal h2,
.lp-modal h3,
.lp-modal h4 {
  padding-bottom: 0;
}



:root {
  --lp-black:        #222222;
  --lp-orange:       #ff6600;
  --lp-green-dark:   #22594c;
  --lp-green-mid:    #43927f;
  --lp-green-light:  #dcf3ed;
  --lp-gold:         #ffcc66;
  --lp-gold-mid:     #fdb020;
  --lp-gray-rule:    #aaaaaa;
  --lp-gray-light:   #f4f4f0;
  --lp-text:         #252525;

  /* Fonts from Figma */
  --font-cinzel:       'Cinzel', serif;
  --font-cinzel-deco:  'Cinzel Decorative', serif;
  --font-josefin:      'Josefin Sans', sans-serif;
  --font-alegreya:     'Alegreya', serif;
}

#lp-page {
  font-family: var(--font-alegreya);
  color: var(--lp-text);
}

/* =============================================================================
   Google Fonts — loaded via enqueue in lemlich-functions.php
   Cinzel, Cinzel Decorative, Josefin Sans, Alegreya
   ============================================================================= */

/* =============================================================================
   Program Wrap & Card
   ============================================================================= */

.lp-program-wrap {
  display: flex;
  justify-content: center;
  padding: 64px 24px;
  background: #fff;
}

.lp-program-card {
  width: 100%;
  max-width: 928px;
  background: var(--lp-gray-light);
  border-radius: 16px;
  box-shadow: 0 0 8px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.25);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}


.lp-event-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 64px 0 48px;
}

.lp-event-ordinal {
  font-family: var(--font-cinzel);
  font-size: 32px;
  line-height: 1.2;
  color: var(--lp-black);
  margin: 0 0 4px;
}

.lp-event-title {
  font-family: var(--font-cinzel-deco);
  font-size: 56px;
  line-height: 1.1;
  color: var(--lp-black);
  margin: 0 0 12px;
  font-weight: normal;
}

.lp-event-details,
.lp-event-venue {
  font-family: var(--font-cinzel);
  font-size: 24px;
  line-height: 1.4;
  color: var(--lp-black);
  margin: 0;
}

.lp-event-details { margin-bottom: 16px; }
.lp-event-venue   { margin-bottom: 32px; }

.lp-support-btn {
  display: inline-block;
  background: linear-gradient(to top, #222, #555);
  color: #fff;
  font-family: var(--font-josefin);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 14px 10px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 0 6px rgba(0,0,0,0.5);
  text-shadow: 0 1px 0 rgba(0,0,0,0.75), 0 -1px 0 rgba(255,255,255,0.25);
  transition: opacity 0.15s;
}
.lp-support-btn:hover { opacity: 0.85; }

/* =============================================================================
   Program Inset
   ============================================================================= */

.lp-program-inset {
  width: 100%;
  padding: 0 64px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Section rule label */
.lp-section-rule {
  width: 100%;
  border-top: 1px solid var(--lp-gray-rule);
  border-bottom: 1px solid var(--lp-gray-rule);
  padding: 16px 0;
  text-align: center;
}
.lp-section-rule span {
  font-family: var(--font-josefin);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--lp-orange);
}

/* =============================================================================
   Program List
   ============================================================================= */

.lp-program-list {
  list-style: none;
  margin: 0;
  padding: 32px 0 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.lp-program-item {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Horizontal rule between items */
.lp-program-item + .lp-program-item::before {
  content: '';
  display: block;
  width: 300px;
  height: 1px;
  background: var(--lp-gray-rule);
  margin-bottom: 32px;
}

.lp-role {
  font-family: var(--font-cinzel);
  font-size: 20px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--lp-black);
  display: block;
  margin-bottom: 4px;
}

.lp-names {
  font-family: var(--font-josefin);
  font-size: 20px;
  line-height: 1.6;
  color: var(--lp-black);
  display: block;
}

/* Honoree name is larger */
.lp-program-item--honoree .lp-names {
  font-size: 32px;
  line-height: 1.4;
  margin-bottom: 2px;
}

.lp-detail {
  font-family: var(--font-josefin);
  font-size: 20px;
  line-height: 1.6;
  color: var(--lp-black);
  display: block;
}

/* "Read her Bio" link style */
.lp-read-bio {
  color: var(--lp-orange);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* Introducer line */
.lp-introducer {
  font-size: 20px;
}

/* =============================================================================
   Popup and honoree trigger buttons — inline, look like links
   ============================================================================= */

.lp-popup-trigger,
.lp-honoree-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline;
}
.lp-honoree-trigger {
  text-decoration: none;
}
.lp-popup-trigger:hover,
.lp-honoree-trigger:hover {
  color: var(--lp-orange);
}

.lp-read-bio.lp-honoree-trigger {
  color: var(--lp-orange);
  text-decoration: underline;
}

/* Poem anchor link */
.lp-poem-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lp-poem-link:hover { color: var(--lp-orange); }

.lp-program-rule {
  width: 300px;
  height: 1px;
  background: var(--lp-gray-rule);
  margin: 0 auto;
}

.lp-additional-thanks {
  width: 100%;
  text-align: center;
  padding: 32px 0;
}
.lp-additional-thanks .lp-popup-trigger {
  font-family: var(--font-josefin);
  font-size: 20px;
  font-weight: 500;
  color: var(--lp-black);
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: 0;
  text-transform: none;
}

/* =============================================================================
   Browse Past Honorees
   ============================================================================= */

.lp-browse-honorees {
  width: 100%;
  border-top: 1px solid var(--lp-gray-rule);
  border-bottom: 1px solid var(--lp-gray-rule);
  padding: 16px 0;
  text-align: center;
}
.lp-browse-honorees a {
  font-family: var(--font-josefin);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--lp-orange);
  text-decoration: none;
}
.lp-browse-honorees a:hover {
  text-decoration: underline;
}

/* =============================================================================
   Presented With
   ============================================================================= */

.lp-presented-with {
  padding: 32px 0 0;
  text-align: center;
  font-family: var(--font-cinzel-deco);
  font-size: 14px;
  line-height: 1.4;
  color: var(--lp-black);
}
.lp-presented-with p { margin: 0; }
.lp-presented-with strong { font-weight: 700; }

/* =============================================================================
   Marge Piercy Quote
   ============================================================================= */

.lp-piercy {
  background: var(--lp-green-light);
  padding: 64px 72px;
  display: flex;
  justify-content: center;
}

.lp-piercy-quote {
  font-family: var(--font-alegreya);
  font-size: 28px;
  line-height: 1.6;
  color: var(--lp-black);
  max-width: 560px;
  margin: 0;
  border: none;
  padding: 0;
}
.lp-piercy-quote p { margin: 0; }
.lp-piercy-quote footer {
  margin-top: 24px;
  font-size: 28px;
  text-align: right;
  display: block;
}

/* =============================================================================
   Ada Limón Poem
   ============================================================================= */

.lp-poem {
  background: var(--lp-green-dark);
  padding: 128px calc((100% - 612px) / 2);
}

.lp-poem-inner {
  max-width: 612px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.lp-poem-title {
  font-family: var(--font-josefin);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 2px 2px rgba(0,0,0,0.35);
  margin: 0;
}

.lp-poem-body {
  font-family: var(--font-alegreya);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.8;
  color: #fff;
  text-shadow: 0 2px 2px rgba(0,0,0,0.35);
}
.lp-poem-body p { margin: 0; }

.lp-poem-attr {
  font-family: var(--font-alegreya);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 2px 2px rgba(0,0,0,0.35);
  text-align: right;
  margin: 0;
}

/* =============================================================================
   Clara Lemlich History Section
   Uses existing lemlich-clara-* classes from lemlich.css.
   Only override needed: heading text ("The Clara Lemlich Awards" vs "Who Was Clara Lemlich?")
   ============================================================================= */

/* Override heading on the program page */
#lp-page .lp-clara-headline {
  font-size: 42px;
}

/* Reduce bottom padding between Clara section and donate */
#lp-page .lemlich-clara {
  padding-bottom: 56px;
}

/* =============================================================================
   Donate Section
   ============================================================================= */

.lp-donate {
  display: flex;
  justify-content: center;
  padding: 128px 24px;
  background: #fff;
}

.lp-donate-inner {
  max-width: 928px;
  width: 100%;
  background: var(--lp-gold);
  border-radius: 16px;
  padding: 64px 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-donate-heading {
  font-family: var(--font-josefin);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lp-black);
  text-align: center;
  margin: 0;
}

.lp-donate-body {
  font-family: var(--font-alegreya);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--lp-black);
  margin: 0;
}

.lp-donate-rule {
  border: none;
  border-top: 2px solid var(--lp-gold-mid);
  margin: 8px 0;
}

.lp-donate-options {
  display: flex;
  gap: 40px;
  padding: 16px 0;
}

.lp-donate-card,
.lp-donate-mail {
  flex: 1;
  font-family: var(--font-alegreya);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lp-black);
}

.lp-donate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.lp-paypal-form {
  margin: 0;
  padding: 0;
}

.lp-donate-label { margin: 0; text-align: center; }

.lp-donate-btn {
  display: inline-block;
  background: #fff;
  color: #003087;
  font-family: var(--font-josefin);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  padding: 12px 24px 10px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--lp-gold-mid);
  box-shadow: 0 2px 2px rgba(0,0,0,0.25), 0 0 6px rgba(0,0,0,0.35);
  cursor: pointer;
}
.lp-donate-btn:hover { background: #003087; color: #fff; }

.lp-donate-mail p    { margin: 0 0 16px; }
.lp-donate-mail address {
  font-style: normal;
  line-height: 1.4;
}

.lp-donate-contact {
  font-family: var(--font-alegreya);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lp-black);
  text-align: center;
  margin: 0;
}
.lp-donate-contact a {
  color: var(--lp-black);
  text-decoration: underline;
}

/* =============================================================================
   Honoree Modal
   ============================================================================= */

.lp-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-modal[hidden] { display: none; }

.lp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  cursor: pointer;
}

.lp-modal-box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 900px;
  width: calc(100% - 48px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 48px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  z-index: 1;
}

.lp-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  color: var(--lp-orange);
  padding: 4px 8px;
}
.lp-modal-close:hover { opacity: 0.7; }

.lp-modal-content {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.lp-modal-media {
  flex-shrink: 0;
  width: 203px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lp-modal-photo {
  width: 203px;
  height: 230px;
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
  display: block;
}

.lp-modal-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.lp-modal-prev,
.lp-modal-next {
  background: none;
  border: none;
  font-family: var(--font-josefin);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--lp-orange);
  padding: 0;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.lp-modal-prev:hover,
.lp-modal-next:hover { opacity: 0.7; }
.lp-modal-prev:disabled,
.lp-modal-next:disabled { opacity: 0.3; cursor: default; }
.lp-modal-nav-sep {
  font-family: var(--font-josefin);
  font-weight: 300;
  color: var(--lp-orange);
  font-size: 16px;
}

.lp-modal-text {
  flex: 1;
  min-width: 0;
}

.lp-modal-year-label {
  font-family: var(--font-josefin);
  font-size: 27px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--lp-orange) !important;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0;
}

.lp-modal-name {
  font-family: var(--font-alegreya);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--lp-black) !important;
  margin: 0 0 8px;
}

.lp-modal-honoree-title {
  font-family: var(--font-josefin);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--lp-orange) !important;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0 0 24px;
}

.lp-modal-bio {
  font-family: var(--font-alegreya);
  font-size: 20px;
  line-height: 1.6;
  color: var(--lp-text);
}
.lp-modal-bio p { margin: 0 0 1em; }
.lp-modal-bio p:last-child { margin-bottom: 0; }

/* =============================================================================
   Participant Popup
   ============================================================================= */

.lp-popup {
  position: fixed;
  z-index: 8000;
  background: #1a1a1a;
  color: #f0f0f0;
  border-radius: 8px;
  padding: 20px 24px 20px 20px;
  max-width: 400px;
  width: calc(100vw - 48px);
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
  font-family: var(--font-alegreya);
  font-size: 16px;
  line-height: 1.6;
}
.lp-popup[hidden] { display: none; }

.lp-popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--lp-orange);
  font-size: 40px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.lp-popup-close:hover { opacity: 0.7; }

.lp-popup-body {
  padding-top: 24px;
}

.lp-popup-body p { margin: 0 0 0.75em; }
.lp-popup-body p:last-child { margin-bottom: 0; }

.lp-popup-link {
  display: block;
  margin-top: 10px;
  color: var(--lp-gold);
  font-family: var(--font-josefin);
  font-size: 13px;
  text-decoration: underline;
}
.lp-popup-link[hidden] { display: none; }

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

@media (max-width: 960px) {
  .lp-program-inset { padding: 16px 32px 64px; }
  .lp-piercy { padding: 48px 32px; }
  .lp-clara-portrait {
    float: none;
    display: block;
    margin: 0 auto 32px;
    width: 200px;
    height: 200px;
  }
  .lp-donate-inner { padding: 48px 32px; }
  .lp-donate-options { flex-direction: column; gap: 32px; }
  .lp-donate-mail { text-align: center; }
  .lp-donate-mail address {
    display: inline-block;
    text-align: left;
    max-width: 260px;
  }
}

@media (max-width: 768px) {
  .lp-donate { padding: 64px 24px; }
  .lp-modal-box { padding: 40px 32px; }
  .lp-modal-media { width: 140px; }
  .lp-modal-photo { width: 140px; height: 160px; }
  .lp-modal-prev .lp-prev-arrow,
  .lp-modal-next .lp-next-arrow { display: none; }
}

@media (max-width: 680px) {
  .lp-poem { padding: 80px 48px; }
  .lp-poem-inner { max-width: 100%; }
  .lp-poem-title { font-size: 32px; }
  .lp-poem-body  { font-size: 24px; }
  .lp-poem-attr  { font-size: 24px; }
}

@media (max-width: 600px) {
  .lp-event-title   { font-size: 36px; }
  .lp-event-ordinal { font-size: 22px; }
  .lp-event-details,
  .lp-event-venue   { font-size: 18px; }
  .lp-program-inset { padding: 16px 20px 64px; }

  .lp-poem-title { font-size: 28px; }
  .lp-poem-body  { font-size: 22px; }
  .lp-poem-attr  { font-size: 22px; }

  .lp-piercy { padding: 48px 24px; }
  .lp-piercy-quote { font-size: 22px; }
  .lp-poem { padding: 64px 24px; }
  .lp-donate-inner { padding: 40px 24px; }

  /* Full-screen modal on mobile */
  .lp-modal-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 56px 24px 32px;
    overflow-y: auto;
  }
  /* Also lock body scroll when modal is open — handled in JS */
  .lp-modal-content { flex-direction: column; }
  .lp-modal-media {
    width: 260px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .lp-modal-photo {
    width: 260px;
    height: 295px;
    flex-shrink: 0;
  }
  .lp-modal-nav {
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .lp-modal-nav-sep { display: inline; }
  .lp-modal-text { width: 100%; }

  /* Mobile popup: full-screen takeover */
  .lp-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 56px 24px 32px;
    overflow-y: auto;
    font-size: 20px;
  }
}

@media (max-width: 540px) {
  .lp-poem-title { font-size: 24px; }
  .lp-poem-body  { font-size: 20px; }
  .lp-poem-attr  { font-size: 20px; }
}

@media (max-width: 480px) {
  .lp-poem { padding: 64px 24px; }
  .lp-poem-title { font-size: 20px; }
  .lp-poem-body  { font-size: 16px; line-height: 1.6; }
  .lp-poem-attr  { font-size: 16px; }
}