/* The bar and the footer of every page (11 Nov 2026; the mock-up Jeff chose: media/front-page-2026-11-11, version A).
   Jeff, of the old bar beside a competitor's: twelve things in five shapes, "ours is an unorganized mess". So: the
   school's name, five menus in one plain style, then Pricing, the gold Play now, a search glass and the account.
   One clean face (Outfit, already on the site) in place of the chunky one. This file loads after site.css and only
   restyles what those rules drew; the phone's one-row bar (site.css, under 900px) keeps its own layout. */

header.site a.brand { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
header.site nav.pages > a, header.site details.menu > summary, header.site nav.me a.account, header.site nav.me summary.account {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: 0; }
header.site nav a.play { font-family: var(--display); font-weight: 700; padding-left: 1.3rem; padding-right: 1.3rem; }

/* a menu: an ivory panel, each row a name and, where it helps, one line saying what it is */
header.site .menu-panel { background: #fbfaf4; border: 0; border-radius: 16px; padding: 8px; min-width: 17rem; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32); }
header.site .menu-panel a { display: block; min-height: 0; padding: 10px 12px; border-radius: 10px; color: #14291b; font: 700 1.02rem/1.3 var(--font); letter-spacing: 0; }
header.site .menu-panel a small { display: block; font-weight: 400; font-size: max(0.92rem, var(--fine-min, 0px)); color: #4b5f51; }
header.site .menu-panel a:hover, header.site .menu-panel a:focus-visible, header.site .menu-panel a[aria-current="page"] { background: #e8ece2; color: #14291b; }
header.site .menu-panel a.menu-all { margin-top: 6px; padding-top: 12px; border-top: 1px solid #dfe4d8; border-radius: 0 0 10px 10px; color: #1d6a3d; }

/* search is a glass, not a box with a key hint */
header.site > .find-open { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 999px; }
header.site > .find-open span, header.site > .find-open kbd { display: none; }

@media (min-width: 901px) {
  header.site { gap: 0.9rem; padding-top: 0.6rem; padding-bottom: 0.6rem; flex-wrap: nowrap; }
  header.site a.brand { flex: 0 0 auto; margin-right: 0.6rem; }
  header.site nav.pages { flex: 1 1 auto; flex-wrap: nowrap; gap: 0.1rem; }
  /* the gold button sits at the right end of the menus, after Pricing */
  header.site nav.pages > a.play { order: 9; margin-left: 0.5rem; }
  header.site nav.pages > a.nav-pricing { margin-left: auto; }
  header.site nav.pages > details.menu:last-of-type ~ a:not(.nav-pricing):not(.play) { margin-right: 0; }
  header.site nav.me { border-left: 0; padding-left: 0; flex-wrap: nowrap; }
}
@media (max-width: 900px) {
  header.site .menu-panel { background: rgba(0, 0, 0, 0.18); box-shadow: none; }
  header.site .menu-panel a { color: var(--g-cream); }
  header.site .menu-panel a small { color: var(--g-cream-soft); }
  header.site .menu-panel a:hover, header.site .menu-panel a:focus-visible { background: rgba(255, 233, 163, 0.14); color: var(--g-gold-1); }
  header.site .menu-panel a.menu-all { border-top-color: rgba(255, 255, 255, 0.16); color: var(--g-gold-1); }
}

/* the footer: the brand and a way to reach us, then Play, Learn, Teach, The school */
footer.site { background: #0c2217; padding: 3.4rem 1.5rem 1.8rem; }
footer.site .foot-grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 2.4rem; }
footer.site .foot-grid h3 { font-family: var(--display); font-weight: 700; font-size: 1rem; }
footer.site .foot-brand strong { font-family: var(--display); font-weight: 700; }
footer.site .foot-who { margin-top: 0.9rem; line-height: 1.7; }
footer.site .foot-who a { display: inline; padding: 0; }
footer.site .foot-store { display: inline-block; margin-top: 0.8rem; padding: 0; }
footer.site .foot-store img { display: block; height: 48px; width: auto; }
/* the App Store badge has no margin of its own, the Google Play one does: 34 px of Apple's matches 48 px of Google's */
footer.site .foot-stores { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }
footer.site .foot-stores .foot-store { margin-top: 0; }
footer.site .foot-apple img { height: 34px; }
footer.site .fine { display: flex; gap: 1.6rem; flex-wrap: wrap; }
footer.site .fine a { color: inherit; }
@media (max-width: 900px) { footer.site .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { footer.site .foot-grid { grid-template-columns: 1fr; } }

/* 11 Nov, after Jeff's review: three columns when there is no Teach column, and the line for news by email */
footer.site .foot-grid.foot-three { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
footer.site .foot-news { max-width: var(--page-max); margin: 2rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; }
footer.site .foot-news label { color: rgba(255, 255, 255, 0.85); margin-right: auto; }
footer.site .foot-news span { display: flex; gap: 0.6rem; flex-wrap: wrap; }
footer.site .foot-news input { min-height: 46px; min-width: min(17rem, 100%); padding: 0 1rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.25); color: #fff; font: 400 1rem var(--font); }
footer.site .foot-news input::placeholder { color: rgba(255, 255, 255, 0.6); }
footer.site .foot-news button { min-height: 46px; padding: 0 1.3rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.7); background: transparent; color: #fff;
  font: 700 1rem var(--display); cursor: pointer; }
footer.site .foot-news button:hover { background: rgba(255, 255, 255, 0.1); }
footer.site .foot-news .ok { flex: 1 0 100%; margin: 0; color: #f6cd63; font-weight: 700; }
footer.site .fine { margin-top: 1.4rem; }
@media (max-width: 900px) { footer.site .foot-grid.foot-three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { footer.site .foot-grid.foot-three { grid-template-columns: 1fr; } }

/* a window between a phone and a full computer keeps the bar on one row: tighter gaps, the name's words a little smaller */
@media (min-width: 901px) and (max-width: 1180px) {
  header.site { gap: 0.4rem; padding-left: 0.9rem; padding-right: 0.9rem; }
  header.site a.brand { font-size: 1.15rem; margin-right: 0.2rem; }
  header.site nav.pages > a, header.site details.menu > summary { font-size: 0.98rem; padding-left: 0.55rem; padding-right: 0.55rem; }
  header.site nav a.play { padding-left: 0.9rem; padding-right: 0.9rem; }
}
footer.site .foot-news span { flex-wrap: nowrap; }
/* an upright tablet: two rows, the name and the account above, the menus below */
@media (min-width: 641px) and (max-width: 900px) {
  header.site { flex-wrap: wrap; row-gap: 0.2rem; }
  header.site a.brand { margin-right: auto; }
  header.site nav.pages { order: 5; flex: 1 0 100%; flex-wrap: nowrap; }
  header.site nav.pages > a.nav-pricing { margin-left: auto; }
  header.site nav.pages > a.play { order: 9; margin-left: 0.5rem; }
  header.site nav.me { border-left: 0; padding-left: 0; }
}
footer.site .foot-news button { white-space: nowrap; }
footer.site .foot-news input { min-width: 0; flex: 1 1 14rem; }

/* 11 Nov, Jeff's review of the bar: "why is pricing near the play now button", "a lot of crap on the header that i have
   no idea what it means". Left: the name, the menus, Shop, Pricing, and Search with its word. Right: the gold button
   alone, then Sign in and Sign up, or the player's name. Her coins and her notices are rows of her own menu. */
header.site > .find-open { min-width: 0; padding: 0 0.8rem; gap: 0.4rem; border: 0; background: none; color: var(--g-cream); font: 700 1.02rem var(--display); }
header.site > .find-open:hover { background: rgba(255, 255, 255, 0.1); }
header.site > .find-open span { display: inline; }
header.site nav.me .play-now { min-height: 44px; display: inline-flex; align-items: center; padding: 0.4rem 1.3rem; border-radius: 999px; text-decoration: none;
  font: 700 1.02rem var(--display); color: #2a1d05; background: linear-gradient(#f6cd63, #e7ae35); box-shadow: 0 3px 0 #a87618; }
header.site nav.me .play-now:hover { filter: brightness(1.05); background: linear-gradient(#f6cd63, #e7ae35); }
header.site nav.me a.account.signup { border-color: var(--g-gold-2); color: var(--g-gold-1); }
header.site .account-panel .account-coins { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
header.site .account-panel .account-coins[hidden], header.site .account-panel .bell-row[hidden] { display: none; }
header.site .account-panel .chip-coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a3, #e7ae35 60%, #a87618); flex: none; }
header.site .account-panel .bell-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; font-weight: 700; text-align: left; padding: 0.55rem 0.8rem; border-radius: 10px; min-height: 44px; }
header.site .account-panel .bell-row:hover { background: var(--paper-2); }
header.site .account-panel .bell-row .count { position: static; min-width: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: #c8892a; color: #fff; font-size: 0.9rem; text-align: center; }
header.site .account-panel .bell-row .count:empty { display: none; }
/* something new for her: a small gold dot on her name, since the bell is inside the menu now */
header.site details.account-menu:has(.bell.has-unread) > summary { box-shadow: inset 0 0 0 2px var(--g-gold-2); }
@media (min-width: 901px) {
  header.site nav.pages { flex: 0 1 auto; }
  header.site nav.pages > a.play { display: none; }
  header.site nav.pages > a.nav-pricing { margin-left: 0; }
  header.site nav.me { margin-left: auto; gap: 0.5rem; }
}
@media (max-width: 900px) { header.site nav.me .play-now { display: none; } }
@media (min-width: 641px) and (max-width: 900px) { header.site nav.pages > a.play { order: 9; margin-left: auto; } header.site nav.pages > a.nav-pricing { margin-left: 0; } }
header.site .account-panel .bell-row .count { font-size: 1rem; }