/*
 * Skate-punk finish layered over the brand header colorway: hand-inked display
 * type, true-black outlines and hard offset shadows, like the skull logo.
 * Layout, product photos, prices and form fields are left alone.
 */

@font-face {
	font-family: "Bangers";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bangers-latin.woff2") format("woff2");
}

body.pebs-brand-header {
	--pebs-outline: #000;
	--pebs-bone: #cccc99;
	--pebs-plank: #b19212;
	--pebs-plank-bright: #e3c044;
	--pebs-display: "Bangers", "Arial Black", "Helvetica Neue", sans-serif;
	--pebs-hard-shadow: 4px 4px 0 var(--pebs-outline);
}

/* Display type. Product card titles and small utility headings keep the body font. */
body.pebs-brand-header .entry-title,
body.pebs-brand-header .page-title,
body.pebs-brand-header .product_title,
body.pebs-brand-header .woocommerce-products-header__title,
body.pebs-brand-header .pebs-home-hero h1,
body.pebs-brand-header .pebs-home-section__header h2,
body.pebs-brand-header .pebs-home-builder h2,
body.pebs-brand-header .pebs-home-visit h2,
body.pebs-brand-header .pebs-home-hero__service h2,
body.pebs-brand-header .related > h2,
body.pebs-brand-header .upsells > h2,
body.pebs-brand-header .cross-sells > h2,
body.pebs-brand-header .cart_totals > h2,
body.pebs-brand-header .pebs-cart-addons h2,
body.pebs-brand-header .pebs-product-addons h2,
body.pebs-brand-header .pebs-thankyou-addons h2,
body.pebs-brand-header .pebs-restock-recovery h2,
body.pebs-brand-header .pebs-search-recovery h2,
body.pebs-brand-header .pebs-complete-setup h2,
body.pebs-brand-header .pebs-category-guide__intro h2,
body.pebs-brand-header .pebs-404 h1,
body.pebs-brand-header .pebs-404 h2,
body.pebs-brand-header .pebs-404__code,
body.pebs-brand-header .pebs-author-hero__title,
body.pebs-brand-header .pebs-author-section__title,
body.pebs-brand-header .pebs-author-card__title,
body.pebs-brand-header .pebs-category-card__body strong {
	font-family: var(--pebs-display);
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.02;
	text-transform: uppercase;
}

body.pebs-brand-header .pebs-category-card__body strong {
	font-size: 1.5rem;
}

/* Hero headline: bone lettering with a plank-gold drop, as on the logo sign. */
body.pebs-brand-header .pebs-home-hero h1 {
	color: var(--pebs-bone);
	text-shadow: 4px 4px 0 var(--pebs-plank);
}

body.pebs-brand-header .pebs-home-hero__service {
	border: 2px solid var(--pebs-bone);
	border-radius: 10px;
	box-shadow: 6px 6px 0 var(--pebs-outline);
}

/* Homepage section titles sit on a rough-cut plank. */
body.pebs-brand-header .pebs-home-section__header h2 {
	position: relative;
	z-index: 0;
	display: inline-block;
	padding: 0.14em 0.5em 0.08em;
	color: var(--pebs-outline);
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	transform: rotate(-1.5deg);
}

body.pebs-brand-header .pebs-home-section__header h2::before,
body.pebs-brand-header .pebs-home-section__header h2::after {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: polygon(0 12%, 3% 0, 97% 4%, 100% 22%, 98% 48%, 100% 78%, 96% 100%, 4% 96%, 0 74%, 2% 46%);
}

body.pebs-brand-header .pebs-home-section__header h2::before {
	z-index: -1;
	background: var(--pebs-plank-bright);
}

body.pebs-brand-header .pebs-home-section__header h2::after {
	z-index: -2;
	background: var(--pebs-outline);
	transform: translate(5px, 5px);
}

body.pebs-brand-header .pebs-home-trust {
	border-top: 2px solid var(--pebs-outline);
	border-bottom: 2px solid var(--pebs-outline);
}

body.pebs-brand-header .pebs-home-trust strong {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Buttons: plank-gold stickers that press down on hover. */
body.pebs-brand-header a.button,
body.pebs-brand-header button.button,
body.pebs-brand-header input.button,
body.pebs-brand-header .button.alt,
body.pebs-brand-header .added_to_cart,
body.pebs-brand-header #place_order,
body.pebs-brand-header .wc-block-components-button.contained {
	border: 2px solid var(--pebs-outline);
	border-radius: 6px;
	background-color: var(--pebs-plank-bright);
	box-shadow: 3px 3px 0 var(--pebs-outline);
	color: var(--pebs-outline);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: transform 90ms ease, box-shadow 90ms ease, background-color 90ms ease;
}

body.pebs-brand-header a.button:hover,
body.pebs-brand-header a.button:focus,
body.pebs-brand-header button.button:hover,
body.pebs-brand-header button.button:focus,
body.pebs-brand-header input.button:hover,
body.pebs-brand-header input.button:focus,
body.pebs-brand-header .button.alt:hover,
body.pebs-brand-header .button.alt:focus,
body.pebs-brand-header .added_to_cart:hover,
body.pebs-brand-header .added_to_cart:focus,
body.pebs-brand-header #place_order:hover,
body.pebs-brand-header #place_order:focus,
body.pebs-brand-header .wc-block-components-button.contained:hover,
body.pebs-brand-header .wc-block-components-button.contained:focus {
	border-color: var(--pebs-outline);
	background-color: #f0d45f;
	box-shadow: 1px 1px 0 var(--pebs-outline);
	color: var(--pebs-outline);
	transform: translate(2px, 2px);
}

body.pebs-brand-header .button.disabled,
body.pebs-brand-header .button:disabled {
	box-shadow: none;
	transform: none;
}

/* Secondary button on the dark hero. */
body.pebs-brand-header a.button.pebs-button-ghost {
	border-color: var(--pebs-bone);
	background-color: transparent;
	box-shadow: 3px 3px 0 var(--pebs-bone);
	color: var(--pebs-bone);
}

body.pebs-brand-header a.button.pebs-button-ghost:hover,
body.pebs-brand-header a.button.pebs-button-ghost:focus {
	border-color: var(--pebs-bone);
	background-color: rgba(204, 204, 153, 0.12);
	box-shadow: 1px 1px 0 var(--pebs-bone);
	color: var(--pebs-bone);
}

/* Cards and info boxes get the ink line in place of soft borders and blurs. */
body.pebs-brand-header .pebs-home-products ul.products li.product img {
	border: 2px solid var(--pebs-outline);
	border-radius: 8px;
}

body.pebs-brand-header .pebs-category-card {
	border: 2px solid var(--pebs-outline);
	border-radius: 10px;
	box-shadow: var(--pebs-hard-shadow);
	transition: transform 90ms ease, box-shadow 90ms ease;
}

body.pebs-brand-header .pebs-category-card:hover,
body.pebs-brand-header .pebs-category-card:focus {
	box-shadow: 2px 2px 0 var(--pebs-outline);
	transform: translate(2px, 2px);
}

body.pebs-brand-header .pebs-category-card__media {
	border-right: 2px solid var(--pebs-outline);
}

body.pebs-brand-header .pebs-product-support,
body.pebs-brand-header .pebs-product-facts,
body.pebs-brand-header .pebs-shipping-progress,
body.pebs-brand-header .pebs-restock-recovery,
body.pebs-brand-header .pebs-cart-addons,
body.pebs-brand-header .pebs-product-addons,
body.pebs-brand-header .pebs-thankyou-addons,
body.pebs-brand-header .pebs-search-recovery {
	border: 2px solid var(--pebs-outline);
	border-radius: 10px;
}

/* Sale badge slapped on like a sticker. */
body.pebs-brand-header .onsale {
	border: 2px solid var(--pebs-outline);
	border-radius: 4px;
	background-color: var(--pebs-plank-bright);
	box-shadow: 2px 2px 0 var(--pebs-outline);
	color: var(--pebs-outline);
	font-family: var(--pebs-display);
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	transform: rotate(-4deg);
}

@media (min-width: 768px) {
	body.pebs-brand-header .storefront-primary-navigation .main-navigation ul.menu > li > a,
	body.pebs-brand-header .storefront-primary-navigation .main-navigation ul.nav-menu > li > a {
		font-family: var(--pebs-display);
		font-size: 1.35rem;
		font-weight: 400;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.pebs-brand-header .button,
	body.pebs-brand-header .added_to_cart,
	body.pebs-brand-header .pebs-category-card {
		transition: none;
	}
}