/* ==========================================================================
   OCEES - Design tokens and base styles
   --------------------------------------------------------------------------
   Ported 1:1 from the approved React build:
   otecorporation-ocees/app/globals.css  (:root, @theme inline, base element
   rules). Values are deliberately identical so the WordPress build and the
   React reference stay comparable.
   ========================================================================== */

:root {
	/* --- Palette ---------------------------------------------------------- */
	--ocees-background: #f2f3ef;
	--ocees-foreground: #081d2b;
	--ocees-card: #ffffff;
	--ocees-primary: #071a29;
	--ocees-primary-foreground: #f7fbfc;
	--ocees-secondary: #dbeef0;
	--ocees-muted: #e5e8e5;
	--ocees-muted-foreground: #53656e;
	--ocees-accent: #0cbac5;
	--ocees-accent-foreground: #041a23;
	--ocees-border: #bcc7c8;

	/* --- Type ------------------------------------------------------------- */
	--ocees-font-sans: Arial, Helvetica, sans-serif;
	--ocees-font-mono: "Courier New", Courier, monospace;

	/* --- Rhythm ----------------------------------------------------------- */
	--ocees-radius: 0;
	--ocees-section-pad-block: clamp(84px, 10vw, 160px);
	--ocees-section-pad-inline: clamp(22px, 6vw, 100px);

}

/* --- Base --------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--ocees-background);
	color: var(--ocees-foreground);
	font-family: var(--ocees-font-sans);
	/* The React build inherits 1.5 from Tailwind's preflight (`html`), which
	   is the effective default for anything that does not set its own
	   line-height. Mirrored here so unstyled copy matches the reference. */
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body a {
	color: inherit;
	text-decoration: none;
}

::selection {
	background: var(--ocees-accent);
	color: var(--ocees-primary);
}

/* --- Shared section primitives ------------------------------------------- *
 * The React build reuses two utilities across most of the page. They are
 * mirrored here rather than restated per section.
 */

/* React `.section-pad` - the page's one vertical rhythm. The `.e-con`
   compound is what lets it win over Elementor's own container padding. */
.ocees-section,
.ocees-section.e-con {
	padding: var(--ocees-section-pad-block) var(--ocees-section-pad-inline);
}

/* React `.kicker, .section-label` - the small uppercase eyebrow above a
   heading. Set through Elementor's CSS Classes field on a Heading widget, so
   this targets both the widget's own heading element and a bare element
   carrying the class. `color: inherit` is what lets the label take the
   section's text colour instead of Elementor's global primary. */
.ocees-label,
.ocees-label .elementor-heading-title {
	margin: 0;
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: 0.71rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* The big section headline. One rule in the reference, shared by five
   sections: `.technology-copy h2, .swac-copy h2, .engineering-heading h2,
   .experience-heading h2, .team-heading h2`. (The Platform section's headline
   is a different size and keeps its own rule.) */
.ocees-heading-lg .elementor-heading-title {
	margin: 22px 0 34px;
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: clamp(3rem, 5.2vw, 6.2rem);
	font-weight: 500;
	line-height: 0.91;
	letter-spacing: -0.065em;
}

/* Hello Elementor's reset styles bare <figcaption>: #333, italic,
   line-height 1.4, font-size 16px. The reference has no such rule - its
   figure captions simply inherit the page - so this hands inheritance back
   for the technical drawings. Scoped to Elementor content, and each section
   still sets whatever size the design calls for. */
.elementor figcaption {
	color: inherit;
	font-size: inherit;
	font-style: normal;
	line-height: inherit;
}

/* React `.drawing-copyright` - the small monospace credit that sits on the
   technical drawings and renderings. Typography only; each section positions
   it itself. */
.ocees-credit,
.ocees-credit .elementor-heading-title {
	display: block;
	margin: 0;
	color: #557078;
	font: 700 0.58rem / 1.4 var(--ocees-font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Icons --------------------------------------------------------------- *
 * The design's icons are Lucide (lucide-react v1.31.0): 24x24 viewBox, 2px
 * stroke, round caps and joins, `stroke="currentColor"`. The source files are
 * kept in `assets/icons/lucide/` and imported into the media library, so they
 * can be picked from Elementor's icon control (Upload SVG) like any other
 * icon. Elementor inlines and sanitises them on render, which keeps
 * `currentColor` working - so an icon takes its colour from whatever element
 * contains it, exactly as in the React build.
 *
 * The files keep Lucide's own `class="lucide lucide-<name>"`, which survives
 * Elementor's sanitiser and gives us the hook below. Elementor's own SVG rule
 * sizes icons to 1em; each section's stylesheet sets the pixel size the
 * design calls for.
 */
svg.lucide {
	display: block;
	fill: none;
	stroke: currentColor;
}

/* Mirrors the React build's reduced-motion block. Scoped to our own
   components so it never interferes with Elementor's editor UI. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	[class*="ocees-"],
	[class*="ocees-"] * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}