/* ============================================================
   enhance.css — Splash, loading UX, mobile navigation,
   responsive hardening, accessibility. Layered on top of
   site.css (pure CSS, no framework).
   ============================================================ */

/* ============================================================
   HEADER — fit the long Indonesian nav without the brand text
   overlapping the menu. The shared .wrap caps at 1180px which is
   narrower than the header needs, so we widen the header bar and
   collapse to the hamburger earlier on smaller laptops.
   ============================================================ */
.site-header__bar { width: min(100% - 40px, 1320px); }
.brand { flex-shrink: 0; }
.header-cta { flex-shrink: 0; }

@media (min-width: 1101px) {
  .nav { flex-wrap: nowrap; gap: 0; }
  .nav__link { padding: 0.5rem 0.62rem; font-size: 0.87rem; }
}
/* Medium desktops: keep the full nav but drop the CTA button for room */
@media (min-width: 1101px) and (max-width: 1279px) {
  .header-cta .btn { display: none; }
  .brand__txt b { font-size: 0.96rem; }
}
/* Tablets & small laptops: switch to the hamburger menu */
@media (max-width: 1100px) {
  .nav,
  .header-cta .btn { display: none !important; }
  .burger { display: flex !important; }
}

/* ----- Admin-configurable navbar position (Pengaturan → Navigasi) ----- */
/* Desktop menu alignment (only where the horizontal nav is shown) */
@media (min-width: 1101px) {
  body[data-nav-align="left"]  .site-header__bar { justify-content: flex-start; }
  body[data-nav-align="left"]  .nav { margin-right: auto; }
  body[data-nav-align="left"]  .header-cta { margin-left: 1rem; }

  body[data-nav-align="right"] .site-header__bar { justify-content: flex-start; }
  body[data-nav-align="right"] .nav { margin-left: auto; }
  /* center = default (space-between), no override */
}
/* Sticky toggle: when off, header sits at top and scrolls away with the page */
body[data-nav-sticky="0"] .site-header { position: absolute; }

/* Mobile navigation mode */
body[data-nav-mobile="hamburger"] .mobile-nav { display: none !important; }
@media (max-width: 767px) {
  body[data-nav-mobile="hamburger"] { padding-bottom: 0 !important; }
  body[data-nav-mobile="hamburger"] .fab-wrap { bottom: 1.2rem !important; }
}

/* ---------- Accessibility: skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--brown-900, #3d2b1f);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* Visible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold, #d9b25a);
  outline-offset: 2px;
}

/* ---------- Splash screen ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 35%, oklch(0.30 0.04 54) 0%, oklch(0.24 0.035 52) 60%, oklch(0.20 0.03 50) 100%);
  transition: opacity .55s ease, visibility .55s ease;
}
.splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
  padding: 24px;
  animation: splashIn .6s ease both;
}
.splash__logo {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: oklch(1 0 0 / 0.06);
  box-shadow: 0 8px 40px oklch(0 0 0 / 0.25), inset 0 0 0 1px oklch(0.80 0.115 84 / 0.30);
  animation: splashPulse 2.2s ease-in-out infinite;
}
.splash__logo img { width: 72px; height: 72px; object-fit: contain; }
.splash__brand b {
  display: block;
  font-family: var(--ff-serif, serif);
  color: #fff;
  font-size: 1.35rem;
  letter-spacing: .01em;
}
.splash__ar {
  display: block;
  margin-top: .35rem;
  color: var(--gold, #d9b25a);
  font-family: 'Amiri', serif;
  font-size: 1.15rem;
  direction: rtl;
}
.splash__bar {
  width: 160px;
  height: 4px;
  border-radius: 99px;
  background: oklch(1 0 0 / 0.12);
  overflow: hidden;
  margin-top: .4rem;
}
.splash__bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold, #d9b25a), var(--gold-deep, #b88a2e));
  animation: splashBar 1.3s ease-in-out infinite;
}
@keyframes splashIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes splashPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes splashBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* ---------- Skeleton loader (utility) ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--line, #e6ded2);
  border-radius: var(--radius, 4px);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.45), transparent);
  animation: skeleton 1.4s infinite;
}
@keyframes skeleton { 100% { transform: translateX(100%); } }

/* Lazy images fade in once loaded to avoid jank */
img.lazyload { opacity: 0; transition: opacity .4s ease; }
img.lazyload.is-loaded,
img.lazyload[data-loaded] { opacity: 1; }

/* ---------- Mobile bottom navigation (web-app style) ---------- */
.mobile-nav {
  display: none;
}
/* App-style bottom nav on phones only; tablets/laptops use the hamburger. */
@media (max-width: 767px) {
  .mobile-nav {
    display: grid;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: oklch(0.995 0.006 84 / 0.96);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-top: 1px solid var(--line, #e6ded2);
    box-shadow: 0 -6px 24px oklch(0.3 0.03 60 / 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 7px;
    color: var(--brown-600, #7a6a55);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .01em;
    min-height: 56px;
    transition: color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav__item svg { width: 23px; height: 23px; stroke-width: 1.9; }
  .mobile-nav__item.is-active { color: var(--green-700, #2f7a4d); }
  .mobile-nav__item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 30px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--green-600, #3a8a5a);
  }
  .mobile-nav__item { position: relative; }

  /* Make room so bottom nav never covers content / FAB */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
  .fab-wrap { bottom: calc(64px + env(safe-area-inset-bottom, 0)) !important; }
  .site-footer { margin-bottom: 0; }
}

/* ---------- Responsive hardening ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* Tablet */
@media (max-width: 1023px) and (min-width: 768px) {
  .grid-3 { grid-template-columns: 1fr 1fr !important; }
}

/* Split hero layouts (Profil / Pengasuh / Featured news) stack below 860px,
   overriding inline grid-template-columns in the Blade markup. */
@media (max-width: 860px) {
  .about-grid,
  .pengasuh-grid { grid-template-columns: 1fr !important; }
}

/* Mobile small (>=320px): tame dense sections, big tap targets */
@media (max-width: 767px) {
  .grid-3,
  .grid-2 { grid-template-columns: 1fr !important; }
  .btn { min-height: 44px; }
  .header-cta .btn { padding-inline: .9em; }
  h1 { word-break: break-word; }
  .wrap { padding-inline: 18px; }

  /* Section rhythm: lighter vertical padding so content isn't cramped */
  .section { padding-block: 2.6rem; }
  .head { margin-bottom: 1.6rem; }
  h2 { font-size: clamp(1.5rem, 6vw, 1.9rem); line-height: 1.2; }
  h3 { font-size: 1.2rem; }

  /* Page hero: tighten and keep text readable */
  .pagehero { padding: calc(var(--header-h) + 30px) 0 30px !important; }
  .pagehero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }

  /* Any 2-col "split" layout (Profil, Pengasuh, About) → single column.
     Overrides inline grid-template-columns set in the Blade markup. */
  .about-grid,
  .pengasuh-grid,
  .feature { grid-template-columns: 1fr !important; gap: 1.4rem !important; }

  /* Profil photo + floating badge: stack neatly, no overlap/overflow */
  .about-figure { order: -1; }
  .about-figure img,
  .about-figure .ph { aspect-ratio: 4/3 !important; }
  .about-figure .badge {
    position: static !important;
    display: inline-flex; align-items: baseline; gap: .4rem;
    margin-top: .8rem; right: auto; bottom: auto;
  }
  .about-figure .badge b { font-size: 1.3rem; }

  /* Pengasuh photo: don't stick, sit above the bio */
  .pengasuh-grid img,
  .pengasuh-grid .ph { aspect-ratio: 4/3 !important; position: static !important; }

  /* Featured news card image height */
  .feature .ph,
  .feature img { min-height: 200px !important; }

  /* Misi / agenda / step rows: comfortable single column */
  .misi-list li { padding: .9rem 1rem; }
  .agenda__row { padding: 1rem 1.1rem; }

  /* Timeline rows: time on its own line, in brand colour */
  .timeline__row { padding: .8rem 0; }
  .timeline__time { display: block; margin-bottom: .15rem; }
}

/* Category / pill filters → horizontal scroll strip on phones (app-like) */
@media (max-width: 767px) {
  .filter {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -18px;
    padding: 0 18px .4rem;
    scroll-snap-type: x proximity;
  }
  .filter::-webkit-scrollbar { display: none; }
  .filter a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .wrap { padding-inline: 14px; }
  .brand__txt small { display: none; }
}

/* ============================================================
   LONG-FORM CONTENT — justify for a clean, even text block on
   both desktop and mobile. Indonesian hyphenation (html lang="id")
   keeps the spacing tidy. Headings stay left-aligned.
   ============================================================ */
.prose,
.prose p,
.article .prose,
.article .prose p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  text-align: left;
  hyphens: manual;
}

/* ============================================================
   SHARED: category filter pills + gallery tiles
   (used on Berita, Galeri page and the home gallery section)
   ============================================================ */
.filter { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.5rem; }
.filter a {
  font-family: var(--ff-sans); font-weight: 600; font-size: .88rem;
  padding: .5rem 1.1rem; border-radius: 100px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--brown-700);
  cursor: pointer; transition: .2s; text-decoration: none;
}
.filter a:hover { border-color: var(--green-600); color: var(--green-700); }
.filter a.active { background: var(--green-700); color: #fff; border-color: var(--green-700); }

/* Category pills with an Arabic line under the Indonesian label */
.filter a.filter__cat { display: inline-flex; flex-direction: column; align-items: center; gap: .12rem; line-height: 1.15; padding-top: .42rem; padding-bottom: .42rem; }
.filter a.filter__cat .filter__id { display: inline-flex; align-items: center; gap: .25rem; }
.filter a.filter__cat .filter__ar { font-family: var(--ff-ar, 'Amiri', serif); font-weight: 500; font-size: .9rem; opacity: .72; }
.filter a.filter__cat.active .filter__ar { opacity: .9; }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.gal-item { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--cream-2); }
.gal-item.tall { grid-row: span 2; aspect-ratio: auto; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gal-item:hover img { transform: scale(1.06); }
.gal-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .8rem .7rem;
  color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.3;
  background: linear-gradient(transparent, oklch(0.2 0.03 50 / 0.82));
  opacity: 0; transform: translateY(8px); transition: .25s;
}
.gal-item:hover figcaption { opacity: 1; transform: none; }
@media (max-width: 760px) { .gal-item figcaption { opacity: 1; transform: none; font-size: .72rem; padding: 1rem .55rem .5rem; } }

/* ============================================================
   FOOTER — professional, balanced layout on phones.
   Desktop (3-column) is untouched; below 760px we stack and
   centre every block so the brand, socials, contact and map
   share one consistent alignment instead of looking disjointed.
   ============================================================ */
@media (max-width: 760px) {
  .site-footer .ftop {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.4rem;
    padding: 2.8rem 0 2rem;
  }
  /* Brand: logo on top, text centred beneath it */
  .ft-brand {
    flex-direction: column;
    align-items: center;
    gap: .7rem;
  }
  .ft-brand img { height: 68px; width: 68px; }
  .ft-brand > div { display: flex; flex-direction: column; align-items: center; }
  .ft-brand p { max-width: 42ch; margin-inline: auto !important; }
  /* Social icons centred */
  .ft-social { justify-content: center; margin-top: 1.2rem; }
  /* Contact & location headings + content fully centred */
  .ft-h { text-align: center; }
  .ft-contact { text-align: center; }
  .ft-contact div { margin-bottom: .8rem; }
  .ft-map { max-width: 460px; margin-inline: auto; width: 100%; }
  .ft-map iframe { min-height: 200px; }
  /* Bottom bar: stacked & centred */
  .site-footer .fbot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
  }
  .fbot .vis { max-width: 46ch; margin-inline: auto; }
}

/* Add breathing room above the footer so the phone bottom-nav
   never sits flush against the last footer line. */
@media (max-width: 767px) {
  .site-footer { padding-bottom: .4rem; }
}

/* ---------- Reveal-on-scroll (only when JS is active, so no-JS/SEO sees content) ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* Stagger items in a sequence */
[data-reveal][data-reveal-i="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-i="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-i="3"] { transition-delay: .24s; }
[data-reveal][data-reveal-i="4"] { transition-delay: .32s; }
[data-reveal][data-reveal-i="5"] { transition-delay: .40s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .splash__logo { animation: none; }
  .splash__bar span { animation: none; width: 100%; }
}

/* ============================================================
   Lazy iframe facades (YouTube + Maps click-to-load)
   ============================================================ */
.yt-lite { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; display: block; overflow: hidden; }
.yt-lite img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s, transform .3s; }
.yt-lite:hover img { opacity: 1; transform: scale(1.03); }
.yt-lite__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform .2s; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.yt-lite:hover .yt-lite__play { transform: translate(-50%, -50%) scale(1.1); }
.yt-lite:focus-visible { outline: 3px solid var(--gold, #c79a3a); outline-offset: -3px; }

.map-lite { width: 100%; min-height: 180px; height: 100%; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, oklch(0.95 0.02 150), oklch(0.90 0.03 150)); color: var(--green-800, #2f5e3a); font: inherit; }
.map-full .map-lite { height: 380px; }
.map-lite__txt { font-size: .9rem; font-weight: 600; }
.map-lite:hover { filter: brightness(.97); }
.map-lite:focus-visible { outline: 3px solid var(--gold, #c79a3a); outline-offset: -3px; }
@media (max-width: 760px) { .map-full .map-lite { height: 260px; } }