/* ==========================================================================
   EziBuild Custom Styles
   Additional styles for the EziBuild website.
   Keep all custom/project-specific CSS here — do not modify main.css.
   ========================================================================== */

/* Source Sans Pro — self-hosted, latin subset only
   ========================================================================== */

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/source-sans-pro-300.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/source-sans-pro-300italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/source-sans-pro-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/source-sans-pro-600italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Screen-reader visible icon labels
   ========================================================================== */

.icon > .label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Index Hero Banner
   ========================================================================== */

.image.index-hero {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	overflow: hidden;
	display: block;
}

.image.index-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Services Hero Banner
   ========================================================================== */

.image.services-hero {
	display: block;
	margin: 0 0 1.5em 0;
	overflow: hidden;
	border-radius: 5px;
	height: 340px;
}

.image.services-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Before & After Image Pairs
   ========================================================================== */

.ba-pair {
	display: flex;
	gap: 1em;
	margin-bottom: 2em;
}

.ba-pair .ba-item {
	flex: 1;
	overflow: hidden;
	border-radius: 5px;
}

.ba-main-wrap {
	position: relative;
	height: 525px;
	background: #efefef;
	border-radius: 5px;
	overflow: hidden;
}

.ba-main-wrap::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	border: 3px solid rgba(111, 75, 158, 0.2);
	border-top-color: #6F4B9E;
	border-radius: 50%;
	animation: ba-spin 0.7s linear infinite;
	z-index: 1;
}

.ba-main-wrap.loaded::before {
	display: none;
}

@keyframes ba-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

.ba-pair .ba-item .ba-main {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: opacity 0.2s ease;
	object-fit: cover;
}

.ba-pair .ba-item .ba-main:hover {
	opacity: 0.85;
}

.ba-pair .ba-item .ba-label {
	text-align: center;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85em;
	padding: 0.5em 0;
	color: #666;
}

/* Thumbnail strip */

.ba-thumbs {
	display: flex;
	gap: 0.5em;
	margin-top: 0.5em;
	justify-content: center;
}

.ba-thumbs img {
	width: 65px;
	height: 65px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	border: 2px solid transparent;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.ba-thumbs img:hover {
	opacity: 0.9;
}

.ba-thumbs img.active {
	border-color: #6F4B9E;
	opacity: 1;
}

/* Gallery Uniform Image Sizing
   ========================================================================== */

.image.gallery-uniform {
	display: block;
	width: 100%;
	height: 250px;
	overflow: hidden;
	margin-bottom: 1em;
}

.image.gallery-uniform img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Gallery Featured Image
   ========================================================================== */

.image.gallery-featured {
	display: block;
	width: 100%;
	height: 400px;
	overflow: hidden;
	margin-bottom: 1em;
}

.image.gallery-featured img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Showcase Grid Images
   ========================================================================== */

.showcase-img {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.showcase-img:hover {
	opacity: 0.85;
}

/* About Page Owner Photo
   ========================================================================== */

.owner-photo {
	width: 40%;
}

/* Paragraph Spacing
   ========================================================================== */

#content p {
	margin-bottom: 0.875em;
}

/* Link Colour Override
   ========================================================================== */

a {
	color: #8B6DB5;
}

a:hover {
	color: #A78BC7;
}

#footer a:hover {
	color: #A78BC7;
}

/* Form Focus Colour Override
   ========================================================================== */

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
	border-color: #6F4B9E;
}

/* Lightbox Overlay
   ========================================================================== */

.lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	cursor: pointer;
}

.lightbox-overlay.active {
	opacity: 1;
	visibility: visible;
}

.lightbox-overlay img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 5px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	transform: scale(0.9);
	transition: transform 0.3s ease;
}

.lightbox-overlay.active img {
	transform: scale(1);
}

.lightbox-close {
	position: absolute;
	top: 1em;
	right: 1em;
	width: 40px;
	height: 40px;
	min-width: unset;
	padding: 0;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	background-image: none;
	color: #fff;
	font-size: 1.5em;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease;
}

.lightbox-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Sidebar spacing — tighten global margins that are too generous in a narrow column */
#sidebar section {
	margin-bottom: 1.5em;
}

#sidebar h3 {
	margin-bottom: 0.5em;
}

#sidebar p {
	margin-bottom: 0.75em;
}

#sidebar ul {
	margin-bottom: 0.75em;
}

#sidebar ul.sidebar-list {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0.75em;
}

#sidebar ul.sidebar-list li {
	padding: 0.35em 0 0.35em 1.4em;
	position: relative;
	line-height: 1.5;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#sidebar ul.sidebar-list li:last-child {
	border-bottom: none;
}

#sidebar ul.sidebar-list li::before {
	content: "›";
	position: absolute;
	left: 0;
	color: #888;
	font-weight: bold;
}

#sidebar footer {
	margin-bottom: 0.75em;
}