/*
 * Sections added from the approved v-3 layout: quote popup, FAQ accordion and
 * the local-expertise mini grid. Colour and type tokens come from the child
 * theme, with fallbacks so the plugin still renders if the theme changes.
 */

/* ---- Quote popup ----------------------------------------------------- */

.pi-modal { position: fixed; inset: 0; z-index: 90; }
.pi-modal[hidden] { display: none; }

.pi-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(18, 15, 11, .62);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .3s ease;
}
.pi-modal.is-open .pi-modal__scrim { opacity: 1; }

/*
 * The booking form needs 862px at this panel's width, so the panel is given
 * as much of the viewport as it can take. At 92vh on a 900px screen it fell
 * two pixels short and drew a full-height scrollbar for nothing.
 */
.pi-modal__panel {
	position: relative;
	width: min(760px, 94vw);
	max-height: 97vh;
	margin: 1.5vh auto 0;
	background: #fff;
	border-radius: 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: 0 30px 80px rgba(20, 17, 13, .34);
	transform: translateY(16px) scale(.985);
	opacity: 0;
	transition: transform .32s cubic-bezier(.2, .7, .3, 1), opacity .32s ease;
}
.pi-modal.is-open .pi-modal__panel { transform: none; opacity: 1; }

.pi-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--pi-line, #eae3d6);
	color: var(--pi-ink, #1e1b16);
	cursor: pointer;
	padding: 0;
	line-height: 0;
}
.pi-modal__close:hover { background: var(--pi-cream, #f5f1eb); }
.pi-modal__close svg { width: 17px; height: 17px; }

.pi-modal__head { padding: 26px 28px 4px; }
.pi-modal__head h2 {
	font-family: var(--pi-font-display, inherit);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--pi-ink, #1e1b16);
	margin: 0 0 .4rem;
}
.pi-modal__head p {
	font-size: .9375rem;
	color: var(--pi-muted, #6b6459);
	margin: 0;
}

.pi-modal__body { padding: 14px 20px 20px; }
.pi-modal__frame { width: 100%; border: 0; display: block; }

/* ---- PiSuite embeds ---------------------------------------------------
 * The booking embed ships its own white card. Wherever it sits, the wrapper
 * around it has to stay bare or the card gets a white frame, and no radius
 * may be applied to the frame or the card's corners are cropped.
 * --------------------------------------------------------------------- */

.pi-formwrap { background: transparent; }
.pi-formwrap iframe,
.pi-modal__frame,
.pi-hero__frame {
	border-radius: 0;
	background: transparent;
}

/* The modal holding a PiSuite form drops its own surface: the card inside is
   the panel. The close button keeps its disc so it stays findable. */
.pi-page .pi-modal--bare .pi-modal__panel {
	background: transparent;
	box-shadow: none;
}
.pi-page .pi-modal--bare .pi-modal__body { padding: 0; }

body.pi-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.pi-modal__panel,
	.pi-modal__scrim { transition: none; }
}

/* ---- FAQ ------------------------------------------------------------- */

.pi-faq { max-width: 860px; }

.pi-faq details {
	border: 1px solid var(--pi-line, #eae3d6);
	border-radius: 12px;
	background: #fff;
	margin-bottom: 12px;
	overflow: hidden;
}

.pi-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 54px 18px 22px;
	font-family: var(--pi-font-display, inherit);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--pi-ink, #1e1b16);
	position: relative;
}
.pi-faq summary::-webkit-details-marker { display: none; }

/* A plus that becomes a dash when the row is open. */
.pi-faq summary::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--pi-red, #e20e20);
}
.pi-faq details[open] summary::after { content: "\2013"; }
.pi-faq summary:hover { color: var(--pi-red, #e20e20); }

.pi-faq__a {
	padding: 0 22px 20px;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--pi-body, #4a453d);
}

/* ---- Local expertise mini grid --------------------------------------- */

.pi-minigrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.pi-minigrid .pi-mini {
	background: #fff;
	border: 1px solid var(--pi-line, #eae3d6);
	border-top: 4px solid var(--pi-red, #e20e20);
	border-radius: 12px;
	padding: 22px 24px;
}
.pi-minigrid .pi-mini h3 {
	font-family: var(--pi-font-display, inherit);
	font-size: 1.0625rem;
	color: var(--pi-ink, #1e1b16);
	margin: 0 0 .5rem;
}
.pi-minigrid .pi-mini p {
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--pi-muted, #6b6459);
	margin: 0;
}

@media (max-width: 900px) {
	.pi-minigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.pi-minigrid { grid-template-columns: 1fr; }
}

/* ---- Close button, pinned ---------------------------------------------
 * The Baiti kit paints every <button> with a brand fill and a pill radius,
 * and repaints text white on :hover/:focus at (0,2,1). Every state has to be
 * declared or this control renders as a red oval.
 * --------------------------------------------------------------------- */

.pi-page .pi-modal .pi-modal__close,
.pi-page .pi-modal .pi-modal__close:hover,
.pi-page .pi-modal .pi-modal__close:focus,
.pi-page .pi-modal .pi-modal__close:focus-visible,
.pi-page .pi-modal .pi-modal__close:active {
	width: 42px;
	height: 42px;
	min-width: 0;
	min-height: 0;
	aspect-ratio: 1;
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
	background: #fff;
	color: var(--pi-ink, #1e1b16);
	border: 1px solid var(--pi-line, #eae3d6);
	border-radius: 50%;
	box-shadow: none;
	outline: none;
	display: grid;
	place-items: center;
	line-height: 0;
	font-size: 0;
	text-shadow: none;
	transition: background-color .2s ease, border-color .2s ease, transform .25s ease;
}

.pi-page .pi-modal .pi-modal__close:hover {
	background: var(--pi-cream, #f5f1eb);
	border-color: var(--pi-line-2, #e0d6c4);
	transform: rotate(90deg);
}

/* Keyboard users still get a ring, mouse users do not. */
.pi-page .pi-modal .pi-modal__close:focus-visible {
	box-shadow: 0 0 0 3px rgba(226, 14, 32, .35);
}

.pi-page .pi-modal .pi-modal__close svg {
	width: 17px;
	height: 17px;
	display: block;
}

/* The panel takes focus on open; it must not draw a ring of its own. */
.pi-page .pi-modal .pi-modal__panel:focus,
.pi-page .pi-modal .pi-modal__panel:focus-visible {
	outline: none;
	box-shadow: 0 30px 80px rgba(20, 17, 13, .34);
}

/* ---- Footer, v-3 column structure -------------------------------------
 * A wide brand column and three link columns. The brand column carries the
 * wordmark, the description and the address block.
 * --------------------------------------------------------------------- */

.pi-page .pi-footer .pi-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 36px;
	align-items: start;
}

/* Alexandria sets these as plain 18px headings, not small caps. */
.pi-page .pi-footer h4 {
	font-family: var(--pi-font-display, inherit);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	margin: 0 0 1rem;
}

.pi-page .pi-footer .pi-footer__desc,
.pi-page .pi-footer .pi-footer__addr {
	font-size: 1rem;
	line-height: 1.75;
	color: #b9b1a2;
	margin: 0 0 1rem;
	max-width: 46ch;
}
.pi-page .pi-footer .pi-footer__addr { margin-bottom: 0; }
.pi-page .pi-footer .pi-footer__addr a,
.pi-page .pi-footer .pi-footer__addr a:visited { color: rgba(255, 255, 255, .82); }
.pi-page .pi-footer .pi-footer__addr a:hover { color: #fff; }

.pi-page .pi-footer .pi-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pi-page .pi-footer .pi-footer__col li { margin-bottom: .6rem; }

/* :visited has to be declared too. Without it the browser paints links the
   visitor has already opened in its own default colour, so the column looks
   half-faded to a returning visitor and solid to a new one. */
.pi-page .pi-footer .pi-footer__col a,
.pi-page .pi-footer .pi-footer__col a:visited {
	font-size: 1rem;
	font-weight: 400;
	color: #b9b1a2;
	text-decoration: none;
}
.pi-page .pi-footer .pi-footer__col a:hover { color: #fff; }

/* ---- Connect column, brand marks ---------------------------------------
 * Each social row is icon + label on one baseline. The mark inherits the
 * link colour so it brightens on hover with the text, and it is sized in em
 * so it tracks the label if the type scale changes.
 * --------------------------------------------------------------------- */

.pi-page .pi-footer .pi-footer__socials a {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

.pi-page .pi-footer .pi-footer__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05em;
	flex: 0 0 auto;
	line-height: 0;
}

/* Covers both the built-in marks and an icon chosen in the panel, whether
   Elementor renders it as an <svg> or a Font Awesome <i>. */
.pi-page .pi-footer .pi-footer__icon svg {
	width: 100%;
	height: auto;
	max-height: 1.05em;
	fill: currentColor;
	display: block;
}
.pi-page .pi-footer .pi-footer__icon i {
	font-size: 1em;
	line-height: 1;
	color: inherit;
}

/* The parent brand sits apart from the social list above it. */
.pi-page .pi-footer .pi-footer__parent,
.pi-page .pi-footer .pi-footer__parent:visited {
	display: inline-block;
	margin-top: 1.1rem;
	font-size: 1rem;
	color: #b9b1a2;
	text-decoration: none;
}
.pi-page .pi-footer .pi-footer__parent:hover { color: #fff; }

.pi-page .pi-footer .pi-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .12);
	margin-top: 2.25rem;
	padding-top: 1.5rem;
}
.pi-page .pi-footer .pi-footer__bar span {
	font-size: .8125rem;
	color: rgba(255, 255, 255, .45);
}

.pi-page .pi-footer .pi-footer__logo img { height: 44px; width: auto; }

@media (max-width: 900px) {
	.pi-page .pi-footer .pi-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.pi-page .pi-footer .pi-footer__inner { grid-template-columns: 1fr; }
}

/* ---- Estimate band -----------------------------------------------------
 * The embed is the taller column, so the copy beside it is centred rather
 * than pinned to the top — otherwise the text hangs in the corner with a
 * large void beneath it.
 * --------------------------------------------------------------------- */

.pi-page .pi-split--estimate { align-items: center; }

@media (max-width: 900px) {
	.pi-page .pi-split--estimate { align-items: start; }
}

/* ---- Modal scrolling on short screens ---------------------------------
 * The booking form needs 862px. A 900px-tall screen shows it whole; a
 * 1366x768 laptop cannot, so the panel scrolls. That is unavoidable — what
 * is avoidable is it looking broken: the bar is slimmed down and the close
 * button stays put instead of scrolling out of reach.
 * --------------------------------------------------------------------- */

.pi-page .pi-modal__panel {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.pi-page .pi-modal__panel::-webkit-scrollbar { width: 8px; }
.pi-page .pi-modal__panel::-webkit-scrollbar-track { background: transparent; }
.pi-page .pi-modal__panel::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .35);
	border-radius: 8px;
}
.pi-page .pi-modal__panel::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, .5);
}

/* The close button rides along instead of scrolling away with the form. */
.pi-page .pi-modal--bare .pi-modal__close {
	position: sticky;
	top: 14px;
	float: right;
	margin-right: 14px;
	margin-bottom: -56px;
}