/* ==========================================================================
   page.css — Genva Interior

   The little the fixed pages need beyond what the front page already
   provides. Everything else on those pages reuses the section classes, so the
   pages cannot drift away from the rest of the site as the theme is edited.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rhythm

   Page content is a run of blocks with no sections around it, so the spacing
   between them is set here rather than left to blockGap. Headings get more
   room above than below, which is what makes a long page scannable.
   -------------------------------------------------------------------------- */
.wp-block-post-content > * {
	margin-block-start: var(--space-lg);
}

.wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.wp-block-post-content > h2 {
	margin-block-start: var(--space-2xl);
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Call to action as a card

   The front page's CTA is a full width navy band. Inside a page it is one
   block among others, so it takes the same colours in a rounded card.
   -------------------------------------------------------------------------- */
.cta--card {
	padding: var(--space-xl);
	border-radius: var(--rounded-xl);
	text-align: center;
}

@media (width < 782px) {

	.cta--card {
		padding: var(--space-md);
	}
}

.cta--card > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cta--card .cta__title {
	margin-bottom: var(--space-sm);
}

.cta--card .cta__lead {
	margin-bottom: var(--space-lg);
}

.cta--card .wp-block-buttons {
	justify-content: center;
	margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Three cards instead of four

   The front page runs four of these across the row. The menu pages have
   three, and without this they would sit in a four column grid with a hole
   where the fourth would be.
   -------------------------------------------------------------------------- */
@media (width >= 1024px) {

	.promise--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Company details

   Two columns on a wide screen, stacked on a phone. Core's default cell
   border is cleared on all four edges first: resetting one edge leaves the
   other three, because core writes the border as a single shorthand.
   -------------------------------------------------------------------------- */
.companytable table {
	width: 100%;
	border-collapse: collapse;
}

.companytable th,
.companytable td {
	border: none;
	border-bottom: 1px solid var(--outline-variant);
	padding: var(--space-sm) 0;
	text-align: left;
	vertical-align: top;
}

.companytable th {
	width: 10rem;
	color: var(--on-surface-variant);
	font-weight: 700;
}

.companytable td {
	color: var(--on-surface);
}

/* A 10rem label column leaves too little for the address on a phone, so the
   pairs stack instead. */
@media (width < 600px) {

	.companytable th,
	.companytable td {
		display: block;
		width: auto;
	}

	.companytable th {
		border-bottom: none;
		padding-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   Where the form goes

   A theme may not ship a contact form: the mail handling belongs to a plugin,
   and a theme that bundled it would break the site the day it was switched.
   This is the frame the plugin's block drops into, with the note that says so.
   Dashed, so nobody mistakes it for part of the finished design.
   -------------------------------------------------------------------------- */
.formslot {
	padding: var(--space-lg);
	border: 2px dashed var(--outline-variant);
	border-radius: var(--rounded-lg);
	background: var(--surface-container-low);
}

@media (width < 782px) {

	.formslot {
		padding: var(--space-md);
	}
}

.formslot > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.formslot__note {
	color: var(--on-surface);
}

.formslot__hint {
	margin-top: var(--space-sm);
	color: var(--on-surface-variant);
}

/* --------------------------------------------------------------------------
   Questions

   wp:details, so opening and closing is the browser's own behaviour: no
   script to ship, and the questions stay ordinary editable blocks.
   -------------------------------------------------------------------------- */
.faqlist {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.faqlist > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.faq {
	background: var(--surface-container-lowest);
	border-radius: var(--rounded-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.faq summary {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	cursor: pointer;
	color: var(--on-surface);
	font-family: var(--font-heading);
	font-size: var(--label-lg-size);
	line-height: var(--label-lg-line);
	font-weight: 600;
	list-style: none;
}

/* The browser's own marker is replaced with one that turns, so open and shut
   are told apart by the shape as well as by the panel. */
.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::marker {
	content: "";
}

.faq summary::after {
	content: "";
	flex: none;
	margin-left: auto;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--secondary);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	transition: transform 150ms ease;
}

.faq[open] summary::after {
	transform: rotate(180deg);
}

.faq > p {
	margin: 0;
	padding: 0 var(--space-lg) var(--space-md);
	color: var(--on-surface-variant);
}

@media (width < 782px) {

	.faq summary {
		padding: var(--space-md);
	}

	.faq > p {
		padding: 0 var(--space-md) var(--space-md);
	}
}