/**
 * F. Gaspari — Responsive Overrides
 *
 * Loaded after the shared foundations for cross-shell responsive overrides.
 * Prefer component-local rules unless the exception coordinates global UI.
 */

/* Header contract: the tested Elementor Nav Menu uses Dropdown Breakpoint:
   Tablet and exposes .elementor-nav-menu--dropdown-tablet on its wrapper. */
@media (max-width: 1024px) {
	.fg-footer {
		--fg-footer-grid-columns: repeat(2, minmax(0, 1fr));
		--fg-footer-grid-column-gap: var(--fg-space-7);
	}

	.fg-header__inner.fg-container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--fg-space-2);
		padding-inline: 0;
	}

	.fg-header .fg-header__brand {
		order: 1;
		flex: 0 1 clamp(7.5rem, 18vw, 10rem);
		min-inline-size: 0;
		max-inline-size: 10rem;
		margin-inline-end: auto;
	}

	.fg-header__brand img {
		display: block;
		max-inline-size: 100%;
		max-height: 40px;
	}

	.fg-header .fg-header__nav.elementor-widget-nav-menu {
		order: 2;
		flex: 0 0 auto;
		min-inline-size: 44px;
		inline-size: auto;
	}

	/* Frontend-only geometry: Elementor's editor overlays retain the widget's
	   normal positioning context in the documented edit/preview modes. */
	body:not(.elementor-editor-active):not(.elementor-editor-preview)
		.fg-header .fg-header__nav.elementor-widget-nav-menu {
		position: static;
	}

	.fg-header .fg-header__cta {
		order: 3;
		flex: 0 1 auto;
		min-inline-size: 0;
		inline-size: auto;
	}

	.fg-header .fg-header__cta.fg-btn .elementor-button {
		box-sizing: border-box;
		min-height: 44px;
		max-inline-size: 100%;
		padding-block: var(--fg-space-2);
		padding-inline: var(--fg-space-3);
		font-size: var(--fg-type-label);
		line-height: 1.15;
		letter-spacing: 0.08em;
		white-space: nowrap;
	}

	/* The root mobile dropdown styling is shared with responsive editing. */
	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu) {
		box-sizing: border-box;
		inline-size: 100%;
		max-inline-size: 100%;
		margin: 0;
		color: var(--fg-text-on-dark);
		background-color: var(--fg-surface-brand);
		border: var(--fg-border-on-dark);
		border-radius: var(--fg-radius-none);
		box-shadow: var(--fg-shadow-header);
	}

	/* On the frontend, anchor the panel to the full Header inner rather than
	   the narrow toggle widget. Elementor still owns visibility, height,
	   animation and functional state. */
	body:not(.elementor-editor-active):not(.elementor-editor-preview)
		.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu) {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
	}

	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu) > .elementor-nav-menu {
		box-sizing: border-box;
		inline-size: 100%;
		max-inline-size: 100%;
		margin: 0;
		padding: var(--fg-space-1) 0;
		list-style: none;
		background-color: transparent;
	}

	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu) > .elementor-nav-menu
		> .menu-item > .elementor-item {
		box-sizing: border-box;
		inline-size: 100%;
		min-height: 48px;
		padding: var(--fg-space-2) var(--fg-space-4);
		font-family: var(--fg-font-body);
		font-size: var(--fg-type-small);
		font-weight: var(--fg-weight-medium);
		line-height: var(--fg-leading-compact);
		white-space: normal;
		overflow-wrap: anywhere;
		color: var(--fg-text-on-dark);
		background-color: transparent;
		border: 0;
		border-bottom: 1px solid var(--fg-line-on-dark);
	}

	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu) > .elementor-nav-menu
		> .menu-item:last-child > .elementor-item {
		border-bottom: 0;
	}

	/* Mobile submenus stay in the same Verde family as the root panel. The
	   inset Bronze rule and lighter weight provide hierarchy without a card. */
	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu)
		.sub-menu.elementor-nav-menu--dropdown {
		box-sizing: border-box;
		min-inline-size: 0;
		max-inline-size: none;
		inline-size: auto;
		margin: 0 var(--fg-space-3) var(--fg-space-1);
		padding: var(--fg-space-1) 0;
		list-style: none;
		color: var(--fg-text-on-dark);
		background-color: var(--fg-surface-brand);
		border: 0;
		border-inline-start: var(--fg-border-accent);
		border-radius: var(--fg-radius-none);
		box-shadow: none;
	}

	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu)
		.sub-menu.elementor-nav-menu--dropdown
		> .menu-item > .elementor-sub-item {
		box-sizing: border-box;
		inline-size: 100%;
		min-height: 48px;
		padding: var(--fg-space-2) var(--fg-space-4);
		font-family: var(--fg-font-body);
		font-size: var(--fg-type-small);
		font-weight: var(--fg-weight-regular);
		line-height: var(--fg-leading-compact);
		white-space: normal;
		overflow-wrap: anywhere;
		color: var(--fg-text-on-dark-muted);
		background-color: transparent;
		border: 0;
		border-bottom: 1px solid var(--fg-line-on-dark);
		transform: none;
	}

	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu)
		.sub-menu.elementor-nav-menu--dropdown
		> .menu-item:last-child > .elementor-sub-item {
		border-bottom: 0;
	}

	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu)
		.sub-menu.elementor-nav-menu--dropdown
		> .menu-item > .elementor-sub-item:hover,
	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu)
		.sub-menu.elementor-nav-menu--dropdown
		> .menu-item > .elementor-sub-item:focus-visible,
	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown:not(.sub-menu)
		.sub-menu.elementor-nav-menu--dropdown
		> .menu-item > .elementor-sub-item[aria-current="page"] {
		color: var(--fg-text-on-dark);
		background-color: transparent;
		transform: none;
	}

	.fg-footer .fg-footer__inner {
		gap: var(--fg-space-7);
	}

	.fg-footer .fg-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--fg-space-7);
		row-gap: var(--fg-space-6);
	}

	.fg-footer .fg-footer__brand {
		grid-column: 1 / -1;
	}

	.fg-footer .fg-footer__bottom {
		grid-template-columns: var(--fg-footer-grid-columns);
		column-gap: var(--fg-footer-grid-column-gap);
		row-gap: var(--fg-space-4);
	}
}

@media (min-width: 1025px) {
	.fg-header__cta {
		flex-shrink: 0;
	}
}

@media (max-width: 767px) {
	.fg-header {
		--fg-header-mobile-gutter: clamp(
			var(--fg-space-1),
			4vw,
			var(--fg-space-3)
		);
		--fg-header-mobile-gap: clamp(
			var(--fg-space-1),
			2vw,
			var(--fg-space-2)
		);
	}

	.fg-header__inner.fg-container {
		width: calc(100% - (var(--fg-header-mobile-gutter) * 2));
		max-width: none;
		gap: var(--fg-header-mobile-gap);
	}

	.fg-header .fg-header__brand {
		flex-basis: clamp(4.5rem, 24vw, 6.5rem);
		max-inline-size: clamp(4.5rem, 24vw, 6.5rem);
	}

	.fg-header__brand img {
		max-height: 36px;
	}

	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-menu-toggle {
		min-width: 44px;
		min-height: 44px;
		padding: var(--fg-space-1);
	}

	.fg-header .fg-header__cta.fg-btn .elementor-button {
		padding-block: var(--fg-space-1);
		padding-inline: clamp(
			var(--fg-space-1),
			3vw,
			var(--fg-space-2)
		);
		font-size: var(--fg-type-label);
		letter-spacing: 0.06em;
		white-space: normal;
		text-align: center;
		text-wrap: balance;
	}

	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown .elementor-item,
	.fg-header .fg-header__nav.elementor-widget-nav-menu
		.elementor-nav-menu--dropdown .elementor-sub-item {
		min-height: 48px;
	}

	.fg-footer .fg-footer__inner {
		gap: var(--fg-space-6);
	}

	.fg-footer .fg-footer__main {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fg-space-6);
	}

	.fg-footer .fg-footer__brand {
		grid-column: auto;
		gap: var(--fg-space-4);
	}

	.fg-footer .fg-footer__bottom {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--fg-space-2);
	}

	/* Color carries the interaction on narrow viewports; removing the lateral
	   shift prevents a full-width wrapped link from creating scroll overflow. */
	.fg-footer .fg-footer__group a:hover,
	.fg-footer .fg-footer__group a:focus-visible {
		transform: none;
	}
}

@media (max-width: 340px) {
	.fg-header {
		--fg-header-mobile-gutter: var(--fg-space-1);
		--fg-header-mobile-gap: var(--fg-space-1);
		--fg-header-mobile-cta-size: clamp(7.5rem, 40vw, 8rem);
	}

	.fg-header .fg-header__brand {
		flex-basis: clamp(4rem, 22vw, 4.5rem);
		max-inline-size: clamp(4rem, 22vw, 4.5rem);
	}

	.fg-header .fg-header__cta {
		flex: 0 0 var(--fg-header-mobile-cta-size);
		min-inline-size: var(--fg-header-mobile-cta-size);
		max-inline-size: var(--fg-header-mobile-cta-size);
	}

	.fg-header .fg-header__cta.fg-btn .elementor-button {
		inline-size: 100%;
		max-inline-size: 100%;
		padding-inline: var(--fg-space-1);
		line-height: 1.15;
		letter-spacing: 0.04em;
		white-space: normal;
		overflow-wrap: normal;
		word-break: normal;
	}
}