/* infinite-sea.com — plain CSS, no build step */

/* --- Theme --- */
:root {
  --bg: #ffffff;
  --text: #33424b;
  --heading: #142b38;
  --muted: #5a6b74;
  --muted-2: #7a8a92;
  --accent: #1c6ea4;
  --accent-hover: #2b86c5;
  --border: #e8edf0;
  --card-bg: #ffffff;
  --callout-bg: #f7fafb;
  --chip-bg: #e6f0f5;
}

[data-theme="dark"] {
  --bg: #0b1720;
  --text: #d7e2e8;
  --heading: #f2f6f8;
  --muted: #9db0b9;
  --muted-2: #7d919a;
  --accent: #5cc3f5;
  --accent-hover: #7fd2ff;
  --border: #1c2e38;
  --card-bg: #0f1f29;
  --callout-bg: #101f28;
  --chip-bg: #123141;
}

/* --- Reset & base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.7;
  padding: 2rem 1.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Layout --- */
main {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* --- Nav --- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.wordmark {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--heading) !important;
}

.wordmark:hover {
  color: var(--heading) !important;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Home has no nav wordmark (the hero right below it already says "Infinite
   Sea, Inc." - showing the name twice back to back read as redundant), so
   push the nav links to the same right-aligned spot they sit at on every
   other page instead of letting them collapse to the left. */
.site-nav--home .nav-links {
  margin-left: auto;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-links a[aria-current="page"] {
  color: var(--accent);
}

/* --- Theme toggle --- */
.theme-toggle {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
}

/* --- Header / Hero --- */
header {
  padding-top: 3rem;
  text-align: center;
}

/* Subpages (Seamark, AI Solutions) use a lighter header - no big animated
   logo, smaller top padding since the nav already sits above it. */
.page-header {
  padding-top: 1rem;
  text-align: center;
}

h1 {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  color: var(--heading);
}

.tagline {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.location {
  font-size: 0.9rem;
  color: var(--muted-2);
}

/* --- Logo ---
   The Edge Animate composition manages its own inline width/height/transform
   on .logo and recomputes them on load in a way that doesn't reserve real
   layout space for its scaled visual size (transform doesn't affect layout),
   so it can visually bleed past its own box. Fix: a fixed-size, centered,
   overflow-hidden frame that clips/windows into whatever .logo renders,
   instead of trying to size .logo directly.

   The frame is a wide rectangle, not a square: pixel-scanned
   images/logo-transparent.png directly and found the actual infinity-symbol
   artwork occupies x:[14,494] y:[157,358] of the 500x500 canvas - a ~2.4:1
   wide, short shape. A square frame can only ever show about half the width
   (confirmed - it cropped to a single lobe). aspect-ratio here matches that
   real content box (with a little vertical margin) instead of guessing. */
.logo-frame {
  /* Below 500px: full-bleed, breaking out of main's padded column.
     AdobeEdge measures raw window width (not this element's own box) to
     decide how big to render the composition, so on narrow screens the
     frame has to be at least as wide as the viewport itself or it clips
     the render - a percentage-of-container width isn't enough. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 480 / 210;
  overflow: hidden;
  position: relative;
}

@media (min-width: 500px) {
  .logo-frame {
    /* At/above 500px, AdobeEdge's render caps at its native 500x500
       regardless of viewport, so a plain centered box (no breakout needed)
       at least that wide reliably contains the full composition. */
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* AdobeEdge always auto-scales the composition to roughly match the browser
   window's width (capped at its native 500px), regardless of the width/
   height/maxW options passed to loadComposition - confirmed by inspecting
   its own inline styles at several viewport widths. Its transform-origin is
   also always "0 0" (top-left), so naive centering breaks once the scale
   isn't 1.

   Centering this reliably needs two independent fixes:
   1. transform-origin: center - makes AdobeEdge's own scale (whatever value
      it picks) shrink/grow around the box's own center instead of its
      top-left corner.
   2. Actually centering the (always 500x500, pre-scale) box inside a frame
      that's frequently *smaller* than 500x500. `inset:0; margin:auto` looks
      like the standard way to do this, but CSS's over-constrained-absolute-
      position spec refuses to let auto margins resolve negative - when the
      box is bigger than its container (exactly our case), the deficit
      collapses onto one side instead of splitting evenly, which re-breaks
      centering (confirmed via computed style: margin came out
      "-90px -180px -90px 0" instead of an even split). Fixed negative
      margins don't have that restriction, so top/left 50% + a margin of
      -250px (half of the known, constant 500x500 box) centers correctly
      regardless of frame size or AdobeEdge's current scale.

   dark mode: the composition's stage also sets its own inline
   `background-color: rgb(255,255,255)` (from its "fill" config) - in
   practice the ocean layer always fully covers the stage so this never
   actually shows, but neutralized here too for safety. The mask image
   itself (images/logo-transparent.png) is swapped for a dark-recolored
   variant by theme.js at runtime, since the file path is baked into
   logo-animate_edge.js and can't be swapped via CSS alone. */
.logo-frame .logo {
  position: absolute !important;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -250px;
  transform-origin: center !important;
  background-color: transparent !important;
}

/* --- Section headings --- */
h2 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* --- Body text --- */
section p {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 1rem;
}

/* --- Step lists (Seamark's 3-step, AI Solutions' 6-step) - shared style,
   used on any numbered process list via class="steps" on the <ol> itself,
   rather than duplicating this per section. --- */
.steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.steps li {
  counter-increment: step;
  font-size: 1rem;
  color: var(--text);
  padding-left: 2.25rem;
  position: relative;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--chip-bg);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps strong {
  color: var(--heading);
  font-weight: 600;
}

/* --- Service cards (Home page) --- */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .services {
    grid-template-columns: 1fr 1fr;
  }
}

.service-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  background-color: var(--card-bg);
}

.service-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 0.5rem;
}

.service-card p {
  font-size: 0.9375rem;
  color: var(--text);
  margin-bottom: 1rem;
}

.service-card a {
  font-weight: 600;
  font-size: 0.9rem;
}

/* --- Examples list (AI Solutions page) --- */
.examples ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.examples li {
  padding-left: 1.25rem;
  position: relative;
  color: var(--text);
}

.examples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
}

/* --- Cross-link callout (bottom of Seamark/AI Solutions pages) --- */
.cross-link {
  font-size: 0.9375rem;
  color: var(--muted);
  padding: 1.25rem;
  border-radius: 12px;
  background-color: var(--callout-bg);
}

/* --- Coming-soon badge (Seamark link isn't live yet) --- */
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background-color: var(--chip-bg);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
}

/* --- Links --- */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-hover);
}

/* --- Footer --- */
footer {
  margin-top: 1rem;
  padding-bottom: 4rem;
  text-align: center;
}

footer p {
  font-size: 0.8125rem;
  color: var(--muted-2);
}

/* --- Responsive --- */
@media (max-width: 480px) {
  body {
    padding: 1.5rem 1.25rem;
  }

  header {
    padding-top: 2rem;
  }

  main {
    gap: 2rem;
  }

  h1 {
    font-size: 2rem;
  }
}