/*
 * Mega-menu refinements — OUR CSS, not ported from WordPress.
 *
 * Loaded last (see GLOBAL_STYLESHEETS in src/app/layout.tsx) so it overrides
 * the ported menu.css by source order at equal specificity. Kept in a separate
 * file on purpose: src/assets/css/menu.css is a verbatim copy of the theme and
 * would be clobbered by a re-crawl, this file would not.
 *
 * What it fixes (measured on the ported layout, 2026-08-08):
 *   1. `grid-template-columns: 482px 1fr 740px` hard-codes 1222px of fixed
 *      columns, so only the middle flexes: it collapsed to 299px at a 1536px
 *      viewport (wrapping the RMM label onto 3 lines) and ballooned to 698px
 *      at 1920px while the right column stayed 740px — the large dead zone.
 *   2. The right column held a single narrow 10-item list in 740px of space.
 *   3. `min-height: 500px` kept the panel tall no matter how little was in it.
 *   4. `.scroll-up-btn` rendered as an empty 36px ring (transparent bg +
 *      border, no glyph) above a two-item list.
 */

/* ---- 1. Fluid, centred columns ------------------------------------------ */
.mega-container {
  grid-template-columns:
    minmax(280px, 1.05fr)
    minmax(240px, 0.95fr)
    minmax(380px, 1.7fr);
  max-width: 1500px;
  margin-inline: auto;
  /* ---- 3. size to content instead of a rigid 500px ---- */
  min-height: 380px;
}

/* ---- Left column: tighter, more readable measure ------------------------ */
.mega-left {
  padding: 44px 40px 40px;
}

.mega-title {
  font-size: 28px;
  margin-bottom: 18px;
  line-height: 1.2;
}

.mega-description {
  margin-bottom: 26px;
  max-width: 46ch;
}

/* ---- Middle column ------------------------------------------------------ */
.mega-middle {
  padding: 22px 0;
}

.mega-item a {
  padding: 14px 32px;
  font-size: 18px;
  line-height: 1.35;
}

/* Keep the active-item accent from shifting the label horizontally. */
.mega-item a,
.mega-item.active a {
  border-left-width: 4px;
}

.mega-item.active a {
  border-left-color: var(--ey-yellow);
}

/* ---- 4. Drop the empty scroll affordance -------------------------------- */
.mega-middle .scroll-up-btn,
.scroll-up-btn {
  display: none;
}

/* ---- Right column ------------------------------------------------------- */
.mega-right {
  padding: 44px 40px 40px;
}

.submenu-header {
  margin-bottom: 18px;
  padding-inline: 30px;
}

.submenu-list li {
  /* menu.css puts `margin: 0 30px` on every item, which breaks grid columns. */
  margin: 0;
}

.submenu-list li a {
  padding: 9px 0;
  line-height: 1.35;
}

/* ---- 2. Two-column submenu once there is room for it -------------------- */
@media (min-width: 1280px) {
  .submenu-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 0;
    padding-inline: 30px;
  }

  .submenu-header {
    padding-inline: 30px;
  }
}

@media (max-width: 1279.98px) {
  .submenu-list li {
    margin-inline: 30px;
  }
}

/* ---- Pricing dropdown: match the Resources dropdown -------------------- */
.nav-item.has-dropdown .dropdown-menu.dropdown-sm .dropdown-item-simple {
  white-space: nowrap;
}

/*
 * ══ Gradient repair (Tailwind v4 @property clash) ════════════════════════
 *
 * builder.css (Tailwind v4, loaded for CMS pages) REGISTERS
 * `--tw-gradient-from` / `--tw-gradient-to` via @property with
 * `syntax: "<color>"`. The frozen main.css (compiled Tailwind v3.3) writes
 * them as "color + position" pairs — `#4f46e5 var(--tw-gradient-from-position)`
 * — which is NOT a bare <color>, so the registered property rejects the value
 * and falls back to transparent: every themed gradient button rendered as an
 * empty white rectangle.
 *
 * Registration is page-global and cannot be undone, so the fix is to
 * re-declare every gradient class the ported markup uses with POSITION-FREE
 * values. This file loads last, so at equal specificity these win.
 *
 * IMPORTANT: this section lives in src/assets/css (the master copy).
 * tools/sync-assets.mjs overwrites public/assets/css from here on every
 * dev/build — a fix applied only to public/ is silently clobbered by the
 * next build, which is exactly how this section vanished twice.
 *
 * Order matters within this section: from → via → to, so an explicit to-*
 * class beats the transparent tail a via-* class installs.
 */

/* -- from-* -------------------------------------------------------------- */
html .from-amber-50    { --tw-gradient-from: #fffbeb; --tw-gradient-to: rgb(255 251 235 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-amber-500   { --tw-gradient-from: #f59e0b; --tw-gradient-to: rgb(245 158 11 / 0);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-blue-50     { --tw-gradient-from: #eff6ff; --tw-gradient-to: rgb(239 246 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-blue-500    { --tw-gradient-from: #3b82f6; --tw-gradient-to: rgb(59 130 246 / 0);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-blue-600    { --tw-gradient-from: #2563eb; --tw-gradient-to: rgb(37 99 235 / 0);   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-cyan-50     { --tw-gradient-from: #ecfeff; --tw-gradient-to: rgb(236 254 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-cyan-600    { --tw-gradient-from: #0891b2; --tw-gradient-to: rgb(8 145 178 / 0);   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-emerald-50  { --tw-gradient-from: #ecfdf5; --tw-gradient-to: rgb(236 253 245 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-emerald-600 { --tw-gradient-from: #059669; --tw-gradient-to: rgb(5 150 105 / 0);   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-green-500   { --tw-gradient-from: #22c55e; --tw-gradient-to: rgb(34 197 94 / 0);   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-indigo-50   { --tw-gradient-from: #eef2ff; --tw-gradient-to: rgb(238 242 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-indigo-500  { --tw-gradient-from: #6366f1; --tw-gradient-to: rgb(99 102 241 / 0);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-indigo-600  { --tw-gradient-from: #4f46e5; --tw-gradient-to: rgb(79 70 229 / 0);   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-purple-500  { --tw-gradient-from: #a855f7; --tw-gradient-to: rgb(168 85 247 / 0);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-red-500     { --tw-gradient-from: #ef4444; --tw-gradient-to: rgb(239 68 68 / 0);   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-slate-50    { --tw-gradient-from: #f8fafc; --tw-gradient-to: rgb(248 250 252 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-slate-900   { --tw-gradient-from: #0f172a; --tw-gradient-to: rgb(15 23 42 / 0);    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-violet-50   { --tw-gradient-from: #f5f3ff; --tw-gradient-to: rgb(245 243 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .from-violet-600  { --tw-gradient-from: #7c3aed; --tw-gradient-to: rgb(124 58 237 / 0);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

/* -- via-* --------------------------------------------------------------- */
html .via-indigo-50  { --tw-gradient-to: rgb(238 242 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), #eef2ff, var(--tw-gradient-to); }
html .via-indigo-700 { --tw-gradient-to: rgb(67 56 202 / 0);   --tw-gradient-stops: var(--tw-gradient-from), #4338ca, var(--tw-gradient-to); }
html .via-indigo-900 { --tw-gradient-to: rgb(49 46 129 / 0);   --tw-gradient-stops: var(--tw-gradient-from), #312e81, var(--tw-gradient-to); }

/* -- to-* ---------------------------------------------------------------- */
html .to-blue-500    { --tw-gradient-to: #3b82f6; }
html .to-cyan-50     { --tw-gradient-to: #ecfeff; }
html .to-cyan-100    { --tw-gradient-to: #cffafe; }
html .to-cyan-400    { --tw-gradient-to: #22d3ee; }
html .to-cyan-500    { --tw-gradient-to: #06b6d4; }
html .to-emerald-500 { --tw-gradient-to: #10b981; }
html .to-indigo-500  { --tw-gradient-to: #6366f1; }
html .to-indigo-700  { --tw-gradient-to: #4338ca; }
html .to-indigo-800  { --tw-gradient-to: #3730a3; }
html .to-indigo-900  { --tw-gradient-to: #312e81; }
html .to-orange-500  { --tw-gradient-to: #f97316; }
html .to-pink-500    { --tw-gradient-to: #ec4899; }
html .to-purple-500  { --tw-gradient-to: #a855f7; }
html .to-slate-900   { --tw-gradient-to: #0f172a; }
html .to-teal-500    { --tw-gradient-to: #14b8a6; }

/* -- hover variants ------------------------------------------------------- */
html .hover\:from-amber-400:hover   { --tw-gradient-from: #fbbf24; }
html .hover\:from-blue-500:hover    { --tw-gradient-from: #3b82f6; }
html .hover\:from-cyan-500:hover    { --tw-gradient-from: #06b6d4; }
html .hover\:from-emerald-500:hover { --tw-gradient-from: #10b981; }
html .hover\:from-indigo-700:hover  { --tw-gradient-from: #4338ca; }
html .hover\:from-violet-500:hover  { --tw-gradient-from: #8b5cf6; }
html .hover\:to-blue-400:hover      { --tw-gradient-to: #60a5fa; }
html .hover\:to-indigo-400:hover    { --tw-gradient-to: #818cf8; }
html .hover\:to-indigo-800:hover    { --tw-gradient-to: #3730a3; }
html .hover\:to-orange-400:hover    { --tw-gradient-to: #fb923c; }
html .hover\:to-purple-400:hover    { --tw-gradient-to: #c084fc; }
html .hover\:to-teal-400:hover      { --tw-gradient-to: #2dd4bf; }

/*
 * ── Header CTA: same indigo→green gradient as the hero ───────────────────
 * The ported markup gives the header's Request Demo an indigo→indigo pair;
 * the hero uses indigo-700 → green-600. Repainted here so both match.
 */
.header .gp-modal-open.bg-gradient-to-r,
.mobile-menu .gp-modal-open.bg-gradient-to-r {
  --tw-gradient-from: #4338ca;
  --tw-gradient-to: #16a34a;
}

.header .gp-modal-open.bg-gradient-to-r:hover,
.mobile-menu .gp-modal-open.bg-gradient-to-r:hover {
  --tw-gradient-from: #3730a3;
  --tw-gradient-to: #15803d;
}

/*
 * ── Forms: kill the autofill grey ─────────────────────────────────────────
 * Chrome paints autofilled fields grey-blue, which reads as DISABLED (the
 * QA round's "unable to write"). Inset-shadow trick, same as the admin login.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-text-fill-color: #0f172a;
  transition: background-color 9999s ease-in-out 0s;
}

/* (Footer active-link colour lives with its aria-current rule in styles.css.) */