/*
 * Everclear theme overrides (loaded after styles.css).
 * Keep the original reference stylesheet untouched; put deliberate changes here.
 */

/* ── Fixed header ───────────────────────────────────────────────
 * The reference header is position:sticky. Pin it as a true fixed header
 * and offset the page body by the header height so the layout is unchanged
 * (no content hidden behind the bar). --header-h is already defined in
 * styles.css (72px / 84px at ≥1024px).
 */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

body {
	padding-top: var(--header-h);
}

/* The scroll-progress bar sits above the fixed header. */
.scroll-progress {
	z-index: 101;
}

/* ── Image lightbox ──────────────────────────────────────────────
 * script.js builds a `.lightbox` overlay and toggles `.is-open`, but the
 * reference stylesheet ships no styling for it. These rules provide the
 * fixed backdrop, centred image and close/prev/next controls.
 */
.gallery img,
.gallery__cell.is-zoomable { cursor: zoom-in; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(11, 37, 69, .92);
}
.lightbox.is-open { display: flex; }

.lightbox__img {
	max-width: min(92vw, 1100px);
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
	cursor: default;
}

.lightbox__close,
.lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .3); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
.lightbox__close .material-symbols-rounded,
.lightbox__nav .material-symbols-rounded { font-size: 26px; }

.lightbox__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	text-align: center;
	color: rgba(255, 255, 255, .9);
	font-size: 14px;
	padding: 0 16px;
}

@media (max-width: 600px) {
	.lightbox { padding: 12px; }
	.lightbox__nav { width: 40px; height: 40px; }
	.lightbox__nav--prev { left: 10px; }
	.lightbox__nav--next { right: 10px; }
	.lightbox__close { top: 12px; right: 12px; }
}

/* ── Project card image modal (click a project → full image, 100% zoom) ──
 * Not in the reference; added for Everclear. The card <article> is wrapped in
 * an <a.pf-card-link> that is display:contents so the grid/filter is unaffected.
 */
.pf-card-link { display: contents; color: inherit; text-decoration: none; }
.pf-card-link .pf-card { cursor: zoom-in; }

.pf-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	background: rgba(11, 37, 69, .92);
}
.pf-modal.is-open { display: block; }
.pf-modal__scroll {
	position: absolute;
	inset: 0;
	overflow: auto;
	padding: 24px;
	text-align: center;
	-webkit-overflow-scrolling: touch;
}
.pf-modal__img {
	display: inline-block;
	max-width: none;      /* 100% natural size — true zoom */
	height: auto;
	border-radius: 6px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.pf-modal__close {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}
.pf-modal__close:hover { background: rgba(255, 255, 255, .32); }
.pf-modal__close .material-symbols-rounded { font-size: 26px; }
@media (max-width: 600px) {
	.pf-modal__scroll { padding: 12px; }
	.pf-modal__close { top: 12px; right: 12px; }
}

/* ── Projects filter visibility + feature-media hover (Everclear additions) ── */
.pf-card.is-hidden,
.pf-feature.is-hidden { display: none; }

/* Feature media: same hover behaviour as a grid card (scale + overlay arrow) */
.pf-feature__link { display: contents; color: inherit; text-decoration: none; }
.pf-feature__media { cursor: zoom-in; }
.pf-feature__media img { transition: transform .4s var(--easing); }
.pf-feature__media:hover img { transform: scale(1.05); }
.pf-feature__media:hover .pf-card__overlay { opacity: 1; }

/* ── Service-area suburbs: clickable, repoint the map (Everclear addition) ── */
.areas__col .areas__place {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	text-align: left;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: var(--text);
	transition: color .15s var(--easing);
}
.areas__col .areas__place .material-symbols-rounded { font-size: 14px !important; color: var(--blue); }
.areas__col .areas__place:hover,
.areas__col .areas__place:focus-visible { color: var(--navy); }
.areas__col .areas__place.is-active { color: var(--navy); font-weight: 600; }
.areas__col .areas__place.is-active .material-symbols-rounded { font-variation-settings: 'FILL' 1; }

/* ── Leaflet service-area map canvas ── */
.areas-map__canvas {
	width: 100%;
	height: 460px;
	min-height: 420px;
	border: 1px solid var(--line);
	background: var(--cloud);
	border-radius: 14px;
	overflow: hidden;
	z-index: 1;
}
.areas-map__canvas.leaflet-container { background: var(--cloud); }


.wpcf7-acceptance .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wpcf7-acceptance .wpcf7-list-item label input {
    width: unset;
}

.wpcf7-acceptance .wpcf7-list-item-label {
    display: block;
}