/*
Theme Name: Jim Bell Skateboard Ramps
Theme URI: https://jimbellskateboardramps.com
Description: Child theme of Twenty Twenty-Five for Jim Bell Skateboard Ramps.
Template: twentytwentyfive
Version: 1.0.0
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: jbsr
*/

/* ---------- Layout: sections sit flush and set their own padding ---------- */

.wp-site-blocks > * {
	margin-block-start: 0;
}

.jbsr-sections > .alignfull {
	margin-block: 0;
}

.jbsr-section {
	padding-block: var(--wp--preset--spacing--70);
}

.jbsr-section.is-tight {
	padding-block: var(--wp--preset--spacing--60);
}

.jbsr-section > * + .alignwide {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* ---------- Type helpers ---------- */

.jbsr-eyebrow {
	margin-block-end: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-6);
}

.jbsr-eyebrow + * {
	margin-block-start: 0;
}

.jbsr-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.jbsr-muted {
	color: var(--wp--preset--color--accent-4);
}

/* ---------- Dark areas (black sections, hero, footer, header) ---------- */

.has-contrast-background-color .jbsr-eyebrow,
.wp-block-cover .jbsr-eyebrow {
	color: var(--wp--preset--color--accent-1);
}

.has-contrast-background-color .jbsr-muted,
.wp-block-cover .jbsr-muted {
	color: var(--wp--preset--color--stone);
}

.has-contrast-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
}

.has-contrast-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent-1);
}

/* ---------- Orange band (call to action) ---------- */

.has-accent-1-background-color .jbsr-eyebrow,
.has-accent-1-background-color .jbsr-muted,
.has-accent-1-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--contrast);
}

.has-accent-1-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.has-accent-1-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.has-accent-1-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Buttons ---------- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	padding: calc(0.85rem - 2px) calc(1.5rem - 2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

:is(.has-contrast-background-color, .wp-block-cover) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
:is(.has-contrast-background-color, .wp-block-cover) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

:is(.has-contrast-background-color, .wp-block-cover, .jbsr-mobile-bar) .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

:is(.has-contrast-background-color, .wp-block-cover, .jbsr-mobile-bar) .wp-block-button.is-style-outline > .wp-block-button__link:hover,
:is(.has-contrast-background-color, .wp-block-cover, .jbsr-mobile-bar) .wp-block-button.is-style-outline > .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}

/* ---------- Header ---------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.jbsr-header {
	padding-block: 0.875rem;
}

.jbsr-header .wp-block-site-logo img {
	height: auto;
}

.jbsr-header .jbsr-nav a {
	text-decoration: none;
}

.jbsr-header .jbsr-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-1);
}

.jbsr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .jbsr-nav-quote > a {
	padding: 0.55rem 1.1rem;
	border-radius: 6px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

.jbsr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .jbsr-nav-quote > a:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.jbsr-header-phone {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.jbsr-header-phone a {
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 1.75rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--60);
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

@media (max-width: 899px) {
	.jbsr-header-phone {
		display: none;
	}
}

@media (max-width: 600px) {
	.jbsr-header .wp-block-site-logo img {
		width: 140px !important;
	}
}

/* ---------- Mobile call / quote bar ---------- */

.jbsr-mobile-bar {
	display: none !important;
}

@media (max-width: 599px) {
	.jbsr-mobile-bar {
		display: flex !important;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		flex-wrap: nowrap;
		gap: 0.5rem;
		margin: 0 !important;
		padding: 0.625rem clamp(1rem, 4vw, 2.5rem) calc(0.625rem + env(safe-area-inset-bottom));
		background: rgba(18, 18, 18, 0.96);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	.jbsr-mobile-bar .wp-block-button {
		flex: 1;
	}

	.jbsr-mobile-bar .wp-block-button.jbsr-mobile-bar-quote {
		flex: 1.6;
	}

	.jbsr-mobile-bar .wp-block-button__link {
		width: 100%;
		padding-inline: 0.5rem;
		text-align: center;
		white-space: nowrap;
	}

	.jbsr-mobile-bar .wp-block-button.is-style-outline > .wp-block-button__link {
		padding-inline: calc(0.5rem - 2px);
	}

	body {
		padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
	}
}

/* ---------- Hero ---------- */

.wp-block-cover.jbsr-hero.alignfull {
	padding: var(--wp--preset--spacing--80) var(--wp--style--root--padding-right) var(--wp--preset--spacing--60) var(--wp--style--root--padding-left);
}

/* Bottom-left content position shrinks the inner container; stretch it so the text lines up with the header. */
.wp-block-cover.jbsr-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
}

.jbsr-hero .wp-block-cover__background {
	background: linear-gradient(to top, rgba(18, 18, 18, 0.92) 0%, rgba(18, 18, 18, 0.6) 45%, rgba(18, 18, 18, 0.3) 100%) !important;
	opacity: 1 !important;
}

.jbsr-hero h1 {
	max-width: 15ch;
}

.jbsr-hero .jbsr-lead {
	max-width: 38rem;
	color: #ECE8E1;
}

/* ---------- Page and project headers ---------- */

.jbsr-page-hero {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.jbsr-page-hero h1 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.jbsr-back-link a {
	text-decoration: none;
}

/* ---------- Client logos ---------- */

.jbsr-logos {
	gap: clamp(1.25rem, 4vw, 3.5rem) !important;
	align-items: center;
}

.jbsr-logos .wp-block-image {
	margin: 0;
}

.jbsr-logos img {
	width: auto !important;
	height: clamp(44px, 6vw, 64px) !important;
	max-width: 150px;
	border-radius: 0 !important;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.jbsr-logos img:hover {
	filter: none;
	opacity: 1;
}

/* ---------- Cards ---------- */

.jbsr-card {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
}

.jbsr-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 0;
	object-fit: contain;
}

.jbsr-card h3 {
	margin-block-start: var(--wp--preset--spacing--30);
}

.jbsr-cards .wp-block-post {
	display: flex;
	flex-direction: column;
}

.jbsr-cards .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.jbsr-cards .wp-block-post-featured-image img {
	transition: transform 0.4s ease;
}

.jbsr-cards .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.jbsr-cards .wp-block-post-title {
	margin-block: 1rem 0.25rem;
}

.jbsr-cards .wp-block-post-excerpt {
	margin-block-start: 0;
	color: var(--wp--preset--color--accent-4);
}

.jbsr-cards .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* ---------- Lists as pills ---------- */

.jbsr-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.jbsr-pills li {
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Checklists ---------- */

.jbsr-checklist {
	padding: 0;
	list-style: none;
}

.jbsr-checklist li {
	position: relative;
	padding-inline-start: 1.75rem;
}

.jbsr-checklist li + li {
	margin-block-start: 0.5rem;
}

.jbsr-checklist li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0.1rem;
	width: 0.85rem;
	height: 0.45rem;
	border-bottom: 3px solid var(--wp--preset--color--accent-1);
	border-left: 3px solid var(--wp--preset--color--accent-1);
	transform: rotate(-45deg);
}

/* ---------- Numbered steps ---------- */

.jbsr-step-number {
	margin-block-end: 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
}

/* ---------- Mission quote ---------- */

.jbsr-mission blockquote p {
	margin: 0;
}

.jbsr-mission cite {
	display: block;
	margin-block-start: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

/* ---------- Project galleries ---------- */

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: 8px;
}

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

.jbsr-footer h2 {
	margin-block-end: 0.75rem;
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--stone);
}

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

.jbsr-footer li + li {
	margin-block-start: 0.4rem;
}

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

.jbsr-footer .jbsr-legal {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--stone);
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}