/* ==========================================================================
   WinWin — Mobile responsive updates
   --------------------------------------------------------------------------
   Every mobile fix added on top of the existing production styles lives in
   this one file. Load it LAST on all four pages, after style.css and after
   each page's own <style> block.
   ========================================================================== */

/* Positioning context for the dropdown panel. */
.topbar {
  position: relative;
}

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
}

/* Overrides the unused .menu-toggle rule in style.css (light pill button). */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.menu-toggle span {
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
}

.nav-toggle:focus-visible + .menu-toggle {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

@media (max-width: 1200px) {
  /* Overrides `.topbar, .main-links, .nav-login { display: none }`. */
  .topbar {
    display: flex;
    height: 64px;
    gap: 12px;
  }

  .topbar-logo img {
    width: 96px;
    height: 54px;
  }

  .menu-toggle {
    display: flex;
    order: 3;
  }

  .topbar-cta {
    order: 2;
    width: auto;
    padding-inline: 20px;
  }

  /* Collapsed nav: the panel drops under the bar while the toggle is checked. */
  .topbar-links {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 16px;
    border-block-end: 1px solid var(--line-topbar);
    background: var(--darker);
  }

  .topbar-links a {
    padding-block: 14px;
  }

  .nav-toggle:checked ~ .topbar-links {
    display: flex;
  }
}

/* ==========================================================================
   2. index.html
   ========================================================================== */

@media (max-width: 1200px) {
  /* The hero's floating stat cards ran off-screen and sat on top of the h1. */
  .stat-card {
    display: none;
  }
}

@media (max-width: 600px) {
  /* The design centres the hero copy over the artwork on phones. */
  .hero {
    justify-content: center;
    min-height: 640px;
    padding-block: 64px;
    text-align: center;
  }

  .hero-copy {
    align-items: center;
    gap: 24px;
  }

  /* Courses stay two-up as in the mobile design. Overrides
     `.course-card { width: 100% }`, which made the section enormously long. */
  .course-grid {
    gap: 12px;
  }

  .course-card {
    --fade-width: 90px;
    width: calc(50% - 6px);
    height: auto;
    min-height: 168px;
  }

  .course-number {
    height: 28px;
    font-size: 20px;
  }

  /* Value cards read better two-up than as four full-width blocks.
     Overrides `.value-card { flex: 1 1 100% }`. */
  .value-grid {
    gap: 12px;
  }

  .value-card {
    flex: 1 1 calc(50% - 6px);
    gap: 12px;
    padding: 24px 16px;
  }

  .value-card p {
    font-size: 14px;
  }

  /* Footer columns pair up instead of stacking into one long list.
     Overrides `.footer-cols { flex-direction: column }` from the 950px block. */
  .footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .footer-col-brand {
    grid-column: 1 / -1;
  }

  /* The columns are half-width here, so long addresses and the icon row wrap. */
  .footer-col-contact p {
    overflow-wrap: anywhere;
  }

  .social-icons {
    flex-wrap: wrap;
    gap: 10px;
  }

  .social-icons a {
    width: 34px;
    height: 34px;
  }

  /* 16px keeps iOS Safari from zooming in when a field takes focus. */
  .field input,
  .field select {
    font-size: 16px;
  }
}

/* ==========================================================================
   3. about.html
   ========================================================================== */

/* Grid tracks default to max-content, and the inputs default to min-width:auto,
   so the registration form pushed the page ~25px wide below 390px. */
.form {
  grid-template-columns: minmax(0, 1fr);
}

.about-fields {
  grid-template-columns: minmax(0, 1fr);
}

.about-field input,
.about-field select {
  min-width: 0;
}

@media (max-width: 600px) {
  /* The primary photo was wide enough to cover the "WinWin" badge.
     Overrides the 66% / 54% widths in the page's own 600px block. */
  .photos img:first-child {
    width: 61%;
  }

  .photos img:last-child {
    width: 50%;
  }

  .badge {
    padding: 10px 12px;
  }

  .badge strong {
    font-size: 20px;
  }

  /* 16px keeps iOS Safari from zooming in when a field takes focus. */
  .about-field input,
  .about-field select {
    font-size: 16px;
  }
}

/* ==========================================================================
   4. contact.html
   ========================================================================== */

@media (max-width: 600px) {
  /* The design puts the copyright above the EBU line. Overrides
     `.contact-page .footer-bottom { flex-direction: column }`. */
  .contact-page .footer-bottom {
    flex-direction: column-reverse;
  }

  /* 16px keeps iOS Safari from zooming in when a field takes focus. */
  .contact-field input,
  .contact-field select,
  .contact-field textarea {
    font-size: 16px;
  }
}

/* ==========================================================================
   5. course-details.html
   ========================================================================== */

/* The select arrow was `content: "be"` — a corrupted icon-font character that
   rendered as a box plus the literal letters "be". Uses the shipped SVG now,
   the same way style.css draws the FAQ chevron. */
.enroll-field-select::after {
  content: "";
  bottom: 12px;
  width: 16px;
  height: 16px;
  background: url("assets/icon-chevron-down.svg") center / 16px 16px no-repeat;
}

/* The tab strip showed a grey scrollbar under the pills on phones. */
.tablist {
  scrollbar-width: none;
}

.tablist::-webkit-scrollbar {
  display: none;
}

@media (max-width: 950px) {
  /* The design leads with the course copy, then the video.
     Overrides `.course-hero { flex-direction: column-reverse }`. */
  .course-hero {
    flex-direction: column;
  }

  /* These stay two-up rather than becoming one tall column. Overrides the
     page's `.learn-grid, .audience-row, ... { minmax(0, 1fr) }`. */
  .learn-grid,
  .audience-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  /* Keep the compact card grids two-up. Overrides the page's
     `.stats-grid, .skills-grid, .enroll-row { minmax(0, 1fr) }`. */
  .stats-grid,
  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The hero meta reads as stacked rows spanning the full width. */
  .course-meta {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 10px;
    padding: 12px 16px;
  }

  .stat-box,
  .skill-card,
  .audience-card {
    padding: 16px 12px;
  }

  /* 16px keeps iOS Safari from zooming in when a field takes focus. */
  .enroll-field input,
  .enroll-field select {
    font-size: 16px;
  }
}