/*
 * Aurealis — Base Stylesheet
 * Loaded on both frontend and in the block editor.
 */

/* =========================================================
   GLOBAL RESETS & BASE
   ========================================================= */

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

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Ensure the site fills the viewport height for proper footer placement */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main,
.wp-site-blocks > [role="main"] {
	flex: 1 0 auto;
}

/* Fix color inheritance on bordered elements */
.has-border-color {
	border-color: var(--wp--preset--color--border);
}

/* =========================================================
   FOCUS STYLES — accessibility
   ========================================================= */

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

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
	border-radius: 2px;
}

/* =========================================================
   STICKY HEADER
   ========================================================= */

.aurealis-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow var(--wp--custom--aurealis--transition--duration) var(--wp--custom--aurealis--transition--easing);
}

.aurealis-site-header.is-scrolled {
	box-shadow: var(--wp--preset--shadow--soft);
}

/* =========================================================
   POST META
   ========================================================= */

.aurealis-post-meta,
.aurealis-post-meta .wp-block-post-date,
.aurealis-post-meta .wp-block-post-author-name,
.aurealis-post-meta .wp-block-post-terms {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.aurealis-meta-sep {
	margin: 0;
	line-height: inherit;
	user-select: none;
}

/* =========================================================
   BLOCK STYLE: BUTTON — aurealis-ghost
   ========================================================= */

.wp-block-button.is-style-aurealis-ghost .wp-block-button__link,
.wp-block-button.is-style-aurealis-ghost .wp-element-button {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid transparent;
	box-shadow: none;
}

.wp-block-button.is-style-aurealis-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-aurealis-ghost .wp-element-button:hover {
	background-color: var(--wp--preset--color--surface);
}

/* =========================================================
   BLOCK STYLE: BUTTON — aurealis-outline
   ========================================================= */

.wp-block-button.is-style-aurealis-outline .wp-block-button__link,
.wp-block-button.is-style-aurealis-outline .wp-element-button {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	box-shadow: none;
}

.wp-block-button.is-style-aurealis-outline .wp-block-button__link:hover,
.wp-block-button.is-style-aurealis-outline .wp-element-button:hover {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

/* =========================================================
   BLOCK STYLE: BUTTON — aurealis-pill
   ========================================================= */

.wp-block-button.is-style-aurealis-pill .wp-block-button__link,
.wp-block-button.is-style-aurealis-pill .wp-element-button {
	border-radius: var(--wp--custom--aurealis--radius--pill);
}

/* =========================================================
   BLOCK STYLE: BUTTON — aurealis-secondary
   ========================================================= */

.wp-block-button.is-style-aurealis-secondary .wp-block-button__link,
.wp-block-button.is-style-aurealis-secondary .wp-element-button {
	background-color: var(--wp--preset--color--secondary);
	color: #ffffff;
}

.wp-block-button.is-style-aurealis-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-aurealis-secondary .wp-element-button:hover {
	filter: brightness(0.9);
}

/* =========================================================
   BLOCK STYLE: GROUP — aurealis-card
   ========================================================= */

.wp-block-group.is-style-aurealis-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--aurealis--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--50);
	overflow: hidden;
}

/* =========================================================
   BLOCK STYLE: GROUP — aurealis-section
   ========================================================= */

.wp-block-group.is-style-aurealis-section {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}

/* =========================================================
   BLOCK STYLE: GROUP — aurealis-narrow
   ========================================================= */

.wp-block-group.is-style-aurealis-narrow {
	max-width: 48rem;
	margin-inline: auto;
}

/* =========================================================
   BLOCK STYLE: GROUP — aurealis-glass
   ========================================================= */

.wp-block-group.is-style-aurealis-glass {
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--wp--custom--aurealis--radius--large);
}

/* =========================================================
   BLOCK STYLE: GROUP — aurealis-bordered
   ========================================================= */

.wp-block-group.is-style-aurealis-bordered {
	border: 2px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--aurealis--radius--medium);
	padding: var(--wp--preset--spacing--60);
}

/* =========================================================
   BLOCK STYLE: IMAGE — aurealis-rounded
   ========================================================= */

.wp-block-image.is-style-aurealis-rounded img {
	border-radius: var(--wp--custom--aurealis--radius--large);
}

/* =========================================================
   BLOCK STYLE: IMAGE — aurealis-circle
   ========================================================= */

.wp-block-image.is-style-aurealis-circle img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* =========================================================
   BLOCK STYLE: IMAGE — aurealis-shadow
   ========================================================= */

.wp-block-image.is-style-aurealis-shadow img {
	box-shadow: var(--wp--preset--shadow--strong);
}

/* =========================================================
   BLOCK STYLE: IMAGE — aurealis-framed
   ========================================================= */

.wp-block-image.is-style-aurealis-framed {
	padding: 0.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--aurealis--radius--medium);
}

.wp-block-image.is-style-aurealis-framed img {
	display: block;
	width: 100%;
}

/* =========================================================
   BLOCK STYLE: QUOTE — aurealis-editorial
   ========================================================= */

.wp-block-quote.is-style-aurealis-editorial {
	font-family: var(--wp--preset--font-family--system-serif);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
}

/* =========================================================
   BLOCK STYLE: QUOTE — aurealis-minimal
   ========================================================= */

.wp-block-quote.is-style-aurealis-minimal {
	border-left: none;
	padding-left: 0;
	font-style: normal;
}

/* =========================================================
   BLOCK STYLE: SEPARATOR — aurealis-subtle
   ========================================================= */

.wp-block-separator.is-style-aurealis-subtle {
	opacity: 0.35;
}

/* =========================================================
   BLOCK STYLE: SEPARATOR — aurealis-strong
   ========================================================= */

.wp-block-separator.is-style-aurealis-strong {
	border-top-width: 3px;
	opacity: 1;
}

/* =========================================================
   BLOCK STYLE: SEPARATOR — aurealis-dots
   ========================================================= */

.wp-block-separator.is-style-aurealis-dots {
	border-style: dotted;
	border-top-width: 3px;
	opacity: 1;
}

/* =========================================================
   BLOCK STYLE: NAVIGATION — aurealis-pills
   ========================================================= */

.wp-block-navigation.is-style-aurealis-pills .wp-block-navigation-item__content {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--aurealis--radius--pill);
	padding: 0.25rem 0.75rem;
	transition: background-color var(--wp--custom--aurealis--transition--duration) var(--wp--custom--aurealis--transition--easing);
}

.wp-block-navigation.is-style-aurealis-pills .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* =========================================================
   BLOCK STYLE: LIST — aurealis-checks
   ========================================================= */

.wp-block-list.is-style-aurealis-checks {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-aurealis-checks li {
	padding-left: 1.75em;
	position: relative;
}

.wp-block-list.is-style-aurealis-checks li::before {
	content: "✓";
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	position: absolute;
	left: 0;
}

/* =========================================================
   BLOCK STYLE: HEADING — aurealis-underline-accent
   ========================================================= */

.wp-block-heading.is-style-aurealis-underline-accent {
	position: relative;
	padding-bottom: 0.65em;
}

.wp-block-heading.is-style-aurealis-underline-accent::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 3rem;
	height: 3px;
	background-color: var(--wp--preset--color--primary);
	border-radius: 2px;
}

/* =========================================================
   BLOCK STYLE: HEADING — aurealis-gradient
   ========================================================= */

.wp-block-heading.is-style-aurealis-gradient {
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--primary),
		var(--wp--preset--color--secondary)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* =========================================================
   BLOCK STYLE: POST TERMS — aurealis-pills
   ========================================================= */

.wp-block-post-terms.is-style-aurealis-pills a {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--aurealis--radius--pill);
	padding: 0.2rem 0.65rem;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	display: inline-block;
	transition: background-color var(--wp--custom--aurealis--transition--duration) var(--wp--custom--aurealis--transition--easing);
}

.wp-block-post-terms.is-style-aurealis-pills a:hover {
	background-color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* =========================================================
   PAGINATION STYLES
   ========================================================= */

.aurealis-pagination .wp-block-query-pagination-numbers a,
.aurealis-pagination .wp-block-query-pagination-numbers span,
.aurealis-pagination .wp-block-query-pagination-previous,
.aurealis-pagination .wp-block-query-pagination-next {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--aurealis--radius--medium);
	transition: background-color var(--wp--custom--aurealis--transition--duration) var(--wp--custom--aurealis--transition--easing);
}

.aurealis-pagination .wp-block-query-pagination-numbers a:hover,
.aurealis-pagination .wp-block-query-pagination-previous:hover,
.aurealis-pagination .wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.aurealis-pagination .wp-block-query-pagination-numbers .current {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
	border-color: var(--wp--preset--color--primary);
}

/* =========================================================
   SCROLL ANIMATION UTILITY
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
	.aurealis-animate {
		opacity: 0;
		transform: translateY(1rem);
		transition:
			opacity 0.5s ease,
			transform 0.5s ease;
	}

	.aurealis-animate.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================================================
   BACK TO TOP
   ========================================================= */

.aurealis-back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	border-radius: var(--wp--custom--aurealis--radius--pill);
	text-decoration: none;
	font-size: 1.25rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 99;
}

.aurealis-back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.aurealis-sidebar {
	border-left: 1px solid var(--wp--preset--color--border);
}

/* =========================================================
   UTILITY: SKIP LINK
   ========================================================= */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

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