/* Version 117 — coordinated color enhancement pass.
   Preserves approved layouts while carrying burgundy, cream, antique gold,
   and restrained rose-gold accents across desktop, tablet, and mobile. */

:root {
  --rose-gold: #c9897b;
  --rose-gold-soft: rgb(201 137 123 / 34%);
  --cream-wash: rgb(248 240 227 / 9%);
}

/* HOME — burgundy hero punctuation and layered approach cards */
.hero-content {
  position: relative;
}

.hero-content::before,
.hero-content::after {
  position: absolute;
  top: 20%;
  width: 2px;
  height: 60%;
  background: linear-gradient(180deg, transparent, var(--cranberry-vivid) 18% 44%, var(--rose-gold) 44% 58%, var(--gold-light) 58% 82%, transparent);
  content: "";
  opacity: .8;
  pointer-events: none;
}

.hero-content::before { left: clamp(-34px, -3vw, -18px); }
.hero-content::after { right: clamp(-34px, -3vw, -18px); }

.hero .ornament i { color: var(--cranberry-vivid); }
.hero .ornament span {
  background: linear-gradient(90deg, transparent, var(--rose-gold), var(--gold-light));
}
.hero .ornament span:last-child {
  background: linear-gradient(90deg, var(--gold-light), var(--rose-gold), transparent);
}

.approach-card {
  border-top: 3px solid var(--cranberry-vivid);
  border-bottom: 2px solid var(--rose-gold);
  background:
    radial-gradient(circle at 88% 10%, rgb(201 137 123 / 16%), transparent 30%),
    linear-gradient(145deg, rgb(255 250 241 / 97%), rgb(242 228 220 / 94%));
  box-shadow: 0 18px 38px rgb(0 23 20 / 20%), inset 0 0 0 1px rgb(197 154 52 / 33%);
}

.approach-card.featured {
  border-top-color: var(--gold-light);
  border-bottom-color: var(--cranberry-vivid);
  background:
    radial-gradient(circle at 12% 12%, rgb(226 195 110 / 13%), transparent 32%),
    linear-gradient(145deg, #7e123d, #a3194d 64%, #691033);
  box-shadow: 0 18px 40px rgb(60 5 29 / 27%), inset 0 0 0 1px rgb(226 195 110 / 42%);
}

.approach-card .card-number {
  border-color: var(--rose-gold);
  box-shadow: 0 0 0 3px rgb(201 137 123 / 10%);
}

/* ABOUT — a soft cream story panel with burgundy-and-gold edges */
.about-copy {
  position: relative;
  padding: clamp(7px, 1vh, 12px) clamp(16px, 1.5vw, 22px);
  border-top: 1px solid rgb(226 195 110 / 68%);
  border-right: 1px solid rgb(226 195 110 / 45%);
  border-bottom: 1px solid rgb(201 137 123 / 68%);
  border-left: 4px solid var(--cranberry-vivid);
  border-radius: 3px 18px 3px 18px;
  background:
    radial-gradient(circle at 100% 0, rgb(226 195 110 / 11%), transparent 33%),
    linear-gradient(145deg, rgb(248 240 227 / 13%), rgb(242 228 220 / 7%));
  box-shadow: inset 7px 0 0 rgb(201 137 123 / 8%), 0 18px 38px rgb(0 22 19 / 13%);
}

.about-copy::after {
  position: absolute;
  right: 18px;
  bottom: -5px;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose-gold), var(--gold-light));
  content: "";
}

.about-logo-emblem { opacity: .76; }

/* SERVICES — stronger separation and restrained jewel-tone card detailing */
.services-feature-panel::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-top: 1px solid rgb(226 195 110 / 64%);
  border-right: 1px solid rgb(201 137 123 / 48%);
  border-bottom: 1px solid rgb(226 195 110 / 38%);
  border-left: 4px solid rgb(163 25 77 / 88%);
  border-radius: 4px 22px 4px 22px;
  background:
    radial-gradient(circle at 12% 8%, rgb(201 137 123 / 13%), transparent 30%),
    linear-gradient(145deg, rgb(248 240 227 / 12%), rgb(248 240 227 / 4%));
  box-shadow: inset 8px 0 0 rgb(201 137 123 / 7%);
  content: "";
  pointer-events: none;
}

.services-shell .service-card,
.services-shell .service-card:nth-child(n) {
  border-top: 3px solid var(--cranberry-vivid);
  border-right-color: rgb(197 154 52 / 76%);
  border-bottom: 2px solid var(--rose-gold);
  border-left-color: rgb(197 154 52 / 76%);
  background:
    radial-gradient(circle at 94% 5%, rgb(201 137 123 / 15%), transparent 28%),
    linear-gradient(145deg, #f7ecd9 0%, #ead8ba 58%, #dfc8a4 100%);
  box-shadow: 0 15px 30px rgb(0 25 22 / 24%), inset 0 0 0 1px rgb(255 255 255 / 42%);
}

.services-shell .service-card:nth-child(even) {
  border-top-color: var(--gold);
  border-bottom-color: var(--cranberry-vivid);
}

.services-shell .service-icon {
  color: var(--cranberry-vivid);
  filter: drop-shadow(0 1px 0 rgb(201 137 123 / 36%));
}

.services-shell .service-card h2::after {
  background: linear-gradient(90deg, transparent, var(--cranberry-vivid) 12%, var(--rose-gold) 34%, var(--gold) 50% 80%, transparent);
}

.services-overview-divider {
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--cranberry-vivid) 10% 31%, var(--rose-gold) 31% 46%, var(--gold-light) 46% 66%, var(--cranberry-vivid) 66% 90%, transparent);
}

/* PROGRAMS — richer tabs and an intentionally branded interest form */
.program-tab {
  border-top-color: rgb(226 195 110 / 72%);
  border-right-color: rgb(201 137 123 / 62%);
  border-bottom-color: rgb(163 25 77 / 72%);
  background:
    radial-gradient(circle at 88% 8%, rgb(201 137 123 / 12%), transparent 34%),
    rgb(4 48 43 / 84%);
}

.program-tab:nth-child(1) { border-left-color: var(--cream); }
.program-tab:nth-child(2) { border-left-color: var(--gold-light); }
.program-tab:nth-child(3) { border-left-color: var(--rose-gold); }

.program-tab.is-active {
  border-color: var(--gold-light);
  border-left-color: var(--cranberry-vivid);
  color: var(--cream);
  background: linear-gradient(145deg, #771238, var(--cranberry-vivid) 64%, #6b1033);
  box-shadow: inset 0 0 0 2px rgb(226 195 110 / 22%), 0 13px 28px rgb(67 6 31 / 24%);
}

.program-interest-form {
  position: relative;
  border-top: 3px solid var(--cranberry-vivid);
  border-right: 2px solid var(--rose-gold);
  border-bottom: 3px solid var(--gold-light);
  border-left: 3px solid var(--cranberry-vivid);
  background:
    radial-gradient(circle at 100% 0, rgb(201 137 123 / 19%), transparent 33%),
    linear-gradient(145deg, #fffaf1, #f2e4dc 62%, #ead8ba);
  box-shadow: 0 22px 44px rgb(0 22 19 / 26%), inset 0 0 0 5px rgb(197 154 52 / 9%);
}

.program-interest-form .form-column:first-child {
  border-left: 2px solid rgb(163 25 77 / 42%);
  padding-left: clamp(10px, 1vw, 16px);
}

.program-interest-form .form-column:last-child {
  border-right: 2px solid rgb(201 137 123 / 52%);
  padding-right: clamp(10px, 1vw, 16px);
}

.program-interest-form input:focus,
.program-interest-form select:focus,
.program-interest-form textarea:focus {
  border-color: var(--cranberry-vivid);
  outline: 2px solid rgb(201 137 123 / 25%);
}

.program-interest-form button {
  border-color: var(--gold-light);
  color: var(--cream);
  background: linear-gradient(145deg, var(--cranberry-vivid), #741137);
}

/* EVENTS — carry the door palette into every event-card family */
.support-events .schedule-card,
.workshop-events .schedule-card {
  border-top: 4px solid var(--cranberry-vivid);
  border-right-color: rgb(201 137 123 / 70%);
  border-bottom: 3px solid var(--gold-light);
  box-shadow: 0 20px 38px rgb(0 20 17 / 24%), inset 0 5px 0 rgb(201 137 123 / 9%);
}

.support-events .schedule-card:nth-child(even),
.workshop-events .schedule-card:nth-child(even) {
  border-top-color: var(--gold-light);
  border-bottom-color: var(--cranberry-vivid);
}

.schedule-number {
  display: inline-grid;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cranberry-vivid);
  border-radius: 50%;
  place-items: center;
  color: var(--cranberry-vivid);
  background: rgb(255 250 241 / 68%);
  box-shadow: 0 0 0 3px rgb(201 137 123 / 13%);
  letter-spacing: .08em;
}

.schedule-card h3::after,
.dora-event-card h3::after {
  height: 2px;
  background: linear-gradient(90deg, var(--cranberry-vivid), var(--rose-gold) 42%, var(--gold-light), transparent);
}

.event-schedule-grid::before,
.dora-event-grid::before {
  height: 2px;
  background: var(--cranberry-vivid);
  box-shadow: 0 5px 0 var(--cream), 0 10px 0 var(--gold-light), 0 15px 0 var(--rose-gold);
}

.dora-event-card {
  border-top: 4px solid var(--cranberry-vivid);
  border-right-color: var(--rose-gold);
  border-bottom: 3px solid var(--gold-light);
  background: linear-gradient(145deg, #fff8e9, #f2e4dc 52%, #ead8ba);
}

.dora-event-card:nth-child(2) { border-top-color: var(--gold-light); border-bottom-color: var(--cranberry-vivid); }
.dora-event-card:nth-child(3) { border-top-color: var(--rose-gold); border-bottom-color: var(--cranberry-vivid); }

.dora-event-type { color: var(--cranberry-vivid); }

/* BIBLE STUDY TALK SHOW — cream wash, burgundy frame, and richer image corners */
.bible-show-copy {
  border-top: 2px solid var(--gold-light);
  border-right: 1px solid rgb(201 137 123 / 70%);
  border-bottom: 2px solid var(--rose-gold);
  border-left: 4px solid var(--cranberry-vivid);
  border-radius: 3px 18px 3px 18px;
  background:
    radial-gradient(circle at 100% 0, rgb(201 137 123 / 12%), transparent 31%),
    linear-gradient(145deg, rgb(248 240 227 / 13%), rgb(248 240 227 / 5%));
  box-shadow: inset 8px 0 0 rgb(201 137 123 / 7%), 0 18px 38px rgb(0 20 17 / 15%);
}

.bible-show-copy::before {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold-light);
  background: var(--cranberry-vivid);
  content: "";
  opacity: .86;
  transform: rotate(45deg);
}

.bible-show-visual {
  border: 2px solid var(--gold-light);
  box-shadow: 0 24px 44px rgb(0 18 15 / 32%), 0 0 0 5px rgb(163 25 77 / 22%), 0 0 0 7px rgb(201 137 123 / 18%);
}

.bible-youtube-button {
  border: 1px solid var(--gold-light);
  background: linear-gradient(145deg, var(--cranberry-vivid), #721136);
  box-shadow: 0 9px 22px rgb(75 7 34 / 28%);
}

.bible-show-heading h1::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cranberry-vivid) 12% 28%, var(--rose-gold) 28% 43%, var(--gold-light) 43% 76%, var(--cranberry-vivid) 76% 88%, transparent);
}

.bible-show-signoff::before,
.bible-show-signoff::after {
  background: linear-gradient(90deg, var(--cranberry-vivid), var(--rose-gold), var(--gold-light));
}

/* Keep the same color story visible on tablet and mobile. */
@media (max-width: 900px) {
  .hero-content::before,
  .hero-content::after {
    top: 24%;
    height: 50%;
  }

  .about-copy {
    padding: 14px 16px;
    border-left-width: 3px;
  }

  .services-feature-panel::before {
    border-left-width: 3px;
  }

  .program-interest-form .form-column:first-child,
  .program-interest-form .form-column:last-child {
    padding-inline: 10px;
  }

  .event-schedule-grid::before,
  .dora-event-grid::before { display: none; }
}

@media (max-width: 700px) {
  .hero-content::before { left: -13px; }
  .hero-content::after { right: -13px; }

  .approach-card {
    border-top-width: 3px;
    border-bottom-width: 2px;
  }

  .about-copy {
    background:
      radial-gradient(circle at 100% 0, rgb(226 195 110 / 14%), transparent 34%),
      linear-gradient(145deg, rgb(248 240 227 / 15%), rgb(242 228 220 / 8%));
  }

  .services-feature-panel::before {
    background:
      radial-gradient(circle at 10% 8%, rgb(201 137 123 / 14%), transparent 30%),
      linear-gradient(145deg, rgb(248 240 227 / 14%), rgb(248 240 227 / 5%));
  }

  .services-shell .service-card,
  .services-shell .service-card:nth-child(n) {
    border-top-width: 3px;
    border-bottom-width: 2px;
  }

  .program-interest-form {
    border-width: 3px 2px;
  }

  .program-interest-form .form-column:first-child,
  .program-interest-form .form-column:last-child {
    border-right: 0;
    border-left: 2px solid rgb(163 25 77 / 34%);
    padding-right: 0;
    padding-left: 10px;
  }

  .schedule-card,
  .dora-event-card {
    box-shadow: 0 15px 30px rgb(0 20 17 / 24%), inset 0 4px 0 rgb(201 137 123 / 9%);
  }

  .bible-show-copy {
    border-left-width: 3px;
    background:
      radial-gradient(circle at 100% 0, rgb(201 137 123 / 14%), transparent 34%),
      linear-gradient(145deg, rgb(248 240 227 / 15%), rgb(248 240 227 / 6%));
  }
}

