/* ═══════════════════════════════════════════════════════════════════
   Velocity Hero — minimal structural overrides only.
   All layout, spacing, and colour is handled by Tailwind utility
   classes applied directly in hero.html / hero.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Centered layout content width ───────────────────────────────── */
[data-vel-hero] .max-w-\[1200px\] {
  max-width: 1200px;
}

/* ── Hero image sizing (Breakout / Split) ────────────────────────────
   Mobile: always a full-width square (object-cover crop).
   Tablet/Desktop (≥768px): the wrapper's max-width comes from the optional
   "Hero Image Width" inline style; when unset it falls back to the image's
   natural width (fit-content). Height always follows the image's natural
   aspect ratio at this breakpoint. The mobile !important rule guarantees the
   square layout even when an inline pixel max-width is present.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  [data-vel-hero] [data-vel-hero-img-wrap] {
    width: 100% !important;
    max-width: none !important;
  }
  /* "Hero Mobile Image Width (px)" override — constrains the hero image on
     mobile (overriding the default full-width square) and centers it. The px
     value arrives via the --vel-hero-mobile-mw custom property set inline. */
  [data-vel-hero] [data-vel-hero-img-wrap][data-vel-hero-mobile-mw] {
    max-width: var(--vel-hero-mobile-mw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Content "Content Max Width" applies only at tablet/desktop — the inline
     max-width is neutralised on mobile so the content column stays full-width. */
  [data-vel-hero] [data-vel-hero-content] {
    max-width: none !important;
  }
}

@media (min-width: 768px) {
  [data-vel-hero] [data-vel-hero-img-wrap] {
    width: fit-content;
    height: auto;
    aspect-ratio: auto;
  }
  [data-vel-hero] [data-vel-hero-img-wrap] > img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ── Hero Image Fit override (authored "Hero Image Fit" option) ───────
   Forces object-fit on ALL breakpoints, overriding both the mobile
   object-cover utility class and the desktop object-fit:contain rule
   above. "Default" (no data attribute) keeps the existing behaviour.
   ──────────────────────────────────────────────────────────────────── */
[data-vel-hero] [data-vel-hero-img-wrap][data-vel-hero-fit="cover"] > img {
  object-fit: cover !important;
}
[data-vel-hero] [data-vel-hero-img-wrap][data-vel-hero-fit="contain"] > img {
  object-fit: contain !important;
}

/* ── Superscript / subscript color inheritance ────────────────────── */
/* Nested selector — cannot be expressed as a single Tailwind class   */
[data-vel-hero] h1 sup,
[data-vel-hero] h1 sub,
[data-vel-hero] h2 sup,
[data-vel-hero] h2 sub,
[data-vel-hero] h3 sup,
[data-vel-hero] h3 sub {
  color: inherit;
}

/* ── Ensure white color for <sup> and <a> inside .text-vel-white ── */
/* Nested element selector — cannot be expressed as a single Tailwind class */
[data-vel-hero] .text-vel-white sup,
[data-vel-hero] .text-vel-white a {
  color: #fff !important;
}

/* ── RTE inline formatting: bold, italic, underline ──────────────────
   Tailwind preflight sets `strong { font-weight: bolder }` which is
   invisible when the parent heading already uses weight 700 and Open
   Sans has no heavier variant loaded. Explicit values fix this.
   ──────────────────────────────────────────────────────────────────── */
[data-vel-hero] strong,
[data-vel-hero] b {
  /* Heading tokens set weight up to 700 at lg: — use 800 so bold is
     always visually heavier than the surrounding heading text.
     Open Sans 800 is loaded in the base.css Google Fonts import. */
  font-weight: 800;
}

/* A link nested inside bold text must inherit that bold weight. The site's
   global `a { font-weight: 500 }` (etc/designs/fifth-third .../style.css)
   is applied directly to the anchor, which otherwise overrides the inherited
   bold — so a bolded link in RTE text would render at 500 while the
   surrounding text stays bold. */
[data-vel-hero] strong a,
[data-vel-hero] b a {
  font-weight: inherit;
}

[data-vel-hero] em,
[data-vel-hero] i {
  font-style: italic;
}

[data-vel-hero] u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Superscript links (legal footnote references in RTE) ────────────
   AEM RTE wraps footnote numbers in <sup><a> — Tailwind preflight
   removes underlines from all <a> tags. Restore it here scoped to
   the hero so superscript links are clearly interactive.
   ──────────────────────────────────────────────────────────────────── */
[data-vel-hero] sup a,
[data-vel-hero] sub a {
  text-decoration: underline;
  text-underline-offset: 1px;
  color: inherit;
}

/* ── Neutralise RTE <p> wrapping ─────────────────────────────────────
   AEM RTE wraps all content in <p> tags by default. If any <p> tags
   leak into the rendered output, strip their block behaviour so they
   don't add unwanted margins or break heading/eyebrow/subheading styles.
   Global p { font-size: 1rem; padding-bottom: 1rem } from clientlib-style
   overrides inherited heading sizes — must use !important to win.
   ──────────────────────────────────────────────────────────────────── */
[data-vel-hero] h1 p,
[data-vel-hero] h2 p,
[data-vel-hero] h3 p,
[data-vel-hero] [data-vel-hero-eyebrow] p,
[data-vel-hero] [data-vel-hero-subheading] p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
}