/*
Theme Name: PBC
Theme URI: https://pbc.staging.silomedia.co.uk
Description: Bespoke theme for PBC — Property & Building Consultants
Author: Silomedia
Author URI: https://silomedia.co.uk
Version: 1.0.0
Text Domain: pbc
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
	/* Colors */
	--color-primary: #662766;
	--color-white: #fdfcfb;
	--color-cream: #f7f5f0;
	--color-black: #1c1c1c;
	--color-alt-bg: #ede9e6;
	--color-dark-gray: #1f1f1f;

	/* Typography */
	--font-heading: 'Inter Tight', sans-serif;
	--font-body: 'Source Sans 3', sans-serif;

	--fw-heading: 600;
	--lh-heading: 1.07;
	--ls-heading: -0.01em;

	--fw-body: 400;
	--lh-body: 1.6;

	/* Font Sizes */
	--fs-h1: clamp(3rem, 4.5vw, 6rem);
	--fs-h2: clamp(2.25rem, 3.75vw, 4.25rem);
	--fs-h3: clamp(1.625rem, 2.25vw, 2.5rem);
	--fs-h4: clamp(1.25rem, 1.65vw, 1.625rem);
	--fs-h5: clamp(1.0625rem, 1.35vw, 1.25rem);
	--fs-h6: clamp(0.9375rem, 1.1vw, 1.0625rem);
	--fs-body: clamp(1.0625rem, 1.35vw, 1.25rem);
	--fs-small: clamp(0.9375rem, 1.1vw, 1rem);
	--fs-eyebrow: clamp(0.8125rem, 1vw, 0.9375rem);

	/* Containers */
	--container-default: 1760px;
	--container-narrow: 1350px;
	--container-padding: clamp(1.5rem, 4vw, 4rem);

	/* Spacing */
	--block-padding-y: clamp(5rem, 9vw, 9rem);

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-base: 0.35s ease;
	--transition-slow: 0.6s ease;
	--transition-reveal: 0.9s cubic-bezier(0.22, 1, 0.36, 1);

	/* Radius */
	--radius-pill: 100px;
	--radius-sm: 4px;
	--radius-md: 12px;
	--radius-lg: 24px;

	/* Header */
	--header-height: 100px;

	/* Backgrounds */
	--body-bg: var(--color-cream);
}


/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth; /* fallback — Lenis overrides when active */
}

/* Text selection */
::selection {
	background: var(--color-primary);
	color: var(--color-white);
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track {
	background: var(--color-alt-bg);
}
::-webkit-scrollbar-thumb {
	background: var(--color-primary);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--color-primary) 75%, black);
}
* {
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary) var(--color-alt-bg);
}

/* Lenis smooth scroll overrides */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-scrolling iframe {
	pointer-events: none;
}

body {
	font-family: var(--font-body);
	font-weight: var(--fw-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-black);
	background-color: var(--body-bg);
	overflow-x: hidden;
}

img,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}

ul,
ol {
	list-style: none;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
	border: none;
	background: none;
	outline: none;
}

button {
	cursor: pointer;
}

figure {
	margin: 0;
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-family: var(--font-heading);
	font-weight: var(--fw-heading);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--color-black);
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); letter-spacing: normal; }
h6, .h6 { font-size: var(--fs-h6); letter-spacing: normal; }

/* h3–h6 run one weight heavier for visual hierarchy */
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-weight: 700;
}

/* Force h1 tag to h2 size when .h2-size is applied (for SEO h1 that looks like h2) */
.h2-size { font-size: var(--fs-h2) !important; }

p {
	margin-bottom: 1em;

	&:last-child {
		margin-bottom: 0;
	}
}

.eyebrow {
	font-family: var(--font-heading);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.subtitle {
	font-size: clamp(1.25rem, 1.75vw, 1.625rem);
	line-height: 1.5;
	opacity: 0.85;
}

p.lead {
	font-size: clamp(1.25rem, 1.75vw, 1.625rem);
	line-height: 1.5;
}

strong, b {
	font-weight: 600;
}

/* WYSIWYG Content */
.wysiwyg {
	& h1, & h2, & h3, & h4, & h5, & h6 {
		margin-top: 1.1em;
		margin-bottom: 0.5em;

		&:first-child {
			margin-top: 0;
		}
	}

	& p {
		margin-bottom: 1em;
	}

	& ul, & ol {
		margin-bottom: 1em;
		padding-left: 1.5em;
	}

	& ul {
		list-style: disc;
	}

	& ol {
		list-style: decimal;
	}

	& li {
		margin-bottom: 0.35em;
	}

	& a:not(.btn) {
		color: var(--color-primary);
		text-decoration: underline;
		text-underline-offset: 2px;

		&:hover {
			opacity: 0.7;
		}
	}

	& .btn {
		margin-top: 1.25rem;
	}

	& blockquote {
		position: relative;
		border-left: 4px solid var(--color-primary);
		background: var(--color-alt-bg);
		padding: 1.25em 1.5em;
		margin: 2em 0;
		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
		font-style: italic;
		font-size: clamp(1.05rem, 1.5vw, 1.2rem);
		line-height: 1.65;
		color: var(--color-black);

		& p {
			margin: 0;
		}

		& p + p {
			margin-top: 0.6em;
		}

		& cite {
			display: block;
			margin-top: 0.75em;
			font-style: normal;
			font-size: var(--fs-small);
			font-weight: 600;
			color: var(--color-primary);
			opacity: 0.8;
		}
	}

	& img {
		border-radius: var(--radius-sm);
		margin: 1.5em 0;
	}

	& hr {
		border: none;
		border-top: 1px solid var(--color-alt-bg);
		margin: 2em 0;
	}
}


/* ==========================================================================
   CONTAINERS
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-default);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.container-narrow {
	width: 100%;
	max-width: var(--container-narrow);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
	letter-spacing: 0.02em;
	padding: 0.75em 2em;
	border-radius: var(--radius-pill);
	border: none;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	line-height: 1.2;
	position: relative;
	overflow: hidden;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow var(--transition-base);

	/* Animated fill layer */
	&::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
		transform-origin: left center;
	}

	/* Default: Primary solid */
	background-color: transparent;
	color: var(--color-white);
	box-shadow: inset 0 0 0 2px var(--color-primary);

	&::before {
		background-color: var(--color-primary);
		transform: scaleX(1);
	}

	&:hover {
		color: var(--color-white);
		box-shadow: inset 0 0 0 2px var(--color-white);

		&::before {
			transform: scaleX(0);
			transform-origin: right center;
		}
	}

	/* Primary → dark outline on hover (same wipe as default, dark ring instead of white) */
	&.btn-primary-dark {
		&:hover {
			color: var(--color-black);
			box-shadow: inset 0 0 0 2px var(--color-black);

			&::before {
				transform: scaleX(0);
				transform-origin: right center;
			}
		}
	}

	/* Large variant */
	&.btn-lg {
		font-size: clamp(1rem, 1.35vw, 1.25rem);
		padding: 1em 2.5em;
	}

	/* Outline white → solid white */
	&.btn-outline-white {
		color: var(--color-white);
		box-shadow: inset 0 0 0 2px var(--color-white);

		&::before {
			background-color: var(--color-white);
			transform: scaleX(0);
			transform-origin: right center;
		}

		&:hover {
			color: var(--color-black);

			&::before {
				transform: scaleX(1);
				transform-origin: left center;
			}
		}
	}

	/* Outline primary → solid primary */
	&.btn-outline-primary {
		color: var(--color-primary);
		box-shadow: inset 0 0 0 2px var(--color-primary);

		&::before {
			background-color: var(--color-primary);
			transform: scaleX(0);
			transform-origin: right center;
		}

		&:hover {
			color: var(--color-white);

			&::before {
				transform: scaleX(1);
				transform-origin: left center;
			}
		}
	}

	/* Dark / Black */
	&.btn-dark {
		color: var(--color-white);
		box-shadow: inset 0 0 0 2px var(--color-black);

		&::before {
			background-color: var(--color-black);
			transform: scaleX(1);
		}

		&:hover {
			color: var(--color-black);

			&::before {
				transform: scaleX(0);
				transform-origin: right center;
			}
		}
	}

	/* White solid */
	&.btn-white {
		color: var(--color-black);
		box-shadow: inset 0 0 0 2px var(--color-white);

		&::before {
			background-color: var(--color-white);
			transform: scaleX(1);
		}

		&:hover {
			color: var(--color-white);

			&::before {
				transform: scaleX(0);
				transform-origin: right center;
			}
		}
	}

	/* Arrow icon for read-more style */
	&.btn-link {
		background: none;
		border: none;
		padding: 0;
		color: var(--color-primary);
		font-weight: 500;
		gap: 0.35em;
		overflow: visible;

		&::before {
			display: none;
		}

		&::after {
			content: '→';
			transition: transform var(--transition-fast);
		}

		&:hover {
			color: var(--color-primary);

			&::after {
				transform: translateX(4px);
			}
		}
	}
}

/* Read-more link style (non-button) */
.read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: var(--fs-body);
	color: var(--color-primary);
	transition: gap var(--transition-fast);

	&::after {
		content: '';
		display: inline-block;
		flex-shrink: 0;
		width: 1.3em;
		height: 1.3em;
		border-radius: 50%;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%23662766' stroke-width='1.5'/%3E%3Cpath d='M10 8l4 4-4 4' fill='none' stroke='%23662766' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
		transition: background-image var(--transition-fast), transform var(--transition-fast);
	}

	&:hover {
		gap: 0.65em;

		&::after {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23662766' stroke='%23662766' stroke-width='1.5'/%3E%3Cpath d='M10 8l4 4-4 4' fill='none' stroke='%23fdfcfb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		}
	}
}


/* ==========================================================================
   BACK LINK (Global — used on case study & blog single)
   ========================================================================== */

.project-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	color: var(--color-black);
	opacity: 0.7;
	text-decoration: none;
	margin-bottom: 1.75rem;
	transition: opacity var(--transition-fast), color var(--transition-fast);

	& .project-back-link-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 50%;
		background: var(--color-alt-bg);
		flex-shrink: 0;
		transition: background var(--transition-fast), transform var(--transition-fast);
	}

	&:hover {
		opacity: 1;
		color: var(--color-primary);

		& .project-back-link-icon {
			background: var(--color-primary);
			color: var(--color-white);
			transform: translateX(-2px);
		}
	}
}


/* ==========================================================================
   FORMS (Global — WPCF7 Compatible)
   ========================================================================== */

.wpcf7,
.form-global {

	/* Field group spacing — works with CF7 autop <p> tags and custom wrappers */
	& p,
	& .form-row {
		margin-bottom: 1.25rem;

		&:last-child {
			margin-bottom: 0;
		}
	}

	/*
	 * Label-as-field-group: CF7 wraps text + input inside <label>.
	 * margin-bottom spaces field groups apart;
	 * the input/textarea inside gets margin-top for the text-to-field gap.
	 */
	& label {
		display: block;
		font-family: var(--font-heading);
		font-size: var(--fs-body);
		font-weight: 600;
		color: var(--color-black);
		margin-bottom: 1.25rem;
	}

	& input[type="text"],
	& input[type="email"],
	& input[type="tel"],
	& input[type="url"],
	& input[type="number"],
	& textarea,
	& select {
		display: block;
		width: 100%;
		margin-top: 0.5em;
		padding: 0.7em 1em;
		font-size: var(--fs-body);
		font-family: var(--font-body);
		color: var(--color-black);
		background: var(--color-white);
		border: 1.5px solid rgba(28, 28, 28, 0.16);
		border-radius: 0;
		transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

		&::placeholder {
			color: rgba(28, 28, 28, 0.35);
		}

		&:focus {
			outline: none;
			border-color: var(--color-primary);
			box-shadow: 0 0 0 3px rgba(102, 39, 102, 0.12);
		}
	}

	& textarea {
		min-height: 150px;
		resize: vertical;
	}

	& input[type="submit"],
	& button[type="submit"],
	& .wpcf7-submit {
		display: inline-block;
		padding: 0.9em 2.5em;
		font-family: var(--font-heading);
		font-weight: 600;
		font-size: var(--fs-body);
		letter-spacing: 0.01em;
		border-radius: var(--radius-pill);
		background: var(--color-primary);
		color: var(--color-white);
		border: none;
		cursor: pointer;
		transition: opacity var(--transition-base);
		margin-top: 0.5rem;

		&:hover {
			opacity: 0.85;
		}

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}

	/* Inline validation: red border on invalid fields */
	& .wpcf7-not-valid {
		border-color: #c0392b !important;
	}

	& .wpcf7-not-valid-tip {
		display: block;
		font-family: var(--font-body);
		font-size: var(--fs-small);
		font-weight: 500;
		color: #fff;
		background: #c0392b;
		padding: 0.4em 0.7em;
		margin-top: 0.4em;
	}

	/* Response notice boxes — solid backgrounds.
	   Modern CF7 uses data-status on the <form>, not modifier classes on the div. */
	& .wpcf7-response-output {
		margin-top: 1.5rem;
		padding: 1em 1.25em;
		font-family: var(--font-body);
		font-size: var(--fs-small);
		font-weight: 500;
		border: none !important;
		background: #c0392b;
		color: #fff;
	}

	/* Two-column form rows */
	& .form-row-2col {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;

		@media (max-width: 600px) {
			grid-template-columns: 1fr;
		}
	}

	& .form-col label {
		margin-bottom: 0;
	}

	/* Section titles within forms */
	& .form-section-title {
		font-family: var(--font-heading);
		font-size: var(--fs-eyebrow);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--color-primary);
		margin-bottom: 1rem;

		&:not(:first-child) {
			margin-top: 1.5rem;
		}
	}

	/* Subtle field labels when using section titles */
	& .form-col label,
	& .form-row label {
		font-size: var(--fs-small);
		font-weight: 500;
		color: rgba(28, 28, 28, 0.6);
	}
}

/* Modern CF7: colour variants via form data-status */
.wpcf7-form[data-status="sent"] .wpcf7-response-output {
	background: #27ae60;
	color: #fff;
}

.wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.wpcf7-form[data-status="failed"] .wpcf7-response-output {
	background: #c0392b;
	color: #fff;
}

.wpcf7-form[data-status="spam"] .wpcf7-response-output,
.wpcf7-form[data-status="aborted"] .wpcf7-response-output {
	background: #e67e22;
	color: #fff;
}


/* ==========================================================================
   BLOCK SYSTEM — Background & Spacing
   ========================================================================== */

.block {
	padding-top: var(--block-padding-y);
	padding-bottom: var(--block-padding-y);
	position: relative;
}

.block.bg-white {
	background-color: var(--color-white);
}

.block.bg-cream {
	background-color: var(--color-cream);
}

.block.bg-alt {
	background-color: var(--color-alt-bg);
	--block-inset: clamp(16px, 3vw, 40px);
	margin: var(--block-inset);
	will-change: margin;
}

.block.bg-dark {
	background-color: var(--color-dark-gray);
	color: var(--color-white);
}

/* Adjacent same-background collapse: zero the second block's top padding so the
   only gap is the first block's normal bottom padding — one spacing, not two. */
.block.bg-white + .block.bg-white,
.block.bg-cream + .block.bg-cream,
.block.bg-alt + .block.bg-alt,
.block.bg-dark + .block.bg-dark {
	padding-top: 0;
}

/* Fullscreen blocks: zero the block padding — they own their own height */
.block.cta-fullscreen,
.block.block-testimonials.testimonials-fullscreen {
	padding-top: 0;
	padding-bottom: 0;
}

/* Per-block padding overrides — shared by any block with a padding option */
.block.padding-none {
	padding-top: 0;
	padding-bottom: 0;
}

.block.padding-small {
	padding-top: calc(var(--block-padding-y) / 2);
	padding-bottom: calc(var(--block-padding-y) / 2);
}

.block.padding-large {
	padding-top: calc(var(--block-padding-y) * 1.5);
	padding-bottom: calc(var(--block-padding-y) * 1.5);
}


/* ==========================================================================
   UTILITIES
   ========================================================================== */

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

.text-center { text-align: center; }
.text-white { color: var(--color-white); }
.text-primary { color: var(--color-primary); }

.fade-in {
	opacity: 0;
	transform: translateY(44px);
	transition: opacity var(--transition-reveal), transform var(--transition-reveal);

	&.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Delay helpers for stagger sequences */
.fade-in[data-delay="1"] { transition-delay: 0.1s; }
.fade-in[data-delay="2"] { transition-delay: 0.2s; }
.fade-in[data-delay="3"] { transition-delay: 0.3s; }
.fade-in[data-delay="4"] { transition-delay: 0.45s; }
.fade-in[data-delay="5"] { transition-delay: 0.6s; }
.fade-in[data-delay="6"] { transition-delay: 0.75s; }