/* The homepage uses the reference's full-width brand, navigation and controls. */
[data-moke-home-navigation] .moke-site-header-inner {
  width: calc(100% - 48px);
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 2.2vw, 42px);
}
[data-moke-home-navigation] .moke-site-brand { font-size: clamp(15px, 1.1vw, 20px); }
[data-moke-home-navigation] .moke-site-nav { gap: clamp(18px, 2.7vw, 54px); }
[data-moke-home-navigation] .moke-site-nav > a,
[data-moke-home-navigation] .moke-site-nav > .moke-workflow-menu > a { font-size: clamp(11.7px, 1vw, 18px); }
/* Keep the homepage black while allowing the existing control to save the
   theme preference used on other pages. Its tooltip explains this behavior. */
body[data-force-dark="true"] > [data-moke-home-navigation] .moke-theme-toggle { display: inline-flex !important; }
/* Shared navigation already reserves its height on body; keep the hero within
   the remaining viewport instead of adding a second header-sized gap. */
body:has(> [data-moke-home-navigation]) > .hero { min-height: calc(100svh - 72px); }
body:has(> [data-moke-home-navigation]) > .hero .hero-frame { min-height: calc(100svh - 120px); }
@media (max-width: 1080px) {
  [data-moke-home-navigation] { min-height: 64px; }
  [data-moke-home-navigation] .moke-site-header-inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
  [data-moke-home-navigation] .moke-site-nav { gap: 2px; }
  [data-moke-home-navigation] .moke-site-nav > a,
  [data-moke-home-navigation] .moke-site-nav > .moke-workflow-menu > a { font-size: 14px; }
  body:has(> [data-moke-home-navigation]) > .hero { min-height: calc(100svh - 64px); }
  body:has(> [data-moke-home-navigation]) > .hero .hero-frame { min-height: calc(100svh - 112px); }
}
@media (max-width: 767px) {
  body:has(> [data-moke-home-navigation]) > .hero .hero-frame { min-height: calc(100svh - 96px); }
}
@media (max-width: 720px) {
  body:has(> [data-moke-home-navigation]) > .hero .hero-frame { min-height: max(calc(100svh - 88px), 680px); }
}
@media (max-width: 560px) {
  [data-moke-home-navigation] .moke-site-header-inner { width: calc(100% - 24px); }
  [data-moke-home-navigation] .moke-site-brand { font-size: 13px; }
}
@media (max-width: 380px) {
  [data-moke-home-navigation] .moke-site-header-inner { width: calc(100% - 20px); gap: 6px; }
  [data-moke-home-navigation] .moke-site-brand { font-size: 11px; gap: 6px; }
  [data-moke-home-navigation] .moke-site-brand > span { width: 8px; height: 8px; }
  [data-moke-home-navigation] .moke-site-controls { padding: 3px; gap: 1px; }
  [data-moke-home-navigation] .moke-site-controls > button:not(.moke-theme-toggle) { min-width: 26px; padding-inline: 5px; }
  [data-moke-home-navigation] .moke-site-controls .moke-account-link { width: 52px !important; min-width: 52px; max-width: 52px !important; padding-inline: 4px; margin-left: 0; }
  [data-moke-home-navigation] .moke-nav-toggle { width: 32px; height: 32px; }
}