/**
 * Crimson Wave — centralized design system
 * Tokens + public-site UI/UX/responsive overlay.
 * Does not change routes, APIs, or form submit logic.
 */

:root {
  --color-primary-navy: #071A33;
  --color-secondary-navy: #0D2747;
  --color-navy-light: #153A63;
  --color-primary-red: #991B1B;
  --color-dark-red: #7F1D1D;
  --color-hover-red: #B91C1C;
  --color-white: #FFFFFF;
  --color-off-white: #F8FAFC;
  --color-light-gray: #F1F5F9;
  --color-border: #E2E8F0;
  --color-text-primary: #071A33;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;
  --color-text-on-navy: #FFFFFF;
  --color-text-on-navy-muted: #E2E8F0;
  --color-text-on-red: #FFFFFF;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;

  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container: min(100% - 32px, 1360px);
  --radius-btn: 12px;
  --radius-card: 16px;
  --touch: 44px;

  --font-sans: Inter, Manrope, "IBM Plex Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-display: Manrope, Inter, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --fs-h1: clamp(1.875rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.3125rem, 2vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body: clamp(0.96875rem, 0.4vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-label: 0.75rem;
  --lh: 1.55;

  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-dark: rgba(7, 26, 51, 0.88);
  --shadow-card: 0 12px 40px rgba(7, 26, 51, 0.08);
  --shadow-red: 0 8px 20px rgba(153, 27, 27, 0.22);
  --shadow-navy: 0 8px 20px rgba(7, 26, 51, 0.22);

  --z-base: 1;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1200;

  /* Keep existing overlay/token names in sync */
  --brand-maroon: #991B1B;
  --brand-maroon-hover: #B91C1C;
  --brand-maroon-dark: #7F1D1D;
  --brand-maroon-soft: #FEF2F2;
  --brand-maroon-light: #FEF2F2;
  --brand-maroon-border: #FECACA;
  --brand-maroon-bright: #B91C1C;
  --brand-blue: #071A33;
  --brand-blue-hover: #0D2747;
  --brand-blue-medium: #0D2747;
  --brand-blue-soft: #F1F5F9;
  --brand-blue-light: #F8FAFC;
  --brand-blue-border: #E2E8F0;
  --brand-blue-muted: #475569;
  --brand-blue-mist: #64748B;
  --navy: #071A33;
  --navy-foreground: #FFFFFF;
  --crimson: #991B1B;
  --crimson-foreground: #FFFFFF;
  --color-navy: #071A33;
  --color-crimson: #991B1B;
  --color-primary: #071A33;
  --color-background: #F8FAFC;
  --color-card: #FFFFFF;
  --color-foreground: #071A33;
  --background: #F8FAFC;
  --foreground: #071A33;
  --card: #FFFFFF;
  --card-foreground: #071A33;
  --muted: #F1F5F9;
  --muted-foreground: #475569;
  --primary: #071A33;
  --primary-foreground: #FFFFFF;
  --secondary: #F1F5F9;
  --secondary-foreground: #071A33;
  --accent: #991B1B;
  --accent-foreground: #FFFFFF;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --input: #E2E8F0;
  --ring: #0D2747;
  --popover: #FFFFFF;
  --popover-foreground: #071A33;
  --sidebar: #071A33;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #991B1B;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #0D2747;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #0D2747;
  --sidebar-ring: #991B1B;
  --surface: #FFFFFF;
  --white: #FFFFFF;
  --warm-white: #F8FAFC;
  --surface-alt: #F1F5F9;
  --border: #E2E8F0;
  --text-primary: #071A33;
  --text-secondary: #475569;
  --text-muted: #475569;
  --status-success: #16A34A;
  --status-warning: #D97706;
  --status-danger: #DC2626;
  --status-info: #0D2747;
  --ams-primary: #991B1B;
  --ams-secondary: #071A33;
  --ams-sidebar: #071A33;
  --ams-button: #991B1B;
  --ams-text: #071A33;
  --ams-surface: #FFFFFF;
  --ams-muted: #475569;
  --ams-border: #E2E8F0;
  --ams-soft: #F8FAFC;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

html,
body,
#app {
  background-color: var(--color-off-white);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh);
}

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

body.ams-public img {
  object-fit: contain;
}

/* ---------- Contrast ---------- */
body.ams-public,
body.ams-public main,
body.ams-seo {
  color: var(--color-text-primary);
}

body.ams-public h1,
body.ams-public h2,
body.ams-public h3,
body.ams-public h4,
body.ams-seo h1,
body.ams-seo h2,
body.ams-seo h3 {
  color: var(--color-primary-navy);
  font-family: var(--font-display);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body.ams-public h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; }
body.ams-public h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
body.ams-public h3 { font-size: var(--fs-h3); }
body.ams-public h4 { font-size: var(--fs-h4); }
body.ams-public p,
body.ams-public li { color: var(--color-text-secondary); }

body.ams-public .text-muted-foreground,
body.ams-public .text-slate-500,
body.ams-public .text-gray-500 {
  color: var(--color-text-secondary) !important;
}

body.ams-public .bg-navy,
body.ams-public section.bg-navy,
body.ams-public footer.bg-navy,
body.ams-public .bg-primary {
  background-color: var(--color-primary-navy) !important;
  color: var(--color-text-on-navy) !important;
}

body.ams-public .bg-navy h1,
body.ams-public .bg-navy h2,
body.ams-public .bg-navy h3,
body.ams-public .bg-navy h4,
body.ams-public .bg-navy p,
body.ams-public .bg-navy li,
body.ams-public .bg-navy span,
body.ams-public footer.bg-navy,
body.ams-public footer.bg-navy a,
body.ams-public footer.bg-navy h4,
body.ams-public footer.bg-navy p,
body.ams-public footer.bg-navy li {
  color: var(--color-text-on-navy) !important;
}

body.ams-public .bg-navy p,
body.ams-public .bg-navy .text-muted-foreground,
body.ams-public footer.bg-navy .text-muted-foreground,
body.ams-public footer.bg-navy p,
body.ams-public footer.bg-navy li {
  color: var(--color-text-on-navy-muted) !important;
}

body.ams-public .bg-crimson,
body.ams-public section.bg-crimson {
  background-color: var(--color-primary-red) !important;
  color: var(--color-text-on-red) !important;
}

body.ams-public .bg-crimson h1,
body.ams-public .bg-crimson h2,
body.ams-public .bg-crimson h3,
body.ams-public .bg-crimson p,
body.ams-public .bg-crimson span {
  color: #fff !important;
}

body.ams-public .bg-crimson .text-muted-foreground {
  color: #F8FAFC !important;
}

body.ams-public section.bg-navy .rounded-2xl.border.backdrop-blur-xl,
body.ams-public section.bg-navy .rounded-2xl.border[class*="bg-white/"] {
  background: var(--glass-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  box-shadow: var(--shadow-navy);
}

body.ams-public section.bg-navy .rounded-2xl.border.backdrop-blur-xl :is(.text-foreground, .text-navy, .text-navy-foreground, h2, h3, p, span),
body.ams-public section.bg-navy .rounded-2xl.border[class*="bg-white/"] :is(.text-foreground, .text-navy, .text-navy-foreground, h2, h3, p, span) {
  color: #fff !important;
}

/* ---------- Buttons ---------- */
body.ams-public a.bg-crimson,
body.ams-public button.bg-crimson,
body.ams-public .ams-inq-home-btn,
.ams-seo-cta {
  background: var(--color-primary-red) !important;
  color: #fff !important;
  border: 1px solid var(--color-primary-red) !important;
  border-radius: var(--radius-btn) !important;
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 12px 24px !important;
  font-weight: 700;
  box-shadow: var(--shadow-red);
  transition: background-color 180ms ease, transform 180ms ease;
}

body.ams-public a.bg-crimson:hover,
body.ams-public button.bg-crimson:hover,
body.ams-public .ams-inq-home-btn:hover {
  background: var(--color-hover-red) !important;
}

body.ams-public a.bg-navy,
body.ams-public button.bg-navy,
body.ams-public a.bg-primary,
body.ams-public button.bg-primary {
  background: var(--color-primary-navy) !important;
  color: #fff !important;
  border-radius: var(--radius-btn) !important;
  min-height: var(--touch);
  padding: 12px 24px !important;
}

body.ams-public button.border,
body.ams-public a.border.bg-background,
body.ams-public a.border.bg-white,
body.ams-public button[class*="outline"] {
  background: #fff !important;
  color: var(--color-primary-navy) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-btn) !important;
  min-height: var(--touch);
}

body.ams-public .bg-crimson a.border,
body.ams-public .bg-crimson button.border,
body.ams-public .bg-crimson a.bg-white,
body.ams-public section.bg-crimson a:not(.bg-crimson) {
  background: #fff !important;
  color: var(--color-primary-navy) !important;
}

:focus-visible {
  outline: 3px solid var(--color-hover-red);
  outline-offset: 2px;
}

/* ---------- Header ---------- */
body.ams-public header.sticky,
body.ams-public header.border-b {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-primary-navy) !important;
}

body.ams-public header a,
body.ams-public header button {
  color: var(--color-primary-navy);
  min-height: var(--touch);
}

body.ams-public header a.bg-crimson,
body.ams-public header button.bg-crimson {
  color: #fff !important;
}

body.ams-public header img {
  max-height: 44px;
  width: auto;
}

@media (max-width: 1023px) {
  body.ams-public header nav {
    max-width: 100%;
  }
}

/* ---------- Public containers / sections ---------- */
body.ams-public main > section,
body.ams-public main > div > section {
  padding-block: clamp(40px, 6vw, 96px);
}

body.ams-public main .mx-auto,
body.ams-public footer .mx-auto {
  width: min(100%, 1360px);
  max-width: 1360px;
  padding-inline: 16px;
  box-sizing: border-box;
}

/* ---------- Cards ---------- */
body.ams-public .bg-card,
body.ams-public .rounded-xl.border,
body.ams-public .rounded-2xl.border:not(.backdrop-blur-xl):not([class*="bg-white/"]) {
  border-radius: var(--radius-card) !important;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

body.ams-public .bg-card h3,
body.ams-public .rounded-xl.border h3,
body.ams-public .rounded-2xl.border h3 {
  color: var(--color-primary-navy);
}

body.ams-public .bg-card p,
body.ams-public .rounded-xl.border p {
  color: var(--color-text-secondary);
}

/* ---------- Forms ---------- */
body.ams-public input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
body.ams-public select,
body.ams-public textarea,
body.ams-auth input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
body.ams-auth select,
body.ams-auth textarea {
  min-height: 48px;
  width: 100%;
  max-width: 100%;
  border-radius: 12px !important;
  border: 1px solid var(--color-border) !important;
  background: #fff !important;
  color: var(--color-text-primary) !important;
  font-size: 16px;
}

body.ams-public input::placeholder,
body.ams-auth input::placeholder {
  color: #64748B;
  opacity: 1;
}

body.ams-public label,
body.ams-auth label {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ---------- Tables ---------- */
body.ams-public table,
body.ams-portal table,
body.ams-admin main table {
  width: 100%;
}

body.ams-public .overflow-x-auto,
body.ams-portal .overflow-x-auto,
body.ams-admin main .overflow-x-auto {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Modals ---------- */
[role="dialog"],
.ams-modal .box {
  width: min(720px, calc(100% - 24px));
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
}

#ams-lang-gate {
  z-index: 2000 !important;
  background:
    radial-gradient(120% 120% at 50% 0%, #0D2747 0%, #071A33 62%, #04101f 100%) !important;
}

#ams-lang-gate .ams-lang-card {
  width: min(420px, calc(100vw - 32px)) !important;
  background: var(--glass-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

#ams-lang-gate h1,
#ams-lang-gate p { color: #fff !important; }
#ams-lang-gate .ams-en { background: #fff !important; color: #071A33 !important; min-height: var(--touch); }
#ams-lang-gate .ams-ar { background: #991B1B !important; color: #fff !important; min-height: var(--touch); }

/* ---------- Footer ---------- */
body.ams-public footer {
  background: var(--color-primary-navy) !important;
  color: #E2E8F0 !important;
}

body.ams-public footer a { color: #fff !important; }
body.ams-public footer a:hover { color: #FECACA !important; }

/* ---------- Chat / overlays ---------- */
#ams-chat-toggle,
#ams-chat-head {
  background: var(--color-primary-red) !important;
}
#ams-chat-panel {
  z-index: var(--z-modal);
  max-width: calc(100vw - 24px);
  max-height: 90vh;
}

/* ---------- Responsive grids (public) ---------- */
@media (max-width: 1023px) {
  body.ams-public main .lg\:grid-cols-4,
  body.ams-public main .xl\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.ams-public main .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body.ams-public main .grid {
    column-gap: 12px;
    row-gap: 16px;
  }

  body.ams-public main .md\:grid-cols-2,
  body.ams-public main .md\:grid-cols-3,
  body.ams-public main .lg\:grid-cols-2,
  body.ams-public main .lg\:grid-cols-3,
  body.ams-public main .lg\:grid-cols-4,
  body.ams-public main .xl\:grid-cols-4,
  body.ams-public main .grid-cols-2,
  body.ams-public main .grid-cols-3,
  body.ams-public main .grid-cols-4,
  body.ams-public main .sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  body.ams-public section.bg-navy .grid.grid-cols-2,
  body.ams-public section.bg-navy .grid.grid-cols-4,
  body.ams-public main .grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ams-public header a,
  body.ams-public header button,
  body.ams-public main a.bg-crimson,
  body.ams-public main button.bg-crimson,
  body.ams-public main a.bg-navy,
  body.ams-public main button.border {
    width: auto;
    max-width: 100%;
  }

  body.ams-public section.bg-navy .flex.flex-wrap.gap-3 > a,
  body.ams-public section.bg-navy .flex.flex-wrap.gap-3 > button,
  body.ams-public .flex.flex-wrap.gap-3 > a.bg-crimson,
  body.ams-public .flex.flex-wrap.gap-3 > a.border {
    flex: 1 1 100%;
    justify-content: center;
  }

  body.ams-public section.bg-navy .absolute.rounded-2xl,
  body.ams-public section.bg-navy .absolute.rounded-xl,
  body.ams-public section.bg-navy .absolute[class*="shadow"] {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 16px;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.ams-public footer .grid,
  body.ams-public footer .md\:grid-cols-2,
  body.ams-public footer .lg\:grid-cols-4,
  body.ams-public footer .grid-cols-2,
  body.ams-public footer .grid-cols-3,
  body.ams-public footer .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 479px) {
  body.ams-public main .grid.grid-cols-4,
  body.ams-public section.bg-navy .grid.grid-cols-2,
  body.ams-public section.bg-navy .grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.ams-public main .lg\:grid-cols-3,
  body.ams-public main .md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ams-public footer .grid,
  body.ams-public footer .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Timeline: stack on mobile */
@media (max-width: 767px) {
  body.ams-public [class*="timeline"],
  body.ams-public ol.flex,
  body.ams-public .flex.justify-between:has(> .flex-1) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* Cookie / toast */
body.ams-public [class*="cookie"],
body.ams-public .fixed.bottom-4,
body.ams-public .fixed.bottom-6 {
  z-index: var(--z-toast);
  max-width: calc(100vw - 24px);
}

/* Quote / contact / track / blog pages */
body.ams-page-quote main section,
body.ams-page-contact main section,
body.ams-page-track main section,
body.ams-page-about main section,
body.ams-page-services main section,
body.ams-page-blog main section {
  width: min(100%, 1360px);
  margin-inline: auto;
}

body.ams-page-quote form,
body.ams-page-contact form,
body.ams-page-track form {
  max-width: 100%;
}

body.ams-page-quote .ams-inq-types,
body.ams-page-quote [data-ams-inq-hidden-type="1"] + .ams-inq-types {
  width: 100%;
}

@media (max-width: 767px) {
  body.ams-page-quote main .grid,
  body.ams-page-contact main .grid {
    grid-template-columns: 1fr !important;
  }
}

/* Auth pages */
body.ams-auth {
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(153, 27, 27, 0.08), transparent 50%),
    radial-gradient(800px 480px at 100% 100%, rgba(7, 26, 51, 0.10), transparent 46%),
    var(--color-off-white);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.ams-public *,
  body.ams-public *::before,
  body.ams-public *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Public contrast and alignment audit ---------- */
body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar, [class*="bg-navy/"]) {
  color: #FFFFFF !important;
}

body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar, [class*="bg-navy/"])
  :is(h1, h2, h3, h4, strong, b, dt, label, a, button, .text-white, .text-foreground, .text-navy, .text-navy-foreground) {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar, [class*="bg-navy/"])
  :is(p, li, dd, small, [class*="text-slate-"], [class*="text-gray-"], .text-muted-foreground) {
  color: #E2E8F0 !important;
  opacity: 1 !important;
}

body.ams-public :is(.bg-white, .bg-card, .bg-background, .bg-muted)
  :is(h1, h2, h3, h4, strong, b, dt, label, .text-white, .text-foreground, .text-navy) {
  color: #071A33 !important;
  opacity: 1 !important;
}

body.ams-public :is(.bg-white, .bg-card, .bg-background, .bg-muted)
  :is(p, li, dd, small, [class*="text-slate-"], [class*="text-gray-"], .text-muted-foreground) {
  color: #475569 !important;
  opacity: 1 !important;
}

body.ams-public section:not(.bg-navy):not(.bg-primary):not(.bg-sidebar)
  [class*="bg-white/"]
  :is(h1, h2, h3, h4, strong, b, dt, label, .text-white, .text-foreground, .text-navy) {
  color: #071A33 !important;
  opacity: 1 !important;
}

body.ams-public section:not(.bg-navy):not(.bg-primary):not(.bg-sidebar)
  [class*="bg-white/"]
  :is(p, li, dd, small, [class*="text-slate-"], [class*="text-gray-"], .text-muted-foreground) {
  color: #475569 !important;
  opacity: 1 !important;
}

body.ams-public :is(.bg-crimson, [class*="bg-crimson/"])
  :is(h1, h2, h3, h4, p, li, span, strong, small, a, button) {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

body.ams-public :is(button, a)[class*="bg-white"] {
  color: #071A33 !important;
}

body.ams-public :is(button, a)[class*="bg-crimson"],
body.ams-public :is(button, a)[class*="bg-navy"] {
  color: #FFFFFF !important;
}

body.ams-public :is([class*="cookie"], [data-cookie-banner]) button {
  background: #071A33 !important;
  border-color: #071A33 !important;
  color: #FFFFFF !important;
  font-weight: 700;
  opacity: 1 !important;
}

body.ams-public:not(.ams-page-home) main {
  width: 100%;
}

body.ams-public:not(.ams-page-home) main > :is(section, article),
body.ams-public:not(.ams-page-home) main > div > :is(section, article) {
  width: 100%;
  box-sizing: border-box;
}

body.ams-public:not(.ams-page-home) main
  :is(.container, [class*="max-w-"], .mx-auto) {
  width: min(100% - 32px, 1180px);
  max-width: 1180px;
  margin-inline: auto;
  box-sizing: border-box;
}

body.ams-public:not(.ams-page-home) main
  :is(.rounded-xl, .rounded-2xl, .rounded-3xl) {
  min-width: 0;
}

body.ams-public:not(.ams-page-home) main
  :is(h1, h2, h3, h4, p, li, label, input, textarea, select, button, a) {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  body.ams-public:not(.ams-page-home) main
    :is(.container, [class*="max-w-"], .mx-auto) {
    width: min(100% - 24px, 1180px);
  }

  body.ams-public:not(.ams-page-home) main
    :is(.flex.items-center, .flex.justify-between) {
    flex-wrap: wrap;
  }

  body.ams-public:not(.ams-page-home) main form
    :is(button[type="submit"], a.bg-crimson, a.bg-navy) {
    width: 100%;
    justify-content: center;
  }
}