/*
 * Secure Corporate FSE — main.css
 * Global styles that complement theme.json.
 * Keep this file lean; prefer theme.json for design tokens.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Reset & Base
   ───────────────────────────────────────────────────────────────────────────── */

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

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

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

/* ─────────────────────────────────────────────────────────────────────────────
   Focus Styles (Accessibility + Security: visible focus for keyboard users)
   ───────────────────────────────────────────────────────────────────────────── */

:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Skip Link
   ───────────────────────────────────────────────────────────────────────────── */

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border-radius: 0 0 var(--wp--custom--border-radius--md) var(--wp--custom--border-radius--md);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	z-index: 9999;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Header
   ───────────────────────────────────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--shadow--sm);
}

.site-header .wp-block-navigation {
	gap: var(--wp--preset--spacing--5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Navigation
   ───────────────────────────────────────────────────────────────────────────── */

.wp-block-navigation a {
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: color 0.15s ease;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Hero Section
   ───────────────────────────────────────────────────────────────────────────── */

.hero-section {
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--primary-light) 60%,
		#1e5a8e 100%
	);
}

.hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,194,168,0.15) 0%, transparent 60%),
		radial-gradient(ellipse 40% 40% at 20% 80%, rgba(245,166,35,0.08) 0%, transparent 50%);
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Cards
   ───────────────────────────────────────────────────────────────────────────── */

.card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius--lg);
	box-shadow: var(--wp--custom--shadow--sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	overflow: hidden;
}

.card:hover {
	box-shadow: var(--wp--custom--shadow--md);
	transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────────────────────── */

.wp-block-button__link {
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	letter-spacing: 0.02em;
	text-transform: none;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 194, 168, 0.35);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Button variant: outline */
.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--primary);
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Forms
   ───────────────────────────────────────────────────────────────────────────── */

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--text-primary);
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius--md);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.15);
}

input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Contact Form Block
   ───────────────────────────────────────────────────────────────────────────── */

.scfse-contact-form {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius--xl);
	padding: var(--wp--preset--spacing--10);
	box-shadow: var(--wp--custom--shadow--lg);
}

.scfse-contact-form .form-group {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--5);
}

.scfse-contact-form label {
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
}

.scfse-contact-form .form-error {
	color: #dc2626;
	font-size: var(--wp--preset--font-size--sm);
	margin-top: var(--wp--preset--spacing--1);
}

.scfse-contact-form .form-success {
	background: rgba(0, 194, 168, 0.1);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--border-radius--md);
	padding: var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────────────────────── */

.site-footer {
	background: var(--wp--preset--color--surface-dark);
	color: rgba(255, 255, 255, 0.7);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-footer a:hover {
	color: var(--wp--preset--color--accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Section Dividers
   ───────────────────────────────────────────────────────────────────────────── */

.section-divider {
	width: 48px;
	height: 4px;
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--border-radius--full);
	margin: var(--wp--preset--spacing--4) 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Utility: Screen Reader Only
   ───────────────────────────────────────────────────────────────────────────── */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Print Styles
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
	.site-header,
	.site-footer,
	.wp-block-navigation,
	.skip-link {
		display: none;
	}

	body {
		font-size: 12pt;
		color: #000;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
	}
}