/*
Theme Name: CapElite
Author: Cardinal Eye
Author URI: https://cardinaleye.com
Description: Block theme for Capriccio Elite, LLC. Colors, fonts, sizes and spacing live in theme.json. This file only holds layout rules theme.json can't express, and every value in it comes from a theme.json preset.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.5.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: capelite
*/

/* Script accent: the "Script accent" toolbar button wraps words in this span. */
.script-accent {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 1.1em;
	font-weight: 400;
}

/* Label Tag: a small green pill, only as wide as its text. */
.is-style-label-tag {
	width: fit-content;
}

/* Overlap Section Above: pulls a section up over the one before it. */
.wp-block-group.is-style-overlap-above {
	position: relative;
	z-index: 1;
	margin-block-start: calc(-1.25 * var(--wp--preset--spacing--gap-large));
}

/* Dark Caption Bar: the title bar that overlaps the bottom of a card photo. */
.wp-block-group.is-style-caption-bar {
	position: relative;
	overflow: hidden;
	margin-block-start: calc(-1 * var(--wp--preset--spacing--inset));
}

/* Overlapping Photos: two photos stacked, the second in front and to the right. */
.wp-block-group.is-style-overlapping-photos {
	display: grid;
	align-items: center;
}

.wp-block-group.is-style-overlapping-photos > * {
	grid-area: 1 / 1;
	margin: 0;
}

.wp-block-group.is-style-overlapping-photos > :first-child {
	justify-self: start;
	width: 65%;
}

.wp-block-group.is-style-overlapping-photos > :last-child {
	position: relative;
	justify-self: end;
	width: 76%;
}

.wp-block-group.is-style-overlapping-photos img {
	width: 100%;
	height: auto;
}

/* Blue Accent Bar: a Brand Blue strip behind the photo's top-right corner. */
.wp-block-image.is-style-blue-accent-bar {
	position: relative;
}

.wp-block-image.is-style-blue-accent-bar::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: calc(3.5 * var(--wp--preset--spacing--gap));
	height: 60%;
	background-color: var(--wp--preset--color--brand-blue);
}

.wp-block-image.is-style-blue-accent-bar img {
	position: relative;
	border-start-end-radius: 0;
}

/* Icon List: two-column list with a Brand Blue box icon for each item. */
.wp-block-list.is-style-icon-list {
	display: grid;
	/* Two columns, dropping to one on small phones, as on Webflow. */
	grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 14rem), calc((100% - var(--wp--preset--spacing--flow)) / 2)), 1fr));
	gap: var(--wp--preset--spacing--gap-small) var(--wp--preset--spacing--flow);
	padding-inline-start: 0;
	list-style: none;
}

.wp-block-list.is-style-icon-list > li {
	position: relative;
	margin: 0;
	padding-inline-start: calc(1.75 * var(--wp--preset--spacing--gap));
}

.wp-block-list.is-style-icon-list > li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 1.15em;
	height: 1.15em;
	background-color: var(--wp--preset--color--brand-blue);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' fill='none'%3E%3Cpath d='M9.5 18l7.68-3.97c.3-.16.45-.23.56-.35.1-.1.17-.22.21-.35.05-.15.05-.32.05-.66V5.28M9.5 18l-7.68-3.97c-.3-.16-.45-.23-.56-.35a1 1 0 0 1-.21-.35C1 13.18 1 13.01 1 12.67V5.28M9.5 18V9.44M18 5.28 9.5 9.44M18 5.28l-7.81-4.04c-.25-.13-.38-.2-.51-.22a1 1 0 0 0-.36 0c-.13.02-.26.09-.51.22L1 5.28m0 0 8.5 4.16' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' fill='none'%3E%3Cpath d='M9.5 18l7.68-3.97c.3-.16.45-.23.56-.35.1-.1.17-.22.21-.35.05-.15.05-.32.05-.66V5.28M9.5 18l-7.68-3.97c-.3-.16-.45-.23-.56-.35a1 1 0 0 1-.21-.35C1 13.18 1 13.01 1 12.67V5.28M9.5 18V9.44M18 5.28 9.5 9.44M18 5.28l-7.81-4.04c-.25-.13-.38-.2-.51-.22a1 1 0 0 0-.36 0c-.13.02-.26.09-.51.22L1 5.28m0 0 8.5 4.16' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Site header: stays at the top of the window while the page scrolls, as on Webflow. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Header, page content and footer sit flush against each other. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Header links (phone number, social icons) are plain black text, not underlined blue body links. */
header.wp-block-template-part a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration: none;
}

/* Header phone number: a small phone icon before it. */
header.wp-block-template-part a[href^="tel:"]::before {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin-inline-end: 0.35em;
	vertical-align: -0.2em;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/phone.svg") center / contain no-repeat;
	mask: url("assets/icons/phone.svg") center / contain no-repeat;
}

/* Social icons (logos only) in Brand Black instead of each network's own color. */
:root .wp-block-social-links.is-style-logos-only .wp-social-link {
	color: var(--wp--preset--color--brand-black);
}

/* Band Heading: the thin line between a dark band's heading and its button. At least twice Paragraph Spacing tall, like Webflow's 76px line. */
@media (min-width: 992px) {
	.wp-block-heading.is-style-band-heading {
		position: relative;
		padding-inline-end: var(--wp--preset--spacing--flow);
	}

	.wp-block-heading.is-style-band-heading::after {
		content: "";
		position: absolute;
		top: 50%;
		inset-inline-end: 0;
		width: 1px;
		height: max(100%, calc(2 * var(--wp--preset--spacing--flow)));
		background-color: currentColor;
		transform: translateY(-50%);
	}
}

/* Dark bands: the button keeps its full width and the heading wraps beside it. */
.wp-block-group.is-style-dark.is-layout-flex > .wp-block-buttons {
	flex-shrink: 0;
}

/* Wide screens, once the whole menu fits on one line: the phone/hours bar sits in the header's top-right corner, over the menu bar, as on Webflow. */
@media (min-width: 1200px) {
	header.wp-block-template-part > .wp-block-group > .wp-block-group:first-child {
		position: absolute;
		top: var(--wp--preset--spacing--tight);
		inset-inline-end: max(var(--wp--style--root--padding-right, 0px), calc((100% - var(--wp--style--global--content-size)) / 2));
		z-index: 1;
	}
}

/* Wide screens (Webflow's layout above 991px). */
@media (min-width: 992px) {
	/* A Label Tag right before a heading (the home page's "Mission") turns on its side beside that heading. */
	.is-style-label-tag:has(+ .wp-block-heading) {
		position: absolute;
		margin: 0;
		padding: var(--wp--preset--spacing--gap) var(--wp--preset--spacing--tight);
		writing-mode: vertical-rl;
		rotate: 180deg;
	}

	.is-style-label-tag + .wp-block-heading {
		padding-inline-start: calc(3 * var(--wp--preset--spacing--gap));
	}
}

/* Tablets and phones (Webflow's 991px breakpoint): dark bands stack their heading over the button and center both.
   Columns holding an accent-bar photo or overlapping photos stack here too; other columns stack at WordPress's usual 781px. */
@media (max-width: 991px) {
	.wp-block-group.is-style-dark.is-layout-flex {
		flex-direction: column;
		text-align: center;
	}

	.wp-block-columns:has(.is-style-blue-accent-bar, .is-style-overlapping-photos) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:has(.is-style-blue-accent-bar, .is-style-overlapping-photos) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* The main menu folds into the menu button below 992px, as on Webflow (WordPress's own switch is at 600px). */
@media (min-width: 600px) and (max-width: 991px) {
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Phones (Webflow's 767px breakpoint): page-header text centers, and buttons on photos get a dark fill so they stay readable. */
@media (max-width: 767px) {
	.wp-block-cover :is(h1, p) {
		text-align: center;
	}

	.wp-block-cover .wp-element-button {
		background-color: color-mix(in srgb, var(--wp--preset--color--brand-black) 66%, transparent);
	}
}

/* Small phones (Webflow's 479px breakpoint): decorative extras drop away. */
@media (max-width: 479px) {
	.wp-block-group.is-style-overlapping-photos > :first-child {
		display: none;
	}

	.wp-block-group.is-style-overlapping-photos > :last-child {
		width: 100%;
	}

	.wp-block-image.is-style-blue-accent-bar::before {
		display: none;
	}
}