/* === Fonts === */
/* Self-hosted Red Hat Text + Mono, latin + latin-ext (GDPR, Czech diacritics) */
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Red Hat Text'), url('../assets/fonts/red-hat-text-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Red Hat Text Medium'), url('../assets/fonts/red-hat-text-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Red Hat Text SemiBold'), url('../assets/fonts/red-hat-text-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Red Hat Text Bold'), url('../assets/fonts/red-hat-text-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Red Hat Mono Medium'), url('../assets/fonts/red-hat-mono-medium.woff2') format('woff2');
}

/* === Tokens === */
/* Figma scale-drift normalized: 6.98→7px, 1.163→1px. Units: rem (type/spacing), px (radii/borders). */
:root {
  /* Colors — Figma variables (8) */
  --rw-color-primary-blue: #0B1A49;
  --rw-color-primary-green: #093B4D;
  --rw-color-primary-yellow: #FFCE03;
  --rw-color-secondary-900: #004C45;
  --rw-color-white: #FFFFFF;
  --rw-color-grey-01: #646971;
  --rw-color-grey-02: #81858D;
  --rw-color-bg-gray: #F4F4F4;

  /* Colors — derived (6) */
  --rw-color-primary-yellow-hover: #CEA600;
  --rw-color-ink-deep: #071438;
  --rw-color-border: rgba(70, 75, 80, 0.3);
  --rw-color-placeholder: rgba(109, 109, 109, 0.6);
  --rw-color-glass-bg: rgba(255, 255, 255, 0.2);
  --rw-color-glass-bg-hover: rgba(255, 255, 255, 0.4);
  --rw-color-dark-surface: #00050C;
  --rw-color-on-dark-muted: rgba(232, 232, 233, 0.7);
  --rw-color-bg-mist: #E8E8E9;                        /* product-cards section bg (Figma 693:434) */
  --rw-color-border-on-dark: rgba(255, 255, 255, 0.1); /* faq-accordion dividers */

  /* Typography — families */
  --rw-font-text: 'Red Hat Text', system-ui, sans-serif;
  --rw-font-mono: 'Red Hat Mono', ui-monospace, monospace;

  /* Typography trackings use em (percentage) so they scale with font-size.
     Figma source values (node 544:2741): h1/h2/h3 = -4%, p1 = -1.2%, p2 = -1.2%, caption = +4%.
     Sizes use clamp(mobile 390px, fluid, desktop 1440px) — mobile floors audited from
     Figma mobile frames (see plans/260424-1323-unify-design-tokens-and-mobile-sizes/
     reports/audit-mobile-specs.md). No mobile h1 variable exists in Figma; h1 collapses to h2-m. */

  /* Typography — h1 (32 → 68px) */
  --rw-h1-size: clamp(2.25rem, 3.37vw + 1.13rem, 4.25rem);
  --rw-h1-line: clamp(2.5rem, 3.37vw + 1.38rem, 4.625rem);
  --rw-h1-tracking: -0.04em;

  /* Typography — display (36 → 80px). Used by page-intro-hero h1. */
  --rw-display-size: clamp(2.25rem, 4.13vw + 1.28rem, 5rem);
  --rw-display-line: clamp(2.625rem, 4.32vw + 1.61rem, 5.5rem);
  --rw-display-tracking: -0.04em;

  /* Typography — h1 mid (36 → 58px). Used by careers-hero h1. */
  --rw-h1-md-size: clamp(2.25rem, 2.10vw + 1.74rem, 3.625rem);
  --rw-h1-md-line: clamp(2.375rem, 2.10vw + 1.86rem, 3.75rem);
  --rw-h1-md-tracking: -0.04em;

  /* Typography — h2 (32 → 70px) */
  --rw-h2-size: clamp(2rem, 3.56vw + 1.11rem, 4.375rem);
  --rw-h2-line: clamp(2.25rem, 3.84vw + 1.29rem, 4.8125rem);
  --rw-h2-tracking: -0.04em;

  /* Typography — h3 (26 → 44px) */
  --rw-h3-size: clamp(1.625rem, 1.69vw + 1.21rem, 2.75rem);
  --rw-h3-line: clamp(1.75rem, 2.06vw + 1.25rem, 3.125rem);
  --rw-h3-tracking: -0.04em;

  /* Typography — p1 (16 → 18px body) */
  --rw-p1-size: clamp(1rem, 0.19vw + 0.95rem, 1.125rem);
  --rw-p1-line: clamp(1.5rem, 0.37vw + 1.41rem, 1.75rem);
  --rw-p1-tracking: -0.012em;

  /* Typography — p2 (16px body, Figma 693:7420). Static: mobile p2 collapses to p1. */
  --rw-p2-size: 1rem;
  --rw-p2-line: 1.5rem;
  --rw-p2-tracking: -0.012em;

  /* Typography — caption (12 → 14px mono uppercase) */
  --rw-caption-size: clamp(0.75rem, 0.19vw + 0.70rem, 0.875rem);
  --rw-caption-line: clamp(0.75rem, 0.19vw + 0.70rem, 0.875rem);
  --rw-caption-tracking: 0.04em;

  /* Spacing (8px rhythm) */
  --rw-space-xs: 0.5rem;
  --rw-space-sm: 1rem;
  --rw-space-md: 1.5rem;
  --rw-space-lg: 2rem;
  --rw-space-xl: 2.5rem;
  --rw-space-2xl: 4rem;
  --rw-space-3xl: 6rem;

  /* Radii */
  --rw-radius-xs: 4px;
  --rw-radius-sm: 6px;
  --rw-radius-md: 7px;
  --rw-radius-lg: 10px;

  /* Border */
  --rw-border-width: 1px;

  /* Layout — rem bounds so values scale with root font-size. Mobile floors
     verified at 390px Figma (see audit-mobile-specs.md). */
  --rw-container-max: 1440px;
  --rw-container-px: clamp(1.25rem, 3.75vw + 0.33rem, 3.75rem); /* 20 → 60 */
  --rw-section-py: clamp(6rem, 4vw + 5rem, 7.5rem); /* 96 → 120 (legacy fallback) */

  /* Block padding system — defaults consumed by .rw-section. Per-instance
     overrides come from the editor's "Spacing" attrs, rendered as inline
     CSS vars by inc/block-helpers.php :: rw_block_padding_style(). */
  --rw-block-pt-default: 120px;
  --rw-block-pb-default: 120px;
  --rw-block-ptm-default: 80px;
  --rw-block-pbm-default: 80px;
  --rw-grid-cols: 12;
  --rw-grid-gap: var(--rw-space-md);

  /* Breakpoints */
  --rw-bp-sm: 640px;
  --rw-bp-md: 768px;
  --rw-bp-lg: 1024px;
  --rw-bp-xl: 1280px;

  /* Effects */
  --rw-blur-glass: 50px;

  /* Gradients */
  /* WHY: Figma stacks 4× top layers (each 0.5 alpha @ 0.6 opacity) and 3× bottom layers (each 1.0 alpha @ 0.6 opacity).
     Pre-composited for a single gradient: top 1 − (1 − 0.3)^4 ≈ 0.76, bottom 1 − (1 − 0.6)^3 ≈ 0.936. */
  --rw-gradient-hero-overlay-top:    linear-gradient(to bottom, rgba(0, 5, 12, 0.76), rgba(0, 5, 12, 0));
  --rw-gradient-hero-overlay-bottom: linear-gradient(to bottom, rgba(0, 5, 12, 0), rgba(0, 5, 12, 0.936));

  /* Form state — provisional, pending design handoff */
  --rw-state-focus-ring: 0 0 0 3px rgba(255, 206, 3, 0.45);
  --rw-state-hover-opacity: 0.85;
  --rw-state-disabled-opacity: 0.5;
  --rw-color-error: #B00020;
  --rw-color-success: #0E7A4A;
}

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

body {
  margin: 0;
  font-family: var(--rw-font-text);
  color: var(--rw-color-primary-green);
  background: var(--rw-color-bg-gray);
}

/* === Base Typography === */
/* WHY margin:0 on headings: avoid double-margin under Blockstudio blocks */
h1 {
  margin: 0;
  font-family: var(--rw-font-text);
  font-weight: 700;
  font-size: var(--rw-h1-size);
  line-height: var(--rw-h1-line);
  letter-spacing: var(--rw-h1-tracking);
}
h2 {
  margin: 0;
  font-family: var(--rw-font-text);
  font-weight: 700;
  font-size: var(--rw-h2-size);
  line-height: var(--rw-h2-line);
  letter-spacing: var(--rw-h2-tracking);
}
h3 {
  margin: 0;
  font-family: var(--rw-font-text);
  font-weight: 700;
  font-size: var(--rw-h3-size);
  line-height: var(--rw-h3-line);
  letter-spacing: var(--rw-h3-tracking);
}
p {
  font-family: var(--rw-font-text);
  font-weight: 400;
  font-size: var(--rw-p1-size);
  line-height: var(--rw-p1-line);
  letter-spacing: var(--rw-p1-tracking);
}
a {
  color: var(--rw-color-primary-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: opacity .15s ease;
}
a:hover { opacity: var(--rw-state-hover-opacity); }
a:focus-visible {
  outline: none;
  box-shadow: var(--rw-state-focus-ring);
  border-radius: var(--rw-radius-xs);
}

/* === Buttons === */
/* Primary button — yellow surface, ink-deep text (Figma CTA default).
   Targets core Gutenberg button markup + our own .rw-btn utility so
   editor previews and theme markup share one style source. */
.wp-block-button__link,
.rw-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rw-space-xs);
  padding: 1rem 1.5rem;
  font-family: var(--rw-font-text);
  font-weight: 600;
  font-size: var(--rw-p1-size);
  line-height: 1;
  color: var(--rw-color-ink-deep);
  background: var(--rw-color-primary-yellow);
  border: var(--rw-border-width) solid transparent;
  border-radius: var(--rw-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.wp-block-button__link:hover,
.rw-btn:hover {
  background: var(--rw-color-primary-yellow-hover);
  opacity: 1; /* override generic `a:hover` opacity rule above */
}
.wp-block-button__link:focus-visible,
.rw-btn:focus-visible {
  outline: none;
  box-shadow: var(--rw-state-focus-ring);
}
.wp-block-button__link[disabled],
.rw-btn[disabled] {
  opacity: var(--rw-state-disabled-opacity);
  cursor: not-allowed;
}

/* Outline/secondary variant — Figma 693:7719.
   Light ink-60 border, green text; fills on hover. */
.wp-block-button.is-style-outline .wp-block-button__link,
.rw-btn--outline {
  background: transparent;
  color: var(--rw-color-primary-green);
  border-color: rgba(70, 75, 80, 0.3);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.rw-btn--outline:hover {
  background: var(--rw-color-primary-green);
  color: var(--rw-color-white);
  border-color: var(--rw-color-primary-green);
}

/* WHY uppercase: Figma caption style (mono callouts) */
.rw-caption {
  font-family: var(--rw-font-mono);
  font-weight: 500;
  font-size: var(--rw-caption-size);
  line-height: var(--rw-caption-line);
  letter-spacing: var(--rw-caption-tracking);
  text-transform: uppercase;
}

/* Eyebrow — reusable mono label, tight line-height for pill-style markers. */
.rw-eyebrow {
  margin: 0;
  display: inline-flex; align-items: center; gap: var(--rw-space-xs);
  font-family: var(--rw-font-mono); font-weight: 500;
  font-size: var(--rw-caption-size);
  line-height: 1;
  letter-spacing: var(--rw-caption-tracking);
  text-transform: uppercase;
  color: var(--rw-color-grey-01);
}
/* Yellow square marker shipped with every .rw-eyebrow. Blocks may override colour
   for dark-surface use via e.g. .rw-eyebrow--on-dark { color: #fff; }. The mark
   stays yellow for brand consistency. */
.rw-eyebrow .eyebrow-mark {
  width: 11px; height: 11px;
  background: var(--rw-color-primary-yellow);
  border-radius: 1px;
  flex: none;
}
@media (max-width: 767px) {
  .rw-eyebrow { letter-spacing: 0.048rem; }
  /* Mobile: tighten H2 tracking globally; per-block overrides as needed. */
  :root { --rw-h2-tracking: -0.064rem; }
  /* Mobile: primary button font-size 14px (applies to .rw-btn + .wp-block-button__link). */
  .rw-btn, .wp-block-button__link { font-size: 14px; }
}

/* CTA-stack — vertical pair of primary CTA + microcopy (e.g. "Free, 30 minutes").
   Used by how-it-works, integrations CTA variant. */
.rw-cta-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Microcopy — small note paired with a primary CTA.
   Default suits light surfaces; --on-dark for dark backgrounds. */
.rw-microcopy {
  margin: 0;
  font-family: var(--rw-font-text);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--rw-color-grey-01);
}
.rw-microcopy--on-dark { color: rgba(232, 232, 233, 0.7); }

/* Dotted halftone decoration — shared by feature-grid, stats-hero, etc.
   Blocks override placement (.rw-block-X .bg-dots { left/top/... }). */
.bg-dots {
  position: absolute;
  width: 434px; height: 323px; /* source asset size */
  background: url('../assets/images/dots-pattern.svg') no-repeat center / contain;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* === Layout utilities === */
.rw-container { max-width: var(--rw-container-max); margin-inline: auto; padding-inline: var(--rw-container-px); }
/* Block vertical padding — defaults to 120/120 desktop, 80/80 mobile (≤767px).
   Editor per-instance overrides arrive via inline --rw-block-pt/pb/ptm/pbm.
   Mobile fallback chain: explicit mobile var → desktop var → mobile default. */
.rw-section   {
	padding-top: var(--rw-block-pt, var(--rw-block-pt-default));
	padding-bottom: var(--rw-block-pb, var(--rw-block-pb-default));
	/* Offset deep-link jumps so the sticky header doesn't cover the section top. */
	scroll-margin-top: var(--rw-header-h, 4.5rem);
}
@media (max-width: 767px) {
	.rw-section {
		padding-top: var(--rw-block-ptm, var(--rw-block-pt, var(--rw-block-ptm-default)));
		padding-bottom: var(--rw-block-pbm, var(--rw-block-pb, var(--rw-block-pbm-default)));
	}
}
.rw-grid      { display: grid; grid-template-columns: repeat(var(--rw-grid-cols), 1fr); gap: var(--rw-grid-gap); }

/* Section background color — opt-in via rw_block_bg_style() helper.
   Emits data-bg-color="..." on the section. Helper paired with block.json bg_color select. */
.rw-section[data-bg-color="f4f4f4"] { background: #F4F4F4; }
.rw-section[data-bg-color="e8e8e9"] { background: #E8E8E9; }
.rw-section[data-bg-color="f2f2f2"] { background: #F2F2F2; }

/* === Shared video dialog (rwDialog helper in global-scripts.js) ===
   Used by hero-media, testimonials-slider, and any block needing a modal video. */
dialog.rw-video-dialog {
	padding: 0;
	border: none;
	background: #000;
	max-width: min(90vw, 70rem);
	width: 100%;
	border-radius: var(--rw-radius-lg);
	overflow: hidden;
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}
dialog.rw-video-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog.rw-video-dialog video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 85vh;
}
dialog.rw-video-dialog .dialog-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	width: 2rem;
	height: 2rem;
	background: rgba(0, 0, 0, 0.6);
	color: var(--rw-color-white);
	border: none;
	border-radius: 50%;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

/* === Form fields — shared underline-style inputs ===
   Reused by contact-form, contact-section, and any future form-bearing blocks.
   Gap 8px label→input, 32px field→field handled by parent flex container. */
.rw-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(9, 59, 77, 0.2);
}
.rw-field label {
	font-family: var(--rw-font-text);
	font-weight: 600;
	font-size: var(--rw-p2-size);
	line-height: var(--rw-p2-line);
	letter-spacing: -0.012em;
	color: #093B4D;
}
.rw-field--required label::after {
	content: " *";
	color: #093B4D;
}
.rw-field input,
.rw-field select,
.rw-field textarea {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	font-family: var(--rw-font-text);
	font-weight: 500;
	font-size: var(--rw-p2-size);
	line-height: var(--rw-p2-line);
	letter-spacing: -0.012em;
	color: #093B4D;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}
.rw-field input::placeholder,
.rw-field textarea::placeholder { color: rgba(109, 109, 109, 0.6); }
.rw-field select { color: rgba(109, 109, 109, 0.6); }
.rw-field textarea { resize: vertical; min-height: 1.5rem; }
.rw-field select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23093B4D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0 center;
	background-size: 10px;
	padding-right: 1.5rem;
}
.rw-field:focus-within { border-bottom-color: #093B4D; }

/* === Header / Footer shell — minimal, pending Figma extraction === */
.site-header { padding-block: var(--rw-space-md); border-bottom: 1px solid var(--rw-color-border); }
.site-header .rw-container { display: flex; align-items: center; justify-content: space-between; gap: var(--rw-space-md); }
.site-footer { padding-block: var(--rw-space-xl); border-top: 1px solid var(--rw-color-border); }