/*
 * Responsividade global — notebooks, ecrãs largos, smartphones.
 * Carregar por último entre os CSS do site (antes de leaflet.css no index).
 */

/* ---------- Base: sem scroll horizontal involuntário ---------- */
html {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

/* Imagens de conteúdo; não afetar tiles Leaflet */
#banner img,
#main img:not(.leaflet-tile):not(.leaflet-marker-icon):not(.leaflet-marker-shadow):not(.leaflet-image-layer img),
#footer img,
#contact img {
	max-width: 100%;
	height: auto;
}

.leaflet-container img.leaflet-tile,
.leaflet-container img.leaflet-marker-icon,
.leaflet-container img.leaflet-marker-shadow {
	max-width: none !important;
}

/* Textos longos / URLs em colunas estreitas */
@media screen and (max-width: 736px) {
	p,
	li,
	td {
		overflow-wrap: anywhere;
		word-wrap: break-word;
	}
}

/* ---------- Notebooks e tablets (até ~13") ---------- */
@media screen and (max-width: 1280px) {
	#header:not(.alt) {
		padding-left: clamp(0.75rem, 2.5vw, 1.5rem) !important;
		padding-right: clamp(0.75rem, 2.5vw, 1.5rem) !important;
	}
}

@media screen and (max-width: 1024px) {
	#header.alt {
		padding: 1.35em clamp(1rem, 4vw, 2rem) !important;
	}

	#header.alt nav {
		right: clamp(1rem, 4vw, 2rem) !important;
		top: 1.35em !important;
	}

	#header nav > ul {
		column-gap: 0.65em;
		row-gap: 0.4em;
	}

	#header nav > ul > li > a {
		font-size: 0.8em !important;
	}

	:root {
		--nav-pill-width: 9.35rem;
		--nav-pill-height: 2.4rem;
	}
}

@media screen and (max-width: 920px) {
	:root {
		--nav-pill-width: 8.75rem;
		--nav-pill-height: 2.32rem;
	}
}

/* ---------- Smartphones: menu hambúrguer (≤840px) ---------- */
@media screen and (max-width: 840px) {
	#navButton {
		padding-top: env(safe-area-inset-top, 0px);
		min-height: calc(60px + env(safe-area-inset-top, 0px));
	}

	#navButton .toggle {
		padding-top: env(safe-area-inset-top, 0px);
	}

	#navPanel {
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
}

/* ---------- Home: secções “full viewport” pesadas em mobile ---------- */
@media screen and (max-width: 840px) {
	/* “Quem somos”: mais ar no topo para a folha não parecer do banner / intro */
	body.index #main > header.special.container {
		min-height: auto;
		justify-content: flex-start;
		padding-top: clamp(3.5rem, 14vw, 5.5rem);
		padding-bottom: clamp(2.25rem, 7vw, 3.5rem);
	}

	body.index #main > section.wrapper {
		min-height: auto;
		padding-top: clamp(2.25rem, 7vw, 3.5rem);
		padding-bottom: clamp(2.25rem, 7vw, 3.5rem);
	}

	body.index #contact {
		min-height: auto;
		padding: clamp(2.25rem, 7vw, 3.5rem) max(1rem, env(safe-area-inset-left, 0px)) clamp(2.25rem, 7vw, 3.5rem)
			max(1rem, env(safe-area-inset-right, 0px));
	}

	body.index #banner {
		padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
		padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
		padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
	}

	body.index #main > section.wrapper #map {
		width: 100%;
		height: min(420px, 52vh);
		min-height: 220px;
		border-radius: 1rem;
		overflow: hidden;
	}
}

/* Landscape em telemóvel: carrossel não dominar a altura */
@media screen and (max-height: 520px) and (orientation: landscape) {
	body.index section.wrapper.style2 .container-externo {
		max-height: min(70vh, 20rem);
		aspect-ratio: 16 / 9;
	}
}

/* ---------- Monitores grandes / ultra-wide: conteúdo legível ---------- */
@media screen and (min-width: 100em) {
	body:not(.index) article#main .container {
		max-width: min(76rem, 92vw);
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (min-width: 90em) {
	body.index section.wrapper.style2.container.special-alt > .container {
		max-width: min(80rem, 94vw);
	}

	body.index #banner .inner {
		max-width: min(42rem, 92vw);
	}
}

/*
 * Smartphones: o template esconde #header e mostra #navButton, mas regras posteriores
 * (ex.: navbar-glass.css #header:not(.alt):not(:has(h1)) { display:flex !important })
 * têm maior especificidade que só #header — após scroll na home perde-se .alt e os dois
 * menus aparecem. Este seletor ganha à flex e mantém só o painel hambúrguer.
 */
@media screen and (max-width: 840px) {
	#page-wrapper > header#header,
	#header,
	#header.alt {
		display: none !important;
	}

	#navButton {
		display: block !important;
	}

	#navPanel {
		display: block !important;
	}
}