/*--------------------------------------------------------------
AKUSH Talent Management — brand overrides
Loaded after style.css. Keeps the XEN theme intact and only
restyles the accent, the logo slots, and a few brand details.
--------------------------------------------------------------*/

:root {
	--akush-gold: #D4AF37;
	--akush-gold-light: #F6DE7E;
	--akush-gold-deep: #8E6E18;
	--akush-ink: #111517;
}

/*--------------------------------------------------------------
1. Wordmark
The theme ships three <img> logo slots (header, nav panel, footer)
and swaps .logo-white / .logo-black as the sticky header crosses
light and dark sections. We replace the images with Oswald text
and mirror that same swap, so the animation still works.
--------------------------------------------------------------*/
.akush-wordmark {
	display: block;
	font-family: 'Oswald', 'Arial Narrow', sans-serif;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.akush-wordmark .akush-wordmark-sub {
	display: block;
	font-size: .30em;
	font-weight: 400;
	letter-spacing: .34em;
	margin-top: .45em;
	opacity: .82;
}

/* Header wordmark — sits in .logo-img-box, inherits the slide-in transform */
.logo .akush-wordmark {
	font-size: 25px;
	color: var(--akush-gold);
}

/* The theme animates `.logo img`; apply the same to our text nodes. */
.logo .akush-wordmark {
	-webkit-transform: translateY(110%);
	    -ms-transform: translateY(110%);
	        transform: translateY(110%);
	-webkit-transition: .5s cubic-bezier(.767, .01, .18, 1.01);
		-o-transition: .5s cubic-bezier(.767, .01, .18, 1.01);
			transition: .5s cubic-bezier(.767, .01, .18, 1.01);
}

body.active .logo .akush-wordmark {
	-webkit-transform: translateY(10px);
	    -ms-transform: translateY(10px);
	        transform: translateY(10px);
}

/* Light/dark swap: gold on dark sections, ink on light ones. */
.logo .akush-wordmark-black {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	color: var(--akush-ink);
}

.midnightHeader.default .akush-wordmark-black,
.midnightHeader.black .akush-wordmark-white {
	opacity: 0;
}

.midnightHeader.black .akush-wordmark-black,
.midnightHeader.default .akush-wordmark-white {
	opacity: 1;
}

/* Nav panel + footer wordmarks — always on dark, always gold */
.nav-logo .akush-wordmark {
	font-size: 22px;
	color: var(--akush-gold);
}

.footer-logo-text {
	font-size: 24px;
	color: var(--akush-gold);
}

/* Preloader wordmark, replaces logo-loader.png */
.loading .akush-wordmark {
	font-size: 26px;
	color: var(--akush-gold);
	text-align: center;
}

/* The header logo box is sized for a 100px image and clips its overflow to
   drive the slide-in reveal. Our two-line wordmark is taller than an image,
   so the box needs explicit room or the sub-line gets cut off. */
.logo {
	width: auto;
	min-width: 150px;
}

.logo .logo-img-box {
	height: 46px;
}

@media (max-width: 767px) {
	.logo .akush-wordmark { font-size: 19px; }
	.logo { min-width: 120px; }
	.logo .logo-img-box { height: 38px; }
}

/*--------------------------------------------------------------
2. Brand accents
--------------------------------------------------------------*/
/* Gold gradient for large display headings on dark backgrounds */
.akush-gold-gradient {
	background: linear-gradient(120deg, var(--akush-gold-light) 0%, var(--akush-gold) 45%, var(--akush-gold-deep) 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Age-group / program pills used on services and enrollment */
.akush-pill {
	display: inline-block;
	padding: 7px 18px;
	margin: 0 8px 8px 0;
	border: 1px solid var(--akush-gold);
	border-radius: 40px;
	color: var(--akush-gold);
	font-family: 'Oswald', sans-serif;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Form validation + flash messages */
.akush-alert {
	padding: 14px 18px;
	margin-bottom: 24px;
	border-left: 3px solid var(--akush-gold);
	background: rgba(212, 175, 55, .08);
	color: #f5f5f5;
	font-size: 14px;
}

.akush-alert-error {
	border-left-color: #c0392b;
	background: rgba(192, 57, 43, .08);
}

.akush-field-error {
	display: block;
	margin-top: 6px;
	color: #e07a6f;
	font-size: 13px;
}

/*--------------------------------------------------------------
3. Nav panel social row
The XEN nav panel ends after .nav-menu; this row is our addition,
pinned bottom-left of the open panel.
--------------------------------------------------------------*/
.akush-nav-social {
	position: absolute;
	left: 40px;
	bottom: 34px;
	display: flex;
	gap: 22px;
	opacity: 0;
	transition: opacity .4s ease .5s;
}

.nav-container.active .akush-nav-social {
	opacity: 1;
}

.akush-nav-social a {
	color: #fff;
	font-size: 16px;
	transition: color .3s ease;
}

.akush-nav-social a:hover {
	color: var(--akush-gold);
}

@media (max-width: 767px) {
	.akush-nav-social {
		left: 24px;
		bottom: 24px;
		gap: 18px;
	}
}

/*--------------------------------------------------------------
4. Accent aliases
The XEN theme names its accent classes .red-bg / .red-color. The
accent is now gold, so these aliases let our markup say what it
means without touching the theme stylesheet.
--------------------------------------------------------------*/
.gold-bg { background: var(--akush-gold); }
.gold-color { color: var(--akush-gold); }

/*--------------------------------------------------------------
5. Forms
The theme's floating labels assume every input is wrapped in
.input-box. Selects and hints are ours.
--------------------------------------------------------------*/
.akush-select-box {
	position: relative;
	margin-bottom: 10px;
}

.akush-select-label {
	display: block;
	margin-bottom: 10px;
	font-family: 'Oswald', sans-serif;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--akush-gold);
}

.akush-select {
	width: 100%;
	padding: 12px 40px 12px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	background: transparent;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* chevron */
	background-image: linear-gradient(45deg, transparent 50%, var(--akush-gold) 50%),
	                  linear-gradient(135deg, var(--akush-gold) 50%, transparent 50%);
	background-position: calc(100% - 16px) center, calc(100% - 9px) center;
	background-size: 7px 7px, 7px 7px;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: border-color .3s ease;
}

.akush-select:focus {
	outline: none;
	border-bottom-color: var(--akush-gold);
}

/* Native dropdown list renders in the OS palette; force dark. */
.akush-select option {
	background: var(--akush-ink);
	color: #fff;
}

/* Sits under an .input-box, which the theme gives no bottom spacing, so the
   hint would otherwise overlap the next field's floating label. */
.akush-hint {
	display: block;
	padding-top: 8px;
	color: #9a9a9a;
	font-size: 12px;
	line-height: 1.4;
}

.akush-form .input-box.has-hint {
	padding-bottom: 22px;
}

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.akush-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*--------------------------------------------------------------
6. Content bits
--------------------------------------------------------------*/
.akush-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
}

.akush-list li {
	position: relative;
	padding-left: 20px;
}

.akush-list li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 13px;
	width: 8px;
	height: 1px;
	background: var(--akush-gold);
}

.akush-service-img,
.akush-model-portrait {
	width: 100%;
	height: auto;
	display: block;
}

.akush-model-card {
	display: block;
}

.akush-model-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: rgba(255, 255, 255, .04);
	color: rgba(212, 175, 55, .5);
	font-size: 42px;
}

/*--------------------------------------------------------------
7. Form rhythm
The theme's floating label is absolutely positioned at top:25px,
so every field needs the same headroom. Setting it once here is
tidier than sprinkling top-padding utilities through the markup.
--------------------------------------------------------------*/
.akush-form .input-box {
	padding-top: 26px;
}

.akush-form .akush-select-box {
	padding-top: 26px;
}

/* The select already has its own visible label, so it needs less. */
.akush-form .akush-select-label {
	margin-bottom: 4px;
}

.akush-form .message-input {
	padding-top: 30px;
}

/*--------------------------------------------------------------
8. Mobile layout
The XEN theme collapses its column grid on small screens but keeps
the desktop vertical rhythm, so stacked sections end up with far
more dead space than content. These rules tighten that up and fix
two things that only surface on touch devices.
--------------------------------------------------------------*/
@media (max-width: 767px) {

	/* --- Section rhythm -------------------------------------- */
	/* 120px top and bottom on a phone is most of a screen. */
	.top-bottom-padding-120 { padding-top: 64px; padding-bottom: 64px; }
	.top-bottom-padding-90 { padding-top: 48px; padding-bottom: 48px; }
	.top-padding-90 { padding-top: 44px; }
	.top-padding-60 { padding-top: 34px; }
	.bottom-padding-60 { padding-bottom: 30px; }

	/* --- Lessons / services / programme cards ---------------- */
	/* Stacked cards need a divider and far less air between them,
	   otherwise each one reads as its own empty screen. */
	.akush-stack-item {
		padding-bottom: 22px;
		margin-bottom: 22px;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

	.akush-stack-item:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: 0;
	}

	/* Icon beside the heading rather than stranded on its own line. */
	.akush-stack-item .akush-stack-head {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.akush-stack-item .akush-stack-head i {
		font-size: 21px !important;
		flex: 0 0 auto;
		width: 26px;
		text-align: center;
	}

	.akush-stack-item .akush-stack-head h3 { padding-top: 0 !important; }
	.akush-stack-item p { margin-top: 7px; }

	/* --- Overlay buttons ------------------------------------- */
	/* .overlay-btn is 55px and coloured #262626, with the gold only
	   painted in on hover. There is no hover on a phone, so the
	   button renders near-invisible at a huge size. */
	.overlay-btn {
		font-size: 24px;
		color: var(--akush-gold);
		white-space: normal;
	}

	.overlay-btn-box {
		border: 1px solid var(--akush-gold);
		border-radius: 3px;
		padding: 12px 26px;
	}

	/* The hover wipe would double the text; hide it on touch. */
	.overlay-btn:before { display: none; }

	/* The gold CTA band uses dark text, which is correct there. */
	.gold-bg .overlay-btn { color: var(--akush-ink); }
	.gold-bg .overlay-btn-box { border-color: rgba(0, 0, 0, .35); }

	/* --- Headings -------------------------------------------- */
	.large-title,
	.large-title-bold { font-size: 34px; }

	/* --- Footer ---------------------------------------------- */
	/* Every column carried a 60px desktop pad, stacking into a
	   ~860px footer on a 390px screen. */
	.footer .flex-container { padding-top: 46px; padding-bottom: 34px; }
	.footer .bottom-padding-60 { padding-bottom: 26px; }

	.footer-menu,
	.footer-information,
	.footer-social {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 20px;
	}

	.footer-menu li,
	.footer-social li { margin-bottom: 0; }

	.footer-information {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.footer-information li { margin-bottom: 0; }

	.footer-logo-text { text-align: center; }
	.footer-copyright { margin-top: 6px; font-size: 11px; line-height: 1.7; }
}

/* Very small phones */
@media (max-width: 400px) {
	.large-title,
	.large-title-bold { font-size: 29px; }
	.overlay-btn { font-size: 21px; }
}

/*--------------------------------------------------------------
9. Home showcase grid
The theme's .works class is wired to Isotope in main.js, which
measures before the images load and leaves a stale inline height —
collapsing the container so the next section overlaps it. The home
showcase needs no filtering, so it uses a plain CSS grid instead.
--------------------------------------------------------------*/
.akush-showcase {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 20px;
}

.akush-showcase .work_item {
	margin: 0;
	height: 100%;
}

.akush-showcase .hover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 3 / 4;
}

@media (max-width: 999px) {
	.akush-showcase { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.akush-showcase { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/*--------------------------------------------------------------
10. Landing banner parallax (mobile)
The banner image drifts slower than the page as it scrolls. Driven
by a transform on a slightly over-tall layer, set from JS.

background-attachment: fixed is deliberately NOT used: iOS Safari
ignores it and Android renders it juddery. A transform is composited
on the GPU and behaves the same everywhere.
--------------------------------------------------------------*/
@media (max-width: 767px) {
	.page-head { overflow: hidden; }

	.akush-parallax .page-head-bg {
		/* Extra height gives the layer room to travel without
		   exposing a gap at the bottom of the banner. */
		height: 124%;
		will-change: transform;
	}
}

/* Respect a reader's reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
	.akush-parallax .page-head-bg {
		transform: none !important;
		height: 100%;
	}
}