/*
Theme Name: WeSearch UCompare
Theme URI: https://wesearch-ucompare.com
Author: WeSearch UCompare
Description: Custom classic theme for the WeSearch UCompare lead-generation comparison site. Replaces the Elementor + JetEngine stack with lean PHP templates, brand design tokens, and an ACF-driven content model. CPTs/taxonomies/fields are owned by plugins; this theme only renders them.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: wesearch
*/

/* =========================================================================
   1. DESIGN TOKENS  (brand source: docs/elementor-acf-migration-plan.md 2.4
   + wesearch-ucompare-forms/assets/css/form.css :root block)
   Downstream components MUST reuse these custom-property names verbatim.
   ========================================================================= */
:root {
	/* --- Brand colours --- */
	--ws-indigo:        #42306A; /* core brand indigo/violet — headings, primary, chrome */
	--ws-indigo-dark:   #32264F; /* darker hover for indigo */
	--ws-indigo-soft:   #ede9f3; /* very pale plum tint (soft fills) */
	--ws-ink:           #1A1449; /* near-black deep indigo — darkest headings */
	--ws-blue:          #AAC6E2; /* powder blue — wordmark "We"/"U", decorative accent */
	--ws-periwinkle:    #a5b3dc; /* logo periwinkle — soft accent */

	--ws-coral:         #EE6364; /* secondary highlight / badge */
	--ws-coral-deep:    #E13F5A; /* deeper coral/rose variant */

	--ws-cta:           #EF7A44; /* primary action / submit fill — highest conversion */
	--ws-cta-dark:      #e55e00; /* CTA hover (also maps to indigo on some buttons) */
	--ws-cta-soft:      #FFBC7D; /* soft orange (loading/transition wash) */

	/* --- Surfaces --- */
	--ws-surface:       #EEF4F9; /* cool near-white page/section canvas */
	--ws-white:         #FFFFFF; /* card surface, reversed text */
	--ws-input-bg:      #faf7fc; /* very light purple input wash */

	/* --- Neutrals / text --- */
	--ws-text:          #1f2937; /* body text */
	--ws-muted:         #64748b; /* muted/secondary text */
	--ws-muted-2:       #515962; /* alt muted body text */
	--ws-border:        #e5e7eb; /* default borders/dividers */
	--ws-border-soft:   #e6e1ee; /* purple-tinted border */
	--ws-neutral-200:   #F1F1F1; /* light fills / hover bg */
	--ws-neutral-300:   #CCCCCC; /* borders */

	/* --- State --- */
	--ws-error:         #dc2626;
	--ws-success:       #2B5C47; /* brand-aligned success green */

	/* --- Typography --- */
	--ws-font-sans:     "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ws-font-display:  "Montserrat", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ws-fw-regular:    400;
	--ws-fw-medium:     500;
	--ws-fw-semibold:   600;
	--ws-fw-bold:       700;

	/* type scale (px observed: 12 13 14 15 16 18 20 22 24 28 40 50) */
	--ws-fs-xs:         0.8125rem;  /* 13px */
	--ws-fs-sm:         0.875rem;   /* 14px */
	--ws-fs-base:       1rem;       /* 16px */
	--ws-fs-lead:       1.125rem;   /* 18px */
	--ws-fs-md:         1.25rem;    /* 20px */
	--ws-fs-lg:         1.5rem;     /* 24px */
	--ws-fs-xl:         1.75rem;    /* 28px */
	--ws-fs-2xl:        2.5rem;     /* 40px */
	--ws-fs-3xl:        3.125rem;   /* 50px */
	--ws-lh-tight:      1.12;
	--ws-lh-base:       1.55;

	/* --- Spacing (8px rhythm: 8/16/24/36) --- */
	--ws-space-unit:    8px;
	--ws-space-1:       0.5rem;   /* 8px  */
	--ws-space-2:       1rem;     /* 16px */
	--ws-space-3:       1.5rem;   /* 24px */
	--ws-space-4:       2.25rem;  /* 36px */
	--ws-space-5:       3.375rem; /* 54px */
	--ws-space-6:       5rem;     /* 80px */

	/* Card hairline. --ws-border (#e5e7eb) is within ~10/255 of the --ws-surface
	   band the cards sit on, so it reads as no border at all there; this is the
	   same idea one step darker, so the outline shows on white AND on surface. */
	--ws-border-card:   #CBD5E1;

	/* --- Radius --- */
	--ws-radius-pill:   999px;
	--ws-radius-card:   8px;
	--ws-radius-chip:   5px;
	--ws-radius-sm:     4px;

	/* --- Containers --- */
	--ws-container:      1200px;  /* wide */
	--ws-container-text: 800px;   /* readable content */

	/* --- Shadow --- */
	--ws-shadow:        0 6px 9px rgba(0, 0, 0, 0.12);
	--ws-shadow-deep:   0 12px 50px rgba(0, 0, 0, 0.30);

	/* --- Layout metrics --- */
	--ws-header-h:      88px;
	--ws-z-header:      100;
	--ws-z-drawer:      1000;
}

/* =========================================================================
   2. RESET / BASE
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--ws-font-sans);
	font-size: var(--ws-fs-base);
	font-weight: var(--ws-fw-regular);
	line-height: var(--ws-lh-base);
	color: var(--ws-text);
	background: var(--ws-surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--ws-space-2);
	font-family: var(--ws-font-display);
	font-weight: var(--ws-fw-semibold);
	line-height: var(--ws-lh-tight);
	color: var(--ws-indigo);
}
h1 { font-size: var(--ws-fs-2xl); font-weight: var(--ws-fw-bold); }
h2 { font-size: var(--ws-fs-xl); }
h3 { font-size: var(--ws-fs-lg); }
h4 { font-size: var(--ws-fs-md); }

p { margin: 0 0 var(--ws-space-2); }

a { color: var(--ws-indigo); text-decoration: underline; }
a:hover,
a:focus { color: var(--ws-indigo-dark); }

img,
svg,
video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--ws-space-2); padding-left: 1.25rem; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--ws-border); margin: var(--ws-space-3) 0; }

/* Visible keyboard focus everywhere (WCAG-AA) */
:focus-visible {
	outline: 3px solid var(--ws-cta);
	outline-offset: 2px;
}

/* Screen-reader-only utility (matches core .screen-reader-text) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--ws-white);
	clip: auto;
	-webkit-clip-path: none;
	clip-path: none;
	color: var(--ws-indigo);
	display: block;
	height: auto;
	left: 8px;
	padding: 12px 20px;
	top: 8px;
	width: auto;
	z-index: 100000;
	border-radius: var(--ws-radius-sm);
	box-shadow: var(--ws-shadow);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* Component + layout styling lives in assets/css/main.css (loaded after this file). */