/* ============================================================
   OII4 THEME SYSTEM
   Institutional + Cinematic + Civic Innovation
============================================================ */

/* ------------------------------
   1. Design Tokens
------------------------------ */

:root {
  --oii-navy-950: #061525;
  --oii-navy-900: #071b2f;
  --oii-navy-800: #0d2742;
  --oii-navy-700: #123657;

  --oii-gold-600: #c9a35b;
  --oii-gold-500: #d9b26f;
  --oii-gold-100: #f7eedb;

  --oii-white: #ffffff;
  --oii-cloud: #f8fafc;
  --oii-stone: #e7e5e4;
  --oii-slate: #64748b;
  --oii-charcoal: #111827;

  --oii-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --oii-font-heading: "Sora", system-ui, sans-serif;

  --oii-container: 1200px;
  --oii-section: clamp(4rem, 8vw, 7rem);

  --oii-radius-sm: 10px;
  --oii-radius-md: 18px;
  --oii-radius-lg: 28px;
  --oii-radius-pill: 999px;

  --oii-shadow-soft: 0 18px 45px rgba(7, 27, 47, 0.12);
  --oii-shadow-deep: 0 30px 90px rgba(7, 27, 47, 0.25);

  --oii-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --oii-fast: 180ms;
  --oii-medium: 320ms;
}

/* ------------------------------
   2. Reset / Base
------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--oii-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--oii-charcoal);
  background: var(--oii-white);
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

/* ------------------------------
   3. Accessibility Foundation
------------------------------ */

:focus-visible {
  outline: 3px solid var(--oii-gold-500);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 99999;
  background: var(--oii-gold-500);
  color: var(--oii-navy-950);
  padding: 0.75rem 1rem;
  border-radius: var(--oii-radius-pill);
  font-weight: 800;
}

.skip-link:focus {
  top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------
   4. Layout System
------------------------------ */

.oii-container {
  width: min(100% - 2rem, var(--oii-container));
  margin-inline: auto;
}

.oii-section {
  padding-block: var(--oii-section);
}

.oii-section-soft {
  background: var(--oii-cloud);
}

.oii-section-dark {
  background:
    radial-gradient(circle at top left, rgba(201, 163, 91, 0.18), transparent 34%),
    linear-gradient(135deg, var(--oii-navy-950), var(--oii-navy-800));
  color: var(--oii-white);
}

.oii-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.oii-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oii-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oii-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .oii-grid-2,
  .oii-grid-3,
  .oii-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------
   5. Typography
------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--oii-font-heading);
  color: inherit;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 0 1rem;
}

h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
}

h2 {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
}

h3 {
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}

p {
  margin: 0 0 1rem;
}

.oii-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--oii-gold-600);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.oii-lead {
  max-width: 760px;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.75;
  color: color-mix(in srgb, currentColor 78%, transparent);
}

/* ------------------------------
   6. Buttons
------------------------------ */

.oii-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.85rem 1.25rem;
  border-radius: var(--oii-radius-pill);
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    transform var(--oii-fast) var(--oii-ease),
    box-shadow var(--oii-fast) var(--oii-ease),
    background var(--oii-fast) var(--oii-ease);
}

.oii-btn:hover {
  transform: translateY(-2px);
}

.oii-btn-primary {
  background: linear-gradient(135deg, var(--oii-gold-500), var(--oii-gold-600));
  color: var(--oii-navy-950);
  box-shadow: 0 18px 35px rgba(201, 163, 91, 0.28);
}

.oii-btn-dark {
  background: var(--oii-navy-900);
  color: var(--oii-white);
  box-shadow: var(--oii-shadow-soft);
}

.oii-btn-outline {
  background: transparent;
  border-color: currentColor;
  color: currentColor;
}

/* ------------------------------
   7. Cards
------------------------------ */

.oii-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--oii-radius-lg);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(100, 116, 139, 0.14);
  box-shadow: var(--oii-shadow-soft);
  transition:
    transform var(--oii-medium) var(--oii-ease),
    box-shadow var(--oii-medium) var(--oii-ease);
}

.oii-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--oii-shadow-deep);
}

.oii-card-body {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.oii-glass {
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: var(--oii-shadow-soft);
}

/* ------------------------------
   8. Cinematic Media
------------------------------ */

.oii-media-frame {
  overflow: hidden;
  border-radius: var(--oii-radius-lg);
  box-shadow: var(--oii-shadow-deep);
  background: var(--oii-navy-950);
}

.oii-media-frame img,
.oii-media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------
   9. Forms
------------------------------ */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: var(--oii-radius-sm);
  padding: 0.8rem 1rem;
  background: var(--oii-white);
  color: var(--oii-charcoal);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

/* ------------------------------
   10. Utility Classes
------------------------------ */

.oii-text-center {
  text-align: center;
}

.oii-text-gold {
  color: var(--oii-gold-500);
}

.oii-text-navy {
  color: var(--oii-navy-900);
}

.oii-muted {
  color: var(--oii-slate);
}

.oii-max-760 {
  max-width: 760px;
}

.oii-max-920 {
  max-width: 920px;
}

.oii-mx-auto {
  margin-inline: auto;
}

.oii-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* ------------------------------
   11. WordPress Alignment
------------------------------ */

.alignwide {
  max-width: min(100% - 2rem, 1400px);
  margin-inline: auto;
}

.alignfull {
  width: 100%;
  max-width: none;
}

/* ============================================================
   OII4 CINEMATIC PAGE SYSTEM
============================================================ */

.oii-home,
.site-main {
  position: relative;
  isolation: isolate;
}

/* Section spacing rhythm */

.oii-section {
  position: relative;
  padding-block: clamp(5rem, 9vw, 9rem);
}

/* Soft atmospheric overlays */

.oii-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  z-index: -1;
}

/* Alternating section depth */

.oii-section:nth-child(odd)::before {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(212,166,98,0.06),
      transparent 34%
    );
}

.oii-section:nth-child(even)::before {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(18,54,87,0.05),
      transparent 36%
    );
}

/* Better content width rhythm */

.oii-container {
  position: relative;
  z-index: 2;
}

/* Better image rendering */

img {
  image-rendering: auto;
  backface-visibility: hidden;
}

/* Premium hover feel */

a,
button,
.card,
.home-motion-featured,
.home-engage-card,
.home-voice-card,
.featured-item {
  transition:
    transform var(--transition-med),
    box-shadow var(--transition-med),
    border-color var(--transition-med),
    background var(--transition-med),
    opacity var(--transition-med);
}

/* Cinematic reveal softness */

.oii-reveal {
  will-change: transform, opacity;
}

/* Smooth section edge blending */

.home-motion,
.home-proof,
.home-program-film,
.home-engage,
.home-featured {
  overflow: clip;
}

/* Noise texture */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
  opacity: 0.025;
  background-image:
    radial-gradient(#000 0.45px, transparent 0.45px);
  background-size: 5px 5px;
}

/* Better selection */

::selection {
  background: rgba(212,166,98,0.26);
  color: #06111f;
}