/**
 * Power to Move — site footer (Figma "Footer": desktop 221:3527, mobile
 * 221:4798), styling the Blocksy footer builder rows and the Greenshift
 * blocks in the footer widgets.
 *
 * - The top row (newsletter) and the middle row (logo, socials, link columns)
 *   form the dark rounded card; the line between them is the top row's
 *   bottom border, the watermark a background of the middle row.
 * - The bottom row (copyright, legal menu) sits on the page background.
 *
 * The widget blocks have no classes of their own, so their parts are found by
 * what they contain (:has(> h4), :has(> svg), ...). The #footer prefix
 * outranks Blocksy's row rules and Greenshift's per-block styles.
 *
 * Breakpoints match Blocksy: tablet ≤ 999.98px, mobile ≤ 689.98px.
 */

#footer.ct-footer {
	--ptm-footer-text: rgb(255 255 255 / 0.7);
	padding: 0;
	background-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Card                                                                 */
/* ------------------------------------------------------------------ */

#footer [data-row="top"],
#footer [data-row="middle"] {
	background-color: var(--theme-palette-color-2);
	color: var(--theme-palette-color-8);
}

#footer [data-row="top"] {
	border-radius: 24px 24px 0 0;
}

#footer [data-row="middle"] {
	overflow: hidden;
	border-radius: 0 0 24px 24px;
	background-image: url("../images/footer-watermark.svg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 1440px auto;
}

#footer [data-row="top"] > .ct-container,
#footer [data-row="middle"] > .ct-container {
	display: block;
}

#footer [data-row="top"] > .ct-container {
	padding-block: 64px 48px;
	border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

#footer [data-row="middle"] > .ct-container {
	padding-block: 48px 250px;
}

#footer [data-row="top"] [data-column],
#footer [data-row="middle"] [data-column] {
	align-items: stretch;
}

/* The image widget that held a placeholder for the watermark (now the row background). */
#footer .ct-widget:has(img[src*="bg-footer"]) {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Newsletter                                                           */
/* ------------------------------------------------------------------ */

#footer [data-row="top"] .ct-widget {
	width: 100%;
	max-width: 628px;
	margin-inline: auto;
}

#footer [data-row="top"] .ct-widget > .gspb_container {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

#footer .gspb_container:has(> h2) {
	gap: 18px;
}

#footer .gspb_container:has(> h2) > .gspb_text {
	margin: 0;
	font-size: 18px;
	line-height: 1.2;
}

/* ------------------------------------------------------------------ */
/* Logo, socials and link columns                                       */
/* ------------------------------------------------------------------ */

#footer [data-row="middle"] .ct-widget > .gspb_container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
}

/* Logo + socials. */
#footer .gspb_container:has(> .gspb_container > .gspb_image) {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#footer .gspb_container:has(> .gspb_container > .gspb_image) img {
	display: block;
	width: 225px;
	height: auto;
}

#footer .gspb_container:has(> .gspb_container > svg) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

#footer .gspb_container:has(> svg) {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid #f9fafb;
	border-radius: 50%;
	color: var(--theme-palette-color-8);
}

#footer .gspb_container:has(> svg) svg {
	width: 16px;
	height: 16px;
}

#footer .gspb_container:has(> svg) svg path {
	fill: currentColor;
}

/* WhatsApp: the green one. */
#footer .gspb_container:has(> svg):last-child {
	border-color: var(--theme-palette-color-1);
	background-color: var(--theme-palette-color-1);
	color: var(--theme-palette-color-2);
}

#footer .gspb_container:has(> svg):is(:hover, :focus-within) {
	border-color: var(--theme-palette-color-1);
}

/* Link columns: Power to Move, Categorias, Contactos. */
#footer .gspb_container:has(> .gspb_container > h4) {
	display: grid;
	grid-template-columns: 196px 191px 250px;
	gap: 24px;
}

#footer .gspb_container:has(> h4) {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

#footer .gspb_container:has(> h4):last-child {
	gap: 20px;
}

#footer .gspb_container:has(> h4) > h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0;
	color: var(--theme-palette-color-1);
}

#footer .gspb_container:has(> h4) > ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer .gspb_container:has(> h4) > ul > li,
#footer .gspb_container:has(> h4) .gspb_text {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ptm-footer-text);
}

/* Power to Move: menu links, 26px tall each in the design. */
#footer .gspb_container:has(> h4):first-child > ul > li {
	padding-block: 2px;
}

#footer .gspb_container:has(> h4) a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

#footer .gspb_container:has(> h4) a:hover {
	color: var(--theme-palette-color-8);
}

/* Contactos: address, then phone + note + e-mail (Greenshift puts <style>
   tags between the blocks, hence *-of-type). */
#footer .gspb_container:has(> h4) > .gspb_container {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#footer .gspb_container:has(> h4) > .gspb_container > .gspb_container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

#footer .gspb_container:has(> h4) > .gspb_container > .gspb_container > .gspb_text:nth-of-type(2) {
	font-size: 12px;
}

#footer .gspb_container:has(> h4) > .gspb_container > .gspb_container > .gspb_text:last-of-type {
	margin-top: 16px;
	padding-bottom: 1px;
	border-bottom: 1px solid var(--theme-palette-color-1);
}

/* ------------------------------------------------------------------ */
/* Bottom bar                                                           */
/* ------------------------------------------------------------------ */

#footer [data-row="bottom"] {
	background-color: transparent;
}

#footer [data-row="bottom"] > .ct-container {
	grid-template-columns: auto auto;
	align-items: center;
	justify-content: space-between;
	gap: 16px 48px;
	padding-block: 16px;
}

#footer .ct-footer-copyright,
#footer .ct-footer-copyright p {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--theme-palette-color-2);
}

#footer .ct-footer-copyright a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--theme-palette-color-1);
}

#footer [data-id="menu"] {
	--menu-items-spacing: 28px;
}

#footer [data-id="menu"] ul {
	--theme-text-transform: none;
	--theme-font-size: 14px;
	--theme-line-height: 20px;
	--theme-link-initial-color: var(--theme-palette-color-2);
	--theme-link-hover-color: var(--theme-palette-color-9);
}

/* ------------------------------------------------------------------ */
/* Tablet                                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 999.98px) {
	#footer [data-row="top"] > .ct-container {
		padding-block: 56px 40px;
	}

	#footer [data-row="middle"] > .ct-container {
		padding-block: 40px 200px;
	}

	#footer [data-row="middle"] .ct-widget > .gspb_container {
		flex-direction: column;
		gap: 40px;
	}

	#footer .gspb_container:has(> .gspb_container > h4) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
	}

	#footer [data-row="bottom"] > .ct-container {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile                                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 689.98px) {
	#footer [data-row="middle"] {
		background-image: url("../images/footer-watermark-mobile.svg");
		background-size: 100% auto;
	}

	#footer [data-row="top"] > .ct-container {
		padding-block: 32px;
	}

	#footer [data-row="middle"] > .ct-container {
		padding-block: 32px;
	}

	#footer [data-row="top"] .ct-widget > .gspb_container {
		gap: 32px;
	}

	#footer .gspb_container:has(> h2) {
		gap: 12px;
	}

	#footer .gspb_container:has(> h2) > .gspb_text {
		font-size: 16px;
		line-height: 1.3;
		letter-spacing: 0.0014em;
	}

	#footer .ptm-newsletter-form {
		gap: 12px;
	}

	#footer .ptm-newsletter-form input[type="email"].wpcf7-form-control {
		height: 56px;
		min-height: 56px;
	}

	#footer .ptm-newsletter-form .ptm-newsletter-form__submit {
		min-height: 47px;
		padding-block: 11px;
	}

	#footer [data-row="middle"] .ct-widget > .gspb_container {
		gap: 32px;
	}

	/* Only Contactos: the other links are in the menu. */
	#footer .gspb_container:has(> .gspb_container > h4) {
		grid-template-columns: minmax(0, 1fr);
	}

	#footer .gspb_container:has(> .gspb_container > h4) > .gspb_container:not(:last-child) {
		display: none;
	}

	/* Contact lines sit 8px apart on mobile. */
	#footer .gspb_container:has(> h4):last-child,
	#footer .gspb_container:has(> h4) > .gspb_container,
	#footer .gspb_container:has(> h4) > .gspb_container > .gspb_container {
		gap: 8px;
	}

	#footer .gspb_container:has(> h4) > .gspb_container > .gspb_container > .gspb_text:last-of-type {
		margin-top: 0;
	}

	/* "By Marta Horta Studio" on its own line, as in the design. */
	#footer .ct-footer-copyright p {
		max-width: 265px;
	}

	#footer .ct-footer-copyright a {
		white-space: nowrap;
	}

	#footer [data-row="bottom"] > .ct-container {
		gap: 24px;
		padding-block: 16px 32px;
	}

	#footer [data-id="menu"] ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 24px;
		margin: 0;
	}

	#footer [data-id="menu"] ul > li > a {
		padding: 0;
	}
}