/**
Theme Name: southsidelegacylacrosse
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Southside Legacy Lacrosse child theme. South Side Legacy Field: navy + green athletic system, condensed display type, angled slant-cut panels.
Version: 3.3.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: southsidelegacylacrosse
Template: astra
*/

:root {
	--navy-900: #060d1a;
	--navy-800: #0a1526;
	--navy-700: #0f1d35;
	--navy-600: #17294a;
	--navy-500: #223a63;
	--navy-400: #3a5486;
	--navy-300: #6e82a6;
	--navy-200: #a9b5c9;
	--navy-100: #dde3ec;
	--green-800: #03471f;
	--green-700: #05602a;
	--green-600: #077d36;
	--green-500: #0e9645;
	--green-400: #2fb463;
	--green-300: #7fd3a0;
	--green-200: #bee9ce;
	--green-100: #e6f6ec;
	--white: #ffffff;
	--gray-50: #f6f8fa;
	--gray-100: #edf0f5;
	--gray-200: #dee3eb;
	--gray-500: #6e7889;
	--gray-700: #333b49;
	--black: #05090f;

	--text-heading: var(--navy-700);
	--text-body: var(--gray-700);
	--text-muted: var(--gray-500);
	--text-inverse: var(--white);
	--text-accent: var(--green-600);
	--text-eyebrow: var(--green-600);
	--text-link: var(--green-700);
	--text-on-accent: var(--white);
	--surface-page: var(--white);
	--surface-subtle: var(--gray-50);
	--surface-dark: var(--navy-700);
	--surface-dark-deep: var(--navy-900);
	--action-primary: var(--green-600);
	--action-primary-hover: var(--green-700);
	--action-primary-active: var(--green-800);
	--focus-ring: var(--green-400);
	--scrim-photo: linear-gradient(90deg, rgba(6, 13, 26, 0.88) 0%, rgba(6, 13, 26, 0.55) 45%, rgba(7, 125, 54, 0.28) 100%);

	--font-display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Barlow Semi Condensed", system-ui, sans-serif;
	--font-ui: "Barlow Condensed", "Barlow Semi Condensed", system-ui, sans-serif;
	--fs-display-1: 76px;
	--fs-display-2: 58px;
	--fs-display-3: 44px;
	--fs-display-4: 34px;
	--fs-h2: 24px;
	--fs-h3: 20px;
	--fs-lead: 20px;
	--fs-body: 17px;
	--fs-eyebrow: 13px;
	--fs-button: 14px;
	--lh-display: 0.94;
	--lh-heading: 1.12;
	--lh-body: 1.55;
	--fw-bold: 700;
	--fw-black: 900;
	--ls-display: 0.005em;
	--ls-eyebrow: 0.16em;
	--ls-button: 0.12em;
	--container-max: 1200px;
	--section-pad-y: 96px;
	--slant: 12px;
	--slant-lg: 28px;
	--clip-parallelogram: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
	--clip-panel: polygon(var(--slant-lg) 0, 100% 0, calc(100% - var(--slant-lg)) 100%, 0 100%);
	--radius-0: 0;
	--radius-pill: 999px;
	--dur-base: 200ms;
	--dur-fast: 120ms;
	--ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
	--transition-control: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
	--press-scale: 0.985;
	--shadow-sm: 0 1px 2px rgba(6, 13, 26, 0.1);
	--shadow-card-hover: 0 14px 30px rgba(6, 13, 26, 0.18);
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-body);
	background: var(--surface-page);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--text-heading);
}

.entry-content a:not(.wp-block-spectra-button):not(.ast-button) {
	color: var(--text-link);
	text-decoration: none;
}

.entry-content a:not(.wp-block-spectra-button):not(.ast-button):hover {
	color: var(--navy-700);
}

::selection {
	background: var(--green-200);
	color: var(--navy-700);
}

:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.home .entry-header,
.home.page .entry-header,
.home .ast-page-title-wrap,
.page-id-home .entry-header {
	display: none;
}

.home #content,
.home .site-content,
.home .ast-container {
	padding-top: 0;
	padding-bottom: 0;
}

.home .site-content > .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.home .entry-content > .alignfull,
.home .entry-content > .wp-block-spectra-container.alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Astra header                                                               */
/* -------------------------------------------------------------------------- */

.main-header-bar,
.ast-primary-header-bar,
.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header .ast-primary-header-bar {
	background: var(--navy-700) !important;
}

.ast-builder-menu-1 .menu-link,
.ast-header-menu-1 .menu-link,
.main-header-menu .menu-link {
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--white);
	padding-bottom: 4px;
	border-bottom: 3px solid transparent;
}

.ast-builder-menu-1 .menu-item:hover > .menu-link,
.ast-header-menu-1 .menu-item:hover > .menu-link,
.main-header-menu .menu-item:hover > .menu-link {
	color: var(--green-400);
}

.ast-builder-menu-1 .current-menu-item > .menu-link,
.ast-header-menu-1 .current-menu-item > .menu-link,
.main-header-menu .current-menu-item > .menu-link {
	color: var(--green-400);
	border-bottom-color: var(--green-500);
}

.site-header .custom-logo-link img,
.ast-header-html img {
	height: auto;
}

.ast-mobile-header-wrap .ast-primary-header-bar {
	background: var(--navy-700) !important;
}

.ast-mobile-menu-trigger-minimal .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
	fill: var(--white);
}

/* -------------------------------------------------------------------------- */
/* Buttons: Astra header + Spectra                                            */
/* -------------------------------------------------------------------------- */

.ast-header-button-1 .ast-custom-button,
.ast-header-button-1 .ast-button,
.site-header .ast-builder-button-wrap .ast-custom-button,
.wp-block-spectra-button:where(a, button, div.wp-block-button__link),
a.wp-block-spectra-button,
.wp-block-spectra-button a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-ui) !important;
	font-size: var(--fs-button) !important;
	font-weight: var(--fw-bold) !important;
	letter-spacing: var(--ls-button) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border-radius: var(--radius-0) !important;
	clip-path: var(--clip-parallelogram);
	white-space: nowrap;
	transition: var(--transition-control);
	box-shadow: none !important;
}

.ast-header-button-1 .ast-custom-button,
.ast-header-button-1 .ast-button,
.site-header .ast-builder-button-wrap .ast-custom-button {
	background: var(--action-primary) !important;
	color: var(--text-on-accent) !important;
	border: none !important;
	min-height: 34px;
	padding: 0 18px !important;
	clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-1 .ast-button:hover,
.site-header .ast-builder-button-wrap .ast-custom-button:hover {
	background: var(--action-primary-hover) !important;
	color: var(--text-on-accent) !important;
}

.wp-block-spectra-button:active,
.ast-header-button-1 .ast-custom-button:active {
	transform: scale(var(--press-scale));
}

.ssl-btn-outline .wp-block-spectra-button,
.wp-block-spectra-button.ssl-btn-outline {
	background: transparent !important;
	color: var(--navy-700) !important;
	border: 2px solid var(--navy-700) !important;
}

.ssl-btn-outline .wp-block-spectra-button:hover,
.wp-block-spectra-button.ssl-btn-outline:hover {
	background: var(--navy-700) !important;
	color: var(--white) !important;
}

.ssl-btn-outline-inverse .wp-block-spectra-button,
.wp-block-spectra-button.ssl-btn-outline-inverse {
	background: transparent !important;
	color: var(--white) !important;
	border: 2px solid var(--white) !important;
}

.ssl-btn-outline-inverse .wp-block-spectra-button:hover,
.wp-block-spectra-button.ssl-btn-outline-inverse:hover {
	background: var(--white) !important;
	color: var(--navy-700) !important;
}

.ssl-btn-link .wp-block-spectra-button,
.wp-block-spectra-button.ssl-btn-link {
	background: none !important;
	border: none !important;
	clip-path: none;
	padding: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	color: var(--navy-700) !important;
	gap: 8px;
}

.ssl-btn-link .wp-block-spectra-button:hover,
.wp-block-spectra-button.ssl-btn-link:hover {
	color: var(--green-600) !important;
	background: none !important;
}

/* -------------------------------------------------------------------------- */
/* Homepage section helpers                                                   */
/* -------------------------------------------------------------------------- */

.ssl-eyebrow {
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-eyebrow);
	margin-bottom: 12px;
}

.ssl-eyebrow.is-light,
.ssl-hero .ssl-eyebrow,
.ssl-quote .ssl-eyebrow,
.ssl-cta-card .ssl-eyebrow {
	color: var(--green-400);
}

.ssl-inner {
	width: 100%;
	max-width: var(--container-max) !important;
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px;
	padding-right: 32px;
	align-self: center;
	box-sizing: border-box;
}

.home .wp-block-spectra-container.alignfull.is-vertical,
.editor-styles-wrapper .wp-block-spectra-container.alignfull.is-vertical {
	align-items: center !important;
}

.ssl-hero {
	position: relative;
	min-height: 620px;
	overflow: hidden;
	background: var(--navy-800);
}

.ssl-hero .ssl-hero-copy {
	position: relative;
	z-index: 2;
	max-width: 760px;
}

.ssl-hero h1,
.ssl-hero .ssl-hero-title {
	font-size: clamp(42px, 7vw, var(--fs-display-1));
	color: var(--white);
	max-width: 760px;
	margin: 0 0 20px;
	line-height: var(--lh-display);
}

.ssl-hero .ssl-accent,
.ssl-mission .ssl-accent {
	color: var(--green-400);
}

.ssl-mission .ssl-accent {
	color: var(--green-600);
}

.ssl-hero .ssl-lead {
	font-size: var(--fs-lead);
	color: var(--navy-100);
	max-width: 500px;
	margin-bottom: 30px;
	line-height: 1.45;
}

.ssl-scrim-photo {
	position: relative;
}

.ssl-scrim-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--scrim-photo);
	pointer-events: none;
	z-index: 1;
}

.ssl-slant img,
img.ssl-slant,
.ssl-slant .wp-block-image img {
	clip-path: var(--clip-panel);
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.ssl-slant-sm img,
.ssl-slant-sm .wp-block-image img {
	clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}

.ssl-mission-photos {
	position: relative;
	padding-bottom: 64px;
}

.ssl-mission-photos img {
	object-fit: cover;
	object-position: center top !important;
}

.ssl-mission-photos .ssl-slant:not(.ssl-mission-overlap) img {
	aspect-ratio: 1 / 1 !important;
}

.ssl-mission-overlap {
	position: absolute;
	right: -18px;
	bottom: 0;
	width: 52%;
	outline: 6px solid var(--white);
	z-index: 2;
}

.ssl-mission-overlap img {
	aspect-ratio: 4 / 3;
}

.ssl-pillar {
	border-top: 4px solid var(--green-600);
	padding-top: 20px;
}

.ssl-pillar h3 {
	margin-bottom: 10px;
}

.ssl-pillar p {
	margin: 0;
	color: var(--text-muted);
}

.ssl-photo-tile {
	position: relative;
	display: block;
	text-decoration: none !important;
	overflow: hidden;
	padding: 0 !important;
}

.ssl-photo-tile img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center center;
}

.ssl-photo-tile .ssl-photo-label {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	z-index: 1;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--white);
	line-height: 1.05;
	text-shadow: 0 1px 12px rgba(6, 13, 26, 0.75), 0 0 2px rgba(6, 13, 26, 0.85);
}

.ssl-quote-mark {
	width: 48px;
	height: 3px;
	background: var(--green-500);
	margin: 28px 0 16px;
}

.ssl-quote-name {
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--white);
}

.ssl-quote-meta {
	font-size: 14px;
	color: var(--navy-200);
}

.ssl-badge {
	display: none;
}

.ssl-news-card {
	background: var(--white);
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--gray-200);
	transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.ssl-news-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
}

.ssl-news-carousel .wp-block-post-terms,
.ssl-news-carousel .taxonomy-category,
.blog .ast-blog-single-element.ast-taxonomy-container,
.blog .cat-links,
.archive .ast-blog-single-element.ast-taxonomy-container {
	display: none !important;
}

.ssl-news-carousel {
	width: 100%;
	--spectra-carousel-arrow-color: var(--white);
	--spectra-carousel-arrow-bg-color: var(--green-600);
	--spectra-carousel-dot-color: var(--green-600);
}

.ssl-news-carousel .wp-block-post-featured-image,
.ssl-news-carousel .wp-block-post-featured-image img {
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center top;
}

.ssl-news-carousel .wp-block-post-title {
	font-family: var(--font-display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 24px;
	line-height: 1.12;
	margin: 0 0 8px;
}

.ssl-news-carousel .wp-block-post-title a {
	color: var(--text-heading);
	text-decoration: none;
}

.ssl-news-carousel .wp-block-post-title a:hover {
	color: var(--green-700);
}

.ssl-news-carousel .wp-block-post-date {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.ssl-news-carousel .wp-block-post-excerpt,
.ssl-news-carousel .wp-block-post-excerpt p {
	margin: 0;
	color: var(--text-muted);
}

.ssl-news-carousel .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--font-ui);
	font-size: var(--fs-button);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	color: var(--navy-700);
	text-decoration: none;
}

.ssl-news-carousel .wp-block-post-excerpt__more-link:hover {
	color: var(--green-600);
}

.ssl-cta-card {
	max-width: 470px;
	background: rgba(10, 21, 38, 0.92);
	padding: 40px;
}

.ssl-cta-card h3 {
	color: var(--white);
	margin-bottom: 14px;
}

.ssl-cta-card p {
	color: var(--navy-100);
	margin-bottom: 26px;
}

.ssl-ig-tile {
	position: relative;
	display: block;
	overflow: hidden;
}

.ssl-ig-tile img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ssl-hero .ssl-inner,
.ssl-cta .ssl-inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.ssl-cta,
.ssl-cta .ssl-inner {
	justify-content: center !important;
	align-items: center !important;
}

.ssl-photos-grid,
.ssl-pillars,
.ssl-ig-grid,
.ssl-mission-row,
.ssl-quote-row,
.ssl-news-carousel {
	width: 100%;
}

.ssl-photos-grid {
	padding: 0 !important;
}

.home .is-content-justification-space-between,
.editor-styles-wrapper .is-content-justification-space-between {
	flex-wrap: nowrap !important;
	align-items: flex-end !important;
	width: 100%;
}

.home .is-content-justification-space-between > *,
.editor-styles-wrapper .is-content-justification-space-between > * {
	flex: 0 1 auto !important;
	width: auto !important;
	max-width: 75%;
}

.home .is-content-justification-space-between > *:last-child,
.editor-styles-wrapper .is-content-justification-space-between > *:last-child {
	margin-left: auto;
	max-width: none;
}

.ssl-ig-tile::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 8px;
	width: 18px;
	height: 18px;
	background-color: var(--white);
	-webkit-mask-image: url("https://unpkg.com/lucide-static@0.445.0/icons/instagram.svg");
	mask-image: url("https://unpkg.com/lucide-static@0.445.0/icons/instagram.svg");
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	opacity: 0.9;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

.site-footer,
.ast-footer-copyright {
	font-family: var(--font-body);
}

.ssl-footer-explore-label,
.ssl-footer-hashtag {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ssl-footer-explore-label {
	color: var(--white);
	margin-bottom: 8px;
}

.ssl-footer-hashtag {
	color: var(--green-400);
	margin-top: 10px;
}

.ssl-footer-tagline {
	margin-top: 12px;
	font-size: 13px;
	font-style: italic;
	max-width: 320px;
	color: var(--navy-200);
}

.site-footer a {
	color: var(--navy-200);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--green-400);
}

.ast-footer-copyright {
	color: var(--navy-300);
	font-size: 12px;
}

@media (min-width: 922px) {
	.site-primary-footer-inner-wrap {
		display: grid !important;
		grid-template-columns: 1fr 1.2fr 1fr;
		gap: 32px;
		align-items: start;
	}

	.site-footer-primary-section-2 {
		text-align: center;
	}

	.site-footer-primary-section-3 {
		text-align: right;
	}
}

/* -------------------------------------------------------------------------- */
/* Stub pages                                                                 */
/* -------------------------------------------------------------------------- */

.ssl-stub {
	max-width: 760px;
	margin: 64px auto 96px;
	padding: 0 32px;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 921px) {
	:root {
		--fs-display-1: 48px;
		--fs-display-2: 40px;
		--fs-display-3: 32px;
		--section-pad-y: 64px;
	}

	.ssl-mission-overlap {
		position: relative;
		right: auto;
		bottom: auto;
		width: 70%;
		margin-top: -48px;
		margin-left: auto;
	}

	.ssl-hero {
		min-height: 520px;
	}

	.ssl-mission-row.is-layout-grid,
	.ssl-quote-row.is-layout-grid,
	.ssl-pillars.is-layout-grid {
		grid-template-columns: 1fr !important;
	}

	.ssl-photos-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.ssl-ig-grid.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.home .is-content-justification-space-between,
	.editor-styles-wrapper .is-content-justification-space-between {
		flex-wrap: wrap !important;
		align-items: flex-start !important;
	}

	.home .is-content-justification-space-between > *,
	.editor-styles-wrapper .is-content-justification-space-between > * {
		max-width: 100%;
	}

	.home .is-content-justification-space-between > *:last-child,
	.editor-styles-wrapper .is-content-justification-space-between > *:last-child {
		margin-left: 0;
	}
}

@media (max-width: 544px) {
	.ssl-inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	.ssl-hero {
		min-height: 480px;
	}

	.ssl-cta-card {
		padding: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}