/*!
Theme Name: Band Together Texas
Theme URI: https://bandtogethertexas.com/
Author: TAG Strategies
Author URI: https://tagstrategies.co/
Description: Native PHP + ACF theme for Band Together Texas, replacing the Elementor build.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bttx
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

@font-face {
	font-family: "NeoContactLTPro";
	src: url("assets/fonts/neocontact.woff2") format("woff2"),
		url("assets/fonts/neocontact.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--bttx-blue: #3585b5;
	--bttx-blue-deep: #2f77a2;
	--bttx-brown: #5a3a24;
	--bttx-red: #bf493a;
	--bttx-gold: #ae7b22;
	--bttx-steel: #9ba8af;
	--bttx-slate: #6b7f8c;
	--bttx-white: #fff;
	--bttx-white-50: rgb(255 255 255 / 50%);

	--bttx-font-display: "NeoContactLTPro", "Georgia", serif;
	--bttx-font-accent: "pennypacker-semiwide", "Arial Black", sans-serif;
	--bttx-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	/* Three-ring frame used on videos and cards. */
	--bttx-ring: 0 0 0 5px var(--bttx-brown), 0 0 0 10px var(--bttx-red), 0 0 0 15px var(--bttx-steel);
	--bttx-ring-size: 15px;

	--bttx-content: 950px;
	--bttx-gutter: 7.5%;
	--bttx-gap: 1.5rem;
	--bttx-admin-bar: var(--wp-admin--admin-bar--height, 0px);
	--bttx-bar-height: 40px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
	position: relative;
	margin: 0;
	overflow-x: clip;
	background-color: var(--bttx-blue);
	color: var(--bttx-white);
	font-family: var(--bttx-font-body);
	font-size: 16px;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
iframe,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--bttx-font-display);
	font-weight: 400;
	line-height: 1;
}

h1 { font-size: clamp(2.8rem, 2.341vw + 2.332rem, 4rem); }
h2 { font-size: clamp(2.4rem, 1.561vw + 2.088rem, 3.2rem); }
h3 { font-size: clamp(2rem, 1.561vw + 1.688rem, 2.8rem); }
h4 { font-size: clamp(1.6rem, 1.561vw + 1.288rem, 2.4rem); }
h5 { font-size: clamp(1.4rem, 1.171vw + 1.166rem, 2rem); }
h6 { font-size: clamp(1.2rem, 0.78vw + 1.044rem, 1.6rem); }

p {
	margin: 0 0 1em;
}

::placeholder {
	text-transform: uppercase;
}

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--bttx-white);
	outline-offset: 3px;
}

.bttx-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bttx-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	background: var(--bttx-white);
	color: var(--bttx-brown);
	font-weight: 700;
}

.bttx-skip-link:focus {
	top: calc(var(--bttx-admin-bar) + 1rem);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.bttx-button,
.bttx-content .gform_wrapper .gform_footer .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 12px 24px;
	border: 0;
	border-radius: 3px;
	background-color: var(--bttx-red);
	color: var(--bttx-white);
	font-family: var(--bttx-font-accent);
	font-size: 1.2rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 2px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.bttx-button:hover,
.bttx-button:focus-visible {
	background-color: var(--bttx-gold);
	color: var(--bttx-white);
}

.bttx-button--gold {
	background-color: var(--bttx-gold);
}

.bttx-button--gold:hover,
.bttx-button--gold:focus-visible {
	background-color: var(--bttx-red);
}

.bttx-button--square {
	border-radius: 0;
}

.bttx-buttons br {
	display: none;
}

.bttx-buttons {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bttx-gap);
	margin: 0 0 var(--bttx-gap);
}

@media (min-width: 768px) {
	.bttx-buttons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

/* The whole header sticks, offset by the bar height, so the red bar scrolls
   away and the masthead stays pinned (same as the Elementor build). */
.bttx-header {
	position: sticky;
	top: calc(var(--bttx-admin-bar) - var(--bttx-bar-height));
	z-index: 99;
}

.bttx-support-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--bttx-bar-height);
	padding: 0 1rem;
	overflow: hidden;
	white-space: nowrap;
	background-color: var(--bttx-red);
	color: var(--bttx-white);
	font-family: var(--bttx-font-accent);
	font-weight: 900;
	letter-spacing: 2px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.3s ease;
}

.bttx-support-bar:hover,
.bttx-support-bar:focus-visible {
	background-color: var(--bttx-gold);
}

.bttx-support-bar:focus-visible {
	outline-offset: -4px;
}

/* Logo shrinks once scrolled; the margin gives back the lost height so the
   page below doesn't jump. */
.bttx-masthead {
	--bttx-logo-h: 6rem;
	--bttx-logo-h-stuck: 4rem;
	display: flex;
	align-items: center;
	margin-bottom: 0;
	padding: 1rem;
	background-color: transparent;
	transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, margin-bottom 0.15s ease-in-out;
}

.bttx-masthead.is-stuck {
	margin-bottom: calc(var(--bttx-logo-h) - var(--bttx-logo-h-stuck));
	background: var(--bttx-blue-deep);
	background: radial-gradient(at bottom, var(--bttx-blue-deep) 0%, var(--bttx-blue) 50%);
	box-shadow: rgb(60 64 67 / 30%) 0 1px 2px 0, rgb(60 64 67 / 15%) 0 1px 3px 1px;
}

.bttx-masthead__meta {
	flex: 1 0 0;
	margin: 0;
	font-family: var(--bttx-font-display);
	font-size: clamp(1.4rem, 1.171vw + 1.166rem, 2rem);
	line-height: 0.75;
	text-align: center;
	text-shadow: 1.5px 1.5px 0 var(--bttx-brown);
}

.bttx-masthead__logo {
	flex: 0 0 auto;
	display: block;
}

.bttx-masthead__logo-img {
	width: auto;
	height: var(--bttx-logo-h);
	object-fit: contain;
	transition: height 0.15s ease-in-out;
}

.bttx-masthead.is-stuck .bttx-masthead__logo-img {
	height: var(--bttx-logo-h-stuck);
}

@media (min-width: 768px) {
	.bttx-masthead {
		--bttx-logo-h: 7rem;
		--bttx-logo-h-stuck: 6rem;
	}
}

@media (min-width: 1025px) {
	.bttx-masthead {
		--bttx-logo-h: 10rem;
		--bttx-logo-h-stuck: 8rem;
	}
}

/* ==========================================================================
   Layout
   ========================================================================== */

.bttx-main {
	padding: 10% var(--bttx-gutter);
}

.bttx-main > * {
	max-width: var(--bttx-content);
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) {
	.bttx-main {
		padding-top: 5%;
		padding-bottom: 5%;
	}
}

/* ==========================================================================
   Watch Live (front page)
   ========================================================================== */

.bttx-live {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bttx-gap);
}

.bttx-live > * {
	width: 100%;
}

.bttx-live__donate {
	width: auto;
	margin-top: 2rem;
}

.bttx-story {
	display: flex;
	flex-direction: column;
	gap: var(--bttx-gap);
}

.bttx-story__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.561vw + 1.288rem, 2.4rem);
	text-align: center;
}

/* Clearance so the 15px ring never touches the next title. */
.bttx-story + .bttx-story {
	margin-top: calc(var(--bttx-ring-size) - 0.5rem);
}

.bttx-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: calc(var(--bttx-ring-size) - 0.5rem);
	overflow: hidden;
	border-radius: 2rem;
	background-color: #000;
	box-shadow: var(--bttx-ring);
}

.bttx-video iframe,
.bttx-video__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.bttx-video__facade {
	display: block;
	padding: 0;
	background: #000;
	cursor: pointer;
}

.bttx-video__facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bttx-video__facade:focus-visible {
	outline-offset: -6px;
}

.bttx-video__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 2px 6px rgb(0 0 0 / 35%));
	opacity: 0.9;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bttx-video__facade:hover .bttx-video__play-icon,
.bttx-video__facade:focus-visible .bttx-video__play-icon {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.08);
}

/* ==========================================================================
   Pages
   ========================================================================== */

.bttx-page--narrow > * {
	max-width: 650px;
}

.bttx-page--narrow {
	min-height: 100vh;
}

.bttx-content {
	overflow-wrap: break-word;
}

.bttx-content > :last-child {
	margin-bottom: 0;
}

.bttx-content h2,
.bttx-content h3 {
	margin-top: 1.5em;
}

.bttx-content ul,
.bttx-content ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

.bttx-content li + li {
	margin-top: 0.4em;
}

.bttx-content a:not(.bttx-button):hover {
	color: var(--bttx-white-50);
}

.bttx-content--center,
.bttx-center {
	text-align: center;
}

.bttx-narrow {
	max-width: 700px;
	margin-right: auto;
	margin-left: auto;
}

.bttx-figure {
	margin: var(--bttx-gap) 0 0;
}

.bttx-only-mobile {
	display: block;
}

.bttx-only-desktop {
	display: none;
}

@media (min-width: 768px) {
	.bttx-only-mobile {
		display: none;
	}

	.bttx-only-desktop {
		display: block;
	}
}

.bttx-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ==========================================================================
   Form card (Gravity Forms sign-up)
   ========================================================================== */

.bttx-form-card {
	width: 100%;
	max-width: 650px;
	margin: var(--bttx-ring-size) auto;
	padding: 2rem 1.5rem;
	border-radius: 3rem;
	background-color: var(--bttx-white);
	color: var(--bttx-brown);
	box-shadow: var(--bttx-ring);
}

@media (min-width: 768px) {
	.bttx-form-card {
		max-width: 550px;
		padding: 2.5rem;
		border-radius: 3.5rem;
	}
}

@media (min-width: 1025px) {
	.bttx-form-card {
		max-width: 650px;
		border-radius: 4rem;
	}
}

.bttx-form-card__title {
	margin: 0 0 1rem;
	color: var(--bttx-red);
	font-size: clamp(2rem, 1.561vw + 1.688rem, 2.8rem);
	text-align: center;
	text-transform: uppercase;
}

.bttx-form-card .gform_wrapper .gform-body input[type="text"],
.bttx-form-card .gform_wrapper .gform-body input[type="email"],
.bttx-form-card .gform_wrapper .gform-body input[type="tel"] {
	border: 0;
	border-bottom: 2px solid var(--bttx-brown);
	border-radius: 0;
	box-shadow: none;
	transition: all 0.25s ease-in-out;
}

.bttx-form-card .gform_wrapper .gform-body input:focus {
	padding-left: 1rem;
	outline: none;
}

.bttx-form-card .gform_wrapper .gfield_description,
.bttx-form-card .gform_wrapper .gform-field-label--type-sub {
	font-size: 0.8rem;
}

.bttx-form-card .gform_wrapper .gform_footer {
	padding-bottom: 0 !important;
}

.bttx-content .bttx-form-card .gform_wrapper .gform_footer .gform_button {
	width: 100%;
	padding: 1em;
	border-radius: 2em;
	background-color: var(--bttx-brown);
}

.bttx-content .bttx-form-card .gform_wrapper .gform_footer .gform_button:hover {
	background-color: var(--bttx-red);
}

.ginput_container_phone .validation_message {
	display: none;
}

.gform_validation_errors {
	border: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   Footer + mobile support tab
   ========================================================================== */

.bttx-footer {
	display: flex;
	flex-direction: column;
	gap: var(--bttx-gap);
	padding: 1rem 1rem 5rem;
	font-size: 0.8rem;
	line-height: 1;
	text-align: center;
}

.bttx-footer p {
	max-width: 70rem;
	margin: 0 auto;
}

.bttx-footer a {
	text-decoration: none;
}

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

.bttx-cta {
	position: fixed;
	bottom: 0;
	left: 50%;
	z-index: 98;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: min(340px, 100% - 2rem);
	padding: 1rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
	border-radius: 1.5rem 1.5rem 0 0;
	background-color: var(--bttx-red);
	color: var(--bttx-white);
	font-family: var(--bttx-font-accent);
	font-size: 0.8rem;
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;
	visibility: hidden;
	transform: translate(-50%, 100%);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.5s, background-color 0.3s ease;
}

.bttx-cta.is-visible {
	visibility: visible;
	transform: translate(-50%, 0);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s, background-color 0.3s ease;
}

.bttx-cta:hover,
.bttx-cta:focus-visible {
	background-color: var(--bttx-gold);
}

.bttx-cta .bttx-icon {
	width: 1em;
	height: 1em;
}

@media (min-width: 768px) {
	.bttx-footer {
		padding-bottom: 1rem;
	}

	.bttx-cta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}