/*
  App-owned styles for pfg-customized (same role as pfgc's pfgc.css).

  Everything else this site loads is a migrated Sitecore bundle under
  /-/media/Styles. This file is for rules that CODE owns, not content — chiefly
  classes re-applied by the richText renderer, since Uniform Rich Text does not
  store classnames or inline styles.

  Loaded last in _document.tsx so these rules win over mainbundle.css.
*/

/*
  The About grid's "Learn More" link. The source markup carried
  `style="color: #b5121b !important; text-decoration: none;"` inline; richText
  drops it, so the renderer re-applies the class (see RichGridItemBody in
  components/ui/HighlightText.tsx). !important matches the original declaration,
  which had to beat mainbundle's `.main-content a` colour.
*/
.grid-item__link {
  color: #b5121b !important;
  text-decoration: none;
}

/*
  The home page's "Partner with Us" call to action, at the end of the bottom band's
  copy. The source markup carries the whole button as an inline style on the <a>
  (`background-color: #b5121b; color: #FFFFFF !important; padding: 13px; …`), which
  richText drops just as it drops classnames. The declarations are restored verbatim,
  scoped to the band's only link — it is a link inside prose, so unlike every other
  CTA on the site it is not a `linkHref`/`linkLabel` param that CtaButton could render.

  !important on colour is required: mainbundle sets
  `.bottom-content .text-content a { color: #B5121B !important }`, which only the
  original inline !important could beat. `width` / `text-align` are inert on the
  inline box the anchor stays in — kept so the computed style matches prod exactly.
*/
.bottom-content .text-content p a {
  background-color: #b5121b;
  color: #ffffff !important;
  padding: 13px;
  font-family: "poppins", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9em;
  text-align: center;
  width: 150px;
  text-decoration: none;
}

/*
  Contact's "Get in touch!" heading, which carried `style="color: #B5121B !important"`
  inline — the site's only coloured heading, and the only inline style left on any
  heading once About's `text-align:center` became .text-item--center above.

  Scoped by position rather than page: the contact form is the one <form> in an
  article, so `section:has(+ form)` names exactly the intro block that heads it,
  and leaves every other article heading black. !important is carried over from the
  original declaration for the same reason it was there — mainbundle ends with a
  blanket `h1, h2, h3, h4, h5, h6 { color: #000 !important }`, which no amount of
  specificity beats.
*/
.main-content article > section:has(+ form) h2 {
  color: #b5121b !important;
}

/*
  CtaButton and NavLink render their label as an inline-editable <UniformText>
  <span> — a wrapper the original markup does not have (the anchor held the text
  directly). mainbundle's global `* { font-weight: 400 }` then applies to that span
  and overrides the weight inherited from the anchor (700 on `.btn-1`, 600 on
  `.footer footer a`), so every CTA and footer link renders regular and a few pixels
  narrower than prod. Re-inherit the anchor's weight on the label; the class (0,1,0)
  beats the universal selector (0,0,0).
*/
.cta-label,
.link-label {
  font-weight: inherit;
}

/*
  Footer left-column rhythm. The original markup is not a uniform list of links:
  its first link is a bare <a> (so it sits in the column's own 26px line box rather
  than inside a 10px `.footer footer p`, whose line box is 18px), and "Terms &
  Conditions" + "Privacy Policy" share ONE paragraph separated by two <br>s, i.e. a
  blank line rather than the 10px paragraph margin. The CMS model gives every footer
  link its own navLink <p> and cannot express either shape, which leaves the footer
  15px shorter than prod on every page. Restore both gaps.
*/
/* 24px (not the 26px line box prod's bare <a> sits in): the <a>'s own 24.375px
   inline box drives the final line height once the paragraph strut is out of the
   way, landing the column on prod's exact 291px. !important is required —
   mainbundle's `p, article p` sets line-height with it. */
.footer footer .column-left > p:first-child {
  line-height: 24px !important;
}

.footer footer .column-left > p:has(> a[href*="Privacy-Policy"]) {
  margin-top: 17px;
}

/*
  DELIBERATE DEVIATION FROM PROD (reported in feedback; prod has the same bug).

  why-pfg's highlight band, mobile only: mainbundle gives `.highlight` a 30px padding
  and then zeroes the horizontal sides —

      .highlight { padding: 30px; padding-left: 0; padding-right: 0 }

  — which lets the image run full-bleed, but takes the text column's gutter with it.
  "Reliability", its copy and the two callouts under it therefore sit flush against
  the viewport edge, while every other section on the page keeps 30px
  (`.side-by-side .text` uses exactly that below 992px). Give the text column the
  gutter the band's own padding value already asks for.

  On `.highlight__text` rather than `.highlight`, so the image and the red 99%+
  callout hanging off it stay full-bleed as designed. Scoped below 992px because from
  there mainbundle's own `.highlight__text` rule takes over with the two-column 40/60
  padding — this file loads last, so an unscoped rule of equal specificity would
  silently beat it.
*/
@media (max-width: 991.98px) {
  .highlight__text {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/*
  Inline article image (the Fuel Surcharge grid chart). The source page flows that
  <img> INSIDE the surrounding <p>, so no block margins separate it from the copy:
  the text simply wraps around it and the first following <br> only terminates the
  image's own line. Uniform richText cannot hold an image inline, so the body is
  modelled as textItem / inlineImage / textItem (see components/canvas/InlineImage)
  — a split that inserts the previous paragraph's 13px bottom margin above the image
  and, below it, the next paragraph's 16px top margin plus one extra 26px line.
  Cancel exactly those, so the split costs no vertical space. Scoped to a bare <img>
  child of the article, which only inlineImage renders.
*/
.main-content article > img {
  margin-top: -13px;
}

.main-content article > img + section {
  margin-top: -41px;
}

/*
  DELIBERATE DEVIATION FROM PROD (reported in feedback; prod has the same bug).

  That same chart is a 1167px-wide picture of a pricing table, and nothing in either
  stylesheet constrains it — `max-width` computes to `none`. Below the article's ~1170px
  content column it therefore keeps its full width and `.main-content`'s
  `overflow-x: hidden` just cuts it off: on a phone you get the first two columns of the
  grid and no hint that the rest exists. Let it scale to the column instead; the source
  is 3x the width it lands at on a phone, so it stays sharp and pinch-zooms cleanly.

  `height: auto` is required alongside `max-width`: next/image emits width/height
  attributes which set the used height, so clamping the width alone would squash the
  chart. Left unscoped because it is a no-op wherever the column already fits the image
  (1167px chart, 1170px desktop column) and is what you want at every width below that.
*/
.main-content article > img {
  max-width: 100%;
  height: auto;
}

/*
  Same page, same clip, also on prod: the EIA data link is a 597px unbreakable URL in a
  350px column. `break-word` only takes effect when a word cannot fit on a line of its
  own, so ordinary prose links and CTA labels are unaffected.
*/
.main-content article a {
  overflow-wrap: break-word;
}

/*
  DELIBERATE DEVIATION FROM PROD (reported in feedback; prod has the same bug).

  The mobile submenu toggle is an empty <a class="parent"> laid over its row —

      .header .mobile .mobile-nav .parent { position: absolute; left: 0; width: 100vw }

  — while the only part of it you can SEE is the 32px caret its ::before floats to the
  right. So the whole row is the toggle, and the real nav link underneath it can never be
  tapped: on mobile, Contact (the one item with a submenu) only opens and closes its
  submenu, and since no footer link goes there either, /contact/ is unreachable.

  Pull the toggle back to the caret it draws. `right: 0` with the row's own 52px height
  keeps it a comfortable touch target, the ::before still floats to the same right edge so
  the caret does not move a pixel, and the rest of the row falls through to the link.
  Keyboard users were never affected — the link stayed focusable underneath — so this only
  restores what pointer users lost.
*/
.header .mobile .mobile-nav .parent {
  left: auto;
  right: 0;
  width: 52px;
}

/*
  Centred prose blocks. Replaces the deprecated <center> element on the
  Acknowledgment page and the `style="text-align:center"` on About's intro
  heading — both inline/structural centring that richText cannot carry.
*/
.text-item--center {
  text-align: center;
}

/*
  next/image always emits width/height attributes (it needs them to reserve the box
  and avoid layout shift). Those attributes set the used width/height, which
  overrides legacy rules that sized an image on ONE axis and left the other to
  follow the aspect ratio. Releasing the unset axis back to `auto` demotes the
  attributes to what we actually want from them — the intrinsic ratio — while the
  existing width / max-width / max-height declarations clamp the box as before.

  Scoped to the three affected rules rather than applied to `img` globally, so every
  other image keeps its reserved box and next/image's lazy-loading stays shift-free.
*/

/* mainbundle sizes these on width (or max-height) alone. */
.header img.logo,
.card__image {
  width: auto;
  height: auto;
}

/*
  Width here is deliberately left to mainbundle's `width: 100%` — this rule carries
  the same specificity (0,2,1) and loads later, so naming `width` would silently
  beat it and collapse the image to its natural size.
*/
.bottom-content .image-content img {
  height: auto;
}