/**
 * Acompliance — Custom Styles
 * Refined polish layer on top of theme.json design tokens.
 */

/* ========================================
   GLOBAL REFINEMENTS
   ======================================== */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}


::selection {
	background-color: #B4845C;
	color: #fff;
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	background-color: rgba(250, 249, 246, 0.92) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

/* Navigation link hover effect */
.wp-block-navigation .wp-block-navigation-item a {
	position: relative;
	transition: color 0.25s ease;
}

.wp-block-navigation .wp-block-navigation-item a::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 1px;
	background-color: #B4845C;
	transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.wp-block-navigation .wp-block-navigation-item a:hover::after,
.wp-block-navigation .wp-block-navigation-item a:focus::after {
	width: 100%;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	color: #B4845C;
}

/* ========================================
   HERO SECTION
   ======================================== */

.acompliance-hero {
	position: relative;
}

/* Subtle gradient overlay for extra depth on the cover image */
.acompliance-hero .wp-block-cover__background {
	background: linear-gradient(
		160deg,
		rgba(10, 22, 40, 0.92) 0%,
		rgba(10, 22, 40, 0.78) 40%,
		rgba(15, 43, 60, 0.72) 100%
	) !important;
}

/* Geometric grid pattern overlay on top of cover */
.acompliance-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(180, 132, 92, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(180, 132, 92, 0.05) 1px, transparent 1px);
	background-size: 80px 80px;
	pointer-events: none;
	z-index: 1;
}

/* Ensure inner content sits above grid overlay */
.acompliance-hero .wp-block-cover__inner-container {
	z-index: 2;
}

/* Subtle vignette on the cover image */
.acompliance-hero .wp-block-cover__image-background {
	filter: saturate(0.4) contrast(1.1);
}

/* Decorative accent line */
.acompliance-hero-line {
	width: 60px !important;
	opacity: 0.5;
}

/* Hero entrance animation */
.acompliance-hero .wp-block-cover__inner-container > .wp-block-group {
	animation: heroFadeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s both;
}

/* ========================================
   SERVICE CARDS
   ======================================== */

.acompliance-service-card {
	transition: background-color 0.35s ease, transform 0.35s ease;
	cursor: default;
	border-top: 1px solid var(--wp--preset--color--light) !important;
}

.acompliance-service-card:hover {
	background-color: rgba(240, 236, 227, 0.6);
}

.acompliance-service-card p:first-child {
	transition: color 0.3s ease, transform 0.3s ease;
}

.acompliance-service-card:hover p:first-child {
	transform: translateX(4px);
}

.acompliance-service-card h3 {
	transition: color 0.3s ease;
}

.acompliance-service-card:hover h3 {
	color: #0F2B3C;
}

/* ========================================
   NEWS CARDS
   ======================================== */

.acompliance-news-card {
	transition: transform 0.3s ease;
}

.acompliance-news-card:hover {
	transform: translateY(-2px);
}

.acompliance-news-card .wp-block-post-title a {
	transition: color 0.25s ease;
}

/* ========================================
   CTA SECTION
   ======================================== */

.acompliance-cta {
	position: relative;
	overflow: hidden;
}

.acompliance-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(135deg, rgba(180, 132, 92, 0.04) 25%, transparent 25%),
		linear-gradient(225deg, rgba(180, 132, 92, 0.04) 25%, transparent 25%);
	background-size: 120px 120px;
	pointer-events: none;
}

/* ========================================
   BUTTONS
   ======================================== */

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

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

/* Outline button hover */
.is-style-outline .wp-block-button__link:hover {
	background-color: #B4845C !important;
	color: #fff !important;
	border-color: #B4845C !important;
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer .is-style-plain-list,
.site-footer ul {
	list-style: none;
	padding-left: 0 !important;
}

.site-footer li {
	transition: color 0.2s ease;
}

.site-footer li:hover {
	color: #FAF9F6;
}

/* ========================================
   SCROLL-TRIGGERED ANIMATIONS
   ======================================== */

.acompliance-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
	            transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.acompliance-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered children */
.acompliance-reveal-children > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
	            transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.acompliance-reveal-children.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.acompliance-reveal-children.is-visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.acompliance-reveal-children.is-visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.acompliance-reveal-children.is-visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.acompliance-reveal-children.is-visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.acompliance-reveal-children.is-visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

/* Hero entrance animation */
.acompliance-hero-inner > .wp-block-group {
	animation: heroFadeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

@keyframes heroFadeIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ========================================
   SEPARATOR REFINEMENT
   ======================================== */

.wp-block-separator:not(.is-style-dots) {
	border: none !important;
	height: 1px !important;
}

/* ========================================
   RESPONSIVE REFINEMENTS
   ======================================== */

@media (max-width: 781px) {
	.acompliance-hero-inner {
		min-height: 80vh !important;
	}

	/* Stack service cards without right borders */
	.acompliance-service-card {
		border-right: none !important;
	}

	/* Full-width buttons on mobile */
	.acompliance-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.acompliance-hero .wp-block-button {
		width: 100%;
	}

	.acompliance-hero .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 600px) {
	.site-footer .wp-block-columns {
		gap: var(--wp--preset--spacing--40) !important;
	}
}

/* ========================================
   FOCUS STATES (A11Y)
   ======================================== */

a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid #B4845C;
	outline-offset: 3px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
	.site-header,
	.site-footer,
	.acompliance-cta {
		display: none !important;
	}
}