/* Public homepage visual layer.
   The page keeps the existing public information architecture and search
   behavior, but uses one coherent visual grammar instead of competing
   Tailwind, Bootstrap, and legacy marketing overrides. */

:root {
  --home-ink: var(--kinjo-color-text-primary);
  --home-muted: var(--kinjo-color-text-secondary);
  --home-paper: var(--kinjo-color-bg-body);
  --home-surface: var(--kinjo-color-bg-surface);
  --home-brand: var(--kinjo-brand);
  --home-action: var(--kinjo-action);
  --home-action-dark: var(--kinjo-action-hover);
  --home-gold: var(--kinjo-color-success);
  --home-line: var(--kinjo-color-border-subtle);
  --home-radius: 1.25rem;
}

html { scroll-behavior: smooth; }

body.kinjo-public-home {
  background: var(--home-paper) !important;
  color: var(--home-ink) !important;
  font-family: var(--kinjo-font-family, "Segoe UI", Tahoma, sans-serif) !important;
}

body.kinjo-public-home :where(h1, h2, h3, h4, p) {
  text-wrap: pretty;
}

body.kinjo-public-home :where(a, button, input, select) {
  -webkit-tap-highlight-color: transparent;
}

body.kinjo-public-home :where(a, button, input, select):focus-visible {
  outline: 3px solid var(--home-gold) !important;
  outline-offset: 3px;
}

body.kinjo-public-home .kinjo-public-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 10px 28px rgba(0, 31, 77, .22) !important;
}

body.kinjo-public-home .kinjo-public-header > div:first-child {
  min-height: 4.75rem;
}

body.kinjo-public-home .kinjo-public-header .navbar-brand,
body.kinjo-public-home .kinjo-public-header a,
body.kinjo-public-home .kinjo-public-header button {
  min-height: 2.75rem;
}

body.kinjo-public-home .kinjo-public-header .nav-link,
body.kinjo-public-home .kinjo-public-header > div:first-child > nav > a,
body.kinjo-public-home .kinjo-public-header > div:first-child > nav button {
  border-radius: .65rem;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.kinjo-public-home .kinjo-public-header .nav-link:hover,
body.kinjo-public-home .kinjo-public-header > div:first-child > nav > a:hover,
body.kinjo-public-home .kinjo-public-header > div:first-child > nav button:hover {
  background: rgba(255, 255, 255, .11) !important;
}

body.kinjo-public-home .kinjo-public-header .nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 0.375rem) !important;
  inset-inline-start: 0 !important;
  z-index: 9999 !important;
  border: 1px solid var(--home-line) !important;
  border-radius: 1rem !important;
  box-shadow: 0 24px 48px rgba(15, 23, 42, .22) !important;
  transform-origin: top start;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  max-width: calc(100vw - 2rem) !important;
  max-height: calc(100vh - 6rem) !important;
  overflow-y: auto !important;
}

/* Invisible hover bridge to eliminate pointer drop-off across the gap */
body.kinjo-public-home .kinjo-public-header .nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -0.625rem;
  inset-inline: 0;
  height: 0.625rem;
  background: transparent;
}

body.kinjo-public-home .kinjo-public-header .nav-dropdown-menu:not([hidden]) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

body.kinjo-public-home .kinjo-public-header .nav-dropdown-menu[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) !important;
  pointer-events: none !important;
}

/* Header menu trigger button feedback & Chevron rotation */
body.kinjo-public-home .kinjo-public-header [data-menu] > button,
body.kinjo-public-home .kinjo-public-header [data-mobile-menu-trigger] {
  position: relative;
  transition: background-color 160ms ease, color 160ms ease;
}

body.kinjo-public-home .kinjo-public-header [data-menu] > button[aria-expanded="true"],
body.kinjo-public-home .kinjo-public-header [data-mobile-menu-trigger][aria-expanded="true"] {
  background: rgba(255, 255, 255, .18) !important;
  color: var(--kinjo-color-text-inverse) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

body.kinjo-public-home .kinjo-public-header [data-menu] > button .material-symbols-outlined:last-child,
body.kinjo-public-home .kinjo-public-header [data-mobile-menu-trigger] .material-symbols-outlined:last-child {
  transition: transform 200ms ease;
}

body.kinjo-public-home .kinjo-public-header [data-menu] > button[aria-expanded="true"] .material-symbols-outlined:last-child,
body.kinjo-public-home .kinjo-public-header [data-mobile-menu-trigger][aria-expanded="true"] .material-symbols-outlined:last-child {
  transform: rotate(180deg);
}

/* Keyboard focus visibility */
body.kinjo-public-home .kinjo-public-header button:focus-visible,
body.kinjo-public-home .kinjo-public-header a:focus-visible {
  outline: 2px solid var(--kinjo-gold, var(--kinjo-color-success)) !important;
  outline-offset: 2px !important;
}

body.kinjo-public-home #mobile-menu-toggle-btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

body.kinjo-public-home #kg-search-section {
  isolation: isolate;
  min-height: 44rem;
  padding-block: clamp(4.5rem, 9vw, 7rem) clamp(3.5rem, 7vw, 5.5rem) !important;
  background-color: var(--kinjo-brand) !important;
}

body.kinjo-public-home #kg-search-section::before {
  display: none;
}

body.kinjo-public-home #kg-search-section::after {
  display: none;
}

/* The approved hero artwork is the full-quality background. Never dim, blur,
   or replace it with an unapproved decorative image. */
body.kinjo-public-home #kg-search-section > div.absolute.inset-0.z-0 {
  opacity: 1 !important;
}

body.kinjo-public-home #kg-search-section > div.absolute.inset-0.z-0 > div.kinjo-hero-image {
  opacity: 1 !important;
  filter: none !important;
}

body.kinjo-public-home #kg-search-section > div.absolute.inset-0.z-0 > div.kinjo-hero-overlay {
  background: linear-gradient(270deg, rgba(0, 47, 108, .34) 0%, rgba(0, 47, 108, .18) 52%, rgba(0, 47, 108, .08) 100%) !important;
}

html[dir="ltr"] body.kinjo-public-home #kg-search-section > div.absolute.inset-0.z-0 > div.kinjo-hero-overlay {
  background: linear-gradient(90deg, rgba(0, 47, 108, .34) 0%, rgba(0, 47, 108, .18) 52%, rgba(0, 47, 108, .08) 100%) !important;
}

body.kinjo-public-home #kg-search-section > div.relative {
  max-width: 76rem;
}

body.kinjo-public-home #kg-search-section > div.relative > div:first-child {
  justify-content: flex-start;
  margin-bottom: 1.75rem;
}

body.kinjo-public-home #kg-search-section > div.relative > div:first-child > div {
  color: var(--home-brand) !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(197, 160, 89, .38) !important;
  box-shadow: 0 10px 24px rgba(0, 31, 77, .14) !important;
}

/* 2026 hero redesign: the registry sentence is split into a display-scale
   heading (white, brand-gold highlight handled in markup) plus a subtitle,
   both CENTERED on the darkened photo per the redesign spec (text-4xl ->
   text-5xl on desktop). The clamp reaches 3rem (48px) on wide screens and
   stays readable on phones. The overlay now does the contrast work, so the
   type shadow is one soft grounding pass instead of two heavy ones. */
body.kinjo-public-home #kg-search-section h1 {
  max-width: 48ch;
  margin-inline: auto;
  color: var(--kinjo-color-text-inverse) !important;
  font-size: clamp(1.625rem, 3.2vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
}

body.kinjo-public-home #kg-search-section > div.relative > div.text-center.max-w-3xl h1 {
  color: var(--kinjo-color-text-inverse) !important;
  /* One soft shadow now: the .80 -> .90 slate overlay owns contrast, the
     shadow only seats the glyphs on the photograph. */
  text-shadow: 0 2px 12px rgba(2, 6, 23, .45);
}

body.kinjo-public-home #kg-search-section .text-center.max-w-3xl {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}

body.kinjo-public-home #kg-search-section > div.relative > div.max-w-4xl {
  max-width: 68rem;
  margin-inline: 0;
}

body.kinjo-public-home #kg-search-section .glass-card {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(197, 160, 89, .46) !important;
  border-radius: var(--home-radius) !important;
  box-shadow: 0 24px 56px -32px rgba(0, 31, 77, .42) !important;
}

body.kinjo-public-home #kg-search-section input,
body.kinjo-public-home #kg-search-section select {
  min-height: 2.875rem;
  border-color: var(--kinjo-color-public-border) !important;
  color: var(--home-ink) !important;
  box-shadow: none !important;
}

body.kinjo-public-home #kg-search-section input:focus,
body.kinjo-public-home #kg-search-section select:focus {
  border-color: var(--home-action) !important;
  box-shadow: 0 0 0 4px rgba(30, 64, 175, .12) !important;
}

body.kinjo-public-home #kg-search-btn {
  min-height: 2.875rem;
  border-radius: .75rem !important;
  background: var(--home-action) !important;
  box-shadow: 0 12px 22px rgba(30, 64, 175, .2) !important;
}

body.kinjo-public-home #kg-search-btn:hover {
  background: var(--home-action-dark) !important;
  transform: translateY(-1px);
}

body.kinjo-public-home .kg-quick-gov-pill {
  min-height: 2.25rem;
  padding-inline: .8rem !important;
  border-color: var(--kinjo-color-border-subtle) !important;
  color: var(--home-brand) !important;
}

body.kinjo-public-home .kg-quick-gov-pill:hover,
body.kinjo-public-home .kg-quick-gov-pill.bg-primary {
  color: var(--kinjo-color-text-inverse) !important;
  background: var(--home-brand) !important;
  border-color: var(--home-brand) !important;
}

body.kinjo-public-home #kg-results-results,
body.kinjo-public-home #kg-search-results {
  scroll-margin-top: 6rem;
}

body.kinjo-public-home #kg-search-results h2 {
  font-size: 1.1rem;
  font-weight: 800;
}

body.kinjo-public-home main > section[aria-label="Key Portal Highlights"] {
  background: var(--home-brand) !important;
  border-block: 1px solid rgba(255, 255, 255, .14) !important;
}

body.kinjo-public-home main > section[aria-label="Key Portal Highlights"] .text-tertiary {
  color: var(--kinjo-color-gold-soft) !important;
}

body.kinjo-public-home main > section[aria-label="Trusted Institutional Partners"],
body.kinjo-public-home main > section[aria-label="Role Portals"] {
  background: var(--home-paper) !important;
}

body.kinjo-public-home main > section[aria-label="Governance & Quality Standards"],
body.kinjo-public-home main > section[aria-label="KinJo Mobile App"] {
  background: var(--kinjo-color-public-surface) !important;
}

body.kinjo-public-home main > section:not([aria-label="Search Kindergartens"]):not([aria-label="Key Portal Highlights"]) {
  border-color: var(--home-line) !important;
}

/* Dark sections (e.g. the Home Nursery Licensing banner) style their own h2
   with .text-white/.text-tertiary — the brand color below is for light
   sections only, and negative letter-spacing is harmful to Arabic joining. */
body.kinjo-public-home main > section:not([aria-label="Search Kindergartens"]):not([aria-label="Home Nursery Licensing"]) h2 {
  color: var(--home-brand) !important;
  letter-spacing: -.025em !important;
}

body.kinjo-public-home .kinjo-home-value-card,
body.kinjo-public-home main > section[aria-label="Governance & Quality Standards"] .bg-white {
  border: 1px solid var(--home-line) !important;
  border-radius: 1rem !important;
  box-shadow: 0 12px 30px rgba(0, 47, 108, .06) !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body.kinjo-public-home .kinjo-home-value-card:hover,
body.kinjo-public-home main > section[aria-label="Governance & Quality Standards"] .bg-white:hover {
  border-color: rgba(197, 160, 89, .62) !important;
  box-shadow: 0 18px 36px rgba(0, 47, 108, .12) !important;
  transform: translateY(-3px);
}

body.kinjo-public-home main > section[aria-label="KinJo Mobile App"] .w-64 {
  border-color: var(--kinjo-brand) !important;
  box-shadow: 0 24px 48px rgba(0, 31, 77, .18) !important;
}

@media (min-width: 900px) {
  body.kinjo-public-home #kg-search-section > div.relative {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.kinjo-public-home #kg-search-section .glass-card {
    max-width: 66rem;
  }
}

@media (max-width: 899.98px) {
  body.kinjo-public-home #kg-search-section::after {
    display: none;
  }

  body.kinjo-public-home #kg-search-section {
    min-height: auto;
    padding-block: 3.5rem 3rem !important;
  }

  body.kinjo-public-home #kg-search-section .text-center.max-w-3xl {
    text-align: center;
  }

  body.kinjo-public-home #kg-search-section > div.relative > div:first-child {
    justify-content: center;
  }

  body.kinjo-public-home #mobile-nav-drawer :where(a, button) {
    min-height: 2.75rem;
  }
}

@media (max-width: 575.98px) {
  /* Phones scale the sentence down further still. The 10vw step here was sized
     for the old three-word title; left in place it rendered the registry
     sentence as eight lines, 359px of headline before a visitor reaches the
     search box. */
  body.kinjo-public-home #kg-search-section h1 {
    font-size: clamp(1.25rem, 5.2vw, 1.625rem) !important;
    line-height: 1.45 !important;
  }

  body.kinjo-public-home #kg-search-section .glass-card {
    padding: 1rem !important;
  }

  body.kinjo-public-home main > section[aria-label="Key Portal Highlights"] .border-s {
    border-inline-start: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Suppress decorative motion while preserving focus, loading and status
     transitions that communicate state to users. */
  body.kinjo-public-home .animate-pulse,
  body.kinjo-public-home .animate-spin { animation: none !important; }
}
/* Home Nursery Licensing section: the display heading needs a relaxed line
   box - text-4xl's built-in 1.11 line-height clips Arabic glyph ascenders and
   shadda diacritics (measured scrollHeight > clientHeight). This rule lives
   in CSS so template-state changes cannot undo it. (Kept from the previous
   banner; it now styles the light redesign's heading.) */
body.kinjo-public-home section[aria-label="Home Nursery Licensing"] h2 {
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
}