/**
 * EZ Golf Academy - Brand Overrides
 *
 * Logo sizing, button consistency, footer branding.
 * Loaded last to override all theme CSS.
 *
 * @package EZGolfAcademy
 * @since 1.0.0
 */

/* =========================================
   Brand tokens (gold #FFC72C, navy #0B1F3A)
   ========================================= */

:root {
	--ez-gold-primary: #FFC72C;
	--ez-gold-dark: #E6B325; /* Locked: gold hover / dark state */
	--ez-navy-primary: #0B1F3A; /* Global navy (hero overlay, gradients, etc.) */
	--ez-navy-header: #0E2A47; /* Header/footer only */
	--ez-white: var(--ez-text-inverse, #FFFFFF);
	--ezgolf-gold: #FFC72C;
	--ezgolf-navy: #0E2A47;
	--ezgolf-card-border: rgba(255, 199, 44, 0.55);
	--ezgolf-card-radius: 16px;
}

/* Premium button system — single source of truth for all CTA buttons */
.ez-btn,
.hp-btn,
.hp-btn--gold,
.hp-btn--navy,
.hp-btn--outline,
.btn-book-intro,
.mobile-book-btn,
.ezgolf-booking-button,
.simplybook-widget-button,
.program-card .btn,
.ez-program-card .btn,
.programs-section .btn,
.hero-section .btn {
	border-radius: 9999px;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(255, 199, 44, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ez-btn:hover,
.ez-btn:focus-visible,
.hp-btn:hover,
.hp-btn--gold:hover,
.hp-btn--navy:hover,
.hp-btn--outline:hover,
.btn-book-intro:hover,
.mobile-book-btn:hover,
.ezgolf-booking-button:hover,
.simplybook-widget-button:hover,
.program-card .btn:hover,
.ez-program-card .btn:hover,
.programs-section .btn:hover,
.hero-section .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(255, 199, 44, 0.35);
}

/* Standardized sizes */
.hp-btn {
	padding: 14px 32px;
	font-size: 1rem;
}

.hp-btn--sm {
	padding: 10px 24px;
	font-size: 0.9rem;
}

.hp-btn--lg {
	padding: 16px 40px;
	font-size: 1.1rem;
}

/* Brand-consistent CTA colors and borders across all pages */
.hp-btn--gold {
	background: var(--ez-gold-primary) !important;
	color: var(--ez-navy-primary) !important;
	border: 2px solid var(--ez-gold-dark) !important;
}

.hp-btn--gold:hover,
.hp-btn--gold:focus-visible {
	background: var(--ez-gold-dark) !important;
	color: var(--ez-navy-primary) !important;
	border-color: var(--ez-gold-dark) !important;
}

.hp-btn--outline {
	background: transparent !important;
	color: var(--ez-navy-primary) !important;
	border: 2px solid var(--ez-gold-primary) !important;
}

.hp-btn--outline:hover,
.hp-btn--outline:focus-visible {
	background: var(--ez-gold-primary) !important;
	color: var(--ez-navy-primary) !important;
	border-color: var(--ez-gold-dark) !important;
}

.ez-hero .hp-btn--outline {
	color: #fff !important;
	border-color: rgba(255,255,255,.55) !important;
	background: rgba(255,255,255,.06) !important;
}
.ez-hero .hp-btn--outline:hover {
	background: rgba(255,255,255,.12) !important;
}

/* Universal: any element with .ez-gold-border gets the same border treatment */
.ez-gold-border {
	border: 2px solid var(--ezgolf-card-border) !important;
	border-radius: var(--ezgolf-card-radius) !important;
}

/* =========================================
   Global background system — brand consistency
   ========================================= */

body {
	background: #FFFFFF;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	letter-spacing: -0.03em;
}

section,
.wp-block-group,
.content-section {
	background: #F8FAFC;
}

/* Hero sections — white (except .ez-hero which uses video) */
.hero:not(.ez-hero),
.hero-section:not(.ez-hero),
.home-hero:not(.ez-hero),
.page-hero {
	background: #FFFFFF !important;
}

/* ========================================
   HERO VIDEO
   ======================================== */

.ez-hero,
.hp-hero.ez-hero,
.hp-hero {
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	background: transparent !important;
	padding: 120px 20px 70px;
}

.ez-hero video,
.ez-hero .ez-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	outline: none;
	display: block;
}

.ez-hero video:focus,
.ez-hero .ez-hero__video:focus {
	outline: none;
}

#ezHeroVideo[data-ended="1"] {
	filter: saturate(1.05) contrast(1.05);
}

.ez-hero .ez-hero__video {
	opacity: 1;
	transition: opacity 900ms ease;
}

/* Hero content: subtle fade-in */
.ez-hero-content {
	animation: ez-hero-content-fade 0.8s ease-out both;
}

@keyframes ez-hero-content-fade {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Ended state: no visual jump, identical appearance */
.ez-hero.ez-hero-video-ended .ez-hero-content {
	animation: none;
}

/* Subtle navy bottom fade (keeps depth without cream discoloration) */
.ez-hero::after,
.hp-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	background: linear-gradient(to bottom, rgba(10, 26, 46, 0), rgba(10, 26, 46, 0.55));
	z-index: 1;
	pointer-events: none;
}

/* Hero content + glass panel */
.ez-hero-content,
.hp-hero__content {
	position: relative;
	z-index: 2;
	color: #ffffff;
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
	padding: 0 12px;
}

.ez-hero-content > *,
.hp-hero__content > * {
	position: relative;
	z-index: 2;
}

/* Glass panel — readable over busy video/bg */
.ez-hero-content::before,
.hp-hero__content::before {
	content: "";
	position: absolute;
	inset: -22px -18px -26px -18px;
	background: rgba(10, 26, 46, 0.50);
	border: 1px solid rgba(255, 199, 44, 0.28);
	border-radius: 22px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
	z-index: 1;
}

.ez-hero__title,
.hp-hero__title {
	color: #ffffff !important;
	max-width: 860px;
	margin: 0 auto 14px;
	line-height: 1.08;
	letter-spacing: -0.5px;
	text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.ez-hero__sub,
.hp-hero__sub {
	color: rgba(255, 255, 255, 0.95);
	max-width: 760px;
	margin: 0 auto 14px;
	margin-top: 10px !important;
	line-height: 1.55;
	opacity: 0.95;
	text-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.ez-hero__location,
.hp-hero__location {
	color: rgba(255, 255, 255, 0.88);
	max-width: 760px;
	margin: 0 auto 22px;
	margin-top: 8px !important;
	font-size: 0.95rem;
	opacity: 0.88;
	text-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}

.ez-hero__actions,
.hp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 18px !important;
}

.ez-hero .hp-btn--gold {
	background: var(--ez-gold-primary, #FFC72C) !important;
	color: var(--ez-navy-primary, #0B1F3A) !important;
}

@media (max-width: 768px) {
	.ez-hero,
	.hp-hero {
		min-height: 72vh;
		padding: 96px 16px 56px;
	}

	.ez-hero-content::before,
	.hp-hero__content::before {
		inset: -18px -12px -22px -12px;
		border-radius: 18px;
	}

	.ez-hero__title,
	.hp-hero__title {
		font-size: clamp(28px, 7vw, 40px);
	}
}

/* Reduce watermark if it's a separate overlay element */
.ez-hero-watermark,
.hp-hero-watermark {
	opacity: 0.12 !important;
	filter: blur(0.5px);
}

/* Remove alternating light gray (#F8FAFC, etc.) — standardize to section bg */
section:nth-of-type(even),
.content-section:nth-of-type(even),
.bg-gray-100,
.bg-gray-50 {
	background: #F8FAFC !important;
}

/* Consistent "EZ card" border system — gold accent everywhere */
.hp-method-card,
.hp-program-card,
.program-card,
.ez-card,
.elementor-widget-container .hp-method-card,
.elementor-widget-container .hp-program-card,
.card,
.coach-card,
.perf-card,
.perf-step,
.coach-step,
.oa-step,
.oa-card,
.oa-faq details,
.contact-card,
.local-audience-card,
.local-training-audience-card,
.local-training-method-step,
.local-training-result-card,
.local-training-faq-item,
.local-service-card,
.local-related-card,
.local-faq-item,
.testimonial-card,
.hp-testimonial-card,
.hp-how__step,
.hp-result-card,
.journal-card,
.journal-featured__link,
.resources-card,
.resources-featured__card {
	border: 1px solid rgba(255, 199, 44, 0.25) !important;
	border-radius: 16px !important;
	background: #FFFFFF !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.hp-method-card:hover,
.hp-program-card:hover,
.program-card:hover,
.ez-card:hover,
.card:hover,
.coach-card:hover,
.perf-card:hover,
.perf-step:hover,
.coach-step:hover,
.oa-step:hover,
.oa-card:hover,
.oa-faq details:hover,
.contact-card:hover,
.local-audience-card:hover,
.local-training-audience-card:hover,
.local-training-method-step:hover,
.local-training-result-card:hover,
.local-service-card:hover,
.local-related-card:hover,
.testimonial-card:hover,
.hp-testimonial-card:hover,
.hp-how__step:hover,
.hp-result-card:hover,
.journal-card:hover,
.journal-featured__link:hover,
.resources-card:hover,
.resources-featured__card:hover {
	border-color: rgba(255, 199, 44, 0.55) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.09) !important;
}

/* =========================================
   1. Header — navy (match footer), all pages
   ========================================= */

#masthead.site-header,
.site-header,
header.site-header {
	background: var(--ez-navy-header, #0E2A47) !important;
	border-bottom: 2px solid var(--ez-gold-primary, #FFC72C) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

body.ast-theme-transparent-header .site-header,
body.ast-transparent-header .site-header,
.ast-transparent-header .site-header {
	background: var(--ez-navy-header, #0E2A47) !important;
}

.site-header.scrolled {
	background: var(--ez-navy-header, #0E2A47) !important;
}

/* Logo: primary displayed, white hidden */
.site-header .ez-logo-primary,
.site-header .header-logo-img {
	display: block !important;
}

.site-header .ez-logo-white {
	display: none !important;
}

/* =========================================
   2. Header logo — primary gold, clean, sized
   ========================================= */

.site-header .header-logo {
	display: flex !important;
	align-items: center !important;
}

.site-header .header-logo-img {
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	height: auto !important;
	width: auto !important;
	max-height: 68px !important;
	object-fit: contain !important;
	opacity: 1 !important;
	filter: none !important;
	mix-blend-mode: normal !important;
}

.site-header.scrolled .header-logo-img {
	max-height: 68px !important;
}

@media (max-width: 820px) {
	.site-header .header-logo-img {
		max-height: 44px !important;
	}

	.site-header.scrolled .header-logo-img {
		max-height: 44px !important;
	}
}

/* =========================================
   3. Nav links — white, gold hover
   ========================================= */

.site-header .header-nav-list a,
.site-header .header-logo .header-logo-text {
	color: #FFFFFF !important;
	font-weight: 500;
}

.site-header .header-nav-list a:hover,
.site-header .header-nav-list a:focus-visible,
.site-header .header-nav-list .current-menu-item > a,
.site-header .header-nav-list .current_page_item > a {
	color: var(--ez-gold, #FFC72C) !important;
}

.site-header .header-nav-list a:focus-visible,
.site-header .mobile-menu-list a:focus-visible {
	outline: 2px solid var(--ez-gold, #FFC72C) !important;
	outline-offset: 2px !important;
}

/* Header: Client Portal — text link, not a button */
#masthead .btn-client-login {
	background: transparent !important;
	color: rgba(255, 255, 255, 0.85) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 6px 2px !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	margin-right: 18px;
	transition: color 150ms ease;
	letter-spacing: 0.01em;
}

#masthead .btn-client-login:hover,
#masthead .btn-client-login:focus-visible {
	background: transparent !important;
	border: none !important;
	color: #fff !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

/* Hide desktop Log In on mobile (menu has it) */
@media (max-width: 820px) {
	#masthead .ez-header__cta .btn-client-login {
		display: none !important;
	}
}

/* Mobile menu: Client Portal — text link style */
#masthead .mobile-menu-list .btn-client-login {
	display: block !important;
	text-align: center;
	margin: 0 0 12px;
	padding: 12px 20px !important;
	background: transparent !important;
	color: rgba(255, 255, 255, 0.85) !important;
	border: none !important;
	font-weight: 500 !important;
}


/* Book EZ Intro button — gold pill, navy text */
.site-header .btn-book-intro,
.site-header .mobile-book-btn {
	background: var(--ez-gold-primary, #FFC72C) !important;
	color: var(--ez-navy-primary, #0B1F3A) !important;
}

.site-header .btn-book-intro:hover,
.site-header .btn-book-intro:focus-visible,
.site-header .mobile-book-btn:hover,
.site-header .mobile-book-btn:focus-visible {
	background: var(--ez-gold-dark, #E6B325) !important;
	color: var(--ez-navy-primary, #0B1F3A) !important;
}

/* Hamburger bars — white on navy */
.site-header .hamburger-bar {
	background: #FFFFFF !important;
}

/* Mobile menu — navy bg, white/gold links */
.site-header .mobile-menu {
	background: var(--ez-navy-header, #0E2A47) !important;
	border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.site-header .mobile-menu-list a {
	color: #FFFFFF !important;
}

.site-header .mobile-menu-list a:hover,
.site-header .mobile-menu-list a:focus-visible {
	color: var(--ez-gold, #FFC72C) !important;
}

.site-header .mobile-menu-list li {
	border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdowns (navy) */
.site-header .sub-menu,
.site-header .mega-menu-content {
	background: var(--ez-navy-header, #0E2A47) !important;
}

.site-header .sub-menu a,
.site-header .mega-menu-link {
	color: #FFFFFF !important;
}

.site-header .sub-menu a:hover,
.site-header .mega-menu-link:hover {
	color: var(--ez-gold, #FFC72C) !important;
}

/* =========================================
   4. Header spacing
   ========================================= */

.header-inner {
	padding: 16px 36px !important;
	align-items: center !important;
	gap: 28px !important;
}

.site-header .header-logo {
	flex-shrink: 0;
}

.site-header .header-nav-list {
	gap: 4px !important;
}

.site-header .header-nav-list a {
	padding: 10px 18px !important;
	font-size: 0.95rem !important;
}

.site-header.scrolled .header-inner {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

@media (max-width: 820px) {
	.header-inner {
		padding: 14px 24px !important;
	}
}

/* =========================================
   2. Footer logo — consistent with header
   ========================================= */

.footer-logo-text {
	font-family: var(--ez-font-display, 'DM Sans', sans-serif);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ez-text-inverse, #FFFFFF);
}

.footer-logo-img {
	max-height: 64px !important;
	width: auto !important;
	height: auto !important;
	opacity: 1 !important;
	filter: none !important;
}

@media (max-width: 768px) {
	.footer-logo-img {
		max-height: 56px !important;
	}
}

/* =========================================
   3. Button consistency — solid gold everywhere
   ========================================= */

/* Elementor buttons */
.elementor a.elementor-button,
.elementor a.elementor-button:hover,
.elementor a.elementor-button:focus,
.elementor-button,
.elementor-button:hover,
.elementor-button:focus {
	background: var(--ez-gold-primary, #FFC72C) !important;
	color: var(--ez-navy-primary, #0B1F3A) !important;
	border: none !important;
	border-radius: 9999px !important;
}

.elementor a.elementor-button:hover,
.elementor-button:hover {
	background: var(--ez-gold-dark, #E6B325) !important;
}

.elementor a.elementor-button:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid var(--ez-gold-primary, #FFC72C) !important;
	outline-offset: 2px !important;
}

/* WP block buttons (exclude outline style) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--ez-gold-primary, #FFC72C) !important;
	color: var(--ez-navy-primary, #0B1F3A) !important;
	border: none !important;
	border-radius: 9999px !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--ez-gold-dark, #E6B325) !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	outline: 2px solid var(--ez-gold-primary, #FFC72C) !important;
	outline-offset: 2px !important;
}

/* Generic buttons */
a.button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline),
.button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline),
.ast-button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline),
.ast-custom-button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline) {
	background: var(--ez-gold-primary, #FFC72C) !important;
	color: var(--ez-navy-primary, #0B1F3A) !important;
	border: none !important;
	border-radius: 9999px !important;
}

a.button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline):hover,
.button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline):hover,
.ast-button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline):hover,
.ast-custom-button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline):hover {
	background: var(--ez-gold-dark, #E6B325) !important;
}

a.button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline):focus-visible,
.button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline):focus-visible,
.ast-button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline):focus-visible,
.ast-custom-button:not(.ez-btn--outline):not(.btn-outline):not(.btn--outline):focus-visible {
	outline: 2px solid var(--ez-gold-primary, #FFC72C) !important;
	outline-offset: 2px !important;
}

/* =========================================
   Global typography rhythm
   ========================================= */

.hp-section-title,
h1, h2, h3 {
	text-wrap: balance;
}

.hp-section-title {
	margin-bottom: 18px !important;
}

.hp-text-center {
	text-align: center;
}

/* Exclude nav links */
.header-nav-list a,
.header-nav-list a:hover,
.mobile-menu-list a,
.mobile-menu-list a:hover,
.footer-link-list a,
.footer-link-list a:hover {
	background: transparent !important;
}

/* =========================================
   HERO: Premium layout + reduce watermark
   ========================================= */

.ez-hero {
	position: relative;
	min-height: 82vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 72px 20px 56px;
	overflow: hidden;
}

/* Premium overlay: visible but lets video show through */
.ez-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(10, 26, 46, 0.45) 0%,
		rgba(10, 26, 46, 0.55) 55%,
		rgba(10, 26, 46, 0.65) 100%
	) !important;
}

/* Center the content card properly */
.ez-hero-content,
.hp-hero__content {
	position: relative;
	z-index: 2;
	max-width: 880px;
	width: min(880px, 92vw);
	text-align: center;
	margin: 0 auto;
	padding: 34px 34px 28px;
}

/* Glass panel — hidden */
.ez-hero-content::before,
.hp-hero__content::before {
	display: none !important;
}

/* Typography rhythm */
.ez-hero__title,
.hp-hero__title {
	line-height: 1.12 !important;
	letter-spacing: -0.02em;
	margin: 0 0 14px !important;
	text-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

.ez-hero__sub,
.hp-hero__sub {
	line-height: 1.55 !important;
	max-width: 58ch;
	margin: 0 auto 10px !important;
	opacity: 0.95;
	text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.ez-hero__location,
.hp-hero__location {
	margin: 0 auto 18px !important;
	opacity: 0.85;
	font-size: 15px !important;
	text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Buttons alignment */
.ez-hero__actions,
.hp-hero__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 10px;
}

/* Subtle color correction for video */
.ez-hero .ez-hero__video {
	filter: saturate(0.95) contrast(1.02) brightness(1);
}

/* If that watermark is actually an overlay element, this will calm it down */
.ez-hero-watermark,
.hp-hero-watermark,
.ez-hero .watermark,
.hp-hero .watermark {
	opacity: 0.08 !important;
	transform: scale(0.92);
}

/* Mobile: tighter spacing + stacked buttons */
@media (max-width: 820px) {
	.ez-hero {
		min-height: 76vh;
		padding: 56px 16px 44px;
	}
	.ez-hero-content,
	.hp-hero__content {
		padding: 26px 18px 20px;
	}
	.ez-hero-content::before,
	.hp-hero__content::before {
		inset: -14px -12px -16px -12px;
		border-radius: 18px;
	}
	.ez-hero__actions,
	.hp-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.ez-hero__actions a,
	.hp-hero__actions a {
		justify-content: center;
	}
}

/* Hard reset any old positioning that pushes the hero content */
.ez-hero-content,
.hp-hero__content {
	left: auto !important;
	right: auto !important;
	transform: none !important;
}