/* Hanten site header and footer, shared by every page (added by
   assets/js/site-chrome.js). Navy bars, like the classroom pages. */
.hx-bar, .hx-foot {
  display: block;
  width: 100%;
  margin: 0;
  background: #1A3E6E !important;
  color: #ffffff;
  border: 0 !important;
  box-shadow: 0 2px 10px rgba(21, 48, 57, 0.18) !important;
  position: relative !important;
  top: auto !important;
  max-width: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  z-index: 5;
}
.hx-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.hx-bar { padding: 0 !important; }
.hx-bar .hx-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.hx-bar-logo { display: block; line-height: 0; margin-left: -10px; }
.hx-bar-logo img { display: block; width: 168px; height: auto; }
.hx-bar-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hx-bar-nav a { padding: 8px 12px; border-radius: 999px; color: #ffffff; opacity: .88; font-size: 0.92rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hx-bar-nav a:hover, .hx-bar-nav a:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.hx-bar-nav a[aria-current="page"] { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.hx-bar-nav a.hx-bar-contact { opacity: 1; border: 1.5px solid rgba(255, 255, 255, 0.85); }
.hx-bar-nav a.hx-bar-home { opacity: 1; background: #E59E12; color: #1A3E6E; }
.hx-bar-nav a.hx-bar-home:hover { background: #f2b23a; }

.hx-foot { margin-top: 56px; padding: 0 !important; box-shadow: none !important; }
.hx-foot .hx-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 24px 0 26px; font-size: 0.85rem; }
.hx-foot img { display: block; width: 130px; height: auto; margin-left: -8px; }
.hx-foot-line { margin: 0; text-align: center; font-style: italic; font-size: .95rem; opacity: .9; }
.hx-foot-nav { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; }
.hx-foot-nav a { color: #ffffff; font-weight: 700; text-decoration: none; }
.hx-foot-nav a:hover { text-decoration: underline; }
.hx-foot-copy { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 0.78rem; opacity: .7; }

/* Exhibits keep their own canvas; their old hanten.app line is replaced. */
.hx-has-chrome .hanten-site-footer { display: none !important; }

/* "Start here" path strip on exhibits opened from /start/ */
.hx-path { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: min(1180px, calc(100% - 48px)); margin: 12px auto 0; padding: 10px 14px; border-radius: 12px; background: #ffffff; border: 1.5px solid #1A3E6E; color: #1A3E6E; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: .88rem; }
.hx-path a { color: #1A3E6E; font-weight: 700; text-decoration: none; }
.hx-path-step { padding: 2px 9px; border-radius: 999px; background: #1A3E6E; color: #fff; font-weight: 700; }
.hx-path-next { margin-left: auto; color: #8F5E00 !important; }

@media (max-width: 640px) {
  .hx-inner { width: calc(100% - 30px); }
  .hx-bar .hx-inner { min-height: 56px; }
  .hx-bar-logo img { width: 124px; }
  .hx-bar-nav { gap: 2px; }
  .hx-bar-nav a { padding: 7px 9px; font-size: 0.82rem; }
  .hx-foot .hx-inner { grid-template-columns: 1fr; text-align: center; }
  .hx-foot img { margin: 0 auto; }
  .hx-foot-nav { justify-content: center; }
  .hx-path { width: calc(100% - 30px); }
  .hx-path-next { margin-left: 0; }
}
@media (max-width: 480px) {
  .hx-long { display: none; }
  .hx-bar-logo img { width: 104px; margin-left: -6px; }
  .hx-bar-nav { flex-wrap: nowrap; }
  .hx-bar-nav a { padding: 6px 8px; font-size: 0.78rem; }
}
.hx-foot .hx-inner > a:first-child { grid-column: 1; grid-row: 1; }
.hx-foot-line { grid-column: 2; grid-row: 1; }
.hx-foot-nav { grid-column: 3; grid-row: 1; }
@media (max-width: 640px) {
  .hx-foot .hx-inner > a:first-child, .hx-foot-line, .hx-foot-nav { grid-column: 1; grid-row: auto; }
}

/* Round 4: larger logo; footer is motto + Contact + Back to top */
.hx-bar .hx-inner { min-height: 84px; }
.hx-bar-logo { margin-left: 0; }
.hx-bar-logo img { width: 236px; }
.hx-foot .hx-inner { grid-template-columns: 1fr auto 1fr; padding: 26px 0 22px; row-gap: 8px; }
.hx-foot-line { grid-column: 2; grid-row: 1; font-size: 1rem; }
.hx-foot-nav { grid-column: 3; grid-row: 1; }
.hx-foot-copy { grid-column: 2; grid-row: 2; }
.hx-foot-nav a { opacity: .9; }
@media (max-width: 640px) {
  .hx-bar .hx-inner { min-height: 64px; }
  .hx-bar-logo img { width: 150px; }
  .hx-foot .hx-inner { grid-template-columns: 1fr; }
  .hx-foot-line, .hx-foot-nav, .hx-foot-copy { grid-column: 1; grid-row: auto; }
}
@media (max-width: 480px) { .hx-bar-logo img { width: 120px; } }

/* Footer refinement: left-aligned motto; separate Contact and Back to top. */
.hx-foot .hx-inner {
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: clamp(20px, 5vw, 80px);
}
.hx-foot-line {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
}
.hx-foot-nav {
  grid-column: 2 / 4;
  grid-row: 1;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: clamp(32px, 7vw, 110px);
  align-items: center;
  justify-content: end;
}
.hx-foot-copy { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 640px) {
  .hx-foot .hx-inner { grid-template-columns: 1fr; row-gap: 16px; }
  .hx-foot-line { grid-column: 1; grid-row: 1; text-align: left; }
  .hx-foot-nav { grid-column: 1; grid-row: 2; justify-content: space-between; }
  .hx-foot-copy { grid-column: 1; grid-row: 3; }
}

/* Small phones: the logo already goes home, so the Home button steps
   aside instead of squeezing against the edge of the screen. */
@media (max-width: 420px) {
  .hx-bar-nav a.hx-bar-home { display: none; }
}

/* Footer now has three links: Contact, Privacy, Back to top */
.hx-foot-nav { grid-template-columns: auto auto auto; column-gap: clamp(24px, 5vw, 80px); }
@media (max-width: 640px) {
  .hx-foot-nav { column-gap: 16px; }
}

/* ==========================================================
   Header v2 (Oct 2026): stays at the top while scrolling,
   Explore menu, search, and a one-line "what is Hanten" strip.
   ========================================================== */
.hx-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Nav buttons look like the nav links */
.hx-bar-nav { position: relative; flex-wrap: nowrap; }
.hx-dd { position: relative; }
.hx-dd-btn, .hx-search-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 0; border-radius: 999px;
  background: transparent; color: #ffffff; opacity: .88;
  font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer;
}
.hx-dd-btn:hover, .hx-search-btn:hover,
.hx-dd-btn[aria-expanded="true"], .hx-search-btn[aria-expanded="true"],
.hx-dd-btn[data-current="true"] { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.hx-dd-btn:focus-visible, .hx-search-btn:focus-visible { outline: 2px solid #E59E12; outline-offset: 2px; }
.hx-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s; }
.hx-dd-btn[aria-expanded="true"] .hx-caret { transform: rotate(180deg); }
.hx-search-btn { padding: 8px 10px; }

/* Explore dropdown */
.hx-dd-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  padding: 20px; border-radius: 16px; background: #ffffff; color: #172536;
  box-shadow: 0 18px 40px rgba(21, 48, 57, 0.22); border: 1px solid #d9dee3;
}
.hx-dd-panel[hidden] { display: none; }
.hx-dd-head { margin: 0 0 8px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8F5E00; }
.hx-dd-col > a { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; color: #172536; text-decoration: none; }
.hx-dd-col > a:hover, .hx-dd-col > a:focus-visible { background: #EEF2F6; }
.hx-dd-col > a strong { display: block; font-size: .95rem; color: #1A3E6E; }
.hx-dd-col > a span { display: block; font-size: .82rem; color: #5b6670; }
.hx-dd-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hx-dd-themes a { display: block; padding: 8px 10px; border-radius: 10px; font-size: .88rem; font-weight: 700; color: #1A3E6E; text-decoration: none; border: 1px solid rgba(26, 62, 110, .08); }
.hx-dd-themes a:hover, .hx-dd-themes a:focus-visible { border-color: #1A3E6E; }
.hx-dd-themes .theme-perspective  { background: #EDE7F4 !important; }
.hx-dd-themes .theme-time         { background: #F4ECDF !important; }
.hx-dd-themes .theme-scale        { background: #E2EEF5 !important; }
.hx-dd-themes .theme-measurement  { background: #E6EFE2 !important; }
.hx-dd-themes .theme-distribution { background: #F5E6DF !important; }
.hx-dd-themes .theme-statistics   { background: #E4E8F0 !important; }
.hx-dd-themes .theme-probability  { background: #DFF0EB !important; }
.hx-dd-themes .theme-optimization { background: #F1EFD8 !important; }
.hx-dd-themes .theme-systems      { background: #F3E4EA !important; }

@media (max-width: 920px) {
  .hx-bar-nav a.hx-bar-contact { display: none; }   /* Contact stays in the footer */
  .hx-dd { position: static; }
  .hx-dd-panel {
    position: fixed; top: 64px; left: 12px; right: 12px; transform: none; width: auto;
    grid-template-columns: 1fr; gap: 14px; max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .hx-dd-themes { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 640px) {
  .hx-dd-btn, .hx-search-btn { padding: 7px 9px; font-size: 0.82rem; }
}
@media (max-width: 480px) {
  .hx-dd-btn, .hx-search-btn { padding: 6px 7px; font-size: 0.78rem; }
  .hx-dd-themes { grid-template-columns: 1fr 1fr; }
}
/* site.css gives every <header> overflow:hidden; the menu must show */
.hx-bar { overflow: visible !important; }
/* In-page links (#…) land below the sticky header, not under it */
html { scroll-padding-top: 96px; }

/* ==========================================================
   Header v3 (Oct 2026): same height while scrolling; a short
   search box beside the menu (a button on phones); slim footer.
   ========================================================== */
.hx-search { position: relative; margin: 0 2px 0 6px; }
.hx-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.75); line-height: 0; pointer-events: none; }
.hx-search input {
  width: 170px; box-sizing: border-box; padding: 8px 12px 8px 34px;
  font: inherit; font-size: .9rem; color: #fff;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px;
  transition: width .2s ease, background .2s ease;
}
.hx-search input::placeholder { color: rgba(255,255,255,.75); }
.hx-search input:focus { outline: none; width: 240px; background: #fff; color: #172536; border-color: #E59E12; }
.hx-search:focus-within .hx-search-icon { color: #1A3E6E; }
.hx-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.hx-results {
  position: absolute; top: calc(100% + 8px); right: 0; width: 360px; margin: 0; padding: 8px; list-style: none;
  background: #fff; border-radius: 14px; border: 1px solid #d9dee3; box-shadow: 0 18px 40px rgba(21,48,57,.22);
  max-height: 60vh; overflow-y: auto; z-index: 5;
}
.hx-results:empty { display: none; }
.hx-results a { display: flex; gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: 10px; color: #172536; text-decoration: none; font-size: .92rem; line-height: 1.3; }
.hx-results a:hover, .hx-results a:focus-visible { background: #EEF2F6; }
.hx-results a span { flex: none; width: 3.1em; font-size: .76rem; font-weight: 800; color: #1A3E6E; }
.hx-results .hx-results-all a { color: #8F5E00; font-weight: 700; }
.hx-results-none { padding: 8px 10px; color: #5b6670; font-size: .92rem; }
.hx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx-search-btn { display: none; }

@media (max-width: 920px) {
  .hx-search-btn { display: inline-flex; }
  .hx-bar-nav { position: static; }
  .hx-search { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 10px 15px 12px; background: #fff; box-shadow: 0 12px 24px rgba(21,48,57,.18); }
  .hx-bar.hx-searching .hx-search { display: block; }
  .hx-search-icon { left: 27px; color: #1A3E6E; }
  .hx-search input, .hx-search input:focus { width: 100%; background: #fff; color: #172536; border-color: #1A3E6E; font-size: 1rem; }
  .hx-search input::placeholder { color: #6b7780; }
  .hx-results { position: static; width: auto; margin-top: 8px; box-shadow: none; border: 0; padding: 0; }
}

/* Slim footer: one row, copyright tucked underneath */
.hx-foot { margin-top: 40px; }
.hx-foot .hx-inner { padding: 14px 0 12px !important; row-gap: 2px !important; }
.hx-foot-line { font-size: .9rem !important; }
.hx-foot-nav a { font-size: .85rem; }
.hx-foot-copy { font-size: .72rem !important; }
@media (max-width: 640px) {
  .hx-foot .hx-inner { row-gap: 8px !important; padding: 14px 0 !important; }
}
@media (max-width: 920px) {
  .hx-search-icon { top: 33px; }
}
/* "For educators" shortens to "Educators" on small phones */
.hx-short { display: none; }
@media (max-width: 480px) { .hx-bar-nav .hx-short { display: inline; } }

/* Header and footer reach closer to the edges of the screen */
.hx-bar .hx-inner, .hx-foot .hx-inner { width: auto !important; max-width: none; margin: 0 clamp(16px, 2.5vw, 40px) !important; }
/* Contact is a plain link, not a circled button */
.hx-bar-nav a.hx-bar-contact { border: 0 !important; opacity: .88; }
.hx-bar-nav a.hx-bar-contact:hover, .hx-bar-nav a.hx-bar-contact[aria-current="page"] { opacity: 1; }

/* For educators menu: one column of the five products */
.hx-dd-panel.hx-dd-panel-edu { width: 300px; grid-template-columns: 1fr; }
@media (max-width: 920px) { .hx-dd-panel.hx-dd-panel-edu { width: auto; } }

/* Get started and For Educators: one column; Explore: just the themes */
.hx-dd-panel.hx-dd-panel-one { width: 300px; grid-template-columns: 1fr; gap: 0; }
.hx-dd-panel.hx-dd-panel-themes { width: 340px; grid-template-columns: 1fr; }
.hx-dd-head-gap { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid #e3e7eb; }
.hx-dd-col > a.hx-dd-feature { background: #FFF6E3; }
.hx-dd-col > a.hx-dd-feature:hover, .hx-dd-col > a.hx-dd-feature:focus-visible { background: #FCEBC4; }
@media (max-width: 920px) { .hx-dd-panel.hx-dd-panel-one, .hx-dd-panel.hx-dd-panel-themes { width: auto; } }

/* Phones: three menus + search fit beside the logo */
@media (max-width: 480px) {
  .hx-bar .hx-inner { gap: 6px; }
  .hx-bar-logo img { width: 96px; }
  .hx-bar-nav { gap: 0; }
  .hx-bar-nav .hx-dd-btn { padding: 6px 5px; font-size: .76rem; gap: 3px; }
  .hx-bar-nav .hx-caret { border-left-width: 3px; border-right-width: 3px; border-top-width: 4px; }
  .hx-search-btn { padding: 6px 4px; }
}
@media (max-width: 360px) { .hx-bar-nav .hx-caret { display: none; } }

/* Footer has four links now: Why Hanten?, Contact, Privacy, Back to top */
.hx-foot-nav { grid-template-columns: repeat(4, auto); column-gap: clamp(20px, 3.5vw, 56px); }
@media (max-width: 640px) {
  .hx-foot-nav { grid-template-columns: repeat(2, auto); row-gap: 10px; column-gap: 16px; justify-content: space-between; }
}
.hx-dd-panel.hx-dd-panel-themes { width: 420px; }
.hx-dd-panel-themes .hx-dd-themes { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .hx-dd-panel.hx-dd-panel-themes { width: auto; } .hx-dd-panel-themes .hx-dd-themes { grid-template-columns: 1fr 1fr; } }

/* Compact navigation at phone/tablet widths; full desktop header above 920px. */
.hx-mobile-toggle { display: none; }
@media (max-width: 920px) {
  .hx-bar .hx-inner { min-height: 64px; gap: 12px; }
  .hx-bar-logo img { width: 132px; }
  .hx-mobile-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; padding: 9px 12px; min-height: 44px;
    border: 1px solid rgba(255,255,255,.5); border-radius: 9px;
    color: #fff; background: transparent; font: inherit; font-weight: 700; cursor: pointer;
  }
  .hx-mobile-toggle:focus-visible { outline: 3px solid #E59E12; outline-offset: 2px; }
  .hx-bar-nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
    padding: 12px 16px 18px; background: #1A3E6E; box-shadow: 0 12px 20px rgba(0,0,0,.2);
    flex-direction: column; align-items: stretch; gap: 4px; }
  .hx-bar.hx-mobile-open .hx-bar-nav { display: flex; }
  .hx-bar-nav .hx-dd-btn { width: 100%; min-height: 44px; justify-content: space-between; font-size: 1rem; padding: 10px 12px; }
  .hx-bar-nav .hx-bar-contact { display: block; padding: 12px; }
  .hx-search-btn { display: inline-flex; width: 100%; min-height: 44px; justify-content: flex-start; }
  .hx-dd-panel { position: static; top: auto; left: auto; right: auto; width: 100% !important;
    transform: none; box-sizing: border-box; max-height: 50vh; overflow-y: auto; margin: 4px 0 8px; }
  .hx-search { position: static; box-shadow: none; padding: 10px 0; }
  .hx-search-icon { left: 12px; }
}


@media (max-width: 640px) {
  .hx-foot .hx-inner { display: flex; flex-direction: column; align-items: center; gap: 12px !important; padding: 20px 0 !important; }
  .hx-foot-line { text-align: center !important; margin: 0; }
  .hx-foot-nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
  .hx-foot-copy { text-align: center; margin: 0; }
}

/* October 2026: mobile scroll-aware header and tighter navigation. */
.hx-search-label { display: none; }
@media (max-width: 640px) {
  .hx-bar {
    position: sticky !important;
    top: 0 !important;
    transition: transform 180ms ease !important;
    will-change: transform;
  }
  .hx-bar.hx-scroll-hidden:not(.hx-mobile-open):not(.hx-searching) {
    transform: translateY(-100%);
    pointer-events: none;
  }
  .hx-bar-nav { gap: 0; padding-top: 6px; padding-bottom: 10px; }
  .hx-bar-nav .hx-dd-btn { min-height: 44px; padding: 8px 12px; }
  .hx-search-btn { gap: 10px; padding: 10px 12px; }
  .hx-search-label { display: inline; font-size: 1rem; font-weight: 700; }
  .hx-bar.hx-mobile-open { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-bar { transition: none !important; }
}

/* Desktop and mobile: shared header hides down, returns up. */
.hx-bar {
  position: sticky !important;
  top: 0 !important;
  transition: transform 180ms ease !important;
}
.hx-bar.hx-scroll-hidden:not(.hx-mobile-open):not(.hx-searching) {
  transform: translateY(-100%);
  pointer-events: none;
}
.hx-bar:focus-within, .hx-bar.hx-mobile-open { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .hx-bar { transition: none !important; } }

/* Unified desktop dropdown surface: preserve Explore's colored theme tiles. */
@media (min-width: 761px) {
  .hx-bar .hx-dd-panel {
    padding: 20px; border-radius: 16px;
    border: 1px solid #d9dee3; background: #fff;
    box-shadow: 0 18px 40px rgba(21,48,57,.22);
  }
  .hx-bar .hx-dd-panel-one { width: 340px; }
  .hx-bar .hx-dd-panel-themes { width: 420px; }
  .hx-bar .hx-dd-panel-one .hx-dd-col > a {
    margin: 2px 0; padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e4eaf0;
    background: #f7f9fc;
  }
  .hx-bar .hx-dd-panel-one .hx-dd-col > a:hover {
    background: #e9f1f8; border-color: #b8cee2;
  }
  .hx-bar .hx-dd-panel-one .hx-dd-col > a.hx-dd-feature { background: #fff6e3; }
  .hx-bar .hx-dd-panel-one .hx-dd-col > a.hx-dd-feature:hover { background: #fcebc4; }
}
.hx-bar .hx-dd-panel a:focus-visible { outline: 3px solid #E59E12; outline-offset: 2px; }

/* Keep tablet header menus within the viewport. */
@media (min-width: 641px) and (max-width: 920px) {
  .hx-bar .hx-inner { min-width: 0; }
  .hx-bar-nav { min-width: 0; }
}