/*
Theme Name: Second Amendment Sports (Greenshift Child)
Theme URI: https://2ndamendment.monarchwave.com/
Author: Monarch Wave
Author URI: https://monarchwave.com/
Description: Child theme of Greenshift for Second Amendment Sports — McHenry, IL. Dark/tactical brand, brass accent, Barlow + Barlow Condensed self-hosted. Header, footer and home page are built from core blocks only.
Template: greenshift
Version: 1.1.3
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: greenshift-child
Tags: full-site-editing, block-patterns, block-styles, e-commerce
*/

/* ---------------------------------------------------------------------------
   1. Sticky header
   The sticky element has to be the template-part wrapper (.site-header), not the
   inner group — a sticky child can only travel inside its own parent's box.
   ------------------------------------------------------------------------ */
header.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar header.site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.site-header {
		top: 46px;
	}
}

/* ---------------------------------------------------------------------------
   2. Header bar
   ------------------------------------------------------------------------ */

/* Collapse the nav into its overlay menu below 1200px.
   Core flips the inline/overlay nav at 600px and Greenshift's coreblocks/
   navigation.css re-points that to 768px — but this bar (title + six items +
   account icon + button) needs ~1200px, so between 768 and 1199 it wrapped into
   a three-line, 132px-tall header. These selectors carry the .sas-header prefix
   purely to outrank the same rules in core and Greenshift by specificity. */
@media (max-width: 1199.98px) {
	.sas-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.sas-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.sas-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

/* Header navigation: compact, uppercase, brass on hover. */
.sas-header .wp-block-navigation .wp-block-navigation-item__content {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	font-size: 0.85rem;
}

.sas-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.sas-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brass);
}

/* Mobile overlay menu: keep it dark and roomy. */
.sas-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

.sas-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.35rem;
	letter-spacing: 0.04em;
}

/* Header "Book a Lane" button: a touch tighter than body buttons, never wraps. */
.sas-header .wp-block-button__link {
	font-size: 0.9rem;
	padding: 0.6em 1.2em;
	white-space: nowrap;
}

/* WooCommerce injects its customer-account icon between the nav and the button.
   It ships unstyled, so give it the header's white and line it up on the bar. */
.sas-header .wp-block-woocommerce-customer-account {
	display: flex;
	align-items: center;
	margin: 0;
	line-height: 1;
}

.sas-header .wc-block-customer-account__link {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	color: #ffffff;
	text-decoration: none;
}

.sas-header .wc-block-customer-account__link:hover,
.sas-header .wc-block-customer-account__link:focus {
	color: var(--wp--preset--color--brass);
}

.sas-header .wc-block-customer-account__account-icon {
	display: block;
	width: 26px;
	height: 26px;
}

/* ---------------------------------------------------------------------------
   3. Pillar tiles — 4-up desktop, 2x2 tablet, stacked mobile
   The block's grid layout emits repeat(auto-fill, minmax(13rem, 1fr)), which
   lands on 3+1 at common desktop widths. Pin the track count instead; the
   .wp-block-group prefix outranks the generated .wp-container-* layout rule.
   ------------------------------------------------------------------------ */
.wp-block-group.sas-pillars {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.wp-block-group.sas-pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wp-block-group.sas-pillars {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sas-tile {
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.sas-tile:hover,
.sas-tile:focus-within {
	border-top-color: var(--wp--preset--color--brass) !important;
	transform: translateY(-2px);
}

.sas-tile a {
	text-decoration: none;
}

.sas-tile a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ---------------------------------------------------------------------------
   4. Footer — muted links that go white on hover
   ------------------------------------------------------------------------ */
.sas-footer a:where(:not(.wp-element-button)) {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
}

.sas-footer a:where(:not(.wp-element-button)):hover,
.sas-footer a:where(:not(.wp-element-button)):focus {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.sas-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sas-footer li {
	margin: 0 0 0.5rem 0;
}

/* is-style-logos-only paints each logo in its brand colour, which reads as
   clip-art on this footer. Force them to the same muted white as the links —
   the .wp-social-link-* brand rules are single-class, so this outranks them. */
.sas-footer .wp-block-social-links .wp-social-link,
.sas-footer .wp-block-social-links .wp-social-link a,
.sas-footer .wp-block-social-links .wp-social-link svg {
	background-color: transparent;
	color: rgba(255, 255, 255, 0.72);
	fill: currentColor;
}

.sas-footer .wp-block-social-links .wp-social-link a {
	padding: 0.35rem;
}

.sas-footer .wp-block-social-links .wp-social-link:hover,
.sas-footer .wp-block-social-links .wp-social-link:hover a,
.sas-footer .wp-block-social-links .wp-social-link:hover svg {
	color: var(--wp--preset--color--brass);
}

/* ---------------------------------------------------------------------------
   5. Fact list on the range split and the visit band
   ------------------------------------------------------------------------ */
.sas-facts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sas-facts li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.55rem;
}

.sas-facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.6rem;
	height: 2px;
	background: var(--wp--preset--color--brass);
}

/* ---------------------------------------------------------------------------
   6. Photography
   The aspect-ratio on the img reserves its box before the file loads, so the
   section below it never jumps.
   ------------------------------------------------------------------------ */
.sas-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* The training band crops 2:1 out of a 3:2 frame; bias the crop upward so the
   subject's head stays in shot. */
.sas-photo-training img {
	object-position: 50% 12%;
}

/* ---------------------------------------------------------------------------
   7. Accessibility / misc
   ------------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: 2px;
}

/* `clip` rather than `hidden`: `overflow-x: hidden` turns the body into a
   scroll container, which kills the sticky header. */
body {
	overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   8. Small screens — keep the header bar on one line at 375px
   ------------------------------------------------------------------------ */
@media (max-width: 600px) {
	.sas-header .wp-block-site-title {
		font-size: 1.05rem;
		letter-spacing: 0.02em;
	}

	.sas-header .wp-block-button__link {
		font-size: 0.8rem;
		padding-left: 0.9em;
		padding-right: 0.9em;
	}

	.sas-header .wp-block-site-logo img {
		width: 34px;
		height: auto;
	}

	.sas-header .wc-block-customer-account__account-icon {
		width: 22px;
		height: 22px;
	}
}

/* Below ~430px the wordmark is the only thing that can give: hold it on one
   line rather than letting it wrap under the controls. */
@media (max-width: 430px) {
	.sas-header .wp-block-site-title {
		font-size: 0.85rem;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.sas-header .wp-block-button__link {
		font-size: 0.75rem;
		padding-left: 0.75em;
		padding-right: 0.75em;
	}
}