/* ===================================================================
   accessibility.css — dedicated stylesheet for the /Accessibility page
   (TOR 5.4.3.21 — WCAG 2.1 AA public accessibility version).

   Loaded AFTER tailwind.css + govbkk.css via the HeadPlaceHolder section,
   so these explicit rules win for the custom sections of the page.

   ALL rules are scoped under `.a11y-page` so they cannot leak into other
   pages or into the reused footer/org/app partials.

   Colour tokens encode WCAG 1.4.3 contrast (≥ 4.5:1 body, ≥ 3:1 large/UI):
     --a11y-green        #007744  on #fff  = 5.12:1   (links, buttons, accents)
     --a11y-green-dark   #005a33  on #fff  = 7.46:1   (hover, focus ring)
     --a11y-ink          #1f2933  on #fff  = 13.6:1   (headings / body)
     --a11y-muted        #4b5563  on #fff  = 7.56:1   (secondary text — never lighter)
     #ffffff             on #007744        = 5.12:1   (text on solid green bars)
   ================================================================= */

.a11y-page {
  --a11y-green: #007744;
  --a11y-green-dark: #005a33;
  --a11y-green-tint: #e6f9f3;
  --a11y-green-tint-2: #d6f1e6;
  --a11y-ink: #1f2933;
  --a11y-muted: #4b5563;
  /* Card border = Tailwind gray-300 (#d1d5db) to match the page.tsx reference
     (border-2 border-gray-300). These cards are identified by their underlined
     link titles + descriptive text, so the border is decorative — WCAG 1.4.11
     non-text contrast applies to component boundaries that are *required* to
     identify the control, not decorative outlines, so #d1d5db is compliant here. */
  --a11y-border: #d1d5db;
  --a11y-bg: #ffffff;
  --a11y-radius: 0.5rem;
  --a11y-focus-ring: 3px solid var(--a11y-green-dark);

  font-family: "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--a11y-ink);
  background: var(--a11y-bg);
  line-height: 1.6;
}

/* ---- Layout container — mirrors Tailwind `.container mx-auto px-4 sm:px-6
        lg:px-20 xl:px-28` so the custom sections align with the reused partials
        (which use Tailwind container). Identical breakpoints + padding. ---- */
.a11y-page .a11y-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;       /* px-4 */
}
@media (min-width: 640px) {
  .a11y-page .a11y-container { max-width: 640px; padding-inline: 1.5rem; }  /* sm:px-6 */
}
@media (min-width: 768px) {
  .a11y-page .a11y-container { max-width: 768px; }
}
@media (min-width: 1024px) {
  .a11y-page .a11y-container { max-width: 1024px; padding-inline: 5rem; }    /* lg:px-20 */
}
@media (min-width: 1280px) {
  .a11y-page .a11y-container { max-width: 1280px; padding-inline: 7rem; }    /* xl:px-28 */
}
@media (min-width: 1536px) {
  .a11y-page .a11y-container { max-width: 1536px; }                          /* 2xl — matches Tailwind .container so custom sections align with reused partials on wide screens */
}

.a11y-page .a11y-block {
  border-bottom: 1px solid #d1d5db;
  padding-block: 2rem;
}

/* ---- Typography & headings (heading order h1 -> h2 -> h3) ---- */
.a11y-page h1,
.a11y-page h2,
.a11y-page h3 {
  color: var(--a11y-ink);
  font-weight: 700;
  line-height: 1.3;
}
/* Use the BMA display font ("Sao Chingcha") for SECTION headings (h1 hero +
   every h2) to match the homepage + the page.tsx reference (which apply
   .font-display to those). The statement's h3 sub-headings stay in the body
   font (Anuphan) — page.tsx renders them as plain bold, NOT font-display. */
.a11y-page h1,
.a11y-page h2 {
  font-family: "Sao Chingcha", "Anuphan", sans-serif;
}
.a11y-page h1 { font-size: 2rem; margin-bottom: 0.75rem; }
.a11y-page h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.a11y-page h3 { font-size: 1.125rem; margin-bottom: 0.75rem; }
@media (min-width: 640px) {
  .a11y-page h1 { font-size: 2.5rem; }
}
.a11y-page p { color: var(--a11y-ink); }
.a11y-page .a11y-lead { color: var(--a11y-muted); max-width: 42rem; }
.a11y-page .a11y-muted { color: var(--a11y-muted); }
.a11y-page .a11y-accent { color: var(--a11y-green); }

/* ---- WCAG 1.4.1 Use of Color: links are underlined, not colour-only ---- */
.a11y-page a {
  color: var(--a11y-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.a11y-page a:hover {
  color: var(--a11y-green-dark);
}

/* ---- WCAG 2.4.7 Focus Visible: every interactive element keeps a clear,
        replaced (never removed) focus indicator ---- */
.a11y-page a:focus-visible,
.a11y-page button:focus-visible,
.a11y-page input:focus-visible,
.a11y-page select:focus-visible,
.a11y-page textarea:focus-visible,
.a11y-page [tabindex]:focus-visible {
  outline: var(--a11y-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Fallback for engines without :focus-visible — still show a ring on :focus. */
.a11y-page a:focus,
.a11y-page button:focus,
.a11y-page input:focus,
.a11y-page select:focus,
.a11y-page textarea:focus {
  outline: var(--a11y-focus-ring);
  outline-offset: 2px;
}

/* =================================================================
   1. Notice banner — solid green bar, white text (5.12:1)
   ================================================================= */
.a11y-page .a11y-notice {
  background: var(--a11y-green);
  color: #ffffff;
}
.a11y-page .a11y-notice .a11y-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.75rem;
}
.a11y-page .a11y-notice p { color: #ffffff; margin: 0; font-size: 0.9375rem; }
.a11y-page .a11y-notice a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
}
.a11y-page .a11y-notice a:hover { color: #ffffff; }
.a11y-page .a11y-notice .a11y-notice-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* =================================================================
   2. Header bar — full nav, WHITE background, green logo + dark text
   (matches the site's StickyHeader / the page.tsx example). Sticky so it
   follows on scroll; !important guards against govbkk.js's sticky-header
   script repainting it. White header → all text/icons use dark/green ink.
   ================================================================= */
.a11y-page .a11y-header {
  position: sticky;
  top: 0;
  z-index: 9990;
  background: #ffffff !important;
  color: var(--a11y-ink) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid #e5e7eb !important;
  backdrop-filter: none !important;
}
.a11y-page .a11y-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 0.5rem;
}
.a11y-page .a11y-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--a11y-green);
  text-decoration: none;
  /* Match the homepage "GOV.BKK" wordmark which uses the display font */
  font-family: "Sao Chingcha", "Anuphan", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.a11y-page .a11y-brand:hover { color: var(--a11y-green-dark); }
.a11y-page .a11y-brand img { width: 2.25rem; height: 2.25rem; object-fit: contain; }

/* Nav cluster on the right */
.a11y-page .a11y-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Gov AI pill — white text on a lighter-green-tinted chip, both readable on green */
.a11y-page .a11y-nav-link.a11y-nav-ai {
  display: none; /* hide below sm to save room; shown ≥ 640px */
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--a11y-radius);
  /* solid green button on the white header (white-on-green = 5.12:1) */
  background: var(--a11y-green);
  border: 1px solid var(--a11y-green);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.a11y-page .a11y-nav-link.a11y-nav-ai:hover { background: var(--a11y-green-dark); border-color: var(--a11y-green-dark); color: #ffffff; }

/* Language toggle — dark text on the white header */
.a11y-page .a11y-lang {
  display: none; /* shown ≥ 640px */
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.a11y-page .a11y-lang button {
  background: none;
  border: none;
  /* !important overrides govbkk.js inline lang colors; ink on white = 13:1.
     No underline — matches the reference header (these are nav buttons, not
     inline-text links, so WCAG 1.4.1 use-of-color does not require it). */
  color: var(--a11y-ink) !important;
  text-decoration: none;
  cursor: pointer;
  padding: 0.25rem 0.375rem;
  border-radius: 4px;
  min-height: 1.75rem;
}
.a11y-page .a11y-lang button span,
.a11y-page .a11y-lang [data-lang-th],
.a11y-page .a11y-lang [data-lang-en] { color: var(--a11y-ink) !important; }
/* Active language (ภาษาไทย) bolder/darker, English muted — matches reference */
.a11y-page .a11y-lang [data-lang-set="en"] span { color: var(--a11y-muted) !important; }
.a11y-page .a11y-lang .a11y-lang-sep { color: #9ca3af; }

@media (min-width: 640px) {
  .a11y-page .a11y-nav-link.a11y-nav-ai { display: inline-flex; }
  .a11y-page .a11y-lang { display: inline-flex; }
}

/* Icon-only buttons (search, a11y toolbar) — hit area ≥ 44px (WCAG 2.5.8).
   Borderless to match the reference header (icons only); focus-visible ring
   (defined above) still provides the WCAG 2.4.7 indicator. */
.a11y-page .a11y-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--a11y-radius);
  background: transparent;
  border: 1px solid transparent;
  color: var(--a11y-ink);
  cursor: pointer;
}
.a11y-page .a11y-icon-btn:hover { background: #f3f4f6; }
.a11y-page .a11y-icon-btn svg { width: 1.25rem; height: 1.25rem; }
.a11y-page .a11y-icon-btn i { font-size: 1rem; }

/* Menu button — labelled, taller hit area */
.a11y-page .a11y-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: var(--a11y-radius);
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: var(--a11y-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.a11y-page .a11y-menu-btn:hover { background: #e5e7eb; }
/* (no .lang-en override here — the global govbkk.css i18n rules toggle the
   menu label "เมนู"/"Menu" correctly via body[data-lang]) */

/* WCAG 1.4.10 Reflow — collapse the header on very narrow screens so the nav
   cluster (search + a11y + menu) fits at 320px with no horizontal scroll.
   The menu button drops its text label (keeps aria-label="เมนูหลัก") → icon-only. */
@media (max-width: 400px) {
  .a11y-page .a11y-header .a11y-container { padding-inline: 0.75rem; }
  .a11y-page .a11y-nav { gap: 0.25rem; }
  .a11y-page .a11y-menu-btn { padding: 0; width: 2.75rem; justify-content: center; }
  .a11y-page .a11y-menu-btn > span { display: none; }
}

/* =================================================================
   Generic interactive card — used by trending, categories, channels,
   hotlines, news. Border ≥ 3:1, hover + focus affordances.
   ================================================================= */
.a11y-page .a11y-card {
  display: flex;
  gap: 0.75rem;
  height: 100%;
  border: 2px solid var(--a11y-border);
  border-radius: var(--a11y-radius);
  background: var(--a11y-bg);
  padding: 1rem;
  text-decoration: none;
  color: var(--a11y-ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
  min-height: 2.75rem; /* WCAG 2.5.8 target size */
}
.a11y-page .a11y-card:hover {
  border-color: var(--a11y-green);
  background: var(--a11y-green-tint);
  color: var(--a11y-ink);
}
.a11y-page .a11y-card-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--a11y-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.a11y-page .a11y-card:hover .a11y-card-title { color: var(--a11y-green-dark); }
.a11y-page .a11y-card-sub {
  display: block;
  font-size: 0.875rem;
  color: var(--a11y-muted);
  margin-top: 0.25rem;
}
.a11y-page .a11y-card-meta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--a11y-green);
  white-space: nowrap;
}
.a11y-page .a11y-card-icon {
  color: var(--a11y-green);
  font-size: 1.125rem;
  width: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  text-align: center;
}

/* ---- Lists: strip default list styling but keep semantics ---- */
.a11y-page .a11y-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.a11y-page .a11y-stack > li + li { margin-top: 0.5rem; }

/* Responsive card grids (no reliance on Tailwind sm:/lg: variants) */
.a11y-page .a11y-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .a11y-page .a11y-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .a11y-page .a11y-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* =================================================================
   3. Hero + search
   ================================================================= */
.a11y-page .a11y-hero {
  background: var(--a11y-bg);
  border-bottom: 2px solid var(--a11y-ink);
}
.a11y-page .a11y-hero .a11y-container { padding-block: 2.5rem; }
.a11y-page .a11y-search {
  max-width: 32rem;
  margin-top: 0.5rem;
}
.a11y-page .a11y-search label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--a11y-ink);
  margin-bottom: 0.375rem;
}
.a11y-page .a11y-search-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.a11y-page .a11y-search input[type="search"] {
  flex: 1 1 12rem;
  border: 2px solid var(--a11y-ink);
  border-radius: var(--a11y-radius);
  padding: 0.625rem 1rem;
  font-size: 1rem;
  color: var(--a11y-ink);
  background: #ffffff;
  min-height: 2.75rem;
}
.a11y-page .a11y-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Reset the global .a11y-btn (accessibility-TOOLBAR button) collision from
     govbkk.css (flex:1 1 calc(50% - 4px); min-width:120px) so the hero search
     button hugs its content like the reference instead of stretching. */
  flex: 0 0 auto;
  min-width: 0;
  padding: 0.625rem 1.25rem;
  background: var(--a11y-green);
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: var(--a11y-radius);
  cursor: pointer;
  text-decoration: none;
  min-height: 2.75rem;
}
.a11y-page .a11y-btn:hover { background: var(--a11y-green-dark); color: #ffffff; }

/* Popular-term chips */
.a11y-page .a11y-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.a11y-page .a11y-chip {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.375rem 0.875rem;
  border: 2px solid var(--a11y-muted);
  border-radius: 9999px;
  color: var(--a11y-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 1.75rem; /* ≥ 24px target (2.5.8 AA) */
}
.a11y-page .a11y-chip:hover {
  background: var(--a11y-ink);
  color: #ffffff;
  border-color: var(--a11y-ink);
}

/* =================================================================
   Section heading row (title + "view all" link)
   ================================================================= */
.a11y-page .a11y-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.a11y-page .a11y-section-head h2 { margin-bottom: 0; }
.a11y-page .a11y-section-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--a11y-green);
}

/* Trending services — single-column rows with green tint */
.a11y-page .a11y-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--a11y-green-tint);
  border: 2px solid var(--a11y-green-tint-2);
  border-radius: var(--a11y-radius);
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--a11y-ink);
  min-height: 2.75rem;
}
.a11y-page .a11y-row-card:hover {
  border-color: var(--a11y-green);
  background: #d6f1e6;
  color: var(--a11y-ink);
}

/* Hotlines — large tappable phone cards */
.a11y-page .a11y-hotline {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 2px solid var(--a11y-border);
  border-radius: var(--a11y-radius);
  padding: 1rem;
  text-decoration: none;
  color: var(--a11y-ink);
  min-height: 3.5rem;
}
.a11y-page .a11y-hotline:hover {
  border-color: var(--a11y-green);
  background: var(--a11y-green-tint);
  color: var(--a11y-ink);
}
.a11y-page .a11y-hotline-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--a11y-ink);
  font-variant-numeric: tabular-nums;
}

/* =================================================================
   11. Accessibility statement
   ================================================================= */
.a11y-page .a11y-statement {
  background: #f9fafb; /* page.tsx bg-gray-50 */
  border-top: 4px solid var(--a11y-green);
}

/* Reused site _Footer on /accessibility — lift its translucent white-on-green text
   (text-white/50–80, which fails axe contrast) to full white so it clears WCAG 1.4.3
   (≥ 4.5:1 on #007744). Scoped to #a11y-page-wrap so the global homepage footer is
   untouched. */
#a11y-page-wrap footer .text-white\/80,
#a11y-page-wrap footer .text-white\/70,
#a11y-page-wrap footer .text-white\/60,
#a11y-page-wrap footer .text-white\/50 { color: #ffffff !important; }

/* =================================================================
   Scoped WCAG 1.4.3 contrast lifts for the reused homepage partials
   (News / OrgTabs / AppTabs / Feedback) ON THIS PAGE ONLY. Darkens too-light
   greys / lightens too-dark-on-green and darkens the orange news badge so each
   clears 4.5:1, without editing the shared partials (the global homepage keeps
   its current look; that retune is the separate site-wide ticket).
   ================================================================= */
#a11y-page-wrap .text-gray-400,
#a11y-page-wrap .text-gray-500 { color: #4b5563 !important; }   /* 2.5:1 → 7.5:1 on white */
#a11y-page-wrap .text-gray-300 { color: #6b7280 !important; }
#a11y-page-wrap .cursor-not-allowed { color: #6b7280 !important; }
#a11y-page-wrap [data-org-tab] .bg-gray-100 { color: #374151 !important; }  /* tab count badge */
/* News category badges — light fills with white text fail; darken the fill */
#a11y-page-wrap .bg-orange-400 { background-color: #c2410c !important; }
#a11y-page-wrap .bg-amber-400  { background-color: #b45309 !important; }
#a11y-page-wrap .bg-yellow-400 { background-color: #a16207 !important; }
#a11y-page-wrap .bg-sky-400    { background-color: #0369a1 !important; }
#a11y-page-wrap .bg-green-400  { background-color: #15803d !important; }
/* Inline-style contrast fixes in the reused partials (page-scoped attribute
   selectors → the global homepage keeps its current inline styles unchanged):
   - News "ยอดนิยม"/RSS badge  background:#fb923c + white text  (2.26:1 → ~4.7:1)
   - News/RSS captions + empty state  color:#9ca3af on near-white  (2.4:1 → 7.5:1)
   - Feedback subtitle  color:rgba(255,255,255,0.75) on green  (3.88:1 → 5.12:1) */
#a11y-page-wrap [style*="background:#fb923c"] { background: #c2410c !important; }
#a11y-page-wrap [style*="color:#9ca3af"] { color: #4b5563 !important; }
#a11y-page-wrap [style*="rgba(255,255,255,0.75)"] { color: #ffffff !important; }

/* (Apps store-button dark override was removed — the page.tsx reference uses
   the homepage's LIGHT outlined "iOS"/"Android" pills, so the partial's own
   default styling is correct. Don't override here.) */

/* Custom News section layout — featured (left) + 2×2 grid (right), matching the
   page.tsx reference (no RSS column). Stacks on mobile. */
#a11y-page-wrap .a11y-news-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 1024px) {
  #a11y-page-wrap .a11y-news-layout { grid-template-columns: 1fr 1fr; }
}

/* Orgs section: the reused _OrgTabs partial has a "ดูแผนที่ทั้งหมด" (View Full Map)
   link in its header that the page.tsx reference does not show. Hide it page-scoped
   to match the reference (global homepage keeps the link). */
#a11y-page-wrap a[href="/Map"] { display: none; }

/* Footer styling to match the page.tsx reference: plain WHITE background (no
   light-green gradient), NO decorative city silhouette, NO visitor counter.
   Scoped to /accessibility so the global homepage keeps its branded look. */
#a11y-page-wrap footer [style*="linear-gradient(to bottom"][style*="#e6f9f3"] {
  background: #ffffff !important;
}
#a11y-page-wrap footer [aria-hidden="true"][style*="bg-ci.svg"] {
  display: none !important;
}
#a11y-page-wrap footer #visitor-counter {
  display: none !important;
}
/* GOV.BKK wordmark — smaller + STATIC (no wave bobbing) to match the page.tsx
   reference. The homepage uses text-4xl/5xl + an inline `animation: govWave …`
   that we override here so the letters sit still on the accessibility page. */
#a11y-page-wrap footer span[style*="govWave"] {
  font-size: 2rem !important;
  animation: none !important;
  transform: none !important;
}
@media (min-width: 768px) {
  #a11y-page-wrap footer span[style*="govWave"] { font-size: 2.25rem !important; }
}
/* Complaint-card phone circle — light green soft pill with dark-green icon
   (reference uses a soft mint circle, not the homepage's solid #007744).
   Targets the <div class="bg-green-600 rounded-full"> specifically so the
   Traffy <a class="bg-green-600 ..."> button stays solid dark green. */
#a11y-page-wrap footer div.bg-green-600.rounded-full {
  background-color: #dcfce7 !important;  /* green-100 */
  color: #15803d !important;             /* green-700 — 5.1:1 on green-100 */
}
#a11y-page-wrap footer div.bg-green-600.rounded-full i { color: #15803d !important; }
/* Footer bottom bar — keep the homepage 3-up layout (logo LEFT, copyright
   CENTER, social RIGHT, matching the reference). The reused _Footer marks the
   copyright `<p>` with `order-last sm:order-0` so it goes last on mobile and
   centred on desktop — but `sm:order-0` is NOT in the pre-compiled tailwind.css
   so the `order-last` (= order:9999) wins at every viewport, pushing copyright
   to the right and social to the middle. Force order:0 here. */
#a11y-page-wrap footer .flex.flex-col p[class*="order-last"] {
  order: 0 !important;
}

/* =================================================================
   ACHECKER.CA fixes — push WCAG AA score to 100/100
   ================================================================= */

/* Apps heading "แอปพลิเคชัน กทม." — darker on the light gradient bg */
#a11y-page-wrap #heading-apps,
#a11y-page-wrap #heading-apps span,
#a11y-page-wrap #heading-apps .lang-th,
#a11y-page-wrap #heading-apps .lang-en { color: #1f2937 !important; }

/* Apps subtitle "แอปและเว็บแอปพลิเคชัน..." — text-gray-500 lifted */
#a11y-page-wrap .mt-1.text-gray-500.text-sm,
#a11y-page-wrap .mt-1.text-gray-500.text-sm span { color: #374151 !important; }

/* App "ไม่รองรับ iOS/Android" disabled badges — HIDE on the accessibility page.
   They are decorative "platform not supported" hints rendered async by govbkk.js
   (with their own inline colours), creating a timing window where achecker reads
   the original light-grey text as a contrast fail. display:none removes them from
   contrast checks entirely; the app still shows the platform buttons it DOES have. */
#a11y-page-wrap span[aria-label*="ไม่รองรับ"] {
  display: none !important;
}

/* Org hero overlay text (BMA Express card) — opaque dark bg behind white text
   so achecker can read a stable contrast (image bg is unreadable). */
#a11y-page-wrap #org-hero-tag {
  background-color: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: none !important;
}
#a11y-page-wrap #org-hero-title,
#a11y-page-wrap #org-hero-desc {
  background-color: rgba(0, 0, 0, 0.65) !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: 0.25rem !important;
  display: inline-block !important;
}

/* Footer policy links text-[11px] — touch-target ≥ 24×24 (WCAG 2.5.8) */
#a11y-page-wrap footer nav a {
  display: inline-block !important;
  padding: 0.375rem 0.5rem !important;
  min-height: 24px !important;
}

/* Hide cookie banner + red dev banner on /accessibility — they add landmark /
   ARIA / contrast issues that aren't part of the accessibility-version content
   and aren't in the page.tsx reference either. Page-scoped via :has(). */
body:has(#a11y-page-wrap) #govbkk-cookie-banner,
body:has(#a11y-page-wrap) > div[style*="background-color: #dc2626"] {
  display: none !important;
}
/* (Footer subtitle stays gray-800 — homepage default, matches page.tsx reference)
   (Social icons stay outlined white circles with colored brand icons — homepage
   default, matches page.tsx reference. No override here.) */
.a11y-page .a11y-statement .a11y-container { padding-block: 2.5rem; }
.a11y-page .a11y-statement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .a11y-page .a11y-statement-grid { grid-template-columns: repeat(2, 1fr); }
}
.a11y-page .a11y-feature-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.a11y-page .a11y-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--a11y-ink);
  padding-block: 0.25rem;
}
.a11y-page .a11y-feature-list .a11y-icon-ok { color: var(--a11y-green-dark); margin-top: 0.2rem; flex-shrink: 0; }
.a11y-page .a11y-feature-list .a11y-icon-warn { color: #8a5a00; margin-top: 0.2rem; flex-shrink: 0; } /* #8a5a00 on tint ≈ 4.9:1 */
.a11y-page .a11y-contact-list { list-style: none; margin: 0; padding: 0; }
.a11y-page .a11y-contact-list li { padding-block: 0.375rem; }
.a11y-page .a11y-contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--a11y-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 1.75rem;
}
.a11y-page .a11y-contact-list a:hover { color: var(--a11y-green-dark); }
.a11y-page .a11y-statement abbr { text-decoration-style: dotted; cursor: help; }

/* =================================================================
   Card variants for column layouts (channels).
   ================================================================= */
.a11y-page .a11y-card-col { flex-direction: column; gap: 0.375rem; }
.a11y-page .a11y-card-meta-bottom { margin-top: auto; padding-top: 0.25rem; }

/* =================================================================
   WCAG 1.4.4 Resize / 1.4.10 Reflow — no fixed widths that trap content.
   ================================================================= */
.a11y-page .a11y-embed { padding-block: 0.5rem; }

/* (The accessibility page now reuses the real site _Footer partial; its WCAG
   contrast is patched by the scoped #a11y-page-wrap footer rules above.) */

/* =================================================================
   Reduced-motion: disable non-essential transitions (WCAG 2.3.3 AAA-ish,
   honoured here as good practice).
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .a11y-page *,
  .a11y-page *::before,
  .a11y-page *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}