/**
 * Felix Theme — Base styles.
 *
 * Maps theme.json presets onto the --felix-* alias layer consumed by
 * every component, plus global reset and focus defaults.
 *
 * @package Felix_Theme
 */

/* -------------------------------------------------------------------------
   Design token aliases (single source of truth: theme.json presets)
   ------------------------------------------------------------------------- */

:root {
	--felix-color-primary:       var(--wp--preset--color--primary);
	--felix-color-secondary:     var(--wp--preset--color--secondary);
	--felix-color-accent:        var(--wp--preset--color--accent);
	--felix-color-accent-text:   var(--wp--preset--color--accent-text);
	--felix-color-background:    var(--wp--preset--color--background);
	--felix-color-surface:       var(--wp--preset--color--surface);
	--felix-color-text:          var(--wp--preset--color--text);
	--felix-color-supporting:    var(--wp--preset--color--supporting);
	--felix-color-border:        var(--wp--preset--color--border);
	--felix-color-border-strong: var(--wp--preset--color--border-strong);
	--felix-color-border-focus:  var(--wp--preset--color--border-focus);
	--felix-color-error:         var(--wp--preset--color--error);
	--felix-color-success:       var(--wp--preset--color--success);

	--felix-font-heading: var(--wp--preset--font-family--poppins);
	--felix-font-body:    var(--wp--preset--font-family--inter);

	--felix-sp-3xs: var(--wp--preset--spacing--felix-3xs);
	--felix-sp-2xs: var(--wp--preset--spacing--felix-2xs);
	--felix-sp-xs:  var(--wp--preset--spacing--felix-xs);
	--felix-sp-s:   var(--wp--preset--spacing--felix-sm);
	--felix-sp-m:   var(--wp--preset--spacing--felix-md);
	--felix-sp-l:   var(--wp--preset--spacing--felix-lg);
	--felix-sp-xl:  var(--wp--preset--spacing--felix-xl);

	--felix-radius-sm:   4px;
	--felix-radius-md:   8px;
	--felix-radius-lg:   12px;
	--felix-radius-xl:   16px;
	--felix-radius-pill: 999px;

	--felix-motion-fast: 200ms;
	--felix-motion-base: 300ms;
	--felix-motion-max:  500ms;
	--felix-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

	--felix-content-width: 1200px;
	--felix-wide-width:    1280px;
	--felix-reading-width: 720px;
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */

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

body {
	margin: 0;
	word-wrap: break-word;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 0 0 var(--felix-sp-s);
}

/* -------------------------------------------------------------------------
   Focus visibility (WCAG 2.2)
   ------------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--felix-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Selection
   ------------------------------------------------------------------------- */

::selection {
	background: var(--felix-color-primary);
	color: var(--felix-color-surface);
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.felix-header {
	background: var(--felix-color-surface);
	border-bottom: 1px solid var(--felix-color-border);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 4px rgba(17, 34, 34, 0.04);
}

.felix-header__inner {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center;
	width: 100% !important;
	max-width: 1200px;
	margin-inline: auto;
}

.felix-site-logo {
	display: flex;
	align-items: center;
}

.felix-site-logo img {
	border-radius: var(--felix-radius-sm);
}

/* Navigation */
.felix-main-nav .wp-block-navigation-item__content {
	font-family: var(--felix-font-body);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--felix-base);
	color: var(--felix-color-text);
	text-decoration: none;
	padding: var(--felix-sp-2xs) 4px;
	letter-spacing: 0.01em;
	border-bottom: 2px solid transparent;
	transition: color var(--felix-motion-fast) var(--felix-ease-out),
		border-color var(--felix-motion-fast) var(--felix-ease-out);
}

.felix-main-nav .wp-block-navigation-item__content:hover {
	color: var(--felix-color-primary);
	border-bottom-color: var(--felix-color-primary);
}

.felix-main-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--felix-color-primary);
	border-bottom-color: var(--felix-color-primary);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Navigation CTA (header)
   ------------------------------------------------------------------------- */

.wp-block-navigation-item.felix-menu-cta a,
.wp-block-navigation-item.felix-menu-cta a:focus-visible {
	background: var(--felix-color-primary);
	color: var(--felix-color-surface) !important;
	border-radius: var(--felix-radius-pill);
	padding: 12px 28px !important;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--felix-sm);
	line-height: 1.2;
	transition: background var(--felix-motion-fast) var(--felix-ease-out),
		color var(--felix-motion-fast) var(--felix-ease-out);
}

.wp-block-navigation-item.felix-menu-cta a:hover {
	background: var(--felix-color-text);
	color: var(--felix-color-surface) !important;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.felix-footer {
	background: var(--felix-color-primary);
	color: var(--felix-color-surface);
}

.felix-footer .wp-block-group__inner-container {
	padding-top: var(--felix-sp-xl);
	padding-bottom: var(--felix-sp-m);
}

/* Footer grid */
.wp-block-columns.felix-footer__grid {
	display: grid !important;
	gap: var(--felix-sp-l) !important;
	grid-template-columns: 1fr !important;
}

@media (min-width: 768px) {
	.wp-block-columns.felix-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr !important;
	}
}

.felix-footer__col-title {
	font-family: var(--felix-font-heading);
	font-weight: 600;
	color: var(--felix-color-surface);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-block-end: var(--felix-sp-s);
}

.felix-footer__title {
	font-family: var(--felix-font-heading);
	font-weight: 600;
	color: var(--felix-color-surface);
	font-size: var(--wp--preset--font-size--felix-h5);
	margin-block-end: var(--felix-sp-2xs);
}

.felix-footer .wp-block-site-tagline {
	color: var(--felix-color-supporting);
	font-size: var(--wp--preset--font-size--felix-sm);
	line-height: 1.5;
}

.felix-footer__email a,
.felix-footer__phone,
.felix-footer__location {
	color: var(--felix-color-supporting);
	font-size: var(--wp--preset--font-size--felix-sm);
	line-height: 1.6;
	text-decoration: none;
	transition: color var(--felix-motion-fast) var(--felix-ease-out);
}

.felix-footer__email a:hover {
	color: var(--felix-color-surface);
}

.felix-footer__copyright,
.felix-footer__credit {
	margin: 0;
	color: var(--felix-color-supporting);
	font-size: var(--wp--preset--font-size--felix-sm);
}

.felix-footer .wp-block-separator {
	border-color: rgba(255, 255, 255, 0.15);
}

.felix-footer__nav .wp-block-navigation-item a {
	font-size: var(--wp--preset--font-size--felix-sm);
	color: var(--felix-color-supporting);
	text-decoration: none;
	transition: color var(--felix-motion-fast) var(--felix-ease-out);
	padding-block: var(--felix-sp-3xs);
	display: block;
}

.felix-footer__nav .wp-block-navigation-item a:hover {
	color: var(--felix-color-surface);
}

/* Footer content pattern */
.felix-footer-content {
	background: var(--felix-color-primary);
	color: var(--felix-color-surface);
}

.felix-footer-content__heading {
	font-family: var(--felix-font-heading);
	font-weight: 600;
	color: var(--felix-color-surface);
	font-size: var(--wp--preset--font-size--felix-h6);
	margin-block-end: var(--felix-sp-s);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.felix-footer-content__about,
.felix-footer-content__email,
.felix-footer-content__location {
	font-size: var(--wp--preset--font-size--felix-sm);
	line-height: 1.6;
	color: var(--felix-color-supporting);
}

.felix-footer-content__email a {
	color: var(--felix-color-supporting);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--felix-motion-fast) var(--felix-ease-out);
}

.felix-footer-content__email a:hover {
	color: var(--felix-color-surface);
}

.felix-footer-content__copyright {
	font-size: var(--wp--preset--font-size--felix-sm);
	color: var(--felix-color-supporting);
	text-align: center;
	padding-block-start: var(--felix-sp-m);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.felix-footer-content .wp-block-navigation .wp-block-navigation-item a {
	color: var(--felix-color-supporting);
	font-size: var(--wp--preset--font-size--felix-sm);
}

.felix-footer-content .wp-block-navigation .wp-block-navigation-item a:hover {
	color: var(--felix-color-surface);
}

/* -------------------------------------------------------------------------
   Blue/Primary background text contrast
   ------------------------------------------------------------------------- */

.felix-cta-contact,
.felix-cta-contact .wp-block-group {
	color: var(--felix-color-surface);
}

.felix-cta-contact .felix-cta-contact__eyebrow {
	color: var(--felix-color-supporting) !important;
}

.felix-cta-contact .felix-cta-contact__heading {
	color: var(--felix-color-surface) !important;
}

.felix-cta-contact .felix-cta-contact__subhead {
	color: var(--felix-color-supporting) !important;
}

/* Statistics section on supporting background */
.felix-statistics {
	background: var(--felix-color-primary) !important;
	color: var(--felix-color-surface);
}

.felix-statistics .felix-statistics__number {
	color: var(--felix-color-surface) !important;
}

.felix-statistics .felix-statistics__label {
	color: var(--felix-color-supporting);
}

/* Testimonials on supporting background */
.felix-testimonials-section {
	background: var(--felix-color-primary) !important;
	color: var(--felix-color-surface);
}

.felix-testimonials-section .felix-eyebrow {
	color: var(--felix-color-accent) !important;
}

.felix-testimonials-section h2,
.felix-testimonials-section .wp-block-heading {
	color: var(--felix-color-surface) !important;
}

/* Timeline on supporting background */
.felix-timeline {
	background: var(--felix-color-primary) !important;
	color: var(--felix-color-surface);
}

.felix-timeline .felix-timeline__year {
	color: var(--felix-color-accent) !important;
}

.felix-timeline .felix-timeline__title {
	color: var(--felix-color-surface);
}

.felix-timeline .felix-timeline__description {
	color: var(--felix-color-supporting);
}

.felix-timeline .felix-timeline__entries {
	border-left-color: var(--felix-color-accent);
}

.felix-timeline .felix-timeline__entry + .felix-timeline__entry {
	border-top-color: rgba(255, 255, 255, 0.15);
}