/**
 * Off-canvas Blocksy (#offcanvas) — layout LigArena.
 * Desktop: assets/img/decor/canva.svg (712.518 × 1078)
 * Mobile:  assets/img/decor/canva-mobile.svg (376.383 × 812)
 *
 * A forma NÃO usa contain / max-width / aspect-ratio no contentor:
 * a largura vem da altura real do overlay (JS: --ligarena-offcanvas-panel-w).
 */

 [data-header*="type-1"] #offcanvas,
 #offcanvas {
	 --ligarena-offcanvas-canvas: url("../img/decor/canva.svg?v=1078");
	 --ligarena-offcanvas-canvas-ratio: 712.518 / 1078;
	 --ligarena-offcanvas-beak-share: 0.28;
	 --ligarena-offcanvas-pad-x: clamp(1.5rem, 3.5vw, 3.5rem);
	 --ligarena-offcanvas-content-inset: clamp(1rem, 2.5vw, 1.75rem);
	 --ligarena-offcanvas-menu-offset: calc(
		 (100% * var(--ligarena-offcanvas-beak-share))
		 + var(--ligarena-offcanvas-content-inset)
	 );
	 --ligarena-offcanvas-duration: 0.3s;
	 --side-panel-width: 100% !important;
	 --side-panel-offset: 0px;
	 --panel-padding: var(--ligarena-offcanvas-pad-x);
	 position: fixed !important;
	 top: 0 !important;
	 right: 0 !important;
	 bottom: 0 !important;
	 left: 0 !important;
	 width: 100% !important;
	 max-width: none !important;
	 height: 100% !important;
	 height: 100dvh !important;
	 min-height: 100vh !important;
	 min-height: 100dvh !important;
	 max-height: none !important;
	 overflow: hidden;
	 pointer-events: none;
	 transition: opacity var(--ligarena-offcanvas-duration) ease;
 }
 
 [data-header*="type-1"] #offcanvas::before,
 #offcanvas::before {
	 content: "";
	 position: absolute;
	 inset: 0;
	 z-index: 0;
	 background: rgb(0 28 72 / 0.3);
	 opacity: 0;
	 pointer-events: none;
	 transition: opacity var(--ligarena-offcanvas-duration) ease;
 }
 
 [data-header*="type-1"] #offcanvas.active,
 #offcanvas.active {
	 opacity: 1 !important;
	 pointer-events: auto;
 }
 
 body[data-panel*="in"] [data-header*="type-1"] #offcanvas.active::before,
 body[data-panel*="in"] #offcanvas.active::before {
	 opacity: 1;
	 pointer-events: auto;
 }
 
 body[data-panel*="in"] #header.ct-header [data-id="trigger"] {
	 opacity: 0;
	 pointer-events: none;
 }
 
 [data-header*="type-1"] #offcanvas .ct-panel-inner,
 #offcanvas .ct-panel-inner {
	 position: absolute !important;
	 top: 0 !important;
	 right: 0 !important;
	 bottom: 0 !important;
	 left: auto !important;
	 z-index: 1;
	 width: var(--ligarena-offcanvas-panel-w, calc(100dvh * 712.518 / 1078)) !important;
	 max-width: none !important;
	 height: 100% !important;
	 height: 100dvh !important;
	 min-height: 100% !important;
	 min-height: 100dvh !important;
	 max-height: none !important;
	 margin: 0 !important;
	 aspect-ratio: unset;
	 background-color: transparent;
	 background-image: none;
	 box-shadow: none !important;
	 border-radius: 0 !important;
	 overflow: hidden;
	 clip-path: none;
	 pointer-events: none;
	 display: flex;
	 flex-direction: column;
	 align-items: stretch;
	 align-self: flex-end !important;
	 transform: translate3d(100%, 0, 0);
	 transition: transform var(--ligarena-offcanvas-duration) ease;
	 --theme-link-initial-color: #ffffff;
 }
 
 [data-header*="type-1"] #offcanvas.active .ct-panel-inner,
 #offcanvas.active .ct-panel-inner {
	 pointer-events: none;
 }
 
 body[data-panel*="in"] [data-header*="type-1"] #offcanvas.active .ct-panel-inner,
 body[data-panel*="in"] #offcanvas.active .ct-panel-inner {
	 transform: translate3d(0, 0, 0);
 }
 
 [data-header*="type-1"] #offcanvas .ct-panel-inner::before,
 #offcanvas .ct-panel-inner::before {
	 content: "";
	 position: absolute;
	 inset: 0;
	 z-index: 0;
	 background: var(--ligarena-offcanvas-canvas) top right / 100% 100% no-repeat;
	 pointer-events: none;
	 box-shadow: -28px 0 48px rgb(0 12 32 / 0.28);
 }
 
 [data-header*="type-1"] #offcanvas .ct-panel-inner::after,
 #offcanvas .ct-panel-inner::after {
	 content: none;
	 display: none;
 }
 
 [data-header*="type-1"] #offcanvas .ct-panel-actions,
 #offcanvas .ct-panel-actions {
	 position: relative;
	 z-index: 3;
	 display: flex;
	 justify-content: flex-end;
	 align-items: center;
	 align-self: stretch !important;
	 height: var(--header-height, var(--ligarena-header-height, 6rem));
	 min-height: 0;
	 flex: 0 0 auto;
	 margin: 0;
	 padding-top: 0 !important;
	 padding-bottom: 0;
	 padding-inline-start: 0 !important;
	 padding-inline-end: clamp(1.25rem, 2vw, 2.25rem) !important;
	 width: 100% !important;
	 max-width: none !important;
	 box-sizing: border-box;
	 pointer-events: auto;
 }
 
 #offcanvas .ligarena-offcanvas-heading,
 #offcanvas .ct-panel-heading {
	 position: absolute;
	 top: 50%;
	 left: var(--ligarena-offcanvas-heading-left, var(--ligarena-offcanvas-menu-offset));
	 z-index: 1;
	 transform: translateY(-50%);
	 flex: 0 1 auto;
	 width: auto;
	 margin: 0;
	 padding: 0;
	 font-family: var(--ligarena-font-heading, "LigaPortugal", "Montserrat", sans-serif);
	 font-size: clamp(1.15rem, 0.7rem + 1.1vw, 1.5rem);
	 font-weight: 400;
	 letter-spacing: 0.14em;
	 line-height: 1;
	 text-transform: uppercase;
	 color: var(--theme-link-initial-color, #ffffff);
	 pointer-events: none;
 }
 
 #offcanvas .ct-toggle-close {
	 --toggle-button-size: clamp(1.75rem, 2.4vw, 2.15rem);
	 --toggle-button-padding: 0;
	 --toggle-button-margin-end: 0;
	 --toggle-button-margin-block: 0 !important;
	 --toggle-button-margin-start: auto;
	 margin-block: 0 !important;
	 margin-inline-start: auto !important;
	 margin-inline-end: 0 !important;
	 color: var(--theme-link-initial-color, #ffffff);
 }
 
 #offcanvas .ct-toggle-close .ct-icon {
	 fill: currentColor;
 }
 
 #offcanvas .ct-panel-content {
	 position: relative;
	 z-index: 3;
	 pointer-events: auto;
	 align-items: stretch;
	 width: 100%;
	 margin-left: 0;
	 flex: 1 1 auto;
	 min-height: 0;
	 overflow: hidden;
	 padding-inline-start: calc(100% * var(--ligarena-offcanvas-beak-share));
	 box-sizing: border-box;
 }
 
 #offcanvas .ct-panel-content-inner {
	 align-items: stretch;
	 justify-content: flex-start;
	 width: 100%;
	 margin-left: 0;
	 margin-right: 0;
	 box-sizing: border-box;
	 --horizontal-alignment: flex-start;
	 --text-horizontal-alignment: left;
	 padding-top: clamp(1.75rem, 4vh, 3rem);
	 padding-bottom: clamp(2rem, 5vh, 3.5rem);
	 padding-inline-start: var(--ligarena-offcanvas-content-inset);
	 padding-inline-end: var(--ligarena-offcanvas-pad-x);
	 overflow-y: auto;
	 -webkit-overflow-scrolling: touch;
	 scrollbar-width: none;
	 overscroll-behavior: contain;
 }
 
 #offcanvas .ct-panel-content-inner::-webkit-scrollbar {
	 display: none;
 }
 
 #offcanvas .mobile-menu,
 #offcanvas [data-id="mobile-menu"] {
	 width: 100%;
	 --horizontal-alignment: flex-start;
	 --text-horizontal-alignment: left;
 }
 
 #offcanvas .mobile-menu > ul {
	 display: flex;
	 flex-direction: column;
	 align-items: stretch;
	 gap: clamp(0.25rem, 0.65vh, 0.55rem);
	 width: 100%;
	 margin: 0;
	 padding: 0;
	 list-style: none;
 }
 
 #offcanvas .mobile-menu li {
	 display: flex;
	 flex-direction: column;
	 align-items: stretch !important;
	 width: 100%;
	 margin: 0;
	 padding: 0;
	 border: 0;
 }
 
 #offcanvas .mobile-menu .ct-sub-menu-parent,
 #offcanvas .mobile-menu .ct-menu-link {
	 display: flex;
	 align-items: center;
	 justify-content: flex-start !important;
	 width: 100%;
	 text-align: left !important;
 }
 
 #offcanvas .mobile-menu .ct-menu-link {
	 padding: clamp(0.4rem, 0.85vh, 0.65rem) 0;
	 color: var(--theme-link-initial-color, #ffffff);
	 font-family: var(--ligarena-font-heading, "LigaPortugal", "Montserrat", sans-serif);
	 font-size: clamp(1.05rem, 0.55rem + 1.15vw, 1.55rem);
	 font-weight: 400;
	 line-height: 1.2;
	 letter-spacing: 0.04em;
	 text-decoration: none;
	 text-transform: uppercase;
	 text-align: left !important;
	 background: transparent;
	 border: 0;
	 transition: opacity 0.2s ease;
 }
 
 #offcanvas .mobile-menu .ct-menu-link:hover,
 #offcanvas .mobile-menu .ct-menu-link:focus-visible {
	 opacity: 0.72;
	 color: var(--theme-link-hover-color, var(--theme-link-initial-color, #ffffff));
 }
 
 #offcanvas .mobile-menu .current-menu-item > .ct-menu-link,
 #offcanvas .mobile-menu .current-menu-item .ct-sub-menu-parent > .ct-menu-link {
	 opacity: 0.72;
 }
 
 #offcanvas .ct-toggle-dropdown-desktop,
 #offcanvas .ct-toggle-dropdown-mobile,
 #offcanvas .ct-submenu-indicator {
	 display: none !important;
 }
 
 @media (min-width: 769px) {
	 #offcanvas .ct-toggle-close {
		 --toggle-button-size: clamp(2rem, 2.5vw, 2.5rem);
		 --theme-icon-size: clamp(0.85rem, 1.1vw, 1rem);
	 }
 
	 #offcanvas .ct-panel-content-inner {
		 padding-top: clamp(1.25rem, 2.5vh, 2rem);
	 }
 }
 
 @media (max-width: 768px) {
	 [data-header*="type-1"] #offcanvas,
	 #offcanvas {
		 --ligarena-offcanvas-canvas: url("../img/decor/canva-mobile.svg?v=812");
		 --ligarena-offcanvas-canvas-ratio: 376.383 / 812;
		 --ligarena-offcanvas-beak-share: 0.3;
		 --ligarena-offcanvas-pad-x: clamp(0.9rem, 4vw, 1.35rem);
		 --ligarena-offcanvas-content-inset: clamp(0.55rem, 3vw, 0.9rem);
	 }
 
	 [data-header*="type-1"] #offcanvas .ct-panel-inner,
	 #offcanvas .ct-panel-inner {
		 width: var(--ligarena-offcanvas-panel-w, calc(100dvh * 376.383 / 812)) !important;
	 }
 
	 [data-header*="type-1"] #offcanvas .ct-panel-actions,
	 #offcanvas .ct-panel-actions {
		 height: var(--header-height, var(--ligarena-header-height, 6rem));
		 padding-inline-end: var(--ligarena-offcanvas-pad-x);
	 }
 
	 #offcanvas .ligarena-offcanvas-heading,
	 #offcanvas .ct-panel-heading {
		 font-size: 1.5rem;
		 letter-spacing: 0.02em;
	 }
 
	 #offcanvas .ct-toggle-close {
		 --toggle-button-size: clamp(1.85rem, 5.5vw, 2.25rem);
		 --theme-icon-size: clamp(0.9rem, 2.8vw, 1.1rem);
	 }
 
	 #offcanvas .ct-panel-content-inner {
		 padding-top: clamp(0.65rem, 2vh, 1.25rem);
		 padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
	 }
 
	 #offcanvas .mobile-menu > ul {
		 gap: 0.15rem;
	 }
 
	 #offcanvas .mobile-menu .ct-menu-link {
		 font-size: 1.5rem;
		 padding: 0.8rem 0;
		 line-height: 1.15;
		 letter-spacing: 0.02em;
	 }
 }
 
 @media (max-width: 390px) {
	 [data-header*="type-1"] #offcanvas,
	 #offcanvas {
		 --ligarena-offcanvas-beak-share: 0.28;
		 --ligarena-offcanvas-pad-x: 0.85rem;
		 --ligarena-offcanvas-content-inset: 0.45rem;
	 }
 
	 [data-header*="type-1"] #offcanvas .ct-panel-actions,
	 #offcanvas .ct-panel-actions {
		 height: var(--header-height, var(--ligarena-header-height, 5rem));
	 }
 
	 #offcanvas .mobile-menu .ct-menu-link {
		 font-size: 1.5rem;
		 padding: 0.8rem 0;
	 }
 }
 