/* CADEELI: quiet editorial surface. Documentary images carry the color. */
body.site-page .home-hero {
  min-height: min(690px, calc(100svh - 80px));
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  align-items: center;
  padding: 0;
  background: #f6f5ef;
  color: #07172b;
}
body.site-page .home-hero-art {
  position: relative;
  z-index: 0;
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  min-height: inherit;
  background: #b1c9b3 url('../images/cadeeli-tinun-hero.jpg') 20% center / cover no-repeat;
  animation: none;
}
body.site-page .home-hero-art::after {
  content: 'Tinun, Campeche · CADEELI';
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  padding: .4rem .6rem;
  background: rgba(7, 23, 43, .78);
  color: #fff;
  font: 700 .62rem var(--font-sans, sans-serif);
  letter-spacing: .04em;
}
body.site-page .home-hero-copy {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  max-width: 760px;
  padding: clamp(3rem, 5.2vw, 6rem) clamp(2rem, 5.1vw, 7rem) 5.5rem;
}
body.site-page .home-hero h1 {
  max-width: 680px;
  margin-bottom: 1.7rem;
  color: #07172b;
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(3.3rem, 5.5vw, 6.4rem);
  line-height: .99;
  letter-spacing: -.05em;
}
body.site-page .home-hero h1 em { color: #0d7881; }
body.site-page .home-hero-copy > p {
  max-width: 500px;
  color: #354b55;
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.1rem, 1.45vw, 1.4rem);
  line-height: 1.5;
}
body.site-page .home-actions { gap: .75rem 1.3rem; margin-top: 2.2rem; }
body.site-page .home-hero .home-cta {
  min-height: 48px;
  padding: .5rem 0;
  border: 0;
  border-bottom: 1px solid #0b7179;
  border-radius: 0;
  background: transparent;
  color: #07172b;
  font-family: var(--font-sans, sans-serif);
  font-size: .88rem;
  font-weight: 700;
}
body.site-page .home-hero .home-cta-secondary { border-color: #a9bdbe; }
body.site-page .home-hero .home-cta:hover { color: #0b7179; background: transparent; }
body.site-page .hero-scroll {
  left: clamp(2rem, 5.1vw, 7rem);
  bottom: 1.6rem;
  color: #52646d;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
}
body.site-page .home-diversity {
  min-height: 230px;
  padding-block: clamp(2.8rem, 4vw, 4.8rem);
  background: #fff;
  border-bottom: 1px solid #dce4e1;
}
body.site-page .home-diversity h2 { max-width: 760px; font-family: var(--font-serif, Georgia, serif); }
body.site-page .diversity-fact strong { color: #0c7e86; }
body.site-page .home-feature { background: #e8eeeb; }
body.site-page .feature-visual { background: #07172b; }
body.site-page .feature-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  filter: none;
}
body.site-page .feature-visual:hover img { transform: none; }
body.site-page .home-cta:not(.home-hero .home-cta) { border-radius: 3px; }
body.site-page .voices-visual img { filter: none; }
body.site-page .language-views {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(.7rem, 2.5vw, 2rem);
  overflow-x: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid #b8c9c9;
  scrollbar-width: thin;
}
body.site-page .language-views button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: .45rem .1rem .65rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #52646d;
  font: 700 .95rem var(--font-sans, sans-serif);
  white-space: nowrap;
}
body.site-page .language-views button[aria-current="page"] {
  border-color: #0b8188;
  background: transparent;
  color: #07172b;
}
body.site-page .language-views button:hover { color: #0b7179; }
body.site-page .dictionary-page .maya-vocabulary { padding-top: 0; }
body.site-page .translate-page .all-language-translator { margin-top: 2rem; }
body.site-page.app-view-dictionary .global-assistant-trigger { display: none; }

@media (max-width: 820px) {
  body.site-page .home-hero {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(290px, 42svh);
  }
  body.site-page .home-hero-copy {
    grid-column: 1;
    grid-row: 1;
    max-width: 680px;
    padding: clamp(2.5rem, 7vw, 4rem) clamp(1.35rem, 5vw, 2.5rem) 2.7rem;
  }
  body.site-page .home-hero-art {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    background-position: center center;
  }
  body.site-page .home-hero h1 { max-width: 640px; font-size: clamp(3.2rem, 8vw, 5.3rem); }
  body.site-page .hero-scroll { display: none; }
  body.site-page .home-diversity { padding-inline: clamp(1.35rem, 5vw, 2.5rem); }
  body.site-page .language-views { justify-content: space-between; gap: .4rem; }
  body.site-page .language-views button { font-size: .875rem; }
  body.site-page .translate-page .all-language-translator { margin-top: 1.8rem; }
}
@media (max-width: 520px) {
  body.site-page .home-hero { grid-template-rows: auto minmax(260px, 34svh); }
  body.site-page .home-hero-copy { padding: 2.3rem 1.35rem 2rem; }
  body.site-page .home-hero h1 { font-size: clamp(2.9rem, 10vw, 3.9rem); line-height: 1.02; }
  body.site-page .home-hero-copy > p { max-width: 37ch; font-size: 1.05rem; }
  body.site-page .home-actions { margin-top: 1.3rem; }
  body.site-page .home-hero .home-cta { font-size: .82rem; }
  body.site-page .home-diversity { gap: 1.4rem; }
  body.site-page .dictionary-page .vocabulary-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem .75rem;
    align-items: center;
  }
  body.site-page .dictionary-page .vocabulary-meta .practice-open {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
    border-radius: 4px;
  }
}

/* Two clear navigation bars on wide screens; the existing bottom bar serves phones. */
@media (min-width: 821px) {
  body.site-page { --site-header-h: 124px; padding-top: 124px; }
  body.site-page .site-header { height: 70px; min-height: 70px; }
  body.site-page .app-navigation,
  body.site-page.nav-collapsed .app-navigation {
    position: fixed;
    z-index: 49;
    inset: 70px 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0 1rem;
    gap: clamp(.3rem, 1.3vw, 1.25rem);
    border-bottom: 1px solid #d6dcd7;
    background: #f6f5ef;
    box-shadow: none;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  body.site-page .app-navigation .app-nav-item {
    flex: 0 1 auto;
    min-height: 54px;
    padding: .65rem .75rem;
    color: #294654;
    font: 600 .95rem var(--font-sans, sans-serif);
  }
  body.site-page .app-navigation .app-nav-item.active {
    color: #07172b;
    box-shadow: inset 0 -2px #0b8188;
  }
  body.site-page .app-navigation .app-nav-item:hover { color: #0b7179; }
  body.site-page .header-actions { margin-left: auto; }
  body.site-page .home-hero { min-height: min(690px, calc(100svh - 124px)); }
}

/* Login is relevant while exploring the map or adding a record. */
body.site-page:not([data-app-view="map"]) #auth-button,
body.site-page:not([data-app-view="map"]) #connection-status { display: none; }
body.site-page .contribution-auth-button {
  min-height: 44px;
  margin-top: .25rem;
  padding: .25rem 0;
  border: 0;
  border-bottom: 1px solid #7ed9dc;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: 700 .78rem var(--font-sans, sans-serif);
  cursor: pointer;
}
body.site-page .contribution-auth-button[hidden] { display: none; }
body.site-page .contribution-auth-button:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }

/* Language lives in a circular control above the lower edge. */
body.site-page .lang-menu-wrap {
  position: fixed;
  z-index: 70;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  left: max(1.25rem, env(safe-area-inset-left, 0px));
}
body.site-page .lang-menu-toggle {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: #07172b;
  color: #fff;
  box-shadow: 0 6px 22px rgba(7,23,43,.22);
}
body.site-page .lang-menu-toggle svg { width: 23px; height: 23px; }
body.site-page .lang-menu-toggle .lang-menu-code { display: none; }
body.site-page .lang-menu {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(100% + .65rem);
  left: 0;
  width: min(340px, calc(100vw - 2rem));
  min-width: 0;
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.site-page .page-language-form { display: grid; gap: .55rem; padding: .2rem .45rem .45rem; }
body.site-page .page-language-form label {
  color: #294654;
  font: 700 .73rem var(--font-sans, sans-serif);
}
body.site-page .page-language-form select {
  width: 100%;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 1px solid #a8bdc2;
  border-radius: 4px;
  background: #fff;
  color: #07172b;
  font: 500 .87rem var(--font-sans, sans-serif);
}
body.site-page .page-language-submit {
  min-height: 46px;
  border: 0;
  border-radius: 4px;
  background: #073968;
  color: #fff;
  font: 700 .85rem var(--font-sans, sans-serif);
  cursor: pointer;
}
body.site-page .page-language-submit:disabled { opacity: .65; cursor: wait; }
body.site-page .page-language-message {
  margin: .1rem 0 0;
  color: #52646d;
  font: 500 .73rem/1.45 var(--font-sans, sans-serif);
}
body.site-page .page-translation-banner {
  position: sticky;
  z-index: 44;
  top: var(--site-header-h, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: .45rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid #b7d3d0;
  background: #e8f3f1;
  color: #173c53;
  font: 600 .76rem/1.35 var(--font-sans, sans-serif);
}
body.site-page .page-translation-banner[hidden] { display: none; }
body.site-page .page-translation-banner button {
  flex: none;
  min-height: 40px;
  padding: .25rem .45rem;
  border: 0;
  background: transparent;
  color: #073968;
  font: 700 .76rem var(--font-sans, sans-serif);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.site-page .hero-scroll { display: none; }
@media (max-width: 820px) {
  body.site-page .lang-menu-wrap { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); left: max(.85rem, env(safe-area-inset-left, 0px)); }
  body.site-page .lang-menu { position: absolute; right: auto; left: 0; }
}