/* =========================================================
   KAWAN ELITE — GLOBAL FOUNDATION CSS
   ========================================================= */

:root {
  /* =======================================================
     COLOR TOKENS
     ======================================================= */
  --ke-green: #005f36;
  --ke-green-2: #007a48;
  --ke-green-3: #00a65e;
  --ke-green-soft: #eaf4ee;
  --ke-green-mid: #c0ddd0;
  --ke-green-dim: #6baf93;

  --ke-cream: #f4f8ff;
  --ke-cream-2: #e6ebf1;
  --ke-cream-3: #dce3ed;
  --ke-white: #ffffff;

  --ke-ink: #1a1916;
  --ke-ink-2: #2e2c29;
  --ke-ink-3: #4a4844;
  --ke-ink-4: #7a7873;
  --ke-ink-5: #a8a6a1;

  --ke-slate-deep: #0a2540;
  --ke-slate-mid: #0d3d40;
  --ke-slate-green: #0a3028;

  /* =======================================================
     SEMANTIC TOKENS
     ======================================================= */
  --color-primary: var(--ke-green);
  --color-primary-hover: var(--ke-green-2);
  --color-accent: var(--ke-green-3);

  --color-bg-page: var(--ke-white); /* overall page background */
  --color-bg-section: var(--ke-cream);
  --color-bg-section-alt: var(--ke-cream-2);
  --color-bg-tertiary: var(--ke-cream-3);
  --color-surface: var(--ke-white);

  --color-text-heading: var(--ke-ink);
  --color-text-title: var(--ke-ink-2);
  --color-text-body: var(--ke-ink-3);
  --color-text-muted: var(--ke-ink-4);
  --color-text-disabled: var(--ke-ink-5);

  --color-border: rgba(0, 0, 0, 0.07);
  --color-border-mid: rgba(0, 0, 0, 0.11);
  --color-focus-ring: rgba(0, 95, 54, 0.08);

  /* =======================================================
     GRADIENT TOKENS
     ======================================================= */
  --ke-cta-grad: linear-gradient(135deg, #005f36 0%, #007a48 55%, #00a65e 100%);
  --ke-hero-grad: linear-gradient(135deg, #0a2540 0%, #0d3d40 45%, #0a3028 100%);
  --ke-metric-grad: linear-gradient(135deg, #7edbb0 0%, #ffffff 100%);
  --ke-star-metric-grad: linear-gradient(135deg, #a5f3c4 0%, #00e87a 100%);

  /* =======================================================
     FONT TOKENS
     ======================================================= */
  --font-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* =======================================================
     SPACING SCALE
     ======================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-22: 88px;
  --space-32: 128px;

  /* =======================================================
     BORDER RADIUS SCALE
     ======================================================= */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-pill: 100px;

  /* =======================================================
     SHADOW SCALE
     ======================================================= */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14);

  --shadow-green-sm: 0 4px 16px rgba(0, 95, 54, 0.07);
  --shadow-green-md: 0 8px 32px rgba(0, 95, 54, 0.12);

  --ke-cta-shadow: 0 2px 8px rgba(0, 95, 54, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --ke-cta-shadow-lg: 0 2px 10px rgba(0, 95, 54, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --ke-cta-shadow-hov: 0 4px 16px rgba(0, 95, 54, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* =======================================================
     TRANSITIONS
     ======================================================= */
  --t-fast: 0.12s ease;
  --t-base: 0.15s ease;
  --t-slow: 0.25s ease;

  /* =======================================================
     LAYOUT & GRID
     ======================================================= */
  --container-max: 1200px;
  --page-pad-x: 5%;
  --page-pad-x-tablet: 4%;
  --page-pad-x-mobile: 4%;

  --section-pad-y: 88px;
  --section-pad-y-tablet: 72px;
  --section-pad-y-mobile: 56px;
  --section-pad-y-mobile-sm: 44px;

  --grid-cols-desktop: 12;
  --grid-cols-tablet: 8;
  --grid-cols-mobile: 4;

  --grid-gap-sm: var(--space-4);
  --grid-gap-md: var(--space-6);
  --grid-gap-lg: var(--space-8);

  --sticky-offset: 60px;

  /* =======================================================
     BUTTON TOKENS
     ======================================================= */
  --btn-radius: var(--radius-md);
  --btn-pad-y: 11px;
  --btn-pad-x: 22px;
  --btn-font-size: 14px;
  --btn-font-weight: 700;
}

/* =========================================================
   BASE
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg-page);
  color: var(--color-text-body);
  font-family: var(--font-sans);
}

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

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */

.ke-section {
  padding: var(--section-pad-y) var(--page-pad-x);
}

.ke-section__inner,
.section-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.ke-grid {
  display: grid;
  gap: var(--grid-gap-md);
}

.ke-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ke-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ke-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* =========================================================
   SURFACE / CARD UTILITIES
   ========================================================= */

.ke-surface {
  background: var(--color-surface);
}

.ke-surface-soft {
  background: var(--color-bg-section);
}

.ke-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.ke-card-soft {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary,
.btn-dark,
.btn-secondary:hover, 
.btn-ghost-white:hover,
.btn-ghost-black:hover {
  color: var(--ke-white) !important;
}

.btn-secondary {
  color: var(--ke-ink) !important;
}

.btn-ghost-white {
  color: var(--ke-green) !important;
}

.btn-ghost-black {
  color: rgba(255, 255, 255, 0.8) !important;
}


/* =========================================================
   FORMS
   ========================================================= */

.ke-input,
.ke-select,
.ke-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-heading);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base),
    background var(--t-base),
    color var(--t-base);
}

.ke-input:hover,
.ke-select:hover,
.ke-textarea:hover {
  border-color: var(--color-primary);
}

.ke-input:focus,
.ke-select:focus,
.ke-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.ke-input:disabled,
.ke-select:disabled,
.ke-textarea:disabled {
  background: var(--color-bg-section-alt);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.ke-input.error,
.ke-select.error,
.ke-textarea.error,
.is-error .ke-input,
.is-error .ke-select,
.is-error .ke-textarea {
  border-color: var(--color-primary-hover);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* =========================================================
   DATA TABLES
   ========================================================= */

.specs-table-wrap,
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-xl);
  -webkit-overflow-scrolling: touch;
}

.specs-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.section-row td {
  background: var(--color-bg-section-alt);
  color: var(--color-text-disabled);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.col-featured {
  background: rgba(0, 95, 54, 0.025);
}

.col-featured-head {
  background: var(--ke-green-soft);
  color: var(--ke-green);
}

/* =========================================================
   ANCHOR NAV
   ========================================================= */

.anchor-nav {
  position: sticky;
  top: var(--sticky-offset);
  z-index: 99;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.anchor-nav-inner {
  display: flex;
  overflow-x: auto;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
  scrollbar-width: none;
}

.anchor-nav-inner::-webkit-scrollbar {
  display: none;
}

.anchor-link {
  white-space: nowrap;
  padding: 13px 20px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  transition:
    color var(--t-base),
    border-color var(--t-base);
}

.anchor-link:hover,
.anchor-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* =========================================================
   SIDEBAR / CONTENT HELPERS
   ========================================================= */

.content-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
  .ke-section {
    padding: var(--section-pad-y-tablet) var(--page-pad-x-tablet);
  }

  .ke-h3 {
    font-size: 20px;
  }

  .ke-h4 {
    font-size: 16px;
  }

  .ke-body-lg {
    font-size: 16px;
  }

  .ke-body {
    font-size: 14.5px;
  }

  .ke-body-sm {
    font-size: 13px;
  }

  .ke-caption {
    font-size: 11.5px;
  }

  .ke-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ke-section {
    padding: var(--section-pad-y-mobile) var(--page-pad-x-mobile);
  }

  .ke-display {
    font-size: 36px;
    letter-spacing: -1px;
  }

  .ke-h1 {
    font-size: clamp(30px, 8vw, 42px);
    letter-spacing: -1.5px;
  }

  .ke-h3 {
    font-size: 18px;
  }

  .ke-h4 {
    font-size: 15px;
  }

  .ke-body-lg {
    font-size: 15.5px;
  }

  .ke-body {
    font-size: 14px;
  }

  .ke-label {
    font-size: 10px;
  }

  .ke-grid-2,
  .ke-grid-3,
  .ke-grid-4,
  .content-with-sidebar {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .specs-table,
  .table-wrap .specs-table {
    min-width: 620px;
  }
}

@media (max-width: 480px) {
  .ke-section {
    padding: var(--section-pad-y-mobile-sm) var(--page-pad-x-mobile);
  }
}



/* =========================================================
   FAQ Accordion
   ========================================================= */

.faq-accordion .faq-toggle[aria-expanded="true"] .faq-toggle-icon,
.faq-accordion .faq-item[open] .faq-toggle-icon,
.faq-accordion .faq-item.open .faq-toggle-icon,
.faq-accordion .faq-item.is-open .faq-toggle-icon {
    background-color: var(--ke-green-2);
    transform: rotate(45deg);
}

/* keep SVG white when open */
.faq-accordion .faq-toggle[aria-expanded="true"] .faq-toggle-icon svg,
.faq-accordion .faq-toggle[aria-expanded="true"] .faq-toggle-icon svg *,
.faq-accordion .faq-item[open] .faq-toggle-icon svg,
.faq-accordion .faq-item[open] .faq-toggle-icon svg *,
.faq-accordion .faq-item.open .faq-toggle-icon svg,
.faq-accordion .faq-item.open .faq-toggle-icon svg *,
.faq-accordion .faq-item.is-open .faq-toggle-icon svg,
.faq-accordion .faq-item.is-open .faq-toggle-icon svg * {
    stroke: var(--ke-white);
}

/* =========================================================
   Breadcrumbs
   ========================================================= */

.breadcrumb-inner,
.breadcrumb-inner .rank-math-breadcrumb {
  font-size: 12.5px;
  color: var(--ke-ink-4);
}

.breadcrumb-inner a,
.breadcrumb-inner .rank-math-breadcrumb a {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ke-ink-4);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-inner a:hover,
.breadcrumb-inner .rank-math-breadcrumb a:hover {
  color: var(--ke-green);
}

/* Current page */
.breadcrumb-inner .last,
.breadcrumb-inner .rank-math-breadcrumb .last,
.breadcrumb-inner .rank-math-breadcrumb span:last-child {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ke-ink-2);
}

/* Separator */
.breadcrumb-inner .separator,
.breadcrumb-inner .rank-math-breadcrumb .separator {
  color: var(--ke-ink-4);
  font-weight: 500;
  margin-left: 6px;
  margin-right: 6px;
}

/* Tablet */
@media (max-width: 1024px) {
  .breadcrumb-inner,
  .breadcrumb-inner .rank-math-breadcrumb,
  .breadcrumb-inner a,
  .breadcrumb-inner .rank-math-breadcrumb a,
  .breadcrumb-inner .last,
  .breadcrumb-inner .rank-math-breadcrumb .last,
  .breadcrumb-inner .rank-math-breadcrumb span:last-child,
  .breadcrumb-inner .separator,
  .breadcrumb-inner .rank-math-breadcrumb .separator {
    font-size: 12px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .breadcrumb-inner,
  .breadcrumb-inner .rank-math-breadcrumb,
  .breadcrumb-inner a,
  .breadcrumb-inner .rank-math-breadcrumb a,
  .breadcrumb-inner .last,
  .breadcrumb-inner .rank-math-breadcrumb .last,
  .breadcrumb-inner .rank-math-breadcrumb span:last-child,
  .breadcrumb-inner .separator,
  .breadcrumb-inner .rank-math-breadcrumb .separator {
    font-size: 12px;
  }
}