/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Urovo.
 *
 * 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.
 */

/* Canvas hover previews shrink-wrap their component wrapper by default.
 * Page sections need the iframe's desktop width before Canvas measures and
 * scales them; otherwise percentage-based layouts can become portrait previews.
 * Keep standalone controls and cards at their natural preview size.
 */
#component-wrapper:has(> section, > header, > footer, > .urovo-process-orbit) {
  display: block;
}

:root {
  --urovo-navy: #07143d;
  --urovo-blue: var(--primary, #00aeef);
  --urovo-cyan: #0bb8ee;
  --urovo-ice: #edf8fb;
  --urovo-ink: #0b1020;
  --urovo-muted: #6a7890;
  --urovo-radius-card: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.043 265.132);
  --card: oklch(0.967 0.003 264.542);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: #00aeef;
  --primary-foreground: oklch(1 0 0);
  --secondary: #6a7890;
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.13 0.043 265.132);
  --accent: #edf6f9;
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --font-sans: var(--urovo-font-primary, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--urovo-font-primary, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--urovo-font-primary, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--urovo-font-primary, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(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;

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

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

.dark {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: #00aeef;
  --primary-foreground: var(--foreground);
  --secondary: #a7b4c8;
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: #edf6f9;
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: var(--urovo-font-primary, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--urovo-font-primary, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--urovo-font-primary, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/* Reusable Canvas container class; keep typography and layout in the editor. */
.frosted-glass {
  background: var(--glass-background, rgb(0 0 0 / 14%));
  border: 1px solid var(--glass-border, rgb(255 255 255 / 16%));
  border-radius: var(--glass-radius, 24px);
  padding: var(--glass-padding, clamp(20px, 2vw, 32px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 8px));
  backdrop-filter: blur(var(--glass-blur, 8px));
  box-shadow: none;
}

/* Software section navy gradient background with grid lines and ambient glow */
.bg-navy-grid {
  --u: min(0.0520833vw, 1px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #eaf1fb;
  background-color: #071126;
  background-image:
    radial-gradient(80% 90% at 82% 82%, rgba(24, 79, 135, 0.48) 0%, transparent 64%),
    radial-gradient(120% 90% at 82% -6%, #174779 0%, transparent 56%), linear-gradient(168deg, #0b2044 0%, #0a1832 58%, #071126 100%);
}

@media (max-width: 1023px) {
  .bg-navy-grid {
    --u: 0.75px;
  }
}

.bg-navy-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(135, 183, 242, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(135, 183, 242, 0.08) 1px, transparent 1px);
  background-size: calc(58 * var(--u, 1px)) calc(58 * var(--u, 1px));
  -webkit-mask-image: linear-gradient(90deg, #000 0% 28%, rgba(0, 0, 0, 0.58) 50%, transparent 76%);
  mask-image: linear-gradient(90deg, #000 0% 28%, rgba(0, 0, 0, 0.58) 50%, transparent 76%);
}

.bg-navy-grid::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: calc(-260 * var(--u, 1px));
  left: calc(-160 * var(--u, 1px));
  width: calc(680 * var(--u, 1px));
  height: calc(680 * var(--u, 1px));
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 174, 239, 0.16) 0%, transparent 66%);
  border-radius: 50%;
}

.bg-navy-grid > .container,
.bg-navy-grid > .page-container,
.bg-navy-grid > *:not([aria-hidden="true"]):not([class*="absolute"]) {
  position: relative;
  z-index: 1;
}

/* Block link overlay utility for composite cards.
 * Can be applied directly to a link or button, or to a container wrapping one.
 */
:is(a.block-link, button.block-link, .block-link a, .block-link button) {
  position: static;
  transform: none;
  overflow: visible;
  isolation: auto;
  mask-image: none;
  -webkit-mask-image: none;
}

:is(a.block-link, button.block-link, .block-link a, .block-link button)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: pointer;
}

:is([class*="relative"], [class*="group"]):has(:is(.block-link, .block-link a, .block-link button):focus-visible) {
  outline: 2px solid var(--primary, #00aeef);
  outline-offset: 4px;
}

:is(.block-link, .block-link a, .block-link button):focus-visible {
  outline: none;
}