/* ==========================================================================
   Multi-Tenant Theme Styles
   Colors are driven by CSS custom properties set per-domain in tenant.js
   ========================================================================== */

/* --- Default Color Palette (Blue) --- */
:root {
  --nav-height: 48px; /* mobile/tablet with hamburger */
  --primary-50:  239 246 255;
  --primary-100: 219 234 254;
  --primary-200: 191 219 254;
  --primary-300: 147 197 253;
  --primary-400: 96 165 250;
  --primary-500: 59 130 246;
  --primary-600: 49 172 218;
  --primary-700: 30 145 190;
  --primary-800: 43 115 173;
  --primary-900: 30 58 138;

  --accent-50:  238 242 255;
  --accent-100: 224 231 255;
  --accent-600: 79 70 229;

  --accent2-50:  236 254 255;
  --accent2-100: 207 250 254;
  --accent2-600: 8 145 178;
}

/* --- Base --- */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  opacity: 0;
  transition: opacity 0.15s ease;
}
body.loaded {
  opacity: 1;
}

/* --- Glass Navigation --- */
.glass-nav {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  height: 48px;
}
@media (min-width: 1024px) {
  .glass-nav {
    height: 70px;
  }
  :root {
    --nav-height: 70px;
  }
}


/* --- Hero Section --- */
.hero-gradient {
  background: radial-gradient(
    circle at top right,
    rgb(var(--primary-100)) 0%,
    rgb(var(--primary-50)) 20%,
    #ffffff 60%
  );
}

/* --- Mesh Gradient (Bento Large Card) --- */
.mesh-gradient {
  background-color: rgb(var(--primary-500));
  background-image:
    radial-gradient(at 83% 67%, rgb(var(--primary-300)) 0, transparent 50%),
    radial-gradient(at 66% 16%, rgb(var(--primary-500)) 0, transparent 50%),
    radial-gradient(at 16% 15%, rgb(var(--primary-200)) 0, transparent 50%),
    radial-gradient(at  9% 82%, rgb(var(--primary-400)) 0, transparent 50%),
    radial-gradient(at 66% 76%, rgb(var(--primary-700)) 0, transparent 50%),
    radial-gradient(at 26% 63%, rgb(var(--primary-300)) 0, transparent 50%);
}

/* --- Text Gradient --- */
.text-gradient {
  background: linear-gradient(to right, rgb(var(--primary-700)), rgb(var(--primary-600)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Card Hover --- */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgb(var(--primary-500) / 0.15);
}

/* --- Mobile Menu --- */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-menu.open {
  max-height: 400px;
}

/* --- FAQ Details Marker --- */
details summary::-webkit-details-marker {
  display: none;
}