/*
 * ISO DNA overrides
 * Loaded after style.css so the vendor theme stays untouched and upgradable.
 * Palette values come from ISO_Sports_Athlete_Brand_Guidelines.pdf.
 */

:root{
	--iso-black: #000000;
	--iso-red: #EE0000;
	--iso-white: #FFFFFF;
	--iso-gray: #808080;
	--iso-surface: #2A2A2A;  /* brand-specified content box */
}

/*
 * The theme's .contact-form inputs are white-on-transparent, which only works
 * inside a dark section. The sign-in card supplies that dark surface so the
 * fields stay readable on the light page background.
 */
.iso-auth-card{
	background-color: var(--iso-surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 40px;
	margin-top: 40px;
}

.iso-auth-card .form-label{
	display: block;
	margin-bottom: 8px;
	color: var(--iso-white);
	font-size: 14px;
	letter-spacing: 0.02em;
}

.iso-auth-card .form-check-label{
	color: var(--iso-gray);
}

.iso-auth-card .form-control{
	border-color: rgba(255, 255, 255, 0.18);
}

.iso-auth-card .alert{
	background-color: rgba(238, 0, 0, 0.12);
	border: 1px solid var(--iso-red);
	color: var(--iso-white);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 24px;
}

/* ============================================================
 * Dark foundation
 * The theme ships light: white body with near-black type. The ISO brand
 * calls for black and charcoal foundations with white type, so this layer
 * inverts the page surface and the content text that sat on it.
 * Small white pills, circles and buttons keep their dark type on purpose.
 * ============================================================ */

body{
	background-color: var(--iso-black);
}

/* Content type that previously sat on the white page background */
h1, h2, h3, h4, h5, h6,
.post-entry h1, .post-entry h2, .post-entry h3,
.post-entry h4, .post-entry h5, .post-entry h6,
.comment-content h1, .comment-content h2, .comment-content h3,
.comment-content h4, .comment-content h5, .comment-content h6,
.comment-content ul li,
.comment-content table tr th,
.comment-list .comment .comment-meta .comment-author a,
.pagination .nav-links a,
.pagination .nav-links span,
.tag-links,
.testimonial-content p,
.contact-info-list .icon-box p,
.faq-contact-box p,
.team-sidebar-contact-list ul li strong{
	color: var(--iso-white);
}

/* Content surfaces that were white cards */
.beyond-game-item,
.accordion-item{
	background-color: var(--iso-surface);
	border-color: rgba(255, 255, 255, 0.08);
}

.service-catagery-list ul li a{
	background-color: var(--iso-surface);
	color: var(--iso-white);
}

/* Scrolled header: plain black, no gradient */
header.main-header .header-sticky.active{
	background: var(--iso-black);
}

/* Google map and other embeds read harshly against black */
.google-map iframe{
	filter: invert(0.92) hue-rotate(180deg);
}

/* ============================================================
 * Hero carousel
 * Layout follows the reference the client approved: ribbon shape over the
 * brand field on the left, athlete photography behind it, outlined wordmark
 * down the edge, thumbnail strip in the corner. Buttons reuse the theme's
 * .btn-default pill so they match the rest of the site.
 * ============================================================ */

.iso-banner{
	position: relative;
	overflow: hidden;
	background-color: var(--iso-black);
}

.iso-banner-slider,
.iso-banner-slider .swiper{
	position: relative;
}

.iso-banner-slide{
	position: relative;
	display: flex;
	align-items: center;
	min-height: 800px;
	overflow: hidden;
}

/* GSAP animates these on slide change */
.iso-banner-shape,
.iso-banner-content > *{
	will-change: transform, opacity;
}

.iso-banner-slide .container{
	position: relative;
	z-index: 3;
}

/* Photography sits full-bleed behind the shape */
.iso-banner-media{
	position: absolute;
	inset: 0;
	z-index: 0;
}

.iso-banner-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	will-change: transform;
}

/* The ribbon shape: brand field on the left, transparent over the photo */
.iso-banner-shape{
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url('../images/banner-ball.svg'), url('../images/banner-shape.svg');
	background-repeat: no-repeat, no-repeat;
	background-position: 6% center, left center;
	background-size: 460px 460px, 78% 100%;
}

/* Settle the photo down so white kit does not fight the headline */
.iso-banner-shape::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 78%, rgba(0,0,0,.62) 100%);
}

/* Keep the masthead legible where the shape runs behind it */
.iso-banner-shape::before{
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 200px;
	background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.30) 62%, rgba(0,0,0,0) 100%);
}

.iso-banner-content{
	max-width: 620px;
	padding: 70px 0;
}

.iso-banner-eyebrow{
	display: inline-block;
	margin-bottom: 26px;
	padding-bottom: 12px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.45);
	color: var(--iso-white);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 18px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.iso-banner-title{
	margin-bottom: 26px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(44px, 5.6vw, 84px);
	line-height: 0.95em;
	text-transform: uppercase;
}

.iso-banner-intro{
	max-width: 545px;
	margin-bottom: 38px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
	line-height: 1.75em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.iso-banner-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Second action mirrors the theme's highlighted hero button */
.iso-banner-actions .btn-default.btn-highlighted{
	background-color: var(--iso-white);
	color: var(--iso-black);
}

.iso-banner-actions .btn-default.btn-highlighted:hover{
	color: var(--iso-white);
}

/* Carousel dots */
.iso-banner-slider .swiper-pagination{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 42px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.iso-banner-slider .swiper-pagination-bullet{
	width: 10px;
	height: 10px;
	margin: 0;
	opacity: 1;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.35);
	transition: background-color .25s ease, transform .25s ease;
}

.iso-banner-slider .swiper-pagination-bullet-active{
	background-color: var(--iso-red);
	transform: scale(1.35);
}

/* Outlined wordmark running down the right edge */
.iso-banner-edge{
	position: absolute;
	top: 46%;
	right: 34px;
	z-index: 4;
	display: flex;
	gap: 8px;
	transform: translateY(-50%);
	pointer-events: none;
}

.iso-banner-edge span{
	writing-mode: vertical-rl;
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 130px;
	line-height: .92;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.34);
}

/* Thumbnail strip in the lower-right corner */
.iso-banner-thumbs{
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 4;
	display: flex;
	gap: 12px;
	padding: 14px;
	background-color: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.iso-banner-thumb{
	width: 84px;
	height: 72px;
	overflow: hidden;
	border: 2px solid transparent;
}

.iso-banner-thumb.is-active{
	border-color: var(--iso-red);
}

.iso-banner-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1199px){
	.iso-banner-edge{ display: none; }
	.iso-banner-shape{ background-size: 360px 360px, 125% 100%; }
}

@media (max-width: 991px){
	.iso-banner-slide{ min-height: 640px; }
	/* pull the ribbon back so the photograph still reads behind the copy, and
	   lean on a vertical scrim for text contrast instead of full coverage */
	.iso-banner-shape{ background-size: 260px 260px, 155% 100%; }
	.iso-banner-shape::after{
		background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 38%, rgba(0,0,0,.72) 100%);
	}
	.iso-banner-thumbs{ display: none; }
}

@media (max-width: 575px){
	.iso-banner-slide{ min-height: 560px; }
	.iso-banner-content{ padding: 46px 0; }
	.iso-banner-intro{ font-size: 14px; }
}

/* ============================================================
 * Utility bar above the masthead
 * ============================================================ */

.iso-topbar{
	position: relative;
	z-index: 20;
	background-color: #0A0A0A;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.iso-topbar-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 52px;
}

.iso-topbar-left,
.iso-topbar-right{
	display: flex;
	align-items: center;
	gap: 22px;
}

.iso-topbar-social{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-topbar-social a{
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.10);
	color: var(--iso-white);
	font-size: 12px;
	transition: background-color .25s ease, color .25s ease;
}

.iso-topbar-social a:hover{
	background-color: var(--iso-red);
	color: var(--iso-white);
}

.iso-topbar-tagline{
	color: var(--iso-gray);
}

.iso-topbar-link{
	color: var(--iso-white);
}

.iso-topbar-link strong{
	color: var(--iso-red);
	font-weight: inherit;
}

.iso-topbar-link:hover{
	color: var(--iso-red);
}

@media (max-width: 991px){
	.iso-topbar{ display: none; }
}

/* The theme's masthead is absolutely positioned at top:0 and would cover the
   utility bar, so drop it by the bar's height. The sticky state stays at top:0
   because the bar has scrolled away by then. */
header.main-header{
	top: 52px;
}

/* ============================================================
 * Fossphorus credit + hover confetti
 * Ported from the ComplyEZE build (public/frontend-assets/dist/css/style.css)
 * and recoloured for the ISO palette — ComplyEZE burst red on black, which
 * would be invisible against this footer.
 * ============================================================ */

.powered-by{
	position: relative;
	display: inline-block;
}

.powered-by a{
	color: var(--iso-white);
	text-decoration: none;
	white-space: nowrap;
}

.powered-by a img{
	vertical-align: -3px;
	margin-right: 2px;
}

.powered-by a:hover{
	color: var(--iso-red);
}

.confetti-container{
	position: absolute;
	top: -5%;
	left: 15%;
	transform: translate(-52%, -50%);
	width: 100px;
	height: 100px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
}

.powered-by:hover .confetti-container{
	opacity: 1;
}

.confetti{
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(60px + (var(--p) * 200px) + calc(var(--random) * 10%));
	height: calc((var(--random) * 120px) + 170px);
	border-radius: 40% 90% 0 0;
	pointer-events: none;
}

.confetti:nth-child(even){
	transform: scale(-1, 1);
	left: auto;
	right: 50%;
}

.confetti::before{
	content: '';
	display: block;
	width: 12px;
	height: 6px;
	background-color: var(--color);
	animation: confetti 2s cubic-bezier(0.5, 0, 0.5, 1) both,
		confetti-opacity 2s cubic-bezier(0.5, 0, 0.5, 1) both;
	animation-duration: calc(1.4s + (var(--random) * 0.5s));
	animation-delay: calc(0.6s * (var(--random) - 0.5) * 2);
	animation-iteration-count: infinite;
	offset-path: padding-box;
}

@keyframes confetti{
	0%{
		offset-distance: -10%;
		offset-rotate: 0turn;
	}

	100%{
		offset-distance: 38%;
		offset-rotate: calc(4turn + var(--random) * 2turn);
	}
}

@keyframes confetti-opacity{
	0%{
		opacity: 0;
	}

	20%,
	40%{
		opacity: 1;
	}

	95%,
	100%{
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce){
	.confetti-container{
		display: none;
	}
}

/* ============================================================
 * Footer subscribe column
 * The wide subscribe row moved into the footer grid, taking the slot the
 * Services column vacated. Narrower than the original, so the field and
 * button stack instead of sitting side by side.
 * ============================================================ */

/* The theme's four columns add up to 116% once the subscribe column joins them,
   so they wrapped. Re-proportion them to sit on one row. */
.footer-main-box .footer-about{
	width: 30%;
}

.footer-main-box .footer-links{
	width: 18%;
}

.footer-main-box .footer-info{
	width: 26%;
}

.footer-subscribe-col{
	width: 26%;
	padding-left: 2.6vw;
}

.footer-subscribe-col > p{
	margin-bottom: 22px;
	color: var(--iso-gray);
}

.footer-subscribe-col .footer-subscribe-form{
	width: 100%;
	padding-left: 0;
}

/* Field and send button share one pill, as the theme intended; the button is
   icon-only so it fits the narrower column. */
.footer-subscribe-col .form-group{
	border-color: rgba(255, 255, 255, 0.18);
}

.footer-subscribe-col .form-group:focus-within{
	border-color: var(--iso-red);
}

.footer-subscribe-col .email-field{
	min-width: 0;
	color: var(--iso-white);
	padding: 10px 6px 10px 18px;
}

.footer-subscribe-col .newsletter-btn{
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--iso-red);
	color: var(--iso-white);
	font-size: 16px;
}

.footer-subscribe-col .newsletter-btn:hover{
	background-color: var(--iso-white);
	color: var(--iso-black);
}

@media (max-width: 991px){
	.footer-subscribe-col{
		width: 100%;
		padding-left: 0;
		margin-top: 40px;
	}
}

/* The three "what we do" plates crossfade as they rotate through the cards. */
.what-we-do-images img{
	transition: opacity 0.3s ease-in-out;
}

/* ============================================================
 * Highlight thumbnails: play affordance on hover
 * ============================================================ */

.match-highlight-img{
	position: relative;
	overflow: hidden;
}

.match-highlight-img::after{
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.match-highlight-img .iso-play{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	margin: -33px 0 0 -33px;
	border-radius: 50%;
	background-color: var(--iso-red);
	color: var(--iso-white);
	font-size: 22px;
	opacity: 0;
	transform: scale(0.72);
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
	pointer-events: none;
}

.match-highlight-item:hover .match-highlight-img::after{
	opacity: 1;
}

.match-highlight-item:hover .match-highlight-img .iso-play{
	opacity: 1;
	transform: scale(1);
}

.match-highlight-img .iso-play::before{
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 2px solid rgba(238, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce){
	.match-highlight-img .iso-play{
		transition: none;
	}
}

/*
 * Second pass on currentColor-style contrast bugs. These selectors take
 * --e-global-color-primary as their TEXT colour but paint no light background of
 * their own, so on the black page they rendered black on black. The "Learn more"
 * label on blog cards was invisible this way, with only its red arrow showing.
 * Anything that does supply its own white pill or circle is deliberately left
 * dark and is not listed here.
 */
.blog-item .readmore-btn,
.post-item-btn a:hover,
.main-menu ul li.highlighted-menu a,
.main-menu ul ul li a:hover,
.team-sidebar-social ul li a,
.progressbar-fill span,
.page-single-post .comment-box .comment-reply-title,
.page-single-post .comment-box .title-comments{
	color: var(--iso-white);
}

.blog-item .readmore-btn:hover{
	color: var(--iso-red);
}

/* ============================================================
 * Navigation
 * The theme sets a size on the nav links but no family, so they fell back to
 * the body face while every other control uses the display face. Match them,
 * and give them a little more size and tracking so they read on the dark bar.
 * ============================================================ */

.main-menu ul li a{
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 21px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.main-menu ul li.active > a,
.main-menu ul li a:hover{
	color: var(--iso-red);
}

/* Header call to action: red pill with a black arrow disc */
.header-btn .btn-default{
	background: var(--iso-red);
	color: var(--iso-white);
}

.header-btn .btn-default i{
	background-color: var(--iso-black);
	color: var(--iso-white);
}

.header-btn .btn-default::after{
	background: var(--iso-black);
}

.header-btn .btn-default:hover i{
	background-color: var(--iso-red);
}

/* ============================================================
 * Mobile
 * The utility bar is hidden below 992px, so the masthead offset that clears it
 * must go too — otherwise the header floats 52px down over the banner copy.
 * The banner then needs enough head room to clear the masthead, and the
 * carousel dots need to sit clear of the buttons rather than on top of them.
 * ============================================================ */

@media (max-width: 991px){
	header.main-header{
		top: 0;
	}

	.iso-banner-slide{
		min-height: 0;
		padding: 132px 0 96px;
	}

	.iso-banner-content{
		max-width: none;
		padding: 0;
	}

	.iso-banner-eyebrow{
		margin-bottom: 18px;
		font-size: 16px;
		letter-spacing: 0.16em;
	}

	.iso-banner-title{
		margin-bottom: 18px;
	}

	.iso-banner-intro{
		max-width: none;
		margin-bottom: 28px;
	}

	/* one column, equal widths, so the two pills line up */
	.iso-banner-actions{
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.iso-banner-actions .btn-default{
		justify-content: space-between;
		width: 100%;
	}

	.iso-banner-slider .swiper-pagination{
		position: static;
		margin-top: 30px;
	}
}

@media (max-width: 575px){
	.iso-banner-slide{
		padding: 118px 0 84px;
	}

	.iso-banner-title{
		font-size: clamp(34px, 11vw, 46px);
	}

	.iso-banner-intro{
		font-size: 13px;
		line-height: 1.7em;
	}
}

/* ============================================================
 * Mobile: overlay panels that only work beside a wide image
 * The theme floats several cards on top of a section image with absolute
 * positioning. Once the columns stack those cards sit over the artwork or
 * spill past it, so below 992px they return to the normal flow.
 * ============================================================ */

@media (max-width: 991px){
	.about-coach-box,
	.testimonial-counter-boxes{
		position: static;
		inset: auto;
		transform: none;
		margin-top: 18px;
	}

	.testimonial-counter-boxes{
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
	}

	.testimonial-counter-item{
		flex: 1 1 160px;
		min-width: 0;
	}

	/* the rotating "contact us" dial sat in a big gap beside the check list */
	.why-choose-body{
		gap: 24px;
	}

	.why-choose-body .check-list{
		width: 100%;
	}

	.contact-circle-counter-box{
		margin: 0;
	}

	/* fixture rows: team crests inline with the names instead of stacked */
	.match-schedule-item{
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px;
		padding: 22px 18px;
		text-align: center;
	}

	.match-schedule-item .match-team-icon{
		order: 1;
	}

	.match-schedule-item .match-schedule-content{
		order: 2;
		flex: 1 1 100%;
	}
}

/* ============================================================
 * Mobile: footer columns and control sizing
 * The four-column footer widths above are desktop proportions; without this
 * they leave each column a fraction of a phone screen, which is what made
 * "Follow us on" wrap and the social icons fall into a 2x2 block.
 * ============================================================ */

@media (max-width: 991px){
	.footer-main-box .footer-about,
	.footer-main-box .footer-links,
	.footer-main-box .footer-info,
	.footer-subscribe-col{
		width: 100%;
		padding-left: 0;
	}

	.footer-about{
		padding-right: 0;
	}

	.footer-social-link h3{
		font-size: 20px;
		margin-bottom: 12px;
	}

	.footer-social-link ul{
		flex-wrap: nowrap;
	}

	/* the theme's pill is sized for desktop; trim it so it does not dominate */
	.btn-default{
		font-size: 16px;
		padding: 5px 5px 5px 22px;
	}

	.btn-default i{
		width: 34px;
		height: 34px;
		font-size: 16px;
		padding: 6px;
	}

	.readmore-btn,
	.blog-item .readmore-btn{
		font-size: 16px;
	}

	.testimonial-counter-item{
		padding: 14px 18px;
	}

	.testimonial-counter-item .counter-value{
		font-size: 34px;
	}
}