/*
Theme Name: Broadhead
Description: The Broadhead Brewing website. A child of Twenty Twenty-Five that copies the old site's look (docs/site-design.md). Deployed by infra/ansible (roles/web); edit it in the repo, never on the server.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 7.1
Requires PHP: 8.3
Text Domain: broadhead
License: GPL-2.0-or-later
*/

/*
 * Only what theme.json can't express. Values come from docs/site-design.md.
 */

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

.bh-header .wp-block-navigation {
	gap: 55px;
}

.bh-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #000000;
	color: #b2b2b2;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	min-width: 200px;
}

.bh-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
}

.bh-header .bh-header__logo-small {
	display: none;
}

/* The menu's own breakpoint is 600px; between that and 1000px, tighten the spacing. */
@media (max-width: 1000px) {
	.bh-header .wp-block-navigation {
		gap: 24px;
	}
}

@media (max-width: 599px) {
	.bh-header {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	.bh-header .bh-header__bar {
		justify-content: space-between !important;
	}

	.bh-header .bh-header__logo-small {
		display: block;
	}

	/* The full-screen menu lists the pages only: Teko, dark on light (site-design.md). */
	.bh-header .wp-block-navigation__responsive-container.is-menu-open {
		font-family: var(--wp--preset--font-family--teko);
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0;
	}

	.bh-header .wp-block-navigation__responsive-container.is-menu-open .bh-nav__logo {
		display: none;
	}
}

/* -- Title bar -------------------------------------------------------------------------- */

.bh-title-bar {
	background-color: var(--wp--preset--color--header);
}

.bh-title-bar .wp-block-post-title,
.bh-title-bar h1 {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
	text-transform: uppercase;
}

/* -- Sections ------------------------------------------------------------------------- */

.bh-hero__headline {
	color: var(--wp--preset--color--white);
	font-size: 64px;
	font-style: italic;
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}

.bh-hero__headline .bh-accent {
	color: var(--wp--preset--color--orange);
}

@media (max-width: 599px) {
	.bh-hero__headline {
		font-size: 44px;
	}
}

.bh-contact-list p {
	align-items: center;
	display: flex;
	gap: 12px;
	margin: 8px 0;
}

.bh-contact-list p:empty {
	display: none;
}

.bh-contact-list p::before {
	align-items: center;
	background: var(--wp--preset--color--green);
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	display: inline-flex;
	flex: none;
	font-size: 14px;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.bh-contact-list__address::before {
	content: "⌂";
}

.bh-contact-list__phone::before {
	content: "☎";
}

.bh-contact-list__email::before {
	content: "✉";
}

.bh-section-title {
	font-weight: 700;
	text-transform: uppercase;
}

.bh-counter__number {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	margin-bottom: 0;
}

.bh-counter__label {
	text-transform: uppercase;
	line-height: 1.6;
}

.bh-rule-green {
	border-top: 4px solid var(--wp--preset--color--green) !important;
	opacity: 1;
}

/* Text colour marks: the editor saves a transparent background inline, which kses strips
   when an editor without unfiltered HTML saves; without this the browser's yellow shows.
   A highlight colour, saved inline, still wins. */
mark.has-inline-color {
	background-color: transparent;
}

/* Questions (Details blocks): the old FAQ's accordion showed each question large, in an
   olive box (the box is in theme.json; theme.json can't reach the summary). */
.wp-block-details summary {
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	cursor: pointer;
}

/* -- Blog cards ----------------------------------------------------------------------- */

.bh-card {
	border: 1px solid var(--wp--preset--color--white);
	height: 100%;
}

.bh-card .wp-block-post-title {
	font-size: 28px;
	text-transform: uppercase;
}

.bh-card .wp-block-post-excerpt__more-link {
	font-size: var(--wp--preset--font-size--small);
}

.bh-meta {
	gap: 0.4em;
}

.bh-meta > * + *::before {
	content: "|";
	margin-right: 0.4em;
	color: var(--wp--preset--color--rule);
}

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

.bh-footer,
.bh-footer a {
	color: var(--wp--preset--color--white);
}

.bh-footer h2 {
	color: var(--wp--preset--color--footer-orange);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.bh-footer .bh-footer__links .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--footer-rule);
	padding: 12px 0;
	width: 100%;
}

.bh-footer .bh-footer__links .wp-block-navigation-item__content::before {
	content: "›";
	margin-right: 0.4em;
}

.bh-footer .bh-footer__links {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.bh-copyright,
.bh-copyright a {
	color: #8c8989;
}

/* -- Flip cards (Our Beer) ---------------------------------------------------------------- */
/* A group in the "Flip card" style holds two faces: first the front (the can's picture),
   then the back (the beer's text on its colour). As the old site's flip boxes did, it
   turns over to the right in 0.8 s: on hover, when something on it has keyboard focus, or
   on a tap (assets/js/flip-cards.js). Visitors who ask for less motion get a fade. In the
   editor the faces show one above the other, so both can be edited. */

.bh-flip-cards > * {
	flex: 0 0 calc((100% - 3 * var(--wp--style--block-gap, 1.2rem)) / 4);
	margin: 0;
}

@media (max-width: 1000px) {
	.bh-flip-cards > * {
		flex-basis: calc((100% - 2 * var(--wp--style--block-gap, 1.2rem)) / 3);
	}
}

@media (max-width: 599px) {
	.bh-flip-cards > * {
		flex-basis: calc((100% - var(--wp--style--block-gap, 1.2rem)) / 2);
	}
}

.is-style-flip-card:not(.block-editor-block-list__block) {
	display: grid;
	perspective: 1000px;
}

.is-style-flip-card:not(.block-editor-block-list__block) > * {
	backface-visibility: hidden;
	border-radius: 6px;
	grid-area: 1 / 1;
	margin: 0;
	transition: transform 0.8s ease-in-out;
}

/* The front: the picture keeps its crop, centred on white when the back's text makes the
   card taller (stretching it would cut into the can). */
.is-style-flip-card:not(.block-editor-block-list__block) > :first-child {
	align-items: center;
	background-color: var(--wp--preset--color--white);
	display: flex;
	overflow: hidden;
	transform: rotateY(0deg);
}

.is-style-flip-card > .wp-block-image img {
	display: block;
	width: 100%;
}

/* The back: the text centred on the card, a little smaller (Avada's 90%), with depth. */
.is-style-flip-card:not(.block-editor-block-list__block) > :last-child {
	display: flex;
	flex-direction: column;
	font-size: 0.9em;
	justify-content: center;
	pointer-events: none;
	transform: rotateY(-180deg);
	transform-style: preserve-3d;
}

.is-style-flip-card:not(.block-editor-block-list__block) > :last-child > * {
	backface-visibility: hidden;
	transform: translateZ(50px) scale(0.9);
}

/* Two cards across on phones: the back's text a little smaller, with less padding. */
@media (max-width: 599px) {
	.is-style-flip-card:not(.block-editor-block-list__block) > :last-child {
		font-size: 0.8em;
		padding: 12px 10px !important;
	}
}

/* The old theme's pills: both with a white edge, so "Shop now" shows on a dark back. */
.is-style-flip-card .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 600;
	padding: 5px 12px;
}

/* Turned over. */
.is-style-flip-card:not(.block-editor-block-list__block):is(:focus-within, .is-flipped) > :first-child {
	pointer-events: none;
	transform: rotateY(180deg);
}

.is-style-flip-card:not(.block-editor-block-list__block):is(:focus-within, .is-flipped) > :last-child {
	pointer-events: auto;
	transform: rotateY(0deg);
}

@media (hover: hover) {
	.is-style-flip-card:not(.block-editor-block-list__block):hover > :first-child {
		pointer-events: none;
		transform: rotateY(180deg);
	}

	.is-style-flip-card:not(.block-editor-block-list__block):hover > :last-child {
		pointer-events: auto;
		transform: rotateY(0deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-flip-card:not(.block-editor-block-list__block) > *,
	.is-style-flip-card:not(.block-editor-block-list__block) > :last-child > * {
		transform: none !important;
		transition: opacity 0.2s linear;
	}

	.is-style-flip-card:not(.block-editor-block-list__block) > :last-child {
		opacity: 0;
	}

	.is-style-flip-card:not(.block-editor-block-list__block):is(:focus-within, .is-flipped) > :last-child {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
	.is-style-flip-card:not(.block-editor-block-list__block):hover > :last-child {
		opacity: 1;
	}
}

/* -- Can lineup (home page, The Classics) ------------------------------------------------- */
/* A row of can pictures, each linking to its beer. They shrink together on narrow screens
   rather than wrapping, as the old slider's row of cans did. */

.bh-can-lineup {
	gap: clamp(4px, 1.5vw, 16px);
}

.bh-can-lineup > .wp-block-image {
	flex: 1 1 0;
	margin: 0;
	max-width: 130px;
	min-width: 0;
}

.bh-can-lineup img {
	aspect-ratio: 200 / 537;
	height: auto;
	object-fit: cover;
	transition: transform 0.2s ease-out;
	width: 100%;
}

.bh-can-lineup a:is(:hover, :focus-visible) img {
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
	.bh-can-lineup img {
		transition: none;
	}
}