/* THANAL — styling that applies only inside the Android app.
 *
 * html.in-app is set before first paint by the inline script in each page's
 * <head>, so the app never flashes the website chrome on its way to the app
 * chrome.
 *
 * The site's top bars are white. In the app they sit directly beneath a brand
 * green status bar, and a white strip there reads as a rendering fault rather
 * than a design decision. Both bars become green so the top of the screen is
 * one continuous surface — the same treatment the UBOA CARE+ app uses.
 *
 * Tailwind utilities live on the elements themselves, so these overrides have
 * to win on specificity; hence the !important.
 */

/* ---- Marketing pages: <header class="sticky ..."> ---------------------- */
html.in-app header.sticky {
  background: var(--ts-brand, #0C472C) !important;
  border-bottom-color: rgba(255, 255, 255, .12) !important;
  backdrop-filter: none !important;
  padding-top: env(safe-area-inset-top);
}
html.in-app header.sticky .text-brand,
html.in-app header.sticky .font-display { color: #fff !important; }
html.in-app header.sticky .text-gold-dark { color: var(--ts-gold-light, #E6C566) !important; }
html.in-app header.sticky nav a { color: #dfeae3 !important; }
html.in-app header.sticky nav a:hover { color: #fff !important; }
html.in-app header.sticky #menuBtn { color: #fff !important; }

/* tree_color.png is artwork on a transparent ground; on green it loses its
   edges, so give it a deliberate white chip rather than letting it muddy. */
html.in-app header.sticky img,
html.in-app header.topbar img { background: #fff; border-radius: 8px; padding: 2px; }

/* The mobile drop-down panel hangs off the bar and must match it. */
html.in-app #mobileMenu {
  background: var(--ts-brand-dark, #06231A) !important;
  border-top-color: rgba(255, 255, 255, .12) !important;
  color: #dfeae3 !important;
}
html.in-app #mobileMenu a { color: #dfeae3 !important; min-height: 44px; display: flex; align-items: center; }
html.in-app #mobileMenu a:hover { color: #fff !important; }

/* ---- Member portal: <header class="topbar"> --------------------------- */
html.in-app header.topbar {
  background: var(--ts-brand, #0C472C) !important;
  border-bottom-color: rgba(255, 255, 255, .12) !important;
  backdrop-filter: none !important;
  padding-top: env(safe-area-inset-top);
}
html.in-app header.topbar .text-brand,
html.in-app header.topbar .font-display { color: #fff !important; }
html.in-app header.topbar .text-gold-dark { color: var(--ts-gold-light, #E6C566) !important; }
html.in-app header.topbar .text-slate-500,
html.in-app header.topbar .text-slate-600 { color: #c3d5ca !important; }

/* ---- Every page ------------------------------------------------------- */
/* Gesture-navigation bar and the notch. */
html.in-app body { padding-bottom: env(safe-area-inset-bottom); }
/* login.html has no bar of its own — keep its content clear of the notch. */
html.in-app body > .min-h-screen { padding-top: env(safe-area-inset-top); }

/* Android's accessibility floor for a touch target is 44px. */
html.in-app a.btn, html.in-app button { min-height: 44px; }

/* A long-press text selection on a nav element feels like a broken app rather
   than a web page; leave real content selectable. */
html.in-app header, html.in-app #mobileMenu { -webkit-user-select: none; user-select: none; }

/* ---- App bar contents -------------------------------------------------- */
/* The 36px registration strip above the bar is website furniture. In the app it
   costs a chunk of a phone screen to repeat what the About page already says. */
html.in-app div.bg-brand-700 { display: none !important; }

/* The primary action of a members' app is signing in, and the header pill is
   hidden below 640px — so on a phone the only login links sit ~11,700px down
   the home page. Bring it back into the bar at every width. */
html.in-app header.sticky a[href*="login"] {
  display: inline-flex !important;
  padding: .5rem .9rem !important;
  font-size: .8rem !important;
  white-space: nowrap;
}
/* At the narrow end the wordmark has to give way so the pill fits. */
@media (max-width: 420px) {
  html.in-app header.sticky .font-display { font-size: .95rem !important; }
  html.in-app header.sticky img { height: 2rem !important; width: 2rem !important; }
  html.in-app header.sticky a[href*="login"] { padding: .45rem .75rem !important; font-size: .75rem !important; }
}

/* ---- Touch and scroll behaviour ---------------------------------------
   Not gated on .in-app: these help mobile web too. touch-action removes the
   300ms double-tap-zoom delay, and overscroll-behavior stops scroll chaining. */
a, button, input, select, textarea, label, [role="button"], .btn {
  touch-action: manipulation;
}
html, body { overscroll-behavior: contain; }

/* In the app there is no pull-to-refresh and no parent to chain to, so kill the
   boundary glow outright — it is the clearest "this is a web page in a box" tell. */
html.in-app, html.in-app body { overscroll-behavior: none; }

/* ---- Edge-to-edge (Android 16 enforces it; apps cannot opt out) --------
   With viewport-fit=cover now set, the page runs under the cutout and the
   gesture bar. The bars already pad for the top inset; these cover the sides,
   which is what bites in landscape on a notched device. */
html.in-app body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
html.in-app header.sticky,
html.in-app header.topbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* Footer sitemap links measured 17px tall — the densest miss-tap cluster here. */
html.in-app footer a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---- WebView fallback -------------------------------------------------
   A TWA renders in Chrome, where env() is reliable. But WebViewFallbackActivity
   is declared in the manifest, and on a device with no Custom Tabs provider the
   app lands in android.webkit.WebView — where env() is documented to return 0.
   These floors mean the bars still clear a notch on that path instead of
   sitting underneath it. */
@supports not (padding: env(safe-area-inset-top)) {
  html.in-app header.sticky,
  html.in-app header.topbar { padding-top: 24px; }
  html.in-app body { padding-bottom: 16px; }
}

/* ---- Anchor navigation under a sticky bar ------------------------------
   The site's nav links jump to #about, #tiers, #benefits and so on. Without
   scroll-padding-top the browser puts the section's top edge at y=0 — which is
   UNDERNEATH the sticky bar, so the heading is clipped (measured: 14px of the
   About heading lost). Applies on the web too: the bar is sticky there as well.
   env() adds the notch inset on top, and resolves to 0 in a browser. */
html { scroll-padding-top: calc(4rem + 0.5rem); }
html.in-app { scroll-padding-top: calc(4rem + 0.5rem + env(safe-area-inset-top)); }


/* ---- Layout safety net -------------------------------------------------
 * Fixes a class of bug rather than a page: content wider than the phone.
 *
 * Grid and flex items default to min-width:auto, so they refuse to shrink
 * below their own content. One long unbroken title then makes its card wider
 * than the screen and everything past the right edge is simply lost — even
 * when the text already carries truncate/ellipsis. Measured on the UBOA admin
 * dashboard: a 597px anchor inside a 412px viewport.
 *
 * Not gated on .in-app: this is a real bug on mobile web too. */
.grid > *,
.flex > * { min-width: 0; }

img, svg, video, canvas, iframe, table { max-width: 100%; }
img, video { height: auto; }

/* Long unbroken strings (URLs, membership numbers, file names) wrap rather
   than widening the layout. */
body { overflow-wrap: break-word; }

/* A wide table scrolls inside its own box, never the page. */
.table-scroll, .overflow-x-auto { max-width: 100%; }

/* On a phone a one-line truncated heading is not readable. Card and list
   titles get up to three lines, then ellipsis. Top-bar truncation is left
   alone so the app bar keeps a fixed height. */
@media (max-width: 640px) {
  .pcard .truncate,
  main li .truncate,
  .card .truncate {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}