@charset "UTF-8";

/*
Theme Name: filmprod2026
Theme URI:
Author: Sergio Menegassi
Author URI:
Description: a new block theme for Film Productions services Brazil
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: filmprod2026
Tags:
*/

/**
 * Presentation rules that cannot be expressed as theme.json tokens.
 *
 * Everything else — palette, typography scale, element styles, gradients —
 * lives in theme.json. This file holds only the reel grid, the small-caps
 * treatments, the embed sizing and the two media queries the reference
 * design actually uses (768px and 1200px) — plus one at 781px, which is not a
 * design breakpoint but core's own columns-stacking point, matched exactly so
 * the client list hands over to core without a gap.
 *
 * @package filmprod2026
 * @author  Sergio Menegassi
 * @license GPL-2.0-or-later
 */

/* ==========================================================================
   Base
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/**
 * Sticky footer
 *
 * Short pages (Contact, a 404) left the footer floating mid-screen with blank
 * white below it. `.wp-site-blocks` is the only wrapper that holds the header
 * part, <main> and the footer part as siblings, so it becomes the flex column
 * and the last child — the footer template part — absorbs the free space.
 *
 * Targeting :last-child rather than a class keeps this working for every
 * template without editing four template files.
 *
 * dvh follows the mobile URL bar; the vh line is the fallback for browsers
 * that do not know the unit and must come first.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > .wp-block-template-part:last-child {
	margin-top: auto;
}

/* The admin bar is outside .wp-site-blocks, so its height has to come off the
   target or logged-in views gain a scrollbar on pages that otherwise fit. */
body.admin-bar .wp-site-blocks {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}

/* Replaces the page-scroll-to-id plugin. The offset keeps an anchor target
   clear of the sticky navigation. */
html {
	scroll-behavior: smooth;
}

:target,
[id] {
	scroll-margin-top: var(--wp--custom--layout--scroll-offset);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* theme.json sets the link color; opacity on hover is not a theme.json style. */
a:where(:not(.wp-element-button)):hover {
	opacity: 0.5;
}

/* ==========================================================================
   Site header and identity
   ========================================================================== */

/* The reference pads its content wrapper, not the page root, so the social bar
   and header sit flush to the top of the viewport. */
.site-inner {
	padding-top: var(--wp--custom--spacing--inner-y);
	padding-bottom: var(--wp--custom--spacing--inner-y);
}

.site-header {
	padding-top: var(--wp--custom--spacing--inner-y);
	padding-bottom: var(--wp--custom--spacing--inner-y);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Reference: .socialheader.socialmenu { height: 60px } */
.social-bar {
	display: flex;
	align-items: center;
	min-height: 60px;
}

.title-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
}

/**
 * Small-caps emulation
 *
 * The reference uses `font-variant-caps` on the site title and the navigation.
 * That cannot be reproduced directly: the bundled Montserrat is a VARIABLE font
 * with no `smcp` / `pcap` OpenType features, so the browser synthesizes the
 * variant by uppercasing at near-full size — which makes the text *wider*
 * (740px vs 702px on the title). The reference's static Google Montserrat
 * synthesizes properly and compacts it to 583px.
 *
 * Emulated instead with `text-transform: uppercase` at a reduced size, which is
 * deterministic and does not depend on font features or browser synthesis.
 *
 * Weight is 600, not the 700 the reference's CSS asks for: that stylesheet
 * loads only 100/300/400/600, so 700 never existed and the title has always
 * rendered at 600. Matching what is on screen, not what the CSS requested.
 */

/* The site title is an <h1>, so without an explicit size it inherits the h1
   element style from theme.json. The reference keeps it at 16px until 1200px. */
.wp-block-site-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--site-title);
	font-weight: 600;
	line-height: 1.2;
}

.wp-block-site-title a {
	text-decoration: none;
}

/* Reference: .site-header .site-image img { width: 40% } → 14% at >=1200px. */
.site-header .wp-block-site-logo,
.site-header .wp-block-site-logo a {
	display: block;
	width: 100%;
}

/* No max-width: the reference renders 40% of the header, which exceeds the
   file's natural 251px on tablets. Matching it — a 2x display still has ample
   device pixels for the upscale. */
.site-header .wp-block-site-logo img {
	width: var(--wp--custom--layout--logo-width-mobile);
	height: auto;
	margin: var(--wp--custom--spacing--inner-y) auto;
}

.wp-block-site-tagline {
	margin: 0;
}

/* Social bar — the reference's #2d2d2d strip above the header. The inner group
   must span the full constrained width, or the constrained layout's auto
   margins centre it and its own right-justification has nothing to push
   against. */
.social-bar__inner {
	width: 100%;
	gap: var(--wp--custom--spacing--grid-gap);
}

.social-bar__phone {
	margin: 0;
}

.social-bar .wp-block-social-links {
	margin: 0;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav-primary {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Reference: .genesis-nav-menu { line-height: 1; font-variant-caps: all-small-caps }.
   Emulated with uppercase at 0.8em — the scale browsers use for synthesized
   small caps. See the small-caps note above.
   The :not() matters: WordPress puts BOTH `wp-block-navigation` and
   `wp-block-navigation__container` on the same <ul>, so an unscoped `em` here
   compounds and the labels come out at 0.8² of the intended size. */
.wp-block-navigation:not(.wp-block-navigation__container) {
	text-transform: uppercase;
	font-size: 0.8em;
	line-height: 1;
}


.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

/* ==========================================================================
   Navigation — force the overlay below 1200px
   The Navigation block switches to its overlay at WordPress's own 600px
   breakpoint, but the reference collapses the entire site at 1200px. Without
   this, every width from 600–1199px — which is every iPad — renders the full
   horizontal menu squashed into ~20px with no padding.
   !important is required to beat core's own responsive stylesheet.
   ========================================================================== */

@media (max-width: 1199px) {
	.nav-primary {
		padding-top: var(--wp--custom--spacing--inner-y);
		padding-bottom: var(--wp--custom--spacing--inner-y);
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		margin: 0 auto;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	/* Opened overlay. Reference: .genesis-nav-menu a { display:block;
	   padding:20px 10px; text-align:left; border-bottom:1px solid #ddd }.
	   !important on padding is required — core's own overlay rule zeroes it at
	   a higher specificity than a theme selector can reach. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		gap: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}

	/* Core caps the overlay's inner wrapper at --wp--style--global--wide-size
	   (1120px here) and centres it with auto margins. From 1121px to 1199px
	   that inset the wrapper ~40px BEFORE the padding below was added, landing
	   the labels at 80px while the page content beside them sat at 40px. The
	   overlay is a full-screen modal, so let it span the viewport and leave the
	   padding as the only gutter — that is what keeps the two in step. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		max-width: none;
	}

	/* box-sizing is NOT border-box here: neither core nor this theme sets a
	   universal reset, so `width: 100%` + horizontal padding made the link
	   20px wider than its <li>. The centred flex context then split the
	   overflow evenly, pulling the link to -10px and putting the label hard
	   against the left edge of the screen — the padding was there, just
	   outside the viewport. border-box keeps the link exactly one row wide so
	   the padding reads as the gutter it is meant to be.

	   The horizontal padding tracks the ROOT padding rather than --inner-x, so
	   the open menu lines up with the page content at whatever width it is
	   read: 1rem on phones, 40px from 768px up. The overlay is forced on all
	   the way to 1199px, so without this the labels would sit at 1rem on an
	   iPad while the content beside them sat at 40px. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		box-sizing: border-box;
		width: 100%;
		padding:
			var(--wp--custom--spacing--inner-y)
			var(--wp--style--root--padding-right)
			var(--wp--custom--spacing--inner-y)
			var(--wp--style--root--padding-left) !important;
		text-align: left;
		line-height: 1.5;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
}

/* ==========================================================================
   Heading style variations
   Registered in functions.php with name + label only; the CSS lives here so
   one rule covers every instance. See register_block_styles().
   ========================================================================== */

.is-style-sub-titre {
	color: var(--wp--preset--color--accent);
	font-weight: 300;
}

.is-style-titre-portfolio {
	color: var(--wp--preset--color--heading);
	font-weight: 300;
	text-transform: uppercase;
}

/* ==========================================================================
   Reel card fields
   ========================================================================== */

.reel-field-client {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--tiny);
}

.reel-info p {
	margin: 0;
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.5;
}

.reel-info p:empty {
	display: none;
}

.reel-video {
	margin: var(--wp--custom--spacing--card-padding) 0 0;
}

/* ==========================================================================
   Accent gradient — the reference's .degrade rule
   ========================================================================== */

.degrade {
	width: 70%;
	height: 1px;
	background: var(--wp--preset--gradient--degrade);
}

/* ==========================================================================
   Client list — two columns on small screens

   The page is a core/columns of three paragraphs of <br>-separated names.
   Core stacks .wp-block-column to full width at max-width:781px, which turned
   the list into three tall single-file runs — ~1900px of scrolling at 375px.

   Replaced with a CSS multi-column flow: the columns block becomes a plain
   block box so column-count can take over, and the three paragraphs pour into
   two balanced columns as one continuous list rather than three separate ones.

   781px is core's stacking breakpoint, not one of the reference's two
   (768/1200). It has to match core's exactly or the 768–781px band would fall
   between the rules and render the stacked full-width version.

   The preset font-size utility class is emitted with !important, so overriding
   `small` with `tiny` here requires !important too.
   ========================================================================== */

@media (max-width: 781px) {
	/* Compound selector, not a bare .client-list: core's `.wp-block-columns
	   { display: flex }` has the same specificity and the block library
	   stylesheet loads after the theme's, so an equal-specificity rule loses
	   on source order. column-count and the !important font-size landed while
	   display silently did not — the symptom was a correctly-sized list still
	   in one column. */
	.wp-block-columns.client-list {
		display: block;
		column-count: 2;
		column-gap: var(--wp--custom--spacing--grid-gap);
	}

	/* Let a paragraph split across the column break — otherwise each of the
	   three is kept whole and the balance is thrown off. */
	.client-list .wp-block-column,
	.client-list p {
		break-inside: auto;
	}

	.client-list p {
		font-size: var(--wp--preset--font-size--tiny) !important;
		line-height: 1.6;
	}
}

/* ==========================================================================
   Reel grid
   The grid must target the Post Template <ul>, not the outer .wp-block-query.
   ========================================================================== */

.reel-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--custom--spacing--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.reel-grid .wp-block-post-template > li {
	margin: 0;
}

.reel-card {
	padding: var(--wp--custom--spacing--card-padding);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.reel-card h3,
.reel-card .client {
	font-size: var(--wp--preset--font-size--tiny);
	margin-top: 0;
}

/* ==========================================================================
   Locations page — anchor sidebar
   Hidden below 1200px, matching the reference, where the whole page collapses
   to a single stacked column.
   ========================================================================== */

.sidebar-primary {
	display: none;
}

.content-sidebar-wrap .content {
	flex-basis: 100% !important;
}

.sidebar-primary .wp-block-navigation {
	font-variant-caps: normal;
}

/* ==========================================================================
   Responsive video embeds
   ========================================================================== */

.embed-container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   Animation element
   ========================================================================== */

.animation-element {
	border-bottom: 0.5px solid var(--wp--preset--color--gray);
}

.animation-element p {
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.5;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	max-width: var(--wp--custom--layout--max-width);
	border-top: 1px solid var(--wp--preset--color--footer-border);
	font-size: 0.6em;
}

/* ==========================================================================
   Tablet — 768px
   ========================================================================== */

@media (min-width: 768px) {
	/* Horizontal only — vertical padding belongs to .site-inner and
	   .site-header, so the social bar stays flush to the top of the page. */
	body {
		--wp--style--root--padding-right: var(--wp--custom--spacing--inner-wide);
		--wp--style--root--padding-left: var(--wp--custom--spacing--inner-wide);
	}
}

/* ==========================================================================
   Desktop — 1200px
   Below this width the reference collapses to a single stacked column.
   ========================================================================== */

@media (min-width: 1200px) {
	h1,
	.wp-block-post-title {
		line-height: 1.05;
	}

	.wp-block-site-title {
		font-size: 1.75rem;
		text-transform: uppercase;
	}

	.site-header,
	.site-inner {
		padding-top: var(--wp--custom--spacing--inner-wide);
		padding-bottom: var(--wp--custom--spacing--inner-wide);
	}

	.site-header .wp-block-site-logo img {
		width: var(--wp--custom--layout--logo-width);
	}

	/* Reference: .genesis-nav-menu .menu-item > a { padding: 20px }. The full
	   20px fits now that the labels are no longer widened by synthesized
	   small-caps. */
	.wp-block-navigation .wp-block-navigation-item__content {
		padding: var(--wp--custom--spacing--inner-y);
	}

	.nav-primary .wp-block-navigation {
		gap: 0;
	}

	/* Counterpart to the max-width block above: restore the inline menu and
	   hide the hamburger at the reference's own breakpoint. */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
	}

	.reel-grid .wp-block-post-template {
		grid-template-columns: repeat(var(--wp--custom--reel--columns), 1fr);
	}

	/* Replaces the sticky-menu-or-anything-on-scroll plugin. The reference's
	   own stylesheet already did this in CSS — the plugin was redundant.
	   Reference: .nav-primary { padding: 20px; position: sticky; top: 0 } */
	.nav-primary {
		padding-top: var(--wp--custom--spacing--inner-y);
		padding-bottom: var(--wp--custom--spacing--inner-y);
		position: sticky;
		top: 0;
		z-index: 3;
		background-color: var(--wp--preset--color--base);
	}

	/* Locations page — content plus the anchor sidebar. The 16px gap makes
	   70% + 320px land exactly on the reference's column widths. */
	.content-sidebar-wrap {
		gap: var(--wp--custom--spacing--sidebar-gap);
	}

	/* The sidebar only exists at this width on the reference. */
	.sidebar-primary {
		display: block;
		position: sticky;
		top: var(--wp--custom--layout--scroll-offset);
		align-self: flex-start;
	}

	/* Two-column page layout (Q3) — driven by a core/group className,
	   replacing the reference's _genesis_custom_body_class post meta. */
	.grid-2columns {
		display: grid;
		grid-template-columns: 1fr 2fr;
		align-items: self-start;
		gap: 10px 60px;
	}

	.grid-2columns .about-titre {
		grid-column: 1;
	}

	.grid-2columns .about-texte {
		grid-column: 2;
	}

	/* !important is required to beat the inline flex-basis core writes on a
	   column block. */
	.content-sidebar-wrap .content {
		flex-basis: var(--wp--custom--layout--content-width) !important;
	}
}