/* ============================================================================
   Wisepath Wealth - content pages shared stylesheet (Phase 1 foundation, 2026-09-30)
   Used by the rebuilt /contact/, /about/, /articles/, /videos/, /events/ pages.
   Composes the existing design system (tokens.css + styles.css from
   homepage-v2). Only the new content-page components live here, all under the
   .wp- class system.
   Palette: navy/steel-blue tokens only (--ww-primary, --ww-accent, --ww-ice,
   --ww-slate, --ww-steel, --ww-soft, --ww-gray, --ww-ink, --ww-white).
   Type: Oswald headings via --ww-font-head, Inter body.
   Mobile-first: base rules target small screens, min-width queries widen.
   No em dashes, no banned tokens.
   ========================================================================== */

/* ---------- .wp-ph placeholder image (16:9, gradient, dashed, centered label) ---------- */
.wp-ph {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ww-soft) 0%, var(--ww-ice) 100%);
  border: 2px dashed var(--ww-slate);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wp-ph::before {
  content: "Photo coming soon";
  font-family: var(--ww-font-head);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ww-gray);
  text-align: center;
  padding: 0 16px;
}

/* ---------- About hero: consistent centered layout + lifestyle photo ---------- */
.wp-about-hero {
  text-align: center;
}
.wp-about-hero .wp-h1,
.wp-about-hero .wp-lead {
  margin-left: auto;
  margin-right: auto;
}
.wp-about-hero .wp-lead {
  font-size: 19px;
}
.wp-hero-cta {
  text-align: center;
}
img.wp-hero-photo {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ww-radius-md);
  margin: 40px auto 0;
  box-shadow: 0 18px 40px rgba(10, 10, 15, 0.28);
}

/* ---------- Life carousel slide photos (placeholders until David's photos) ---------- */
.wp-carousel__slide .wp-life-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ww-radius-md);
}

/* ---------- .wp-scheduler booking CTA area ---------- */
.wp-scheduler {
  background: var(--ww-primary);
  color: var(--ww-white);
  padding: 56px 0;
}
.wp-scheduler__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--ww-gutter);
  text-align: center;
}
.wp-scheduler__title {
  font-family: var(--ww-font-head);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ww-white);
  margin: 0 0 12px;
}
.wp-scheduler__intro {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .9);
  margin: 0 0 24px;
}
.wp-scheduler .wp-btn-accent {
  font-size: 16px;
  padding: 16px 40px;
}
.wp-scheduler__note {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72);
  margin: 20px 0 0;
}
.wp-scheduler__email {
  display: inline-block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--ww-ice);
  text-decoration: underline;
}
.wp-scheduler__email:hover { color: var(--ww-white); }

/* ---------- .wp-filters category pill row (horizontal scroll on mobile) ---------- */
.wp-filters {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 18px;
}
.wp-filters::-webkit-scrollbar { display: none; }
.wp-filters__pill {
  flex: 0 0 auto;
  font-family: var(--ww-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: var(--ww-radius-pill);
  border: 2px solid var(--ww-slate);
  background: var(--ww-white);
  color: var(--ww-primary);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.wp-filters__pill:hover {
  border-color: var(--ww-accent);
  color: var(--ww-accent);
}
.wp-filters__pill.is-active {
  background: var(--ww-accent);
  border-color: var(--ww-accent);
  color: var(--ww-white);
}
.wp-filters__pill:focus-visible {
  outline: 3px solid var(--ww-sky);
  outline-offset: 2px;
}

/* Hidden state must win over any display rule on cards/filters/load-more
   (author display:flex would otherwise override the UA [hidden] rule and
   the category filter / Load More would not actually hide anything). */
[hidden] {
  display: none !important;
}

/* ---------- shared card grid ---------- */
.wp-card-grid {
  display: grid;
  gap: 26px;
  margin: 0;
}

/* ---------- .wp-card--article article card ---------- */
.wp-card--article {
  background: var(--ww-white);
  border: 1px solid var(--ww-soft);
  border-radius: var(--ww-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ww-shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-card--article__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.wp-card--article .wp-ph { border: 0; border-radius: 0; aspect-ratio: 1 / 1; }
.wp-card--article__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 22px;
}
.wp-card--article__eyebrow {
  font-family: var(--ww-font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ww-accent);
  margin: 0 0 8px;
}
.wp-card--article__title {
  font-family: var(--ww-font-head);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
  color: var(--ww-primary);
  margin: 0 0 8px;
}
.wp-card--article__date {
  font-size: 13px;
  color: var(--ww-gray-2);
  margin: 0 0 10px;
}
.wp-card--article__excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ww-ink);
  margin: 0 0 14px;
}
.wp-card--article__link {
  font-family: var(--ww-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ww-accent);
  text-decoration: none;
  margin-top: auto;
}
.wp-card--article__link:hover { color: var(--ww-primary); }

/* ---------- .wp-card--video video card (play overlay, lazy iframe on tap) ---------- */
.wp-card--video {
  position: relative;
  background: var(--ww-primary);
  border-radius: var(--ww-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ww-shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-card--video__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.wp-card--video .wp-ph { border: 0; border-radius: 0; }
.wp-card--video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: rgba(31, 27, 84, .35);
  cursor: pointer;
  color: var(--ww-white);
  transition: background .2s;
}
.wp-card--video__play:hover { background: rgba(31, 27, 84, .55); }
.wp-card--video__play:focus-visible {
  outline: 3px solid var(--ww-sky);
  outline-offset: -3px;
}
.wp-card--video__play::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 26px solid var(--ww-white);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.wp-card--video__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}
.wp-card--video__body { padding: 16px 18px 18px; }
.wp-card--video__title {
  font-family: var(--ww-font-head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
  color: var(--ww-white);
  margin: 0 0 6px;
}
.wp-card--video__meta {
  font-size: 13px;
  color: var(--ww-ice);
  margin: 0;
}

/* ---------- .wp-featured large featured card ---------- */
.wp-featured {
  display: grid;
  gap: 24px;
  margin-bottom: 38px;
}
/* NOTE: Elementor's frontend.min.css injects `.elementor img { border-radius: 0 }` at
   specificity (0,1,1), which beats a single-class `.wp-featured__media` (0,1,0) and
   silently squares the image on every Elementor-built page. Hence the parent-scoped
   selector here (0,2,0). The card thumbnails never hit this because the card clips them
   with its own radius + overflow:hidden - they are already correctly rounded. */
.wp-featured .wp-featured__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--ww-radius-md);
}
.wp-featured .wp-ph { border: 0; border-radius: var(--ww-radius-md); aspect-ratio: 1 / 1; }
.wp-featured__eyebrow {
  font-family: var(--ww-font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ww-accent);
  margin: 0 0 8px;
}
.wp-featured__title {
  font-family: var(--ww-font-head);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  color: var(--ww-primary);
  margin: 0 0 10px;
}
.wp-featured__excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ww-ink);
  margin: 0 0 16px;
}
.wp-featured__link {
  font-family: var(--ww-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ww-accent);
  text-decoration: none;
}
.wp-featured__link:hover { color: var(--ww-primary); }

/* ---------- .wp-load-more centered button ---------- */
.wp-load-more {
  display: flex;
  justify-content: center;
  margin: 38px 0 0;
}
.wp-load-more .wp-btn { min-width: 220px; }

/* ---------- .wp-bio accordion bio card (one open at a time via site.js) ---------- */
.wp-bio {
  background: var(--ww-white);
  border: 1px solid var(--ww-soft);
  border-radius: var(--ww-radius-md);
  overflow: hidden;
  box-shadow: var(--ww-shadow-card);
}
.wp-bio__head {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 20px;
}
img.wp-bio__photo {
  width: 88px;
  height: 88px;
  border-radius: var(--ww-radius-round);
  object-fit: cover;
  flex: 0 0 auto;
}
.wp-bio__photo.wp-ph { border-radius: var(--ww-radius-round); width: 88px; }
.wp-bio__name {
  font-family: var(--ww-font-head);
  font-size: 20px;
  font-weight: 600;
  text-transform: none;
  color: var(--ww-primary);
  margin: 0 0 2px;
}
.wp-bio__title {
  font-size: 14px;
  color: var(--ww-gray-2);
  margin: 0;
}
.wp-bio__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.wp-bio__toggle {
  font-family: var(--ww-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ww-accent);
  background: none;
  border: 0;
  padding: 0 20px 18px;
  margin-left: auto;
  cursor: pointer;
  display: block;
  text-align: left;
}
.wp-bio__toggle:hover { color: var(--ww-primary); }
.wp-bio__toggle:focus-visible {
  outline: 3px solid var(--ww-sky);
  outline-offset: 2px;
}
.wp-bio__body {
  display: none;
  padding: 0 20px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ww-ink);
}
.wp-bio.is-open .wp-bio__body { display: block; }
.wp-bio[open] .wp-bio__body { display: block; }
.wp-bio.is-open .wp-bio__toggle { color: var(--ww-primary); }
.wp-bio[open] .wp-bio__toggle { color: var(--ww-primary); }

/* ---------- .wp-life-carousel swipeable carousel of placeholder photos ---------- */
.wp-life-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 18px;
}
.wp-life-carousel::-webkit-scrollbar { display: none; }
.wp-life-carousel__slide {
  flex: 0 0 78%;
  scroll-snap-align: center;
}
.wp-life-carousel__slide .wp-ph { margin: 0; }

/* ---------- .wp-notify Notify Me form (name + email + submit, static) ---------- */
.wp-notify {
  background: var(--ww-soft);
  border: 1px solid var(--ww-slate);
  border-radius: var(--ww-radius-md);
  padding: 30px 24px;
}
.wp-notify__title {
  font-family: var(--ww-font-head);
  font-size: 22px;
  font-weight: 600;
  text-transform: none;
  color: var(--ww-primary);
  margin: 0 0 6px;
}
.wp-notify__note {
  font-size: 13.5px;
  color: var(--ww-gray-2);
  margin: 0 0 20px;
}
.wp-notify__form {
  display: grid;
  gap: 12px;
}
.wp-notify__field {
  width: 100%;
  font-family: "Inter", "Calibri", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  padding: 13px 14px;
  border: 1px solid var(--ww-slate);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-white);
  color: var(--ww-ink);
}
.wp-notify__field:focus-visible {
  outline: 3px solid var(--ww-sky);
  outline-offset: 2px;
  border-color: var(--ww-accent);
}
.wp-notify .wp-btn { width: 100%; }

/* ---------- .wp-webinar-slot future-webinar empty-state placeholder ---------- */
.wp-webinar-slot {
  border-radius: var(--ww-radius-md);
  padding: 32px 24px 40px;
  text-align: center;
}
.wp-webinar-slot__eyebrow {
  font-family: var(--ww-font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ww-accent);
  margin: 0 0 8px;
}
.wp-webinar-slot__title {
  font-family: var(--ww-font-head);
  font-size: 22px;
  font-weight: 600;
  text-transform: none;
  color: var(--ww-primary);
  margin: 0 0 10px;
}
.wp-webinar-slot__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ww-ink);
  max-width: 520px;
  margin: 0 auto;
}

/* ---------- .wp-value-cards + .wp-value-card three-column value cards ---------- */
.wp-value-cards {
  display: grid;
  gap: 16px;
  margin: 0;
}
.wp-value-card {
  background: var(--ww-white);
  border-top: 4px solid var(--ww-accent);
  border-radius: var(--ww-radius-md);
  padding: 22px 18px;
  box-shadow: var(--ww-shadow-card);
}
.wp-value-card__title {
  font-family: var(--ww-font-head);
  font-size: 19px;
  font-weight: 600;
  text-transform: none;
  color: var(--ww-primary);
  margin: 0 0 10px;
}
.wp-value-card__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ww-ink);
  margin: 0;
}

/* ---------- .wp-quote whole-person line block ---------- */
.wp-quote {
  background: var(--ww-primary);
  color: var(--ww-white);
  padding: 56px 0;
}
.wp-quote__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--ww-gutter);
  text-align: center;
}
.wp-quote__line {
  font-family: var(--ww-font-head);
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 300;
  line-height: 1.25;
  margin: 0;
}
.wp-quote__line em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: var(--ww-ice);
}

/* ---------- desktop widening (mobile-first breakpoints) ---------- */
@media (min-width: 701px) {
  .wp-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-value-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-featured { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 36px; }
  .wp-life-carousel__slide { flex-basis: 32%; }
  .wp-notify__form { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .wp-notify .wp-btn { width: auto; }
}
@media (min-width: 1001px) {
  .wp-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================================
   Visual tweaks (2026-10-01 brief): shared-class overrides.
   These classes are owned by the imported homepage-v2 styles.css; this file
   loads after it, so same-specificity rules here win by source order.
   ========================================================================== */
.wp-eyebrow { color: var(--ww-steel); font-weight: 600; }
.wp-photo-band .wp-eyebrow,
.wp-final-cta .wp-eyebrow,
.wp-midpage-cta .wp-eyebrow,
.wp-scheduler .wp-eyebrow { color: var(--ww-accent); }
.wp-h2, .wp-feetitle { letter-spacing: .5px; }
.wp-btn, .wp-cta-band__btn, .wp-sticky-cta__btn {
  transition: background .2s, color .2s, border-color .2s, transform .2s ease, box-shadow .2s ease;
}
.wp-btn:hover, .wp-btn-accent:hover, .wp-cta-band__btn:hover, .wp-sticky-cta__btn:hover {
  box-shadow: 0 6px 16px -6px rgba(31,27,84,.35);
  transform: translateY(-1px);
}
.wp-tq, .wp-muted, .wp-testimonial__attribution { color: var(--ww-gray-2); }
.wp-feecard, .wp-service-card, .wp-planning-card, .wp-life-card,
.wp-testimonial, .wp-tcard, .wp-vid-card, .wp-index-card, .wp-faq-item {
  box-shadow: var(--ww-shadow-card);
}
.wp-feecard, .wp-way-card, .wp-service-card, .wp-card--article, .wp-card--video {
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-feecard:hover, .wp-way-card:hover, .wp-service-card:hover,
.wp-card--article:hover, .wp-card--video:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(31,27,84,.06), 0 18px 36px -12px rgba(31,27,84,.24);
}

/* ============================================================================
   Mobile feedback fixes (2026-10-05, David's H18/H19/H22).
   Mobile = below 701px (matches the desktop min-width: 701px breakpoint above).
   ========================================================================== */
@media (max-width: 700px) {
  /* H18: hero subheadline one step smaller on mobile */
  .wp-about-hero .wp-lead { font-size: 17px; }

  /* H19: exec bio head stacks cleanly: photo -> name/title -> Meet X + */
  .wp-bio__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .wp-bio__meta {
    flex: none;
    width: 100%;
  }
  .wp-bio__toggle {
    margin-left: 0;
    padding: 0 0 16px;
  }

  /* H22: compact value cards on mobile */
  .wp-value-cards { gap: 14px; }
}