/* ==========================================================================
   Site header and footer ("chrome") -- css/ai2-chrome.css
   --------------------------------------------------------------------------
   Styles for _includes/header.html and _includes/footer.html, which appear on
   every page. They used to sit in <style> blocks inside those includes, i.e.
   in the page body: every page downloaded them again, and the W3C checker
   flags <style> in the body. Now one cached file, linked from the page head
   in _includes/head.html and _layouts/home.html (last, so these rules keep
   winning ties the way they did when they came after everything else).
   ========================================================================== */

/* ---- Header -------------------------------------------------------------- */

/* Defensive reset — legacy rules can still reach elements by tag name,
   so the basics are stated explicitly. */
.ai2-header,
.ai2-header * {
  box-sizing: border-box;
}

.ai2-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ai2-header a {
  text-decoration: none;
}

/* The header is sticky, so anything the browser scrolls to -- a #fragment
   link like /FAQ#where-is-your, or scrollIntoView() -- would otherwise end
   up hidden underneath it. scroll-padding-top reserves that strip.
   --ai2-header-h is measured by the script at the bottom of this file,
   because the header grows when the nav wraps on narrow screens. */
html {
  scroll-padding-top: calc(var(--ai2-header-h, 4.5rem) + 1rem);
}

.ai2-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #ffffff;
  border-bottom: 1px solid #e3e6e9;
  font-family: inherit;
}

.ai2-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.625rem clamp(1rem, 3vw, 2rem);
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
}

/* Brand ------------------------------------------------------------ */
.ai2-brand {
  flex: 0 0 auto;
  display: block;
  padding: 0;
  margin: 0;
}

.ai2-brand img {
  display: block;
  height: 48px;
  width: auto;
  max-width: none;
}

/* Menu ------------------------------------------------------------- */
.ai2-list {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  gap: clamp(0.25rem, 2vw, 2rem);
}

.ai2-link {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  overflow: visible;
  color: #495661;
  font-family: inherit;
  font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.ai2-link:hover,
.ai2-link:focus {
  color: #12181f;
}

.ai2-link::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.125rem;
  height: 3px;
  border-radius: 2px;
  background: #f88d34;
  transform: scaleX(0);
  transition: transform 0.18s ease;
}

.ai2-link:hover::after,
.ai2-link:focus::after,
.ai2-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Buttons ---------------------------------------------------------- */
.ai2-signin,
.ai2-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 46px;
  overflow: visible;
  font-family: inherit;
  font-size: clamp(0.9rem, 0.82rem + 0.2vw, 1rem);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: 999px;
}

.ai2-signin {
  padding: 0 1.125rem;
  background: #ffffff;
  color: #33404d;
  font-weight: 500;
  border: 2px solid #d5d9de;
  transition: border-color 0.18s ease, background-color 0.18s ease,
    color 0.18s ease;
}

.ai2-signin:hover,
.ai2-signin:focus {
  background: #fff7f0;
  border-color: #f88d34;
  color: #12181f;
}

.ai2-cta {
  padding: 0 1.375rem;
  background: #f88d34;
  color: #ffffff;
  font-weight: 700;
  border: 2px solid #f88d34;
  box-shadow: 0 1px 2px rgba(31, 41, 51, 0.18);
  transition: background-color 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease, transform 0.18s ease;
}

.ai2-cta:hover,
.ai2-cta:focus {
  background: #e2761d;
  border-color: #e2761d;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(31, 41, 51, 0.2);
}

.ai2-cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(31, 41, 51, 0.18);
}

/* Toggle ----------------------------------------------------------- */
.ai2-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 46px;
  padding: 0 0.75rem;
  background: #f88d34;
  color: #ffffff;
  border: 0;
  border-radius: 0.75rem;
  cursor: pointer;
}

.ai2-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Focus ------------------------------------------------------------ */
.ai2-header a:focus-visible,
.ai2-header button:focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 3px;
  border-radius: 0.5rem;
}

/* Skip link -------------------------------------------------------- */
.ai2-skip {
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  z-index: 1;
  padding: 0.5rem 1rem;
  background: #12181f;
  color: #ffffff;
  font-weight: 500;
  border-radius: 0.5rem;
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}

.ai2-skip:focus {
  color: #ffffff;
  transform: translateY(0);
}

/* Phones: the pill crowds the logo, so it moves into the menu ------ */
.ai2-signin-item {
  display: none;
}

/* Desktop: brand | menu | sign in | build -------------------------- */
/* Keyboard users move through the header in source order, so the source
   has to match what is on screen at each size. Sign In and Build Your
   First App! therefore appear twice: the "compact" pair before the menu
   button (phones and tablets, where they share the top row with the logo)
   and the "wide" pair after the menu (desktop, where they sit to its
   right). Only one pair is ever displayed, and display: none also takes
   the other out of the Tab order and away from screen readers. This
   replaces CSS `order`, which moved things visually but left Tab jumping
   from the logo to Sign In and only then back to the menu. */
.ai2-wide {
  display: none !important;
}
@media (min-width: 992px) {
  /* Beats .collapse { display: none } from either Bootstrap version. */
  .ai2-header .ai2-menu {
    display: flex !important;
    flex: 1 1 auto;
  }
  .ai2-toggle,
  .ai2-compact {
    display: none !important;
  }
  .ai2-header .ai2-wide {
    display: inline-flex !important;
  }
}

/* Below 992px: menu stacks under the top row ----------------------- */
@media (max-width: 991.98px) {
  .ai2-menu {
    flex-basis: 100%;
  }
  .ai2-toggle {
    margin-left: auto;
  }
  .ai2-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 0.75rem;
  }
  .ai2-link {
    min-height: 48px;
    border-bottom: 1px solid #f0f1f3;
  }
  .ai2-link::after {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .ai2-signin {
    display: none;
  }
  .ai2-signin-item {
    display: block;
  }
  .ai2-brand img {
    height: 40px;
  }
  .ai2-cta {
    min-height: 42px;
    padding: 0 0.875rem;
  }
}

/* Small phones: keep the logo, Build Your First App! and the menu
   button on one row. At 375px (iPhone SE/mini) and 360px (many
   Androids) the menu button used to wrap under the Build button. */
@media (max-width: 400px) {
  .ai2-nav {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    gap: 0.5rem;
  }
  .ai2-brand img {
    height: 34px;
  }
  .ai2-cta {
    padding: 0 0.75rem;
    font-size: 0.875rem;
  }
}

/* Below 360px (older and smaller phones), one step tighter still. */
@media (max-width: 359.98px) {
  .ai2-nav {
    gap: 0.375rem;
  }
  .ai2-brand img {
    height: 30px;
  }
  .ai2-cta {
    padding: 0 0.625rem;
    font-size: 0.8125rem;
  }
  .ai2-toggle {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai2-link::after,
  .ai2-cta,
  .ai2-signin,
  .ai2-skip {
    transition: none;
  }
  .ai2-cta:hover,
  .ai2-cta:focus {
    transform: none;
  }
}


/* ---- Footer -------------------------------------------------------------- */

.ai2-footer {
  --f-bg: #4a4a4c;
  --f-text: #e9e9ea;
  --f-muted: #c4c4c6;
  --f-accent: #f88d34;
  margin-top: 2rem;
  padding: 2.75rem clamp(1rem, 4vw, 3rem) 1.5rem;
  background: var(--f-bg);
  color: var(--f-text);
  font-size: 0.95rem;
  line-height: 1.5;
}
.ai2-footer a { color: #fff; text-decoration: none; }
.ai2-footer a:hover,
.ai2-footer a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ai2-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.ai2-footer__inner {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 3.4fr;
  gap: 2.5rem;
  max-width: 1280px;
  margin: 0 auto;
}
.ai2-footer__brand h2 {
  margin: 0 0 0.9rem;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
}
.ai2-footer__logos { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
/* The RAISE lockup is black-on-transparent; render it white on the dark footer. */
.ai2-footer__raise { filter: brightness(0) invert(1); opacity: 0.9; }
.ai2-footer__social { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.ai2-footer__social img { width: 28px; height: 28px; object-fit: contain; }

.ai2-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
}
.ai2-footer__cols h3 {
  margin: 0 0 0.75rem;
  padding-top: 0.6rem;
  border-top: 3px solid var(--f-accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ai2-footer__cols ul { margin: 0; padding: 0; list-style: none; }
.ai2-footer__cols li + li { margin-top: 0.4rem; }
.ai2-footer__note { margin: 0.2rem 0 0; color: var(--f-muted); font-size: 0.8rem; line-height: 1.35; }
/* A link inside a note ("Email Us") is underlined so it reads as a link
   within the sentence. */
.ai2-footer__note a { text-decoration: underline; text-underline-offset: 2px; }
/* A note right under a link in a list ("Workshops & Collaborations" and its
   "For schools..." line) sits tight against it, so the two read as one item. */
.ai2-footer__cols li > a + .ai2-footer__note { margin-top: 0; }

/* The one button in the footer: where support questions should go. */
.ai2-footer a.ai2-footer__ask {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  background: var(--f-accent);
  color: #12181f;
  font-weight: 700;
  border-radius: 999px;
}
.ai2-footer a.ai2-footer__ask:hover,
.ai2-footer a.ai2-footer__ask:focus-visible { color: #12181f; background: #ffa65c; text-decoration: none; }
.ai2-footer__ask + .ai2-footer__note { margin: 0.45rem 0 0.9rem; }

.ai2-footer__legal {
  max-width: 1280px;
  margin: 2.25rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--f-muted);
  font-size: 0.8rem;
  text-align: center;
}
.ai2-footer__legal img { vertical-align: middle; margin: 0 0.3rem; }
.ai2-footer__legal a { text-decoration: underline; }

@media (max-width: 1000px) {
  .ai2-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .ai2-footer__logos { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 640px) {
  .ai2-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai2-footer__cols > div:first-child { grid-column: 1 / -1; }
}