/**
 * Power to Move — mobile menu (Blocksy off-canvas), drawn as a bottom sheet
 * like the catalog filters sheet (Figma "Produtos — Catálogo (Mobile)",
 * 221:6137): white panel with 24px top corners over a dimmed page, a grab
 * handle, heading + round close button, 52px rows with the current page on
 * the grey surface, and a full-width green call to action.
 *
 * The content is Blocksy's own elements, placed and edited in
 * Customizer > Header > Offcanvas (mobile): Mobile Menu (Main Menu PT, with
 * Polylang's language switcher item), Button ("Pedir Proposta"), HTML
 * (contacts) and Socials (links in Customizer > General > Social Network
 * Accounts). Colours, heading and close button come from those settings;
 * this file only adds the sheet geometry and the row / card / chip shapes.
 *
 * The off-canvas only opens below Blocksy's desktop breakpoint (1000px).
 */

#offcanvas {
	--ptm-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ptm-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='8.25'/%3E%3Cpath d='M1.75 10h16.5M10 1.75c2.2 2.3 3.3 5 3.3 8.25s-1.1 5.95-3.3 8.25c-2.2-2.3-3.3-5-3.3-8.25S7.8 4.05 10 1.75z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 999.98px) {

	/* ------------------------------------------------------------------ */
	/* Sheet                                                                */
	/* ------------------------------------------------------------------ */

	#offcanvas[data-behaviour*="side"] .ct-panel-inner {
		--panel-padding: 24px;
		--panel-content-height: auto;
		inset: auto 0 0;
		width: 100%;
		max-width: none;
		height: auto;
		max-height: calc(100% - 24px);
		margin: 0;
		border-radius: 24px 24px 0 0;
		box-shadow: none;
		transform: translate3d(0, 100%, 0);
	}

	[data-panel*="in"] #offcanvas.active .ct-panel-inner {
		transform: translate3d(0, 0, 0);
	}

	/* Grab handle. */
	#offcanvas .ct-panel-inner::before {
		content: "";
		flex: none;
		align-self: center;
		width: 48px;
		height: 4px;
		margin-top: 12px;
		border-radius: 99px;
		background-color: var(--theme-palette-color-5);
	}

	/* On tablets the sheet spans the screen; its content stays a phone-wide column. */
	#offcanvas .ct-panel-actions,
	#offcanvas .ct-panel-content-inner {
		width: 100%;
		max-width: 600px;
		margin-inline: auto;
	}

	#offcanvas .ct-panel-actions {
		justify-content: space-between;
		min-height: 40px;
		padding-top: 24px;
	}

	#offcanvas .ct-panel-heading {
		font-size: 20px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: 0.0014em;
	}

	#offcanvas .ct-panel-actions .ct-toggle-close {
		--toggle-button-size: 40px;
		--toggle-button-padding: 0;
		--toggle-button-margin-end: 0;
		--toggle-button-margin-block: 0;
		margin-inline-start: auto;
	}

	#offcanvas .ct-panel-content-inner {
		--margin: 0;
		gap: 24px;
		min-height: 0;
		padding-bottom: max(32px, env(safe-area-inset-bottom));
		overscroll-behavior: contain;
	}

	/* ------------------------------------------------------------------ */
	/* Links                                                                */
	/* ------------------------------------------------------------------ */

	#offcanvas .mobile-menu > ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 8px;
	}

	#offcanvas .mobile-menu > ul > li {
		flex: 0 0 100%;
	}

	#offcanvas .mobile-menu > ul > li > .ct-menu-link,
	#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent {
		min-height: 52px;
		padding: 0 12px;
		border-radius: 8px;
		transition: background-color 0.15s ease;
	}

	#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link {
		padding: 0;
	}

	/* Current page, or the section it belongs to (a product under Produtos). */
	#offcanvas .mobile-menu > ul > li > :is(.ct-menu-link, .ct-sub-menu-parent):hover,
	#offcanvas .mobile-menu > ul > li:is(.current-menu-item, .current-menu-ancestor, .current_page_parent) > :is(.ct-menu-link, .ct-sub-menu-parent) {
		background-color: var(--theme-palette-color-11);
	}

	#offcanvas .mobile-menu > ul > li:is(.current-menu-item, .current-menu-ancestor, .current_page_parent) > :is(.ct-menu-link, .ct-sub-menu-parent) {
		font-weight: 600;
	}

	/* Arrow on plain links (items with a sub-menu keep Blocksy's toggle). */
	#offcanvas .mobile-menu > ul > li:not(.lang-item, [class*="children"]) > .ct-menu-link::after {
		content: "";
		flex: none;
		width: 8px;
		height: 14px;
		margin-inline-start: auto;
		background-color: var(--theme-palette-color-10);
		mask: var(--ptm-icon-chevron-right) center / contain no-repeat;
	}

	#offcanvas .mobile-menu .sub-menu {
		margin-bottom: 8px;
		padding-inline-start: 12px;
	}

	#offcanvas .mobile-menu .sub-menu .ct-menu-link {
		min-height: 44px;
		padding-inline: 12px;
	}

	/* Polylang's language switcher item: chips under the links. */
	#offcanvas .mobile-menu > ul > li.lang-item {
		flex: none;
	}

	#offcanvas .mobile-menu > ul > li.lang-item:not(.lang-item ~ .lang-item) {
		margin-top: 8px;
	}

	#offcanvas .mobile-menu > ul > li.lang-item > .ct-menu-link {
		gap: 8px;
		min-height: 40px;
		padding: 0 16px;
		border: 1px solid var(--theme-palette-color-6);
		border-radius: 999px;
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
	}

	#offcanvas .mobile-menu > ul > li.lang-item > .ct-menu-link::before {
		content: "";
		flex: none;
		width: 16px;
		height: 16px;
		background-color: currentColor;
		mask: var(--ptm-icon-globe) center / contain no-repeat;
	}

	#offcanvas .mobile-menu > ul > li.lang-item.current-lang > .ct-menu-link {
		border-color: var(--theme-palette-color-2);
		background-color: var(--theme-palette-color-2);
		color: var(--theme-palette-color-8);
	}

	/* ------------------------------------------------------------------ */
	/* Call to action                                                       */
	/* ------------------------------------------------------------------ */

	#offcanvas .ct-header-cta {
		align-self: stretch;
	}

	#offcanvas .ct-header-cta .ct-button {
		--theme-button-min-height: 52px;
		--theme-button-padding: 14px 24px;
		width: 100%;
		justify-content: center;
	}

	/* ------------------------------------------------------------------ */
	/* Contacts (HTML element)                                              */
	/* ------------------------------------------------------------------ */

	#offcanvas .ct-header-text {
		align-self: stretch;
		padding: 16px 20px;
		border-radius: 12px;
		background-color: var(--theme-palette-color-11);
	}

	#offcanvas .ct-header-text .entry-content {
		display: flex;
		flex-direction: column;
		gap: 8px;
		font-size: 14px;
		line-height: 1.4;
	}

	#offcanvas .ct-header-text .entry-content > * {
		margin: 0;
	}

	#offcanvas .ct-header-text strong {
		font-size: 16px;
		font-weight: 600;
		color: var(--theme-palette-color-2);
	}

	#offcanvas .ct-header-text small {
		font-size: 12px;
	}

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

	/* ------------------------------------------------------------------ */
	/* Socials                                                              */
	/* ------------------------------------------------------------------ */

	#offcanvas .ct-header-socials .ct-icon-container {
		width: 48px;
		height: 48px;
	}

	/* WhatsApp: the green one, as in the footer. */
	#offcanvas .ct-header-socials [data-network="whatsapp"] .ct-icon-container {
		border-color: var(--theme-palette-color-1);
		background-color: var(--theme-palette-color-1);
	}
}

@media (max-width: 999.98px) and (prefers-reduced-motion: reduce) {
	#offcanvas[data-behaviour*="side"] .ct-panel-inner {
		transition: none;
	}
}