/*
Theme Name: R5 United - Somebody Find Phil
Description: United Airlines x Somebody Feed Phil "Somebody Find Phil" sweepstakes. MileagePlus lookup/enrollment + 7 airport-code picks. Forked from r5-united (Rome to Rome); standalone theme, not a child.
Version: 0.1.0
*/

/* Forked from r5-united. Some selectors below (tracker, miles stat, weekly entry)
   are Rome-era leftovers with no markup in this theme; safe to prune later. */

/* Brand font — Neue Plak Text for United, per Jacob Narayan (United IT,
   8/24 email: "we use the brand font Neue Plak" for partner sites like
   Ticketmaster). Ivars supplied the licensed font files (OTF/TTF) on
   8/25; self-hosted here as WOFF2 (converted from the supplied TTFs via
   fonttools) rather than serving the raw OTF/TTF — smaller file size,
   standard practice for web fonts. Files live in this theme's /fonts
   folder rather than a CDN since this is a licensed font, not a
   Google-Fonts-style open license.
   Only the weights United provided are declared below (Regular, Bold,
   SemiBold, ExtraBlack, Italic) — no synthetic browser-faked bold/
   italic beyond what's covered by font-weight/font-style matching. */
@font-face {
  font-family: 'Neue Plak Text';
  src: url('fonts/NeuePlakTextforUnited-Rg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Plak Text';
  src: url('fonts/NeuePlakTextforUnited-It.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Plak Text';
  src: url('fonts/NeuePlakTextforUnited-SmBd.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Plak Text';
  src: url('fonts/NeuePlakTextforUnited-Bd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Plak Text';
  src: url('fonts/NeuePlakTextforUnited-XBlk.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Bootstrap's _reboot.scss sets body's font-family via the
   --bs-body-font-family CSS variable (defaulting to
   "system-ui, -apple-system, ..."), not a plain property value — so a
   plain `font-family` rule on body here was losing to that variable
   rather than actually failing to load (confirmed via DevTools: the
   Neue Plak Text declaration below showed as loaded-but-struck-through,
   overridden by var(--bs-body-font-family) from _reboot.scss). Setting
   the variable itself on :root is what Bootstrap's own docs recommend
   for overriding its typography defaults, and wins regardless of
   Bootstrap's internal rule order. */
:root {
  --bs-body-font-family: 'Neue Plak Text', 'Helvetica Neue', Arial, sans-serif;
}

body {
  background-color: #F1F5FC;
  color: #001a4d;
  font-family: 'Neue Plak Text', 'Helvetica Neue', Arial, sans-serif;
}

/* Room for the sticky preview banner's collapsed (one-line) height so
   it doesn't sit on top of real page content by default — added via
   JS only when the banner is actually present (see footer.php), so
   normal site visitors with no preview cookie never get this gap. */
body.r5-has-preview-banner {
  padding-bottom: 44px;
}

.r5-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.r5-preview-banner {
  background: #ffc107;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.85rem;
}

.r5-preview-banner a {
  color: #1a1a1a;
  text-decoration: underline;
}

/* Sticky, single-line-by-default preview banner — per Ivars: pinned
   to the bottom of the viewport at all times (not just at the bottom
   of the page), collapsed to one line, click to expand a bullet list
   of testing notes. Replaces the earlier plain-paragraph version that
   sat inline at the end of the footer content. */
.r5-preview-banner--sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60; /* above the nav overlay (z-index: 40/50) so it's never hidden behind the mobile menu */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.r5-preview-banner-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r5-preview-banner-caret {
  display: inline-block;
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.r5-preview-banner--sticky.is-open .r5-preview-banner-caret {
  transform: rotate(180deg);
}

.r5-preview-banner-details {
  padding: 0 16px 14px;
  line-height: 1.5;
  max-height: 40vh;
  overflow-y: auto;
}

.r5-preview-banner-details ul {
  margin: 0;
  padding-left: 20px;
}

.r5-preview-banner-details li {
  margin-bottom: 6px;
}

.r5-preview-banner-details li:last-child {
  margin-bottom: 0;
}

.r5-header {
  background: #1414d2; /* United blue — corrected 8/25 to #1414D2 per
    Ivars, confirmed directly against United's own brand portal
    (brand.united.com). Supersedes an earlier pass that used #0033A0
    sourced from brandcolorcode.com (a third-party aggregator, not
    United's own site) — brand.united.com is the authoritative source.
    Every "United blue" background/text usage in the theme (header,
    .r5-prize-band, .r5-tracker-table th, .r5-fork-option-label) is
    standardized on this same value. */
  padding: 20px 0;
  text-align: center;
  position: relative;
  /* Logo, hamburger, and nav are all position: absolute (see below),
     so none of them contribute to this element's height — padding
     alone was sizing an effectively empty box, which left the 45px
     logo (see .r5-header-logo-link img) almost touching the header's
     top/bottom edges instead of having real vertical relief (per
     Ivars, 8/25). min-height guarantees enough room around the logo
     regardless of content height; padding is kept for pages using the
     plain (non-overlay) header variant, where it still applies to
     that variant's flow content if any is ever added.
     Bumped 85px -> 95px per Ivars (8/25) to fit the 50px Bears
     co-brand mark (see .r5-header-cobrand-logo) with real vertical
     relief above/below it, matching the same margin-to-logo ratio the
     85px height gave the original 45px MP logo alone. (Briefly went
     to 110px for a 75px version of the Bears logo that didn't stick —
     scaled back down alongside it per Ivars.) */
  min-height: 95px;
}

/* Nav bar above the hero photo, in normal document flow — per Ivars
   (8/25), dropped the sticky/overlay behavior that used to pin this
   fixed over the top of the hero image and stay pinned to the
   viewport on scroll. That worked fine as a slim see-through bar with
   just a logo + hamburger, but once it carries the full inline desktop
   nav (Welcome/logout + 4 links) plus a solid black background, a
   fixed-position bar covering the hero's top ~64px started visibly
   cropping the photo (Rome's hand/arm) at some viewport widths where
   the nav content needs more height than that. Solid black background
   kept from the earlier "make it solid" change; .is-scrolled is now
   fully inert (no fixed position to react to) but left in place along
   with header.php's scroll listener as harmless dead code rather than
   pulling that apart in the same pass as this layout change. */
.r5-header--overlay {
  background: #000;
  position: relative;
  z-index: 30;
}

.r5-hero-wrap {
  position: relative;
}

.r5-header img {
  height: 24px;
}

/* Left-aligned at all widths per Ivars (8/25): logo left, controls
   right (hamburger on mobile, full nav on desktop — see
   .r5-menu-toggle and the @media (min-width: 601px) block below).
   Previously centered via .r5-header's text-align: center with the
   hamburger toggle occupying left: 16px; the toggle now lives on the
   right instead (see .r5-menu-toggle above), freeing this slot.
   Positioning now lives on .r5-header-logo-group (see below) instead
   of directly on .r5-header-logo-link, since the group also holds the
   Bears co-brand mark added per Ivars (8/25) — .r5-header-logo-link
   itself just needs to behave as a normal flex item now.

   8/26 update (per Ivars/Derek): the whole lockup (MP logo + divider
   + Bears crest) got wrapped in this one link so the Bears crest is
   clickable too, not just the MP logo. That left three children
   (img, span divider, img) sitting inline inside a plain
   inline-block/line-height:0 box with no row layout or vertical
   centering — the divider's 40px height had nothing to align against
   and rendered off-baseline instead of as a clean centered pipe.
   Switched to flex + align-items:center so it lays out exactly like
   .r5-header-logo-group used to, just one level in. */
.r5-header-logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 0;
}

/* Wraps the MP logo link + divider + Bears co-brand mark as one row,
   added per Ivars (8/25) when the Bears logo was slammed in next to
   the MP lockup. Carries the absolute positioning that used to live
   directly on .r5-header-logo-link. */
.r5-header-logo-group {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* MileagePlus lockup (swapped in from the plain UA wordmark, see
   header.php) is a stacked two-line mark with a much squarer aspect
   ratio (~2.5:1) than the old single-line UA logo (~6.4:1) — at the
   shared .r5-header img 24px height it rendered only ~59px wide vs.
   the old logo's ~153px, reading as tiny/cramped next to the nav
   toggle. Sized up just for this logo so it keeps a comparable visual
   footprint in the header bar rather than shrinking to match the old
   mark's height. Bumped again per Ivars (8/25): +25% from the initial
   36px. */
/* Height brought back down 45px -> 28px (8/27, per Ivars) — 45px was
   sized for the old two-line stacked MP lockup that used to live here
   (see the file history above); the plain United wordmark
   (ualogowhite.png) that replaced it per Derek's 8/27 email is a much
   wider, flatter single-line mark (306x48 natural, ~6.4:1 aspect), so
   the same height rendered it nearly 6x wider than the 50px Bears
   crest sitting right next to it — badly out of balance. 28px keeps
   it comfortably legible while sitting proportionate to the crest. */
.r5-header-logo-link img {
  height: 28px;
}

/* Bears co-brand mark + pipe divider, added per Ivars (8/25) next to
   the MP lockup. Divider height loosely matches the MP mark's visual
   weight rather than its full box height (a full-height rule read as
   too heavy/tall against a two-line stacked logo).
   Bears logo bumped 45px -> 68px -> 75px per Ivars (8/25, two rounds)
   — checked the actual bearswhite.png/bears.png files directly
   (Python PIL bbox check): both are ~85-90% filled by the crest
   itself, so this isn't a whitespace-padding problem, the mark is
   just a dense graphic shape that needs a bigger box than a wordmark
   to carry equal visual weight next to the two-line MP lockup.
   .r5-header's min-height bumped to 110px alongside this so the
   header bar has real vertical relief around the taller logo instead
   of clipping/crowding it (see .r5-header above). */
.r5-header-logo-divider {
  /* display added 8/26 per Ivars — it used to render fine as a direct
     flex-item child of .r5-header-logo-group, but the whole lockup got
     wrapped in the <a> so the whole thing is clickable (8/26), which
     moved this span to be an inline child of an inline-block link
     instead of a flex child. Plain inline elements ignore width/height,
     which collapsed the divider down to nothing. inline-block keeps it
     sized correctly no matter which parent it sits in. */
  display: inline-block;
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
}

.r5-header img.r5-header-cobrand-logo {
  height: 50px;
}

/* Right-aligned per Ivars (8/25) — mirrors the desktop nav also
   sitting on the right (see @media (min-width: 601px) below), so both
   breakpoints share the same logo-left/controls-right layout instead
   of the toggle living on the opposite side from the desktop menu it
   stands in for. */
.r5-menu-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 20;
}

.r5-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #F1F5FC;
}

.r5-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
  z-index: 40;
}

.r5-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.r5-nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 80vw;
  background: #F1F5FC;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 50;
  text-align: left;
  overflow-y: auto;
}

.r5-nav-menu.is-open {
  transform: translateX(0);
}

.r5-nav-close {
  display: block;
  background: none;
  border: none;
  margin: 12px 12px 0 auto;
  padding: 8px;
  font-size: 1.5rem;
  line-height: 1;
  color: #001a4d;
  cursor: pointer;
}

.r5-nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 8px 0 24px;
  text-align: left;
}

.r5-nav-welcome {
  padding: 14px 24px 16px;
  color: #666;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.r5-nav-menu .r5-nav-welcome a {
  display: inline;
  padding: 0;
  color: #999;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: underline;
}

.r5-nav-menu .r5-nav-welcome a:hover {
  color: #001a4d;
}

.r5-nav-menu a {
  display: block;
  padding: 14px 24px;
  color: #001a4d;
  text-decoration: none;
  font-weight: 600;
  text-align: left;
}

.r5-nav-menu a:hover {
  background: #F1F5FC;
}

/* Screen-reader-only text — standard clip-to-1px pattern, used for the
   "Home" label on the icon-only nav link (see .r5-nav-home-link
   below). Kept generic/reusable rather than named for that one use, in
   case another icon-only control needs the same treatment later. */
.r5-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Home" nav item, swapped from a text link to a house icon (8/27, per
   Ivars). Mobile drawer has plenty of room, so the label stays visible
   there next to the icon (overrides .r5-visually-hidden back to a
   normal inline label just for this breakpoint range) — icon-only
   would just look unexplained in a spacious white drawer with every
   other item spelled out in full. Desktop goes icon-only (see the
   @media (min-width: 901px) block below) since that's the point of
   this change — saving horizontal room in the crowded inline nav. */
.r5-nav-home-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.r5-nav-home-link .r5-visually-hidden {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
}

.r5-nav-home-icon {
  flex: 0 0 auto;
}

/* Desktop: full menu inline in the header bar instead of the
   hamburger/slide-out drawer. Threshold raised 601px -> 901px (8/27,
   per Ivars) — at 601-900px the inline nav (6 links: Home, Register
   for MileagePlus®, Miles Tracker, Prizes, Rules, Help, plus the logo
   lockup on the left) had no room to breathe, and by ~750px it was
   outright overlapping the Bears crest (confirmed visually in-browser
   at 750px width). The mobile drawer pattern below this width remains
   otherwise unchanged — this is a single threshold value, no separate
   mirrored max-width block to keep in sync, since mobile is just the
   unguarded base .r5-menu-toggle/.r5-nav-menu styles this block
   overrides. Overrides the mobile drawer's fixed/white-panel/slide-
   transform styling back to a plain inline row sitting in the header
   bar itself, and switches link color to white/light since it's now
   on the dark header background instead of a white drawer. Toggle
   button and its click-to-open overlay are mobile-only mechanisms, so
   both are hidden outright at this width — the nav is simply always
   visible/open on desktop, no JS state needed. (Logo left-alignment is
   handled by .r5-header-logo-link's base rule now — applies at all
   widths, not just here — since the mobile hamburger toggle moved to
   the right too; see .r5-menu-toggle above.) */
@media (min-width: 901px) {
  .r5-menu-toggle,
  .r5-nav-overlay {
    display: none;
  }

  .r5-nav-menu {
    position: absolute;
    top: 50%;
    right: 16px;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    transform: translateY(-50%);
    background: transparent;
    box-shadow: none;
    overflow: visible;
    z-index: 20;
  }

  .r5-nav-close {
    display: none;
  }

  .r5-nav-menu ul {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
  }

  .r5-nav-welcome {
    padding: 0 12px 0 0;
    color: #fff;
    white-space: nowrap;
    /* Base .r5-nav-welcome rule sets text-transform: uppercase and
       font-weight: 600 for the mobile drawer's small-caps
       section-label look — reset to a plain, lighter inline greeting
       here to match the rest of the desktop nav (per Ivars, 8/25). */
    text-transform: none;
    font-weight: 500;
    font-size: 0.9rem;
  }

  .r5-nav-menu .r5-nav-welcome a {
    color: #cfd8f0;
  }

  .r5-nav-menu .r5-nav-welcome a:hover {
    color: #fff;
  }

  .r5-nav-menu a {
    padding: 6px 10px;
    color: #fff;
    white-space: nowrap;
    /* Base .r5-nav-menu a rule is font-weight: 600 at the body's
       default (browser/theme) size — right for the mobile drawer's
       tap targets, too heavy/large sitting inline in the slim desktop
       header bar (per Ivars, 8/25). Lightened and shrunk to read as
       a normal nav link rather than a headline. */
    font-weight: 500;
    font-size: 0.9rem;
  }

  .r5-nav-menu a:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  /* Desktop-only: "Home" goes icon-only here (padding tightened to a
     square-ish tap target instead of the text-link padding above) —
     the mobile drawer keeps the visible label (see .r5-nav-home-link
     base rule), this override only applies once the inline desktop nav
     kicks in, which is the actual point of swapping to an icon: saving
     horizontal room in a now-6-item inline row. */
  .r5-nav-home-link {
    padding: 6px 8px !important;
  }

  .r5-nav-home-link .r5-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }
}

.r5-hero {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: #02146a; /* dark blue sampled from the hero image's left panel */
}

.r5-hero-image {
  width: 100%;
  max-width: 1440px;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .r5-hero-image {
    height: auto;
  }
}

.r5-cobrand-lockup {
  padding: 20px 16px;
  background: #F1F5FC;
}

.r5-cobrand-lockup img {
  max-width: 280px;
  width: 100%;
  height: auto;
}

/* Striped tables for the Miles Awarded Tracker (Past Results /
   Upcoming Games) — per Ivars, replacing the earlier plain bullet
   lists so both sections read as structured data at a glance. */
.r5-tracker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.r5-tracker-table th {
  text-align: left;
  padding: 10px 12px;
  background: #1414d2;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.r5-tracker-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e4e8f0;
}

.r5-tracker-table tbody tr:nth-child(even) {
  background: #F1F5FC;
}

.r5-tracker-table tbody tr:hover {
  background: #e8edf9;
}

/* Compact status badge for the Past Results table — standard NFL
   injury-report shorthand, per Ivars, next to the plain-English
   "Rome inactive" text so the row is scannable either way. */
.r5-tag-inj {
  display: inline-block;
  background: #c0392b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
}

.r5-prize-band {
  background: #1414d2;
  color: #fff;
  text-align: center;
  padding: 32px 16px;
}

/* Campaign tagline ("Rome Could Get You to *That* Rome"), added per
   Derek's R1 creative feedback (8/25) — sits above the existing h1/
   subtitle copy in the same blue band rather than baked into the hero
   image itself (Derek's original ask put it in the image with a blue
   box around it; kept as real HTML/CSS instead so it stays editable
   and matches the "transparent" treatment he wanted for the logo in
   that same creative). Bigger/bolder than the h1 below it so it reads
   as the primary headline, with the h1 acting as a secondary CTA line.
   The <em> around "that" mirrors the asterisk emphasis in Derek's
   reference image (*THAT*) without literally rendering asterisks. */
/* Sized up 2rem -> 2.75rem per Ivars (8/25) — asterisks in the copy
   itself are literal characters now (see page-landing.php), not a
   styling cue, so there's no separate em/emphasis rule needed here. */
/* Tightened tracking + line-height (8/28, per Ivars) — comparing
   against the reference United x Bears print ad ("Rome Could Get You
   to *That* Rome"), the live tagline was rendering with default/loose
   letter-spacing next to that ad's noticeably tighter, denser
   kerning. Tested live in-browser (font-weight 600/700/800/900 and a
   range of letter-spacing/line-height values) before landing here —
   weight stays at 700 (already correct, matches the original; 800/900
   both read as too heavy/bold once tracking tightened). -0.05em
   tracking is what actually closes the gap with the reference.
   line-height only visibly matters if/when this wraps to 2 lines at
   narrower widths (it's single-line at typical desktop widths), tightened
   from 1.1 to 0.95 to match the same denser, stacked feel. */
.r5-prize-band-tagline {
  font-size: 2.75rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin: 0 0 16px 0;
}

/* Width capped (8/27, per Ivars) — at wider viewports this was
   stretching edge-to-edge across the full blue band, reading as a
   loose, thin paragraph rather than a tight block under the tagline.
   900px matches the width already used for .r5-fork/.r5-prize-cards
   further down this same page, so the block reliably wraps to 2 lines
   at typical desktop widths without introducing a new one-off width
   value. Centered within .r5-prize-band's own text-align: center via
   auto margins, same pattern as .r5-container elsewhere in the theme. */
.r5-prize-band h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 auto 12px;
  max-width: 900px;
}

/* Switched to solid brand blue + white text per Ivars (8/25) — mirrors
   the header treatment (.r5-header, #1414d2) so the page feels
   bookended by the same brand color top and bottom, instead of a plain
   light-gray-on-white footer that shared nothing visually with the
   header above it. Link color lightened (not pure white) so links are
   still distinguishable from the surrounding white-ish body text. */
.r5-footer {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  background: #1414d2;
  padding: 24px 0;
}

.r5-footer-legal {
  margin: 0 0 16px 0;
}

.r5-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.r5-footer-left {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.r5-footer a {
  color: #fff;
  text-decoration: none;
}

.r5-footer a:hover {
  text-decoration: underline;
}

.r5-footer-right strong {
  color: #fff;
}

@media (max-width: 520px) {
  .r5-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Gravity Forms baseline tidy-up */
body .gform_wrapper .gfield_label {
  font-weight: 600;
  color: #001a4d;
}

/* GF's "orbital" theme names its button wrapper gform-footer (hyphen)
   while older GF markup/docs use gform_footer (underscore) — target
   the button itself by its own class rather than relying on either
   ancestor name, so this survives GF theme/version differences. */
.r5-btn-primary,
body .gform_wrapper button.gform_button,
body .gform_wrapper input.gform_button {
  display: block !important;
  background: #5b3fd6 !important;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 18px 24px !important;
  font-weight: 600;
  width: 100% !important;
  margin: 0 auto;
  font-size: 1.1rem !important;
  cursor: pointer;
}

body .gform_wrapper button.gform_button:hover,
body .gform_wrapper input.gform_button:hover {
  background: #4c33b8 !important;
}

/* GF wraps the button in a footer div that isn't itself centered by
   default — center it so the (now max-width-capped) button doesn't
   just hug the left edge of a wide form. */
body .gform_wrapper .gform_footer,
body .gform_wrapper .gform_page_footer,
body .gform_wrapper div[class*="gform-footer"] {
  text-align: center;
}

/* Secondary/"ghost" action — visually lighter than .r5-btn-primary so
   it reads as an alternate path, not the main call to action. Added
   for the landing page's "skip to enrollment" link (per Ivars: the
   existing blank-MP-number → /register/ path wasn't obvious enough as
   its own option) — kept generic/reusable rather than one-off styled,
   in case another secondary action needs the same treatment later. */
.r5-btn-ghost {
  display: block;
  background: transparent;
  color: #5b3fd6;
  border: 1px solid #c7bdf0;
  border-radius: 6px;
  /* Match .r5-btn-primary's box exactly (padding is 1px less on each
     side to account for the 1px border, so both buttons end up the
     same overall height/width) so this reads as a true sibling action
     next to the main button, not a smaller afterthought. Kept visually
     quieter than the primary button on purpose — thin light-purple
     border instead of a heavy 2px solid one, and regular (not bold)
     weight — so it reads as a secondary option rather than competing
     with "Next" for attention. */
  padding: 17px 23px;
  width: 100%;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 1.1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.r5-btn-ghost:hover {
  background: rgba(91, 63, 214, 0.06);
  border-color: #5b3fd6;
}

/* Homepage MP-member fork (page-landing.php) — replaces the old
   single lookup-form-first-then-ghost-button flow. Per Ivars: show
   both paths as equal-weight side-by-side options on desktop with a
   divider between them, rather than a primary/secondary button pair,
   since "member" vs. "not a member" isn't a main-path/escape-hatch
   relationship — it's a genuine either/or fork. Stacks vertically
   with a horizontal divider below 600px (matches the site's existing
   mobile breakpoint; see the other @media (max-width: 600px) block
   above) since two side-by-side columns don't have room to breathe on
   a phone-width screen. */
/* MileagePlus lockup above the fork prompt, added per Derek's 8/27
   email — sits on the page's white body background, between the blue
   hero band above and .r5-fork-prompt below. Height matched to what
   the same lockup used in the site header (45px, see
   .r5-header-logo-link img) for visual consistency across the two
   spots it now appears; margin-top gives it the same breathing room
   .r5-fork-prompt used to have as the section's first element, and
   margin-bottom hands off to .r5-fork-prompt's own margin-top so the
   two don't double up spacing. */
.r5-landing-mp-logo {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* Bumped 45px -> 72px (8/27, per Ivars) — 45px matched the old header
   sizing, but standing alone in open white space with real margin
   around it, it read as too small/lost rather than a real section
   element. */
.r5-landing-mp-logo img {
  height: 72px;
}

.r5-fork-prompt {
  font-size: 1.1rem;
  font-weight: 600;
  color: #001a4d;
  margin-top: 8px;
  margin-bottom: 40px;
}

/* Widened 640px -> 900px per Ivars (8/25) — this is the actual
   decision point on the page (member vs. not), so it should be the
   widest/most prominent element, not the prize-explainer cards below
   it. .r5-prize-cards now matches this same 900px width instead of
   its earlier wider breakout treatment, so the two sections read as
   one consistent content column with the fork leading visually.
   Same breakout technique as .r5-prize-cards below (negative margin,
   not just a bigger max-width) — needed because .r5-fork sits inside
   .r5-container's 720px cap, which would otherwise clip it regardless
   of max-width here. See .r5-prize-cards' comment for the full
   explanation; @media block mirrors that one too. */
.r5-fork {
  display: flex;
  align-items: stretch;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  margin-left: -90px;
  margin-right: -90px;
}

@media (max-width: 1100px) {
  .r5-fork {
    margin-left: auto;
    margin-right: auto;
  }
}

.r5-fork-option {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  background: #f2f4f8;
  border: 1px solid #d1dbed;
  border-radius: 8px;
  padding: 32px 20px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.r5-fork-option:hover {
  background: #eaeef7;
  border-color: #5b3fd6;
}

.r5-fork-option-label {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1414d2;
  margin-bottom: 6px;
}

.r5-fork-option-sub {
  font-size: 0.9rem;
  color: #5a6b8c;
}

/* Explicit button added INSIDE each gray fork card per Ivars (8/25) —
   the card itself stays the light gray/thin-border look, but the card
   alone didn't read as clickable enough, so a real button now sits
   inside it as the obvious tap target. The whole card (.r5-fork-option,
   the <a>) is still the actual link/hit area — this is a visual
   button, not a second nested link — so the full card remains
   clickable, this just shows the user where.
   Colors intentionally match .r5-btn-primary (the Gravity Forms
   submit-button styling above) exactly — #5b3fd6 / #4c33b8 hover —
   per Ivars (8/25): these should mirror the GF buttons used elsewhere
   in the flow (lookup/register forms) so a user sees the same button
   language start to finish, not a different blue introduced only on
   this one page. */
.r5-fork-option-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 24px;
  background: #5b3fd6;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.r5-fork-option:hover .r5-fork-option-btn {
  background: #4c33b8;
}

/* The "big-ish pipe" divider between the two fork options — a plain
   vertical rule, not a bordered box, so it reads as a divider rather
   than a third option. Hidden on mobile where the options stack
   instead (see @media block below). */
.r5-fork-divider {
  width: 2px;
  background: #c7bdf0;
  align-self: stretch;
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .r5-fork {
    flex-direction: column;
    gap: 16px;
  }

  .r5-fork-divider {
    display: none;
  }
}

/* Miles-awarded-so-far stat on the landing page, added per Derek's
   feedback (8/25) — links through to the full Miles Awarded Tracker
   page (page-tracker.php), which is where the real hero number and
   full history/upcoming tables live; see page-landing.php for the
   markup. Number color matches the brand blue used for the tracker's
   own hero number (#0033a0) rather than the newer #1414d2 header
   blue, so it stays consistent with that page's existing number
   styling — the two live right next to each other conceptually (this
   is a preview of that exact figure).

   Full-bleed light gray band added per Ivars (8/25) — the fork, prize
   cards, and this stat were all sitting on the same flat white
   background with nothing but whitespace/card fills telling them
   apart, so this now gets its own visually distinct "proof" section
   instead of floating between two card rows. 100vw + calc(50% - 50vw)
   breaks it out to full viewport width regardless of .r5-container's
   720px cap/padding (same effect as the negative-margin breakout used
   on .r5-fork/.r5-prize-cards, but this needs to go edge-to-edge, not
   just wider). */
.r5-miles-stat {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 40px;
  /* Cancels .r5-container's py-4 bottom padding (Bootstrap's 1.5rem/
     24px) per Ivars (8/25) — this is the last element in that
     container, so without this the full-bleed gray band stops short
     of the footer and leaves a strip of plain white page background
     between them. Pulls the band flush against the footer instead. */
  margin-bottom: -24px;
  padding: 40px 20px;
  background: #f2f4f8;
  box-sizing: border-box;
}

.r5-miles-stat-value {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  color: #0033a0;
}

.r5-miles-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
  color: #555;
}

.r5-miles-stat:hover .r5-miles-stat-label {
  text-decoration: underline;
}

/* "What You Could Win" section title, added per Ivars (8/25) — was
   reusing .r5-fork-prompt's own spacing (8px top / 40px bottom), which
   was tuned for that being the very first element under the hero band,
   not for sitting between the fork cards above and the prize cards
   below. First pass (56px top) overcorrected and looked like too big
   a gap on its own — dialed back to 40px to match the page's existing
   section rhythm (same gap used between the fork prompt/fork and
   fork/miles-stat elsewhere on this page) rather than a bespoke value. */
.r5-prize-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #001a4d;
  margin-top: 40px;
  margin-bottom: 24px;
}

/* Prize explainer cards, added per Derek's creative feedback (8/25) —
   see page-landing.php for the markup + full context. Same
   background/border/radius language as .r5-fork-option above so this
   reads as part of the same card system rather than a new visual
   pattern; stacks to one column on mobile like .r5-fork does.

   Width matched to .r5-fork's 900px (see above) per Ivars (8/25) —
   originally these were widened further than the fork buttons, which
   put visual emphasis on the wrong element (the prize explainer, not
   the actual member/non-member decision point). Same breakout margin
   math as .r5-fork so both sections align to one consistent content
   column instead of the cards being wider than the choice above them.

   margin-top removed (was 40px) now that .r5-prize-title owns the gap
   above this section — .r5-prize-title's own 24px bottom margin is the
   only spacing between the heading and the cards now, so they don't
   stack two separate top margins into one oversized gap. */
.r5-prize-cards {
  display: flex;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  margin-left: -90px;
  margin-right: -90px;
}

@media (max-width: 1100px) {
  .r5-prize-cards {
    margin-left: auto;
    margin-right: auto;
  }
}

.r5-prize-card {
  flex: 1 1 0;
  background: #f2f4f8;
  border: 1px solid #d1dbed;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
}

.r5-prize-card-img {
  display: block;
  width: 100%;
  height: auto;
  /* Figma slot is 370x220; a fixed 180px height was cropping heads/the plane on wide cards. */
  aspect-ratio: 370 / 220;
  object-fit: cover;
}

/* Top-aligned crop for the Rome Odunze card image (rome-field.jpg) —
   it's a tall portrait action shot, so the default centered cover crop
   was cutting into his head/arms. object-position anchors the crop
   from the top instead. Only applied to this one image via its own
   modifier class — the Rome-the-city photo keeps the default centered
   crop, which suits its wide landscape framing fine. */
.r5-prize-card-img--top {
  object-position: top;
}

.r5-prize-card-body {
  padding: 20px 24px 24px;
}

.r5-prize-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #001a4d;
  margin: 0 0 8px 0;
}

.r5-prize-card-copy {
  font-size: 0.95rem;
  color: #5a6b8c;
  margin: 0;
}

/* Prizes page (page-prizes.php) section titles/body copy — same
   visual language as .r5-prize-card-title/.r5-prize-card-copy above
   (bold navy title, muted blue-gray body) instead of bare Bootstrap
   h2.h5/p defaults, which rendered too flat/undifferentiated next to
   the bolder, larger titles shown in the Figma Mobile Prizes frame. */
.r5-prize-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #001a4d;
  margin: 0 0 8px 0;
}

.r5-prize-section-copy {
  font-size: 0.95rem;
  color: #5a6b8c;
  margin: 0;
}

@media (max-width: 600px) {
  .r5-prize-cards {
    flex-direction: column;
  }

  /* Root cause of cards rendering as near-invisible thin lines on
     mobile (found 8/25, live on Ivars' phone): .r5-prize-card's
     flex: 1 1 0 (set above for the desktop 2-column row) sets
     flex-basis: 0. In a row that's fine — flex-grow fills the
     available width — but once flex-direction switches to column
     here, flex-basis: 0 means each card STARTS at zero height and
     only grows to fill leftover space in the flex container's cross
     axis. .r5-prize-cards has no defined height of its own (it's
     auto-sized by its children), so there's no space to grow into,
     and cards collapsed to ~0px tall. Combined with .r5-prize-card's
     overflow: hidden (there for rounded-corner image clipping), the
     collapsed cards clipped all their content to invisible slivers —
     visible as two thin gray border lines instead of real cards.
     Fix: flex: none on mobile so each card sizes to its actual
     content height instead of participating in flex-grow/shrink. */
  .r5-prize-card {
    flex: none;
  }
}


/* =========================================================
   Somebody Find Phil — picks form + confirmation
   ========================================================= */
.r5-picks-form { max-width: 560px; margin: 0 auto; }
.r5-picks-note { text-align: center; color: #4a5278; margin-bottom: 1.5rem; }
.r5-pick { margin-bottom: 1rem; }
.r5-pick-label { display: block; font-weight: 700; color: #001a4d; margin-bottom: .35rem; }
.r5-pick-field { position: relative; }
.r5-pick-input { height: 52px; font-size: 1.05rem; }
.r5-pick-input.is-invalid { border-color: #c4122f; }
.r5-pick-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; background: #F1F5FC; border: 1px solid #c9cde0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,26,77,.15); max-height: 280px; overflow-y: auto; }
.r5-pick-list[hidden] { display: none; }
.r5-pick-list li { padding: .65rem .9rem; cursor: pointer; color: #001a4d; }
.r5-pick-list li.is-active, .r5-pick-list li:hover { background: #eef0ff; }
.r5-pick-submit { display: block; width: 100%; margin-top: 1rem; padding: .95rem 1.25rem; border: 0; border-radius: 999px; background: #1414d2; color: #fff; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.r5-pick-submit:hover, .r5-pick-submit:focus { background: #0f0fa8; }
a.r5-confirm-cta { max-width: 560px; margin: 24px auto 0; text-align: center; text-decoration: none; color: #fff; }
a.r5-confirm-cta:hover, a.r5-confirm-cta:focus { color: #fff; text-decoration: none; }

.r5-picks-locked { list-style: none; margin: 0 auto 1rem; padding: 0 1rem; max-width: 560px; background: #F1F5FC; border: 1px solid #d6daf0; border-radius: 10px; }
.r5-picks-locked li { display: flex; align-items: baseline; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid #e3e6f5; }
.r5-picks-locked li:last-child { border-bottom: 0; }
.r5-picks-locked-slot { flex: 0 0 1.5rem; color: #667; font-size: .85rem; }
.r5-picks-locked-code { flex: 0 0 3.5rem; font-weight: 800; font-size: 1.25rem; color: #1414d2; letter-spacing: .04em; }
.r5-picks-locked-name { color: #001a4d; }
.r5-confirm-next { max-width: 560px; margin: 0 auto; color: #4a5278; }

/* --- SFP welcome: intro / How to enter block (between the MP fork and
   "What You Could Win"), and empty prize-image slot until United sends art. --- */
.r5-intro {
  max-width: 720px;
  margin: 28px auto 8px;
  text-align: center;
  color: #001a4d;
}
.r5-intro p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 14px;
}
.r5-intro-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #001a4d;
  margin: 22px 0 10px;
}
.r5-intro-list {
  display: inline-block;
  text-align: left;
  margin: 0 auto 8px;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.r5-intro-list li { margin-bottom: 4px; }
.r5-prize-card-img--empty { background: #d3d7e0; }

/* Confirmation: Greece "Announced" row + count (matches Figma / autoresponder) */
.r5-picks-heading { font-weight: 700; color: #001a4d; margin: 8px 0; }
.r5-picks-locked-announced { opacity: .65; }
.r5-picks-locked-tag { margin-left: auto; font-size: .75rem; color: #5a6b8c; }

/* Figma sync (Nov 3): guess page, required labels, confirmation banner */
.r5-required { font-weight: 400; font-size: .85em; color: #c8421a; }
.r5-announced-box { display: flex; align-items: center; gap: .6rem; max-width: 560px; margin: 0 auto 1.5rem; padding: .9rem 1rem; background: #eaf1ff; border-radius: 8px; color: #001a4d; font-weight: 700; }
.r5-announced-check { color: #1414d2; font-size: 1.2rem; }
.r5-pick-input::placeholder { color: #8a93ad; }
.r5-confirm-banner { max-width: 560px; margin: 0 auto 1.5rem; padding: 1rem; background: #eaf1ff; border-radius: 8px; color: #001a4d; text-align: center; }

/* Welcome intro per Figma: left-aligned body, bold lead paragraph, centered "How to enter:" heading */
.r5-intro { text-align: left; }
.r5-intro-lead { font-weight: 700; }
.r5-intro-title { text-align: center; }


/* Blue band per Figma: Montserrat Bold uppercase title, Medium/Bold subtitle.
   Montserrat is not bundled with the theme; falls back to Neue Plak Text. */
.r5-prize-band { padding: 22px 16px; }
.r5-prize-band h1 {
  font-family: 'Montserrat', 'Neue Plak Text', 'Helvetica Neue', Arial, sans-serif;
  font-size: 30px; line-height: 34px; letter-spacing: -0.05em;
  text-transform: uppercase; margin: 0 auto 10px;
}
.r5-prize-band p:not(.r5-prize-band-tagline) {
  font-family: 'Montserrat', 'Neue Plak Text', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; line-height: 22px; font-weight: 500;
  max-width: 856px; margin: 0 auto;
}
@media (min-width: 768px) {
  .r5-prize-band { padding: 40px 24px; }
  .r5-prize-band h1 { font-size: 50px; line-height: 1.1; margin-bottom: 16px; }
  .r5-prize-band p:not(.r5-prize-band-tagline) { font-size: 20px; line-height: 1.3; font-weight: 700; }
}

/* Nav content capped to the same width as the footer (.container) so the
   bar's black/blue background stays full-bleed but the logo + links don't
   stretch on ultra-wide screens. Absolutely-positioned logo/nav children
   anchor to this box instead of the full-width header. */
.r5-header { padding: 0; }
.r5-header-inner {
  position: relative;
  min-height: 95px;
}

/* Nav/logo sit inside .container (which already supplies side padding), so
   drop the old 16px absolute offsets or the inset doubles up. */
/* Header box matches the hero image's max width so the logo/nav edges line
   up with the hero; absolute children ignore padding, so offset explicitly. */
.r5-header-inner { max-width: 1440px; }
.r5-header-logo-group { left: 16px; }
@media (min-width: 901px) {
  .r5-header-inner { padding-left: 0; padding-right: 0; }
  .r5-nav-menu { right: 16px; }
}

/* Site-wide: no pure-white backgrounds — everything uses #F1F5FC. */
:root { --bs-body-bg: #F1F5FC; --bs-white: #F1F5FC; }
body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="number"],
body .gform_wrapper input[type="password"],
body .gform_wrapper select,
body .gform_wrapper textarea,
.r5-pick-input { background-color: #F1F5FC; }


/* Welcome: intro, fork and prize cards share one 900px column (Figma "Frame 1171276083").
   Previously the intro was 688px and the cards ~868px. */
.r5-intro, .r5-fork, .r5-prize-cards {
  box-sizing: border-box;
  width: min(900px, calc(100vw - 32px));
  max-width: none;
  margin-left: calc(50% - min(450px, 50vw - 16px));
  margin-right: 0;
}

/* Prizes: "How Winners Are Selected" + footnote share the cards' 900px column
   and get real spacing (they were in the narrow 720 container, flush under the cards). */
.r5-prize-section, .r5-prize-footnote {
  box-sizing: border-box;
  width: min(900px, calc(100vw - 32px));
  margin-left: calc(50% - min(450px, 50vw - 16px));
  margin-right: 0;
}
.r5-prize-section { margin-top: 48px; margin-bottom: 0; }
.r5-prize-section-title { font-size: 1.25rem; font-weight: 700; color: #001a4d; margin: 0 0 12px; }
.r5-prize-section-copy { color: #5a6b8c; line-height: 1.5; margin: 0; }
.r5-prize-footnote { margin-top: 24px; margin-bottom: 24px; }

/* Confirmation: "Your Picks" heading sits in the same 560px column as the picks card */
.r5-picks-heading { max-width: 560px; margin: 8px auto; text-align: left; }

/* Guess page consent checkboxes: roomier rows + 44px-ish tap targets for phones */
.r5-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 8px;
  padding: 10px 0;
  min-height: 44px;
}
.r5-consent.mt-4 { margin-top: 28px !important; }
.r5-consent .form-check-input {
  float: none;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid #5a6b8c;
  background-color: #F1F5FC;
}
.r5-consent .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; }
.r5-consent .form-check-label {
  flex: 1 1 auto;
  padding-top: 2px;
  line-height: 1.45;
  cursor: pointer;
}
.r5-consent .form-check-label a { padding: 4px 0; display: inline-block; }
.r5-pick-submit { margin-top: 20px; }

/* Airport picker: chevron makes each box a dropdown as well as a type-ahead */
.r5-pick-input { padding-right: 46px; }
.r5-pick-toggle { position: absolute; top: 0; right: 0; width: 46px; height: 52px; padding: 0; border: 0; background: transparent; color: #1414d2; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.r5-pick-toggle svg { transition: transform .15s ease; }
.r5-pick-input[aria-expanded="true"] ~ .r5-pick-toggle svg { transform: rotate(180deg); }
.r5-pick-list { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Bootstrap's invalid-state icon sat on top of the dropdown chevron; the red border + message are enough */
.r5-pick-input.is-invalid, .was-validated .r5-pick-input:invalid { background-image: none; padding-right: 46px; }

/* Official Rules page (long-form legal copy) */
.r5-rules { line-height: 1.55; }
.r5-rules h2 { font-size: 20px; font-weight: 700; margin: 32px 0 12px; }
.r5-rules p { margin: 0 0 14px; }
.r5-rules blockquote { margin: 0 0 14px; padding-left: 20px; border-left: 3px solid #C9D3EA; }
.r5-rules blockquote p { margin: 0 0 10px; }
.r5-rules a { overflow-wrap: anywhere; }