/*
Theme Name: Flowers by Frances
Theme URI: https://flowersbyfrances.us
Description: Child theme of Twenty Twenty-Five for Flowers by Frances, a wedding florist in Clearwater, Florida. Recreates the approved Google Sites design using native WordPress blocks. Colors, fonts and sizes are controlled in Appearance > Editor > Styles (theme.json) - the rules below only cover the few things block settings cannot express.
Author: Bluestone Virtual Assistants & Management
Template: twentytwentyfive
Version: 7.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flowers-by-frances
*/

/* =========================================================================
   HOW TO EDIT THIS SITE
   -------------------------------------------------------------------------
   You should almost never need this file.
     - Page text, photos, galleries, buttons  -> Pages > (page) > block editor
     - Header and footer                      -> Appearance > Editor > Patterns
     - Colors, fonts, text sizes              -> Appearance > Editor > Styles

   VERSION 7.0.0 - removes the white strip above the hero on the interior
   pages. Stylesheet only, one rule added. The sticky header rules from
   version 6 are untouched.
   Nothing else in the theme changed: no templates, no functions.php, no
   theme.json, no header or footer markup. No page content was touched.

   Everything below was written against the real page markup, which is:

     <header class="wp-block-template-part">          <- the burgundy bar
       <div class="wp-block-group fbf-header ...">
         <div class="wp-block-group is-layout-flex">  <- name + menu
     <main class="wp-block-group has-global-padding is-layout-constrained"
           style="margin-top:var(--wp--preset--spacing--60)">
       <div class="wp-block-post-content ...">        <- all page content

   Two things in that markup were causing most of the remaining problems, and
   both are fixed in sections 1 and 2.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. THE BURGUNDY HEADER - STICKY, AS ONE PIECE
   The bar is a real <header class="wp-block-template-part"> containing one
   group, so that single element is the correct thing to pin. Sticking the
   <header> keeps the site name and all three menu links together as one unit;
   nothing is duplicated and no second header is created.

   Earlier versions failed for two reasons, both dealt with here:
     - they guessed at the element instead of targeting it directly;
     - version 2 set an "overflow" value on the page, and any ancestor with a
       non-visible overflow silently cancels position:sticky. Rather than just
       removing that, the rule below actively forces overflow back to visible
       so nothing else can reintroduce the problem.
   ------------------------------------------------------------------------- */
html,
body,
.wp-site-blocks {
	/* Any ancestor with a non-visible overflow silently cancels sticky. */
	overflow: visible !important;
	/* A transform, filter, perspective or paint containment on ANY ancestor
	   also cancels it - the element then positions against that ancestor
	   instead of the window. These are the classic silent killers and are
	   neutralised here. */
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	contain: none !important;
}

.fbf-header,
header.wp-block-template-part .fbf-header {
	background-color: #7A1F46 !important;
}

/* The exact element from the page markup. */
header.wp-block-template-part,
.wp-site-blocks > header,
.wp-site-blocks > *:has(> header.wp-block-template-part) {
	position: sticky !important;
	top: 0 !important;
	z-index: 9999 !important;
	background-color: #7A1F46;
	width: 100%;
}

/* When you are logged in, WordPress pins its own toolbar across the top, so
   the header sits just below it instead of behind it. */
.admin-bar header.wp-block-template-part,
.admin-bar .wp-site-blocks > header,
.admin-bar .wp-site-blocks > *:has(> header.wp-block-template-part) {
	top: 32px !important;
}

/* Below 783px the WordPress toolbar scrolls away with the page, so the header
   goes back to the very top of the window. */
@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part,
	.admin-bar .wp-site-blocks > header,
	.admin-bar .wp-site-blocks > *:has(> header.wp-block-template-part) {
		top: 0 !important;
	}
}

/* The site name and the menu, sized so the bar stays short but readable. */
.fbf-header .wp-block-site-title a {
	font-size: clamp(1.3rem, 1.1rem + 0.55vw, 1.6rem);
}

.fbf-header .wp-block-navigation {
	font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
}

.fbf-header a {
	text-decoration: none;
}

.fbf-header a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Keep the bar compact on phones. */
@media (max-width: 599px) {
	.fbf-header {
		padding-top: 0.45rem !important;
		padding-bottom: 0.45rem !important;
	}
}


/* -------------------------------------------------------------------------
   2. THE WHITE GAP UNDER THE HEADER, AND THE FULL-WIDTH BANNERS
   Two separate problems with the same root, both visible in the page markup.

   (a) THE GAP. The <main> element carries an inline
       style="margin-top:var(--wp--preset--spacing--60)". That is a large
       preset space, and it is the white strip between the burgundy bar and
       the hero photograph. It comes from the saved page template, not from
       any page content, so it is removed here. An inline style can only be
       beaten by !important, which is why it is used.

   (b) THE NARROW BANNERS. <main> uses a constrained layout, which caps each
       of its direct children at the content width. Its direct child is the
       page-content wrapper, so the ENTIRE page was being squeezed into an
       880px column - including the hero and the photo bands, which the page
       content already marks as full width. Lifting that one cap lets those
       existing full-width blocks reach the edges of the screen again.
       Ordinary paragraphs are unaffected: the page-content wrapper has its
       own constrained layout, which still holds running text to a
       comfortable reading width.
   ------------------------------------------------------------------------- */
.wp-site-blocks > main,
main.wp-block-group,
main.is-layout-constrained {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

main.wp-block-group > .wp-block-post-content,
main.wp-block-group > .entry-content,
.wp-site-blocks > main > .wp-block-post-content {
	max-width: none !important;
}

/* Nothing should sit above the first photo band. */
main.wp-block-group > :first-child,
.wp-block-post-content > :first-child {
	margin-block-start: 0 !important;
}

/* -------------------------------------------------------------------------
   3. HERO SECTIONS
   The photographs are untouched. What changes is the text sitting on top of
   them: the container is wider, so a long heading such as "Let's Talk About
   Your Wedding Flowers" spreads across the image instead of stacking into a
   narrow column in the middle, and the supporting lines are large enough to
   read comfortably at normal zoom.
   ------------------------------------------------------------------------- */
.fbf-hero .wp-block-cover__background {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(0, 0, 0, 0.30) 55%,
		rgba(0, 0, 0, 0.45) 100%
	);
}

/* Version 2 capped this at 52rem (832px), which is what forced the
   consultation heading into a tall narrow stack. */
.fbf-hero .wp-block-cover__inner-container {
	max-width: min(1100px, 92vw);
	margin-inline: auto;
}

/* Ordinary supporting lines, e.g. "Creating the Room from Bud to Bloom".
   The :not() stops this from flattening a line that was given its own size. */
.fbf-hero p:not([class*="-font-size"]) {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
	line-height: 1.6;
}

/* The stronger hero line, "From a Simple Bouquet to a Full Wedding". */
.fbf-hero p.has-large-font-size {
	font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem);
	line-height: 1.4;
}

/* A two-line hero heading should read as one unit. */
.fbf-hero h1 {
	line-height: 1.15;
	margin-bottom: 0.4em;
}

/* -------------------------------------------------------------------------
   4. GALLERIES - THE BIG ONE
   WordPress lays galleries out with flexbox. When a row ends up with a single
   photograph in it, that photograph stretches to fill the whole row. On the
   Real Weddings page this is why the beach arbor picture was appearing many
   times larger than everything around it: Beach Weddings has seven photos, so
   the rows come out as 3, 3 and then 1 on its own.

   Switching to a grid fixes it. Every photograph now occupies exactly one
   column whether or not its row is full. Nothing is cropped, stretched or
   resized - each picture keeps its own natural shape and its own height, which
   is how the Google Site looks.
   ------------------------------------------------------------------------- */
.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.wp-block-gallery.has-nested-images.columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.wp-block-gallery.has-nested-images.columns-1 {
	grid-template-columns: 1fr;
}

/* Undo the widths flexbox had applied to each photograph. */
.wp-block-gallery.has-nested-images figure.wp-block-image {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	flex: none !important;
}

/* Each picture fills its column and keeps its own proportions. */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* Tablets: three across becomes two. */
@media (max-width: 900px) {
	.wp-block-gallery.has-nested-images,
	.wp-block-gallery.has-nested-images.columns-3 {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}

/* Phones: one photograph at a time, full width. */
@media (max-width: 599px) {
	.wp-block-gallery.has-nested-images,
	.wp-block-gallery.has-nested-images.columns-2,
	.wp-block-gallery.has-nested-images.columns-3 {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}



/* -------------------------------------------------------------------------
   5. READING MEASURE
   The containers are wider now so galleries, service cards and reviews fill
   the screen properly. Long paragraphs must NOT get that wide or they become
   tiring to read, so plain running text keeps a sensible line length and sits
   centred inside the wider container. Galleries, columns and images are not
   affected and use the full width.
   ------------------------------------------------------------------------- */
.wp-block-post-content > p,
.wp-block-post-content > .wp-block-list {
	max-width: 70ch;
	margin-inline: auto;
}


/* -------------------------------------------------------------------------
   6. ACCESSIBILITY - FOCUS STATES
   Someone using a keyboard instead of a mouse needs to see where they are.
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid #7A1F46;
	outline-offset: 3px;
	border-radius: 2px;
}

/* On the burgundy bar and over hero photographs a burgundy outline would be
   invisible, so it switches to white. */
.fbf-header a:focus-visible,
.fbf-header button:focus-visible,
.fbf-hero a:focus-visible,
.fbf-hero .wp-block-button__link:focus-visible {
	outline-color: #ffffff;
}


/* -------------------------------------------------------------------------
   7. BUTTONS
   Restrained on purpose - burgundy fill, gentle rounding, no shadow, no
   animation - but the wording is large enough to read at normal zoom.
   ------------------------------------------------------------------------- */
.wp-block-button__link {
	border-radius: 3px;
	padding: 0.9em 2.1em;
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
	letter-spacing: 0.01em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Outline buttons sitting on top of hero photographs. */
.fbf-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid #ffffff;
	color: #ffffff;
}

.fbf-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #ffffff;
	color: #7A1F46;
}

/* The outline Call button on the consultation page reads burgundy on white. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid #7A1F46;
	color: #7A1F46;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #7A1F46;
	color: #ffffff;
}


/* -------------------------------------------------------------------------
   8. QUOTES - THE STRAY VERTICAL LINE
   WordPress draws a decorative bar down the left of every quote block. The
   approved design has no such bar, on the pull quote or on the reviews.
   Earlier versions tried to switch it off but lost the specificity contest
   against the theme's own styles, which is where that stray line came from.
   Written this way it wins.
   ------------------------------------------------------------------------- */
blockquote.wp-block-quote.fbf-pullquote,
blockquote.wp-block-quote.fbf-testimonial,
.wp-block-quote.fbf-pullquote,
.wp-block-quote.fbf-testimonial {
	border: 0 !important;
	border-left: 0 !important;
	border-inline-start: 0 !important;
	padding: 0 !important;
	padding-left: 0 !important;
	padding-inline-start: 0 !important;
	margin-left: 0;
	font-style: normal;
}


/* -------------------------------------------------------------------------
   9. THE "EVERY WEDDING IS UNIQUE" PULL QUOTE
   Same wording, presented deliberately: centred, a comfortable reading width,
   set a little larger than body copy, with a restrained burgundy flourish
   above it instead of the stray bar down the side.
   ------------------------------------------------------------------------- */
.fbf-pullquote {
	max-width: 46rem;
	margin-inline: auto;
	padding-top: 1.75rem !important;
	text-align: center;
}

.fbf-pullquote::before {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin: 0 auto 1.5rem;
	background-color: rgba(122, 31, 70, 0.45);
}

.fbf-pullquote p {
	font-style: normal;
	font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
	line-height: 1.65;
	color: #4a3540;
}


/* -------------------------------------------------------------------------
   10. TESTIMONIALS
   Every review and every name is exactly as written. What changes is the
   presentation: full body size, generous line spacing, the reviewer's name
   clearly separated in burgundy, and the three columns pinned to the top of
   their row so each quotation stays with its name.
   ------------------------------------------------------------------------- */
.fbf-testimonial p {
	font-size: inherit;
	line-height: 1.75;
}

.fbf-testimonial cite {
	display: block;
	margin-top: 0.9rem;
	font-style: normal;
	font-weight: 600;
	font-size: 1.05em;
	color: #7A1F46;
}

/* Reviews sit in rows of three. Pinning them to the top of the row keeps each
   quotation and its name together instead of drifting apart. */
.wp-block-columns:not(.is-not-stacked-on-mobile) {
	align-items: flex-start;
}

/* A little more air between the three columns so they read as separate cards
   rather than one block of text. */
@media (min-width: 782px) {
	.wp-block-columns.is-layout-flex {
		gap: 2.75rem;
	}
}


/* -------------------------------------------------------------------------
   11. THE "WHY COUPLES CHOOSE US" LIST
   Each line starts with a flower, so the normal round bullet is switched off
   to avoid two markers per line. It is still a proper list underneath, which
   is what screen readers and search engines need.
   ------------------------------------------------------------------------- */
.fbf-benefits {
	list-style: none;
	padding-left: 0;
	max-width: 44rem;
	margin-inline: auto;
}

.fbf-benefits li {
	margin-bottom: 0.8rem;
	line-height: 1.65;
}


/* -------------------------------------------------------------------------
   12. SERVICE CARDS
   Bridal Bouquets, Ceremony & Reception Flowers and Wedding Party Flowers.

   The three photographs must line up at exactly the same height. The source
   images are different shapes - one of them is much smaller than the other
   two - so the height is fixed here and each picture fills its frame from the
   centre. The image files themselves are untouched; this only controls how
   much of each one is shown on screen.
   ------------------------------------------------------------------------- */
.wp-block-columns .fbf-service-card,
.fbf-service-card {
	margin: 0 !important;
}

.wp-block-columns .fbf-service-card img,
.fbf-service-card img {
	aspect-ratio: 4 / 3 !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
	border-radius: 2px;
}

.wp-block-columns .fbf-service-card + .wp-block-heading {
	margin-top: 1.2rem;
	margin-bottom: 0.55rem;
}

/* The description under each service heading. */
.wp-block-columns .fbf-service-card ~ p {
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.65;
	max-width: 36ch;
	margin-inline: auto;
}


/* -------------------------------------------------------------------------
   13. VISIT OUR SHOP - the contact panel on the consultation page
   Same wording, same photograph, same links - presented as a deliberate panel
   rather than small plain text beside a picture. The business name is burgundy
   Lora, the address is comfortably sized, the opening hours are set apart, and
   both buttons are easy to see and to tap.
   ------------------------------------------------------------------------- */
.fbf-page-schedule-a-consultation .wp-block-columns .wp-block-column p {
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
	line-height: 1.8;
}

/* The business name, the only bold text in that column. */
.fbf-page-schedule-a-consultation .wp-block-columns .wp-block-column p strong {
	display: inline-block;
	margin-bottom: 0.2rem;
	font-size: 1.3em;
	font-weight: 400;
	font-family: var(--wp--preset--font-family--heading);
	color: #7A1F46;
}

/* The opening-hours line, set apart with a soft burgundy rule above it. */
.fbf-page-schedule-a-consultation .wp-block-columns .wp-block-column p:nth-of-type(2) {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(122, 31, 70, 0.22);
}

/* Buttons stack and fill the column so they are easy to see and to tap. */
.fbf-page-schedule-a-consultation .wp-block-buttons {
	margin-top: 1.6rem;
	gap: 0.8rem;
}

.fbf-page-schedule-a-consultation .wp-block-buttons .wp-block-button {
	width: 100%;
	max-width: 22rem;
}

.fbf-page-schedule-a-consultation .wp-block-buttons .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* Give the photograph and the details room to breathe side by side. */
@media (min-width: 782px) {
	.fbf-page-schedule-a-consultation .wp-block-columns {
		gap: 3.5rem;
		align-items: center;
	}
}

/* On a phone the photograph and the details stack, so centre them together. */
@media (max-width: 781px) {
	.fbf-page-schedule-a-consultation .wp-block-columns .wp-block-column {
		text-align: center;
	}
	.fbf-page-schedule-a-consultation .wp-block-buttons .wp-block-button {
		max-width: none;
	}
	.fbf-page-schedule-a-consultation .wp-block-buttons {
		justify-content: center;
	}
}


/* -------------------------------------------------------------------------
   14. FOOTER
   The consultation call to action at the bottom of every page. It is included
   explicitly by the theme's page template now, so it can no longer go missing.
   ------------------------------------------------------------------------- */
.wp-site-blocks > footer,
footer.wp-block-template-part {
	margin-top: 0;
}

.wp-site-blocks > footer p,
footer.wp-block-template-part p {
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.7;
}


/* -------------------------------------------------------------------------
   15. VERTICAL SPACING
   The gaps between sections were generous on a large screen and far too big on
   a small one. The spacer blocks are part of the page content, so rather than
   editing every page they are simply capped on narrower screens.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.wp-block-spacer {
		height: 2rem !important;
	}
}

@media (max-width: 599px) {
	.wp-block-spacer {
		height: 1.5rem !important;
	}
}

/* Columns that stack on a phone should not leave a canyon between them. */
@media (max-width: 781px) {
	.wp-block-columns.is-layout-flex {
		gap: 1.5rem;
	}
}


/* -------------------------------------------------------------------------
   16. IMAGES NEVER OVERFLOW
   A safety net so no photograph can push the page sideways on a phone.
   ------------------------------------------------------------------------- */
img {
	max-width: 100%;
	height: auto;
}


/* -------------------------------------------------------------------------
   17. PRINT
   Someone printing the consultation page should get the address and phone
   number, not the photographs.
   ------------------------------------------------------------------------- */
@media print {
	.fbf-hero,
	.wp-block-gallery {
		display: none !important;
	}
}


/* -------------------------------------------------------------------------
   18. CUSTOMER REVIEWS - NATURAL FLOW, NO BLANK HOLES
   The reviews used to sit in three rows of three. In a row every column is
   as tall as the tallest review in it, so a two-line review placed beside a
   fifteen-line review was given a fifteen-line-tall box. That is where the
   large empty areas came from - it was the structure, not the styling.

   Once the nine reviews live in a single group carrying the class
   "fbf-reviews" (see the separate instructions), this flows them down the
   page in columns instead. Each review takes only the height it needs, and
   the next one starts immediately underneath. No review is shortened,
   combined or reworded, and each one remains an ordinary Quote block that
   can be clicked and edited in WordPress.

   Three columns on a desktop, two on a tablet, one on a phone.
   ------------------------------------------------------------------------- */
.fbf-reviews {
	columns: 3;
	column-gap: 2.75rem;
	max-width: 100%;
}

.fbf-reviews > .wp-block-quote,
.fbf-reviews > blockquote {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	display: block;
	width: 100%;
	margin: 0 0 2.25rem;
}

@media (max-width: 900px) {
	.fbf-reviews {
		columns: 2;
		column-gap: 2rem;
	}
}

@media (max-width: 599px) {
	.fbf-reviews {
		columns: 1;
	}
}

/* If the reviews have not been consolidated yet, the old three-row layout
   still works - it simply keeps the taller gaps until the change is made. */


/* -------------------------------------------------------------------------
   19. THE WHITE STRIP ABOVE THE HERO ON THE INTERIOR PAGES
   Real Weddings and Schedule a Consultation showed a band of white between the
   maroon header and the hero photograph. Home did not. Measured on the live
   site, the difference is structural:

     Home            main > post-content > cover                (no gap)
     Interior pages  main > GROUP > post-content > cover        (68px gap)

   The interior pages use the Pages template, which wraps the content in an
   extra group. That group carries
       padding-top: var(--wp--preset--spacing--60)
   which measures 67.62px on a desktop and 30px on a phone - exactly the strip.
   Home uses the Front Page template, which has no such group, which is why it
   never had the gap.

   Only the TOP padding is removed. The bottom padding is left alone, because
   that is what separates the last section from the footer call to action.

   The :has() part means this can only ever match a group that actually wraps
   the page content. Home has no such element, so Home cannot be affected by
   this rule - verified on the live site.
   ------------------------------------------------------------------------- */
main.wp-block-group > .wp-block-group.is-layout-flow:has(> .wp-block-post-content) {
	padding-top: 0 !important;
}