/*
Theme Name: Hart & Flowers
Theme URI: https://hartandflowers.com
Author: Nattercan Studio
Author URI: https://nattercan.com
Description: Classic theme for Hart & Flowers, carried over from the Squarespace design. Page content is plain core blocks; colours and type live in theme.json.
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: hartandflowers
*/

@font-face { font-family: 'Bon Voyage'; src: url(assets/fonts/bon-voyage.woff2) format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: Lato; src: url(assets/fonts/lato-300.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: Lato; src: url(assets/fonts/lato-300i.woff2) format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: Lato; src: url(assets/fonts/lato-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Lato; src: url(assets/fonts/lato-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
	--hf-sage: var(--wp--preset--color--sage);
	--hf-blush: var(--wp--preset--color--blush);
	--hf-gutter: clamp(16px, 4vw, 55px);
	--hf-header: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1 a, h2 a, h3 a { color: var(--hf-sage); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; background: #fff; padding: 8px 16px; }

/* ---- Header ---- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: #fff; border-bottom: 1px solid var(--wp--preset--color--rose);
}
.admin-bar .site-header { top: 32px; }
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	min-height: var(--hf-header); padding: 0 calc(var(--hf-gutter) + 17px);
}
.site-logo img { display: block; width: clamp(200px, 25vw, 360px); height: auto; }
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
	font-size: 0.89rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
	padding: 0.4em 0; border-bottom: 1px solid transparent;
}
.site-nav .current-menu-item > a, .site-nav a:hover { border-bottom-color: currentColor; }
.site-nav .wp-element-button { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.75em 1.4em; border-bottom: 0; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 1px; background: #000; margin: 7px 0; transition: transform .2s; }

@media (max-width: 900px) {
	:root { --hf-header: 72px; }
	.site-header__inner { padding: 0 16px; }
	.nav-toggle { display: block; }
	.site-nav {
		position: fixed; inset: var(--hf-header) 0 0 0; background: #fff;
		flex-direction: column; justify-content: center; gap: 2rem;
		opacity: 0; visibility: hidden; transition: opacity .2s;
	}
	.admin-bar .site-nav { top: calc(var(--hf-header) + 46px); }
	.nav-open .site-nav { opacity: 1; visibility: visible; }
	.site-nav ul { flex-direction: column; align-items: center; gap: 1.4rem; }
	.site-nav a { font-size: 1.1rem; }
	.nav-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
	.nav-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
}

/* ---- Page bands (full-width groups the content is built from) ---- */
.site-main > .alignfull, .entry-content > .alignfull { margin-top: 0; margin-bottom: 0; }
.entry-content > * + * { margin-top: 0; }
.hf-band { padding: clamp(56px, 8vw, 100px) var(--hf-gutter); }
.hf-band > * + * { margin-block-start: 2.2rem; }
/* Cover bands (text over a photo): the overlay layers are absolutely positioned, so no spacing. */
.wp-block-cover.hf-band > .wp-block-cover__background, .wp-block-cover.hf-band > .wp-block-cover__image-background { margin: 0; }
.wp-block-cover.hf-band a { color: #fff; }
.hf-band.has-sage-background-color, .hf-band.has-sage-light-background-color, .hf-band.has-ink-background-color { color: #fff; }
.hf-band.has-sage-background-color a, .hf-band.has-sage-light-background-color a, .hf-band.has-ink-background-color a { color: #fff; }
.hf-band-image { margin: 0; }
/* Line-drawn flowers framing the enquiry forms, as on the old site. */
.hf-band--illustrated { background: url(assets/img/flowers-illustration.png) center top / 100% auto repeat-y var(--wp--preset--color--rose); }
.hf-band--illustrated .wpcf7 { background: #fff; padding: clamp(24px, 4vw, 48px); }
.hf-band-image img { display: block; width: 100%; height: clamp(320px, 41vw, 600px); object-fit: cover; }

/* The home page opens on its photo with the curved edge the old site had. */
.home .entry-content > .hf-band-image:first-child img,
.entry-content > .hf-band-image:first-child img {
	height: clamp(380px, 52vw, 620px);
	clip-path: ellipse(85% 100% at 50% 0);
}

/* Media + text rows */
.wp-block-media-text { gap: 0; }
.wp-block-media-text .wp-block-media-text__content { padding: 0 clamp(24px, 6vw, 90px); }
.wp-block-media-text .wp-block-heading { text-align: left; }
.wp-block-media-text__media img { aspect-ratio: 1; object-fit: cover; }
.hf-band .wp-block-group.alignwide + .wp-block-group.alignwide { margin-block-start: clamp(48px, 6vw, 90px); }
@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { padding: 2rem 0 0; }
	.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media { grid-row: 1; }
}

/* Masonry galleries: CSS columns keep each photo's own aspect ratio. */
.wp-block-gallery.is-style-masonry { display: block !important; columns: 3 280px; column-gap: 1.6rem; }
.wp-block-gallery.is-style-masonry.columns-2 { columns: 2 260px; }
.wp-block-gallery.is-style-masonry > .wp-block-image {
	width: 100% !important; margin: 0 0 1.6rem !important; break-inside: avoid; display: block;
}
.wp-block-gallery.is-style-masonry > .wp-block-image img { height: auto !important; object-fit: initial !important; width: 100%; }

/* "Our other services" cards: title over the photo, button underneath */
.hf-card { position: relative; text-align: center; }
.hf-card > * + * { margin-block-start: 1.4rem; }
.hf-card > .wp-block-image { margin: 0; }
.hf-card > .wp-block-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.hf-card__overlay {
	position: absolute; left: 0; right: 0; top: 0; margin: 0 !important;
	aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: center;
	padding: 2rem; color: #fff; background: rgba(0, 0, 0, 0.28);
}
.hf-card__overlay * { color: #fff; text-align: center; }
.hf-card .wp-block-buttons { justify-content: center; }

.hf-testimonial { text-align: center; }
.hf-testimonial img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hf-icon { text-align: center; margin-bottom: 0; }
.hf-icon img { width: 96px; height: auto; }
.has-sage-light-background-color .wp-block-columns h3 { color: #fff; }

.hf-map iframe { width: 100%; height: 450px; border: 0; display: block; }

/* ---- Forms (Contact Form 7) ---- */
.wpcf7 { max-width: 680px; margin-inline: auto; }
.wpcf7 .hidden-fields-container { border: 0; padding: 0; margin: 0; }
.wpcf7 label { display: block; font-size: 0.95rem; }
.wpcf7 .hf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wpcf7 input:not([type=submit]):not([type=checkbox]), .wpcf7 select, .wpcf7 textarea {
	width: 100%; margin-top: 0.35rem; padding: 0.8rem; font: inherit; color: inherit;
	border: 1px solid #c9c9c9; border-radius: 0; background: #fff;
}
.wpcf7 textarea { height: 9rem; }
.wpcf7 p { margin: 0 0 1.2rem; }
.wpcf7 .req { opacity: 0.6; font-size: 0.8em; }
.wpcf7 input[type=submit] {
	background: var(--hf-sage); color: #fff; border: 0; border-radius: 300px; cursor: pointer;
	font: 400 0.95rem/1 var(--wp--preset--font-family--body); letter-spacing: 0.08em; text-transform: uppercase;
	padding: 1em 2.2em;
}
.wpcf7 input[type=submit]:hover { background: var(--wp--preset--color--sage-dark); }
@media (max-width: 600px) { .wpcf7 .hf-row { grid-template-columns: 1fr; } }

/* ---- Flower search tool ---- */
.hf-flowers form .fields { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; }
.hf-flowers label { flex: 1 1 150px; font-size: 0.95rem; }
.hf-flowers input, .hf-flowers select { display: block; width: 100%; margin-top: 0.3rem; padding: 0.6rem; font: inherit; border: 1px solid #c9c9c9; background: #fff; }
.hf-flowers button { margin: 1.2rem auto 0; display: block; }
.hf-flowers .error { color: #a33; }
.hf-flowers .results { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.hf-flowers .card { background: #fff; border: 1px solid #eee; padding: 0.9rem; }
.hf-flowers .card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hf-flowers .card h3 { margin: 0.6rem 0 0.3rem; }
.hf-flowers .card p { margin: 0.2rem 0; font-size: 0.95rem; }
.hf-flowers .swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; margin-right: 0.25rem; border: 1px solid #999; vertical-align: middle; }
.hf-flowers dialog { max-width: 600px; width: 90%; border: 0; padding: 1.5rem; }
.hf-flowers dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.hf-flowers dialog .close { float: right; background: none; border: 0; font-size: 1.6rem; cursor: pointer; }

/* ---- Blog ---- */
.post-header { text-align: center; padding: clamp(48px, 7vw, 90px) var(--hf-gutter) 0; }
.post-header time { display: block; margin-top: 1rem; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; }
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 3rem 2rem; max-width: 1330px; margin: 0 auto; padding: clamp(48px, 7vw, 90px) var(--hf-gutter); }
.post-list article a { text-decoration: none; }
.post-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.post-list h2 { margin: 1rem 0 0.5rem; font-size: 1.6rem; }
.single .hf-band { padding-top: 2.5rem; }

/* ---- Footer ---- */
.site-footer { background: var(--hf-sage); color: #fff; text-align: center; padding: clamp(56px, 7vw, 100px) var(--hf-gutter) 40px; }
.site-footer a { color: #fff; }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 1330px; margin: 0 auto; }
.site-footer h2 { font-size: clamp(1.5rem, 2vw, 2.1rem); text-transform: uppercase; margin: 0 0 1.4rem; }
.site-footer p { margin: 0 0 1.2rem; text-transform: uppercase; line-height: 1.65; }
.site-footer ul { list-style: none; margin: 0; padding: 0; text-transform: uppercase; line-height: 1.65; }
.site-footer .connect { font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; text-transform: none; margin-top: 2rem; }
.social { display: flex; justify-content: center; gap: 0.9rem; }
.social svg { width: 22px; height: 22px; fill: #fff; display: block; }
.site-footer .site-footer__legal { margin-top: 4rem; font-size: 0.85rem; opacity: 0.9; text-transform: none; }
@media (max-width: 900px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__cols { grid-template-columns: 1fr; } }