/* ============================================================
   WAJANG PUBLIC PAGES — MOBILE NAVIGATION & OVERFLOW SAFETY
   Loaded only by standalone public pages that do not use the
   authenticated includes/header.php layout.
   ============================================================ */

.public-mobile-burger,
.burger.public-mobile-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 9px;
  background: transparent;
  border: 1px solid rgba(201,138,32,.28);
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
  flex: 0 0 44px;
}
.public-mobile-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--gold-400, var(--gold-mid, #c98a20));
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.public-mobile-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.public-mobile-burger.is-open span:nth-child(2) { opacity: 0; }
.public-mobile-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#mmenu.public-mobile-menu {
  display: none;
  position: fixed;
  top: var(--public-nav-height, 68px);
  left: 0;
  right: 0;
  z-index: 950;
  max-height: calc(100dvh - var(--public-nav-height, 68px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom,0px));
  background: rgba(7,4,14,.985);
  border-bottom: 1px solid rgba(201,138,32,.2);
  box-shadow: 0 18px 46px rgba(0,0,0,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
#mmenu.public-mobile-menu.open { display: block !important; }
#mmenu.public-mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
#mmenu.public-mobile-menu li { width: 100%; }
#mmenu.public-mobile-menu a,
#mmenu.public-mobile-menu button {
  min-height: 46px;
}
#mmenu.public-mobile-menu ul a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(201,138,32,.1);
  white-space: normal;
}
#mmenu.public-mobile-menu .public-mobile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#mmenu.public-mobile-menu .public-mobile-actions > * {
  flex: 1 1 130px;
  justify-content: center;
  text-align: center;
}

.public-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.public-table-scroll > table { width: max(100%, max-content); max-width: none; }
.public-overflow-row {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

@media (max-width: 900px) {
  html, body { width: 100%; max-width: 100%; }
  body { overflow-x: clip; }
  body.public-menu-open { overflow: hidden; }

  .public-mobile-burger,
  .burger.public-mobile-burger { display: flex !important; }

  nav.nav .nav-links,
  nav.nav .public-nav-actions,
  .pub-nav .nav-links,
  .pub-nav .public-nav-actions,
  .feat-nav .feat-nav-links,
  .feat-nav .public-nav-actions { display: none !important; }

  nav.nav,
  .pub-nav,
  .feat-nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 10px;
  }
  nav.nav .nav-brand,
  .pub-nav .nav-brand,
  .feat-nav .feat-nav-brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  nav.nav .nav-wm,
  .pub-nav .nav-wm,
  .feat-nav .feat-nav-wm { font-size: 1rem; }

  main, section, article,
  .page-wrap, .wrap, .container, .container-sm, .container-xs {
    min-width: 0;
    max-width: 100%;
  }
  main > *, section > *, article > *,
  .page-wrap > *, .wrap > * { min-width: 0; }

  img, video, iframe, canvas { max-width: 100%; }
  img, video { height: auto; }
  iframe { width: 100%; }
  pre, code { max-width: 100%; overflow-x: auto; }
  h1,h2,h3,h4,h5,h6,p,a,span,div,td,th,label { overflow-wrap: anywhere; }
  input, select, textarea { max-width: 100%; font-size: 16px !important; }
  button, a[class*="btn"], .btn { max-width: 100%; white-space: normal; }

  .public-mobile-stack { grid-template-columns: minmax(0,1fr) !important; }
}

@media (max-width: 430px) {
  nav.nav .nav-sub,
  nav.nav .nav-tagline,
  .pub-nav .nav-sub,
  .pub-nav .nav-tagline,
  .feat-nav .feat-nav-sep,
  .feat-nav .feat-nav-page { display: none !important; }
}

/* ============================================================
   LOGIN PAGE CHROME — intentionally NOT here.

   It lives inline in login.php instead. This file is precached
   by the service worker (cache-first), so a stale copy can be
   served after a deploy; when that happened the login header
   and footer rendered unstyled and the page looked broken.
   Critical login layout must not depend on a cacheable
   external file.
   ============================================================ */

/* ============================================================
   PUBLIC PAGE MOBILE READABILITY  (v13)

   The public pages were built for desktop, where a heavily
   letter-spaced display font at 0.52–0.72rem reads as elegant
   small-caps. On a phone that same text is 8–11px with wide
   gaps between letters — the reported "can't read it" problem.

   Two causes, both fixed here:
     1. absolute size — nothing should render below ~12px
     2. letter-spacing — spacing that flatters large type
        actively breaks up small type
   Plus contrast: --text-400/-500 are dim by design and fall
   below WCAG AA on a small screen in daylight.
   ============================================================ */
@media (max-width: 900px) {
  /* Lift the dimmest two tiers. Desktop keeps its subtlety;
     this only applies on small screens. */
  :root {
    --text-300: #c9bda6;
    --text-400: #a8987f;
    --text-500: #8a7a64;
  }

  body { font-size: 15px; line-height: 1.62; }

  /* Floor for micro-labels — eyebrow text, tags, captions.
     0.52rem is ~8px, which is unreadable on any phone. */
  .eyebrow, .tag, .label, .badge, .pill, .chip,
  .feat-tag, .card-tag, .section-label, .kicker,
  small, figcaption {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.5;
  }

  /* Anything still set in tiny rem units gets a floor */
  [style*="font-size:0.5"], [style*="font-size:.5"],
  [style*="font-size:0.6"], [style*="font-size:.6"] {
    font-size: 12px !important;
  }
  [style*="font-size:0.7"], [style*="font-size:.7"] {
    font-size: 13px !important;
  }

  /* Body copy floor */
  p, li, td, dd, blockquote { font-size: 15px; }

  /* Wide tracking is the other half of the problem */
  h1, h2, h3, h4, .hero-title, .section-title {
    letter-spacing: 0.02em;
    line-height: 1.24;
  }
  h1, .hero-title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  h2, .section-title { font-size: clamp(1.25rem, 5.5vw, 1.6rem); }
  h3 { font-size: 1.1rem; }

  /* Uppercase + wide tracking + small = worst case; cap it */
  [style*="text-transform:uppercase"],
  .uppercase {
    letter-spacing: 0.1em !important;
  }

  /* Long unbroken strings shouldn't force sideways scroll */
  p, li, h1, h2, h3 { overflow-wrap: break-word; }
}

@media (max-width: 430px) {
  body { font-size: 15px; }
  h1, .hero-title { font-size: clamp(1.5rem, 8.5vw, 2rem); }
}