/* ==========================================================================
   PRISM Aviation — base tokens & reset
   Loaded on every page. Page/section-specific rules live in their own
   files under /sections/ and are scoped with a modifier class — never
   edit shared rules here to fix one section.

   Color sourcing:
   - Light surfaces, accent teal, and type follow the Altariss style guide
     (Deep Ink / Accent Teal / Light Blue / Warm Bone).
   - Dark surfaces (bands, footer, modals-on-dark) follow the Octarine PM
     dark theme system (neutral near-black, not tinted navy).
   ========================================================================== */

:root {
  /* accent — Altariss Accent Teal */
  --prism-teal: #51B4D5;
  --prism-teal-light: #7DC7E0;
  --prism-teal-dim: rgba(81, 180, 213, 0.14);

  /* light surfaces — Altariss */
  --prism-ink: #1A1815;         /* Deep Ink — body text on light */
  --prism-paper: #FFFFFF;       /* cream — cards on light */
  --prism-white: #F4F8F9;       /* Warm Bone — page background on light */
  --prism-light-blue: #DCECF3;  /* Light Blue — tinted panels */
  --prism-grey: #8F8A82;        /* warm neutral — secondary text on light */

  --prism-navy: #0D2050;        /* logo wordmark only — not used as a UI color */

  /* dark surfaces — Octarine PM dark system */
  --prism-band: #060608;        /* page/band background */
  --prism-band-card: #1C1C1F;   /* card / module on dark */
  --prism-band-border: #212122;
  --prism-band-hover: #232326;
  --prism-band-inset: #16191F;
  --prism-band-text: #EBEBEB;                    /* primary text on dark */
  --prism-band-text-body: rgba(255, 255, 255, 0.85);
  --prism-band-text-secondary: rgba(255, 255, 255, 0.5);
  --prism-band-text-faint: rgba(255, 255, 255, 0.3);
  --prism-band-line: rgba(255, 255, 255, 0.08);

  /* type — IvyOra Display (Adobe Fonts kit nbx8icz, loaded in index.php)
     for headings, Outfit for body copy. */
  --font-display: "ivyora-display", Georgia, serif;
  --font-body: "Outfit", -apple-system, "Segoe UI", sans-serif;

  --body-size: 17px;
  /* "h3" — About statement and every section heading below it */
  --h3-size: clamp(32px, 4vw, 40px);
  /* hero subtagline size — also used by About, Our Fleet and Locations headings */
  --subtag-size: clamp(26px, 3.6vw, 50px);
  --eyebrow-size: 14px;

  /* shape — Altariss spec */
  --radius-pill: 6px;
  --radius-card: 8px;

  --gutter: clamp(24px, 5vw, 72px);
}

@media (max-width: 720px) {
  :root {
    --body-size: 17px;
  }
}

* { box-sizing: border-box; }

/* Altariss rule: no italics anywhere — emphasis is weight or teal, never italics */
* { font-style: normal !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: var(--prism-band-text-body);
  background: var(--prism-band);
  -webkit-font-smoothing: antialiased;
}

/* Form controls don't inherit the page font by default — without this,
   icon-only buttons (the menu toggle, the modal/panel close "×") fall
   back to the browser's own UI font instead of Outfit. */
button,
input,
select,
textarea {
  font-family: inherit;
}

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

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* ---- shared layout ---- */

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

a { color: inherit; }

h1, h2, h3 { text-wrap: balance; }

/* ---- shared panel (boxed section) ----
   A solid-background, large-radius container inset from the page edges —
   a "floating card" treatment for a full section, rather than edge-to-edge.
   Reused across the site wherever a section should read as its own module
   sitting on the page background (Altariss "Our Track Record" reference).
   Usage: add `.panel-section` alongside a section's own class, e.g.
   <section class="corp-dna panel-section">. Nest `.panel-section-inner`
   for the content wrapper so max-width/grid rules stay separate from the
   panel's own background/radius/padding. */

.panel-section {
  background: var(--prism-band-card);
  border: 1px solid var(--prism-band-border);
  border-radius: 28px;
  margin-inline: var(--gutter);
  padding-block: clamp(56px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}

.panel-section-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(24px, 4vw, 64px);
}

@media (max-width: 720px) {
  .panel-section {
    margin-inline: 16px;
    border-radius: 20px;
  }
}

/* ---- shared button ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-teal {
  background: var(--prism-teal);
  color: var(--prism-ink);
}
.btn-teal:hover { background: var(--prism-teal-light); }

.btn-outline {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
}
.btn-outline:hover { background: var(--prism-teal-dim); }

.btn-ghost {
  background: transparent;
  color: var(--prism-band-text);
  padding: 13px 0;
}
.btn-ghost:hover { color: var(--prism-teal); }

/* ---- shared section heading ---- */

.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h3-size);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--prism-band-text);
}

/* Altariss emphasis rule: weight or teal, never italics/bold-heavy */
strong, b {
  font-weight: 500;
  color: var(--prism-teal);
}

/* focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--prism-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- huge, barely-there backdrop word (Fleet, Locations) ----
   Sits behind a section's content; assets/js/bg-word-parallax.js drifts it
   sideways as the section scrolls. data-from="left" drifts left → right,
   anything else right → left. */
.bg-word {
  position: absolute;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20vw;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #fff;
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 767px) {
  .bg-word { font-size: 26vw; top: 2vh; }
}

/* ---- film grain — a very faint, flickering noise over the whole page so
   the blacks read as rich rather than flat. Pure CSS/SVG, no image file. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 300;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(4%, -7%); }
  60%  { transform: translate(-3%, 8%); }
  80%  { transform: translate(7%, 2%); }
  100% { transform: translate(-5%, -4%); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}