/*
Theme Name: Festival Gluten Free
Theme URI: https://festivalglutenfree.com
Description: Child theme de Twenty Twenty-Five para Festival Gluten Free (WordPress + WooCommerce).
Author: Festival Gluten Free
Template: twentytwentyfive
Version: 1.0.1
Requires at least: 6.7
Requires PHP: 7.2
Text Domain: festivalglutenfree-child
*/

/* Sticky footer: keeps the footer pinned to the bottom of the viewport on short pages */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Product Collection cards: light card treatment (border + rounded corners) around image, title, price and button */
.wc-block-product-template .wc-block-product {
	border: 1px solid var(--wp--preset--color--accent-2);
	border-radius: 8px;
	padding: 1.5rem 1.25rem 1.75rem;
	background-color: var(--wp--preset--color--base);
}

/* Reusable section pattern — use for any custom (raw HTML) section that needs a
   full-bleed background (image/map/color) with content confined to the site's
   normal reading column. Reuse across pages so sizes/margins stay consistent
   instead of re-deriving them per section:
   <div class="fgf-section ...">
     <div class="fgf-section-content ...">...</div>
   </div>
*/
.fgf-section {
	position: relative;
	width: 100%;
}

.fgf-section-content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin: 0 auto;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
	box-sizing: border-box;
}

/* Hero: two stacked gradients — a left-to-right one that darkens the text side
   specifically (the photo there is warm brown, low-contrast against the gold
   italic word), plus a top-to-bottom one that's darker overall than before. */
.fgf-hero-cover .wp-block-cover__background {
	background:
		linear-gradient(90deg, rgba(20, 18, 12, 0.55) 0%, rgba(20, 18, 12, 0.25) 45%, rgba(20, 18, 12, 0) 72%),
		linear-gradient(180deg, rgba(20, 18, 12, 0.3) 0%, rgba(20, 18, 12, 0.6) 55%, rgba(20, 18, 12, 0.82) 100%) !important;
	opacity: 1 !important;
}

.fgf-hero-text {
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* Hero content: left-aligned over the cleaner/emptier side of the photo instead of
   centered over the busiest part. Horizontal position now comes from the nested
   .alignwide group in the page content itself (same native mechanism header/footer
   use), not from custom padding here — just handle vertical/text alignment. */
.fgf-hero-cover .wp-block-cover__inner-container {
	align-items: flex-start;
	text-align: left;
}

/* .alignwide only self-centers inside an "is-layout-constrained" parent — the cover
   block's inner container is "is-layout-flow", so that class alone does nothing here.
   Replicate the exact same max-width + auto-margin math directly instead. */
.fgf-hero-cover .wp-block-cover__inner-container > .alignwide {
	max-width: var(--wp--style--global--wide-size, 1340px);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
	box-sizing: border-box;
	animation: fgf-hero-in 0.8s ease-out both;
}

@keyframes fgf-hero-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fgf-hero-cover .wp-block-cover__inner-container > .alignwide {
		animation: none;
	}
}

/* Active nav item (see fgf_mark_active_nav_link in functions.php): thin Oro
   underline, same visual language as .fgf-cta-editorial elsewhere on the
   site, so visitors can tell which page they're on. */
.fgf-nav-current > .wp-block-navigation-item__content {
	font-weight: 600;
	border-bottom: 2px solid var(--wp--preset--color--accent-1);
	padding-bottom: 2px;
}

/* Header + footer nav (manual de marca 05.16 "Navegación web": Texto Carbón,
   Hover Oliva, Acentos Oro): each block's own textColor sets the Carbón
   default (see parts/header.html and parts/footer.html), this just adds the
   Oliva hover/focus state — scoped to .fgf-main-nav/.fgf-footer-nav so it
   doesn't touch the header's mobile overlay menu, which keeps its own color.
   Rollback (header only): revert textColor to "accent-3" in parts/header.html
   and drop .fgf-main-nav from this selector — restores the previous
   "nav always Oliva" look. */
.fgf-main-nav .wp-block-navigation-item__content:hover,
.fgf-main-nav .wp-block-navigation-item__content:focus,
.fgf-footer-nav .wp-block-navigation-item__content:hover,
.fgf-footer-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent-3);
}

/* Hero buttons: small lift on hover + a quick press-down on click, so there's
   tactile feedback without a flashy effect. */
.fgf-hero-cover .wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fgf-hero-cover .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.fgf-hero-cover .wp-block-button__link:active {
	transform: translateY(0) scale(0.97);
	box-shadow: none;
}

/* Map/contact card CTA: same filled-Oliva CTA-principal treatment and
   hover/press feedback as the hero buttons, instead of a flat outline. */
.fgf-map-cta {
	display: inline-block;
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	padding: 0.75rem 1.5rem;
	border-radius: 100px;
	font-weight: 600;
	font-size: 0.9rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.fgf-map-cta:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 85%, black);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.fgf-map-cta:active {
	transform: translateY(0) scale(0.97);
	box-shadow: none;
}

/* CTA editorial (manual de marca): texto Oliva + pequeña línea Oro en vez de subrayado */
.fgf-cta-editorial a {
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--accent-1);
	padding-bottom: 2px;
}

/* Announcement bar: Oliva background (CTA-principal color) with a Marfil
   "Leer más" pill so it reads as CTA secundario per the brand manual, and the
   date picked out in Oro (small use, stays under the manual's "accent only"
   ratio). Text scrolls continuously (classic marquee technique: inline-block
   pushed fully off the right edge via padding-left:100%, animated to -100%
   of its own width) so the bar reads as "live", not a static dead strip. */
.fgf-announce-bar {
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	padding: 0.4rem 0;
	font-family: var(--wp--preset--font-family--manrope);
	overflow: hidden;
}

.fgf-announce-bar p {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	display: inline-block;
	white-space: nowrap;
	padding-left: 100%;
	animation: fgf-marquee 34s linear infinite;
}

@keyframes fgf-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fgf-announce-bar p {
		animation: none;
		padding-left: 0;
		display: block;
		text-align: center;
		white-space: normal;
	}
}

.fgf-announce-date {
	color: var(--wp--preset--color--base);
	font-weight: 700;
	border-bottom: 1px solid var(--wp--preset--color--accent-1);
	padding-bottom: 1px;
}

.fgf-announce-cta {
	display: inline-block;
	margin-left: 0.75rem;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	padding: 0.2rem 0.7rem;
	border-radius: 100px;
}