/* ==========================================================================
   The Cornflower Florist — small extras that Bricks can't set natively.

   Everything else now lives inside Bricks, where the client can see it:
   - Colours:     Bricks > Color palette "Cornflower"   (--cf-brick, --cf-teal …)
   - Type/space:  Bricks > Global variables             (--cf-fs-h1, --cf-space-m …)
   - Base styles: Bricks > Theme styles > "Cornflower"  (headings, body, buttons)
   - Sections:    Bricks global classes                 (cf-hero, cf-card …)

   Don't redefine any of those variables here, or the Bricks values stop working.
   ========================================================================== */

/* Button hover colours (Figma style sheet). Bricks theme styles have no hover
   control for button colours, so they're set here. Pick the button style in
   Bricks: Primary = Brick, Secondary = Teal, Light = White, Dark = Black. */
.bricks-button.bricks-background-primary:hover   { background-color: var(--cf-brick-hover); }
.bricks-button.bricks-background-secondary:hover { background-color: var(--cf-teal-hover); }
.bricks-button.bricks-background-light:hover     { background-color: var(--cf-white-hover); }
.bricks-button.bricks-background-dark:hover      { background-color: var(--cf-black-hover); }

/* Default button padding (Figma: 10px 20px). Bricks "Large" size is used for
   the larger Figma button. */
.bricks-button:not(.sm):not(.lg):not(.xl) { padding: 10px 20px; }
.bricks-button.lg { padding: 12px 24px; font-size: var(--cf-fs-body-lg); }
.bricks-button.sm { padding: 10px 20px; font-size: var(--cf-fs-body-sm); } /* Figma "Small" button */

/* Product grid: date / detail line under the title (e.g. workshop dates) */
.cf-product-card-sub { text-transform: uppercase; letter-spacing: var(--cf-tracking); }

/* Header: "Contact us" link and menu open/close icons turn Brick on hover */
.cf-header .cf-header-link,
.cf-header .cf-header-toggle {
	color: var(--cf-black);
	transition: color 0.2s ease;
}
.cf-header .cf-header-link:hover,
.cf-header .cf-header-link:focus-visible,
.cf-header .cf-header-toggle:hover,
.cf-header .cf-header-toggle:focus-visible {
	color: var(--cf-brick);
}

/* Plain text links (rich text, contact details) turn Brick on hover.
   Links inside rich text are underlined, as in the Figma style sheet. */
.brxe-text a,
.brxe-text-basic a {
	color: inherit;
	transition: color 0.2s ease;
}
.brxe-text a { text-decoration: underline; text-underline-offset: 0.15em; }
.brxe-text a:hover,
.brxe-text a:focus-visible,
.brxe-text-basic a:hover,
.brxe-text-basic a:focus-visible {
	color: var(--cf-brick);
}

/* Full-screen menu links (Header template > Full-screen menu). The links
   themselves come from Appearance > Menus > "Main menu". */
.cf-menu-nav .bricks-nav-menu { flex-direction: column; align-items: flex-start; gap: 0; }
.cf-menu-nav .bricks-nav-menu > li { margin: 0; }
.cf-menu-nav .bricks-nav-menu > li > a {
	font-family: "Satoshi", sans-serif;
	font-weight: 300;
	font-size: var(--cf-fs-h1);
	line-height: 1.25;
	color: var(--cf-black);
	padding: 0;
}
.cf-menu-nav .bricks-nav-menu > li > a:hover,
.cf-menu-nav .bricks-nav-menu > .current-menu-item > a { color: var(--cf-brick); }

/* Spacing inside blocks is set by gap on the parent, so headings need no
   extra margin (Bricks adds one to headings that follow other text). */
.brxe-heading,
.brxe-text-basic { margin: 0; }

/* Footer contact column sits on the right at its natural width */
.cf-footer-row > .cf-contact { width: auto; }

/* Rich text spacing inside blocks */
.cf-feature-body p,
.brxe-text p { margin: 0 0 0.75em; }
.cf-feature-body p:last-child,
.brxe-text p:last-child { margin-bottom: 0; }

/* Image + text: "Image position: Right" flips the columns on desktop */
@media (min-width: 992px) {
	.cf-imgtext[data-image-position="right" i] { flex-direction: row-reverse; }
}

/* Image gallery block — layout chosen by the client (data-cf-layout):
   feature = 1 large + 2 stacked, three = rows of 3, grid = rows of 4 */
.cf-gallery.brxe-image-gallery {
	display: grid;
	gap: var(--cf-gutter);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 0;
	margin: 0;
	list-style: none;
}
.cf-gallery.brxe-image-gallery > li { margin: 0; padding: 0; width: auto; }
.cf-gallery.brxe-image-gallery figure { margin: 0; height: 100%; overflow: hidden; }
/* Images open in a full-screen lightbox (swipe / arrows / keyboard to browse) */
.cf-gallery.brxe-image-gallery a { display: block; height: 100%; cursor: zoom-in; }
.cf-gallery.brxe-image-gallery a img { transition: transform 0.6s ease, opacity 0.3s ease; }
.cf-gallery.brxe-image-gallery a:hover img,
.cf-gallery.brxe-image-gallery a:focus-visible img { transform: scale(1.03); }
.cf-gallery.brxe-image-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cf-gallery[data-cf-layout="three"] img { height: clamp(320px, 38vw, 550px); }
.cf-gallery[data-cf-layout="feature"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf-gallery[data-cf-layout="feature"] > li:first-child { grid-row: span 2; }
.cf-gallery[data-cf-layout="feature"] { --cf-feature-h: clamp(420px, 53vw, 763px); }
.cf-gallery[data-cf-layout="feature"] > li:first-child img { height: var(--cf-feature-h); }
.cf-gallery[data-cf-layout="feature"] > li:not(:first-child) img { height: calc((var(--cf-feature-h) - var(--cf-gutter)) / 2); }
.cf-gallery[data-cf-layout="feature"] > li:nth-child(n+4) { display: none; }
.cf-gallery[data-cf-layout="grid"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem; }
.cf-gallery[data-cf-layout="grid"] img { height: auto; aspect-ratio: 301 / 294; }
@media (max-width: 991px) {
	.cf-gallery[data-cf-layout="three"],
	.cf-gallery[data-cf-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-space-s); }
}
@media (max-width: 478px) {
	.cf-gallery[data-cf-layout] { grid-template-columns: minmax(0, 1fr); gap: var(--cf-space-s); }
	.cf-gallery[data-cf-layout="feature"] > li:first-child { grid-row: auto; }
	.cf-gallery[data-cf-layout] img,
	.cf-gallery[data-cf-layout="feature"] > li:first-child img { height: 320px; aspect-ratio: auto; }
}

/* Gallery lightbox: solid Cornflower Black backdrop behind the photo */
.pswp.brx .pswp__bg { background: var(--cf-black); }
.pswp.brx.pswp--open .pswp__bg { opacity: 1 !important; } /* PhotoSwipe sets 0.8 inline */

/* Quote banner */
.cf-cta .cf-quote-banner {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Satoshi", sans-serif;
	font-style: normal;
	text-align: center;
}

/* FAQs: native <details>, plus icon rotates to a cross when open */
.cf-faq-question { list-style: none; width: 100%; transition: color 0.2s ease; }
.cf-faq-question::-webkit-details-marker { display: none; }
.cf-faq-question::after {
	content: "+";
	font-weight: 300;
	font-size: 1.5em;
	line-height: 1;
	transition: transform 0.2s ease;
}
.cf-faq-item[open] > .cf-faq-question::after { transform: rotate(45deg); }
.cf-faq-item.is-closing > .cf-faq-question::after { transform: none; } /* rotate back as it starts closing */
/* Space under each answer lives inside the answer (not as padding on it),
   so it slides with the answer instead of snapping at the start/end. */
.cf-faq-answer > :last-child { padding-bottom: 1rem; }
.cf-faq-question:hover,
.cf-faq-question:focus-visible { color: var(--cf-brick); }

/* Testimonials slider: fixed height (the tallest testimonial) so the page
   never shifts. Each quote sits at the top, 24px under the heading as in
   Figma; shorter quotes leave their spare space below the name. */
.cf-testimonials-slider .splide__list { align-items: stretch; }
.cf-testimonials-slider .splide__slide.cf-testimonial {
	height: auto !important; /* overrides Bricks' inline default of 50vh */
	justify-content: flex-start;
	align-items: center;
}

/* ==========================================================================
   Forms (Fluent Forms) — applies to every form, so new forms the client
   builds match automatically. Figma: white fields, small label inside the
   top-left corner, square Brick submit button.
   ========================================================================== */
.fluentform .ff-el-group { position: relative; margin-bottom: 18px; }

/* Label sits inside the field */
.fluentform .ff-el-group:has(.ff-el-form-control) > .ff-el-input--label {
	position: absolute;
	top: 3px;
	left: 8px;
	z-index: 1;
	margin: 0;
	padding: 0;
	pointer-events: none;
}
.fluentform .ff-el-input--label label {
	font-family: "Switzer", sans-serif;
	font-weight: 300;
	font-size: 10px;
	line-height: 10px;
	color: var(--cf-black);
	margin: 0;
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: inherit; margin-left: 1px; }

.fluentform form.frm-fluent-form .ff-el-group .ff-el-form-control,
.fluentform .ff-el-form-control,
.fluentform select.ff-el-form-control {
	background-color: var(--cf-white);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	/* 55px field: label at 3px, text from 27px (27 + 18 + 10 = 55) */
	min-height: 55px;
	padding: 27px 8px 10px;
	font-family: "Switzer", sans-serif;
	font-weight: 300;
	font-size: var(--cf-fs-body);
	line-height: 1.2;
	color: var(--cf-black);
}
.fluentform textarea.ff-el-form-control { min-height: 99px; resize: vertical; }

/* Dropdowns: Safari/macOS ignore top padding on native selects, which made
   the text sit on top of the label. A custom appearance (with our own
   chevron) lets the padding apply like the other fields. */
.fluentform form.frm-fluent-form .ff-el-group select.ff-el-form-control,
.fluentform select.ff-el-form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Exact box so the value sits below the label (browsers centre select
	   text in whatever space is left): 27px top + 17px text + 11px bottom = 55px */
	height: 55px;
	min-height: 55px;
	line-height: 17px;
	padding: 27px 40px 11px 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2325282a' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}
.fluentform form.frm-fluent-form .ff-el-group .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--cf-brick);
}
.fluentform .ff-el-is-error .ff-el-form-control { box-shadow: 0 0 0 2px var(--cf-brick-hover); }
.fluentform .ff-el-is-error .text-danger,
.fluentform .error { color: var(--cf-brick-hover); font-size: var(--cf-fs-body-sm); margin-top: 4px; }

/* Consent checkbox */
.fluentform .ff-el-tc label,
.fluentform .ff_t_c,
.fluentform .ff-el-form-check-label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-family: "Switzer", sans-serif;
	font-weight: 300;
	font-size: var(--cf-fs-body-sm);
	line-height: 1.4;
	color: var(--cf-black);
}
.fluentform input[type="checkbox"] {
	accent-color: var(--cf-brick);
	width: 15px;
	height: 15px;
	margin-top: 3px;
	flex-shrink: 0;
}

/* Submit button: Figma small Brick button */
.fluentform .ff-btn-submit,
.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--cf-brick);
	color: var(--cf-white);
	border: 0;
	border-radius: 0;
	padding: 10px 20px;
	font-family: "Satoshi", sans-serif;
	font-weight: 500;
	font-size: var(--cf-fs-body-sm);
	line-height: 1.1;
	letter-spacing: var(--cf-tracking-btn);
	text-transform: uppercase;
	box-shadow: none;
	transition: background-color 0.2s ease;
	opacity: 1;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible { background-color: var(--cf-brick-hover); opacity: 1; }

/* Thank-you message after sending */
.ff-message-success {
	background: var(--cf-white);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	padding: var(--cf-space-s);
	font-size: var(--cf-fs-body-lg);
	color: var(--cf-black);
}

/* Always keep room for the page scrollbar. Opening the full-screen menu
   stops the page scrolling; without this the scrollbar would vanish and the
   whole page (header included) would jump sideways, then back on close. */
html { scrollbar-gutter: stable; }

/* Hover zooms use the `scale` property rather than `transform`, so they
   don't clash with the scroll-reveal animation (which animates transform). */

/* Category cards: subtle zoom and slightly darker image on hover */
.cf-card .cf-bg-img { transition: scale 0.6s ease; }
.cf-card::after { transition: background-color 0.6s ease; }
.cf-card:hover .cf-bg-img,
.cf-card:focus-visible .cf-bg-img { scale: 1.04; }
.cf-card:hover::after,
.cf-card:focus-visible::after { background-color: rgba(0, 0, 0, 0.55); }

/* Hero, feature panel and enquiry banner: the image zooms in a little while
   the button is hovered. The feature image isn't in a cropping frame, so a
   matching clip keeps it inside its own edges as it grows (1 / 1.05). */
.cf-hero .cf-bg-img,
.cf-cta .cf-bg-img { transition: scale 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.cf-feature img.brxe-image {
	clip-path: inset(0);
	transition: scale 0.8s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.cf-hero:has(.bricks-button:hover, .bricks-button:focus-visible) .cf-bg-img,
.cf-cta:has(.bricks-button:hover, .bricks-button:focus-visible) .cf-bg-img { scale: 1.05; }
.cf-feature:has(.bricks-button:hover, .bricks-button:focus-visible) img.brxe-image {
	scale: 1.05;
	clip-path: inset(2.38%);
}

/* Instagram icon (footer and full-screen menu) turns Brick on hover */
.cf-social { transition: color 0.2s ease; }
a:hover > .cf-social,
a:focus-visible > .cf-social,
a.cf-social:hover,
a.cf-social:focus-visible { color: var(--cf-brick); }