/**
 * Theme-level layout styles that are not expressed via theme.json:
 * buttons, sticky navbar, hero overlay, repository band and the rounded
 * footer card. Section content is built from core blocks in patterns/parts
 * using these class names. Colors reference the theme.json presets.
 */

:root {
	--tph-green: var(--wp--preset--color--green);
	--tph-amber: var(--wp--preset--color--amber);
	--tph-cream: var(--wp--preset--color--cream);
	--tph-ink: var(--wp--preset--color--ink);
	--tph-orange: #f58220;
	--tph-brown: var(--wp--preset--color--brown);
	--tph-brown-2: var(--wp--preset--color--brown-2);
}

/* Parallax-style anchor navigation: smooth scroll + offset for the sticky header. */
html {
	scroll-behavior: smooth;
}

:where(#eco, #faq, #repo, #contacto) {
	scroll-margin-top: 96px;
}

/* Custom buttons used inside block render output (eco-grid, contact). */
.btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--zilla);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.02em;
	border-radius: 8px;
	padding: 13px 26px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: filter 0.18s, transform 0.18s, background 0.18s, color 0.18s;
}

.btn--primary {
	background: var(--tph-amber);
	color: var(--tph-green);
}

.btn--primary:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.btn--ghost {
	background: transparent;
	border-color: var(--tph-cream);
	color: var(--tph-cream);
}

.btn--ghost:hover {
	background: rgba(240, 237, 228, 0.1);
}

.btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Sticky, blurred navbar.
   The sticky must sit on the template-part wrapper (a direct child of the tall
   .wp-site-blocks container); if it were on the inner .tph-nav it would be
   clipped by the wrapper's own height and never stick. */
.wp-site-blocks > header.wp-block-template-part:has(.tph-nav) {
	position: sticky;
	top: 0;
	z-index: 30;
}

.tph-nav {
	/* Note: no backdrop-filter here — it would create a containing block for the
	   fixed-position mobile nav overlay and trap it inside the header. */
	background: var(--tph-green);
}

/* Brand (left): site title + small tagline */
.tph-brand__title,
.tph-brand__title a {
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--tph-cream);
	text-decoration: none;
}

.tph-brand__tag {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(240, 237, 228, 0.7);
}

.tph-nav .wp-block-navigation {
	font-weight: 600;
	font-size: 17px;
}

.tph-nav .wp-block-navigation a {
	color: var(--tph-cream);
}

.tph-nav .wp-block-navigation a:hover {
	color: var(--tph-amber);
}

/* Alliance logo (right) — white version, min 140px wide like the sibling themes */
.alliance-logo {
	display: inline-flex;
	align-items: center;
}

.tph-nav .alliance-logo img {
	width: 140px;
	height: auto;
	display: block;
}

/* In-menu Alliance logo: hidden on desktop; shown inside the mobile overlay
   (matches cacao/d4r, where the logo moves into the menu on small screens). */
.alliance-logo--in-menu {
	display: none;
}

@media (max-width: 900px) {
	/* Switch the header to the mobile layout below 900px (the core Navigation
	   collapses at 600px by default, but brand + full menu + logo stop fitting
	   well before that). Force the hamburger and hide the inline menu here. */
	.tph-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.tph-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	/* On mobile the bar logo is hidden; the cloned logo shows inside the open menu. */
	.tph-nav .alliance-logo:not(.alliance-logo--in-menu) {
		display: none;
	}

	.alliance-logo--in-menu {
		display: inline-flex;
		margin: 24px 0 8px;
	}

	.alliance-logo--in-menu img {
		width: 160px;
	}

	/* Mobile overlay panel: solid dark-green with cream content. */
	.tph-nav .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--tph-green) !important;
		color: var(--tph-cream);
	}

	.tph-nav .wp-block-navigation__responsive-container.is-menu-open a,
	.tph-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content,
	.tph-nav .wp-block-navigation__responsive-container-close {
		color: var(--tph-cream);
	}

	/* Center the overlay menu items + logo, with side padding so nothing clips
	   (overrides the desktop right-justified navigation). */
	.tph-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		width: 100%;
		padding-left: var(--wp--style--root--padding-left);
		padding-right: var(--wp--style--root--padding-right);
	}

	.tph-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		--navigation-layout-align: center;
		--navigation-layout-justify: center;
		/* core's items-justified-right sets align-items: flex-end directly; make the
		   items full width here and center their content with text-align below. */
		align-items: stretch !important;
		gap: 28px;
		text-align: center;
	}

	.tph-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.alliance-logo--in-menu {
		align-self: center;
		margin-top: 36px;
	}

	/* Full-width items with centered text (the box was narrower than the label,
	   so left-aligned text appeared shifted). */
	.tph-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		width: 100% !important;
		justify-content: center;
	}

	.tph-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* Inset the close (×) button so it isn't jammed in the corner. */
	.tph-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		top: 20px;
		right: 20px;
	}
}

/* Hero (.tph-hero): dark overlay over a background image. */
.tph-hero {
	background:
		linear-gradient(
			180deg,
			rgba(29, 80, 38, 0.92) 0%,
			rgba(35, 31, 32, 0.6) 45%,
			rgba(35, 31, 32, 0.85) 100%
		),
		var(--tph-hero-image, none) center / cover no-repeat;
	color: #fff;
	padding: 120px 0 132px;
}

.tph-hero__content {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

.tph-hero h1 {
	font-weight: 700;
	font-size: clamp(44px, 6.2vw, 78px);
	line-height: 1;
	letter-spacing: -0.02em;
	max-width: 740px;
	margin: 0;
}

.tph-hero__sub {
	font-weight: 500;
	font-size: clamp(18px, 2vw, 24px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	max-width: 680px;
	margin: 32px 0 0;
}

.tph-hero__btns {
	display: flex;
	gap: 16px;
	margin-top: 44px;
	flex-wrap: wrap;
}

/* Repository band (.tph-repo): brown background, centered. */
.tph-repo {
	background: var(--tph-brown);
	color: var(--tph-cream);
	text-align: center;
}

.tph-repo .tph-eyebrow {
	font-family: var(--wp--preset--font-family--zilla);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tph-repo h2 {
	color: var(--tph-amber);
}

/* Footer (.tph-footer): dark green, brand + link columns + bottom bar. */
.tph-footer .alliance-logo img {
	width: 200px;
	height: auto;
	display: block;
}

.tph-footer__desc {
	color: rgba(240, 237, 228, 0.8);
	max-width: 420px;
	line-height: 1.5;
}

.tph-footer__head {
	color: var(--tph-orange);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.tph-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tph-footer__list li {
	margin-bottom: 10px;
}

.tph-footer__list a {
	color: var(--tph-cream);
	text-decoration: none;
	opacity: 0.9;
}

.tph-footer__list a:hover {
	color: var(--tph-amber);
	opacity: 1;
}

.tph-footer__sep {
	border-color: rgba(240, 237, 228, 0.18);
	margin: 40px 0 24px;
}

.tph-footer__bar {
	color: rgba(240, 237, 228, 0.6);
}

.tph-footer__bar p {
	margin: 0;
}