/**
 * Plebis Brand Design Tokens
 *
 * Shared design tokens (colors, typography) synced from plebis-web's
 * Tailwind config so the WordPress site matches the Remix app visually.
 *
 * Source of truth: plebis-web/tailwind.config.ts + plebis-web/app/tailwind.css
 */

/* ── Google Fonts ────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Design Tokens (CSS Custom Properties) ───────────────────────────── */
:root {
  /* Brand Colors */
  --plebis-gold:           hsl(29, 98%, 41%);     /* #ce7602 - Primary accent */
  --plebis-gold-light:     hsl(29, 98%, 60%);
  --plebis-gold-dark:      hsl(29, 98%, 25%);
  --plebis-blue:           hsl(191, 89%, 18%);    /* #054756 - Primary teal */
  --plebis-light-blue:     hsl(184, 98%, 36%);    /* #02a8ba */
  --plebis-medium-blue:    hsl(189, 88%, 26%);    /* #086e7f */
  --plebis-dark-blue:      hsl(188, 90%, 8%);     /* #022126 */
  --plebis-burnt-orange:   hsl(34, 98%, 41%);     /* #ce7602 */
  --plebis-cappuccino:     hsl(33, 90%, 24%);     /* #724106 */
  --plebis-beige:          hsl(32, 44%, 62%);     /* #c9a275 */
  --plebis-dark-gray:      hsl(216, 7%, 30%);     /* #474b51 */
  --plebis-off-white:      hsl(0, 0%, 98%);       /* #f9f9f9 */
  --plebis-red:            hsl(353, 57%, 44%);    /* #B0303C */
  --plebis-green:          hsl(134, 49%, 35%);    /* #2E8540 */
  --plebis-yellow:         hsl(46, 96%, 45%);     /* #E3B505 */

  /* Typography */
  --plebis-font-sans:  'Noto Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --plebis-font-mono:  'JetBrains Mono', ui-monospace, monospace;
}

/* ── Base Typography ─────────────────────────────────────────────────── */
body {
  font-family: var(--plebis-font-sans);
}

/* ── Elementor Nav Menu — Link Colors ────────────────────────────────── */

/* Default nav links — off-white for contrast on dark headers */
.elementor-nav-menu a {
  transition: color 0.2s ease;
}

/* Hover state — gold accent, matching plebis-web sidebar hover */
.elementor-nav-menu a:hover,
.elementor-nav-menu a:focus {
  color: var(--plebis-gold) !important;
}

/* Active/current page — gold to indicate current section */
.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-nav-menu .elementor-item.current-menu-item > a,
.elementor-nav-menu .current-menu-item > a {
  color: var(--plebis-gold) !important;
}

/* ── Off-Canvas Mobile Menu ──────────────────────────────────────────── */

/* Menu container — dark blue background matching the app sidebar */
.elementor-nav-menu--dropdown,
.elementor-nav-menu__container {
  background-color: var(--plebis-dark-blue) !important;
}

/* Mobile menu links — off-white text */
.elementor-nav-menu--dropdown a,
.elementor-nav-menu__container a {
  color: var(--plebis-off-white) !important;
  transition: color 0.2s ease;
}

/* Mobile menu link hover — gold accent */
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown a:focus,
.elementor-nav-menu__container a:hover,
.elementor-nav-menu__container a:focus {
  color: var(--plebis-gold) !important;
}

/* Mobile menu dividers — subtle border matching brand */
.elementor-nav-menu--dropdown li,
.elementor-nav-menu__container li {
  border-bottom-color: var(--plebis-medium-blue) !important;
}

/* Hamburger toggle icon — off-white */
.elementor-menu-toggle i,
.elementor-menu-toggle svg {
  color: var(--plebis-off-white);
  fill: var(--plebis-off-white);
}