@import url("responsive.css");

/* Keep the supplied SVG intact. Its frame gives the original artwork breathing
   room without cropping or altering any part of the mark. */
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  min-width: 0;
  overflow: hidden;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  line-height: 0;
  flex: 0 0 auto;
  gap: 12px;
}

.brand img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: none !important;
}

.site-header {
  height: 160px;
  padding: 10px 6vw;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px #061c4329;
}

.site-header::after {
  content: "";
  position: absolute;
  right: 6vw;
  bottom: 0;
  left: 6vw;
  height: 3px;
  background: var(--lime);
}

.site-header .brand { width: 148px; min-width: 0; height: 148px; }
.site-header nav { align-items: center; }
.site-header nav a,
.site-header .mega-menu summary,
.site-header .cart-button {
  color: var(--black);
  position: relative;
  z-index: 1;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.site-header .menu-toggle {
  color: var(--black);
  position: relative;
  z-index: 1;
}

.announcement {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
}

/* Courier fulfilment is not being advertised yet. */
.trust-strip span:nth-child(2) {
  display: none;
}

.hero-art {
  right: 6vw;
  top: 78px;
  width: min(43vw, 570px);
  height: min(38vw, 490px);
  min-height: 360px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(5deg);
  box-shadow: 20px 20px 0 #c9ec0026;
}

.hero-art::after { content: ""; position: absolute; inset: 13px; border: 1px solid #c9ec00; pointer-events: none; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }

footer { background: #fff; }
footer .brand { width: 190px; height: 190px; padding: 0; }
footer .brand img { filter: none; }

@media (max-width: 850px) {
  .site-header { height: 128px; padding: 7px 5vw; }
  .site-header .brand { width: 112px; min-width: 0; height: 112px; }
  .site-header::after { right: 5vw; left: 5vw; }
  .hero-art { right: 5vw; top: auto; bottom: 5vw; width: 42vw; height: 38vw; min-height: 0; }
}

@media (max-width: 760px) {
  .site-header { height: 132px; padding: 6px 6vw; }
  .site-header .brand { width: 118px; min-width: 0; height: 118px; }
  .site-header .menu-toggle { font-size: 12px !important; font-weight: 800; letter-spacing: 0.06em; }
  .site-header nav.open a,
  .site-header nav.open .mega-menu summary { font-size: 14px !important; line-height: 1.4; }
  .site-header .cart-button { font-size: 11px !important; }
  .site-header::after { right: 6vw; left: 6vw; height: 2px; }
  .brand { width: 118px; height: 118px; }
  .hero-art { right: 6vw; bottom: 6vw; width: 68vw; height: 45vw; min-height: 0; opacity: .92; transform: rotate(3deg); }
  footer .brand { width: 160px; height: 160px; }
}

@media (max-width: 390px) {
  .site-header .brand { width: 104px; height: 104px; }
}

/* Homepage: the same supplied logo, cropped only to remove its large blank
   canvas so that the complete academy mark can be read at a normal size. */
.brand--horizontal {
  width: 280px;
  height: 148px;
}

.brand--horizontal img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  transform: none !important;
}

.site-header .brand--horizontal {
  width: 280px;
  min-width: 220px;
  height: 148px;
}

footer .brand--horizontal {
  width: 360px;
  height: 190px;
}

@media (max-width: 850px) {
  .site-header .brand--horizontal {
    width: 220px;
    min-width: 190px;
    height: 112px;
  }
}

@media (max-width: 760px) {
  .site-header .brand img {
    transform: scale(.92) !important;
    transform-origin: center;
  }

  .site-header .brand--horizontal {
    width: 198px;
    min-width: 170px;
    height: 100px;
  }

  footer .brand--horizontal {
    width: min(88vw, 330px);
    height: 170px;
  }
}

@media (max-width: 390px) {
  .site-header .brand--horizontal {
    width: 164px;
    min-width: 150px;
    height: 88px;
  }
}

/* Use one official, readable OnCourt mark everywhere on the site. */
.site-header .brand img,
footer .brand img,
.footer-brand img {
  content: url("assets/oncourt-logo-transparent-cropped.png");
}

.site-header .brand:not(.brand--horizontal) {
  width: 250px;
  height: 122px;
}

footer .brand:not(.brand--horizontal) {
  width: 280px;
  height: 140px;
}

@media (max-width: 760px) {
  .site-header .brand--horizontal {
    width: 172px;
    min-width: 150px;
    height: 82px;
  }

  .site-header .brand:not(.brand--horizontal) {
    width: 182px;
    min-width: 150px;
    height: 88px;
  }

  footer .brand:not(.brand--horizontal) {
    width: 220px;
    height: 112px;
  }
}

@media (max-width: 390px) {
  .site-header .brand--horizontal,
  .site-header .brand:not(.brand--horizontal) {
    width: 154px;
    min-width: 140px;
    height: 74px;
  }
}

/* Mobile navigation: one calm, readable list instead of wrapped links. */
@media (max-width: 760px) {
  .site-header nav.open {
    display: flex !important;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 20;
    padding: 12px 6vw 22px;
    background: var(--ink);
    border-bottom: 3px solid var(--lime);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-header nav.open > a,
  .site-header nav.open > .mega-menu > summary {
    display: block;
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid #ffffff30;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.3;
  }

  .site-header nav.open > .mega-menu:last-child > summary {
    border-bottom: 0;
  }

  .site-header nav.open .mega-menu {
    width: 100%;
  }

  .site-header nav.open .mega-panel {
    display: block !important;
    position: static;
    inset: auto !important;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0 0 18px;
    padding: 6px 18px 10px;
    background: #f1f2ed;
    border-top: 0;
    border-left: 3px solid var(--lime);
    box-shadow: none;
  }

  .site-header nav.open .mega-panel div {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }

  .site-header nav.open .mega-panel div:last-child {
    border-bottom: 0;
  }

  .site-header nav.open .mega-panel h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 12px;
    letter-spacing: 0;
  }

  .site-header nav.open .mega-panel a {
    display: block;
    margin: 9px 0;
    color: var(--black) !important;
    font-size: 13px !important;
    line-height: 1.4;
    text-transform: none !important;
  }

  /* Force the desktop mega menu to become a single inline mobile list. */
  .site-header nav.open details.mega-menu[open] > .mega-panel {
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    columns: 1 !important;
  }

  .site-header nav.open details.mega-menu[open] > .mega-panel > div {
    width: 100% !important;
    break-inside: avoid;
  }
}