/**
 * @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: 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: #0a157a;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9219 0 0);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.373 0.031 259.733);
  --accent: oklch(0.932 0.032 255.585);
  --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: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --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;
  --Brand-color-TFF: #020618;
  --Bg-blue-gradient:
    linear-gradient(
      182deg,
      rgba(10, 21, 122, 0.6) -14.32%,
      rgba(81, 87, 163, 0.39) 33.49%,
      rgba(216, 212, 239, 0) 81.69%
    ),
    rgba(10, 21, 122, 0.5);
  --Bg-blue-gradient-blur: blur(17.5px);

  /* 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: oklch(0.547 0.246 262.866);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --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: oklch(0.932 0.032 255.585);
  --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: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --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);
}

.bg-dark {
  background: var(--Brand-color-TFF, #020618);
}

.bg-blue-gradient {
  background: var(
    --Bg-blue-gradient,
    linear-gradient(
      182deg,
      rgba(10, 21, 122, 0.6) -14.32%,
      rgba(81, 87, 163, 0.39) 33.49%,
      rgba(216, 212, 239, 0) 81.69%
    ),
    rgba(10, 21, 122, 0.5)
  );
  backdrop-filter: var(--Bg-blue-gradient-blur, blur(17.5px));
}

a {
  text-decoration: none;
  transition: all 0.35s ease;
  &:hover {
    text-decoration: underline;
  }
}

/* Reset header and footer container width for admin users to avoid horizontal scrolling */
.admin-toolbar ~ .dialog-off-canvas-main-canvas > .layout-container {
  > header .region-header,
  > footer .region-footer {
    section.cq-full:first-child {
      width: 100%;
      margin-inline: 0;
    }
  }
}

/* Main menu styles */
.region-header {
  .site-branding-block {
    .site-name {
      text-transform: uppercase;
    }
    .site-name,
    .site-slogan {
      line-height: 1.5;
    }
    &:hover {
      text-decoration: none;
    }
  }
  > section {
    &:nth-child(2) {
      display: none;
      position: fixed;
			overflow-y: auto;
      z-index: 50;
      top: var(--admin-toolbar-top-bar-height, 0px);
      left: var(--drupal-displace-offset-left, 0px);
      height: calc(100% - var(--admin-toolbar-top-bar-height, 0px));
      width: calc(100% - var(--drupal-displace-offset-left, 0px));
      transform: translateY(-100%);
      transition: transform 0.35s ease;
			background: var(--Bg-blue-gradient);
    	backdrop-filter: var(--Bg-blue-gradient-blur, blur(17.5px));
      > .container {
        pointer-events: none;
      }
			
      .icon-close {
        display: block;
      }
      .icon-burger,
			.bg-blue-gradient {
        display: none;
      }
      .items-stretch {
        height: 100%;
        > header > *,
        > .grid,
        > footer > * {
          pointer-events: auto;
        }
        > .grid {
          padding: 48px 0;
          max-width: 650px;
          margin: 0 auto;
          border-top: var(--slim-border);
          border-bottom: var(--slim-border);
        }
        nav > nav > ul > li {
          a {
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5;
          }
        }
      }
      footer {
        > div {
          gap: 32px;
          > *:not(:first-child) {
            position: relative;
            &::before {
              content: "|";
              position: absolute;
              left: -16px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 24px;
            }
          }
        }
      }
    }
  }
}

/* Global footer styles */
.dialog-off-canvas-main-canvas > .layout-container > footer .md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
  place-items: center;
  text-align: center;
  font-size: 12px;
  @media (min-width: 768px) {
    place-items: start;
    font-size: 15px;
    text-align: left;
  }
  > div,
  nav {
    width: auto;
  }
  >section>div>div>.grid-cols-1.w-full {
    width: auto;
    margin: 0 auto;
    @media (min-width: 768px) {
      width: 100%;
      margin: 0;
    }
  }
  .xl\:text-md {
    @media (min-width: 768px) {
      font-size: 12px;
      line-height: 1.5;
    }
  }
}