/*
Theme Name: Cambras
Theme URI: https://cambras.org
Author: Cambras
Author URI: https://cambras.org
Description: Custom WordPress block theme for the Cambras business chamber website.
Requires at least: 6.7
Tested up to: 6.9
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: cambras
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, wide-blocks, block-styles
*/

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

:where(.wp-site-blocks) > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

.more-link {
	display: block;
}

:where(pre) {
	overflow-x: auto;
}

/* ─── Header height token ─────────────────────────────────────────────────── */
:root {
	--cambras-header-container-height: 100px;
	--cambras-header-height: 80px;
}

/* Absolute header — floats over page content so the gradient draws beneath it */
.wp-site-blocks {
	position: relative;
}

header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--cambras-header-container-height);
	display: flex;
	align-items: center;
	justify-content: center;
}

header.wp-block-template-part > div {
	padding-inline: var(--wp--preset--spacing--50);
	position: fixed;
	width: 100%;
}

header.wp-block-template-part .wp-block-group.alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
}

/* ─── Hero gradient ───────────────────────────────────────────────────────── */
/* .cambras-hero {
	padding-top: var(--cambras-header-height);
} */

.wp-site-blocks main > div:first-child > div:first-child {
	padding-top: var(--cambras-header-container-height);
}

/* Opt-out helper: let a full-bleed hero image draw up behind the absolute    */
/* header instead of starting below it. The header floats over the image and  */
/* centered cover content still clears the header height.                     */
.cambras-hero-behind-header {
	padding-top: 0 !important;
}

.cambras-hero-gradient {
	background-image: url('assets/images/hero-gradient-cropped-4.svg');
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
}

.cambras-hero-gradient.cambras-hero-gradient-yellow {
	background-image: url('assets/images/hero-gradient-cropped-yellow.svg');
}

/* 1M+ stat card — arrow overlay */
.cambras-stat-arrow-card {
	position: relative;
}

.cambras-stat-arrow-icon {
	display: block;
	width: 64px;
	height: 64px;
	background-color: var(--wp--preset--color--olive);
	-webkit-mask-image: var(--cambras-arrow-url);
	mask-image: var(--cambras-arrow-url);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Hero image group — natural aspect ratio on desktop */
.cambras-hero-text:has(> .wp-block-image) > .wp-block-image {
	width: 100%;
}
.cambras-hero-text:has(> .wp-block-image) > .wp-block-image figure,
.cambras-hero-text:has(> .wp-block-image) > .wp-block-image img {
	width: 100%;
	height: auto;
	max-height: 330px;
	object-fit: cover;
	object-position: right center;
	display: block;
}

@media (max-width: 1023px) {
	.cambras-hero-text,
	div:has(> .cambras-hero-text) > * {
		flex-basis: 100% !important;
		padding-left: 0;
	}

	.cambras-hero-text:has(> .wp-block-image) {
		position: static;
	}

	.cambras-hero-text:has(> .wp-block-image) > .wp-block-image {
		position: static !important;
		inset: auto;
		margin: 0;
	}

	.cambras-hero-text:has(> .wp-block-image) {
		display: flex !important;
		justify-content: center;
	}

	.cambras-hero-text:has(> .wp-block-image) > .wp-block-image {
		max-width: 450px;
		width: 100%;
	}

	.cambras-hero-text:has(> .wp-block-image) > .wp-block-image figure,
	.cambras-hero-text:has(> .wp-block-image) > .wp-block-image img {
		height: auto;
		width: 100%;
	}
}

/* Footer background overlay — subtle cool tint from Figma */
.cambras-footer {
	margin-top: 0;
	position: relative;
}

.cambras-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(234,251,255,0.19);
	pointer-events: none;
	z-index: 0;
}

.cambras-footer > * {
	position: relative;
	z-index: 1;
}

/* Footer link styling — force white, WP core sets color:inherit on nav links which picks up the global link color */
.cambras-footer a,
.cambras-footer .wp-block-navigation-item__content {
	color: #ffffff !important;
	text-decoration: none !important;
}

.cambras-footer a:hover,
.cambras-footer .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-light) !important;
}

/* Asociate button in footer — override the generic hover above */
.cambras-footer .wp-element-button,
.cambras-footer .wp-element-button:hover,
.cambras-footer .wp-element-button:active {
	color: #ffffff !important;
}

.cambras-footer .wp-element-button:hover,
.cambras-footer .wp-element-button:active {
	background-color: #664634 !important;
}

/* Footer logo — white tint via CSS mask */
.cambras-logo-white {
	display: block;
	background-color: #ffffff;
	-webkit-mask-image: url('cambras-logo.svg');
	mask-image: url('cambras-logo.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
}

/* Footer email submit button — square aspect ratio */
.cambras-footer-submit {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Footer nav columns */
.cambras-footer-nav {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	flex: 1;
}

.cambras-footer-nav > div {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.cambras-footer-nav a.primary,
.cambras-footer-nav span.primary {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 500;
	color: #fbf8f7;
	text-decoration: none;
}

.cambras-footer-nav a.secondary {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	letter-spacing: -0.2px;
}

@media (max-width: 767px) {
	/* Stack logo column and nav vertically */
	.cambras-footer > .wp-block-group.alignwide:first-child {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Logo group: full width, remove fixed 22% */
	.cambras-footer > .wp-block-group.alignwide:first-child > .wp-block-group {
		width: 100%;
	}
}


/* ─── Connected sections ──────────────────────────────────────────────────── */
/* Use cambras-connected-top on a rounded section whose bottom should flush     */
/* into the next section, and cambras-connected-bottom on that next section.    */
.cambras-connected-top {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.cambras-connected-bottom {
	padding-top: 0;
	margin-top: 0;
}

/* ─── Header nav ─────────────────────────────────────────────────────────── */

.cambras-header-nav {
	display: flex;
	align-items: center;
}

/* Desktop: horizontal nav list */
.cambras-header-nav > .cambras-nav-scroll > ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
	align-items: center;
}

.cambras-header-nav > .cambras-nav-scroll > ul > li > a,
.cambras-header-nav > .cambras-nav-scroll > ul > li > span {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 8px;
	display: block;
	overflow-wrap: normal;
	word-break: keep-all;
	transition: background 0.15s;
	cursor: default;
}

.cambras-header-nav > .cambras-nav-scroll > ul > li > a {
	cursor: pointer;
}

.cambras-header-nav > .cambras-nav-scroll > ul > li > a:hover,
.cambras-header-nav > .cambras-nav-scroll > ul > li > span:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* ─── Dropdown submenu ───────────────────────────────────────────────────── */

.cambras-header-nav .has-submenu {
	position: relative;
}

.cambras-header-nav .cambras-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	background: transparent;
	min-width: 220px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s, transform 0.15s;
	transform: translateY(-4px);
	z-index: 100;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.cambras-header-nav .has-submenu:hover .cambras-submenu,
.cambras-header-nav .has-submenu:focus-within .cambras-submenu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.cambras-header-nav .cambras-submenu li a {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	display: block;
	padding: 8px 18px;
	transition: background 0.1s;
}

.cambras-header-nav .cambras-submenu li a:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* ─── Asociate button ────────────────────────────────────────────────────── */

header.wp-block-template-part .wp-element-button:hover,
header.wp-block-template-part .wp-element-button:active {
	background-color: var(--wp--preset--color--primary) !important;
	color: #fff !important;
}

/* ─── Hamburger button (hidden on desktop) ───────────────────────────────── */

.cambras-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	position: relative;
	z-index: 1000;
}

.cambras-menu-toggle:hover {
	background: rgba(0, 0, 0, 0.06);
}

/* Three-line hamburger using box-shadow */
.cambras-hamburger,
.cambras-hamburger::before,
.cambras-hamburger::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--wp--preset--color--dark);
	border-radius: 2px;
	transition: transform 0.2s, opacity 0.2s;
}

.cambras-hamburger {
	position: relative;
}

.cambras-hamburger::before,
.cambras-hamburger::after {
	content: '';
	position: absolute;
	left: 0;
}

.cambras-hamburger::before { top: -7px; }
.cambras-hamburger::after  { top:  7px; }

/* × icon when open */
.cambras-header-nav.is-open .cambras-hamburger {
	background: transparent;
}

.cambras-header-nav.is-open .cambras-hamburger::before {
	top: 0;
	transform: rotate(45deg);
}

.cambras-header-nav.is-open .cambras-hamburger::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
	/* 1. Header full width — remove pill border-radius */
	header.wp-block-template-part .wp-block-group.alignfull {
		border-radius: 0 !important;
		width: 100%;
	}

	header.wp-block-template-part .wp-block-group.alignfull > div {
		width: 100%;
	}

	/* 2. Hamburger on the left
	      Dissolve the right wrapper group so its children (nav, button) become
	      direct flex siblings of the logo in the wide group, then reorder. */
	header.wp-block-template-part .wp-block-group.alignwide > .wp-block-group:last-child {
		display: contents;
	}

	/* Nav wrapper: order -1 → appears before the logo */
	header.wp-block-template-part .wp-block-group.alignwide > .wp-block-html:not(:first-child) {
		order: -1;
	}

	/* Logo: stays at order 0 (middle) */

	/* Asociate button: order 1 → appears after the logo */
	header.wp-block-template-part .wp-block-group.alignwide > .wp-block-buttons {
		order: 1;
	}

	/* 3. Show hamburger button */
	.cambras-menu-toggle {
		display: flex;
	}

	/* Hide scroll wrapper (and its list) by default */
	.cambras-header-nav:not(.is-open) > .cambras-nav-scroll {
		display: none;
	}

	/* 4. Open state: the entire <nav> becomes the fullscreen overlay.
	      The toggle button (×) is first in DOM flow, links follow below it.
	      No overflow here — scrolling lives in .cambras-nav-scroll so
	      overscroll bounce never reveals the page behind. */
	.cambras-header-nav.is-open {
		position: fixed;
		inset: 0;
		z-index: 999;
		flex-direction: column;
		align-items: flex-start;
		background: var(--wp--preset--color--base);
		padding: var(--wp--preset--spacing--60);
		overflow: hidden;
	}

	/* Scrollable inner wrapper — contains overscroll within itself */
	.cambras-header-nav.is-open .cambras-nav-scroll {
		flex: 1;
		width: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--wp--preset--color--base);
	}

	.cambras-header-nav.is-open > .cambras-nav-scroll > ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.cambras-header-nav.is-open > .cambras-nav-scroll > ul > li {
		width: 100%;
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	}

	.cambras-header-nav.is-open > .cambras-nav-scroll > ul > li > a,
	.cambras-header-nav.is-open > .cambras-nav-scroll > ul > li > span {
		font-size: 20px;
		padding: 16px 0;
		border-radius: 0;
		background: none;
	}

	/* Sublinks always visible in mobile */
	.cambras-header-nav.is-open .cambras-submenu {
		position: static;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 12px 16px;
		min-width: 0;
		background: transparent;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	/* 5. Remove white card pseudo-element on mobile */
	.cambras-header-nav .cambras-submenu::before {
		display: none;
	}

	.cambras-header-nav.is-open .cambras-submenu li a {
		font-size: 15px;
		color: var(--wp--preset--color--muted);
		padding: 6px 0;
	}

	/* 6. Remove hover backgrounds on mobile */
	.cambras-header-nav > .cambras-nav-scroll > ul > li > a:hover,
	.cambras-header-nav .cambras-submenu li a:hover {
		background: none;
	}
}

/* ==========================================================================
   Comisión Directiva — person cards
   ========================================================================== */

.cambras-card-overflow {
	overflow: hidden;
}

/* Person card grid — one grid per section on Comisión Directiva */
.cambras-person-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.cambras-person-grid > .wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}