/**
 * PixelParty microsite — shell styles.
 *
 * The header and footer are a deliberate reproduction of www.pixelparty.site
 * (Wix) so this site reads as the same property when it is served under
 * pixelparty.site/<path> through Cloudflare. Values below are measured from the
 * live site rather than eyeballed: see alt-site/README.md for the measurements
 * and where each number came from.
 *
 * Everything is path relative, because the public path is not decided yet and
 * this has to work under any prefix.
 */

/* ── tokens ──────────────────────────────────────────────────────────────
   Taken from the live site's computed styles. These are the marketing site's
   values, which differ very slightly from the app's own brand tokens (the app
   uses #122E5A navy); the site is what we are matching here. */
:root {
  --navy:        #1A2D5A;   /* nav text, primary button fill */
  --navy-deep:   #0D1833;   /* footer ground */
  --pink:        #F7AFCF;   /* active nav item */
  --pink-soft:   #FDD7EB;   /* button label on navy */
  --bone:        #F7F5F3;   /* page and header ground */
  --white:       #FFFFFF;

  --container:   1200px;
  --header-h:    110px;
  --header-h-sm: 78px;

  --font-display: 'urbane-rounded', 'Trebuchet MS', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Questrial', 'Trebuchet MS', 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* Content is exactly 1200px wide with the gutters falling out of whatever is
   left, which is how the live site lands its logo 113px from the edge at
   1440. Padding-based gutters would eat into the 1200 and shift everything
   inwards. Below the fold-in width the gutter takes over at 32px, matching
   the mobile layout's 32px inset. */
.container {
  width: min(var(--container), 100% - 64px);
  margin-inline: auto;
}

/* Keyboard users get a visible ring; pointer users never see it. */
:where(a, button):focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── header ──────────────────────────────────────────────────────────────
   110px tall on desktop with everything optically centred on the 55px line:
   the logo (168x37), the nav row (26px tall) and the button (36px) all share
   that centre on the live site. */
.site-header {
  background: var(--bone);
  position: relative;
  z-index: 50;
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.site-header__logo { margin-right: auto; }

.site-header__inner > .site-cta { margin-left: 29px; }

.site-header__logo img { width: 168px; height: auto; }

.site-nav { display: flex; align-items: center; gap: 10px; }

/* The button is duplicated inside the nav so it can sit in the mobile panel.
   On desktop the one in the bar is the real one and this copy stays out. */
.site-nav > .site-cta { display: none; }

/* 8px of horizontal padding on each item, 10px between them: measured from
   the live nav, where the text boxes sit 26px apart edge to edge. */
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
  color: var(--navy);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-nav__link:hover { color: var(--pink); }

/* The live site marks the current page with a small pink bullet as well as
   pink text, so colour is not the only signal. */
.site-nav__link[aria-current='page'] { color: var(--pink); }
.site-nav__link[aria-current='page']::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.site-nav__chevron {
  width: 12px; height: 12px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

/* ── Occasions menu ──────────────────────────────────────────────────────
   A button rather than a link, because it goes nowhere: there is no
   /occasions page on the live site, the label only reveals the five event
   pages. Opening on hover alone would leave it unreachable by keyboard, so
   the button carries the state and hover just sets the same thing. */
.site-nav__group { position: relative; display: flex; }

.site-nav__toggle {
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

.site-nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 190px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(13, 24, 51, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.site-nav__group:hover .site-nav__menu,
.site-nav__group:focus-within .site-nav__menu,
.site-nav__toggle[aria-expanded='true'] + .site-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__group:hover .site-nav__chevron,
.site-nav__toggle[aria-expanded='true'] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-nav__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.site-nav__menu a:hover { background: rgba(26, 45, 90, 0.06); color: var(--pink); }

.site-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  /* The measured button is 126x36. Our cut of Urbane Rounded sets "Get Started"
     about 5px narrower than the site's, so the box is pinned rather than left
     to the text, which also keeps it stable if the face ever swaps. */
  min-width: 126px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--pink-soft);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.site-cta:hover { opacity: 0.9; }

/* ── mobile menu button ──────────────────────────────────────────────── */
.site-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

.site-burger__bars {
  display: block;
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  transition: background 0.15s ease;
}
.site-burger__bars::before,
.site-burger__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease;
}
.site-burger__bars::before { top: -8px; }
.site-burger__bars::after  { top: 8px; }

/* Open state turns the three bars into a cross, so the same control closes it. */
.site-header.is-open .site-burger__bars { background: transparent; }
.site-header.is-open .site-burger__bars::before { transform: translateY(8px) rotate(45deg); }
.site-header.is-open .site-burger__bars::after  { transform: translateY(-8px) rotate(-45deg); }

/* ── content ─────────────────────────────────────────────────────────────
   Empty for now. `min-height` keeps the footer at the bottom of the viewport
   on a page with no content yet, so the shell can be judged on its own. */
.site-main {
  min-height: calc(100vh - var(--header-h) - 260px);
}

/* ── footer ──────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--navy-deep);
  color: var(--bone);
  /* The live footer carries a lot of empty ground under the copyright, which
     gives the block its weight. Not all 216px of it, which is a Wix artefact,
     but enough that the footer reads as a deliberate slab rather than a strip. */
  padding: 100px 0 96px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 292px repeat(4, 1fr);
  gap: 40px 0;
}

.site-footer__logo img { width: 149px; height: auto; }

.site-footer__blurb {
  margin: 28px 0 0;
  max-width: 230px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--bone);
}

.site-footer__social {
  display: flex;
  gap: 17px;
  margin-top: 32px;
}

.site-footer__social a {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-deep);
  transition: opacity 0.15s ease;
}
.site-footer__social a:hover { opacity: 0.85; }
.site-footer__social svg { width: 18px; height: 18px; }

.site-footer__col h2 {
  margin: 0 0 21px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pink-soft);
}

.site-footer__col ul {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* On the list, not just the anchor: the anchor is inline, so the row height
     comes from the list item's own line box. */
  line-height: 1.375;
}

/* 22px line box plus the 10px gap is the live footer's 32px row pitch. */
.site-footer__col a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
  color: var(--white);
  transition: color 0.15s ease;
}
.site-footer__col a:hover { color: var(--pink); }

/* ── store badges ────────────────────────────────────────────────────────
   Apple's artwork is edge to edge; Google's carries 41/250 of transparent
   padding on every side. Sizing Google's to 60px puts its visible button at
   40px, the same as Apple's, and the negative inset pulls its invisible edge
   back so the two line up on the left and sit a real 12px apart. */
/* Stacked, because side by side they need 277px and the column is 227px, and
   flex would rather squash the artwork than admit it. The live footer stacks
   them too. */
.site-footer__stores {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
}

.site-footer__stores a { display: block; flex: none; }

.badge { display: block; width: auto; max-width: none; }
.badge--apple { height: 40px; }
.badge--play  { height: 60px; margin: -10px; }

.site-footer__base {
  margin-top: 72px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--bone);
}

.site-footer__base a { text-decoration: underline; text-underline-offset: 3px; }

/* ── responsive ──────────────────────────────────────────────────────────
   1024px because that is where the desktop nav stops fitting beside the logo
   and the button, not because it is a round number. */
@media (max-width: 1023px) {

  .site-header__inner { height: var(--header-h-sm); }
  .site-header__logo img { width: 122px; }

  .site-burger {
    display: inline-flex;
    /* Optical, not geometric: the drawn bars line up with the 32px gutter,
       which means the hit area has to sit slightly proud of it. */
    margin-right: -8px;
  }

  /* The panel is laid out in the flow under the bar rather than as an overlay,
     so it pushes the page down and never traps a scroll position. */
  .site-nav {
    position: absolute;
    top: var(--header-h-sm);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 32px 24px;
    background: var(--bone);
    border-top: 1px solid rgba(26, 45, 90, 0.08);
    box-shadow: 0 18px 30px rgba(13, 24, 51, 0.10);
    display: none;
  }

  .site-header.is-open .site-nav { display: flex; }

  .site-nav__link {
    padding: 14px 0;
    font-size: 18px;
    border-bottom: 1px solid rgba(26, 45, 90, 0.08);
  }

  .site-nav__group { flex-direction: column; }
  .site-nav__toggle { justify-content: space-between; width: 100%; }

  /* Inline and always open on mobile. A hover-revealed panel inside a panel
     is a menu most people never find on a touch screen. */
  .site-nav__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 8px 12px;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgba(26, 45, 90, 0.08);
  }
  .site-nav__menu a { padding: 11px 0; font-size: 16px; }
  .site-nav__chevron { display: none; }

  .site-nav > .site-cta {
    display: inline-flex;
    margin-top: 16px;
    padding: 14px 20px;
    min-width: 0;
    font-size: 17px;
  }

  /* The button lives inside the panel on mobile, so the bar itself is just the
     logo and the menu control. */
  .site-header__inner > .site-cta { display: none; }

  .site-footer { padding: 72px 0 32px; }

  /* Two columns of links under the brand block, which is how the live site
     folds: Product beside Events, Company beside Support. */
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
  }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__blurb { max-width: 280px; font-size: 15px; }

  .site-footer__base {
    margin-top: 48px;
    font-size: 15px;
  }
}

@media (max-width: 479px) {
  /* No container override: the live site keeps a 32px gutter right down to
     375, so narrowing it here would only pull the logo off its mark. */
  .site-nav { padding-inline: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}