/*
Theme Name: Goagency
Theme URI: https://frontkom.com
Description: Custom child theme for Goagency, based on Ollie.
Author: Frontkom
Author URI: https://frontkom.com
Template: ollie
Version: 1.1.0
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: goagency
*/

/* Dark form controls and scrollbars; anchor jumps clear the header. */
html {
	color-scheme: dark;
	scroll-padding-top: 110px;
	scrollbar-color: var(--wp--preset--color--border-dark) var(--wp--preset--color--tertiary);
}

::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--main);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-alt);
	outline-offset: 2px;
}

/*
 * Sticky glass header: owns its background (the pattern sets none) so
 * the backdrop blur reads over photography; hides while scrolling down
 * and returns on scroll up (see motion.js).
 */
header.wp-block-template-part:has(.go-header) {
	position: sticky;
	top: 0;
	transition: transform 0.3s ease;
	z-index: 100;
}

header.wp-block-template-part:has(.go-header.is-hidden) {
	transform: translateY(-100%);
}

.wp-block-group.go-header {
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	background-color: rgba(8, 8, 6, 0.78);
}

/*
 * backdrop-filter turns the header into the containing block for
 * position:fixed descendants, trapping the mobile menu overlay inside
 * the bar — lift it (and any hide transform) while the menu is open.
 */
.wp-block-group.go-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background-color: var(--wp--preset--color--base);
}

header.wp-block-template-part:has(.go-header .is-menu-open) {
	transform: none;
}

/*
 * Measured from the rendered header by motion.js; these fallbacks are
 * the observed heights at 1440 (92px) and 390 (80px) so the overlap
 * below still lands without JavaScript.
 */
:root {
	--go-header-height: 92px;
}

@media (max-width: 599px) {

	:root {
		--go-header-height: 80px;
	}
}

/*
 * Pages that open on a cover run it behind the header, so the backdrop
 * blur has photography to work with from first paint instead of only
 * once the page scrolls. Cancelling the header's flow space (rather
 * than pulling the cover up) sidesteps the cover's inline margin-top:0
 * and leaves pages that open on anything else — Portefólio — clear of
 * the bar.
 *
 * A DriveGallery block leading the page earns the same. Its cover sits
 * two levels down and only qualifies when it is actually on screen:
 * [hidden] is server-rendered on covers the block builds but does not
 * show, and .ldg-content loses :first-child to the password gate on a
 * protected gallery. Both conditions are settled server-side, so the
 * bar never shifts once the Interactivity API hydrates. Full-width
 * covers only — a container-width one would meet the full-width bar
 * across part of its span and read as an accident.
 */
.wp-site-blocks:has(.entry-content > .wp-block-cover:first-child)
	header.wp-block-template-part:has(.go-header),
.wp-site-blocks:has(.entry-content > .ldg-gallery:first-child > .ldg-content:first-child > .ldg-cover.ldg-page-cover--full:not([hidden]))
	header.wp-block-template-part:has(.go-header) {
	margin-bottom: calc(-1 * var(--go-header-height));
}

/*
 * Only the background art runs under the bar: giving the covered height
 * back as top padding keeps the content box below it, so centred hero
 * text centres on the band left uncovered and bottom-anchored heroes
 * (the homepage) are untouched. 1em restores the core cover padding
 * this declaration replaces.
 */
.entry-content > .wp-block-cover:first-child {
	padding-top: calc(1em + var(--go-header-height));
}

/*
 * The block breaks its full-width cover out of the content column with
 * viewport units (inline-size: 100vi; margin-inline: calc(50% - 50vi)),
 * and viewport units are defined to ignore scrollbars. So wherever the
 * browser gives scrollbars their own layout width instead of overlaying
 * them — Chrome with DevTools docked, most of Windows and Linux — the
 * cover comes out scrollbar-width wider than the page will hold and the
 * whole document scrolls sideways. --go-viewport-width is the same
 * measurement taken from clientWidth, which does subtract the
 * scrollbar; the 100vi fallback keeps today's behaviour without
 * JavaScript.
 */
.entry-content .ldg-cover.ldg-page-cover--full {
	inline-size: var(--go-viewport-width, 100vi);
	margin-inline: calc(50% - var(--go-viewport-width, 100vi) / 2);
}

/*
 * Same idea for the DriveGallery cover, minus the 1em: it carries no
 * padding of its own, and its overlay is in flow (grid, align-items:
 * end) inside the padding box, so the title drops clear of the bar
 * while .ldg-cover-image — absolutely positioned to inset:0, which
 * resolves against the padding box — keeps filling the full height.
 */
.entry-content > .ldg-gallery:first-child > .ldg-content:first-child
	> .ldg-cover.ldg-page-cover--full:not([hidden]) {
	padding-top: var(--go-header-height);
}

/*
 * Halve the page gutter on phones — Ollie's 4vw leaves too much air at
 * these widths. Everything traces back to spacing|medium: the root
 * padding drives .has-global-padding *and* the negative margins core
 * gives .alignfull, so text and full-bleed blocks move together, while
 * the header and footer groups repeat the same preset inline and need
 * the matching value to stay flush with the content edge. Inline
 * styles only yield to !important.
 */
@media (max-width: 599px) {

	:root body {
		--wp--style--root--padding-right: calc(var(--wp--preset--spacing--medium) / 2);
		--wp--style--root--padding-left: calc(var(--wp--preset--spacing--medium) / 2);
	}

	.wp-block-group.go-header,
	footer .wp-block-group.alignfull {
		padding-right: calc(var(--wp--preset--spacing--medium) / 2) !important;
		padding-left: calc(var(--wp--preset--spacing--medium) / 2) !important;
	}
}

/* Animated underline on desktop menu items; current page stays marked. */
.go-header .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.go-header .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--primary-alt);
	bottom: -4px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.go-header .wp-block-navigation-item__content:hover::after,
.go-header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}


/* Buttons: a touch of lift on hover. */
.wp-block-button__link {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

/*
 * Header language switcher: PT / EN as text, matching the nav's weight
 * and size. Polylang emits the lowercase slug (see the
 * pll_the_languages_args filter in functions.php) and the uppercasing
 * happens here, so the markup keeps a real language code for
 * hreflang and assistive tech. The current language reads as active.
 */
.wp-block-polylang-language-switcher {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-polylang-language-switcher .lang-item a {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	opacity: 0.45;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 0.15s ease-in-out;
}

.wp-block-polylang-language-switcher .lang-item a:hover,
.wp-block-polylang-language-switcher .lang-item.current-lang a {
	opacity: 1;
}

/*
 * On mobile the navigation collapses to a hamburger; keep it at the far
 * right by flipping the header actions group (600px is the core
 * navigation mobile breakpoint).
 */
@media (max-width: 599px) {

	.wp-block-group.header-actions {
		flex-direction: row-reverse;
	}
}

/* Highlight the current page inside the mobile navigation overlay. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item.current-menu-item
	> a {
	color: var(--wp--preset--color--primary-alt);
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Keep the hero text above the gradient layer added by ::before
 * (the inner container has no z-index of its own). */
.go-hero .wp-block-cover__inner-container {
	z-index: 2;
}

/*
 * Core shrinks the cover inner container to fit-content when a custom
 * content position is set, via a doubled-class selector (specificity
 * 0,5,0); the tripled class here outranks it so constrained inner
 * groups keep the site container width (homepage hero quote).
 */
.wp-block-cover.has-custom-content-position.has-custom-content-position.has-custom-content-position
	.wp-block-cover__inner-container {
	width: 100%;
}

/*
 * Serviços rows that lead with the image on desktop stack text-first
 * when columns collapse (781px is the core columns stacking breakpoint).
 */
@media (max-width: 781px) {

	.wp-block-columns.service-row-reverse {
		flex-direction: column-reverse;
	}
}

/*
 * -----------------------------------------------------------------
 * Motion layer. Hidden states only apply once motion.js has added
 * .motion-ready (and never under prefers-reduced-motion), so content
 * stays visible without JavaScript.
 * -----------------------------------------------------------------
 */
.motion-ready .go-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.65s ease,
		transform 0.65s ease;
	transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready .go-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Photography hovers: contained zoom on galleries and feature covers. */
.wp-block-gallery .wp-block-image {
	overflow: hidden;
}

.wp-block-gallery .wp-block-image img,
.wp-block-cover.is-position-bottom-left:not(.alignfull) img.wp-block-cover__image-background {
	transition: transform 0.5s ease;
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-gallery .wp-block-image:hover img {
		transform: scale(1.05);
	}
}

/* Card hover: lift and warm the border. */
.wp-block-group.has-border-color {
	transition:
		transform 0.3s ease,
		border-color 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-group.has-border-color:hover {
		border-color: var(--wp--preset--color--primary-alt);
		transform: translateY(-4px);
	}
}

/* Film grain over the whole page. */
body::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
	content: "";
	inset: 0;
	opacity: 0.04;
	pointer-events: none;
	position: fixed;
	z-index: 9999;
}

/* Scrolling marquee strip. */
.go-marquee {
	overflow: hidden;
	white-space: nowrap;
}

.go-marquee p {
	display: inline-block;
	font-family: var(--wp--preset--font-family--expanded);
	font-size: clamp(3rem, 9vw, 7rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.1;
	margin: 0;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {

	.go-marquee p {
		animation: go-marquee 40s linear infinite;
	}
}

@keyframes go-marquee {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Giant watermark behind portfolio grids. */
.go-watermark {
	overflow: hidden;
	position: relative;
}

.go-watermark .go-watermark-text {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: clamp(6rem, 20vw, 18rem);
	font-weight: 800;
	left: 50%;
	line-height: 1;
	margin: 0;
	opacity: 0.05;
	pointer-events: none;
	position: absolute;
	text-transform: uppercase;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}

/* Darker, calmer lightbox backdrop. */
.wp-lightbox-overlay .scrim {
	background-color: #0a0a08;
}

/*
 * Homepage hero: readability gradient above the photo, slow Ken Burns
 * drift, staggered text entrance, and a scroll cue. The gradient layer
 * sits between the image and the inner container (both share the
 * cover's stacking context).
 */
.wp-block-cover.go-hero::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.82) 100%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

/* Brand stripe alongside the hero text block. */
.go-hero .wp-block-cover__inner-container .wp-block-group.alignwide {
	border-left: 3px solid var(--wp--preset--color--primary-alt);
	padding-left: clamp(1rem, 3vw, 2rem);
}

@media (prefers-reduced-motion: no-preference) {

	.go-hero img.wp-block-cover__image-background {
		animation: go-kenburns 24s ease-in-out infinite alternate;
	}

	.go-hero .wp-block-cover__inner-container .wp-block-group > * {
		animation: go-hero-enter 0.9s ease both;
	}

	.go-hero .wp-block-cover__inner-container .wp-block-group > :nth-child(2) {
		animation-delay: 0.15s;
	}

	.go-hero .wp-block-cover__inner-container .wp-block-group > :nth-child(3) {
		animation-delay: 0.3s;
	}
}

@keyframes go-kenburns {

	from {
		transform: scale(1.02) translateX(0);
	}

	to {
		transform: scale(1.14) translateX(-1.5%);
	}
}

@keyframes go-hero-enter {

	from {
		opacity: 0;
		transform: translateY(28px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* The green bar replaces Ollie's current-item underline (0,4,0). */
.go-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-item > a {
	text-decoration: none;
}