/*
Theme Name: CR WP Theme
Theme URI: https://example.com
Author: CR WP
Description: Custom theme with header, hero section, and footer. Design system inspired by enterprise IT sites (deep navy/blue palette, Inter type, pill CTAs).
Version: 1.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cr-wp-theme
*/

:root {
  /* Re-skinned to match the site-wide 2026 design system (see
     src/tailwind.css): near-black "ink" + violet/orange accents.
     Every Flexible Sections layout (template-parts/flexible/) and the
     shared card components below reference these variables. */
  --color-primary: #4f46e5;
  --color-primary-dark: #4338ca;
  --color-navy: #0a0a0f;
  --color-navy-soft: #16161f;
  /* Dark-by-default body: text/bg swapped from the original light
     scheme (both now inverted — see body {} below). --color-muted-on-dark
     is now just what --color-muted always is; kept as an alias so
     anything still referencing it explicitly doesn't break. */
  --color-text: rgba(255, 255, 255, 0.92);
  --color-muted: rgba(255, 255, 255, 0.65);
  --color-muted-on-dark: rgba(255, 255, 255, 0.65);
  --color-bg: var(--color-navy);
  --color-bg-alt: #f6f6f8;
  --color-border: #e6e6ea;
  --color-accent-2: #ff6b4a;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* No dedicated heading font by default — falls back to --font-body.
     Set from wp-admin (General > Theme Style) to use a distinct
     heading typeface without touching this file. */
  --font-heading: var(--font-body);
}

/*
 * Everything below is a base reset (element selectors, not classes) —
 * kept deliberately, NOT part of the "remove custom classes" cleanup.
 * Preflight is intentionally not loaded (see src/tailwind.css) since
 * this stylesheet still needs to provide sane browser defaults, and
 * many Flexible Sections layouts rely on the h1-h4 fluid-size fallback
 * below for any heading that doesn't set its own explicit size.
 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/*
 * Wrapped in the "base" cascade layer so it acts as a fallback default,
 * not a hard override: any normal-priority Tailwind utility class from
 * src/tailwind.css (@layer theme, components, utilities) wins over these
 * plain element-selector rules regardless of specificity, since it's
 * declared in a later layer. Without this wrapper, these bare h1-h4 rules
 * would sit unlayered — and per the CSS Cascade Layers spec, unlayered
 * rules always beat ANY layered rule, even a more-specific class selector
 * — silently reverting every Tailwind-styled heading's size/weight back
 * to these defaults. This block is still what styles headings on pages
 * that don't opt into a Tailwind heading class (e.g. plain post content).
 */
@layer base {
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
  }

  h1 {
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
    font-weight: 600;
    line-height: 1.05;
  }

  h2 {
    font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
  }

  h3 {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
  }

  h4 {
    font-size: 1.125rem;
    font-weight: 600;
  }
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

/*
 * Background animation (General Settings > Theme Style > Enable
 * Background Animation). Faint, full-width glowing line waves drifting
 * slowly behind the page content — fixed + negative z-index so it never
 * affects layout, and only `transform` is animated (GPU-composited, no
 * layout/paint cost per frame regardless of how long it runs). Each wave
 * is a single static SVG path drawn at double width (two copies of the
 * same repeating pattern side by side); animating from translateX(0) to
 * translateX(-50%) slides exactly one copy's width, so it loops with no
 * visible seam. filter:drop-shadow() on the path is computed once against
 * that static shape, not per frame — the GPU just re-composites the
 * already-glowing layer as it translates, same reasoning as the blurred
 * orbs this replaced.
 *
 * When enabled, `.cr-bg-animation-on` is also added to <body> (see
 * header.php) so dark Flexible Section backgrounds (below, in
 * flexible-base.css) can go transparent — otherwise every section's own
 * opaque background would paint over the waves and cut them into
 * disconnected slivers only visible in the gaps (e.g. just the hero).
 */
.cr-bg-animation {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.cr-bg-wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 220px;
  fill: none;
  will-change: transform;
}

.cr-bg-wave path {
  stroke-width: 1.5;
  stroke-opacity: 0.2;
}

.cr-bg-wave-1 {
  top: 8%;
  animation: cr-bg-wave-drift 60s linear infinite;
}

.cr-bg-wave-1 path {
  stroke: var(--color-primary);
  filter: drop-shadow(0 0 6px var(--color-primary)) drop-shadow(0 0 16px var(--color-primary));
}

.cr-bg-wave-2 {
  top: 42%;
  animation: cr-bg-wave-drift 80s linear infinite reverse;
}

.cr-bg-wave-2 path {
  stroke: var(--color-accent-2);
  filter: drop-shadow(0 0 6px var(--color-accent-2)) drop-shadow(0 0 16px var(--color-accent-2));
}

.cr-bg-wave-3 {
  top: 76%;
  animation: cr-bg-wave-drift 95s linear infinite;
}

.cr-bg-wave-3 path {
  stroke: var(--color-primary-dark);
  filter: drop-shadow(0 0 6px var(--color-primary-dark)) drop-shadow(0 0 16px var(--color-primary-dark));
}

@keyframes cr-bg-wave-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Respect reduced-motion preference — the waves stay put but visible,
   rather than either hiding them or ignoring the accessibility setting. */
@media (prefers-reduced-motion: reduce) {
  .cr-bg-wave {
    animation: none;
  }
}