/* SEAL Site Common Styles */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.bg-mesh {
  background-color: #f8f9fa;
  background-image: radial-gradient(at 0% 0%, rgba(212, 197, 185, 0.15) 0px, transparent 50%),
                    radial-gradient(at 100% 100%, rgba(10, 25, 47, 0.05) 0px, transparent 50%);
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

/* Content safety for mobile */
.content-safe .grid > *,
.content-safe .flex > *,
.content-safe [class*="col-span-"] {
  min-width: 0;
}

.content-safe h1,
.content-safe h2,
.content-safe h3,
.content-safe h4,
.content-safe p,
.content-safe li,
.content-safe a,
.content-safe span,
.content-safe div {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.safe-card,
.safe-copy {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.safe-copy p,
.safe-copy li,
.safe-copy span,
.safe-copy div {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Focus visible improvements for accessibility */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #0A192F;
  outline-offset: 2px;
  border-radius: 0.125rem;
}

.dark a:focus-visible,
.dark button:focus-visible,
.dark [tabindex]:focus-visible {
  outline-color: #D4C5B9;
}

/* Smooth transitions for theme switching */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Mobile menu animation */
#mobile-menu {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#menu-overlay {
  transition: opacity 0.3s ease;
}

/* Skip to main content link for accessibility */
.skip-to-main {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: #0A192F;
  color: white;
  text-decoration: none;
}

.skip-to-main:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 1em;
}