/*
Theme Name: Brazfilms
Theme URI:
Author: Sergio Menegassi
Author URI:
Description: a new block theme for Brazilfilms
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 5.7
Version: 1.0.14
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brazfilms
Tags:
*/

/*
 * Header — dark utility bar above a light gray band holding the logo,
 * tagline, a divider, and the nav. Colors verified against the live
 * reference site's computed styles (clone-brazilfilms.test).
 */
.top-bar {
	background-color: #171717;
	padding: 0.5rem 5rem;
}

.top-bar a,
.top-bar p {
	color: #fff;
}

.top-bar .wp-block-group {
	width: 100%;
	justify-content: flex-end;
}

.site-header-band {
	background-color: #cccccc;
	padding: 2rem 5rem 1rem;
}

/*
 * The logo image is dark "brazil" + near-white "films" baked into one
 * PNG — it only reads correctly against the gray band background.
 */
.header-logo img {
	width: auto;
	max-width: 100%;
}

.header-tagline {
	font-size: 0.875rem;
	color: #333;
	margin-top: 0.5rem;
}

.header-divider {
	margin: 1.5rem 0 0.5rem;
	border-top: 1px solid rgba( 0, 0, 0, 0.15 );
}

.header-nav a {
	color: #333;
	font-size: 15px;
	text-decoration: none;
}

.header-nav a:hover {
	text-decoration: underline;
}

/*
 * Active nav item, matching the reference site's Genesis menu
 * (`.genesis-nav-menu .current-menu-item > a { font-weight: bold }`).
 * Core's Navigation block already marks the current page's link with
 * `aria-current="page"` on the front end (verified in a live tab) — no
 * markup change needed, just style the existing attribute.
 */
.header-nav a[aria-current='page'] {
	font-weight: 700;
}

.header-nav .wp-block-navigation-item__content {
	padding: 12px 10px 12px 0;
}

/*
 * Mobile header + nav — matches clone-brazilfilms.test's behavior: the
 * "hamburger" toggle sits centered in the header, and opening it expands
 * the menu in place (pushing the rest of the page down, scrollable),
 * instead of covering the whole screen like a separate page.
 *
 * Below 600px (core's own breakpoint for switching the Navigation block to
 * its hamburger toggle, see wp-includes/blocks/navigation/style.min.css)
 * the block collapses to two separate DOM elements sharing the same
 * `.header-nav` class: the always-present `<nav>` wrapper holding the
 * closed toggle button (a row flex container, "items-justified-left" per
 * the block's own layout setting), and a `<ul>` copy of the menu items
 * inside the opened panel (a column flex container). Both need centering,
 * on different axes, so they're targeted separately by tag rather than
 * fighting the shared class.
 */
@media ( max-width: 599px ) {
	/*
	 * The header's desktop 5rem side padding left almost no room on real
	 * phone widths (80px each side eats over a third of a 375px screen),
	 * which is what was actually throwing the toggle's centering off in a
	 * real browser — reference site drops its own header side padding to
	 * 0 at this width for the same reason.
	 */
	.top-bar,
	.site-header-band {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	nav.header-nav {
		width: 100%;
		justify-content: center;
	}

	.wp-block-navigation__responsive-container-content ul.header-nav {
		align-items: center !important;
	}

	/*
	 * Core's Navigation block opens its mobile menu as a `position:fixed`
	 * full-viewport overlay (`.is-menu-open`) with a top-right close X and
	 * `html.has-modal-open{overflow:hidden}` trapping scroll — reads as a
	 * separate full-screen page. Un-fixing it turns the exact same markup
	 * into an ordinary in-flow panel that pushes the page content down, and
	 * un-trapping scroll lets the visitor just scroll to see it, matching
	 * the reference site's classic accordion-style dropdown. `!important`
	 * throughout because these are core's own layout-critical rules.
	 */
	html.has-modal-open {
		overflow: visible !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		position: static !important;
		inset: auto !important;
		z-index: auto !important;
		padding: 1rem !important;
		background-color: transparent !important;
	}

	/*
	 * The closed-state "☰" toggle button was never actually hidden while
	 * the menu is open - it was only ever visually covered by the old
	 * full-screen overlay sitting on top of it. Now that the panel is a
	 * small in-flow box instead of a full-screen cover, the toggle button
	 * shows through next to it unless explicitly hidden here. The two are
	 * siblings (the toggle button's next sibling is the container), so
	 * `:has(+ ...)` is needed since CSS can't target a previous sibling
	 * directly.
	 */
	.wp-block-navigation__responsive-container-open:has(
			+ .wp-block-navigation__responsive-container.is-menu-open
		) {
		display: none !important;
	}

	.wp-block-navigation__responsive-container-close {
		position: static !important;
		margin-left: auto;
	}

	/*
	 * Footer credits row ("PRODUCTION HUB" / "CLUTCH" / "KFTV" / etc., 5
	 * links) is a deliberate `flexWrap:"nowrap"` single-row layout (ported
	 * from a Site Editor edit, see the 2026-09-03 footer entry) — fine on
	 * desktop, but nowrap forces all 5 links onto one unbreakable line no
	 * matter how narrow the screen, so on phone widths the row is wider
	 * than the viewport and forces real page-wide horizontal scroll.
	 * Confirmed live: this is present on every page (footer.html is a
	 * template part), independent of any other bug on a given page — it
	 * was the actual remaining cause of a reported lightbox "overflow" on
	 * Film Locations, since any real horizontal overflow anywhere on the
	 * page is what let the page scroll out from under the lightbox's
	 * viewport-fixed black canvas. `!important` to beat core's own
	 * generated `flex-wrap:nowrap` rule for this block's layout.
	 */
	.footer-widgets {
		flex-wrap: wrap !important;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/*
 * Footer — "As featured in" links band, verified against the reference
 * site's .footer-widgets computed background (#eaeaea).
 */
.footer-widgets {
	background-color: #eaeaea;
	padding: 3rem 5rem;
}

/*
 * Reel grid — Company Reels page's Client/Commercial/Corporate card rows.
 * Fixed at 4 columns on desktop, stepping down on narrower screens so
 * cards don't get too cramped.
 *
 * The grid has to target the Post Template block's own <ul>, not the
 * .wp-block-query wrapper .reel-grid sits on — that wrapper only ever has
 * one direct child (the <ul>), so applying display:grid to it directly
 * produces a single-column layout no matter how many posts are looped.
 */
.reel-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1rem;
	margin-bottom: 3rem;
	list-style: none;
	padding: 0;
}

@media ( max-width: 900px ) {
	.reel-grid .wp-block-post-template {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/*
 * Page layout — breathing room above the content, matching the reference
 * site's `.site-inner{padding-top:60px}` (clone-brazilfilms.test). Scoped to
 * the `<main>` tag only, not `.wp-block-group` generally, so header/footer
 * (also built from wp-block-group markup) are unaffected.
 */
main {
	/* padding-top: 60px; */
	padding: 2rem 5rem;
}

	@media ( max-width: 600px ) {
	main {
		padding:2rem 3rem;
	}
}

/*
 * "You are here:" breadcrumb, ported from genesis-sample/style.css to match
 * clone-brazilfilms.test exactly. Markup comes from the `brazfilms_breadcrumb`
 * shortcode in functions.php.
 */
.breadcrumb {
	font-size: 14px;
	margin-bottom: 20px;
	padding-bottom: 10px;
}

.breadcrumb-link {
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

@media ( max-width: 600px ) {
	.reel-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

.reel-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 0 1 280px;
	max-width: 280px;
	text-align: left !important;
}

/*
 * .reel-card is auto-classed "is-layout-constrained" by core (default group
 * layout), which ships its own `:root :where(.is-layout-constrained) > *`
 * rule adding 24px margin-block-start to every child. That :where() has
 * zero specificity so margin:0 here fully overrides it, but without it the
 * 24px stacks on top of .reel-card's own flex `gap`, making the visible
 * space between fields much bigger than the gap value alone suggests.
 */
.reel-field {
	line-height: 1.2 !important;
	text-align: left !important;
	margin: 0 !important;
}

.reel-card img {
	width: 100%;
	height: auto;
}

/*
 * Reel video — responsive embed sizing, ported from core's own
 * wp-includes/blocks/embed/style.css. The Reel video placeholder is
 * authored as core/html (see functions.php's render_block_core/html
 * filter), not core/embed, so its markup reuses core/embed's classNames
 * (wp-block-embed, wp-has-aspect-ratio, wp-embed-aspect-16-9) but WP never
 * enqueues core/embed's own stylesheet — that's only loaded when a real
 * core/embed block is present in post_content, and this page has none.
 * Without this, the oEmbed iframe's hard-coded width/height HTML
 * attributes (e.g. 500x281 from the provider) render at literal pixel
 * size instead of shrinking to the .reel-card column, overflowing it.
 *
 * The explicit width:100% on .wp-block-embed itself is needed because
 * .reel-card is a column flex container relying on align-items:stretch
 * to size its children — but once the iframe is pulled out of normal
 * flow (position:absolute, below), the figure has no in-flow content
 * left to stretch against and collapses to 0 width instead.
 */

 .wp-block-heading {
    background-color: lightgray;
    padding: 1rem;
}

 h3.wp-block-heading {
    background-color: transparent;
    padding: 1rem;
}

/* Homepage "Feature Films" heading sits on its own colored column background — the sitewide gray heading fill isn't wanted here. */
#h-feature-films,
#h-tv-clients,
#h-commercial-films,
#h-corporate-clients,
#h-the-process,
#h-local-producer,
#h-permit-film,
#h-films-produced,
#h-films-serviced{
	background-color: transparent;
}

/* Contact Us page headings sit directly on the page background — the sitewide gray heading fill isn't wanted here. */
#h-filming-in-brazil,
#h-contact-us,
#h-respond-quickly {
	background-color: transparent;
}

/*
 * Homepage — the "testimonials" intro paragraph sits right under the
 * Vimeo video above it and should read as its caption. Default block
 * spacing (the flow layout's own top margin on each child) puts visible
 * space between them; margin-top:0 pulls it flush.
 */
.testimonials {
	margin-top: 0 !important;
}

.wp-block-embed {
	width: 100%;
	margin: 0;
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed iframe {
	max-width: 100%;
}

.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper::before {
	content: "";
	display: block;
	padding-top: 50%;
}

.wp-embed-responsive .wp-has-aspect-ratio iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
	padding-top: 56.25%;
}

.reel-field-client {
	font-weight: 700;
	text-align: left;
	font-size: var( --wp--preset--font-size--medium );
}

.reel-field-location::before {
	content: "Location: ";
	font-weight: 700;
}

.reel-field-agency::before {
	content: "Agency: ";
	font-weight: 700;
}

.reel-field-director::before {
	content: "Director: ";
	font-weight: 700;
}

.reel-field:empty,
.reel-field-location:empty,
.reel-field-agency:empty,
.reel-field-director:empty {
	display: none;
}

/*
 * Reel grid cards, "Reels card" pattern version — the Company Reels grid's
 * Post Template now renders each post's own content (wp:post-content)
 * instead of a separate meta-bound card, so it's the "Reels card" pattern's
 * own .reel-card-main/.reel-info-group structure sitting inside a grid
 * column now, not .reel-card. Sizing rules below mirror .reel-card's
 * (width/left-align/min-width:0 to dodge the same flex/grid min-width
 * collapse this project has hit before — see .wp-block-embed above)
 * rather than the wideSize-driven full-width layout .reel-card-main gets
 * on a single Reel page.
 */
.reel-grid .reel-card-main {
	width: 100%;
	min-width: 0;
	margin: 0;
	text-align: left;
}

.reel-grid .reel-info-group {
	text-align: left;
}

.reel-field-director,
.reel-field-agency,
.reel-field-location,
.reel-field-client {
	margin: 0;
}

.reel-field-description {
	margin-bottom: 0.8rem !important;
	
}

/*
 * Film Locations page — location jump-links list, ported from the old
 * Genesis theme's .list-location rule (genesis-sample/style.css) since
 * the block theme doesn't inherit classic-theme CSS. Same className is
 * already on the wp:list block in post_content, untouched by the migration.
 */
.list-location {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.list-location > li {
	list-style-type: none;
	padding: 0 1rem;
	border-right: 1px solid black;
	margin-top: 1rem;
	line-height: initial;
}

/*
 * Global Styles DB override (wp_global_styles post 3663) sets every link's
 * font-size/weight to the "large" preset (24px/500), which is what wraps
 * this list to 3 rows instead of Genesis's original compact 2. Countering
 * it here, scoped to this list only, rather than touching the sitewide
 * link element style.
 */
.list-location a {
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 700;
}

/*
 * Kept at the same width as the fixed 1360px content column (rather than
 * breaking out wider) so its left AND right edges line up with the
 * breadcrumb and the image gallery below it, instead of overhanging both.
 */

/*
 * Company profile page — gallery captions. Scoped to the gallery's own
 * .gallery-caption className (not the bare .wp-element-caption core uses
 * for every image caption sitewide) so the hover effect stays local to
 * this gallery.
 */

 .gallery-caption .wp-block-image figcaption.wp-element-caption{
	text-align: left !important;
	line-height: 1.2;
	padding: 0 0 1 0!important;
	font-size: var(--wp--preset--font-size--large) !important;
 }
.gallery-caption .wp-block-image figcaption.wp-element-caption {
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	
}

.gallery-caption .wp-block-image:hover figcaption.wp-element-caption {
	opacity: 1;
	transform: translateY(-2px);
}

/*
 * Core's native image lightbox hardcodes its backdrop as white via an inline
 * <style> block it prints in <head> (not the linked wp-includes stylesheet),
 * with no theme.json setting to control it. Same selector/specificity as our
 * override here, so source order alone would let core's inline tag win —
 * !important settles the tie. Overriding in the theme instead of editing
 * core, since core files get overwritten on every WordPress update.
 */
.wp-lightbox-overlay .scrim {
	background-color: #000000 !important;
}

/*
 * Core prints these buttons with an inline style="fill:{color}" attribute
 * (wp-includes/blocks/image.php), set to the theme's global text color
 * (our dark preset) — not `color`, which is why a `color` override here
 * had no effect. Inline styles beat stylesheet rules on specificity alone,
 * so !important is required to win against the inline fill.
 */
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next,
.wp-lightbox-overlay .wp-lightbox-close-button {
	fill: #ffffff !important;
	opacity: 0.6;
	scale: 2;
}

/*
 * On the Film Locations gallery (many core/image blocks inside one
 * `is-cropped columns-4` core Gallery), opening the lightbox on one image
 * leaves core's own "zoom" trigger button on OTHER, still-closed images in
 * the same gallery stuck at its transition start position instead of its
 * resting `right:16px;top:16px` corner — confirmed live via inline style,
 * core's Interactivity API sets `style="right:-175px;top:-175px"` on those
 * buttons and never clears it. `position:absolute` + that offset pushes the
 * button ~350px past its own figure, on narrow viewports far outside the
 * page itself, inflating `document.documentElement.scrollWidth`. Since the
 * lightbox overlay doesn't trap background scroll, this real (if normally
 * invisible) overflow becomes visible the moment the page scrolls even a
 * little — the black lightbox canvas stays viewport-fixed while the actual
 * page peeks out past it, looking like the enlarged image "overflows" its
 * own canvas. Rather than patch core's JS, contain the symptom: a button
 * mispositioned via `right`/`top` this far can never escape its own
 * `position:relative` figure once that figure clips overflow, while the
 * correctly-positioned (in-bounds) button on every other image is
 * unaffected. Verified live: page `scrollWidth` no longer grows when a
 * lightbox is opened.
 */
.wp-lightbox-container {
	overflow: hidden;
}

/*
 * Cropped gallery images (the square "is-cropped" treatment) misaligned
 * into a jagged, uneven grid in Chrome/Brave only — Firefox and Safari
 * rendered the same markup fine. Root cause, confirmed live: core prints
 * `style="aspect-ratio:1;object-fit:cover"` and `class="wp-image-{id}"`
 * directly on the <img> tag, but Imagify (WebP-conversion plugin) wraps
 * non-webp-native images in <picture><source>...<img></picture> for WebP
 * delivery and moves that style/class onto the new <picture> wrapper
 * instead of leaving it on the <img> — confirmed via getComputedStyle in
 * a live tab (the <img>/<source> end up with no class or style at all).
 * `object-fit` only has an effect on replaced elements (img/video/etc.);
 * `<picture>` isn't one, so it's silently a no-op there. Chromium renders
 * the unstyled <img> at its own natural size inside the aspect-ratio:1
 * box Imagify's misplaced style still gives the <picture>; Firefox/Safari
 * happen to stretch the <img> to fill regardless, which is what made this
 * look Chrome/Brave-specific rather than a plain missing-CSS bug.
 *
 * Same class of bug as the earlier Jetpack Tiled Gallery `<picture>` fix
 * (Imagify wrapping breaking a `> img` selector) — different block, same
 * "Imagify's wrapper doesn't carry the styling it should" root cause.
 *
 * First attempt only re-declared `aspect-ratio`/`object-fit` on the <img>
 * with `height:100%` — still broken, and worse, inconsistently: some
 * images landed square, others didn't. Root cause of *that*: `<picture>`
 * itself is a plain block box in Chromium here (not `display:contents`),
 * so its own height still has to resolve somehow before an `<img>` child
 * at `height:100%` can use it — and `<picture>`'s own `aspect-ratio:1`
 * (Imagify's misplaced style, still sitting on `<picture>`) doesn't
 * reliably win against its content's intrinsic ratio for every image, so
 * `<picture>`'s rendered height varied per image, and `height:100%` just
 * propagated that inconsistency onto the `<img>`.
 *
 * Fixed properly by taking `<picture>` out of the box model entirely
 * (`display:contents` — same technique already proven for the Jetpack
 * Tiled Gallery `<picture>` bug) so its own sizing/aspect-ratio can't
 * affect anything, then sizing the `<img>` purely from its own CSS width
 * + `aspect-ratio:1` (no `height:100%`, no dependency on any ancestor's
 * height) — the same self-contained approach that already works
 * correctly for images core never wrapped in `<picture>` at all.
 * `aspect-ratio:1;object-fit:cover` is the only combination core's "crop
 * images" gallery toggle ever generates, so hardcoding it here (rather
 * than trying to mirror an arbitrary inline value) is safe and matches
 * every affected image.
 */
.wp-block-gallery.is-cropped figure.wp-block-image picture {
	display: contents;
}

.wp-block-gallery.is-cropped figure.wp-block-image picture > img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}