/**
 * Foreign Business Act Plugin - Main Stylesheet
 * ================================================
 * Bilingual (Thai/English) annotated legal document styles
 * for ThaiLawOnline.com WordPress plugin.
 *
 * @package    FBA_Plugin
 * @version    1.0.0
 * @license    GPL-2.0-or-later
 *
 * Table of Contents
 * -----------------
 *  1.  CSS Custom Properties (Variables)
 *  2.  Reset & Base Styles
 *  3.  Typography
 *  4.  Hub Page - Hero Section
 *  5.  Hub Page - Table of Contents Sidebar
 *  6.  Hub Page - Card Grid (Chapter Navigation)
 *  7.  Hub Page - FAQ Accordion
 *  8.  Hub Page - SEO Keyword Sections
 *  9.  Bilingual Content Layout
 * 10.  Language Toggle
 * 11.  Section Annotations
 * 12.  Legal Document Formatting
 * 13.  Navigation - Breadcrumbs
 * 14.  Navigation - Previous/Next
 * 15.  Navigation - Back to Top
 * 16.  Navigation - Search Bar
 * 17.  Animations & Transitions
 * 18.  Responsive - Tablet (max-width: 1024px)
 * 19.  Responsive - Mobile (max-width: 768px)
 * 20.  Responsive - Small Mobile (max-width: 480px)
 * 21.  Print Styles
 * 22.  Accessibility & Focus States
 * 23.  WordPress Integration Overrides
 */


/* ==========================================================================
   1. CSS Custom Properties (Variables)
   ========================================================================== */

:root {
  /* ---- Brand Colors ---- */
  --fba-primary:            #1E73BE;
  --fba-primary-dark:       #155a96;
  --fba-primary-darker:     #0d3d66;
  --fba-primary-light:      #4a9ad9;
  --fba-primary-lighter:    #d6e9f8;
  --fba-primary-pale:       #edf5fc;

  --fba-navy:               #0B1D3A;
  --fba-navy-mid:           #132d56;

  /* ---- Accent / Semantic Colors ---- */
  --fba-accent-amber:       #F59E0B;
  --fba-accent-amber-light: #FEF3C7;
  --fba-accent-amber-border:#D97706;

  --fba-accent-green:       #10B981;
  --fba-accent-green-light: #D1FAE5;
  --fba-accent-green-border:#059669;

  --fba-accent-red:         #EF4444;
  --fba-accent-red-light:   #FEE2E2;
  --fba-accent-red-border:  #DC2626;

  --fba-accent-purple:      #8B5CF6;
  --fba-accent-purple-light:#EDE9FE;

  /* ---- Neutral Palette ---- */
  --fba-white:              #FFFFFF;
  --fba-gray-50:            #F9FAFB;
  --fba-gray-100:           #F3F4F6;
  --fba-gray-200:           #E5E7EB;
  --fba-gray-300:           #D1D5DB;
  --fba-gray-400:           #9CA3AF;
  --fba-gray-500:           #6B7280;
  --fba-gray-600:           #4B5563;
  --fba-gray-700:           #374151;
  --fba-gray-800:           #1F2937;
  --fba-gray-900:           #111827;
  --fba-black:              #000000;

  /* ---- Typography ---- */
  --fba-font-en:            'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fba-font-th:            'Sarabun', 'Noto Sans Thai', 'Tahoma', sans-serif;
  --fba-font-mono:          'Roboto Mono', 'Courier New', Courier, monospace;

  --fba-font-size-base:     17px;
  --fba-font-size-sm:       14px;
  --fba-font-size-xs:       12px;
  --fba-font-size-lg:       20px;
  --fba-font-size-xl:       24px;

  --fba-line-height-en:     1.65;
  --fba-line-height-th:     1.8;
  --fba-line-height-heading:1.3;

  --fba-font-weight-normal: 400;
  --fba-font-weight-medium: 500;
  --fba-font-weight-semi:   600;
  --fba-font-weight-bold:   700;

  /* ---- Spacing Scale ---- */
  --fba-space-xxs:          4px;
  --fba-space-xs:           8px;
  --fba-space-sm:           12px;
  --fba-space-md:           16px;
  --fba-space-lg:           24px;
  --fba-space-xl:           32px;
  --fba-space-xxl:          48px;
  --fba-space-3xl:          64px;
  --fba-space-4xl:          96px;

  /* ---- Layout ---- */
  --fba-container-max:      1200px;
  --fba-container-narrow:   800px;
  --fba-sidebar-width:      280px;
  --fba-content-gap:        40px;

  /* ---- Border & Radius ---- */
  --fba-radius-sm:          4px;
  --fba-radius-md:          8px;
  --fba-radius-lg:          12px;
  --fba-radius-xl:          16px;
  --fba-radius-full:        9999px;
  --fba-border-width:       1px;

  /* ---- Shadows ---- */
  --fba-shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.05);
  --fba-shadow-md:          0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --fba-shadow-lg:          0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --fba-shadow-xl:          0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --fba-shadow-inset:       inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ---- Transitions ---- */
  --fba-transition-fast:    150ms ease;
  --fba-transition-base:    250ms ease;
  --fba-transition-slow:    400ms ease;
  --fba-transition-smooth:  350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index Scale ---- */
  --fba-z-dropdown:         100;
  --fba-z-sticky:           200;
  --fba-z-overlay:          300;
  --fba-z-modal:            400;
  --fba-z-toast:            500;
  --fba-z-back-to-top:      250;
}


/* ==========================================================================
   2. Reset & Base Styles
   ========================================================================== */

.fba-plugin *,
.fba-plugin *::before,
.fba-plugin *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fba-plugin {
  font-family: var(--fba-font-en);
  font-size: var(--fba-font-size-base);
  line-height: var(--fba-line-height-en);
  color: var(--fba-gray-800);
  background-color: var(--fba-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.fba-plugin img {
  max-width: 100%;
  height: auto;
  display: block;
}

.fba-plugin a {
  color: var(--fba-primary);
  text-decoration: none;
  transition: color var(--fba-transition-fast);
}

.fba-plugin a:hover,
.fba-plugin a:focus {
  color: var(--fba-primary-dark);
  text-decoration: underline;
}

.fba-container {
  max-width: var(--fba-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fba-space-lg);
  padding-right: var(--fba-space-lg);
}

.fba-container--narrow {
  max-width: var(--fba-container-narrow);
}

/* Utility: visually hidden but accessible to screen readers */
.fba-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

/* ---- Headings ---- */
.fba-plugin h1,
.fba-plugin h2,
.fba-plugin h3,
.fba-plugin h4,
.fba-plugin h5,
.fba-plugin h6,
.fba-plugin .fba-h1,
.fba-plugin .fba-h2,
.fba-plugin .fba-h3,
.fba-plugin .fba-h4,
.fba-plugin .fba-h5,
.fba-plugin .fba-h6 {
  font-family: var(--fba-font-en);
  font-weight: var(--fba-font-weight-bold);
  line-height: var(--fba-line-height-heading);
  color: var(--fba-gray-900);
  margin-bottom: var(--fba-space-md);
}

.fba-plugin h1, .fba-plugin .fba-h1 {
  font-size: 2.25rem;
  letter-spacing: -0.025em;
}

.fba-plugin h2, .fba-plugin .fba-h2 {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.fba-plugin h3, .fba-plugin .fba-h3 {
  font-size: 1.375rem;
}

.fba-plugin h4, .fba-plugin .fba-h4 {
  font-size: 1.125rem;
}

.fba-plugin h5, .fba-plugin .fba-h5 {
  font-size: 1rem;
  font-weight: var(--fba-font-weight-semi);
}

.fba-plugin h6, .fba-plugin .fba-h6 {
  font-size: 0.875rem;
  font-weight: var(--fba-font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fba-gray-500);
}

/* ---- Thai Text ---- */
.fba-text-th,
[lang="th"] .fba-plugin,
.fba-plugin [lang="th"] {
  font-family: var(--fba-font-th);
  line-height: var(--fba-line-height-th);
  font-size: calc(var(--fba-font-size-base) + 1px);
}

.fba-text-th h1, .fba-text-th h2, .fba-text-th h3,
.fba-text-th h4, .fba-text-th h5, .fba-text-th h6 {
  font-family: var(--fba-font-th);
}

/* ---- English Text ---- */
.fba-text-en {
  font-family: var(--fba-font-en);
  line-height: var(--fba-line-height-en);
  font-size: var(--fba-font-size-base);
}

/* ---- Body Copy ---- */
.fba-plugin p {
  margin-bottom: var(--fba-space-md);
}

.fba-plugin strong,
.fba-plugin b {
  font-weight: var(--fba-font-weight-semi);
}

.fba-plugin blockquote {
  border-left: 4px solid var(--fba-primary);
  padding: var(--fba-space-md) var(--fba-space-lg);
  margin: var(--fba-space-lg) 0;
  background-color: var(--fba-gray-50);
  color: var(--fba-gray-700);
  font-style: italic;
}

.fba-plugin hr {
  border: none;
  border-top: 1px solid var(--fba-gray-200);
  margin: var(--fba-space-xl) 0;
}


/* ==========================================================================
   4. Hub Page - Hero Section
   ========================================================================== */

.fba-hero {
  background: linear-gradient(135deg, var(--fba-navy) 0%, var(--fba-navy-mid) 40%, var(--fba-primary-dark) 100%);
  color: var(--fba-white);
  padding: var(--fba-space-4xl) 0 var(--fba-space-3xl);
  position: relative;
  overflow: hidden;
}

.fba-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 115, 190, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.fba-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 115, 190, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.fba-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--fba-container-max);
  margin: 0 auto;
  padding: 0 var(--fba-space-lg);
  text-align: center;
}

.fba-hero__badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--fba-white);
  font-size: var(--fba-font-size-xs);
  font-weight: var(--fba-font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--fba-space-xxs) var(--fba-space-md);
  border-radius: var(--fba-radius-full);
  margin-bottom: var(--fba-space-lg);
}

.fba-hero__title {
  font-size: 2.75rem;
  font-weight: var(--fba-font-weight-bold);
  color: #FFFFFF !important;
  margin-bottom: var(--fba-space-md);
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.fba-hero__title-th {
  display: block;
  font-family: var(--fba-font-th);
  font-size: 2rem;
  font-weight: var(--fba-font-weight-medium);
  opacity: 0.85;
  margin-top: var(--fba-space-xs);
  line-height: var(--fba-line-height-th);
}

.fba-hero__subtitle {
  font-size: var(--fba-font-size-lg);
  color: rgba(255, 255, 255, 0.8);
  max-width: 700px;
  margin: 0 auto var(--fba-space-xl);
  line-height: 1.6;
}

.fba-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--fba-space-xs);
  background-color: var(--fba-white);
  color: var(--fba-primary-dark);
  font-weight: var(--fba-font-weight-semi);
  padding: var(--fba-space-sm) var(--fba-space-xl);
  border-radius: var(--fba-radius-full);
  font-size: var(--fba-font-size-base);
  text-decoration: none;
  transition: transform var(--fba-transition-base), box-shadow var(--fba-transition-base);
  box-shadow: var(--fba-shadow-md);
}

.fba-hero__cta:hover,
.fba-hero__cta:focus {
  transform: translateY(-2px);
  box-shadow: var(--fba-shadow-xl);
  text-decoration: none;
  color: var(--fba-primary-dark);
}

.fba-hero__meta {
  margin-top: var(--fba-space-xl);
  display: flex;
  justify-content: center;
  gap: var(--fba-space-xl);
  flex-wrap: wrap;
  font-size: var(--fba-font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

.fba-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--fba-space-xxs);
}


/* ==========================================================================
   5. Hub Page - Table of Contents Sidebar
   ========================================================================== */

.fba-layout {
  display: flex;
  gap: var(--fba-content-gap);
  max-width: var(--fba-container-max);
  margin: 0 auto;
  padding: var(--fba-space-xl) var(--fba-space-lg);
  align-items: flex-start;
}

.fba-sidebar {
  flex: 0 0 var(--fba-sidebar-width);
  position: sticky;
  top: var(--fba-space-lg);
  max-height: calc(100vh - var(--fba-space-xl));
  overflow-y: auto;
  padding-right: var(--fba-space-md);
  scrollbar-width: thin;
  scrollbar-color: var(--fba-gray-300) transparent;
}

.fba-sidebar::-webkit-scrollbar {
  width: 5px;
}

.fba-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.fba-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--fba-gray-300);
  border-radius: var(--fba-radius-full);
}

.fba-content-main {
  flex: 1;
  min-width: 0;
}

/* ---- TOC Wrapper ---- */
.fba-toc {
  background-color: var(--fba-gray-50);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-lg);
  padding: var(--fba-space-lg);
}

.fba-toc__title {
  font-size: var(--fba-font-size-sm);
  font-weight: var(--fba-font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fba-gray-500);
  margin-bottom: var(--fba-space-md);
  padding-bottom: var(--fba-space-sm);
  border-bottom: 1px solid var(--fba-gray-200);
}

.fba-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fba-toc__list li {
  margin-bottom: var(--fba-space-xxs);
}

.fba-toc__link {
  display: block;
  padding: var(--fba-space-xs) var(--fba-space-sm);
  font-size: var(--fba-font-size-sm);
  color: var(--fba-gray-600);
  border-radius: var(--fba-radius-sm);
  border-left: 3px solid transparent;
  transition: all var(--fba-transition-fast);
  text-decoration: none;
}

.fba-toc__link:hover {
  color: var(--fba-primary);
  background-color: var(--fba-primary-pale);
  border-left-color: var(--fba-primary-light);
  text-decoration: none;
}

.fba-toc__link--active {
  color: var(--fba-primary);
  background-color: var(--fba-primary-pale);
  border-left-color: var(--fba-primary);
  font-weight: var(--fba-font-weight-medium);
}

.fba-toc__link--sub {
  padding-left: var(--fba-space-xl);
  font-size: var(--fba-font-size-xs);
}

.fba-toc__progress {
  margin-top: var(--fba-space-md);
  padding-top: var(--fba-space-sm);
  border-top: 1px solid var(--fba-gray-200);
}

.fba-toc__progress-bar {
  width: 100%;
  height: 4px;
  background-color: var(--fba-gray-200);
  border-radius: var(--fba-radius-full);
  overflow: hidden;
}

.fba-toc__progress-fill {
  height: 100%;
  background-color: var(--fba-primary);
  border-radius: var(--fba-radius-full);
  transition: width var(--fba-transition-smooth);
  width: 0%;
}

.fba-toc__progress-text {
  font-size: var(--fba-font-size-xs);
  color: var(--fba-gray-400);
  margin-top: var(--fba-space-xxs);
  text-align: right;
}


/* ==========================================================================
   6. Hub Page - Card Grid (Chapter Navigation)
   ========================================================================== */

.fba-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--fba-space-lg);
  margin: var(--fba-space-xl) 0;
}

.fba-card {
  background-color: var(--fba-white);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-lg);
  padding: var(--fba-space-lg);
  transition: transform var(--fba-transition-base), box-shadow var(--fba-transition-base), border-color var(--fba-transition-base);
  position: relative;
  display: flex;
  flex-direction: column;
}

.fba-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fba-shadow-lg);
  border-color: var(--fba-primary-light);
}

.fba-card__chapter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--fba-primary) 0%, var(--fba-primary-dark) 100%);
  color: var(--fba-white);
  font-size: var(--fba-font-size-sm);
  font-weight: var(--fba-font-weight-bold);
  border-radius: var(--fba-radius-md);
  margin-bottom: var(--fba-space-sm);
  flex-shrink: 0;
}

.fba-card__title {
  font-size: 1.1rem;
  font-weight: var(--fba-font-weight-semi);
  color: var(--fba-gray-900);
  margin-bottom: var(--fba-space-xxs);
}

.fba-card__title-th {
  font-family: var(--fba-font-th);
  font-size: var(--fba-font-size-sm);
  color: var(--fba-gray-500);
  font-weight: var(--fba-font-weight-normal);
  margin-bottom: var(--fba-space-sm);
  line-height: var(--fba-line-height-th);
}

.fba-card__description {
  font-size: var(--fba-font-size-sm);
  color: var(--fba-gray-600);
  flex: 1;
  margin-bottom: var(--fba-space-md);
}

.fba-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fba-font-size-xs);
  color: var(--fba-gray-400);
  padding-top: var(--fba-space-sm);
  border-top: 1px solid var(--fba-gray-100);
}

.fba-card__sections-count {
  background-color: var(--fba-gray-100);
  padding: 2px var(--fba-space-xs);
  border-radius: var(--fba-radius-full);
}

.fba-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fba-card__link:focus-visible {
  outline: 2px solid var(--fba-primary);
  outline-offset: 2px;
  border-radius: var(--fba-radius-lg);
}


/* ==========================================================================
   6b. Hub Page - Section Containers (Intro, Highlights, Court Decisions, etc.)
   ========================================================================== */

.fba-intro,
.fba-highlights,
.fba-historical,
.fba-court-decisions,
.fba-resources,
.fba-seo-content,
.fba-toc-section {
  padding: var(--fba-space-xl) 0;
  margin: 0;
}

.fba-intro {
  background-color: var(--fba-white);
}

.fba-highlights {
  background-color: var(--fba-gray-50);
}

/* --------------------------------------------------------------------------
   Historical Context, Article Relevance & Expat Guidance
   -------------------------------------------------------------------------- */

.fba-historical {
  background-color: var(--fba-white);
  padding: var(--fba-space-xxl) 0;
}

.fba-historical h2 {
  font-size: 1.5rem;
  color: var(--fba-gray-900);
  margin-bottom: var(--fba-space-xl);
  text-align: center;
  line-height: 1.5;
}

.fba-historical__item {
  background-color: var(--fba-gray-50);
  border-radius: var(--fba-radius-lg);
  padding: var(--fba-space-lg);
  margin-bottom: var(--fba-space-lg);
  border-left: 4px solid var(--fba-primary);
  transition: box-shadow var(--fba-transition-fast);
}

.fba-historical__item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.fba-historical__item--history {
  border-left-color: var(--fba-primary);
}

.fba-historical__item--relevance {
  border-left-color: var(--fba-accent-amber, #F59E0B);
}

.fba-historical__item--expat {
  border-left-color: var(--fba-accent-red, #EF4444);
}

.fba-historical__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--fba-space-sm);
}

.fba-historical__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fba-historical__item--history .fba-historical__icon {
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--fba-primary);
}

.fba-historical__item--relevance .fba-historical__icon {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--fba-accent-amber, #F59E0B);
}

.fba-historical__item--expat .fba-historical__icon {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--fba-accent-red, #EF4444);
}

.fba-historical__badge span {
  font-size: var(--fba-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fba-historical__item--history .fba-historical__badge span {
  color: var(--fba-primary);
}

.fba-historical__item--relevance .fba-historical__badge span {
  color: var(--fba-accent-amber, #F59E0B);
}

.fba-historical__item--expat .fba-historical__badge span {
  color: var(--fba-accent-red, #EF4444);
}

.fba-historical__title {
  font-size: 1.1rem;
  color: var(--fba-gray-900);
  margin-bottom: var(--fba-space-md);
  line-height: 1.4;
}

.fba-historical__title .fba-lang-th {
  display: block;
  font-family: var(--fba-font-th);
  line-height: var(--fba-line-height-th);
  margin-top: 4px;
  font-size: 1rem;
  color: var(--fba-gray-700);
}

.fba-historical__content {
  font-size: var(--fba-font-size-sm);
  line-height: 1.7;
  color: var(--fba-gray-600);
}

.fba-historical__content p {
  margin: 0;
}

/* ================================================================
   6c. Hub Page – Legal Disclaimer
   ================================================================ */
.fba-disclaimer {
  background-color: #FEF3C7;
  border-top: 3px solid var(--fba-accent-amber);
  border-bottom: 1px solid #F59E0B40;
  padding: var(--fba-space-md) 0;
  opacity: 1;
}

.fba-disclaimer__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--fba-space-md);
}

.fba-disclaimer__icon {
  flex-shrink: 0;
  color: #D97706;
  margin-top: 2px;
}

.fba-disclaimer__content {
  flex: 1;
}

.fba-disclaimer__text {
  font-size: var(--fba-font-size-sm);
  line-height: 1.6;
  color: var(--fba-gray-800);
  margin: 0 0 var(--fba-space-xs) 0;
}

.fba-disclaimer__text:last-child {
  margin-bottom: 0;
}

.fba-disclaimer__text--th {
  font-family: var(--fba-font-th);
  line-height: var(--fba-line-height-th);
}

/* ================================================================
   6d. Hub Page – Comparison Tables
   ================================================================ */
.fba-table-section {
  padding: var(--fba-space-xxl) 0;
  background-color: var(--fba-white);
}

.fba-table-section--alt {
  background-color: var(--fba-gray-50);
}

.fba-table-section h2 {
  font-size: 1.5rem;
  color: var(--fba-gray-900);
  margin-bottom: var(--fba-space-xl);
  text-align: center;
  line-height: 1.5;
}

.fba-table-section h2 span[lang="th"] {
  font-family: var(--fba-font-th);
  font-weight: 600;
}

/* Scroll wrapper */
.fba-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-lg);
  margin: var(--fba-space-lg) 0;
  position: relative;
  background-color: var(--fba-white);
  box-shadow: var(--fba-shadow-sm);
}

/* Base table */
.fba-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fba-font-size-sm);
  line-height: 1.6;
  min-width: 650px;
}

.fba-table__caption {
  padding: var(--fba-space-md);
  font-weight: 600;
  text-align: left;
  caption-side: top;
  color: var(--fba-gray-600);
  font-size: var(--fba-font-size-xs);
}

.fba-table__caption .fba-lang-th {
  font-family: var(--fba-font-th);
  display: block;
  margin-top: var(--fba-space-xxs);
}

/* Header cells */
.fba-table__row--header .fba-table__cell--header {
  background-color: var(--fba-primary-pale);
  color: var(--fba-gray-900);
  font-weight: 600;
  text-align: left;
  padding: var(--fba-space-md);
  border-bottom: 2px solid var(--fba-primary-lighter);
}

/* Row header (first column in body) */
.fba-table__body .fba-table__cell--header {
  background-color: var(--fba-gray-50);
  border-bottom: 1px solid var(--fba-gray-200);
  font-weight: 500;
  padding: var(--fba-space-md);
  vertical-align: top;
}

/* Regular cells */
.fba-table__cell {
  padding: var(--fba-space-md);
  border-bottom: 1px solid var(--fba-gray-100);
  vertical-align: top;
  color: var(--fba-gray-700);
}

/* Bilingual text in cells */
.fba-table__cell .fba-lang-th,
.fba-table__cell--header .fba-lang-th {
  display: block;
  font-family: var(--fba-font-th);
  line-height: var(--fba-line-height-th);
  margin-top: var(--fba-space-xxs);
  color: var(--fba-gray-500);
  font-size: 0.85em;
}

.fba-table__cell .fba-lang-en,
.fba-table__cell--header .fba-lang-en {
  display: block;
}

/* Zebra stripe */
.fba-table__body .fba-table__row:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.015);
}

.fba-table__body .fba-table__row:hover {
  background-color: var(--fba-primary-pale);
}

/* List-specific accent colors (Three Lists table) */
.fba-table__cell--list-one {
  border-top: 3px solid var(--fba-accent-red);
}

.fba-table__cell--list-two {
  border-top: 3px solid var(--fba-accent-amber);
}

.fba-table__cell--list-three {
  border-top: 3px solid var(--fba-accent-green);
}

/* Penalties table emphasis */
.fba-table--penalties .fba-table__cell--highlight {
  color: var(--fba-accent-red);
  font-weight: 600;
}

.fba-table--penalties .fba-table__cell--highlight .fba-lang-th {
  color: var(--fba-accent-red);
  opacity: 0.75;
}

.fba-court-decisions {
  background-color: var(--fba-white);
  padding: var(--fba-space-xxl) 0;
}

.fba-court-decisions h2 {
  font-size: 1.5rem;
  color: var(--fba-gray-900);
  margin-bottom: var(--fba-space-lg);
  text-align: center;
}

.fba-court-decisions .fba-card-grid {
  gap: var(--fba-space-md);
}

.fba-court-decisions .fba-court-decision__card {
  background-color: var(--fba-white);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-lg);
  padding: var(--fba-space-lg);
  box-shadow: var(--fba-shadow-sm);
  transition: transform var(--fba-transition-base), box-shadow var(--fba-transition-base);
}

.fba-court-decisions .fba-court-decision__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--fba-shadow-md);
}

.fba-court-decisions .fba-annotation--court {
  background-color: #D1FAE5 !important;
  border-left: 4px solid #059669 !important;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.fba-court-decisions .fba-annotation__label {
  font-weight: 600;
  color: #059669;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fba-court-decisions .fba-card__title {
  color: var(--fba-gray-900) !important;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.4;
}

.fba-court-decisions .fba-card__description {
  color: var(--fba-gray-600) !important;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 8px;
}

.fba-court-decisions .fba-card__meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--fba-gray-100);
  font-size: 0.8rem;
  color: var(--fba-gray-500);
}

.fba-court-decisions .fba-card__sections-count {
  font-weight: 500;
  color: var(--fba-primary);
}

/* Hide additional court decision cards (shown via JS "Show All" button) */
.fba-court-hidden {
  display: none !important;
}

.fba-resources {
  background-color: var(--fba-gray-50);
}

.fba-seo-content {
  background-color: var(--fba-white);
}

/* ==========================================================================
   7. Hub Page - FAQ Accordion
   ========================================================================== */

.fba-faq {
  margin: var(--fba-space-xxl) 0;
}

.fba-faq__title {
  font-size: 1.5rem;
  margin-bottom: var(--fba-space-lg);
  color: var(--fba-gray-900);
}

.fba-faq__list {
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-lg);
  overflow: hidden;
}

/* FAQ items — supports both <details> (hub page) and <div> (section pages) */
.fba-faq__item {
  border-bottom: 1px solid var(--fba-gray-200);
}

.fba-faq__item:last-child {
  border-bottom: none;
}

/* Native <details>: hide default marker/triangle */
details.fba-faq__item > summary {
  list-style: none;
}
details.fba-faq__item > summary::-webkit-details-marker {
  display: none;
}
details.fba-faq__item > summary::marker {
  display: none;
  content: '';
}

.fba-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--fba-space-md) var(--fba-space-lg);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--fba-font-en);
  font-size: var(--fba-font-size-base);
  font-weight: var(--fba-font-weight-medium);
  color: var(--fba-gray-800);
  transition: background-color var(--fba-transition-fast), color var(--fba-transition-fast);
}

.fba-faq__question:hover {
  background-color: var(--fba-gray-50);
  color: var(--fba-primary);
}

.fba-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--fba-space-md);
  transition: transform var(--fba-transition-smooth);
}

.fba-faq__icon::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}

/* Rotate icon when open — supports both <details[open]> and JS class */
.fba-faq__item--open .fba-faq__icon,
details.fba-faq__item[open] .fba-faq__icon {
  transform: rotate(180deg);
}

/* JS-based accordion answer (section pages) */
.fba-faq__answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--fba-transition-smooth), padding var(--fba-transition-smooth), opacity var(--fba-transition-smooth);
}

.fba-faq__item--open .fba-faq__answer {
  max-height: 1000px;
  opacity: 1;
}

.fba-faq__answer-inner {
  padding: 0 var(--fba-space-lg) var(--fba-space-lg);
  font-size: var(--fba-font-size-sm);
  color: var(--fba-gray-600);
  line-height: 1.7;
}

.fba-faq__answer-inner p {
  margin-bottom: var(--fba-space-sm);
}

.fba-faq__answer-inner p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   8. Hub Page - SEO Keyword Sections
   ========================================================================== */

.fba-seo-section {
  margin: var(--fba-space-xxl) 0;
  padding: var(--fba-space-xl);
  background-color: var(--fba-gray-50);
  border-radius: var(--fba-radius-lg);
}

.fba-seo-section__title {
  font-size: 1.25rem;
  color: var(--fba-gray-800);
  margin-bottom: var(--fba-space-md);
}

.fba-seo-section__content {
  color: var(--fba-gray-600);
  font-size: var(--fba-font-size-base);
  line-height: 1.7;
}

.fba-seo-section__content p {
  margin-bottom: var(--fba-space-md);
}

.fba-keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fba-space-xs);
  margin-top: var(--fba-space-md);
}

.fba-keyword-tag {
  display: inline-block;
  padding: var(--fba-space-xxs) var(--fba-space-sm);
  background-color: var(--fba-primary-pale);
  color: var(--fba-primary-dark);
  font-size: var(--fba-font-size-xs);
  border-radius: var(--fba-radius-full);
  font-weight: var(--fba-font-weight-medium);
  border: 1px solid var(--fba-primary-lighter);
}

.fba-related-topics {
  margin-top: var(--fba-space-lg);
  padding-top: var(--fba-space-lg);
  border-top: 1px solid var(--fba-gray-200);
}

.fba-related-topics__title {
  font-size: var(--fba-font-size-sm);
  font-weight: var(--fba-font-weight-semi);
  color: var(--fba-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--fba-space-sm);
}

.fba-related-topics__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fba-space-xs);
}

.fba-related-topics__link {
  display: inline-block;
  padding: var(--fba-space-xxs) var(--fba-space-sm);
  background-color: var(--fba-white);
  color: var(--fba-primary);
  font-size: var(--fba-font-size-sm);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-sm);
  transition: all var(--fba-transition-fast);
  text-decoration: none;
}

.fba-related-topics__link:hover {
  background-color: var(--fba-primary);
  color: var(--fba-white);
  border-color: var(--fba-primary);
  text-decoration: none;
}


/* ==========================================================================
   9. Bilingual Content Layout
   ========================================================================== */

.fba-bilingual {
  display: flex;
  gap: var(--fba-space-xl);
  margin: var(--fba-space-lg) 0;
  align-items: flex-start;
}

.fba-bilingual__col {
  flex: 1;
  min-width: 0;
}

.fba-bilingual__col--th {
  font-family: var(--fba-font-th);
  line-height: var(--fba-line-height-th);
  font-size: calc(var(--fba-font-size-base) + 1px);
}

.fba-bilingual__col--en {
  font-family: var(--fba-font-en);
  line-height: var(--fba-line-height-en);
  font-size: var(--fba-font-size-base);
}

.fba-bilingual__divider {
  flex: 0 0 1px;
  background-color: var(--fba-gray-200);
  align-self: stretch;
}

/* ---- Language Labels / Badges ---- */
.fba-lang-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fba-space-xxs);
  font-size: var(--fba-font-size-xs);
  font-weight: var(--fba-font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px var(--fba-space-xs);
  border-radius: var(--fba-radius-sm);
  margin-bottom: var(--fba-space-sm);
}

.fba-lang-badge--th {
  background-color: #FFF7ED;
  color: #C2410C;
  border: 1px solid #FED7AA;
}

.fba-lang-badge--en {
  background-color: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

/* ---- Full-width bilingual block (alternative stacked layout) ---- */
.fba-bilingual--stacked {
  flex-direction: column;
  gap: var(--fba-space-md);
}

.fba-bilingual--stacked .fba-bilingual__divider {
  height: 1px;
  width: 100%;
}

/* ---- Section-level bilingual pairing ---- */
.fba-section-pair {
  display: flex;
  gap: var(--fba-space-xl);
  padding: var(--fba-space-lg) 0;
  border-bottom: 1px solid var(--fba-gray-100);
}

.fba-section-pair:last-child {
  border-bottom: none;
}

.fba-section-pair__th,
.fba-section-pair__en {
  flex: 1;
  min-width: 0;
}

.fba-section-pair__th {
  font-family: var(--fba-font-th);
  line-height: var(--fba-line-height-th);
  font-size: calc(var(--fba-font-size-base) + 1px);
}

.fba-section-pair__en {
  font-family: var(--fba-font-en);
  line-height: var(--fba-line-height-en);
}


/* ==========================================================================
   10. Language Toggle
   ========================================================================== */

.fba-lang-toggle {
  display: none; /* Shown on mobile via media query */
  background-color: var(--fba-gray-100);
  border-radius: var(--fba-radius-full);
  padding: 3px;
  margin-bottom: var(--fba-space-md);
  width: fit-content;
}

.fba-lang-toggle__btn {
  padding: var(--fba-space-xs) var(--fba-space-lg);
  border: none;
  background: none;
  border-radius: var(--fba-radius-full);
  font-size: var(--fba-font-size-sm);
  font-weight: var(--fba-font-weight-medium);
  color: var(--fba-gray-500);
  cursor: pointer;
  transition: all var(--fba-transition-fast);
  font-family: var(--fba-font-en);
}

.fba-lang-toggle__btn--active {
  background-color: var(--fba-white);
  color: var(--fba-primary);
  box-shadow: var(--fba-shadow-sm);
}

.fba-lang-toggle__btn:hover:not(.fba-lang-toggle__btn--active) {
  color: var(--fba-gray-700);
}

/* Language visibility classes for mobile toggle */
.fba-lang-hidden {
  display: none;
}


/* ==========================================================================
   11. Section Annotations
   ========================================================================== */

/* ---- Base Annotation Box ---- */
.fba-annotation {
  position: relative;
  margin: var(--fba-space-lg) 0;
  padding: var(--fba-space-md) var(--fba-space-lg);
  border-radius: var(--fba-radius-md);
  font-size: var(--fba-font-size-sm);
  line-height: 1.7;
  border-left: 4px solid;
}

.fba-annotation__label {
  display: inline-block;
  font-size: var(--fba-font-size-xs);
  font-weight: var(--fba-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--fba-space-xs);
}

.fba-annotation__content {
  color: var(--fba-gray-700);
}

.fba-annotation__content p {
  margin-bottom: var(--fba-space-xs);
}

.fba-annotation__content p:last-child {
  margin-bottom: 0;
}

/* ---- Editorial Commentary (light blue) ---- */
.fba-annotation--editorial {
  background-color: var(--fba-primary-pale);
  border-left-color: var(--fba-primary);
}

.fba-annotation--editorial .fba-annotation__label {
  color: var(--fba-primary-dark);
}

/* ---- Amendment Notices (amber/orange) ---- */
.fba-annotation--amendment {
  background-color: var(--fba-accent-amber-light);
  border-left-color: var(--fba-accent-amber-border);
}

.fba-annotation--amendment .fba-annotation__label {
  color: var(--fba-accent-amber-border);
}

/* ---- Supreme Court Decisions (green, with gavel icon) ---- */
.fba-annotation--court {
  background-color: var(--fba-accent-green-light);
  border-left-color: var(--fba-accent-green-border);
  padding-left: calc(var(--fba-space-lg) + 28px);
}

.fba-annotation--court::before {
  content: '';
  position: absolute;
  left: var(--fba-space-md);
  top: var(--fba-space-md);
  width: 20px;
  height: 20px;
  /* Gavel icon via CSS shapes */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2.5l5 5M2 22l1-1h3l9-9-5-5-9 9v3l-1 1'/%3E%3Cpath d='M14.5 2.5L19 7'/%3E%3Cpath d='M3 21l3-3'/%3E%3Cpath d='M22 2l-5.5 5.5'/%3E%3Cpath d='M18 16h4v4h-4z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.fba-annotation--court .fba-annotation__label {
  color: var(--fba-accent-green-border);
}

/* ---- Penalty Warning (red) ---- */
.fba-annotation--penalty {
  background-color: var(--fba-accent-red-light);
  border-left-color: var(--fba-accent-red-border);
}

.fba-annotation--penalty .fba-annotation__label {
  color: var(--fba-accent-red-border);
}

/* ---- Cross-reference Links ---- */
.fba-xref {
  display: inline-flex;
  align-items: center;
  gap: var(--fba-space-xxs);
  color: var(--fba-accent-purple);
  font-weight: var(--fba-font-weight-medium);
  font-size: var(--fba-font-size-sm);
  text-decoration: none;
  padding: 1px var(--fba-space-xs);
  background-color: var(--fba-accent-purple-light);
  border-radius: var(--fba-radius-sm);
  transition: all var(--fba-transition-fast);
  border-bottom: 1px dashed var(--fba-accent-purple);
}

.fba-xref:hover {
  background-color: var(--fba-accent-purple);
  color: var(--fba-white);
  text-decoration: none;
  border-bottom-color: transparent;
}

.fba-xref::before {
  content: '\00A7'; /* Section symbol */
  font-weight: var(--fba-font-weight-bold);
}

/* ---- Section Number Badge ---- */
.fba-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 var(--fba-space-xs);
  background: linear-gradient(135deg, var(--fba-primary) 0%, var(--fba-primary-dark) 100%);
  color: var(--fba-white);
  font-size: var(--fba-font-size-sm);
  font-weight: var(--fba-font-weight-bold);
  border-radius: var(--fba-radius-sm);
  margin-right: var(--fba-space-xs);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.fba-section-badge--small {
  min-width: 28px;
  height: 22px;
  font-size: var(--fba-font-size-xs);
}

.fba-section-badge--outline {
  background: none;
  color: var(--fba-primary);
  border: 1px solid var(--fba-primary);
}


/* ==========================================================================
   12. Legal Document Formatting
   ========================================================================== */

/* ---- Section Headers with Anchors ---- */
.fba-section-header {
  position: relative;
  margin: var(--fba-space-xxl) 0 var(--fba-space-lg);
  padding-top: var(--fba-space-lg);
  border-top: 2px solid var(--fba-gray-200);
}

.fba-section-header:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.fba-section-header__anchor {
  position: absolute;
  top: -80px;
  visibility: hidden;
}

.fba-section-header__number {
  display: flex;
  align-items: center;
  gap: var(--fba-space-sm);
  margin-bottom: var(--fba-space-xs);
}

.fba-section-header__title {
  font-size: 1.25rem;
  font-weight: var(--fba-font-weight-bold);
  color: var(--fba-gray-900);
  margin-bottom: var(--fba-space-xxs);
}

.fba-section-header__title-th {
  font-family: var(--fba-font-th);
  font-size: 1.15rem;
  color: var(--fba-gray-600);
  font-weight: var(--fba-font-weight-normal);
  line-height: var(--fba-line-height-th);
  margin-bottom: var(--fba-space-md);
}

.fba-section-header__link {
  display: inline-flex;
  align-items: center;
  gap: var(--fba-space-xxs);
  font-size: var(--fba-font-size-xs);
  color: var(--fba-gray-400);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--fba-transition-fast);
}

.fba-section-header:hover .fba-section-header__link {
  opacity: 1;
}

.fba-section-header__link::before {
  content: '#';
  font-weight: var(--fba-font-weight-bold);
}

/* ---- Subsection Numbering ---- */
.fba-subsection {
  margin-left: var(--fba-space-lg);
  padding-left: var(--fba-space-md);
  border-left: 2px solid var(--fba-gray-100);
  margin-bottom: var(--fba-space-md);
}

.fba-subsection__number {
  font-weight: var(--fba-font-weight-semi);
  color: var(--fba-primary);
  margin-right: var(--fba-space-xs);
}

/* ---- Restricted Business Lists ---- */
.fba-business-list {
  margin: var(--fba-space-lg) 0;
  padding: 0;
  list-style: none;
  counter-reset: fba-list-counter;
}

.fba-business-list__item {
  counter-increment: fba-list-counter;
  padding: var(--fba-space-sm) var(--fba-space-md);
  padding-left: calc(var(--fba-space-xl) + var(--fba-space-md));
  margin-bottom: var(--fba-space-xs);
  background-color: var(--fba-gray-50);
  border-radius: var(--fba-radius-sm);
  border: 1px solid var(--fba-gray-100);
  position: relative;
  line-height: 1.6;
  font-size: var(--fba-font-size-sm);
  transition: background-color var(--fba-transition-fast);
}

.fba-business-list__item:hover {
  background-color: var(--fba-primary-pale);
  border-color: var(--fba-primary-lighter);
}

.fba-business-list__item::before {
  content: '(' counter(fba-list-counter) ')';
  position: absolute;
  left: var(--fba-space-md);
  top: var(--fba-space-sm);
  font-weight: var(--fba-font-weight-bold);
  color: var(--fba-primary);
  font-size: var(--fba-font-size-sm);
}

/* Schedule list type indicators */
.fba-business-list--schedule-1 .fba-business-list__item {
  border-left: 3px solid var(--fba-accent-red);
}

.fba-business-list--schedule-2 .fba-business-list__item {
  border-left: 3px solid var(--fba-accent-amber);
}

.fba-business-list--schedule-3 .fba-business-list__item {
  border-left: 3px solid var(--fba-accent-green);
}

/* ---- Schedule Headers ---- */
.fba-schedule-header {
  display: flex;
  align-items: center;
  gap: var(--fba-space-sm);
  padding: var(--fba-space-md) var(--fba-space-lg);
  margin: var(--fba-space-xl) 0 var(--fba-space-md);
  border-radius: var(--fba-radius-md);
  font-weight: var(--fba-font-weight-bold);
  font-size: 1.1rem;
}

.fba-schedule-header--1 {
  background-color: var(--fba-accent-red-light);
  color: var(--fba-accent-red-border);
  border: 1px solid var(--fba-accent-red-border);
}

.fba-schedule-header--2 {
  background-color: var(--fba-accent-amber-light);
  color: var(--fba-accent-amber-border);
  border: 1px solid var(--fba-accent-amber-border);
}

.fba-schedule-header--3 {
  background-color: var(--fba-accent-green-light);
  color: var(--fba-accent-green-border);
  border: 1px solid var(--fba-accent-green-border);
}

.fba-schedule-header__label {
  font-size: var(--fba-font-size-xs);
  font-weight: var(--fba-font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px var(--fba-space-xs);
  border-radius: var(--fba-radius-sm);
  background-color: rgba(0, 0, 0, 0.08);
}

/* ---- Penalty Sections ---- */
.fba-penalty {
  background-color: var(--fba-accent-red-light);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-left: 4px solid var(--fba-accent-red);
  border-radius: var(--fba-radius-md);
  padding: var(--fba-space-md) var(--fba-space-lg);
  margin: var(--fba-space-lg) 0;
}

.fba-penalty__label {
  display: inline-block;
  font-size: var(--fba-font-size-xs);
  font-weight: var(--fba-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fba-accent-red-border);
  margin-bottom: var(--fba-space-xs);
}

.fba-penalty__text {
  color: var(--fba-gray-800);
  font-size: var(--fba-font-size-sm);
  line-height: 1.7;
}

.fba-penalty__amount {
  font-weight: var(--fba-font-weight-bold);
  color: var(--fba-accent-red-border);
}

/* ---- Definition Terms ---- */
.fba-definition {
  position: relative;
  margin: var(--fba-space-md) 0;
  padding: var(--fba-space-md) var(--fba-space-lg);
  background-color: var(--fba-gray-50);
  border-radius: var(--fba-radius-md);
  border: 1px solid var(--fba-gray-200);
}

.fba-definition__term {
  font-weight: var(--fba-font-weight-bold);
  color: var(--fba-gray-900);
  margin-bottom: var(--fba-space-xxs);
}

.fba-definition__term::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--fba-primary);
  border-radius: 2px;
  margin-right: var(--fba-space-xs);
  vertical-align: middle;
}

.fba-definition__text {
  font-size: var(--fba-font-size-sm);
  color: var(--fba-gray-600);
  line-height: 1.7;
  padding-left: var(--fba-space-lg);
}

/* Highlighted definition term inline */
.fba-defined-term {
  font-weight: var(--fba-font-weight-semi);
  color: var(--fba-primary-dark);
  background-color: var(--fba-primary-pale);
  padding: 1px var(--fba-space-xxs);
  border-radius: 2px;
  border-bottom: 1px dotted var(--fba-primary);
  cursor: help;
}

/* ---- Legal Body Text ---- */
.fba-legal-text {
  font-size: var(--fba-font-size-base);
  line-height: 1.75;
  color: var(--fba-gray-800);
}

.fba-legal-text p {
  margin-bottom: var(--fba-space-md);
  text-align: justify;
  hyphens: auto;
}

.fba-legal-text--th {
  font-family: var(--fba-font-th);
  line-height: var(--fba-line-height-th);
  font-size: calc(var(--fba-font-size-base) + 1px);
}

/* ---- Effective Date Banner ---- */
.fba-effective-date {
  display: flex;
  align-items: center;
  gap: var(--fba-space-sm);
  padding: var(--fba-space-sm) var(--fba-space-lg);
  background-color: var(--fba-primary-pale);
  border: 1px solid var(--fba-primary-lighter);
  border-radius: var(--fba-radius-md);
  margin-bottom: var(--fba-space-lg);
  font-size: var(--fba-font-size-sm);
  color: var(--fba-primary-dark);
}

.fba-effective-date__label {
  font-weight: var(--fba-font-weight-bold);
  white-space: nowrap;
}


/* ==========================================================================
   13. Navigation - Breadcrumbs
   ========================================================================== */

.fba-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fba-space-xxs);
  padding: var(--fba-space-md) 0;
  font-size: var(--fba-font-size-sm);
  color: var(--fba-gray-400);
  list-style: none;
  margin: 0;
}

.fba-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--fba-space-xxs);
}

.fba-breadcrumbs__item::after {
  content: '/';
  color: var(--fba-gray-300);
  margin-left: var(--fba-space-xxs);
}

.fba-breadcrumbs__item:last-child::after {
  content: none;
}

.fba-breadcrumbs__link {
  color: var(--fba-gray-500);
  text-decoration: none;
  transition: color var(--fba-transition-fast);
}

.fba-breadcrumbs__link:hover {
  color: var(--fba-primary);
  text-decoration: none;
}

.fba-breadcrumbs__current {
  color: var(--fba-gray-700);
  font-weight: var(--fba-font-weight-medium);
}


/* ==========================================================================
   14. Navigation - Previous / Next Section
   ========================================================================== */

.fba-section-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--fba-space-md);
  margin: var(--fba-space-xxl) 0;
  padding-top: var(--fba-space-xl);
  border-top: 2px solid var(--fba-gray-200);
}

.fba-section-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--fba-space-xxs);
  padding: var(--fba-space-md) var(--fba-space-lg);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-md);
  text-decoration: none;
  max-width: 48%;
  transition: all var(--fba-transition-base);
}

.fba-section-nav__link:hover {
  border-color: var(--fba-primary);
  box-shadow: var(--fba-shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
}

.fba-section-nav__link--prev {
  align-items: flex-start;
}

.fba-section-nav__link--next {
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}

.fba-section-nav__label {
  font-size: var(--fba-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fba-gray-400);
  font-weight: var(--fba-font-weight-medium);
}

.fba-section-nav__label::before {
  content: '\2190 '; /* Left arrow */
}

.fba-section-nav__link--next .fba-section-nav__label::before {
  content: '';
}

.fba-section-nav__link--next .fba-section-nav__label::after {
  content: ' \2192'; /* Right arrow */
}

.fba-section-nav__title {
  font-size: var(--fba-font-size-base);
  font-weight: var(--fba-font-weight-semi);
  color: var(--fba-gray-800);
}

.fba-section-nav__link:hover .fba-section-nav__title {
  color: var(--fba-primary);
}


/* ==========================================================================
   15. Navigation - Back to Top
   ========================================================================== */

.fba-back-to-top {
  position: fixed;
  bottom: var(--fba-space-xl);
  right: var(--fba-space-xl);
  width: 44px;
  height: 44px;
  background-color: var(--fba-primary);
  color: var(--fba-white);
  border: none;
  border-radius: var(--fba-radius-full);
  cursor: pointer;
  z-index: var(--fba-z-back-to-top);
  box-shadow: var(--fba-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--fba-transition-base);
}

.fba-back-to-top::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(-45deg);
  margin-top: 3px;
}

.fba-back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fba-back-to-top:hover {
  background-color: var(--fba-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--fba-shadow-xl);
}

.fba-back-to-top:active {
  transform: translateY(0);
}


/* ==========================================================================
   15b. Document Toolbar (Floating Print & PDF FAB)
   ========================================================================== */

.fba-doc-toolbar {
  position: fixed;
  bottom: var(--fba-space-xl, 32px);
  left: var(--fba-space-xl, 32px);
  z-index: var(--fba-z-back-to-top, 1000);
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--fba-space-xs, 8px);
}

.fba-doc-toolbar__toggle {
  width: 48px;
  height: 48px;
  background-color: var(--fba-primary, #1e73be);
  color: var(--fba-white, #fff);
  border: none;
  border-radius: var(--fba-radius-full, 50%);
  cursor: pointer;
  box-shadow: var(--fba-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fba-doc-toolbar__toggle:hover {
  background-color: var(--fba-primary-dark, #155a96);
  transform: translateY(-2px);
  box-shadow: var(--fba-shadow-xl, 0 8px 24px rgba(0, 0, 0, 0.2));
}

.fba-doc-toolbar__toggle:focus-visible {
  outline: 2px solid var(--fba-primary, #1e73be);
  outline-offset: 3px;
}

.fba-doc-toolbar__panel {
  display: none;
  background: var(--fba-white, #fff);
  border-radius: var(--fba-radius-md, 8px);
  box-shadow: var(--fba-shadow-xl, 0 8px 24px rgba(0, 0, 0, 0.2));
  padding: var(--fba-space-md, 16px);
  min-width: 180px;
  border: 1px solid var(--fba-gray-200, #e5e7eb);
}

.fba-doc-toolbar--expanded .fba-doc-toolbar__panel {
  display: block;
  animation: fba-fade-in 0.15s ease-out;
}

@keyframes fba-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fba-doc-toolbar__group {
  margin-bottom: var(--fba-space-sm, 12px);
}

.fba-doc-toolbar__group:last-child {
  margin-bottom: 0;
}

.fba-doc-toolbar__group-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--fba-gray-500, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--fba-space-xxs, 4px);
  padding-bottom: var(--fba-space-xxs, 4px);
  border-bottom: 1px solid var(--fba-gray-200, #e5e7eb);
}

.fba-doc-toolbar__btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  background: none;
  border-radius: var(--fba-radius-sm, 4px);
  font-size: 13px;
  font-weight: 500;
  color: var(--fba-gray-700, #374151);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  font-family: var(--fba-font-en, 'Roboto', sans-serif);
  line-height: 1.4;
}

.fba-doc-toolbar__btn:hover {
  background-color: var(--fba-primary-pale, #e8f4fd);
  color: var(--fba-primary-dark, #155a96);
}

.fba-doc-toolbar__btn:focus-visible {
  outline: 2px solid var(--fba-primary, #1e73be);
  outline-offset: -1px;
}

.fba-doc-toolbar__btn:disabled {
  opacity: 0.5;
  cursor: wait;
}


/* ---- Inline Document Actions Bar (Print & PDF) ---- */

.fba-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fba-space-md, 16px);
  align-items: center;
  padding: var(--fba-space-sm, 12px) 0;
  margin-bottom: var(--fba-space-md, 16px);
  border-bottom: 1px solid var(--fba-gray-200, #e5e7eb);
}

.fba-doc-actions__group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fba-doc-actions__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fba-gray-500, #6b7280);
  margin-right: 4px;
  white-space: nowrap;
}

.fba-doc-actions__btn {
  padding: 4px 12px;
  border: 1px solid var(--fba-gray-300, #d1d5db);
  background: var(--fba-white, #fff);
  border-radius: var(--fba-radius-sm, 4px);
  font-size: 12px;
  font-weight: 500;
  color: var(--fba-gray-600, #4b5563);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  font-family: var(--fba-font-en, 'Roboto', sans-serif);
  line-height: 1.4;
}

.fba-doc-actions__btn:hover {
  border-color: var(--fba-primary, #1e73be);
  color: var(--fba-primary, #1e73be);
  background-color: var(--fba-primary-pale, #e8f4fd);
}

.fba-doc-actions__btn:focus-visible {
  outline: 2px solid var(--fba-primary, #1e73be);
  outline-offset: 1px;
}

.fba-doc-actions__btn:disabled {
  opacity: 0.5;
  cursor: wait;
}


/* ==========================================================================
   16. Navigation - Search Bar
   ========================================================================== */

.fba-search {
  position: relative;
  margin: var(--fba-space-lg) 0;
}

.fba-search__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.fba-search__input {
  width: 100%;
  padding: var(--fba-space-sm) var(--fba-space-md);
  padding-left: var(--fba-space-xl);
  padding-right: var(--fba-space-3xl);
  border: 2px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-full);
  font-family: var(--fba-font-en);
  font-size: var(--fba-font-size-base);
  color: var(--fba-gray-800);
  background-color: var(--fba-white);
  transition: border-color var(--fba-transition-fast), box-shadow var(--fba-transition-fast);
  outline: none;
}

.fba-search__input::placeholder {
  color: var(--fba-gray-400);
}

.fba-search__input:focus {
  border-color: var(--fba-primary);
  box-shadow: 0 0 0 3px rgba(30, 115, 190, 0.15);
}

.fba-search__icon {
  position: absolute;
  left: var(--fba-space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--fba-gray-400);
}

/* Search icon via CSS */
.fba-search__icon::before {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.fba-search__icon::after {
  content: '';
  display: block;
  width: 5px;
  height: 2px;
  background: currentColor;
  position: absolute;
  bottom: 1px;
  right: 0;
  transform: rotate(45deg);
  border-radius: 1px;
}

.fba-search__submit {
  position: absolute;
  right: var(--fba-space-xs);
  top: 50%;
  transform: translateY(-50%);
  padding: var(--fba-space-xs) var(--fba-space-md);
  background-color: var(--fba-primary);
  color: var(--fba-white);
  border: none;
  border-radius: var(--fba-radius-full);
  font-size: var(--fba-font-size-sm);
  font-weight: var(--fba-font-weight-medium);
  cursor: pointer;
  transition: background-color var(--fba-transition-fast);
  font-family: var(--fba-font-en);
}

.fba-search__submit:hover {
  background-color: var(--fba-primary-dark);
}

/* ---- Search Results Dropdown ---- */
.fba-search__results {
  position: absolute;
  top: calc(100% + var(--fba-space-xs));
  left: 0;
  right: 0;
  background-color: var(--fba-white);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-md);
  box-shadow: var(--fba-shadow-lg);
  z-index: var(--fba-z-dropdown);
  max-height: 400px;
  overflow-y: auto;
  display: none;
}

.fba-search__results--active {
  display: block;
}

.fba-search__result-item {
  display: block;
  padding: var(--fba-space-sm) var(--fba-space-md);
  border-bottom: 1px solid var(--fba-gray-100);
  text-decoration: none;
  transition: background-color var(--fba-transition-fast);
}

.fba-search__result-item:last-child {
  border-bottom: none;
}

.fba-search__result-item:hover {
  background-color: var(--fba-primary-pale);
  text-decoration: none;
}

.fba-search__result-section {
  font-size: var(--fba-font-size-xs);
  color: var(--fba-primary);
  font-weight: var(--fba-font-weight-medium);
}

.fba-search__result-title {
  font-size: var(--fba-font-size-sm);
  color: var(--fba-gray-800);
  font-weight: var(--fba-font-weight-medium);
}

.fba-search__result-snippet {
  font-size: var(--fba-font-size-xs);
  color: var(--fba-gray-500);
  margin-top: 2px;
}

.fba-search__result-snippet mark {
  background-color: var(--fba-accent-amber-light);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}


/* ==========================================================================
   17. Animations & Transitions
   ========================================================================== */

/* ---- Smooth Scroll ---- */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fba-plugin *,
  .fba-plugin *::before,
  .fba-plugin *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Fade In ---- */
@keyframes fbaFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fba-animate-in {
  animation: fbaFadeIn 400ms ease forwards;
}

/* ---- Card grids: visible by default, no opacity animation ---- */
/* Cards are always visible to prevent invisible-card bugs with CSS combiners */
.fba-card-grid .fba-card {
  opacity: 1;
}

/* ---- Pulse for active indicators ---- */
@keyframes fbaPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.fba-pulse {
  animation: fbaPulse 2s ease-in-out infinite;
}

/* ---- Skeleton Loading ---- */
@keyframes fbaSkeleton {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.fba-skeleton {
  background: linear-gradient(90deg, var(--fba-gray-100) 0px, var(--fba-gray-50) 50px, var(--fba-gray-100) 100px);
  background-size: 200px 100%;
  animation: fbaSkeleton 1.5s ease-in-out infinite;
  border-radius: var(--fba-radius-sm);
}


/* ==========================================================================
   18. Responsive - Tablet (max-width: 1024px)
   ========================================================================== */

@media screen and (max-width: 1024px) {
  :root {
    --fba-sidebar-width: 240px;
    --fba-content-gap: 24px;
  }

  .fba-hero__title {
    font-size: 2.25rem;
  }

  .fba-hero__title-th {
    font-size: 1.625rem;
  }

  .fba-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--fba-space-md);
  }

  .fba-bilingual {
    gap: var(--fba-space-md);
  }

  .fba-section-pair {
    gap: var(--fba-space-md);
  }
}


/* ==========================================================================
   18b. Breadcrumb (template variant .fba-breadcrumb)
   ========================================================================== */

.fba-breadcrumb {
  padding: var(--fba-space-md) 0;
  font-size: var(--fba-font-size-sm);
  color: var(--fba-gray-400);
  margin-bottom: var(--fba-space-md);
}

.fba-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fba-space-xxs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.fba-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--fba-space-xxs);
}

.fba-breadcrumb__item::after {
  content: '\203A';
  color: var(--fba-gray-300);
  margin-left: var(--fba-space-xs);
  font-size: 1.1em;
}

.fba-breadcrumb__item:last-child::after {
  content: none;
}

.fba-breadcrumb__item a {
  color: var(--fba-primary);
  text-decoration: none;
  transition: color var(--fba-transition-fast);
}

.fba-breadcrumb__item a:hover {
  color: var(--fba-primary-dark);
  text-decoration: underline;
}

.fba-breadcrumb__item--current {
  color: var(--fba-gray-700);
  font-weight: var(--fba-font-weight-medium);
}


/* ==========================================================================
   18c. Single Section Page Layout
   ========================================================================== */

.fba-single-wrap {
  max-width: var(--fba-container-max);
  margin: 0 auto;
  padding: var(--fba-space-lg) var(--fba-space-lg) var(--fba-space-xxl);
}

.fba-single-layout {
  display: flex;
  gap: var(--fba-content-gap);
  align-items: flex-start;
}

.fba-single-content {
  flex: 1;
  min-width: 0;
}

.fba-section__header {
  margin-bottom: var(--fba-space-xl);
}

.fba-section__title {
  font-size: 1.75rem;
  font-weight: var(--fba-font-weight-bold);
  color: var(--fba-gray-900);
  line-height: var(--fba-line-height-heading);
  margin-bottom: var(--fba-space-sm);
}

.fba-section__summary {
  color: var(--fba-gray-600);
  font-size: var(--fba-font-size-lg);
  line-height: 1.6;
}

/* ---- Section Badge (BEM variant) ---- */
.fba-section__badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--fba-primary) 0%, var(--fba-primary-dark) 100%);
  color: var(--fba-white);
  font-size: var(--fba-font-size-xs);
  font-weight: var(--fba-font-weight-bold);
  padding: 3px var(--fba-space-sm);
  border-radius: var(--fba-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--fba-space-sm);
}

/* ---- Section body & bilingual text ---- */
.fba-section__body {
  margin-bottom: var(--fba-space-xl);
}

.fba-section__text {
  line-height: 1.7;
  color: var(--fba-gray-800);
}

.fba-section__text--thai {
  font-family: var(--fba-font-th);
  line-height: var(--fba-line-height-th);
}

.fba-section__text--english {
  line-height: var(--fba-line-height-en);
}

/* ---- Section Navigation (prev/next) ---- */
.fba-section-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--fba-space-md);
  margin-top: var(--fba-space-xxl);
  padding-top: var(--fba-space-xl);
  border-top: 1px solid var(--fba-gray-200);
}

.fba-section-nav__link {
  display: flex;
  align-items: center;
  gap: var(--fba-space-xs);
  color: var(--fba-primary);
  text-decoration: none;
  font-weight: var(--fba-font-weight-medium);
  padding: var(--fba-space-sm) var(--fba-space-md);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-md);
  transition: all var(--fba-transition-base);
  max-width: 45%;
}

.fba-section-nav__link:hover {
  border-color: var(--fba-primary);
  background-color: var(--fba-primary-pale);
  text-decoration: none;
}

.fba-section-nav__link--next {
  text-align: right;
  margin-left: auto;
}

.fba-section-nav__spacer {
  flex: 1;
}

.fba-section-nav__hub {
  display: flex;
  align-items: center;
  gap: var(--fba-space-xs);
  color: var(--fba-gray-600);
  text-decoration: none;
  font-size: var(--fba-font-size-sm);
  padding: var(--fba-space-sm) var(--fba-space-md);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-md);
  transition: all var(--fba-transition-base);
}

.fba-section-nav__hub:hover {
  border-color: var(--fba-primary);
  color: var(--fba-primary);
}


/* ==========================================================================
   18c-ii. Quick Navigation Bar
   ========================================================================== */

.fba-quick-nav {
  display: flex;
  align-items: center;
  gap: var(--fba-space-sm);
  padding: var(--fba-space-sm) 0;
  margin-bottom: var(--fba-space-md);
  border-bottom: 1px solid var(--fba-gray-200);
  flex-wrap: wrap;
}

.fba-quick-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--fba-space-xxs);
  padding: var(--fba-space-xs) var(--fba-space-md);
  font-size: var(--fba-font-size-sm);
  font-weight: var(--fba-font-weight-medium);
  color: var(--fba-primary);
  background-color: var(--fba-primary-pale);
  border-radius: var(--fba-radius-full);
  text-decoration: none;
  transition: all var(--fba-transition-fast);
}

.fba-quick-nav__link:hover {
  background-color: var(--fba-primary);
  color: var(--fba-white);
  text-decoration: none;
}

/* ==========================================================================
   18c-iii. Inline Search Widget
   ========================================================================== */

.fba-inline-search {
  margin-bottom: var(--fba-space-lg);
}

.fba-inline-search__form {
  display: flex;
  gap: 0;
  max-width: 600px;
}

.fba-inline-search__input {
  flex: 1;
  padding: var(--fba-space-sm) var(--fba-space-md);
  font-size: var(--fba-font-size-base);
  border: 2px solid var(--fba-gray-300);
  border-right: none;
  border-radius: var(--fba-radius-md) 0 0 var(--fba-radius-md);
  outline: none;
  transition: border-color var(--fba-transition-fast);
  font-family: var(--fba-font-en);
}

.fba-inline-search__input:focus {
  border-color: var(--fba-primary);
}

.fba-inline-search__btn {
  padding: var(--fba-space-sm) var(--fba-space-lg);
  background-color: var(--fba-primary);
  color: var(--fba-white);
  border: 2px solid var(--fba-primary);
  border-radius: 0 var(--fba-radius-md) var(--fba-radius-md) 0;
  font-size: var(--fba-font-size-base);
  font-weight: var(--fba-font-weight-medium);
  cursor: pointer;
  transition: background-color var(--fba-transition-fast);
  font-family: var(--fba-font-en);
}

.fba-inline-search__btn:hover {
  background-color: var(--fba-primary-dark);
  border-color: var(--fba-primary-dark);
}

/* ==========================================================================
   18c-iv. Section Content Summary
   ========================================================================== */

.fba-section-content__summary {
  font-size: var(--fba-font-size-lg);
  color: var(--fba-gray-600);
  line-height: 1.6;
  margin-bottom: var(--fba-space-xl);
  padding: var(--fba-space-md);
  background-color: var(--fba-gray-50);
  border-left: 4px solid var(--fba-primary);
  border-radius: 0 var(--fba-radius-md) var(--fba-radius-md) 0;
}


/* ==========================================================================
   18c-v. Search Results Styling
   ========================================================================== */

.fba-search__form {
  display: flex;
  gap: var(--fba-space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--fba-space-lg);
}

.fba-search__field-group {
  display: flex;
  gap: var(--fba-space-sm);
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}

.fba-search__input {
  flex: 1;
  min-width: 200px;
  padding: var(--fba-space-sm) var(--fba-space-md);
  font-size: var(--fba-font-size-base);
  border: 2px solid var(--fba-gray-300);
  border-radius: var(--fba-radius-md);
  outline: none;
  transition: border-color var(--fba-transition-fast);
  font-family: var(--fba-font-en);
}

.fba-search__input:focus {
  border-color: var(--fba-primary);
}

.fba-search__select {
  padding: var(--fba-space-sm) var(--fba-space-md);
  border: 2px solid var(--fba-gray-300);
  border-radius: var(--fba-radius-md);
  font-size: var(--fba-font-size-sm);
  background-color: var(--fba-white);
  cursor: pointer;
  font-family: var(--fba-font-en);
}

.fba-search__message {
  padding: var(--fba-space-lg);
  text-align: center;
  color: var(--fba-gray-500);
  font-size: var(--fba-font-size-lg);
}

.fba-search__loading {
  color: var(--fba-primary);
}

.fba-search__error {
  color: var(--fba-accent-red);
}

.fba-search__result-count {
  font-weight: var(--fba-font-weight-medium);
  color: var(--fba-gray-700);
  margin-bottom: var(--fba-space-lg);
  padding-bottom: var(--fba-space-sm);
  border-bottom: 1px solid var(--fba-gray-200);
}

.fba-search__result-list {
  display: flex;
  flex-direction: column;
  gap: var(--fba-space-md);
}

.fba-search__result-card {
  background-color: var(--fba-white);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-lg);
  padding: var(--fba-space-lg);
  transition: border-color var(--fba-transition-base), box-shadow var(--fba-transition-base);
}

.fba-search__result-card:hover {
  border-color: var(--fba-primary-light);
  box-shadow: var(--fba-shadow-md);
}

.fba-search__result-title {
  margin: 0 0 var(--fba-space-xs);
  font-size: 1.125rem;
}

.fba-search__result-title a {
  color: var(--fba-primary);
  text-decoration: none;
}

.fba-search__result-title a:hover {
  text-decoration: underline;
}

.fba-search__result-summary {
  color: var(--fba-gray-600);
  font-size: var(--fba-font-size-sm);
  margin-bottom: var(--fba-space-sm);
  line-height: 1.6;
}

.fba-search__result-link {
  display: inline-block;
  color: var(--fba-primary);
  font-size: var(--fba-font-size-sm);
  font-weight: var(--fba-font-weight-medium);
  text-decoration: none;
}

.fba-search__result-link:hover {
  text-decoration: underline;
}

/* ---- Hide YARPP "Related Posts" on FBA plugin pages ---- */
.fba-plugin ~ .yarpp-related,
.fba-plugin ~ .yarpp,
.fba-search ~ .yarpp-related,
.fba-search ~ .yarpp {
  display: none !important;
}

/* Also hide YARPP when it appears anywhere inside the FBA context */
.fba-plugin .yarpp-related,
.fba-plugin .yarpp {
  display: none !important;
}

/* Hide YARPP on the specific FBA search & hub pages */
body.page-template-default .fba-plugin + .yarpp-related,
body.page .fba-plugin + .yarpp-related {
  display: none !important;
}


/* ==========================================================================
   18d. Archive Page Layout
   ========================================================================== */

.fba-archive-wrap {
  max-width: var(--fba-container-max);
  margin: 0 auto;
  padding: var(--fba-space-xl) var(--fba-space-lg) var(--fba-space-xxl);
}

.fba-archive__header {
  text-align: center;
  margin-bottom: var(--fba-space-xxl);
}

.fba-archive__title {
  font-size: 2.25rem;
  font-weight: var(--fba-font-weight-bold);
  color: var(--fba-gray-900);
  margin-bottom: var(--fba-space-xs);
}

.fba-archive__subtitle {
  font-family: var(--fba-font-th);
  font-size: var(--fba-font-size-lg);
  color: var(--fba-gray-500);
  line-height: var(--fba-line-height-th);
  margin-bottom: var(--fba-space-md);
}

.fba-archive__desc {
  max-width: 700px;
  margin: 0 auto;
  color: var(--fba-gray-600);
  line-height: 1.7;
}

/* ---- Chapter grouping ---- */
.fba-archive__chapter {
  margin-bottom: var(--fba-space-xxl);
  scroll-margin-top: 80px;
}

.fba-archive__chapter-title {
  font-size: 1.5rem;
  color: var(--fba-gray-900);
  padding-bottom: var(--fba-space-sm);
  border-bottom: 3px solid var(--fba-primary);
  margin-bottom: var(--fba-space-sm);
}

.fba-archive__chapter-desc {
  color: var(--fba-gray-600);
  font-size: var(--fba-font-size-sm);
  margin-bottom: var(--fba-space-lg);
  line-height: 1.6;
}

/* ---- Section cards ---- */
.fba-archive__sections {
  display: flex;
  flex-direction: column;
  gap: var(--fba-space-md);
}

.fba-archive__section-card {
  background-color: var(--fba-white);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-lg);
  padding: var(--fba-space-lg);
  transition: border-color var(--fba-transition-base),
              box-shadow var(--fba-transition-base);
}

.fba-archive__section-card:hover {
  border-color: var(--fba-primary-light);
  box-shadow: var(--fba-shadow-md);
}

.fba-archive__section-header {
  display: flex;
  align-items: center;
  gap: var(--fba-space-sm);
  margin-bottom: var(--fba-space-sm);
  flex-wrap: wrap;
}

.fba-archive__section-title {
  font-size: 1.125rem;
  font-weight: var(--fba-font-weight-semi);
  margin: 0;
}

.fba-archive__section-title a {
  color: var(--fba-gray-900);
  text-decoration: none;
  transition: color var(--fba-transition-fast);
}

.fba-archive__section-title a:hover {
  color: var(--fba-primary);
}

.fba-archive__section-summary {
  color: var(--fba-gray-600);
  font-size: var(--fba-font-size-sm);
  margin-bottom: var(--fba-space-md);
  line-height: 1.6;
}

.fba-archive__section-preview {
  margin-bottom: var(--fba-space-md);
}

.fba-archive__text-preview {
  font-size: var(--fba-font-size-sm);
  color: var(--fba-gray-600);
  line-height: 1.6;
}

.fba-archive__section-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--fba-space-sm);
  border-top: 1px solid var(--fba-gray-100);
}

.fba-archive__section-tags {
  display: flex;
  gap: var(--fba-space-xs);
  flex-wrap: wrap;
}

/* ---- Archive CTA block ---- */
.fba-archive__cta {
  display: flex;
  justify-content: center;
  gap: var(--fba-space-md);
  margin-top: var(--fba-space-xxl);
  padding-top: var(--fba-space-xl);
  border-top: 1px solid var(--fba-gray-200);
  flex-wrap: wrap;
}

.fba-archive__empty {
  text-align: center;
  color: var(--fba-gray-500);
  padding: var(--fba-space-xxl) 0;
  font-size: var(--fba-font-size-lg);
}


/* ==========================================================================
   18e. Button Components (.fba-btn)
   ========================================================================== */

.fba-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fba-space-xs);
  padding: var(--fba-space-sm) var(--fba-space-xl);
  font-family: var(--fba-font-en);
  font-size: var(--fba-font-size-base);
  font-weight: var(--fba-font-weight-medium);
  border-radius: var(--fba-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--fba-transition-base);
  line-height: 1.4;
}

.fba-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--fba-shadow-md);
}

.fba-btn--primary {
  background-color: var(--fba-primary);
  color: var(--fba-white);
  border-color: var(--fba-primary);
}

.fba-btn--primary:hover {
  background-color: var(--fba-primary-dark);
  border-color: var(--fba-primary-dark);
  color: var(--fba-white);
}

.fba-btn--secondary {
  background-color: transparent;
  color: var(--fba-primary);
  border-color: var(--fba-primary);
}

.fba-btn--secondary:hover {
  background-color: var(--fba-primary);
  color: var(--fba-white);
}

.fba-btn--small {
  padding: var(--fba-space-xs) var(--fba-space-md);
  font-size: var(--fba-font-size-sm);
  border-radius: var(--fba-radius-sm);
}


/* ==========================================================================
   18f. Tag Components (.fba-tag)
   ========================================================================== */

.fba-tag {
  display: inline-block;
  padding: 2px var(--fba-space-sm);
  font-size: var(--fba-font-size-xs);
  font-weight: var(--fba-font-weight-medium);
  border-radius: var(--fba-radius-full);
  line-height: 1.5;
}

.fba-tag--court {
  background-color: var(--fba-accent-green-light);
  color: var(--fba-accent-green-border);
}

.fba-tag--commentary {
  background-color: var(--fba-primary-pale);
  color: var(--fba-primary-dark);
}

.fba-tag--amendment {
  background-color: var(--fba-accent-amber-light);
  color: var(--fba-accent-amber-border);
}


/* ==========================================================================
   18g. Annotation Variants & Court Decision Cards
   ========================================================================== */

/* ---- Cross-Reference Annotations (purple) ---- */
.fba-annotation--reference {
  background-color: var(--fba-accent-purple-light);
  border-left-color: var(--fba-accent-purple);
}

.fba-annotation--reference .fba-annotation__label {
  color: var(--fba-accent-purple);
}

/* ---- Practical Notes Annotations (amber) ---- */
.fba-annotation--practical {
  background-color: var(--fba-accent-amber-light);
  border-left-color: var(--fba-accent-amber);
}

.fba-annotation--practical .fba-annotation__label {
  color: var(--fba-accent-amber-border);
}

/* ---- Court Decision Cards ---- */
.fba-court-decision__card {
  background-color: var(--fba-white);
  border: 1px solid var(--fba-gray-200);
  border-radius: var(--fba-radius-md);
  padding: var(--fba-space-md) var(--fba-space-lg);
  margin-bottom: var(--fba-space-sm);
}

.fba-court-decision__card:last-child {
  margin-bottom: 0;
}

/* ---- Cross-Reference Links List ---- */
.fba-cross-refs__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fba-cross-refs__list li {
  padding: var(--fba-space-xs) 0;
  border-bottom: 1px solid var(--fba-gray-100);
}

.fba-cross-refs__list li:last-child {
  border-bottom: none;
}

.fba-cross-refs__list a {
  color: var(--fba-primary);
  text-decoration: none;
}

.fba-cross-refs__list a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   19. Responsive - Mobile (max-width: 768px)
   ========================================================================== */

@media screen and (max-width: 768px) {

  /* Layout: stack sidebar below content or hide */
  .fba-layout {
    flex-direction: column;
    gap: var(--fba-space-lg);
    padding: var(--fba-space-md);
  }

  .fba-sidebar {
    position: static;
    flex: none;
    width: 100%;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    order: -1;
  }

  .fba-toc {
    max-height: 200px;
    overflow-y: auto;
    transition: max-height var(--fba-transition-smooth);
  }

  .fba-toc--expanded {
    max-height: 2000px;
  }

  /* Container padding */
  .fba-container {
    padding-left: var(--fba-space-md);
    padding-right: var(--fba-space-md);
  }

  /* Hero */
  .fba-hero {
    padding: var(--fba-space-xxl) 0 var(--fba-space-xl);
  }

  .fba-hero__title {
    font-size: 1.75rem;
  }

  .fba-hero__title-th {
    font-size: 1.375rem;
  }

  .fba-hero__subtitle {
    font-size: var(--fba-font-size-base);
  }

  .fba-hero__meta {
    flex-direction: column;
    gap: var(--fba-space-sm);
  }

  /* Headings */
  .fba-plugin h1, .fba-plugin .fba-h1 { font-size: 1.75rem; }
  .fba-plugin h2, .fba-plugin .fba-h2 { font-size: 1.375rem; }
  .fba-plugin h3, .fba-plugin .fba-h3 { font-size: 1.125rem; }

  /* Card grid */
  .fba-card-grid {
    grid-template-columns: 1fr;
  }

  /* Bilingual: stack columns, show language toggle */
  .fba-lang-toggle {
    display: flex;
  }

  .fba-bilingual {
    flex-direction: column;
    gap: 0;
  }

  .fba-bilingual__divider {
    display: none;
  }

  .fba-section-pair {
    flex-direction: column;
    gap: 0;
  }

  /* Section navigation */
  .fba-section-nav {
    flex-direction: column;
    gap: var(--fba-space-sm);
  }

  .fba-section-nav__link {
    max-width: 100%;
  }

  .fba-section-nav__link--next {
    align-items: flex-start;
    text-align: left;
  }

  /* Annotations */
  .fba-annotation {
    margin-left: 0;
    margin-right: 0;
  }

  /* Subsections */
  .fba-subsection {
    margin-left: var(--fba-space-sm);
    padding-left: var(--fba-space-sm);
  }

  /* Search */
  .fba-search__submit {
    padding: var(--fba-space-xs) var(--fba-space-sm);
    font-size: var(--fba-font-size-xs);
  }

  /* Back to top */
  .fba-back-to-top {
    right: var(--fba-space-md);
    bottom: var(--fba-space-md);
    width: 40px;
    height: 40px;
  }

  /* Document toolbar: reposition on mobile */
  .fba-doc-toolbar {
    bottom: var(--fba-space-sm);
    left: var(--fba-space-sm);
  }

  .fba-doc-toolbar__panel {
    min-width: 200px;
    left: 0;
  }

  /* Inline action bar: stack vertically */
  .fba-doc-actions {
    flex-direction: column;
    gap: var(--fba-space-xs);
  }

  .fba-doc-actions__group {
    flex-wrap: wrap;
  }

  /* Breadcrumbs */
  .fba-breadcrumbs {
    font-size: var(--fba-font-size-xs);
  }

  /* Historical */
  .fba-historical__item {
    padding: var(--fba-space-md);
  }

  .fba-historical__title {
    font-size: 1rem;
  }

  /* FAQ */
  .fba-faq__question {
    padding: var(--fba-space-sm) var(--fba-space-md);
    font-size: var(--fba-font-size-sm);
  }

  .fba-faq__answer-inner {
    padding: 0 var(--fba-space-md) var(--fba-space-md);
  }

  /* ---- Single section layout: stack on mobile ---- */
  .fba-single-layout {
    flex-direction: column;
  }

  .fba-single-wrap {
    padding: var(--fba-space-md);
  }

  .fba-section__title {
    font-size: 1.375rem;
  }

  .fba-section-nav {
    flex-direction: column;
    gap: var(--fba-space-sm);
  }

  .fba-section-nav__link {
    max-width: 100%;
  }

  .fba-section-nav__link--next {
    text-align: left;
  }

  /* ---- Archive: adjust spacing on mobile ---- */
  .fba-archive-wrap {
    padding: var(--fba-space-md);
  }

  .fba-archive__title {
    font-size: 1.75rem;
  }

  .fba-archive__section-footer {
    flex-direction: column;
    gap: var(--fba-space-sm);
    align-items: flex-start;
  }

  .fba-archive__cta {
    flex-direction: column;
    align-items: stretch;
  }

  /* ---- Breadcrumb: smaller on mobile ---- */
  .fba-breadcrumb {
    font-size: var(--fba-font-size-xs);
  }

  /* ---- Quick nav: wrap on mobile ---- */
  .fba-quick-nav {
    gap: var(--fba-space-xs);
  }

  .fba-quick-nav__link {
    font-size: var(--fba-font-size-xs);
    padding: var(--fba-space-xxs) var(--fba-space-sm);
  }

  /* ---- Inline search: full width ---- */
  .fba-inline-search__form {
    flex-direction: column;
  }

  .fba-inline-search__input {
    border-right: 2px solid var(--fba-gray-300);
    border-radius: var(--fba-radius-md);
  }

  .fba-inline-search__input:focus {
    border-color: var(--fba-primary);
  }

  .fba-inline-search__btn {
    border-radius: var(--fba-radius-md);
  }

  /* ---- Search form: stack on mobile ---- */
  .fba-search__field-group {
    flex-direction: column;
  }

  .fba-search__input {
    min-width: auto;
    width: 100%;
  }

  /* ---- Disclaimer: smaller padding ---- */
  .fba-disclaimer {
    padding: var(--fba-space-sm) 0;
  }

  .fba-disclaimer__icon svg {
    width: 20px;
    height: 20px;
  }

  .fba-disclaimer__text {
    font-size: var(--fba-font-size-xs);
  }

  /* ---- Tables: card reflow on mobile ---- */
  .fba-table-section h2 {
    font-size: 1.25rem;
  }

  .fba-table-wrap {
    border-radius: var(--fba-radius-md);
    margin: var(--fba-space-md) 0;
    overflow-x: visible;
    border: none;
    box-shadow: none;
    background-color: transparent;
  }

  .fba-table {
    min-width: 0;
  }

  .fba-table__caption {
    padding: var(--fba-space-sm) 0;
    font-size: var(--fba-font-size-xs);
  }

  /* Hide table head */
  .fba-table__head {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Each row becomes a card */
  .fba-table__body .fba-table__row {
    display: block;
    border: 1px solid var(--fba-gray-200);
    border-radius: var(--fba-radius-md);
    padding: 0;
    margin-bottom: var(--fba-space-md);
    background-color: var(--fba-white);
    box-shadow: var(--fba-shadow-sm);
  }

  .fba-table__body .fba-table__row:hover {
    background-color: var(--fba-white);
  }

  /* Each cell becomes a row in the card */
  .fba-table__cell,
  .fba-table__body .fba-table__cell--header {
    display: block;
    text-align: left;
    padding: var(--fba-space-sm) var(--fba-space-md);
    border-bottom: 1px solid var(--fba-gray-100);
    background-color: transparent;
  }

  .fba-table__cell:last-child,
  .fba-table__body .fba-table__cell--header:last-child {
    border-bottom: none;
  }

  /* Row header becomes card header */
  .fba-table__body .fba-table__cell--header {
    background-color: var(--fba-primary-pale);
    font-weight: 600;
    font-size: var(--fba-font-size-sm);
    border-radius: var(--fba-radius-md) var(--fba-radius-md) 0 0;
    border-bottom: 2px solid var(--fba-primary-lighter);
  }

  /* Data-label shown via ::before */
  .fba-table__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: var(--fba-font-size-xs);
    color: var(--fba-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--fba-space-xxs);
  }

  /* List accent colors on card header instead of border-top */
  .fba-table__cell--list-one,
  .fba-table__cell--list-two,
  .fba-table__cell--list-three {
    border-top: none;
  }

  .fba-table__row--header .fba-table__cell--list-one {
    border-left: 3px solid var(--fba-accent-red);
  }

  .fba-table__row--header .fba-table__cell--list-two {
    border-left: 3px solid var(--fba-accent-amber);
  }

  .fba-table__row--header .fba-table__cell--list-three {
    border-left: 3px solid var(--fba-accent-green);
  }

  /* Zebra on cards */
  .fba-table__body .fba-table__row:nth-child(even) {
    background-color: var(--fba-white);
  }

  .fba-table__body .fba-table__row:nth-child(even) .fba-table__cell--header {
    background-color: var(--fba-gray-50);
  }
}


/* ==========================================================================
   20. Responsive - Small Mobile (max-width: 480px)
   ========================================================================== */

@media screen and (max-width: 480px) {

  :root {
    --fba-font-size-base: 15px;
  }

  .fba-hero {
    padding: var(--fba-space-xl) 0;
  }

  .fba-hero__title {
    font-size: 1.5rem;
  }

  .fba-hero__title-th {
    font-size: 1.2rem;
  }

  .fba-hero__badge {
    font-size: 10px;
  }

  .fba-hero__cta {
    padding: var(--fba-space-sm) var(--fba-space-lg);
    font-size: var(--fba-font-size-sm);
  }

  .fba-container {
    padding-left: var(--fba-space-sm);
    padding-right: var(--fba-space-sm);
  }

  .fba-plugin h1, .fba-plugin .fba-h1 { font-size: 1.5rem; }
  .fba-plugin h2, .fba-plugin .fba-h2 { font-size: 1.25rem; }
  .fba-plugin h3, .fba-plugin .fba-h3 { font-size: 1.05rem; }

  .fba-section-badge {
    min-width: 28px;
    height: 24px;
    font-size: var(--fba-font-size-xs);
  }

  .fba-annotation {
    padding: var(--fba-space-sm) var(--fba-space-md);
  }

  .fba-annotation--court {
    padding-left: calc(var(--fba-space-md) + 24px);
  }

  .fba-lang-toggle {
    width: 100%;
  }

  .fba-lang-toggle__btn {
    flex: 1;
    text-align: center;
  }

  .fba-business-list__item {
    padding-left: calc(var(--fba-space-lg) + var(--fba-space-xs));
    font-size: var(--fba-font-size-xs);
  }

  .fba-keyword-tags {
    gap: var(--fba-space-xxs);
  }

  .fba-keyword-tag {
    font-size: 10px;
  }

  /* ---- Disclaimer: stack icon above text ---- */
  .fba-disclaimer__inner {
    flex-direction: column;
    gap: var(--fba-space-sm);
    align-items: flex-start;
  }

  .fba-disclaimer__icon svg {
    width: 18px;
    height: 18px;
  }

  .fba-disclaimer__text {
    font-size: 12px;
    line-height: 1.5;
  }

  /* ---- Tables: tighter card spacing ---- */
  .fba-table-section {
    padding: var(--fba-space-xl) 0;
  }

  .fba-table-section h2 {
    font-size: 1.125rem;
    margin-bottom: var(--fba-space-md);
  }

  .fba-table__cell,
  .fba-table__body .fba-table__cell--header {
    padding: var(--fba-space-xs) var(--fba-space-sm);
    font-size: var(--fba-font-size-xs);
  }

  .fba-table__cell .fba-lang-th,
  .fba-table__cell--header .fba-lang-th {
    font-size: 0.8em;
  }

  .fba-table__cell[data-label]::before {
    font-size: 10px;
  }
}


/* ==========================================================================
   21. Print Styles
   ========================================================================== */

@media print {

  /* ---- Reset for print ---- */
  .fba-plugin,
  .fba-plugin *,
  .fba-plugin *::before,
  .fba-plugin *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* ---- Page settings ---- */
  @page {
    margin: 2cm;
    size: A4;
  }

  /* ---- Typography for print ---- */
  .fba-plugin {
    font-size: 11pt;
    line-height: 1.5;
  }

  .fba-plugin h1 { font-size: 18pt; }
  .fba-plugin h2 { font-size: 15pt; }
  .fba-plugin h3 { font-size: 13pt; }
  .fba-plugin h4 { font-size: 12pt; }

  .fba-text-th,
  .fba-plugin [lang="th"] {
    font-size: 12pt;
    line-height: 1.6;
  }

  /* ---- Links: show URLs ---- */
  .fba-plugin a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #555 !important;
    font-weight: normal;
  }

  .fba-plugin a[href^="#"]::after,
  .fba-plugin a[href^="javascript:"]::after {
    content: '';
  }

  /* ---- Bilingual: always show both columns stacked ---- */
  .fba-bilingual {
    flex-direction: column !important;
    gap: 12pt;
  }

  .fba-bilingual__divider {
    display: none !important;
  }

  .fba-section-pair {
    flex-direction: column !important;
    gap: 8pt;
  }

  /* ---- Language toggle hidden ---- */
  .fba-lang-toggle {
    display: none !important;
  }

  .fba-lang-hidden {
    display: block !important;
  }

  /* ---- Hide interactive elements ---- */
  .fba-hero,
  .fba-sidebar,
  .fba-back-to-top,
  .fba-search,
  .fba-section-nav,
  .fba-hero__cta,
  .fba-doc-toolbar,
  .fba-doc-actions,
  .fba-quick-nav,
  .fba-inline-search {
    display: none !important;
  }

  /* ---- Annotations: use borders only ---- */
  .fba-annotation {
    border: 1pt solid #999 !important;
    border-left: 3pt solid #333 !important;
    padding: 8pt 12pt !important;
    page-break-inside: avoid;
  }

  .fba-annotation--editorial {
    border-left-color: #1E73BE !important;
  }

  .fba-annotation--amendment {
    border-left-color: #D97706 !important;
  }

  .fba-annotation--court {
    border-left-color: #059669 !important;
  }

  .fba-annotation--penalty {
    border-left-color: #DC2626 !important;
  }

  .fba-annotation__label {
    font-size: 9pt;
  }

  /* ---- Page-break control ---- */
  .fba-section-header {
    page-break-after: avoid;
  }

  .fba-business-list__item {
    page-break-inside: avoid;
  }

  .fba-penalty {
    page-break-inside: avoid;
    border: 1pt solid #DC2626 !important;
    padding: 8pt 12pt !important;
  }

  .fba-definition {
    page-break-inside: avoid;
    border: 1pt solid #ccc !important;
    padding: 6pt 10pt !important;
  }

  .fba-card-grid {
    display: block !important;
  }

  .fba-card {
    page-break-inside: avoid;
    border: 1pt solid #ccc !important;
    margin-bottom: 8pt;
    padding: 8pt 12pt !important;
  }

  /* ---- FAQ: show all answers ---- */
  .fba-faq__answer {
    max-height: none !important;
    overflow: visible !important;
  }

  .fba-faq__icon {
    display: none !important;
  }

  .fba-faq__item {
    page-break-inside: avoid;
  }

  /* Native <details>: force all open when printing */
  details.fba-faq__item {
    display: block !important;
  }
  details.fba-faq__item > .fba-faq__answer-inner {
    display: block !important;
  }

  /* ---- Breadcrumbs: print path ---- */
  .fba-breadcrumbs,
  .fba-breadcrumb {
    font-size: 9pt;
    margin-bottom: 12pt;
    border-bottom: 0.5pt solid #ccc;
    padding-bottom: 6pt;
  }

  /* ---- Single-section / Archive: no padding needed ---- */
  .fba-single-wrap,
  .fba-archive-wrap {
    padding: 0;
    max-width: none;
  }

  .fba-archive__section-card {
    border: 0.5pt solid #ccc !important;
    page-break-inside: avoid;
  }

  .fba-archive__cta,
  .fba-archive__section-footer {
    display: none !important;
  }

  /* ---- Disclaimer: print with border ---- */
  .fba-disclaimer {
    border: 1pt solid #999 !important;
    border-top: 2pt solid #D97706 !important;
    padding: 8pt 12pt !important;
    page-break-inside: avoid;
    margin-bottom: 12pt;
  }

  .fba-disclaimer__inner {
    display: flex !important;
    gap: 8pt;
  }

  .fba-disclaimer__icon {
    display: none !important;
  }

  .fba-disclaimer__text {
    font-size: 9pt !important;
    line-height: 1.5 !important;
    color: #333 !important;
  }

  /* ---- Tables: force table display for print ---- */
  .fba-table-section {
    padding: 12pt 0 !important;
    page-break-inside: avoid;
  }

  .fba-table-section h2 {
    font-size: 13pt !important;
    text-align: left !important;
    margin-bottom: 8pt !important;
  }

  .fba-table-wrap {
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    margin: 6pt 0 !important;
  }

  .fba-table {
    min-width: 0 !important;
    font-size: 8pt !important;
    line-height: 1.4 !important;
    border-collapse: collapse !important;
  }

  .fba-table__caption {
    font-size: 8pt !important;
    padding: 4pt 0 !important;
    color: #555 !important;
    text-align: left !important;
  }

  /* Show table head in print (override mobile card reflow) */
  .fba-table__head {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: none !important;
  }

  .fba-table__row--header .fba-table__cell--header {
    background-color: #eee !important;
    color: #000 !important;
    border: 0.5pt solid #999 !important;
    padding: 4pt 6pt !important;
    font-size: 8pt !important;
    font-weight: 600;
  }

  /* Force table-row display (override mobile card reflow) */
  .fba-table__body .fba-table__row {
    display: table-row !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  .fba-table__cell,
  .fba-table__body .fba-table__cell--header {
    display: table-cell !important;
    border: 0.5pt solid #ccc !important;
    padding: 4pt 6pt !important;
    font-size: 8pt !important;
    vertical-align: top !important;
    background-color: transparent !important;
    border-radius: 0 !important;
  }

  .fba-table__body .fba-table__cell--header {
    background-color: #f5f5f5 !important;
    font-weight: 500;
  }

  /* Hide data-label in print */
  .fba-table__cell[data-label]::before {
    display: none !important;
  }

  /* Bilingual in print tables */
  .fba-table__cell .fba-lang-th,
  .fba-table__cell--header .fba-lang-th {
    display: block !important;
    font-size: 7pt !important;
    color: #555 !important;
    margin-top: 2pt;
  }

  .fba-table__cell .fba-lang-en,
  .fba-table__cell--header .fba-lang-en {
    display: block !important;
  }

  /* List accent colors: use left border in print */
  .fba-table__cell--list-one {
    border-top: none !important;
    border-left: 2pt solid #DC2626 !important;
  }

  .fba-table__cell--list-two {
    border-top: none !important;
    border-left: 2pt solid #D97706 !important;
  }

  .fba-table__cell--list-three {
    border-top: none !important;
    border-left: 2pt solid #059669 !important;
  }

  /* Penalties highlight in print */
  .fba-table--penalties .fba-table__cell--highlight {
    color: #DC2626 !important;
    font-weight: 600;
  }
}


/* ==========================================================================
   22. Accessibility & Focus States
   ========================================================================== */

/* ---- Focus visible ring ---- */
.fba-plugin a:focus-visible,
.fba-plugin button:focus-visible,
.fba-plugin input:focus-visible,
.fba-plugin select:focus-visible,
.fba-plugin textarea:focus-visible,
.fba-plugin [tabindex]:focus-visible {
  outline: 2px solid var(--fba-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Skip to content ---- */
.fba-skip-link {
  position: absolute;
  top: -100%;
  left: var(--fba-space-md);
  padding: var(--fba-space-xs) var(--fba-space-md);
  background-color: var(--fba-primary);
  color: var(--fba-white);
  font-size: var(--fba-font-size-sm);
  font-weight: var(--fba-font-weight-medium);
  border-radius: 0 0 var(--fba-radius-sm) var(--fba-radius-sm);
  z-index: var(--fba-z-toast);
  text-decoration: none;
  transition: top var(--fba-transition-fast);
}

.fba-skip-link:focus {
  top: 0;
  color: var(--fba-white);
  text-decoration: none;
}

/* ---- High contrast mode support ---- */
@media (forced-colors: active) {
  .fba-section-badge,
  .fba-card__chapter-badge,
  .fba-lang-badge {
    border: 1px solid currentColor;
  }

  .fba-annotation {
    border: 2px solid currentColor;
  }

  .fba-back-to-top {
    border: 2px solid currentColor;
  }

  .fba-doc-toolbar__fab,
  .fba-doc-toolbar__panel {
    border: 2px solid currentColor;
  }

  .fba-doc-actions__btn {
    border: 1px solid currentColor;
  }
}

/* ---- Selection colors ---- */
.fba-plugin ::selection {
  background-color: var(--fba-primary-lighter);
  color: var(--fba-gray-900);
}


/* ==========================================================================
   23. WordPress Integration Overrides
   ========================================================================== */

/*
 * These overrides ensure the plugin styles do not clash with common
 * WordPress themes. All selectors are scoped to .fba-plugin to avoid
 * polluting the global namespace.
 */

/* Reset WordPress default margins on entry-content children */
.entry-content .fba-plugin h1,
.entry-content .fba-plugin h2,
.entry-content .fba-plugin h3,
.entry-content .fba-plugin h4,
.entry-content .fba-plugin h5,
.entry-content .fba-plugin h6 {
  margin-top: 0;
  padding-top: 0;
}

.entry-content .fba-plugin p {
  margin-top: 0;
}

.entry-content .fba-plugin ul,
.entry-content .fba-plugin ol {
  margin-left: 0;
  padding-left: 0;
}

/* Prevent WordPress image block styles from leaking in */
.entry-content .fba-plugin img {
  margin: 0;
}

/* Override WordPress blockquote styling */
.entry-content .fba-plugin blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--fba-space-lg);
  font-style: italic;
}

/* Ensure plugin links are not overridden by theme */
.entry-content .fba-plugin a {
  color: var(--fba-primary);
  text-decoration: none;
}

.entry-content .fba-plugin a:hover,
.entry-content .fba-plugin a:focus {
  color: var(--fba-primary-dark);
}

/* Fix for themes that set max-width on content areas */
.fba-plugin .fba-container {
  max-width: var(--fba-container-max);
  width: 100%;
}

/* Prevent Gutenberg block spacing from interfering */
.wp-block-group .fba-plugin,
.wp-block-columns .fba-plugin {
  margin-top: 0;
  margin-bottom: 0;
}

/* Override common theme button styles inside the plugin */
.fba-plugin button,
.fba-plugin .fba-hero__cta {
  letter-spacing: normal;
  text-transform: none;
}

/* WordPress admin bar spacing */
.admin-bar .fba-sidebar {
  top: calc(var(--fba-space-lg) + 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .fba-sidebar {
    top: calc(var(--fba-space-lg) + 46px);
  }
}

/* ---- End of Stylesheet ---- */