/*
Theme Name:   ANAI Recruit
Theme URI:    https://jobs.anaicaribbean.com
Author:       ANAI Caribbean
Description:  FSE block theme for the ANAI Caribbean recruitment portal. Presentation only — all business logic lives in the anai-recruit plugin.
Version:      0.3.1
Requires PHP: 8.1
License:      GPL-2.0-or-later
Text Domain:  anai-recruit
*/

/* ---------------------------------------------------------------- aurora */
/* Soft multi-color wash from the ANAI logo palette (royal / teal / sky /
   orange) laid over the near-white base. background-image only, so it
   composes with the theme.json background-color. */
body {
	background-image:
		radial-gradient(46rem 30rem at 12% -4%, rgba(84, 179, 227, 0.20), transparent 62%),
		radial-gradient(40rem 28rem at 88% 4%, rgba(38, 196, 188, 0.16), transparent 60%),
		radial-gradient(34rem 26rem at 78% 58%, rgba(43, 92, 201, 0.10), transparent 58%),
		radial-gradient(30rem 24rem at 6% 82%, rgba(239, 117, 41, 0.10), transparent 55%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	min-height: 100vh;
}

::selection {
	background: rgba(84, 179, 227, 0.35);
}

/* ---------------------------------------------------------------- header */
.anai-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border-bottom: 1px solid rgba(16, 20, 51, 0.06);
	box-shadow: 0 8px 30px rgba(16, 20, 51, 0.05);
}

.anai-logo {
	display: flex;
	align-items: baseline;
	gap: 10px;
	text-decoration: none;
}

.anai-logo img {
	height: 34px;
	width: auto;
	display: block;
	align-self: center;
}

.anai-logo .anai-logo__sub {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5a6480;
	align-self: center;
	padding-top: 8px;
}

.anai-header .wp-block-navigation a {
	font-weight: 600;
	font-size: 0.95rem;
	position: relative;
}

.anai-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #2b5cc9, #26c4bc);
	transition: right 0.22s ease;
}

.anai-header .wp-block-navigation a:hover::after {
	right: 0;
}

/* --------------------------------------------------------------- buttons */
.wp-element-button,
.wp-block-button__link {
	background-image: linear-gradient(120deg, #2b5cc9, #1d8fd4 55%, #26c4bc);
	background-size: 150% 100%;
	background-position: 0% 0%;
	border: none;
	font-weight: 650;
	letter-spacing: 0.01em;
	transition: background-position 0.3s ease, transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 6px 20px rgba(43, 92, 201, 0.28);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background-position: 100% 0%;
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(38, 196, 188, 0.35);
}

.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-image: none;
	background-color: rgba(255, 255, 255, 0.6);
	color: #2b5cc9;
	border: 1.5px solid rgba(43, 92, 201, 0.45);
	box-shadow: none;
}

.is-style-outline .wp-block-button__link:hover {
	border-color: #26c4bc;
	color: #03159c;
	background-color: #ffffff;
}

.anai-btn-orange .wp-block-button__link {
	background-image: linear-gradient(120deg, #ef7529, #f59e0b);
	box-shadow: 0 6px 20px rgba(239, 117, 41, 0.35);
}

.anai-btn-orange .wp-block-button__link:hover {
	box-shadow: 0 10px 28px rgba(239, 117, 41, 0.45);
}

/* ------------------------------------------------------------------ hero */
.anai-hero {
	position: relative;
	overflow: hidden;
}

.anai-hero .anai-hero__eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #2b5cc9;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(43, 92, 201, 0.18);
	border-radius: 999px;
	padding: 7px 16px;
	box-shadow: 0 4px 16px rgba(16, 20, 51, 0.06);
}

.anai-gradient-text {
	background-image: linear-gradient(100deg, #2b5cc9 10%, #26c4bc 45%, #54b3e3 70%, #ef7529 105%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ----------------------------------------------------------------- cards */
.anai-card,
.anai-tile {
	background: rgba(255, 255, 255, 0.68);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 18px;
	box-shadow: 0 12px 40px rgba(16, 20, 51, 0.08);
}

.anai-tile {
	padding: 26px 26px 22px;
	position: relative;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.anai-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 48px rgba(16, 20, 51, 0.12);
}

.anai-tile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #2b5cc9, #26c4bc, #54b3e3, #ef7529);
	opacity: 0.85;
}

/* ----------------------------------------------------------------- steps */
.anai-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	counter-reset: anai-step;
	margin-top: 34px;
}

@media (max-width: 820px) {
	.anai-steps {
		grid-template-columns: 1fr;
	}
}

.anai-step {
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.68);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	padding: 30px 28px 96px;
	box-shadow: 0 12px 40px rgba(16, 20, 51, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.anai-step:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 52px rgba(16, 20, 51, 0.13);
}

.anai-step__num {
	position: absolute;
	right: 14px;
	bottom: -34px;
	font-size: 8.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	opacity: 0.16;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.anai-step:hover .anai-step__num {
	opacity: 0.3;
	transform: translateY(-6px);
}

.anai-step h3 {
	margin: 14px 0 10px;
	font-size: 1.15rem;
}

.anai-step p {
	margin: 0;
	font-size: 0.93rem;
	color: #5a6480;
	position: relative;
	z-index: 1;
}

.anai-step__kicker {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
}

.anai-step--royal .anai-step__num { color: #2b5cc9; }
.anai-step--royal .anai-step__kicker { background: rgba(43, 92, 201, 0.12); color: #2b5cc9; }
.anai-step--royal::before { background: linear-gradient(90deg, #2b5cc9, #54b3e3); }

.anai-step--teal .anai-step__num { color: #26c4bc; }
.anai-step--teal .anai-step__kicker { background: rgba(38, 196, 188, 0.14); color: #0f7d77; }
.anai-step--teal::before { background: linear-gradient(90deg, #26c4bc, #54b3e3); }

.anai-step--orange .anai-step__num { color: #ef7529; }
.anai-step--orange .anai-step__kicker { background: rgba(239, 117, 41, 0.13); color: #c05310; }
.anai-step--orange::before { background: linear-gradient(90deg, #ef7529, #f5a623); }

.anai-step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}

/* ---------------------------------------------------------------- footer */
.anai-footer {
	position: relative;
	margin-top: 0 !important;
}

.anai-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #2b5cc9, #26c4bc, #54b3e3, #ef7529);
}

.anai-footer img {
	height: 30px;
	width: auto;
}

.anai-footer a {
	color: #aebaf5;
	text-decoration: none;
}

.anai-footer a:hover {
	color: #ffffff;
}