/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Mercury.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  --background: #0F2436;
  --foreground: rgba(255, 255, 255, 1);
  --card: rgba(26, 47, 79, 1);
  --card-foreground: rgba(255, 255, 255, 0.6);
  --primary: rgba(0, 122, 255, 1);
  --primary-foreground: rgba(255, 255, 255, 1);
  --secondary: rgba(0, 0, 0, 1);
  --secondary-foreground: rgba(198, 203, 206, 1);
  --muted: rgba(242, 245, 249, 1);
  --muted-foreground: rgba(18, 32, 51, 1);
  --accent: #ff6731;
  --accent-foreground: var(--foreground);
  --accent-foreground-hover: #18324d;
  --accent-muted: rgba(255, 103, 49, 0.52);
  /* Translucent-white surface for the shared accent-icon-button circle. */
  --accent-icon-button-bg: rgba(255, 255, 255, 0.1);
  /* Reusable card gradient: top-left -> bottom-right, turning solid on hover. */
  --gradient-card-from: #17324d;
  --gradient-card-to: #003561;
  --gradient-card-hover: #004c8a;
  --cta: rgba(235, 94, 59, 1);
  --cta-foreground: rgba(255, 255, 255, 1);
  --cta-secondary: rgba(246, 201, 178, 1);
  --cta-secondary-foreground: rgba(10, 22, 40, 1);
  --destructive: rgba(239, 68, 68, 1);
  --destructive-foreground: rgba(255, 255, 255, 1);
  --border: rgba(0, 0, 0, 1)
    /* Unknown OKLCH: 0.872 0.009 258.338 */
  ;
  --input: rgba(0, 0, 0, 1)
    /* Unknown OKLCH: 0.872 0.009 258.338 */
  ;
  --font-roboto: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --radius: 0.5rem;
  /* Shared duration for the accent swipe-fill animation (button pill + the
     newsletter-promo status bar that mirrors it). Change here to retune both. */
  --duration-swipe: 0.6s;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: rgba(0, 0, 0, 1)
    /* Unknown OKLCH: 0.0 0.0 0.0 */
  ;
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Translucent white frost used behind blurred panels (mega-menu dropdowns,
     advanced-mega-menu panel, etc.). Pair with a backdrop-filter blur. */
  --surface-frost: rgba(255, 255, 255, 0.02);
  /* Back-compat alias for the previous token name. */
  --amm-dropdown-bg: var(--surface-frost);

  /* Breakpoints */
  --breakpoint-sm: 600px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 42.5);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 45);
  }
}

.dark {
  --background: rgba(10, 22, 40, 1);
  --foreground: rgba(255, 255, 255, 1);
  --card: rgba(26, 47, 79, 1);
  --card-foreground: rgba(255, 255, 255, 0.9);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: rgba(255, 255, 255, 1);
  --secondary: rgba(42, 63, 89, 1);
  --secondary-foreground: rgba(198, 203, 206, 1);
  --muted: rgba(42, 63, 89, 1);
  --muted-foreground: rgba(255, 255, 255, 0.6);
  --accent: #ff6731;
  --accent-foreground: var(--foreground);
  --accent-foreground-hover: #18324d;
  --accent-muted: rgba(255, 103, 49, 0.52);
  /* Translucent-white surface for the shared accent-icon-button circle. */
  --accent-icon-button-bg: rgba(255, 255, 255, 0.1);
  /* Reusable card gradient: top-left -> bottom-right, turning solid on hover. */
  --gradient-card-from: #17324d;
  --gradient-card-to: #003561;
  --gradient-card-hover: #004c8a;
  --cta: rgba(235, 94, 59, 1);
  --cta-foreground: rgba(255, 255, 255, 1);
  --cta-secondary: rgba(246, 201, 178, 1);
  --cta-secondary-foreground: rgba(10, 22, 40, 1);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: rgba(255, 255, 255, 1);
  --border: rgba(67, 85, 110, 1);
  --input: rgba(67, 85, 110, 1);
  --font-roboto: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: rgba(0, 0, 0, 1);
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.05);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 8px 10px -1px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 12px 14px -1px rgba(0, 0, 0, 0.1);
}

.advanced-mega-menu-panel {
  background: var(--surface-frost);
  backdrop-filter: blur(20px);
}

.advanced-mega-menu .menu-item--expanded:hover {
  background: rgba(255, 187, 157, 1);
}

.advanced-mega-menu .mega-menu-item:first-of-type {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.advanced-mega-menu .mega-menu-item:last-of-type {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.blend-to-footer {
  background: linear-gradient(180deg, transparent 67%, var(--background));
}

.text-xl-2 {
  font-size: 22px;
}

.text-2xl-2 {
  font-size: 28px;
}

@media (max-width: 1199px) {
  .billboard--liver-man > .absolute img {
    object-position: right 50% top -6em;
  }
}

@media (max-width: 599px) {
  .billboard--liver-man > .absolute img {
    object-position: right 25% top -8em;
  }
}

.hero-tilted--card .webform-confirmation,
.hero-tilted--card .webform-submission-form {
  background: none;
  padding: 0;
}