/*
 * Personal Artworks — Modern Redesign
 * Clean, editorial layout inspired by limehome aesthetic
 * Adapted for a professional pencil portrait artist
 */

:root {
	--color-bg: #FAFAF8;
	--color-bg-alt: #E4EBD8;
	--color-bg-warm: #E4EBD8;
	--color-bar: #E4EBD8;
	--color-accent: #2D6A6A;
	--color-accent-light: #3D8585;
	--color-accent-hover: #245656;
	--color-dark: #1A1A1A;
	--color-text: #5A5A5A;
	--color-text-heading: #1A1A1A;
	--color-text-muted: #999999;
	--color-border: #E8E6E2;
	--color-white: #FFFFFF;
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	/* Google Material Design 3 type scale — headers +50% for site hierarchy */
	--font-size-title: 3rem;           /* 48px — was 32px */
	--font-size-subtitle: 2.0625rem;   /* 33px — was 22px */
	--font-size-body: 1rem;            /* 16px — Body Large (unchanged) */
	--font-size-caption: 0.875rem;     /* 14px — labels / nav */
	--line-height-title: 1.25;         /* 60px on 48px */
	--line-height-subtitle: 1.27;      /* ~42px on 33px */
	--line-height-body: 1.5;           /* 24px on 16px */
	--container-max: 1280px;
	--block-gap: 0.5in;
	--section-padding: 0;
	--transition: 0.3s ease;
}

/* ── Global Reset & Typography ── */

body {
	font-family: var(--font-body) !important;
	font-size: var(--font-size-body) !important;
	line-height: var(--line-height-body) !important;
	font-weight: 400;
	color: var(--color-text);
	background-color: var(--color-bg) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading) !important;
	color: var(--color-text-heading);
	font-weight: 500;
	letter-spacing: 0.02em;
}

h1 {
	font-size: var(--font-size-title) !important;
	line-height: var(--line-height-title) !important;
}

h2, h3, h4, h5, h6 {
	font-size: var(--font-size-subtitle) !important;
	line-height: var(--line-height-subtitle) !important;
}

p,
li,
label,
.text_area p,
.halftext-halfimage p,
.two-col-inwards p,
.two-thirds-left p,
.contact-bar p,
.onebox-overlay-image p,
.full-width-solid-bar p {
	font-family: var(--font-body) !important;
	font-size: var(--font-size-body) !important;
	line-height: var(--line-height-body) !important;
	color: var(--color-text);
	font-weight: 400;
}

a {
	transition: color var(--transition);
}

/* ── Container & Layout ── */

.container {
	max-width: var(--container-max) !important;
	width: 92% !important;
	margin: 0 auto;
	padding: 0 24px !important;
}

.wider .container {
	max-width: 1400px !important;
	width: 95% !important;
}

.row .col {
	padding: 0 20px;
}

section {
	padding: 0 !important;
	margin: 0 !important;
}

/* ── Uniform block spacing (0.5in between all blocks) ── */

.bg-image-slider,
.video-table {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}

.site-header ~ .bg-image-slider,
.site-header ~ .video-table,
.site-header ~ section:first-of-type,
.bg-image-slider + section,
.bg-image-slider + .bg-image-slider,
.bg-image-slider + .video-table,
section + section,
section + .bg-image-slider,
section + .video-table,
.video-table + section,
.video-table + .bg-image-slider,
.video-table + .video-table {
	margin-top: var(--block-gap) !important;
}

footer {
	margin-top: var(--block-gap) !important;
}

/* Reset ACF inline margins on module inner wrappers */
section > div[style*="margin"],
.video-table[style],
section > .four-col-slider[style],
section > .full-width-solid-bar[style],
section > .contact-bar[style],
section > .two-col-inwards[style],
section > .halftext-halfimage[style],
section > .testimonials[style],
section > .two-thirds-left[style],
section > .onebox-overlay-image[style],
section > .fullbg-text[style],
section > .single-onethird-text-fullbg[style],
section > .text_area[style],
section > .hero-banner[style],
section > .four-boxs[style],
section > .solidbar[style],
section > .contact-form[style],
section > .trust-slider[style] {
	margin: 0 !important;
}

.btn,
.btn-large,
a.btn,
button.btn,
.wpcf7-submit,
.contact-bar form input.wpcf7-submit {
	background-color: var(--color-accent) !important;
	color: var(--color-white) !important;
	border: none !important;
	border-radius: 0 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 16px 36px !important;
	height: auto !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: background-color var(--transition), transform var(--transition);
	display: inline-block;
	cursor: pointer;
}

.btn:hover,
.btn-large:hover,
a.btn:hover,
.wpcf7-submit:hover {
	background-color: var(--color-accent-hover) !important;
	color: var(--color-white) !important;
	box-shadow: none !important;
	transform: translateY(-1px);
}

/* ── Section Spacing Utilities ── */

.home section,
.page section {
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ── Decorative Section Divider ── */

.text_area h2::before,
.two-thirds-left h2::before,
.halftext-halfimage h2::before {
	content: '';
	display: block;
	width: 48px;
	height: 1px;
	background-color: var(--color-accent);
	margin-bottom: 24px;
}

/* ── Background Colour Overrides ── */

.bg-black { background-color: var(--color-dark) !important; }
.bg-grey { background-color: var(--color-bg-alt) !important; }
.bg-green { background-color: var(--color-accent) !important; }
.bg-blue { background-color: var(--color-accent) !important; }
.bg-navy { background-color: var(--color-dark) !important; }

.t-blue { color: var(--color-accent) !important; }
.t-green { color: var(--color-accent) !important; }
.t-white { color: var(--color-white) !important; }

/* ── Image Treatment ── */

img {
	max-width: 100%;
	height: auto;
}

.bg-cover {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* ── Form Inputs ── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
	font-family: var(--font-body) !important;
	font-size: 14px !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 0 !important;
	padding: 14px 16px !important;
	background-color: var(--color-white) !important;
	color: var(--color-text) !important;
	transition: border-color var(--transition);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-accent) !important;
	outline: none;
	box-shadow: none !important;
}

/* ── Slick Slider Dots ── */

.slick_slider .slick-dots li button,
.slick_slider_four_col .slick-dots li button {
	background-color: var(--color-border) !important;
	color: var(--color-border) !important;
	border-radius: 50%;
	width: 8px;
	height: 8px;
}

.slick_slider .slick-dots li.slick-active button,
.slick_slider_four_col .slick-dots li.slick-active button {
	background-color: var(--color-accent) !important;
	color: var(--color-accent) !important;
}

/* ── WooCommerce ── */

.single-product .woocommerce-variation-add-to-cart .button,
.woocommerce-cart .checkout-button,
.woocommerce #payment #place_order {
	background-color: var(--color-accent) !important;
	border-radius: 0 !important;
	font-family: var(--font-body) !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce-tabs ul li.active a {
	color: var(--color-accent) !important;
	box-shadow: 0 2px 0 var(--color-accent) !important;
}

/* ── Blog ── */

.blog .toprow .text {
	background-color: var(--color-dark);
}

.blog .toprow .text h1,
.blog .toprow .text p {
	color: var(--color-white);
}

.blog .item .date {
	background-color: var(--color-bg-alt);
}

/* ── GDPR / Cookie ── */

.gdpr p {
	color: var(--color-text-muted);
	font-size: 13px !important;
}

/* ── Responsive Section Padding ── */

@media (max-width: 992px) {
	:root {
		--block-gap: 0.5in;
	}
}

/* ── Legacy Colour Overrides ── */

.backco .four-boxs,
.testcol .testimonials .container,
.crback .text_area,
.topspace .full-width-solid-bar {
	background-color: var(--color-bar) !important;
}

.backco .four-boxs {
	background-color: var(--color-bar) !important;
}

/* Override old gold/bronze accents site-wide */
a[style*="c28c17"],
.mb-40 a:link {
	color: #2D6A6A !important;
}

/* ── Homepage Hero Slider Spacing ── */

.home .bg-image-slider {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 24px;
	padding-right: 0;
	background-color: #FAFAF8;
	overflow: visible;
}

.home .bg-image-slider .item .container {
	padding-top: 48px;
	padding-bottom: 0;
}

.home .bg-image-slider .item:after {
	display: none;
}

.home .bg-image-slider .slick-dots {
	padding: 20px 0 0;
}

/* ── Four Column Mosaic Grid ── */

.home .four-col-slider {
	padding: 0 !important;
	margin: 0 !important;
}

.home section.two {
	padding: 0 !important;
}

/* ── Section headings with decorative line ── */

.text_area h2,
.solidbar h2,
.testimonials h3,
.contact-bar h2,
.contact-bar h3,
.contact-form h3,
.two-thirds-left h2,
.halftext-halfimage h2,
.onethird-section h3 {
	position: relative;
}

/* ── Smooth scroll behaviour ── */

html {
	scroll-behavior: smooth;
}

/* ── Selection colour ── */

::selection {
	background-color: #2D6A6A;
	color: #FFFFFF;
}

/* ── Focus states for accessibility ── */

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
	outline: 2px solid #2D6A6A;
	outline-offset: 2px;
}

/* ── Materialize overrides ── */

.z-depth-1, .z-depth-2, .z-depth-3, .z-depth-4, .z-depth-5 {
	box-shadow: none !important;
}

/* ── Page content areas (internal padding only, not block gaps) ── */

.page .text_area,
.page .two-thirds-left,
.page .halftext-halfimage {
	padding-top: 0;
	padding-bottom: 0;
}

/* ── Single product / WooCommerce pages ── */

.woocommerce-page .text_area h2,
.woocommerce-page h1 {
	color: #1A1A1A;
}

/* ── Preloader ── */

.preloader-background {
	background-color: #FAFAF8 !important;
}

/* ── Quote circle decorative element ── */

.quote-circle {
	opacity: 0.6;
}

/* ── Top nav on inner pages ── */

.page-id-150 .site-header,
.home .site-header {
	border-bottom: 1px solid #E8E6E2;
}

/* ── Inner page hero banners ── */

.hero-banner {
	position: relative;
}

.hero-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.3) 100%);
	pointer-events: none;
}

.hero-banner .container {
	position: relative;
	z-index: 1;
}

/* ── Two col inwards module ── */

.two-col-inwards .text h2,
.two-col-inwards .text h3 {
	font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Homepage: cream/olive bar flush with About the Artist ── */

.home section:has(> .full-width-solid-bar) + section.four {
	margin-top: 0 !important;
}

/* ── Pastel olive bar colour (replaces cream site-wide) ── */

.full-width-solid-bar,
.full-width-solid-bar[style*="background-color"],
.contact-bar,
.contact-bar[style*="background"],
.onebox-overlay-image .box,
.onebox-overlay-image .box[style*="background-color"],
.halftext-halfimage .inner.left,
.halftext-halfimage .inner.right,
.halftext-halfimage .image-text .inner.right,
.halftext-halfimage [style*="background-color: #efe4c4"],
.halftext-halfimage [style*="background-color: #efebda"],
.halftext-halfimage [style*="background-color: #efedde"],
.halftext-halfimage [style*="background-color: #F3F1ED"],
.halftext-halfimage [style*="background-color: #f3f1ed"],
.halftext-halfimage [style*="background-color: #f4f4f4"],
.solidbar .bg-main[style*="background-color: #efe4c4"],
.solidbar .bg-main[style*="background-color: #F3F1ED"],
.text_area[style*="background-color: #efe4c4"],
.text_area[style*="background-color: #F3F1ED"],
.text_area[style*="background-color: #f3f1ed"],
.four-boxs[style*="background-color: #efe4c4"],
.four-boxs[style*="background-color: #F3F1ED"],
.four-boxs[style*="background-color: #f3f1ed"] {
	background-color: var(--color-bar) !important;
}

.contact-bar[style*="rgb(244"] {
	background-color: var(--color-bar) !important;
}

/* ── Homepage: Why Choose block (Created Individually For You) ── */

.home section.seven .two-col-inwards {
	background-color: #E8E9EA !important;
}

/* All headings in this block share the same size as "CREATED INDIVIDUALLY FOR YOU" */
.home section.seven .two-col-inwards .left-col > h2,
.home section.seven .two-col-inwards .left-col :is(h2, h3, h4, h5, h6),
.home section.seven .two-col-inwards .icons-block :is(h2, h3, h4, h5, h6) {
	font-size: clamp(1rem, calc(var(--font-size-title) * 0.5), var(--font-size-title)) !important;
	line-height: var(--line-height-body) !important;
}

.home section.seven .two-col-inwards .icons-block .text p,
.home section.seven .two-col-inwards .left-col p {
	font-size: var(--font-size-body) !important;
}

/* Icon feature list — icon in left slot; titles + body share one text edge */
.home section.seven .two-col-inwards .icons-block {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.home section.seven .two-col-inwards .icons-block .item {
	position: relative;
	padding: 0 0 0 64px;
	clear: none;
	margin: 0;
}

.home section.seven .two-col-inwards .icons-block .item :is(h2, h3).image {
	display: block;
	margin: 0 0 0.5rem;
	padding: 0;
	text-align: left;
	font-weight: 500;
	/* CMS markup adds   after icons — pull title flush with body copy */
	margin-left: -14px;
}

.home section.seven .two-col-inwards .icons-block .item img {
	position: absolute;
	left: 0;
	top: 0;
	width: 50px !important;
	height: 50px !important;
	margin: 0 !important;
	float: none !important;
}

.home section.seven .two-col-inwards .icons-block .item .text {
	width: 100%;
	margin: 0;
	padding: 0 !important;
	box-sizing: border-box;
}

.home section.seven .two-col-inwards .icons-block .text p {
	margin: 0;
}

/* Hide empty half-text module between the two blocks */
.home section.eight {
	display: none !important;
}

.home section.seven + section.eight {
	margin-top: 0 !important;
}

/* 1 inch gap before Blackpool box below */
.home section.eight + section.nine {
	margin-top: 1in !important;
}

.home section.nine > .onebox-overlay-image {
	padding-top: 0;
}

.home section.nine > .onebox-overlay-image .container .row {
	margin-bottom: 0;
}

.home section.nine > .onebox-overlay-image .box {
	top: 0;
	position: relative;
}

.halftext-halfimage .bg-cover {
	min-height: 480px;
}

/* ── Onebox overlay ── */

.onebox-overlay-image .overlay {
	background-color: rgba(26,26,26,0.55) !important;
}

.onebox-overlay-image h3 {
	font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Projects / Gallery ── */

.projects .toprow .text {
	background-color: #1A1A1A;
}

.projects .toprow .text h2,
.projects .toprow .text p {
	color: #FFFFFF;
}

/* ── Team block ── */

.team-block h3 {
	font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Review box ── */

.review-box .inner {
	background-color: #FFFFFF;
	border: 1px solid #E8E6E2;
	padding: 32px;
}

.review-box .inner p {
	color: #5A5A5A;
	font-family: 'DM Sans', sans-serif;
}

.review-box .inner p.who {
	color: #1A1A1A;
	font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Map section ── */

.map-section {
	filter: grayscale(20%);
}

/* ── YouTube embed ── */

.youtube-section iframe {
	border: none;
}

/* ── Contact form request bar ── */

.contact-form-request {
	background-color: var(--color-bar);
}

/* ── Single onethird text fullbg ── */

.single-onethird-text-fullbg .text {
	background-color: #2D6A6A !important;
}

.single-onethird-text-fullbg h3 {
	font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Trust slider ── */

.trust-slider .item {
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

.trust-slider .item:hover {
	opacity: 1;
}

/* ── Uniform typography (Google MD3 scale, site-wide) ── */

.subtitle,
.titlebar p.subtitle,
.two-col-inwards .titlebar p {
	font-family: var(--font-body) !important;
	font-size: var(--font-size-body) !important;
	line-height: var(--line-height-body) !important;
	font-weight: 400;
}

.t-14 {
	font-size: var(--font-size-caption) !important;
	line-height: var(--line-height-body) !important;
}

.t-16,
.t-18,
.t-20,
.t-22 {
	font-size: var(--font-size-body) !important;
	line-height: var(--line-height-body) !important;
}

.t-24,
.t-26,
.t-28,
.t-30,
.t-32,
.t-34,
.t-36 {
	font-size: var(--font-size-subtitle) !important;
	line-height: var(--line-height-subtitle) !important;
}

.bg-image-slider .hero-split__text h2,
.bg-image-slider .item h2,
.bg-image-slider .item h3,
.hero-banner h2,
.hero-banner h3,
.fullbg-text h2,
.full-width-solid-bar h2,
.four-col-slider h2,
.text_area h2,
.text_area h3,
.two-thirds-left h2,
.two-thirds-left h3,
.halftext-halfimage h2,
.halftext-halfimage h3,
.onebox-overlay-image h2,
.onebox-overlay-image h3,
.onebox-overlay-image h4,
.contact-bar h2,
.contact-bar h3,
.contact-form h3,
.testimonials h2,
.testimonials h3,
.four-boxs h2,
.four-boxs h3,
.solidbar h2,
.two-col-inwards h2,
.two-col-inwards h3,
.two-col-inwards .titlebar h2,
footer h4,
footer .footer-title {
	font-size: var(--font-size-subtitle) !important;
	line-height: var(--line-height-subtitle) !important;
}

.bg-image-slider .hero-split__text h1,
.bg-image-slider .item h1,
.hero-banner h1,
.fullbg-text h1,
.text_area h1,
.halftext-halfimage h1,
.onebox-overlay-image h1,
.page h1,
.home h1,
.two-col-inwards h1 {
	font-size: var(--font-size-title) !important;
	line-height: var(--line-height-title) !important;
}

.bg-image-slider .hero-split__text p,
.bg-image-slider .item p,
.hero-banner p,
.full-width-solid-bar p,
.four-col-slider p,
.text_area p,
.two-thirds-left p,
.halftext-halfimage p,
.onebox-overlay-image p,
.contact-bar p,
.testimonials p,
.four-boxs p,
.two-col-inwards p,
.fullbg-text p,
footer p,
footer li {
	font-size: var(--font-size-body) !important;
	line-height: var(--line-height-body) !important;
}

.two-col-inwards .left-col h3,
.onebox-overlay-image h3,
.onebox-overlay-image h4 {
	font-size: var(--font-size-subtitle) !important;
	line-height: var(--line-height-subtitle) !important;
}

input,
textarea,
select,
.contact-bar form input,
.contact-bar form select,
.contact-form form input,
.contact-form form textarea,
.wpcf7-form-control {
	font-size: var(--font-size-body) !important;
	line-height: var(--line-height-body) !important;
}

.site-header .menu a,
header .topnav-bar li a {
	font-size: var(--font-size-caption) !important;
	line-height: var(--line-height-body) !important;
}

/* ── Print styles ── */

@media print {
	.site-header,
	footer,
	.contact-bar,
	.sidenav {
		display: none;
	}
}

@media (max-width: 550px) {
	:root {
		--block-gap: 0.5in;
		/* Google: never reduce body below 16px on mobile */
		--font-size-body: 1rem;
		--font-size-title: 3rem;
		--font-size-subtitle: 2.0625rem;
	}

	.btn,
	.btn-large {
		padding: 14px 28px !important;
		font-size: var(--font-size-caption) !important;
	}
}