/*
Theme Name: League
Description: One small theme for the LA league sites (cornhole, darts, bocce). No plugins; the home page is set in Appearance > Customize > League site.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: league
Update URI: false
*/

@font-face { font-family: "Metropolis"; src: url("assets/fonts/metropolis-light-webfont.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("assets/fonts/metropolis-extrabold-webfont.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("assets/fonts/mulish-900-italic.woff2") format("woff2"); font-weight: 800 900; font-style: italic; font-display: swap; }

:root {
	--accent: #ff1000;
	--highlight: #00b8f4;
	--badge: #ff3a2d;
	--ink: #000;
	--muted: #a8adc5;
	--dim: #635c81;
	--panel: #252525;
	--line: rgba(255, 255, 255, .2);
	--sans: "Metropolis", "Helvetica Neue", Arial, sans-serif;
	--display: "Mulish", "Metropolis", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--ink);
	color: var(--muted);
	font: 300 18px/1.556 var(--sans);
	letter-spacing: .38px;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--highlight); }
h1, h2, h3, h4, h5, h6 { margin: 0; color: #fff; font-weight: 800; letter-spacing: normal; }
p { margin: 0 0 1em; }

.screen-reader-text, .skip-link:not(:focus) {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 16px; background: #fff; color: #000; }

/* Buttons: flat red, and a blue sweep on hover. */
.button, .site-header__cta, .wp-block-button__link {
	display: inline-block;
	padding: 22.5px 42px;
	background: linear-gradient(to right, var(--highlight) 50%, var(--accent) 50%) 100% 0 / 210% 100% no-repeat;
	color: #fff;
	font: 800 14px/16px var(--sans);
	letter-spacing: .38px;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	transition: background-position .3s ease;
}
.button:hover, .site-header__cta:hover, .wp-block-button__link:hover { background-position: 0 0; color: #fff; }

/* Header: sits over the top photo. */
.site-header {
	position: absolute; z-index: 20; top: 0; left: 0; right: 0;
	display: flex; align-items: center;
	height: 87px;
	border-bottom: 1px solid var(--line);
}
.site-header__brand {
	display: flex; align-items: center;
	height: 100%;
	padding: 0 40px 0 46px;
	border-right: 1px solid var(--line);
}
.logo img { width: 212px; height: auto; }
.logo-text {
	display: inline-flex; align-items: center; gap: 6px;
	color: #fff; font: 800 22px/.92 var(--sans); letter-spacing: -.5px; text-transform: uppercase;
}
.logo-text__ring {
	width: 52px; height: 52px; flex: none; border-radius: 50%;
	background: radial-gradient(circle, #fff 0 12%, var(--accent) 13% 30%, #fff 31% 46%, var(--accent) 47% 100%);
}
.logo-text__first { color: var(--accent); font-size: 56px; line-height: .8; letter-spacing: -3px; }
.logo-text__rest { max-width: 4.6em; }
.logo { text-decoration: none; }

.site-nav { flex: 1; padding-left: 21px; }
.site-nav__list { display: flex; margin: 0; padding: 0; list-style: none; }
.site-nav__list a {
	display: block; padding: 14px;
	color: #fff; font: 800 14px/16px var(--sans); letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
	transition: color .2s;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a { color: var(--highlight); }
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a { font-weight: 600; }

.site-header__cta {
	align-self: flex-start;
	width: 171px; height: 88px; margin-top: -1px; padding: 0;
	display: flex; align-items: center; justify-content: center;
}
.site-header__toggle { display: none; }

/* Home: the big photo. */
.hero {
	position: relative;
	height: 100vh; min-height: 680px;
	overflow: hidden;
	background: #111;
}
.hero__slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 1.29s ease, visibility 1.29s; }
.hero__slide.is-active { opacity: 1; visibility: visible; }
/* Each photo slowly pushes in while it's showing, like the old slider (100% to 115% over 10s). */
.hero__slide.is-active .hero__photo { animation: league-push 10s linear forwards; }
@keyframes league-push { from { transform: scale(1); } to { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hero__slide.is-active .hero__photo { animation: none; } }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__dots { position: absolute; z-index: 3; top: 200px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; }
.hero__dots button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }
.hero__dots button.is-active { background: #fff; }
.hero__title-block {
	position: absolute; z-index: 2; top: 50.6%; left: 50%; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center;
	width: max-content; max-width: 92vw;
}
.hero__badge {
	position: relative; z-index: 1;
	margin-bottom: -17px;
	padding: 0 15px;
	background: var(--badge); color: #fff;
	font: 800 italic 34px/36px var(--sans); letter-spacing: -.75px;
}
.hero__title {
	margin: 0;
	padding: 4px 30px 6px;
	border: 2px solid #fff;
	color: #fff;
	font: 800 italic 113px/113px var(--sans); letter-spacing: -6px;
	text-align: center;
}
.hero__title--long { font-size: 68px; }
.hero__title--red { color: var(--badge); }
.hero__button {
	position: relative; z-index: 1;
	margin-top: -12px;
	padding: 0 15px;
	background: var(--badge); color: #fff;
	font: 900 italic 23px/38px var(--display);
	text-decoration: none;
	transition: background-color .2s;
}
.hero__button:hover { background: var(--highlight); }
/* A second red line under the button: the same label, not a link. */
.hero__note {
	position: relative; z-index: 1;
	margin-top: 8px;
	padding: 0 15px;
	background: var(--badge); color: #fff;
	font: 900 italic 23px/38px var(--display);
}

.features {
	position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
	display: grid; grid-template-columns: repeat(4, 1fr);
	min-height: 183px;
	background: rgba(0, 0, 0, .5);
	border-top: 1px solid var(--line);
}
.feature {
	display: block;
	padding: 36px 25px 25px;
	border-left: 1px solid var(--line);
	color: #fff; text-decoration: none;
}
.feature:first-child { border-left: 0; }
.feature__title {
	display: flex; align-items: center; gap: 14px;
	font: 800 28px/49px var(--sans); letter-spacing: 1px; text-transform: capitalize;
	transition: color .2s;
}
a.feature:hover .feature__title { color: var(--highlight); }
.feature__icon { width: 36px; height: 36px; color: var(--accent); flex: none; }
.feature__text { margin: 6px 0 0; color: #fff; font-size: 18px; line-height: 28.8px; }

/* Two halves: a photo (or slider, or map) beside a dark panel. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--photos { min-height: 711px; }
.split--location { min-height: 900px; }
.split__media { position: relative; overflow: hidden; background: #111; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__media--map a { position: absolute; inset: 0; }
.split__panel {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	padding: 80px 40px;
	background: #000 var(--panel-bg, none) center / cover no-repeat;
}
.split__panel::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .82); }
.split__panel--photo::before { background: rgba(0, 0, 0, .86); }
.promo { position: relative; width: 364px; max-width: 100%; }
.split--location .promo { width: 240px; }
.promo__icon { display: block; width: 80px; height: 80px; margin-bottom: 18px; color: var(--accent); }
.promo__icon--pin { width: 76px; height: 86px; }
.promo__eyebrow { margin: 0; color: var(--accent); font: 400 italic 20.7px/31.05px var(--sans); text-transform: uppercase; }
.promo__title { margin: 8px 0 13px; font: 800 46px/55.2px var(--sans); }
.promo__text { margin: 0 0 32px; color: var(--dim); font-size: 18px; line-height: 28px; }
.promo__text--light { color: var(--muted); }

.slider { height: 100%; min-height: 360px; }
.slider__track {
	position: absolute; inset: 0;
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; }
.slider__arrow {
	position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
	width: 50px; height: 50px; padding: 13px;
	border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%;
	background: transparent; color: #fff; cursor: pointer;
	opacity: .7; transition: opacity .2s;
}
.slider__arrow:hover { opacity: 1; }
.slider__arrow--prev { left: 20px; }
.slider__arrow--next { right: 20px; }
.slider__dots {
	position: absolute; z-index: 2; left: 0; right: 0; bottom: 20px;
	display: flex; justify-content: center; gap: 8px;
}
.slider__dots button {
	width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
	background: #fff; cursor: pointer;
}
.slider__dots button.is-active { background: var(--accent); }

/* Home: the sponsor banner. */
.banner { padding: 0 0 34px; background: #000; text-align: center; }
.banner__image { margin: 0 auto; width: 677px; }
.banner__caption { position: relative; margin-top: -52px; color: var(--accent); font: 800 46px/46px var(--sans); text-transform: uppercase; }

/* Footer. */
.site-footer { padding: 88px 20px 26px; background: #000; text-align: center; }
.site-footer__row {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px;
	max-width: 1170px; margin: 0 auto;
}
.site-footer__sponsor--1 { order: 1; }
.site-footer__logo { order: 2; }
.site-footer__sponsor--2 { order: 3; }
.site-footer__sponsor h6 { margin-bottom: 20px; font: 800 18px/18px var(--sans); }
.site-footer__sponsor img { margin: 0 auto; max-width: 234px; max-height: 90px; width: auto; }
.site-footer__sponsor a + h6, .site-footer__sponsor img + h6, .site-footer__sponsor a + a, .site-footer__sponsor img + img, .site-footer__sponsor a + img, .site-footer__sponsor img + a { margin-top: 28px; }
.site-footer__logo img { width: 403px; }
.site-footer__social { display: flex; justify-content: center; gap: 18px; margin: 40px 0 0; }
.site-footer__social a { display: block; width: 26px; height: 26px; color: #fff; }
.site-footer__social a:hover { color: var(--accent, #ff1000); }
.site-footer__logo .logo-text { transform: scale(1.8); margin: 30px 0; }
.site-footer__note { margin: 50px 0 0; color: #fff; font-weight: 800; }
.site-footer__copyright { margin: 86px 0 0; color: var(--accent); font-size: 18px; }
.site-footer__copyright b { font-size: 13px; font-weight: 800; text-transform: uppercase; }

/* Every other page: photo on top with the title in a red box. */
.page-hero {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: 527px; padding: 120px 20px 40px;
	overflow: hidden; background: #111;
}
.page-hero--plain { min-height: 360px; }
.page-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__title-block { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-top: 150px; }
.page-hero__title {
	padding: 4px 10px 10px;
	border: 3px solid #fff;
	background: var(--accent);
	font: 900 italic 104px/104px var(--display); letter-spacing: -3.75px;
	text-align: center;
}
.page-hero__subtitle {
	position: relative; margin: -12px 0 0; padding: 0 12px;
	background: #000; color: #fff;
	font: 900 italic 32px/41px var(--display); letter-spacing: -1.5px;
}

/* Content written in the editor (core blocks only). */
.page-content { max-width: 1250px; margin: 0 auto; padding: 80px 95px; color: #fff; }
.page-content > * + * { margin-top: 1.25em; }
.page-content > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.page-content > .alignwide { margin-left: -60px; margin-right: -60px; }
.page-content h2 { font-size: 46px; line-height: 1.2; }
.page-content h3 { font-size: 28px; line-height: 1.3; }
.page-content h4 { font-size: 22px; }
.page-content a { color: var(--highlight); }
.page-content .has-background { padding: 60px; }
.page-content .wp-block-column.has-background a { color: inherit; }
.page-content .wp-block-columns { gap: 30px; }

/* An FAQ is a Details block: a blue bar, a dark row, and the answer under it. */
.page-content .wp-block-details { margin: 0 0 10px; background: var(--panel); }
.page-content .wp-block-details summary {
	position: relative; list-style: none; cursor: pointer;
	padding: 22px 45px 22px 80px;
	color: #fff; font: 800 14px/18.2px var(--sans); letter-spacing: .38px; text-transform: uppercase;
}
.page-content .wp-block-details summary::-webkit-details-marker { display: none; }
.page-content .wp-block-details summary::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 40px; background: var(--highlight);
}
.page-content .wp-block-details summary::after {
	content: ""; position: absolute; left: 36px; top: 50%; margin-top: -4px;
	border: 4px solid transparent; border-left-color: #fff; transition: transform .2s;
}
.page-content .wp-block-details[open] summary::after { transform: rotate(90deg); transform-origin: 2px 4px; }
.page-content .wp-block-details > :not(summary) { margin: 0; padding: 0 45px 22px 80px; color: var(--muted); font-size: 16px; }

/* The big italic list, like the rankings. Add the class "is-style-standings" to a List block. */
.page-content .is-style-standings { margin-left: auto; margin-right: auto; max-width: 560px; padding-left: 40px; color: #fff; font: 900 italic 29px/34.8px var(--display); letter-spacing: -1.2px; text-align: center; }
.page-content .is-style-standings li::marker { font-weight: 900; }

/* Big numbers, like players and teams. */
.page-content .is-style-stat { margin: 0; color: var(--accent); font: 800 46px/46px var(--sans); text-align: center; }

/* Phones and small tablets. */
@media (max-width: 1100px) {
	.site-header { height: 72px; }
	.site-header__brand { padding: 0 20px; border-right: 0; }
	.logo img { width: 160px; }
	.site-nav {
		position: fixed; inset: 0; z-index: -1;
		display: flex; align-items: center; justify-content: center;
		padding: 0; background: rgba(0, 0, 0, .96);
		opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
	}
	.nav-open .site-nav { opacity: 1; visibility: visible; }
	.nav-open { overflow: hidden; }
	.site-nav__list { flex-direction: column; text-align: center; }
	.site-nav__list a { padding: 11px; font: 300 36px/54px var(--sans); letter-spacing: 1px; }
	.site-header__cta { width: 72px; height: 73px; margin-left: auto; padding: 8px; font-size: 10px; line-height: 12px; text-align: center; }
	.site-header__toggle {
		display: block; order: -1; width: 56px; height: 56px; margin-left: 10px; padding: 14px;
		border: 0; background: none; color: #fff; cursor: pointer;
	}
	.site-header__toggle .close, .nav-open .site-header__toggle .open { display: none; }
	.nav-open .site-header__toggle .close { display: block; }

	.hero { height: auto; min-height: 0; display: flex; flex-direction: column; padding-top: max(100vh, 560px); }
	.hero__slide { bottom: auto; height: max(100vh, 560px); }
	.hero__title-block { top: 50%; transform: translate(-50%, -50%); }
	.hero__dots { top: 110px; gap: 10px; }
	.hero__dots button { width: 18px; height: 18px; }
	.hero__title { font-size: clamp(44px, 12vw, 113px); line-height: 1; letter-spacing: -2px; padding: 4px 16px 8px; }
	.hero__title--long { font-size: clamp(28px, 7.5vw, 68px); }
	.hero__badge { font-size: clamp(18px, 4.5vw, 34px); line-height: 1.1; margin-bottom: -10px; }
	.hero__title--long { font-size: 68px; }
.hero__title--red { color: var(--badge); }
.hero__button { font-size: clamp(15px, 4vw, 23px); line-height: 1.6; margin-top: -10px; }
	.hero__note { font-size: clamp(15px, 4vw, 23px); line-height: 1.6; }
	.features { position: relative; grid-template-columns: 1fr; background: rgba(0, 0, 0, .75); }
	.feature { border-left: 0; border-top: 1px solid var(--line); padding: 28px 22px; }
	.feature__title { flex-direction: column; align-items: flex-start; gap: 6px; line-height: 1.3; font-size: 24px; }

	.split, .split--photos, .split--location { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.split__media { aspect-ratio: 1 / 1; }
	.split--location .split__panel { order: 2; }
	.split__panel { padding: 70px 22px; justify-content: flex-start; }
	.banner__image { width: 90%; }
	.banner__caption { font-size: 26px; line-height: 1.2; margin-top: -10px; }

	.site-footer__row { grid-template-columns: 1fr; gap: 30px; }
	.site-footer__logo { order: 0; }
	.site-footer__logo img { width: 280px; margin: 0 auto; }
	.site-footer__logo .logo-text { transform: scale(1.25); margin: 16px 0; }

	.page-hero { min-height: 380px; padding-top: 100px; }
	.page-hero__title { font-size: clamp(44px, 13vw, 104px); line-height: 1; letter-spacing: -2px; }
	.page-hero__subtitle { font-size: clamp(18px, 5vw, 32px); line-height: 1.3; }
	.page-content { padding: 50px 22px; }
	.page-content > .alignwide { margin-left: 0; margin-right: 0; }
	.page-content .has-background { padding: 30px 22px; }
	.page-content .wp-block-details summary { padding-left: 60px; }
	.page-content .wp-block-details summary::before { width: 30px; }
	.page-content .wp-block-details summary::after { left: 26px; }
	.page-content .wp-block-details > :not(summary) { padding-left: 60px; padding-right: 22px; }
	.page-content .is-style-standings { font-size: 22px; line-height: 1.4; }
}

/* Tabs: a Group of Details blocks with the "Tabs" style (old About and Rankings pages). */
.page-content .is-style-tabs.has-tabs details { display: none; background: none; }
.page-content .is-style-tabs.has-tabs details.is-active { display: block; }
.page-content .is-style-tabs.has-tabs details > summary { display: none; }
.page-content .is-style-tabs.has-tabs details > :not(summary) { padding: 30px 0 0; color: #fff; font-size: 18px; }
.league-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.league-tabs__tab { border: 0; cursor: pointer; padding: 12px 22px; background: var(--badge); color: #fff; font: 800 15px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .04em; }
.league-tabs__tab:hover { background: var(--highlight); }
.league-tabs__tab.is-active { background: #fff; color: #000; }
.page-content .is-style-tabs .is-style-standings { columns: 2; text-align: center; }

/* A column with an icon at the top (has-league-icon-…). */
.league-column-icon { display: block; width: 56px; height: 56px; margin: 0 auto 16px; color: var(--highlight); }

/* Counters in a row: icon, big red number, white label. */
.page-content .league-stats { text-align: center; }
.page-content .league-stats .wp-block-column > p { margin: 0; color: #fff; font-weight: 800; }
.page-content .league-stats .wp-block-column > p.is-style-stat { color: var(--badge); }

/* A row of photos, edge to edge with no gaps (the team cards). */
.page-content .league-image-row { gap: 0 !important; }
.page-content .league-image-row .wp-block-image { margin: 0; }
.page-content .league-image-row img { width: 100%; }

/* Address, phone and mail as three coloured boxes across the page. */
.page-content .league-icon-boxes { gap: 0 !important; margin-top: 0 !important; }
.page-content .league-icon-boxes > .wp-block-column { position: relative; padding: 60px 40px 60px 140px; color: #fff; }
.page-content .league-icon-boxes > .wp-block-column:nth-child(3n+1) { background: var(--highlight); }
.page-content .league-icon-boxes > .wp-block-column:nth-child(3n+2) { background: #0f6fd1; }
.page-content .league-icon-boxes > .wp-block-column:nth-child(3n) { background: #1b1d33; }
.page-content .league-icon-boxes .league-column-icon { position: absolute; left: 50px; top: 50%; width: 64px; height: 64px; margin: -32px 0 0; color: #fff; }
.page-content .league-icon-boxes h3 { margin: 0 0 10px; color: #fff; }
.page-content .league-icon-boxes p { margin: 0; color: #fff; }
.page-content .league-icon-boxes a { color: #fff; }
@media (max-width: 781px) {
	.page-content .league-icon-boxes > .wp-block-column { padding: 40px 24px 40px 110px; }
	.page-content .league-icon-boxes .league-column-icon { left: 30px; }
	.page-content .is-style-tabs .is-style-standings { columns: 1; }
}