/* ===========================================================================
   eo-mobile.css — mobile navigation, tap targets and legibility.
   Loaded last on every page so it wins over the inline/page styles.
   Nothing here changes the desktop design: every rule is inside a
   max-width media query or only affects the mobile-only drawer.
   =========================================================================== */

/* --- Hamburger -----------------------------------------------------------
   Hidden on desktop, where .nav-links is visible. */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  margin-left: .35rem;
  cursor: pointer;
  border-radius: 8px;
  color: #1D3B37;
  flex: 0 0 auto;
}
.nav-burger:focus-visible {
  outline: 2px solid var(--teal, #3ECFC9);
  outline-offset: 2px;
}
.nav-burger span {
  display: block;
  position: relative;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s ease, background-color .1s ease;
}
.nav-burger span::before,
.nav-burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s ease, top .28s ease;
}
.nav-burger span::before { top: -7px; }
.nav-burger span::after  { top:  7px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --- Drawer --------------------------------------------------------------- */
.eo-drawer {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1.25rem 1.5rem 3rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), visibility .3s;
}
.eo-drawer.open { transform: translateX(0); visibility: visible; }

.eo-drawer a {
  display: block;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  color: #1D3B37;
  text-decoration: none;
  padding: .85rem .25rem;          /* >= 44px tall */
  min-height: 44px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.eo-drawer a:active { color: var(--teal-dark, #1A7F7A); }

.eo-drawer .eo-drawer-group { margin-top: .5rem; }
.eo-drawer .eo-drawer-title {
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-dark, #1A7F7A);
  padding: 1.1rem .25rem .35rem;
  border-bottom: 2px solid rgba(62, 207, 201, .18);
}
.eo-drawer .eo-drawer-group a {
  font-weight: 600;
  font-size: .88rem;
  padding-left: .25rem;
  color: #34534F;
}
.eo-drawer a.mm-disabled { color: rgba(30, 100, 95, .38); pointer-events: none; }
.eo-drawer .eo-drawer-cta + .eo-drawer-cta { margin-top: .6rem; }
.eo-drawer .eo-drawer-cta-alt {
  background: var(--teal-dark, #1A7F7A);
  color: #fff;
}
.eo-drawer .eo-drawer-cta {
  display: block;
  margin-top: 1.6rem;
  text-align: center;
  background: var(--yellow, #F2C937);
  color: var(--ink, #0D2220);
  font-family: Nunito, sans-serif;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .78rem;
  border: 0;
  border-radius: 100px;
  padding: 1rem 1.4rem;
  min-height: 48px;
}
body.eo-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .eo-drawer { transition: none; }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after { transition: none; }
}

/* --- Navigation: burger up to 1023px --------------------------------------
   The register button's label ("Grand Finale Registration 2026") is long
   enough that between 769px and ~890px the desktop bar could no longer fit
   logo + links + button, and the button overflowed the viewport. Tablets get
   the drawer instead, which is the usual pattern anyway; from 1024px up the
   full desktop bar fits with room to spare. */
@media (max-width: 1023px) {
  /* Three stacked rows so both calls to action are visible without the menu
     losing its place:
         logo ............................. ☰
         [  SELECTION ROUND FORM →        ]
         [  GRAND FINALE REGISTRATION →   ]
     Grid (rather than flex-wrap) keeps the burger locked to the logo row no
     matter how long either button's label gets. */
  :root { --eo-nav-h: 150px; }

  nav#topnav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo    burger"
      "selform selform"
      "cta     cta";
    align-items: center;
    height: auto;   /* rows decide the height; JS publishes it as --eo-nav-h */
    padding: .5rem .85rem .65rem;
    row-gap: .4rem;
    column-gap: .5rem;
  }
  .nav-logo   { grid-area: logo; }
  .nav-burger { grid-area: burger; justify-self: end; display: flex; flex: 0 0 44px; margin-left: 0; }
  .nav-links  { display: none; }
  .sidenav    { display: none; }

  /* Selection Round Form is hidden below 1100px by the page styles — on
     mobile it becomes the top button instead. */
  .nav-freesel {
    grid-area: selform;
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    min-height: 42px;
    font-size: .64rem;
    letter-spacing: .06em;
    padding: .5rem 1rem;
    white-space: normal;
    text-align: center;
  }

  .nav-right {
    grid-area: cta;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-width: 0;
  }
  nav#topnav .nav-cta {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    font-size: .64rem;
    letter-spacing: .06em;
    line-height: 1.2;
    padding: .5rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .nav-login { display: none; }
  .nav-profile-btn { width: 44px; height: 44px; flex: 0 0 44px; }

  /* Content offsets that were hard-coded against the old 68px bar are kept in
     step by eo-mobile-nav.js, which only adjusts pages that already had one
     (index.html's hero deliberately sits *behind* the bar). */
  .eo-drawer { top: var(--eo-nav-h); }
}

@media (max-width: 360px) {
  :root { --eo-nav-h: 146px; }
  .nav-freesel, nav#topnav .nav-cta { font-size: .58rem; padding: .5rem .6rem; }
}

/* Desktop bar, 1024–1439px: flex was squeezing the button until "2026 →"
   dropped to a second line. Tighter tracking keeps it on one. */
@media (min-width: 1024px) and (max-width: 1439px) {
  nav#topnav .nav-cta {
    font-size: .6rem;
    letter-spacing: .06em;
    padding: .6rem 1rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* --- Mobile-only layout + touch fixes ------------------------------------- */
@media (max-width: 768px) {
  /* Slideshow dots: keep the 10px dot, give it a 44px hit area. */
  .hero-dot {
    width: 10px;
    height: 10px;
    padding: 17px;
    background-clip: content-box;
    box-sizing: content-box;
    margin: -17px;
  }
  .hero-dots { gap: 1.9rem; }

  /* Footer links and controls — all were 15–34px tall. */
  .footer-nav a,
  .footer-contact-col a,
  .footer-contact-item a,
  .footer-bottom-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;      /* short labels like "About" were 38px wide */
    padding: 0 .35rem;
    font-size: .84rem;
  }
  .footer-nav a { justify-content: flex-start; }
  .footer-nav h4 { font-size: .78rem; }

  /* Chat launcher sat at 42px. */
  .eogc-launch { min-height: 44px; }

  /* Country lists on the about page: 256 rows at 39px and 128 chips at 28px. */
  .country-row { min-height: 44px; display: flex; align-items: center; }
  .flag-chip { min-height: 44px; display: inline-flex; align-items: center; }

  /* Back links, legal links in the copyright line, and the 404 button. */
  .back-link,
  .champion-back,
  .footer-copy a,
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 .35rem;
  }
  .footer-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .3rem; }

  /* Auth pages (login / signup / register) footer links. */
  .eo-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .2rem; }

  /* Bare mailto/tel links inside inline-styled blocks. */
  a[href^="mailto:"], a[href^="tel:"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    overflow-wrap: anywhere;
  }
  .footer-soc {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .footer-lang-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
  }
  .footer-register-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Small-caps labels were 9–11px — under the "text too small to read"
     threshold Google's mobile report uses. Nudged up, casing unchanged. */
  .ss-eyebrow, .motto-eyebrow, .motto-pill, .section-label,
  .sec-tag, .reg-label, .gtag, .s-lbl, .deadline-badge,
  .footer-lang-label, .footer-hosts-eyebrow {
    font-size: .75rem !important;
    letter-spacing: .12em;
  }
  .btn-yellow, .btn-outline {
    font-size: .8rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Form controls at <16px make iOS Safari zoom on focus. */
  input, select, textarea { font-size: 16px; }
}

/* --- Contact page --------------------------------------------------------
   Was a hard-coded two-column grid with no breakpoint: the email addresses
   set a min-content floor that pushed the page 250px wider than a phone. */
.contact-section { padding: 6rem 5rem 5rem; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.contact-grid a[href^="mailto:"] { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
  .contact-section { padding: 4rem 1.5rem 3.5rem; }
  .contact-grid a[href^="mailto:"] { font-size: 1.05rem; }
}

/* --- Visible keyboard focus, site-wide ------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--teal-dark, #1A7F7A);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Skip link ------------------------------------------------------------ */
.eo-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--ink, #0D2220);
  color: #fff;
  padding: .85rem 1.25rem;
  border-radius: 0 0 8px 0;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
}
.eo-skip:focus { left: 0; }