/* Responsive + a11y overlay for the Trailhead Editorial production build. */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  padding-bottom: env(safe-area-inset-bottom);
  font-size: 16px;
  line-height: 1.5;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

#root:empty {
  min-height: 100dvh;
  background: #171714;
}

.zulu-hero-bg {
  background-image: url("/manus-storage/zulu-hero_857a8663-sm.webp");
  background-size: cover;
  background-position: center;
}
@media (min-width: 768px) {
  .zulu-hero-bg {
    background-image: url("/manus-storage/zulu-hero_857a8663.webp");
  }
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -56px;
  z-index: 90;
  background: #f05a28;
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 16px;
  min-height: 44px;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid #f05a28;
  outline-offset: 3px;
}

#logo-study,
[id="logo-study"] {
  display: none !important;
}

header.sticky,
header.sticky .flex.h-16 {
  min-height: 56px;
}

@media (min-width: 768px) {
  header.sticky .flex.h-16 {
    min-height: 64px;
  }
}

header button,
header a,
header [role="button"] {
  min-height: 44px;
  min-width: 44px;
}

header button[aria-label="Open menu"],
header button[aria-label="Close menu"] {
  width: 44px !important;
  height: 44px !important;
}

.zulu-mobile-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  min-height: calc(100dvh - 56px);
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  padding: 16px 20px 32px !important;
}
.zulu-mobile-menu button {
  min-height: 48px;
  text-align: left;
  padding: 12px 0;
  width: 100%;
}

/* Seven nav items do not fit at 768px without overlap; hamburger stays until lg. */
@media (max-width: 1023px) {
  nav[aria-label="Primary navigation"] {
    display: none !important;
  }
  header button[aria-label="Open menu"],
  header button[aria-label="Close menu"] {
    display: grid !important;
  }
  header button[class*="sm:block"] {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  nav[aria-label="Primary navigation"] {
    display: flex !important;
    gap: 32px;
  }
  header button[aria-label="Open menu"],
  header button[aria-label="Close menu"],
  .zulu-mobile-menu {
    display: none !important;
  }
}
@media (max-width: 479px) {
  header button[class*="bg-[#f05a28]"] {
    display: none !important;
  }
}

[class*="min-h-[730px]"],
[class*="min-h-[755px]"],
[class*="min-h-[665px]"] {
  min-height: auto !important;
}

@media (max-width: 767px) {
  [class*="min-h-[730px]"],
  [class*="min-h-[755px]"],
  [class*="min-h-[820px]"] {
    min-height: 0 !important;
    padding-bottom: 96px !important;
  }

  h1[class*="clamp(4.25rem"],
  h1[class*="clamp(2.5rem"],
  [class*="text-[clamp(4.25rem"],
  [class*="text-[clamp(2.5rem"] {
    font-size: clamp(2.35rem, 12vw, 3.4rem) !important;
    line-height: 0.9 !important;
  }

  [class*="text-7xl"],
  [class*="text-6xl"],
  [class*="text-5xl"] {
    font-size: clamp(1.75rem, 9vw, 2.6rem) !important;
    line-height: 0.95 !important;
  }

  [class*="text-4xl"] {
    font-size: clamp(1.5rem, 7vw, 2.1rem) !important;
  }

  [class*="fixed inset-x-0 bottom-0"] {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
  }
  [class*="fixed inset-x-0 bottom-0"] button,
  [class*="fixed inset-x-0 bottom-0"] a {
    min-height: 44px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  [class*="min-h-[730px]"] {
    min-height: 640px !important;
  }
  h1[class*="clamp(4.25rem"],
  [class*="text-[clamp(4.25rem"] {
    font-size: clamp(3.1rem, 8vw, 5.2rem) !important;
  }
}

@media (max-width: 1023px) {
  [class*="w-[170px]"],
  [class*="w-[270px]"],
  [class*="w-[280px]"],
  [class*="w-[310px]"],
  [class*="w-[320px]"],
  [class*="w-[340px]"],
  [class*="w-[355px]"],
  [class*="w-[360px]"],
  [class*="w-[390px]"],
  [class*="w-[420px]"],
  [class*="w-[480px]"],
  [class*="w-[620px]"],
  [class*="w-[650px]"],
  [class*="w-[680px]"],
  [class*="w-[700px]"],
  [class*="w-[720px]"],
  [class*="w-[800px]"],
  [class*="w-[860px]"],
  [class*="w-[960px]"],
  [class*="w-[1180px]"],
  [class*="w-[1360px]"],
  [class*="max-w-[860px]"],
  [class*="max-w-[1360px]"] {
    max-width: 100% !important;
  }

  [class*="w-[620px]"],
  [class*="w-[650px]"],
  [class*="w-[680px]"],
  [class*="w-[700px]"],
  [class*="w-[720px]"],
  [class*="w-[800px]"],
  [class*="w-[860px]"],
  [class*="w-[960px]"],
  [class*="w-[1180px]"],
  [class*="w-[1360px]"] {
    width: 100% !important;
  }
}

p,
.prose,
[class*="leading-relaxed"] {
  max-width: 42rem;
}

main {
  overflow-x: clip;
}

button,
a,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

@media (max-width: 767px) {
  button,
  a[class*="bg-"],
  a[class*="border"],
  input,
  select,
  textarea {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    width: 100%;
    font-size: 16px !important;
  }

  [class*="px-5"][class*="py-20"],
  [class*="px-5"][class*="py-16"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

img[class*="object-cover"],
img[class*="object-contain"] {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

img[class*="object-contain"] {
  object-fit: contain;
}

#challenges article [class*="from-black"],
[id="challenges"] article [class*="from-black"] {
  background: linear-gradient(
    to top,
    rgba(23, 23, 20, 0.96) 0%,
    rgba(23, 23, 20, 0.72) 42%,
    rgba(23, 23, 20, 0.08) 100%
  ) !important;
}

.earlybird-banner,
[class*="top-16"][class*="sticky"] {
  top: 56px;
  z-index: 40;
}
@media (min-width: 768px) {
  .earlybird-banner,
  [class*="top-16"][class*="sticky"] {
    top: 64px;
  }
}

@media (max-width: 639px) {
  [class*="top-16"][class*="sticky"] {
    font-size: 0.68rem;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 1440px) {
  [class*="max-w-[1360px]"] {
    max-width: 1360px;
  }
}

.vendor-input,
.vendor-input:focus {
  font-size: 16px;
  min-height: 44px;
}

.faq-trigger {
  min-height: 48px;
}

.meta-label {
  color: #3f3f38;
}

.nav-link:focus-visible:after,
.nav-link:hover:after {
  transform: scaleX(1);
}

.section-title {
  font-size: clamp(2.15rem, 11vw, 7.8rem);
}

p,
.prose,
[class*="leading-relaxed"] {
  overflow-wrap: anywhere;
}

form [aria-invalid="true"],
.vendor-input:user-invalid {
  border-color: #b42318;
}

form [aria-invalid="true"] + *,
.field-error,
[role="alert"] {
  min-height: 1.25rem;
  color: #b42318;
  font-size: 0.875rem;
}


@media (max-width: 767px) {
  .section-title {
    font-size: clamp(2.1rem, 12vw, 3.05rem) !important;
  }
  .faq-trigger {
    font-size: 0.9rem !important;
    padding: 14px 0 !important;
  }
  .earlybird-banner {
    margin-top: 56px;
    min-height: 44px;
    padding: 8px 10px !important;
    font-size: 0.72rem;
    gap: 8px !important;
  }
  .gallery-tile,
  .gallery-tile-featured,
  .gallery-tile-tall {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 220px !important;
  }
  .proof-card {
    min-height: 0;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  [class*="min-h-[520px]"],
  [class*="min-h-[420px]"],
  [class*="min-h-[665px]"],
  [class*="min-h-[755px]"],
  [class*="min-h-[820px]"] {
    min-height: 0 !important;
  }
  header.sticky,
  header.sticky .flex.h-16 {
    min-height: 48px;
  }
  .zulu-mobile-menu {
    min-height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
  }
}

@media (min-width: 1920px) {
  [class*="max-w-[1360px]"] {
    max-width: 1480px;
  }
}

footer a,
footer button,
[aria-label^="Share Zulu"],
[aria-label^="Copy Zulu"] {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.marquee-track {
  max-width: 100%;
}