/* design-polish.v1.css — 2026-10-16 design audit, "do now" batch (see lib/enhance/transforms/design-polish.ts).
 * 1. Hero legibility (scrim + text shadow) and a light logo while the header is transparent.
 * 2. Mobile side gutters 16px; desktop reading width ~75ch.
 * 3. No stretched images (object-fit: cover).
 * 4. Minimum text size 14px (13px only for uppercase tracked labels).
 * 5. Lotus dividers: one after the hero, the rest go on phones and shrink on desktop.
 */

/* ---------- 1. Heroes ---------- */
/* Every Elementor page hero (.hero-rwc) except the home video hero (passes already) and /apply-now/
 * (cro-apply-reassure v2 has its own scrim). */
.hero-rwc:not(.elementor-element-e29b21b):not(.elementor-element-4e70050) {
  position: relative;
  isolation: isolate;
}

.hero-rwc:not(.elementor-element-e29b21b):not(.elementor-element-4e70050)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* The theme's own teal fade at the top is kept as the first layer; a warm wash behind the (left-aligned)
   * hero text and a darker bottom edge are added under it. */
  background:
    linear-gradient(360deg, rgba(38, 80, 94, 0) 74%, rgba(38, 80, 94, 0.9) 100%),
    linear-gradient(90deg, rgba(24, 16, 11, 0.62) 0%, rgba(24, 16, 11, 0.4) 45%, rgba(24, 16, 11, 0.08) 78%),
    linear-gradient(0deg, rgba(24, 16, 11, 0.45) 0%, rgba(24, 16, 11, 0) 40%);
}

@media (max-width: 767px) {
  .hero-rwc:not(.elementor-element-e29b21b):not(.elementor-element-4e70050)::after {
    background:
      linear-gradient(360deg, rgba(38, 80, 94, 0) 74%, rgba(38, 80, 94, 0.9) 100%),
      linear-gradient(0deg, rgba(24, 16, 11, 0.6) 0%, rgba(24, 16, 11, 0.42) 50%, rgba(24, 16, 11, 0.3) 100%);
  }
}

.hero-rwc:not(.elementor-element-e29b21b):not(.elementor-element-4e70050) > .e-con-inner,
.hero-rwc:not(.elementor-element-e29b21b):not(.elementor-element-4e70050) > .e-con {
  position: relative;
  z-index: 1;
}

.hero-rwc h1,
.hero-rwc h2,
.hero-rwc .elementor-heading-title {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* Header logo: white while the header floats over the (dark) hero, its own colours once the header
 * turns cream (sticky-header adds html.yn-sh-scrolled). */
/* Not on blog-styled pages (body.ynb-page): their header sits on a light banner (2026-10-17 blog redesign). */
html:not(.yn-sh-scrolled) body:not(.ynb-page) .elementor-element-57498cc .ata-site-logo img {
  filter: brightness(0) invert(1);
  transition: filter 0.2s ease;
}

/* ---------- 2. Gutters and reading width ---------- */
@media (max-width: 767px) {
  .e-con.e-parent {
    --padding-left: 16px !important;
    --padding-right: 16px !important;
  }
}

@media (min-width: 1025px) {
  .yn-measure {
    max-width: 75ch;
  }

  .yn-measure--center {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------- 3. Images never stretch ---------- */
img:not([src$=".svg"]) {
  object-fit: cover;
}

/* Video posters: keep faces in frame when the crop kicks in. */
.elementor-widget-video img,
.elementor-custom-embed-image-overlay img {
  object-position: center 25%;
}

/* ---------- 4. Minimum text size ---------- */
.ynb-kicker,
.ynb-section-lbl,
.ynb-topic,
.ynb-toc-lbl,
.ynb-table figcaption,
.ynb-callout-h {
  font-size: 13px !important;
}

.ynb-badge,
.ynb-table thead th {
  font-size: 12.5px !important;
}

.ynb-meta,
.ynb-crumbs,
.ynb-facts,
.ynb-who span > span,
.ynb-say,
.ynb-next small,
.ynb-card-foot,
.ynb-table tbody th small,
.ynb-pull cite,
.ynb-rt,
.ynb-toc,
.ynb-topic-row,
.ynb-course ul,
.ynb-body-fig figcaption,
.ynb-figs figcaption,
.ynb-voice-who {
  font-size: 14px !important;
}

@media (max-width: 767px) {
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p,
  .elementor-icon-list-text,
  .elementor-icon-box-description,
  .elementskit-infobox p,
  .badge {
    font-size: max(14px, 1em);
  }

  .elementor-button,
  .elementor-button-text {
    font-size: max(15px, 1em);
  }
}

/* ---------- 5. Lotus dividers ---------- */
/* A pure divider = a container holding the lotus ornament (2026/04/Vector.png) and no text. */
.e-con.e-parent:has(img[src*="/2026/04/Vector.png"]):not(:has(h1, h2, h3, h4, p, li a, form, table)):not(.hero-rwc + .e-con) {
  --padding-top: 8px !important;
  --padding-bottom: 8px !important;
}

.e-con.e-parent:has(img[src*="/2026/04/Vector.png"]):not(:has(h1, h2, h3, h4, p, li a, form, table)):not(.hero-rwc + .e-con) img {
  max-height: 44px;
  width: auto;
}

@media (max-width: 1024px) {
  .e-con.e-parent:has(img[src*="/2026/04/Vector.png"]):not(:has(h1, h2, h3, h4, p, li a, form, table)):not(.hero-rwc + .e-con) {
    display: none;
  }
}