/* =========================================================================
   Agentic Football Cup — styles.css
   Single-page landing site styles. System fonts only (no web-font fetch).
   Palette and rules are sourced from design.md Section 5.

   Sections:
     1. Reset and base
     2. Typography
     3. Layout container
     4. Skip link and visually-hidden helper
     5. Hero section
     6. Primary CTA (button-styled link)
     7. Confirmation panel
     8. Content sections (How it works, Experience)
     9. Footer
    10. Sticky CTA (mobile bottom / desktop top)
    11. Focus rings
    12. Responsive breakpoints
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Reset and base
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Honour the [hidden] attribute everywhere — sticky CTA and confirmation
   panel both rely on it being toggled by JS. */
*[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

html {
  /* Prevent horizontal overflow at any viewport between 320 and 1920px. */
  overflow-x: hidden;
}

body {
  background-color: #FFFFFF;
  color: #1F2937;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* -------------------------------------------------------------------------
   2. Typography
   ------------------------------------------------------------------------- */

h1,
h2,
h3 {
  color: #0F2A44;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 {
  font-size: 28px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 24px;
  margin-top: 0;
}

p {
  margin: 0 0 1em;
}

a {
  color: #0F2A44;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}


/* -------------------------------------------------------------------------
   3. Layout container
   ------------------------------------------------------------------------- */

main {
  display: block;
  margin: 0 auto;
  max-width: 1140px;
  padding: 24px 20px 48px;
  width: 100%;
}

section {
  margin: 0 auto 48px;
  max-width: 1140px;
  padding: 24px 0;
}


/* -------------------------------------------------------------------------
   4. Skip link and visually-hidden helper
   ------------------------------------------------------------------------- */

/* Off-screen by default, slides in when focused — used for keyboard
   skip-to-main navigation. */
.skip-link {
  background-color: #0F2A44;
  border-radius: 4px;
  color: #FFFFFF;
  font-weight: 600;
  left: -9999px;
  padding: 12px 16px;
  position: absolute;
  text-decoration: none;
  top: -9999px;
  z-index: 100;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 8px;
  top: 8px;
  outline: 3px solid #FF8200;
  outline-offset: 2px;
}

/* WCAG-standard visually-hidden pattern. Used for the
   "(opens Amazon Pulse signup in a new tab)" CTA suffix and similar. */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


/* -------------------------------------------------------------------------
   5. Hero section
   ------------------------------------------------------------------------- */

.hero {
  padding-top: 16px;
}

.brand-mark {
  color: #0F2A44;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

#hero-headline {
  margin-bottom: 16px;
  /* Mobile baseline; desktop bumps this up via the breakpoint below. */
  font-size: 28px;
}

.hero-subhead {
  color: #1F2937;
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 620px;
}

.cta-wrapper {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
}

/* Tiny invisible sentinel — IntersectionObserver in app.js watches this to
   decide when the sticky CTA should appear. */
#hero-sentinel {
  height: 1px;
  margin-top: 8px;
  width: 100%;
}

.hero-image {
  border-radius: 12px;
  margin-top: 16px;
  object-fit: cover;
  width: 100%;
}


/* -------------------------------------------------------------------------
   6. Primary CTA
   Navy label on accent orange to clear WCAG AA (~7.4:1).
   Hit target is at least 48x48px (16px horizontal + 14px vertical
   padding plus a 20px line-height label = 48px tall).
   ------------------------------------------------------------------------- */

.cta-primary {
  background-color: #FF8200;
  border: 2px solid #FF8200;
  border-radius: 8px;
  color: #0F2A44;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 48px;
  padding: 14px 20px;
  text-decoration: none;
  transition: box-shadow 120ms ease-in-out, transform 120ms ease-in-out;
}

.cta-primary:hover {
  box-shadow: 0 4px 14px rgba(15, 42, 68, 0.25);
  text-decoration: none;
  transform: translateY(-1px);
}

.cta-primary:active {
  transform: translateY(0);
}

.external-icon {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
}

.cta-microcopy {
  color: #1F2937;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.cta-microcopy-secondary {
  color: #1F2937;
  opacity: 0.85;
}


/* -------------------------------------------------------------------------
   7. Confirmation panel
   Revealed by JS after the CTA is clicked. Uses role="status" + aria-live
   so screen readers announce it.
   ------------------------------------------------------------------------- */

.confirmation-panel {
  background-color: #F4F6F8;
  border-left: 4px solid #FF8200;
  border-radius: 6px;
  color: #1F2937;
  font-size: 16px;
  line-height: 1.55;
  margin-top: 8px;
  padding: 14px 16px;
  max-width: 620px;
}

.confirmation-link {
  color: #0F2A44;
  font-weight: 600;
}


/* -------------------------------------------------------------------------
   8. Content sections
   ------------------------------------------------------------------------- */

.how-it-works {
  background-color: #F4F6F8;
  border-radius: 12px;
  padding: 32px 24px;
}

.how-it-works ul {
  margin: 0;
  padding-left: 20px;
}

.how-it-works li {
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 8px;
}

.how-it-works li:last-child {
  margin-bottom: 0;
}

.experience {
  padding: 16px 0;
}

.experience p {
  font-size: 17px;
  line-height: 1.65;
  max-width: 720px;
}


/* -------------------------------------------------------------------------
   9. Footer
   ------------------------------------------------------------------------- */

footer {
  border-top: 1px solid #E5E7EB;
  color: #1F2937;
  margin: 48px auto 0;
  max-width: 1140px;
  padding: 24px 20px 48px;
}

footer p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 8px;
}

footer a {
  color: #0F2A44;
  font-weight: 600;
}

.copyright {
  color: #1F2937;
  opacity: 0.75;
}


/* -------------------------------------------------------------------------
   10. Sticky CTA
   Mobile (<768px): full-width bar pinned to the bottom.
   Desktop (≥768px): full-width slim bar pinned to the top with brand mark
   on the left, CTA in the centre/right, dismiss button on the far right.
   The element is hidden by default ([hidden]) and revealed by JS once the
   hero sentinel scrolls out of view.
   ------------------------------------------------------------------------- */

.sticky-cta {
  align-items: center;
  background-color: #0F2A44;
  bottom: 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  color: #FFFFFF;
  display: flex;
  gap: 12px;
  left: 0;
  padding: 12px 16px;
  position: fixed;
  right: 0;
  z-index: 50;
}

.sticky-cta-brand {
  color: #FFFFFF;
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  /* Hidden on small screens to keep the bottom bar uncluttered. */
  display: none;
}

.cta-sticky {
  /* Sticky CTA reuses the primary CTA visual treatment. */
  flex: 1 1 auto;
  font-size: 16px;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
}

.sticky-cta-dismiss {
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 6px;
  color: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sticky-cta-dismiss:hover {
  text-decoration-thickness: 2px;
}


/* -------------------------------------------------------------------------
   11. Focus rings
   Every interactive element gets a high-contrast 3px accent ring with a 2px
   white inner offset for separation from the underlying surface. Anchored
   on :focus-visible so mouse clicks don't trigger the ring.
   ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
  outline: 3px solid #FF8200;
  outline-offset: 2px;
}

.cta-primary:focus-visible {
  /* Inner white ring + outer accent ring keeps the focus visible whether
     the button sits on white, panel grey, or navy. */
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #FF8200;
  outline: none;
}

.cta-sticky:focus-visible {
  box-shadow: 0 0 0 2px #0F2A44, 0 0 0 5px #FF8200;
  outline: none;
}

.sticky-cta-dismiss:focus-visible {
  border-color: #FF8200;
  outline: 3px solid #FF8200;
  outline-offset: 2px;
}

.confirmation-link:focus-visible {
  outline: 3px solid #FF8200;
  outline-offset: 3px;
  border-radius: 2px;
}


/* -------------------------------------------------------------------------
   12. Responsive breakpoints
   ------------------------------------------------------------------------- */

/* ≥768px: desktop / tablet layout. CTA must stay above the fold at
   1366×768; brand mark + headline + subhead + CTA + microcopy are all
   stacked above the hero image, so the image is sized to the side or
   sits below without pushing the CTA out of view. */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 44px;
  }

  h2 {
    font-size: 28px;
  }

  main {
    padding: 32px 32px 64px;
  }

  .hero {
    align-items: start;
    column-gap: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
      "brand   image"
      "head    image"
      "sub     image"
      "cta     image"
      "sentinel image";
    padding-top: 24px;
  }

  .brand-mark    { grid-area: brand; }
  #hero-headline { grid-area: head; }
  .hero-subhead  { grid-area: sub; }
  .cta-wrapper   { grid-area: cta; }
  #hero-sentinel { grid-area: sentinel; }
  .hero-image    {
    grid-area: image;
    align-self: center;
    margin-top: 0;
    max-height: 480px;
  }

  #hero-headline {
    font-size: 44px;
    margin-bottom: 20px;
  }

  .hero-subhead {
    font-size: 20px;
    margin-bottom: 28px;
  }

  /* Sticky CTA flips to a slim top bar with brand on the left,
     CTA centred-right, dismiss far right. */
  .sticky-cta {
    bottom: auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    padding: 10px 24px;
    top: 0;
  }

  .sticky-cta-brand {
    display: block;
    flex: 1 1 auto;
  }

  .cta-sticky {
    flex: 0 0 auto;
  }

  .how-it-works {
    padding: 40px 32px;
  }
}

/* ≥1024px: a touch more breathing room on full-size desktop. */
@media (min-width: 1024px) {
  main {
    padding: 40px 32px 72px;
  }

  #hero-headline {
    font-size: 52px;
  }
}

/* Honour reduced-motion preferences for the smooth-scroll and CTA hover
   transition. */
@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }

  .cta-primary {
    transition: none;
  }

  .cta-primary:hover {
    transform: none;
  }
}


/* -------------------------------------------------------------------------
   13. Locale-aware hero noun swap
   The inline script in <head> sets data-use-soccer on <html> before the
   first paint. We render BOTH nouns in the markup and hide the wrong one
   purely with CSS, so there is zero layout shift and the headline still
   reads correctly when JavaScript is disabled (CSS shows "football" by
   default — the data attribute only flips it to "soccer").
   ------------------------------------------------------------------------- */

[data-use-soccer="true"] .word-football { display: none; }
[data-use-soccer="false"] .word-soccer  { display: none; }

/* Fallback when the inline script never set the attribute (e.g., JS
   disabled or the script threw before assignment) — keep the default
   "football" noun and hide "soccer". */
:root:not([data-use-soccer]) .word-soccer { display: none; }