/* Miscellaneous custom styles */
@theme {
  --spacing-menu-top:     calc(100% + .9375rem);
  --spacing-section:      2rem;

  --shadow-menu-shadow:   0 .25rem .375rem rgba(0,0,0,0.1);

  /** Breakpoints
   * The breakpoints are set to match the default Tailwind breakpoints.
   * You can override them here if you want to use different breakpoints.
   *
   * @see https://tailwindcss.com/docs/breakpoints
   */
  --breakpoint-*:   initial;
  --breakpoint-xxs: 22.5rem;    /* 360px */
  --breakpoint-xs:  29.6875rem; /* 475px */
  --breakpoint-sm:  40rem;      /* 640px */
  --breakpoint-md:  48rem;      /* 768px */
  --breakpoint-lg:  64rem;      /* 1024px */
  --breakpoint-xl:  70rem;      /* 1280px */
  --breakpoint-2xl: 96rem;      /* 1536px */
}

/* Basic layout styles */
main#maincontent {
  background-color: transparent;
  color: var(--color-on-surface, #e3e1e9);
  margin: 0;
  padding: 0 0 4rem;
}

.container {
  margin: 0 auto;
  width: 100%;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}

.section {
  @apply relative my-section px-section;

  &:first-child {
    @apply mt-0;
  }

  &:last-child, p:last-child {
    @apply mb-0;
  }

  &.has-background {
    @apply py-section bg-cover bg-no-repeat;
  }
}

/** Allows containers inside containers
  *
  * .container .wp-block-section {
  * @apply mx-break-out;
  * }
  */

.content-wrapper {
  .alignfull {
    @apply max-w-full;
  }

  .alignwide {
    @apply max-w-full;
  }

  .alignleft {
    @apply ml-0 mr-auto float-none;
  }

  .alignright {
    @apply ml-auto mr-0 float-none;
  }

  .aligncenter {
    @apply mx-auto;
  }
}

/* Responsive embeds */
.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Carbon Blue atmospheric field — rendered once globally (in header.php)
 * as a fixed-position layer behind all content. Decorative only; content
 * stays clickable thanks to pointer-events: none. The body carries
 * `background-color: #100e0b` so the gradient's mix-blend-mode layers
 * have something to composite against. */
.aura-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.aura-layer-1 {
	position: absolute;
	inset: 0;
	background: linear-gradient(138deg, #05070c 0%, #0f172a 40%, #172554 70%, #1e3a8a 100%);
	mix-blend-mode: normal;
	pointer-events: none;
	transform: translateZ(0);
	will-change: transform;
}

.aura-layer-2 {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 45% 50% at 72% 40%, rgba(96, 165, 250, 0.20) 0%, transparent 68%);
	mix-blend-mode: screen;
	pointer-events: none;
	transform: translateZ(0);
	will-change: transform;
	filter: blur(105px);
}

@media (min-width: 1024px) {
	.aura-layer-2 { filter: blur(151px); }
}

.aura-grain {
	position: absolute;
	inset: 0;
	mix-blend-mode: overlay;
	opacity: 0.85;
	pointer-events: none;
}

.aura-grain svg { display: block; width: 100%; height: 100%; }
