/* BC Sports International: the 2013 look (green header, orange menu, grey page, green footer), responsive. */

:root {
	--green: #46a06b;
	--orange: #f90;
	--page: #ccc;
	--strip: #c5c5c5;
	--active: #666;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0 0 24px;
	background: #5a9a1c url(../images/bg-green.jpg) center top / cover no-repeat fixed;
	font: 16px/1.45 Arial, Helvetica, sans-serif;
	color: #111;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.page {
	max-width: 1000px;
	margin: 0 auto;
	background: var(--page);
	border: 1px solid #fff;
	border-top: 0;
}

/* Header: the original artwork with the logo. */
.site-header img {
	width: 100%;
}

/* Menu */
.menu {
	margin: 2px 0 0;
	background: var(--orange) linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 60%);
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.menu ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 6px 0 8px;
	list-style: none;
	font: bold 13px/1.5 Arial, Helvetica, sans-serif;
}

.menu li {
	margin: 0 5px;
}

.menu a {
	display: block;
	padding: 6px 18px;
	border-radius: 5px;
	border-top: 1px solid transparent;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

.menu a:hover,
.menu a:focus-visible,
.menu a[aria-current="page"] {
	background: var(--active) linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%);
	border-top-color: #f8f8f8;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

/* Two columns: content and the social buttons. */
.columns {
	display: grid;
	grid-template-columns: minmax(0, 685px) 300px;
	gap: 15px;
	padding: 5px 0 10px;
}

.main {
	min-width: 0;
}

/* Slider: three photos cross-fading inside the WOW Slider frame. */
.slider {
	position: relative;
	aspect-ratio: 668 / 474;
	max-width: 668px;
	background: url(../images/slider-frame.png) 0 0 / 100% 100% no-repeat;
}

.slider-images {
	position: absolute;
	left: 2.096%;
	top: 2.954%;
	width: 95.808%;
	height: 84.388%;
	overflow: hidden;
	background: #000;
}

.slider-images img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: slide 15s infinite;
}

/* Negative delays: the first photo is already visible when the page opens. */
.slider-images img:nth-child(1) { animation-delay: -1s; }
.slider-images img:nth-child(2) { animation-delay: 4s; }
.slider-images img:nth-child(3) { animation-delay: 9s; }

@keyframes slide {
	0%   { opacity: 0; }
	6%   { opacity: 1; }
	33%  { opacity: 1; }
	39%  { opacity: 0; }
	100% { opacity: 0; }
}

/* Banner in place of the Flash one: the same phrases and circle colours. */
.banner {
	max-width: 668px;
	margin: 5px 0;
	padding: 10px;
	background: var(--strip);
}

.banner-box {
	position: relative;
	container-type: inline-size;
	max-width: 468px;
	height: 60px;
	margin: 0 auto;
	overflow: hidden;
	background: #fff;
	border: 1px solid #bbb;
}

.banner-box span {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font: 900 min(24px, 5.2cqw)/1 "Franklin Gothic Heavy", "Franklin Gothic Medium", "Arial Black", Arial, sans-serif;
	color: #666;
	opacity: 0;
	animation: phrase 9s infinite;
}

.banner-box span.long {
	font-size: min(18px, 3.6cqw);
}

.banner-box span::before {
	content: "";
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c);
	flex: none;
}

.banner-box span:nth-child(1) { --c: #1fa2aa; animation-delay: -1s; }
.banner-box span:nth-child(2) { --c: #702b9a; animation-delay: 2s; }
.banner-box span:nth-child(3) { --c: #d2cc43; animation-delay: 5s; }

@keyframes phrase {
	0%   { opacity: 0; transform: translateY(40px); }
	5%   { opacity: 1; transform: translateY(-6px); }
	8%   { transform: translateY(0); }
	30%  { opacity: 1; transform: translateY(0); }
	33%  { opacity: 0; transform: translateY(-40px); }
	100% { opacity: 0; }
}

/* Right column */
.social {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Only Facebook has a link; the other three are pictures without hover. */
.social li > * {
	display: block;
	max-width: 280px;
	aspect-ratio: 280 / 110;
	margin: 0 auto 0 0;
	background: var(--img) 0 0 / 100% 100% no-repeat;
}

.social a:hover,
.social a:focus-visible {
	background-image: var(--hover);
}

.social .facebook { --img: url(../images/facebook.png); --hover: url(../images/facebook-hoover.png); }
.social .youtube  { --img: url(../images/youtube.png);  --hover: url(../images/youtube-hoover.png); }
.social .linkedin { --img: url(../images/linkedin.png); --hover: url(../images/linkedin-hoover.png); }
.social .twitter  { --img: url(../images/twiter.png);   --hover: url(../images/twiter-hoover.png); }

/* Footer */
.site-footer {
	margin: 0;
	padding: 8px 14px 6px;
	background: var(--green);
	border-radius: 8px 8px 0 0;
	color: #fff;
	font: 11.5px/1.45 Arial, Helvetica, sans-serif;
}

.site-footer p {
	margin: 0;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

.site-footer .copyright {
	margin-top: 10px;
	text-align: center;
	font-size: 19px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	.slider-images img,
	.banner-box span {
		animation: none;
	}
	.slider-images img:first-child,
	.banner-box span:first-child {
		opacity: 1;
	}
}

@media (max-width: 1020px) {
	.page {
		border-left: 0;
		border-right: 0;
	}
	.columns {
		grid-template-columns: minmax(0, 1fr) minmax(200px, 30%);
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (max-width: 700px) {
	body {
		padding-bottom: 0;
	}
	.menu ul {
		justify-content: center;
		padding: 6px 4px;
	}
	.menu li {
		margin: 2px;
	}
	.menu a {
		padding: 6px 12px;
	}
	.columns {
		grid-template-columns: 1fr;
	}
	.social {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}
	.social li > * {
		max-width: none;
	}
	.site-footer .copyright {
		font-size: 14px;
	}
}

/* About Us: the green text panel of the 2013 image, as text. */
.about {
	position: relative;
	margin: 0 0 30px;
	padding: 10px 200px 10px 14px;
	min-height: 449px;
	background: #758f53 url(../images/about-stars.png) right 32px top 125px no-repeat;
	color: #fff;
	font-size: 13px;
	line-height: 1.35;
	box-shadow: 0 18px 14px -12px rgba(0, 0, 0, .55);
}

.about::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 194px;
	height: 153px;
	background: url(../images/about-bobby.png) 0 0 / 100% 100% no-repeat;
}

.about p {
	margin: 0 0 10px;
}

.about h2 {
	margin: 14px 0 12px;
	font-size: 19px;
	font-weight: normal;
	text-transform: uppercase;
}

.about ol {
	margin: 0;
	padding-left: 20px;
}

.about li {
	margin: 0 0 12px;
}

.about a {
	color: inherit;
}

.about .tag {
	padding: 0 4px;
	background: #fff;
	color: #333;
	font-size: 11px;
	font-weight: bold;
}

.text {
	padding: 0 20px;
}

.text h2 {
	margin: 1em 0;
	font-size: 16px;
}

.photos img {
	width: 100%;
	margin-top: 20px;
}

@media (max-width: 700px) {
	.about {
		padding: 10px 14px 165px;
		min-height: 0;
		background-image: none;
	}
	.text {
		padding: 0 4px;
	}
}

/* Players & Coaches: the green cells with the orange frame of the old table. */
.notice {
	max-width: 668px;
	margin: 0;
	padding: 3px;
	border: 2px solid var(--orange);
	background: #fff;
}

.notice div {
	padding: 22px 24px;
	border: 2px solid var(--orange);
	background: var(--green);
	color: #fff;
	text-align: center;
}

.notice h2 {
	margin: 0 0 10px;
	font-size: 18px;
}

.notice p {
	margin: 0;
}

.notice a {
	color: #fff;
	font-weight: bold;
}

/* Gallery: six photos, the same cross-fade without JS. */
.slider-6 .slider-images img { animation-name: slide6; animation-duration: 30s; }
.slider-6 .slider-images img:nth-child(4) { animation-delay: 14s; }
.slider-6 .slider-images img:nth-child(5) { animation-delay: 19s; }
.slider-6 .slider-images img:nth-child(6) { animation-delay: 24s; }

@keyframes slide6 {
	0%     { opacity: 0; }
	3%     { opacity: 1; }
	16.67% { opacity: 1; }
	19.67% { opacity: 0; }
	100%   { opacity: 0; }
}

/* With JS (js/slider.js): a class per photo and the WOW Slider arrows on hover. */
.slider.is-js .slider-images img {
	animation: none;
	opacity: 0;
	transition: opacity 1s;
}

.slider.is-js .slider-images img.is-active {
	opacity: 1;
}

.slider-prev,
.slider-next {
	position: absolute;
	top: 44%;
	z-index: 2;
	width: 59px;
	height: 66px;
	margin-top: -33px;
	padding: 0;
	border: 0;
	background: url(../images/slider-arrows.png) 0 0 no-repeat;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s;
}

.slider-prev { left: 4%; }
.slider-next { right: 4%; background-position: 100% 0; }
.slider-prev:hover { background-position: 0 100%; }
.slider-next:hover { background-position: 100% 100%; }

.slider:hover .slider-prev,
.slider:hover .slider-next,
.slider-prev:focus-visible,
.slider-next:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.slider-prev,
	.slider-next {
		opacity: .8;
		transform: scale(.7);
	}
}

/* Contact: the business card, its text as text over the cleaned artwork. */
.card {
	position: relative;
	container-type: inline-size;
	max-width: 681px;
	aspect-ratio: 681 / 465;
	background: #000 url(../images/contact-card.jpg) 0 0 / 100% 100% no-repeat;
	color: #e9e7a6;
	font-style: italic;
}

.card div {
	position: absolute;
	left: 8.5%;
	bottom: 13%;
}

.card h2 {
	margin: 0 0 .9em;
	color: #fff;
	font-size: max(16px, 4.3cqw);
	font-variant: small-caps;
	letter-spacing: .02em;
}

.card p {
	margin: 0;
	font-size: max(12px, 2.9cqw);
	line-height: 1.3;
}

.card a {
	color: inherit;
	text-decoration: none;
}

.card a:hover {
	text-decoration: underline;
}

.card .city {
	font-variant: small-caps;
}