/*
Theme Name: Digital Pastor
Theme URI: https://digital-pastor.ai
Author: Digital Pastor AI
Author URI: https://digital-pastor.ai
Description: Block theme for Digital-Pastor.ai - AI-powered church websites, guest engagement, and automations. Ported from the existing brand design system.
Version: 0.19.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digital-pastor
*/

/* Tokens not expressible in theme.json, mirrored from the source design system. */
:root {
  --dp-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dp-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dp-blue-glow: rgba(21, 94, 239, 0.15);
  --dp-blue-subtle: rgba(21, 94, 239, 0.06);
  --dp-gold-light: rgba(200, 149, 42, 0.08);
  --dp-radius-sm: 8px;
  --dp-radius-md: 12px;
  --dp-radius: 16px;
  --dp-radius-card: 20px;   /* feature, pricing, stat, resource cards */
  --warm-line: #DDD6C9;
}

/* Footer sits flush against the last section. */
.wp-site-blocks > footer { margin-block-start: 0; }

/* Equal-height card rows. */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}
.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: center;
}

/* Card surface treatment. */
.dp-card {
  border: 1px solid var(--wp--preset--color--edge);
  border-radius: var(--dp-radius-card);
  background: var(--wp--preset--color--base);
}

/* Interaction. */
.hover-lift { transition: transform 0.25s var(--dp-ease), box-shadow 0.25s var(--dp-ease); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lg); }
.hover-glow { transition: box-shadow 0.3s var(--dp-ease); }
.hover-glow:hover { box-shadow: 0 0 24px var(--dp-blue-glow); }

/* Scroll reveal. */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--dp-ease-out), transform 0.6s var(--dp-ease-out);
}
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Staggered entrance for hero children. */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  animation: dpFadeUp 0.6s var(--dp-ease-out) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.45s; }
@keyframes dpFadeUp { to { opacity: 1; transform: translateY(0); } }

/* Eyebrow. Gold, per the warm direction - but gold-ink, not brand gold:
   #C8952A is 2.54:1 on cream, far under AA for small uppercase text. */
.dp-eyebrow {
  display: block;
  color: var(--wp--preset--color--gold-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Proof bar under the hero. */
.dp-proof-bar {
  color: var(--wp--preset--color--text-light);
  font-size: 0.9375rem;
}

/* Visible focus for keyboard users - required for the accessibility pass. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--blue);
  outline-offset: 2px;
  border-radius: var(--dp-radius-sm);
}

/* Skip link. */
.dp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--navy);
  color: #fff;
  border-radius: 0 0 var(--dp-radius-sm) 0;
}
.dp-skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-on-scroll, .stagger-children > * { opacity: 1; transform: none; }
}

/* ---- Pricing tiers ---- */
.dp-tier { height: 100%; }

.dp-price {
  font-family: 'Sora', sans-serif;
  line-height: 1.1;
  margin: 0.5rem 0 0.75rem;
}
.dp-price-amount {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--heading);
}
.dp-price-period {
  font-size: 1rem;
  font-weight: 500;
  color: var(--wp--preset--color--text-light);
  margin-left: 0.25rem;
}

/* The target tier. Lifted and outlined so the eye lands here first. */
.dp-tier-featured {
  border: 2px solid var(--wp--preset--color--blue);
  box-shadow: var(--wp--preset--shadow--blue);
  position: relative;
}
@media (min-width: 782px) {
  .dp-tier-featured { transform: translateY(-12px); }
}

.dp-badge {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  background: var(--wp--preset--color--blue);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dp-tier-list {
  list-style: none;
  padding-left: 0;
  margin: 1.25rem 0;
}
.dp-tier-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  line-height: 1.5;
}
/* Decorative tick. aria-hidden equivalent: generated content is not announced. */
.dp-tier-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--wp--preset--color--green);
  border-bottom: 2px solid var(--wp--preset--color--green);
  transform: rotate(-45deg);
}

/* Full-width buy buttons - a wider target converts better and is easier to tap. */
.dp-btn-block { width: 100%; }
.dp-btn-block .wp-block-button__link {
  display: block;
  width: 100%;
  text-align: center;
}

/* ---- FAQ disclosure ---- */
.dp-faq {
  border-bottom: 1px solid var(--wp--preset--color--edge);
  padding: 1.15rem 0;
}
.dp-faq summary {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--heading);
  cursor: pointer;
  list-style: none;
  padding-right: 2rem;
  position: relative;
}
.dp-faq summary::-webkit-details-marker { display: none; }
.dp-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--blue);
}
.dp-faq[open] summary::after { content: "\2013"; }
.dp-faq p {
  margin-top: 0.85rem;
  color: var(--wp--preset--color--ink);
}

/* A word-length price ("Custom") at the numeric size dwarfs the real prices
   next to it and skews the visual weight of the row. */
.dp-price-word { font-size: 2rem; }

/* Numbered step cards. */
.dp-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0 0.75rem;
  border-radius: 999px;
  background: var(--dp-blue-subtle);
  color: var(--wp--preset--color--blue);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

/* ---- Comparison tables ---- */
/* Wide tables scroll inside their own container so the page never scrolls sideways. */
.dp-compare { overflow-x: auto; }
.dp-compare table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
}
.dp-compare th,
.dp-compare td {
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--wp--preset--color--edge);
  font-size: 0.9375rem;
}
.dp-compare thead th {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  color: var(--wp--preset--color--heading);
  border-bottom-width: 2px;
}
/* Our column carries a tint so the comparison reads at a glance. */
.dp-compare th:last-child,
.dp-compare td.dp-ours {
  background: var(--dp-blue-subtle);
  color: var(--wp--preset--color--heading);
  font-weight: 600;
}
.dp-compare tbody tr:last-child td { border-bottom: none; }
.dp-compare tbody tr:last-child { font-weight: 600; }

/* ---- ROI calculator ---- */
.dp-roi { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .dp-roi { grid-template-columns: 1fr 1fr; align-items: start; }
  .dp-roi-assumptions { grid-column: 1 / -1; }
}

.dp-roi-controls {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--edge);
  border-radius: var(--dp-radius-card);
}
.dp-roi-field { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; }
.dp-roi-field label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
}
.dp-roi-field output {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--wp--preset--color--blue);
  text-align: right;
}
.dp-roi-field input[type="range"] {
  grid-column: 1 / -1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--wp--preset--color--edge);
  cursor: pointer;
}
.dp-roi-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--wp--preset--color--blue);
  border: 3px solid #fff;
  box-shadow: var(--wp--preset--shadow--md);
}
.dp-roi-field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--wp--preset--color--blue);
  border: 3px solid #fff;
  box-shadow: var(--wp--preset--shadow--md);
}

.dp-roi-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.dp-roi-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.4rem;
  border-radius: var(--dp-radius-card);
  border: 1px solid var(--wp--preset--color--edge);
  background: var(--wp--preset--color--base);
}
.dp-roi-tile-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--ink);
}
.dp-roi-tile-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--wp--preset--color--heading);
}
.dp-roi-tile-note {
  font-size: 0.75rem;
  /* ink, not text-light: the tinted tile backgrounds push the muted tone
     below 4.5:1. */
  color: var(--wp--preset--color--ink);
}
.dp-roi-tile--warn  { background: var(--wp--preset--color--red-light); border-color: #FECACA; }
.dp-roi-tile--warn  .dp-roi-tile-value { color: var(--wp--preset--color--red); }
.dp-roi-tile--good  { background: var(--wp--preset--color--green-light); border-color: #A7F3D0; }
.dp-roi-tile--good  .dp-roi-tile-value { color: #047857; }
.dp-roi-tile--hero  { background: var(--wp--preset--color--blue); border-color: var(--wp--preset--color--blue); }
.dp-roi-tile--hero .dp-roi-tile-label,
.dp-roi-tile--hero .dp-roi-tile-value { color: #fff; }
.dp-roi-tile--hero .dp-roi-tile-note  { color: #EAF2FE; } /* #DBEAFE was 4.44:1 on blue */

.dp-roi-assumptions { margin-top: 0.5rem; }

/* ---- GHL embeds ---- */
/* The GHL script resizes these once it loads; the explicit height keeps the
   iframe from collapsing to zero before that happens. */
.dp-embed { width: 100%; border: none; border-radius: var(--dp-radius-sm); display: block; }

/* ---- Stat rows ---- */
.dp-stats > .wp-block-column { display: flex; }
.dp-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 1.5rem 1.25rem;
  border-radius: var(--dp-radius-card);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--edge);
  border-top: 3px solid var(--wp--preset--color--blue);
}
.dp-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--blue);
  margin: 0;
}
.dp-stat-label {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--wp--preset--color--ink);
  margin: 0;
}
/* Attribution sits with the figure, so no stat travels without its source. */
.dp-stat-source {
  margin: auto 0 0;
  padding-top: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-light);
}

.dp-sources {
  color: var(--wp--preset--color--ink);
  line-height: 1.7;
  font-size: 0.8125rem;
}

/* ---- Photography slots ---- */
/* Deliberately reads as unfinished. A slot that looks like a design choice
   never gets filled; one that looks like a gap does. */
.dp-photo-slot {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 1.5rem;
  border-radius: var(--dp-radius-card);
  background: var(--wp--preset--color--sand);
  border: 1px dashed var(--warm-line);
}
.dp-photo-slot-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold-ink);
}
.dp-photo-slot-brief {
  margin: 0;
  max-width: 42ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
}

/* ---- Photographic hero and closing band ---- */
/* The hero photograph is 2:1. A fixed 720px box goes taller than that as the
   viewport narrows, so the image gets scaled up and cropped hard at the sides.
   Tracking the viewport keeps the box near the image aspect until it has to
   give way on phones. */
.dp-hero { min-height: clamp(460px, 52vw, 720px); }
@media (max-width: 781px) { .dp-hero { min-height: 560px; } }

/* The plate is a light card sitting inside a cover block, and core/cover sets
   color:#fff on everything inside it. Reassert the ink colours here or the
   headline renders white-on-sand and disappears. */
.dp-hero-plate {
  background: var(--wp--preset--color--sand);
  border-radius: 24px;
  padding: 52px 56px 48px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
  margin-bottom: 56px;
  color: var(--wp--preset--color--ink);
}
.dp-hero-plate h1 { color: var(--wp--preset--color--heading); }
.dp-hero-plate p  { color: var(--wp--preset--color--ink); }
.dp-hero-plate .dp-eyebrow { color: var(--wp--preset--color--gold-ink); }
.dp-hero-plate .dp-proof-bar { color: var(--wp--preset--color--text-light); }
@media (max-width: 781px) {
  .dp-hero-plate { padding: 32px 24px 28px; margin-bottom: 28px; border-radius: 20px; }
}

.dp-cta-band { min-height: 460px; }
.dp-cta-copy { max-width: 620px; }
@media (max-width: 781px) {
  .dp-cta-band { min-height: 420px; }
}

/* Cover blocks are full-bleed sections; kill the stacked top margin. */
.wp-block-cover.alignfull { margin-top: 0; }

/* ---- Photo + copy splits ---- */
.dp-split { align-items: center; }
.dp-photo img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.dp-checks { list-style: none; padding-left: 0; margin: 1.25rem 0 0; }
.dp-checks li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.7rem;
  line-height: 1.5;
}
.dp-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--wp--preset--color--blue);
  border-bottom: 2px solid var(--wp--preset--color--blue);
  transform: rotate(-45deg);
}

/* Cover inner containers size themselves to their content and then centre in
   the viewport, which drifts the copy into the middle of the band. Both scrims
   are directional, so the copy has to hold the left edge of the 1180 container
   or it ends up over the light end of the gradient. */
/* The cover lays its inner container out as a flex item, which shrinks to fit
   its content. Left-aligned content then lands on the viewport edge instead of
   the 1180px container the rest of the page uses - 107px out at desktop width.
   flex-basis 100% makes it fill, so max-width and auto margins can do their job. */
.dp-hero > .wp-block-cover__inner-container,
.dp-cta-band > .wp-block-cover__inner-container {
  flex: 1 1 100%;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto !important;
}
/* The CTA scrim is dark to 52% of the band, but a fixed 620px copy block
   spans far more than that once the viewport narrows - at 845px it reaches 73%
   and the type ends up over the light gold end. Cap it proportionally so it
   always lands inside the dark zone. Specificity has to beat WordPress's
   generated .wp-container-core-cover-is-layout-* rule. */
.dp-hero .dp-hero-plate { max-width: 620px; margin-left: 0 !important; margin-right: auto !important; }
.dp-cta-band .dp-cta-copy { max-width: min(620px, 46%); margin-left: 0 !important; margin-right: auto !important; }
@media (max-width: 781px) {
  .dp-cta-band .dp-cta-copy { max-width: 100%; }
}

/* On phones the copy uses the full band width, so a directional scrim would
   leave the end of every line over the light gold stop. Go near-uniform navy
   there - the photograph still reads through at 80-94%, and the gold edge was
   never visible at that width anyway. */
@media (max-width: 781px) {
  .dp-cta-band > .wp-block-cover__background {
    background: linear-gradient(90deg, rgba(11,26,51,0.94) 0%, rgba(11,26,51,0.90) 55%, rgba(11,26,51,0.84) 100%) !important;
  }
}

/* Internal-page heroes sit shorter than the home hero - they carry less copy
   and the page below them is the point. Their source frames run 3:2 to 3:1,
   so the box stays wide enough not to crop faces out of the sides. */
.dp-hero--inner { min-height: clamp(400px, 34vw, 520px); }
@media (max-width: 781px) { .dp-hero--inner { min-height: 460px; } }