/**
 * Projected header, footer and base styles for blog
 * Matches main website fonts and layout
 */

/* Base – match main site */
:root {
	--color-white: #FFFFFF;
	--color-dark: #1A1A1A;
	--color-coral: #FFC8BA;
	--color-light-grey: #999999;
}

body {
	font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	font-weight: 300;
	font-size: 18px;
	color: var(--color-dark);
	background: var(--color-white);
	line-height: 1.6;
}

/* Header */
body .projected-header {
	position: sticky;
	top: 0;
	background: var(--color-white);
	z-index: 1000;
	padding: 20px 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

body .projected-header .logo {
	display: block;
	height: 48px;
	width: 144px;
	flex-shrink: 0;
}

body .projected-header .logo img {
	height: 100%;
	width: 100%;
	display: block;
	object-fit: contain;
}

body .projected-header nav {
	display: flex;
	align-items: center;
	gap: 40px;
}

body .projected-header nav a {
	color: var(--color-dark);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: opacity 0.3s;
}

body .projected-header nav a:hover {
	opacity: 0.7;
}

body .projected-header .btn-contact {
	background: #F6A192;
	color: #141414;
	padding: 12px 24px;
	border: none;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

body .projected-header .btn-contact:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(246, 161, 146, 0.4);
}

/* Footer */
body .projected-footer {
	background: var(--color-dark);
	color: var(--color-white);
	padding: 80px 0 20px;
	min-height: 500px;
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	margin-top: 60px;
}

body .projected-footer .footer-wrapper {
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
	padding: 0 40px;
}

body .projected-footer .footer-content {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	margin-bottom: 40px;
	flex: 1;
	width: 100%;
	align-items: start;
}

body .projected-footer .footer-nav-wrapper {
	grid-column: 1 / span 4;
}

body .projected-footer .footer-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

body .projected-footer .footer-nav li {
	margin-bottom: 12px;
	white-space: nowrap;
}

body .projected-footer .footer-nav a {
	color: var(--color-white);
	text-decoration: none;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: opacity 0.3s;
	display: block;
}

body .projected-footer .footer-nav a:hover {
	opacity: 0.7;
}

body .projected-footer .social-icons {
	display: flex;
	gap: 36px;
	align-items: center;
}

body .projected-footer .social-icon {
	width: 36px;
	height: 36px;
	cursor: pointer;
	transition: filter 0.3s;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

body .projected-footer .social-icons a:hover .social-icon {
	filter: brightness(0) saturate(100%) invert(89%) sepia(12%) saturate(1352%) hue-rotate(310deg) brightness(102%) contrast(98%);
}

body .projected-footer .newsletter {
	grid-column: 8 / span 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

body .projected-footer .newsletter h4 {
	font-family: 'Playfair Display', serif;
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 16px;
	color: var(--color-white);
}

body .projected-footer .footer-bottom {
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	align-items: center;
	font-size: 12px;
	color: var(--color-light-grey);
	width: 100%;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 1400px;
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
}

body .projected-footer .footer-bottom-left {
	display: flex;
	align-items: center;
	grid-column: 1;
}

body .projected-footer .footer-bottom-right {
	display: flex;
	align-items: center;
	gap: 20px;
	grid-column: 9 / span 4;
	justify-content: flex-end;
}

body .projected-footer .footer-bottom a {
	color: var(--color-light-grey);
	text-decoration: none;
	margin-left: 20px;
	transition: color 0.3s;
}

body .projected-footer .footer-bottom a:hover {
	color: var(--color-white);
}

body .projected-footer .back-to-top {
	color: var(--color-white);
	text-decoration: none;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: opacity 0.3s;
	grid-column: 6 / span 2;
	justify-self: center;
}

body .projected-footer .back-to-top:hover {
	opacity: 0.7;
	color: var(--color-white);
}

body .projected-footer .back-to-top svg {
	width: 16px;
	height: 16px;
	fill: var(--color-white);
}

/* Brevo newsletter form in footer */
body .projected-footer .newsletter #sib-form-container,
body .projected-footer .newsletter #sib-container {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	width: 100%;
}

body .projected-footer .newsletter #sib-form {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	gap: 0 20px;
	align-items: end;
}

body .projected-footer .newsletter #sib-container input[type="email"] {
	display: block !important;
	width: 100% !important;
	height: 48px !important;
	padding: 0 16px !important;
	border: none !important;
	border-radius: 4px !important;
	font-size: 14px !important;
	font-family: 'Lexend', sans-serif !important;
	background: var(--color-white) !important;
	color: var(--color-dark) !important;
	box-sizing: border-box !important;
}

body .projected-footer .newsletter #sib-container button[form="sib-form"] {
	height: 48px !important;
	padding: 0 20px !important;
	border-radius: 4px !important;
	background: var(--color-white) !important;
	color: var(--color-dark) !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	border: none !important;
	cursor: pointer !important;
}

body .projected-footer .newsletter #sib-container .entry__label {
	display: none !important;
}

body .projected-footer .newsletter #sib-container .sib-form-block__button svg,
body .projected-footer .newsletter #sib-container button[form="sib-form"] svg {
	display: none !important;
}

body .projected-footer .newsletter #sib-container .sib-form-block__button::after,
body .projected-footer .newsletter #sib-container button[form="sib-form"]::after {
	content: 'Subscribe';
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

body .projected-footer .newsletter #sib-container .sib-optin label {
	font-size: 12px !important;
	color: var(--color-light-grey) !important;
}

/* Blog content typography – use main site fonts */
.wp-block-post-title,
.wp-block-query-title,
h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', serif !important;
}

/* Blog main page – match header spacing (logo left, Contact right = 40px sides), prevent overflow */
body.blog,
body.home {
	overflow-x: hidden;
}

body.blog main,
body.home main {
	padding-left: 40px !important;
	padding-right: 40px !important;
	box-sizing: border-box;
	max-width: 100%;
}

/* Prevent alignwide/alignfull from breaking out and eating left padding */
body.blog main .alignwide,
body.blog main .alignfull,
body.home main .alignwide,
body.home main .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* Align "Blog" title with first post – same inner width, max 1400px like header area; force containment */
body.blog main .wp-block-group,
body.blog main .is-layout-constrained,
body.home main .wp-block-group,
body.home main .is-layout-constrained,
main:has(.projected-blog-grid) .wp-block-group,
main:has(.projected-blog-grid) .is-layout-constrained,
main:has(.wp-block-query.projected-blog-grid) .wp-block-group,
main:has(.wp-block-query.projected-blog-grid) .is-layout-constrained {
	max-width: 1400px;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
	min-width: 0;
}

/* Ensure query and grid don’t overflow – stay within padded main */
body.blog main .wp-block-query,
body.home main .wp-block-query,
main:has(.projected-blog-grid) .wp-block-query,
main:has(.wp-block-query.projected-blog-grid) {
	max-width: 100%;
	min-width: 0;
}

body.blog main .wp-block-heading,
body.home main .wp-block-heading,
main:has(.projected-blog-grid) .wp-block-heading,
main:has(.wp-block-query.projected-blog-grid) .wp-block-heading {
	margin-left: 0;
	margin-right: 0;
}

/* Force "Blog" title to align with first post – same left edge as grid */
body.blog main .wp-block-heading:first-of-type,
body.blog main h1.wp-block-heading,
body.home main .wp-block-heading:first-of-type,
body.home main h1.wp-block-heading,
main:has(.projected-blog-grid) .wp-block-heading:first-of-type,
main:has(.wp-block-query.projected-blog-grid) .wp-block-heading:first-of-type {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	text-align: left !important;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

body.blog main .wp-block-query.alignwide,
body.home main .wp-block-query.alignwide,
main:has(.projected-blog-grid) .wp-block-query.alignwide,
main:has(.wp-block-query.projected-blog-grid) .wp-block-query.alignwide {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}

/* Target query block on blog index */
body.blog main .wp-block-query,
body.home main .wp-block-query,
main .wp-block-query.alignfull,
main .wp-block-query.alignwide,
.projected-blog-grid {
	margin-top: 24px;
	margin-bottom: 60px;
}

/* Grid: support both ul (post-template) and block layout wrapper */
body.blog main .wp-block-query [class*="post-template"],
body.blog main .wp-block-query .is-layout-grid,
body.home main .wp-block-query [class*="post-template"],
body.home main .wp-block-query .is-layout-grid,
main .wp-block-query .wp-block-post-template,
main .wp-block-query .is-layout-grid.wp-block-post-template,
.projected-blog-grid .wp-block-post-template,
.projected-blog-grid .is-layout-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: start;
	min-width: 0;
	max-width: 100%;
}

/* Hide full post content and date on blog listing – show only image + title */
body.blog main .wp-block-post-content,
body.blog main .wp-block-post-date,
body.home main .wp-block-post-content,
body.home main .wp-block-post-date,
main .wp-block-query .wp-block-post-content,
main .wp-block-query .wp-block-post-date {
	display: none !important;
}

/* Each card: list item or inner group – top align and consistent spacing so first row isn’t higher */
.projected-blog-grid-item,
body.blog main .wp-block-query .wp-block-post-template > li,
body.blog main .wp-block-query .wp-block-post-template > .wp-block-group,
body.home main .wp-block-query .wp-block-post-template > li,
body.home main .wp-block-query .wp-block-post-template > .wp-block-group,
main .wp-block-query .wp-block-post-template > li,
main .wp-block-query .wp-block-post-template > .wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 1.5rem;
	align-items: stretch;
	align-self: start;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
}

body.blog main .wp-block-query .wp-block-post-template li .wp-block-group,
body.home main .wp-block-query .wp-block-post-template li .wp-block-group,
main .wp-block-query .wp-block-post-template li .wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0 !important;
	padding: 0 !important;
}

.projected-blog-grid-item .wp-block-post-featured-image,
main .wp-block-query .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
}

.projected-blog-grid-item .wp-block-post-featured-image a,
main .wp-block-query .wp-block-post-featured-image a {
	display: block;
	line-height: 0;
}

.projected-blog-grid-item .wp-block-post-featured-image img,
main .wp-block-query .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.projected-blog-grid-item .wp-block-post-title,
main .wp-block-query .wp-block-post-title {
	margin: 0;
	font-family: 'Playfair Display', serif !important;
	font-size: 1.25rem !important;
	font-weight: 600;
	line-height: 1.3;
}

.projected-blog-grid-item .wp-block-post-title a,
main .wp-block-query .wp-block-post-title a {
	color: var(--color-dark);
	text-decoration: none;
	transition: opacity 0.3s;
}

.projected-blog-grid-item .wp-block-post-title a:hover,
main .wp-block-query .wp-block-post-title a:hover {
	opacity: 0.7;
}

.projected-blog-grid .wp-block-query-pagination,
main .wp-block-query .wp-block-query-pagination {
	margin-top: 3rem;
}

@media (max-width: 1024px) {
	body.blog main .wp-block-query [class*="post-template"],
	body.blog main .wp-block-query .is-layout-grid,
	body.home main .wp-block-query [class*="post-template"],
	body.home main .wp-block-query .is-layout-grid,
	main .wp-block-query .wp-block-post-template,
	.projected-blog-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	body.blog main .wp-block-query [class*="post-template"],
	body.blog main .wp-block-query .is-layout-grid,
	body.home main .wp-block-query [class*="post-template"],
	body.home main .wp-block-query .is-layout-grid,
	main .wp-block-query .wp-block-post-template,
	.projected-blog-grid .wp-block-post-template {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

@media (max-width: 768px) {
	body.blog main,
	body.home main {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Single post pages – wider content (theme default is 645px) + same side spacing, centered */
body.single main {
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
	--wp--style--global--content-size: 960px;
	--wp--style--global--wide-size: 1400px;
}

body.single main .wp-block-post-content .is-layout-constrained,
body.single main .is-layout-constrained {
	max-width: 960px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 768px) {
	body.single main {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Responsive */
@media (max-width: 768px) {
	body .projected-header {
		padding: 15px 20px;
		flex-wrap: wrap;
	}

	body .projected-header nav {
		gap: 20px;
	}

	body .projected-footer .footer-content {
		grid-template-columns: 1fr;
	}

	body .projected-footer .footer-nav-wrapper {
		grid-column: 1;
	}

	body .projected-footer .newsletter {
		grid-column: 1;
	}

	body .projected-footer .footer-bottom {
		flex-direction: column;
		position: relative;
		text-align: center;
	}

	body .projected-footer .footer-bottom-left,
	body .projected-footer .footer-bottom-right {
		grid-column: 1;
		justify-content: center;
	}
}