/* front.css - public JDIH site only (loaded last from src/app/(public)/layout.tsx,
   hand-edited, versioned via mtime ?v=). A rule here outranks tvt.css /
   globals.css / the MUI theme at equal specificity - the place for
   front-site visual tweaks. Dark-only overrides go in front-dark.css. */

/* Public header (pill <-> full-bleed on scroll): layout + colours live in
   src/components/layout/public-site/styles.module.css. The blur has to be
   here - Lightning CSS strips `backdrop-filter` out of CSS Modules. */
.ts-front-navbar-inner {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-radius: 100px;
}

.ts-front-navbar--scrolled .ts-front-navbar-inner {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Body section directly below <PublicPageHeader> on every public page
   except Home and the error/not-found pages (PublicPageHeader itself has
   no such section - Home builds its own layout from separate sections).
   Breathing room from the page header above it. */
.laman-section {
  padding-block-start: 30px;
}

/* Hero search field - frosted input, no submit button (Enter submits).
   Placeholder/focus-border color: `--mui-palette-*` only for the "no
   hero image" case (plain page content, correctly theme-aware). Once
   there's an image, both are driven by the image's own analysed
   brightness via a fixed literal (`--on-image` = dark photo/light text,
   `--on-image-light` = bright photo/dark text) or the inline
   `--hero-focus-border` custom property HomeSearchHero sets - never a
   theme variable, which would otherwise still shift the placeholder/
   focus color on a light/dark toggle despite the same fixed photo being
   on screen the whole time. */
.hero-search-input::placeholder {
  color: var(--mui-palette-text-disabled);
  opacity: 1;
}

.hero-search-input--on-image::placeholder {
  color: rgb(255 255 255 / 0.75);
}

.hero-search-input--on-image-light::placeholder {
  color: rgb(0 0 0 / 0.4);
}

.hero-search-input:focus {
  border-color: var(--hero-focus-border, var(--mui-palette-primary-main)) !important;
}

/* Footer free-text columns (setting_web.footer1_text / footer2_text hold
   raw <ul><li><a> markup entered in Pengaturan) */
.footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  color: var(--mui-palette-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--mui-palette-primary-main);
}

/* These columns are meant to read as plain link/info lists, not styled
   prose. `<address>` is the actual culprit for the tilted "Alamat" column
   text - browsers italicize it by default (it's not admin-added <em>/<i>
   markup) - normalized here along with those two, just in case. */
.footer-links em,
.footer-links i,
.footer-links address {
  font-style: normal;
}

/* Navbar quick-search modal (.ph-search-modal) styling moved to
   src/app/globals.css - that stylesheet loads on both the public site and
   the admin backend, and this modal is now shared by both (see
   PhSearchModal.tsx). front.css only loads on the public site, so the
   admin's copy of the modal would otherwise render unstyled. See
   [[project-jdih-nextjs-port]]. */