/* JSGC Site Core -- Consolidated Stylesheet
 *
 * All component styles are inlined to avoid sequential @import HTTP requests.
 * Previously this file had 7 @import declarations, each causing a separate
 * render-blocking network request. Consolidation eliminates ~300-800ms of
 * TTFB/LCP penalty on initial page load.
 *
 * NOTE: legacy.css is still enqueued separately in jsgc-site-core.php
 * (2,000+ lines, separate cache lifecycle).
 */


/* == Brand Tokens ========================================================
   Source spec: Business_Plan/branding-spec.md
   Sync rule: update both files in the same change set when token values change.
   ======================================================================== */

:root {
  /* Primitives: brand + neutral colors (synced with webapp globals.css) */
  --brand-primary-700: #146b69;
  --brand-primary-600: #0f5452;
  --brand-primary-300: #1f516d;
  --brand-accent-400: #7fba27;
  --brand-accent-soft: #deeff0;

  --color-white: #ffffff;
  --color-gray-050: #f8fafc;
  --color-gray-300: #c3d3dc;
  --color-gray-800: #0f2133;
  --color-black: #000000;

  /* Primitives: typography -- CANON #21
     Lora headings, Inter body. Fluid clamp() for heading scale.
     Parity with Web App globals.css. */
  --font-family-web-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-family-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-family-email-sans: Arial, Helvetica, sans-serif;

  --font-weight-body-regular: 400;
  --font-weight-heading-medium: 500;
  --font-weight-heading-strong: 600;

  --font-size-body-sm: 0.875rem;
  --font-size-body-md: 1rem;
  --font-size-h1: clamp(2.2rem, 4.5vw, 3.4rem);
  --font-size-h2: clamp(1.45rem, 2.2vw, 2rem);
  --font-size-h3: clamp(1.1rem, 1.6vw, 1.3rem);
  --font-size-h4: clamp(1rem, 1.3vw, 1.1rem);
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;
  --font-size-pdf-disclaimer: 0.4375rem;

  --line-height-heading-tight: 1.15;
  --line-height-default: 1.4;
  --line-height-relaxed: 1.6;

  /* Primitives: spacing scale (8px base system) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;

  /* Primitives: sizes */
  --size-logo-max-width: 12.5rem;
  --size-logo-min-asset-width: 31.25rem;
  --size-logo-min-asset-height: 31.25rem;
  --size-email-header-height: 3.75rem;
  --size-table-text-default: 0.875rem;

  /* Primitives: radius, borders, shadow */
  --radius-button: 0.25rem;
  --radius-sm: 0.25rem;
  --radius-pill: 999px;

  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-focus: 3px;
  --border-width-callout-accent: 0.25rem;

  --shadow-card: 0 10px 26px rgba(20, 107, 105, 0.12);
  --shadow-soft: 0 6px 16px rgba(20, 107, 105, 0.08);

  /* Semantic aliases: text, surfaces, interactive */
  --color-text-primary: var(--color-gray-800);
  --color-text-inverse: var(--color-white);
  --color-text-muted: #3f5468;
  --color-surface-default: var(--color-white);
  --color-surface-subtle: var(--color-gray-050);
  --color-border-default: var(--color-gray-300);

  --color-interactive-focus-ring: rgba(20, 107, 105, 0.28);
  --color-interactive-disabled-bg: var(--color-gray-300);
  --color-interactive-disabled-fg: var(--color-white);
  --opacity-interactive-disabled: 0.6;

  /* Semantic aliases: buttons */
  --color-action-primary-bg: var(--brand-primary-700);
  --color-action-primary-fg: var(--color-white);
  --color-action-primary-border: var(--brand-primary-700);
  --color-action-primary-bg-hover: #004d57;
  --color-action-primary-fg-hover: var(--color-white);
  --color-action-primary-border-hover: #004d57;
  --color-action-primary-bg-disabled: var(--color-interactive-disabled-bg);
  --color-action-primary-fg-disabled: var(--color-interactive-disabled-fg);
  --color-action-primary-border-disabled: var(--color-interactive-disabled-bg);
  --color-action-primary-focus-ring: var(--color-interactive-focus-ring);

  --color-action-secondary-bg: transparent;
  --color-action-secondary-fg: var(--brand-primary-700);
  --color-action-secondary-border: var(--brand-primary-700);
  --color-action-secondary-bg-hover: rgba(20, 107, 105, 0.08);
  --color-action-secondary-fg-hover: var(--brand-primary-700);
  --color-action-secondary-border-hover: var(--brand-primary-700);
  --color-action-secondary-bg-disabled: transparent;
  --color-action-secondary-fg-disabled: var(--color-gray-300);
  --color-action-secondary-border-disabled: var(--color-gray-300);
  --color-action-secondary-focus-ring: var(--color-interactive-focus-ring);

  /* Semantic aliases: tables */
  --color-table-header-bg: var(--brand-primary-700);
  --color-table-header-fg: var(--color-white);
  --color-table-row-odd-bg: var(--color-gray-050);
  --color-table-row-even-bg: var(--color-white);
  --color-table-border: var(--color-gray-300);

  /* Semantic aliases: callouts */
  --color-callout-info-bg: #fff9c4;
  --color-callout-success-bg: #e8f5e9;
  --color-callout-notice-bg: #fffde7;
  --color-callout-accent-border: var(--brand-accent-400);

  /* Component tokens */
  --component-button-padding-y: 0.75rem;
  --component-button-padding-x: 1.5rem;
  --component-button-font-size: 1rem;
  --component-button-border-radius: var(--radius-button);
  --component-button-focus-ring-offset: 2px;
  --component-button-focus-ring-width: var(--border-width-focus);

  --component-table-text-size: var(--size-table-text-default);
  --component-table-text-align: left;

  --component-callout-padding: 0.75rem;
  --component-callout-accent-border-width: var(--border-width-callout-accent);

  --component-logo-container-padding: 0.5rem;
  --component-logo-clear-space-ratio: 0.5;

  /* Email aliases */
  --email-header-bg: var(--brand-primary-700);
  --email-header-fg: var(--color-white);
  --email-body-bg: var(--color-white);
  --email-body-text: var(--color-text-primary);
  --email-body-font-family: var(--font-family-email-sans);
  --email-body-font-size: var(--font-size-body-sm);
  --email-body-line-height: var(--line-height-default);
  --email-button-bg: var(--color-action-primary-bg);
  --email-button-fg: var(--color-action-primary-fg);
  --email-button-padding-y: 0.625rem;
  --email-button-padding-x: 1.25rem;
  --email-button-border-radius: var(--radius-button);
  --email-footer-bg: var(--color-gray-050);
  --email-footer-text: var(--color-text-muted);
  --email-footer-font-size: 0.625rem;
  --email-footer-padding: 0.75rem;

  /* PDF aliases */
  --pdf-page-margin-body: 1in;
  --pdf-grid-gutter: var(--space-md);
  --pdf-footer-text-color: var(--color-gray-300);
  --pdf-footer-disclaimer-font-size: var(--font-size-pdf-disclaimer);
  --pdf-callout-bg: var(--color-callout-notice-bg);
  --pdf-callout-accent-border: var(--color-callout-accent-border);
  --pdf-callout-padding: var(--component-callout-padding);
  --pdf-table-header-bg: var(--color-table-header-bg);
  --pdf-table-header-fg: var(--color-table-header-fg);
}


/* == Base ================================================================ */

body { color: var(--color-text-default, #0f2133); }


/* == Header ============================================================== */

/* Logo -- responsive dynamic sizing.
   Natural logo asset is 157x157px. Scale with clamp()
   so it is ~48px on mobile, ~80px on desktop, with fluid interpolation. */

header.wp-block-template-part .wp-block-site-logo {
  flex-shrink: 0;
  line-height: 0; /* remove descender gap below img */
}

header.wp-block-template-part .wp-block-site-logo img {
  width: clamp(48px, 6vw + 16px, 80px) !important;
  height: auto !important;
  max-width: 100%;
  transition: width 200ms ease;
}

/* Scrolled state: compress logo slightly for compact header */
body.has-scrolled header.wp-block-template-part .wp-block-site-logo img {
  width: clamp(40px, 5vw + 12px, 64px) !important;
}

/* Scrolled header background */
body.has-scrolled header.wp-block-template-part {
  background: var(--color-surface-inverse, #146b69);
}


/* == Home ================================================================ */

.jsg-home-cta .wp-block-button__link { background: var(--color-action-primary-bg, #146b69); color: var(--color-action-primary-fg, #ffffff); }


/* == Services ============================================================ */

.jsg-services-lane-card { border: 1px solid var(--color-border-default, #cccccc); border-radius: var(--radius-card, .5rem); }


/* == Assessment ========================================================== */

.jsg-assessment-tool .jsgc-embed-wrap { border: 1px solid var(--color-border-default, #cccccc); }


/* == Edge-to-Edge Layout =================================================
   Body padding is 0 (theme.json) so section backgrounds go full-bleed.
   has-global-padding sections contain text with their own padding.
   Mobile gets tighter text padding to maximize readable width.
   ======================================================================== */

@media (max-width: 600px) {
  body .wp-site-blocks .has-global-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body .jsgc-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body .jsg-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}