/* ==========================================================================
   Duepe - global responsive hardening
   --------------------------------------------------------------------------
   Cross-cutting rules that fix classes of problems found across every page,
   so individual pages don't each need their own copy. Page-specific layout
   fixes stay in each page's own <style> block.

   Loaded after duepe-theme.css and before the page <style>.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Anchor targets clear the sticky navbar
   Several pages link to #aeps-flow, #bbps-flow, #open-roles, #voucher-orders
   etc. Without scroll-margin the heading lands underneath the nav.
   -------------------------------------------------------------------------- */
[id] { scroll-margin-top: 6.5rem; }
@media (max-width: 991.98px) { [id] { scroll-margin-top: 5rem; } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --------------------------------------------------------------------------
   2. Long content never forces a horizontal scrollbar
   (The theme owns navbar behaviour - theme.js adds its own fixed/sticky
   handling, so nothing here touches the navbar.)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
[class*="display-"],
p, li, dd, dt, blockquote, figcaption, address, td, th, label, .lead {
  overflow-wrap: break-word;
  word-break: normal;
}

/* hyphens:auto was tried here for long words in narrow columns, but it
   hyphenates at every opportunity - not only when needed - so headings with
   plenty of room still broke ("Simplifying digital opera-tions"). The display
   sizes were reduced instead, which solved the original overflow, so headings
   now break only between words. overflow-wrap above remains the safety net. */
h1, h2, h3, .h1, .h2, .h3, [class*="display-"] {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Very long unbroken strings (URLs, IDs, account numbers) */
.text-break-anywhere { overflow-wrap: anywhere; }

/* Bootstrap's .text-nowrap is fine on wide screens but is a guaranteed clip or
   overflow on a phone. The homepage hero headline relies on this fix. */
@media (max-width: 767.98px) {
  .text-nowrap { white-space: normal !important; }
}

/* A .row nested directly in a .row doubles the negative gutter and pushes
   content past the container edge. */
.row > .row { margin-left: 0; margin-right: 0; }

/* --------------------------------------------------------------------------
   4. Container and card padding step down on small screens
   Pages use a flat `card-body p-10` for long legal copy, which leaves very
   little usable width on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .card-body { padding: 1.6rem !important; }
}
@media (max-width: 575.98px) {
  .card-body { padding: 1.15rem !important; }
  .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

/* Legal / policy prose stays at a readable measure instead of running the
   full width of an xl column. */
.prose-measure { max-width: 72ch; }

/* --------------------------------------------------------------------------
   4b. Bullet lists inside centred hero columns
   Centring is invisible while an item fits one line, but as soon as one wraps
   it centres against its neighbours and detaches from its bullet icon.
   -------------------------------------------------------------------------- */
.icon-list li,
ul.icon-list li {
  text-align: left;
}

/* --------------------------------------------------------------------------
   5. Media
   -------------------------------------------------------------------------- */
figure { margin: 0; }
figure img { display: block; }

/* Bootstrap's .w-auto is width:auto!important, so images carrying it ignore
   any width rule a media query sets. max-width still applies and is what
   actually keeps them inside the column. */
img.w-auto, .img-auto { max-width: 100% !important; height: auto; }

/* --------------------------------------------------------------------------
   6. Data grids built from divs
   Several pages lay out tabular content as a CSS grid. Where a grid declares
   its own horizontal scroll container this keeps the scroll usable.
   -------------------------------------------------------------------------- */
.table-responsive, .grid-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.grid-scroll-x > * { min-width: 34rem; }
@media (min-width: 992px) { .grid-scroll-x > * { min-width: 0; } }

/* --------------------------------------------------------------------------
   7. Tap targets
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .navbar-nav .nav-link,
  .dropdown-item { min-height: 2.75rem; display: flex; align-items: center; }
}

/* --------------------------------------------------------------------------
   8. Fixed min-heights are a desktop device; on a phone they only add
   whitespace. Pages opt in by using these classes on their card rules.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .minh-relax { min-height: 0 !important; }
}

/* --------------------------------------------------------------------------
   9. Print
   -------------------------------------------------------------------------- */
@media print {
  header.wrapper, .duepe-footer, .progress-wrap, .navbar { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* --------------------------------------------------------------------------
   10. Equal-height cards in a row
   Swiper stretches .swiper-slide, but the .card inside stays auto-height, so
   cards with more copy ran longer and the "Learn More" links sat at different
   heights across the row. Make the card fill its slide and let the paragraph
   absorb the slack, so every CTA lands on the same baseline.
   -------------------------------------------------------------------------- */
.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide {
  height: auto;
  display: flex;
}

.swiper-slide > .card,
.swiper-slide > div > .card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.swiper-slide .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* The description takes the spare space; everything after it is pinned low. */
.swiper-slide .card-body > p {
  flex: 1 1 auto;
}

/* Same treatment for plain Bootstrap card rows. */
.row > [class*="col"] > .card {
  height: 100%;
}

/* Making .card-body a column flex container (for equal heights above) means
   its children are flex items, and those align to the start rather than
   following text-align:center - which left the icons hanging off to the left
   in centred cards. Centre the media explicitly and let text blocks stay full
   width so their own text-align still governs. */
.card.text-center .card-body,
.swiper-slide .card.text-center .card-body {
  align-items: center;
}

.swiper-slide .card-body > *,
.card.text-center .card-body > * {
  width: 100%;
}

.swiper-slide .card-body > .icon-svg,
.swiper-slide .card-body > figure,
.swiper-slide .card-body > img,
.card.text-center .card-body > .icon-svg,
.card.text-center .card-body > figure,
.card.text-center .card-body > img {
  width: auto;
  align-self: center;
}

/* --------------------------------------------------------------------------
   11. Floating form labels are readable
   The theme paints .form-floating labels #959ca9, which is 2.76:1 on white -
   well under the 4.5:1 AA floor. It applies to the FLOATED state too, not just
   the resting one, so the field's name is hard to read even after typing.

   Darkened in place rather than replaced: same hue (219deg) and saturation
   (10.4%), lightness dropped 62.4% -> 46%. It still reads as the theme's cool
   grey, now at 4.86:1 on white and 4.61:1 on the light grey card surfaces.

   No !important needed - these match the theme's own specificity and this
   sheet loads after style.css. The neon site sets its own label colours in
   duepe-neon.css, which loads later still, so it is unaffected.
   -------------------------------------------------------------------------- */
.form-floating > label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: #697281;
}

/* --------------------------------------------------------------------------
   12. The sticky navbar clone must be opaque
   theme.js clones the navbar and slides the clone down as you scroll. The clone
   inherits the markup's `transparent` class, which outranks the theme's own
   `.navbar-stick` background rule - so the bar arrives see-through and page
   text scrolls visibly through it, straight across the logo.

   Two parts, and both are needed:
   1. an opaque background at a specificity that beats `.navbar.transparent`
   2. transition ONLY the transform. The theme sets `transition: all .3s`, so
      the background colour animates in from transparent as well - which is why
      the bar reads as see-through while it is arriving, not just when parked.
   -------------------------------------------------------------------------- */
.navbar-clone {
  transition-property: transform !important;
}

.navbar-clone.fixed,
.navbar-clone.navbar-stick,
.navbar.transparent.navbar-clone {
  background-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   13. Icon + title cards: a wrapped title must not fall under the icon
   These cards are three siblings - <i>, <strong>, <p> - with the icon and the
   title sharing one inline row. As soon as a title is too wide for the space
   left beside the icon, its second word wraps onto a new line starting at the
   card's left padding, i.e. underneath the icon. It reads as a stray bold word
   floating above the paragraph, and because the extra line only affects some
   cards it also knocks the row out of alignment.

   Laying the card out as a two-column grid keeps the title in its own column
   so it wraps under itself, and lets the paragraph span the full width. None
   of these classes set `display`, so nothing else about them changes.
   -------------------------------------------------------------------------- */
.aeps-rail-item,
.api-readiness-card,
.contact-route-card,
.dist-route-card,
.dist-requirement-card,
.travel-life-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  /* These cards are height:100% inside an equal-height row. Auto grid rows
     stretch to absorb that spare height, which pushed the icon/title row down
     by a different amount in every card and staggered the titles. Pack the
     rows to the top and let the slack fall at the bottom instead. */
  align-content: start;
  column-gap: 0.75rem;
  row-gap: 0.55rem;
}

.aeps-rail-item > i,
.api-readiness-card > i,
.contact-route-card > i,
.dist-route-card > i,
.dist-requirement-card > i,
.travel-life-row > i {
  grid-column: 1;
  grid-row: 1;
}

.aeps-rail-item > strong,
.api-readiness-card > strong,
.contact-route-card > strong,
.dist-route-card > strong,
.dist-requirement-card > strong,
.travel-life-row > strong {
  grid-column: 2;
  grid-row: 1;
}

/* Everything after the title - the paragraph, and any link or note some of
   these cards carry - spans the full width below the icon/title row. */
.aeps-rail-item > *:not(i):not(strong),
.api-readiness-card > *:not(i):not(strong),
.contact-route-card > *:not(i):not(strong),
.dist-route-card > *:not(i):not(strong),
.dist-requirement-card > *:not(i):not(strong),
.travel-life-row > *:not(i):not(strong) {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   15. The back-to-top control must be legible over any background
   The theme draws it as a hairline ring plus a --bs-primary arrow over NO fill.
   That works while it floats over pale page content, but every page ends on a
   dark navy footer - and tours_travels ends on the bright skyline artwork - so
   the arrow and ring end up nearly the same value as whatever is behind them
   and the control effectively disappears exactly where people reach for it.
   Give it its own plate so it never depends on the backdrop.
   -------------------------------------------------------------------------- */
.progress-wrap {
  background-color: #ffffff;
  box-shadow:
    inset 0 0 0 0.1rem rgba(128, 130, 134, 0.25),
    0 0.4rem 1rem rgba(30, 34, 40, 0.22);
}

/* --------------------------------------------------------------------------
   16. Eyebrow chips and status pills hug their text
   These are rounded tags that should be only as wide as their label. Several
   sit inside a flex or grid column, and as flex items they pick up the default
   align-items: stretch and blow out to the column's full width - which turns a
   small tag into what reads as an empty input field, most visibly on mobile
   where the columns are narrow.

   The floating badges (.app-live-badge / .talk-live-badge) are deliberately
   left out: they are absolutely positioned and set their own min-width.
   -------------------------------------------------------------------------- */
.about-kicker,
.aeps-eyebrow,
.api-eyebrow,
.api-service-chip,
.bbps-eyebrow,
.career-eyebrow,
.community-kicker,
.contact-eyebrow,
.dist-badge,
.dist-eyebrow,
.dmt-eyebrow,
.flow-section-kicker,
.gift-eyebrow,
.growth-kicker,
.recharge-eyebrow,
.travel-eyebrow,
.travel-queue-tag,
.wl-eyebrow {
  /* width:fit-content alone is enough and is the safer fix: align-items:stretch
     only sizes an item whose cross-size is auto, so giving it an intrinsic width
     stops the stretch WITHOUT overriding alignment - chips inside a centred
     section stay centred, which align-self:flex-start would have broken. */
  width: fit-content;
  max-width: 100%;
}