/**
 * Content pages built with blocks (assets/php/pages.php): About, Terms, FAQ and
 * the Showroom landing page. They were Elementor layouts; this keeps their look.
 * Loaded only on pages whose content is blocks.
 */

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

.wecom-section {
	margin-top: 0;
	margin-bottom: 2.5em;
}

.wecom-section:last-child {
	margin-bottom: 0;
}

.wecom-section h3 {
	font-weight: 300;
}

/* Page hero: a background photo with the page title (About). */

.wp-block-cover.wecom-page-hero {
	margin-bottom: 2.5em;
}

/* The photo at its own size, anchored right, as Elementor's "auto" background
   did -- scaled to cover it showed a different part of the picture. */
.wp-block-cover.wecom-page-hero .wp-block-cover__image-background {
	object-fit: none;
	object-position: right center;
}

/* Full width text, so the title keeps to one line at the old 248 px height.
   Storefront's gutenberg-blocks.css narrows and pads it on a .hentry selector. */
.hentry .entry-content .wp-block-cover.wecom-page-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	padding: 1em;
}

/* Storefront's Customizer CSS and gutenberg-blocks.css paint cover headings
   black at 3.7em; the selector has to outrank both. */
.hentry .entry-content .wecom-page-hero .wp-block-cover__inner-container h1 {
	margin: 0;
	color: #fff;
	font-size: 39px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
}

@media (max-width: 781px) {
	.hentry .entry-content .wecom-page-hero .wp-block-cover__inner-container h1 {
		font-size: 28px;
	}
}

.wecom-text-shadow {
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

/* Map: Google Maps embed in grey, like the old Elementor widget. */

.wecom-map {
	position: relative;
	min-height: 300px;
}

.wecom-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	border: 0;
	filter: contrast(1.07) saturate(0);
}

/* Buttons: the black pill. */

/* Storefront's Customizer CSS squares and recolours every button. */
.hentry .entry-content .wp-block-button.wecom-pill .wp-block-button__link {
	padding: 15px 35px;
	border-radius: 30px;
	background: #000;
	color: #fff;
	font-size: 15px;
	text-decoration: none;
}

.hentry .entry-content .wp-block-button.wecom-pill .wp-block-button__link:hover {
	background: #333;
	color: #fff;
}

/* About ---------------------------------------------------------------------- */

.wecom-about-intro p {
	color: #666;
	line-height: 1.6;
}

.wecom-about-info {
	padding: 30px;
}

.wecom-about-info p {
	color: #666;
}

.wecom-about-info a {
	color: #808080;
}

.wecom-about-showroom {
	align-items: flex-start;
}

.wecom-about-showroom p {
	color: #666;
}

/* Showroom -------------------------------------------------------------------- */

/* Intro: a white caption card over the left edge of the showroom photo. */

.wecom-showroom-intro .wecom-eyebrow {
	margin: 0 0 0.6em;
	color: #616161;
	font-size: 1.618em;
	font-weight: 700;
	line-height: 1;
}

.wecom-showroom-intro h3 {
	margin-bottom: 0.8em;
	font-size: 1.618em;
	line-height: 1;
	text-align: center;
}

.wecom-showroom-intro .wp-block-image {
	margin: 0;
}

.wecom-showroom-intro .wp-block-image img {
	width: 100%;
}

@media (min-width: 782px) {
	.wecom-showroom-intro {
		position: relative;
	}

	.wecom-showroom-intro > .wp-block-column:first-child {
		position: relative;
		z-index: 2;
	}

	.wecom-showroom-intro > .wp-block-column:first-child > .wp-block-group {
		position: absolute;
		top: 60px;
		left: 0;
		width: 600px;
		max-width: 60vw;
		margin: 0;
		padding: 20px;
		background: #fff;
	}
}

/* Showroom, hours, contact: grey boxes beside the map. */

/* The boxes touch, as they did; core's columns gap is on a stronger selector. */
.entry-content .wp-block-columns.wecom-showroom-info {
	gap: 0;
	align-items: stretch;
}

.wecom-showroom-info > .wp-block-column {
	padding: 10px;
}

.wecom-showroom-info .wecom-white-box,
.wecom-showroom-info .wecom-white-grey {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	min-height: 300px;
	padding: 30px 10px;
	text-align: center;
}

.wecom-showroom-info .wecom-white-box > *,
.wecom-showroom-info .wecom-white-grey > * {
	margin-top: 0;
}

.wecom-white-box h3,
.wecom-white-box p,
.wecom-white-box a {
	color: #fff;
}

.wecom-white-box a {
	text-decoration: none;
}

.wecom-white-grey h3,
.wecom-white-grey p {
	color: #6d6d6d;
}

/* The short vertical line between a box's title and its text. */
.wecom-white-box h3::after,
.wecom-white-grey h3::after {
	content: "";
	display: block;
	width: 0;
	height: 30px;
	margin: 14px auto 0;
	border-left: 2px solid #fff;
}

.wecom-white-grey h3::after {
	border-left-color: #6d6d6d;
}

/* The grey band: three photos, a quote and a short text. */

.wecom-showroom-band {
	padding: 40px 10px;
	align-items: center;
}

.wecom-showroom-band .wp-block-image {
	margin: 0;
}

.wecom-showroom-band .wp-block-image img {
	width: 100%;
	aspect-ratio: 221 / 267;
	object-fit: cover;
}

.wecom-showroom-band .wp-block-quote {
	margin: 0;
	padding-left: 10px;
	border-left: 3px solid rgba(0, 0, 0, 0.05);
}

/* Sized in px: the theme's blockquote is 30px bold, and em would compound. */
.wecom-showroom-band .wp-block-quote h5 {
	font-size: 25px;
	overflow-wrap: normal;
	word-break: normal;
	font-style: italic;
	font-weight: 300;
	line-height: 1.6;
}

.wecom-showroom-band p {
	color: #666;
}

/* FAQ: the questions as a bordered accordion. --------------------------------- */

.wecom-page-text .wp-block-details {
	margin: 0;
	border: 1px solid #d5d8dc;
	border-top: 0;
}

.wecom-page-text .wp-block-details:first-child,
.wecom-page-text :not(.wp-block-details) + .wp-block-details {
	border-top: 1px solid #d5d8dc;
}

.wecom-page-text .wp-block-details summary {
	position: relative;
	padding: 15px 20px 15px 44px;
	color: #6d6d6d;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	list-style: none;
}

.wecom-page-text .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wecom-page-text .wp-block-details summary::before {
	content: "+";
	position: absolute;
	top: 12px;
	left: 20px;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.wecom-page-text .wp-block-details[open] summary::before {
	content: "\2212";
}

.wecom-page-text .wp-block-details[open] summary {
	border-bottom: 1px solid #d5d8dc;
}

.wecom-page-text .wp-block-details > :not(summary) {
	margin-right: 20px;
	margin-left: 20px;
}

.wecom-page-text .wp-block-details > :nth-child(2) {
	margin-top: 20px;
}

.wecom-page-text .wp-block-details > :last-child {
	margin-bottom: 20px;
}