/* Responsive refinements for touch screens. Desktop rules remain in their own stylesheets. */

@media (max-width: 1024px) {
	.elementor-2829 {
		--col-home-section-gap: clamp(72px, 8vw, 96px);
		--col-home-section-padding: clamp(38px, 5vw, 52px);
	}

	img,
	video,
	iframe {
		max-width: 100%;
	}

	.elementor-widget-video iframe,
	.elementor-widget-video video {
		aspect-ratio: 16 / 9;
	}

	.mobile-menus .mean-nav ul li a,
	.style-offcanvas-2 .mean-nav ul li a,
	.offcanvas__close button {
		min-height: 44px;
	}
}

@media (max-width: 767px) {
	.elementor-2829 {
		--col-home-section-gap: clamp(64px, 12vw, 92px);
		--col-home-section-padding: clamp(32px, 8vw, 46px);
	}

	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
		overflow-x: clip;
	}

	body {
		min-width: 0;
	}

	.site,
	#page,
	#content,
	.site-main,
	.elementor,
	.elementor-section-wrap,
	.elementor .e-con,
	.elementor .e-con-inner,
	.elementor-widget,
	.elementor-widget-container {
		min-width: 0;
		max-width: 100%;
	}

	.container,
	.container-fluid {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	/* Keep the header overlaid at the top, then pinned while scrolling. */
	#header-sticky.header-2.header-3 {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: 0 !important;
		z-index: 2000 !important;
		overflow: visible !important;
		isolation: isolate;
	}

	#header-sticky.header-2.header-3 .container-fluid,
	#header-sticky.header-2.header-3 .mega-menu-wrapper,
	#header-sticky.header-2.header-3 .header-main {
		position: relative;
		z-index: 2;
		overflow: visible;
	}

	#header-sticky.header-2.header-3 .header-right,
	#header-sticky.header-2.header-3 .header-right-icon {
		position: relative;
		z-index: 3;
		overflow: visible;
	}

	#header-sticky.header-2.header-3 .header-right-icon {
		gap: 10px;
	}

	#header-sticky.header-2.header-3 .main-header__search {
		position: relative;
		z-index: 4;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 44px;
		min-width: 44px;
		height: 44px;
		line-height: 1;
		border-radius: 50%;
	}

	#header-sticky.sticky.header-2.header-3 .header-main {
		min-height: 42px;
		padding-block: 0;
	}

	#header-sticky.sticky.header-2.header-3 .header-main .header-right-icon {
		gap: 7px;
	}

	#header-sticky.sticky.header-2.header-3 .main-header__search {
		width: 40px;
		min-width: 40px;
		height: 40px;
	}

	body.admin-bar #header-sticky.header-2.header-3 {
		top: 46px !important;
	}

	#header-sticky.header-2.header-3 .header-main .logo {
		position: absolute;
		inset: 0 auto auto 0;
		visibility: hidden;
	}

	.gt-hero-4 {
		isolation: isolate;
	}

	.gt-hero-4::after {
		position: absolute;
		inset: 0;
		z-index: 0;
		background-image: url("/wp-content/uploads/2026/09/cleg-logo-1.webp");
		background-repeat: no-repeat;
		background-position: 12px 8px;
		background-size: 68px auto;
		content: "";
		pointer-events: none;
	}

	.gt-hero-4 .gt-hero-image,
	.gt-hero-4 .gt-hero-content {
		position: relative;
		z-index: 1;
	}

	.elementor .e-con,
	.elementor .e-con-inner,
	.elementor-widget,
	.elementor-widget-container {
		min-width: 0;
	}

	.elementor img,
	.blog-single-content-wrap img,
	.blog-main-item-01 img {
		max-width: 100%;
	}

	.elementor h1,
	.elementor .elementor-heading-title.elementor-size-xxl {
		font-size: clamp(2rem, 8.5vw, 3.25rem);
		line-height: 1.12;
		text-wrap: balance;
	}

	.elementor h2,
	.elementor .elementor-heading-title.elementor-size-xl {
		font-size: clamp(1.65rem, 7vw, 2.5rem);
		line-height: 1.16;
		text-wrap: balance;
	}

	.elementor p,
	.elementor li,
	.blog-single-content-wrap .entry-content,
	.blog-main-item-01 .content {
		overflow-wrap: anywhere;
	}

	.gt-theme-btn,
	.theme-btn,
	.elementor-button,
	.blog-main-item-01 .blog-bottom .btn,
	.col-youtube-tabs button,
	.col-youtube-actions a,
	.col-youtube-channel-link a {
		min-height: 44px;
	}

	.gt-hero-section-2.gt-hero-4 {
		background-position: 30% center !important;
	}

	.gt-hero-4 {
		padding-top: calc(clamp(28px, 7vw, 52px) + 48px);
		padding-bottom: 34px;
	}

	.gt-hero-4 .container-fluid {
		padding-right: clamp(16px, 5vw, 24px);
		padding-left: clamp(16px, 5vw, 24px);
	}

	.gt-hero-4 .gt-hero-image {
		height: min(58svh, 440px);
		min-height: 0;
	}

	.gt-hero-4 .gt-hero-image img {
		width: auto !important;
		height: 100% !important;
		max-width: 100% !important;
		object-fit: contain;
		object-position: center top;
	}

	.gt-hero-4 .gt-hero-content {
		max-width: 38rem;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	.gt-hero-4 .gt-hero-content .sub-title {
		margin-bottom: 16px;
		font-size: clamp(11px, 3.2vw, 14px);
		letter-spacing: 0.16em;
		line-height: 1.5;
	}

	.gt-hero-4 .gt-hero-content h1 {
		font-size: clamp(30px, 8.5vw, 42px);
		line-height: 1.1;
	}

	.gt-hero-4 .gt-hero-content p {
		max-width: 34rem;
		margin: 16px auto 0;
		font-size: clamp(14px, 3.8vw, 16px);
		line-height: 1.65;
	}

	.gt-hero-4 .gt-hero-content .gt-hero-button {
		justify-content: center;
		gap: 10px;
		margin-top: 22px;
	}

	.gt-hero-4 .gt-hero-content .gt-hero-button .gt-theme-btn {
		flex: 1 1 138px;
		min-height: 46px;
		padding-right: 14px;
		padding-left: 14px;
	}

	/* Elementor can emit widget typography with higher specificity than the shared
	 * phone rules above. Keep every hero column and text line inside the viewport. */
	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4,
	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .container-fluid,
	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .row,
	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .row > [class*="col-"],
	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .gt-hero-content,
	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .gt-hero-image {
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
	}

	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .container-fluid {
		width: 100%;
	}

	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .row {
		width: auto;
		margin-right: 0;
		margin-left: 0;
	}

	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .row > [class*="col-"] {
		flex: 0 0 100%;
		width: 100%;
	}

	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .gt-hero-content .sub-title {
		max-width: 100%;
		font-size: clamp(11px, 3.2vw, 14px) !important;
		letter-spacing: 0.1em !important;
		line-height: 1.45;
		white-space: normal;
		text-wrap: balance;
	}

	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .gt-hero-content h1 {
		max-width: 100%;
		font-size: clamp(28px, 8.5vw, 38px) !important;
		line-height: 1.12 !important;
		letter-spacing: 0.01em !important;
		white-space: normal;
		word-break: normal;
		overflow-wrap: anywhere;
		text-wrap: balance;
	}

	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .gt-hero-content p {
		width: 100%;
		max-width: 100%;
		font-size: clamp(14px, 3.8vw, 16px) !important;
		line-height: 1.6 !important;
		white-space: normal;
		word-break: normal;
		overflow-wrap: anywhere;
	}

	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .gt-hero-content .gt-hero-button {
		width: 100%;
		max-width: 100%;
		flex-wrap: wrap;
	}

	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .gt-hero-content .gt-hero-button .gt-theme-btn {
		min-width: 0;
		max-width: 100%;
		font-size: 13px;
	}

	.col-troop-card:focus .col-troop-frame {
		border-color: var(--troop-glow);
		box-shadow: 0 0 21px color-mix(in srgb, var(--troop-glow) 43%, transparent), inset 0 0 14px rgba(0, 0, 0, 0.55);
	}

	.col-troop-card:focus .col-troop-name {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	/* A tapped portrait can show its label without pausing the moving roster. */
	.col-troop-marquee:hover .col-troop-track,
	.col-troop-marquee:focus-within .col-troop-track {
		animation-play-state: running;
	}

	.col-latest-post-feature {
		min-height: 0;
		padding-right: clamp(16px, 5vw, 24px);
		padding-left: clamp(16px, 5vw, 24px);
	}

	.col-latest-post-feature__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.col-latest-post-feature__image {
		max-height: min(90vw, 430px);
	}

	.col-latest-post-feature__heading h2 {
		font-size: clamp(25px, 7.2vw, 36px);
		line-height: 1.12;
	}

	.col-latest-post-feature__link {
		min-height: 46px;
		align-self: flex-start;
	}

	.col-youtube-heading .section-title-2 h2 {
		font-size: clamp(26px, 7vw, 38px);
		line-height: 1.15;
	}

	.elementor-2829 .elementor-element.elementor-element-79940f6 .col-youtube-section {
		padding: 56px 0 48px;
	}

	.col-youtube-video-row {
		align-items: start;
	}

	.col-youtube-actions a {
		justify-content: center;
		min-height: 44px;
	}

	.blog-main-item-01 .thumbnail-wrap img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.blog-main-item-01 .content .title {
		font-size: clamp(21px, 6vw, 27px);
		line-height: 1.3;
		word-break: normal;
		overflow-wrap: anywhere;
	}

	.blog-single-content-wrap .entry-content {
		font-size: 16px;
		line-height: 1.75;
	}

	.blog-single-content-wrap .entry-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.blog-single-content-wrap .entry-content pre,
	.blog-single-content-wrap .entry-content code {
		max-width: 100%;
		white-space: pre-wrap;
		word-break: break-word;
	}

	.blog-single-content-wrap .entry-content iframe,
	.blog-single-content-wrap .entry-content video {
		width: 100%;
		 aspect-ratio: 16 / 9;
	}
}

/* Keep the homepage portrait inside the hero at short and wide viewport ratios.
 * The artwork retains its original portrait ratio; the section grows with it. */
.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 {
	height: auto !important;
	min-height: 0 !important;
	padding-bottom: clamp(48px, 7vw, 100px) !important;
	overflow: visible !important;
}

.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .gt-hero-image {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: min(84vh, 760px) !important;
	height: min(84svh, 760px) !important;
	min-height: 0 !important;
	overflow: visible;
}

.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .gt-hero-image img {
	display: block;
	width: auto !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain;
	object-position: center bottom;
}

/* The two-row phone header needs a taller, equally ratio-safe portrait slot. */
@media (max-width: 767px) {
	.elementor-2829 .elementor-element-b5f32dc .gt-hero-4 .gt-hero-image {
		height: min(58vh, 440px) !important;
		height: min(58svh, 440px) !important;
	}
}

/* A logged-in admin toolbar must sit above the fixed site header at every size.
 * The JS offset follows the toolbar when WordPress scrolls it out of view. */
@media (min-width: 1200px) {
	body.admin-bar #header-sticky.header-2.header-3 {
		top: var(--col-header-admin-offset, 32px) !important;
	}
}

@media (max-width: 1199px) {
	body.admin-bar #header-sticky.header-2.header-3,
	body.admin-bar #header-sticky.sticky.header-2.header-3 {
		top: var(--col-header-admin-offset, 32px) !important;
	}
}

@media (max-width: 782px) {
	body.admin-bar #header-sticky.header-2.header-3,
	body.admin-bar #header-sticky.sticky.header-2.header-3 {
		top: var(--col-header-admin-offset, 46px) !important;
	}
}

@media (max-width: 520px) {
	.col-youtube-video-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.col-youtube-actions {
		flex-wrap: wrap;
	}

	.col-youtube-actions a,
	.col-youtube-actions .col-youtube-watch {
		flex: 1 1 96px;
		min-width: 0;
		font-size: 11px;
	}

	.blog-single-content-wrap .entry-content table {
		font-size: 14px;
	}
}

@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
	.col-troop-card:hover .col-troop-frame {
		transform: none;
	}

	.col-troop-card:hover:not(:focus) .col-troop-name {
		opacity: 0;
		transform: translate(-50%, 5px);
	}

	.col-troop-card:focus .col-troop-frame {
		transform: translateY(-3px) scale(1.025);
	}
}

/* The duplicate responsive nav is used only while the parent menu is hidden. */
#header-sticky.header-2.header-3 .col-responsive-header-nav {
	display: none;
}

/* Keep the full site navigation visible when the theme switches to its hidden
 * off-canvas menu at 1199px. The compact menu is populated from the real WP menu. */
@media (min-width: 1200px) and (max-width: 1365px) {
	#header-sticky.header-2.header-3 .container-fluid {
		padding-right: 24px;
		padding-left: 24px;
	}

	#header-sticky.header-2.header-3 .header-main {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
		padding-block: 6px;
	}

	#header-sticky.header-2.header-3 .header-main .logo img {
		width: 82px;
		max-height: 58px;
		object-fit: contain;
	}

	#header-sticky.header-2.header-3 .mean__menu-wrapper {
		min-width: 0;
	}

	#header-sticky.header-2.header-3 #mobile-menu > ul {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
	}

	#header-sticky.header-2.header-3 #mobile-menu > ul > li {
		margin-inline-end: clamp(3px, 0.48vw, 7px);
	}

	#header-sticky.header-2.header-3 #mobile-menu > ul > li > a {
		padding: 12px clamp(3px, 0.4vw, 6px);
		font-size: 12px;
		letter-spacing: 0;
	}
}

@media (max-width: 1199px) {
	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: clip;
	}

	#header-sticky.header-2.header-3,
	#header-sticky.sticky.header-2.header-3 {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: 0 !important;
		z-index: 9999 !important;
		width: 100%;
		overflow: visible !important;
		background: rgba(10, 11, 18, 0.97) !important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	body {
		padding-top: 58px !important;
	}

	#header-sticky.header-2.header-3 .container-fluid,
	#header-sticky.header-2.header-3 .mega-menu-wrapper,
	#header-sticky.header-2.header-3 .header-main {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	#header-sticky.header-2.header-3 .header-main {
		display: grid !important;
		grid-template-columns: minmax(62px, auto) minmax(0, 1fr) auto;
		align-items: center;
		gap: 8px;
		min-height: 58px !important;
		padding: 4px clamp(12px, 2vw, 24px) !important;
	}

	#header-sticky.header-2.header-3 .header-main .logo {
		position: relative !important;
		inset: auto !important;
		visibility: visible !important;
		z-index: 2;
		min-width: 0;
		width: fit-content;
		justify-self: start;
	}

	#header-sticky.header-2.header-3 .header-main .logo img {
		display: block;
		width: clamp(60px, 8vw, 90px) !important;
		max-width: 100%;
		max-height: 48px;
		object-fit: contain;
	}

	#header-sticky.header-2.header-3 .header-main .mean__menu-wrapper {
		display: none !important;
	}

	#header-sticky.header-2.header-3 .header-right {
		grid-column: 3;
		grid-row: 1;
		margin: 0 !important;
		min-width: 0;
	}

	#header-sticky.header-2.header-3 .header-right-icon {
		gap: 0 !important;
	}

	#header-sticky.header-2.header-3 .main-header__search {
		width: 42px;
		min-width: 42px;
		height: 42px;
	}

	#header-sticky.header-2.header-3 .col-responsive-header-nav {
		display: flex;
		grid-column: 2;
		grid-row: 1;
		align-items: center;
		justify-content: center;
		min-width: 0;
		gap: clamp(1px, 0.5vw, 8px);
	}

	#header-sticky.header-2.header-3 .col-responsive-header-nav ul {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-width: 0;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	#header-sticky.header-2.header-3 .col-responsive-header-nav li {
		min-width: 0;
		margin: 0 !important;
		list-style: none;
	}

	#header-sticky.header-2.header-3 .col-responsive-header-nav a {
		display: block;
		padding: 8px clamp(3px, 0.55vw, 9px) !important;
		color: #f5f1fa;
		font-family: "Chakra Petch", sans-serif;
		font-size: clamp(9px, 1.05vw, 12px) !important;
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

	#header-sticky.header-2.header-3 .col-responsive-header-nav a:hover,
	#header-sticky.header-2.header-3 .col-responsive-header-nav .current-menu-item > a,
	#header-sticky.header-2.header-3 .col-responsive-header-nav .current_page_item > a,
	#header-sticky.header-2.header-3 .col-responsive-header-nav a[aria-current="page"] {
		color: #d17aff;
	}

	#header-sticky.header-2.header-3 .col-responsive-header-nav a:focus-visible {
		outline: 2px solid #e5c6ff;
		outline-offset: -1px;
		border-radius: 4px;
	}

	.gt-hero-4::after {
		background-size: 58px auto;
	}

	.single-post .col-single-post-page {
		padding-top: 24px !important;
	}
}

@media (max-width: 767px) {
	body {
		padding-top: 97px !important;
	}

	#header-sticky.header-2.header-3 .header-main {
		grid-template-columns: minmax(58px, 1fr) auto;
		grid-template-rows: 42px 42px;
		gap: 2px 10px;
		min-height: 92px !important;
		padding: 5px 12px 6px !important;
	}

	#header-sticky.header-2.header-3 .header-main .logo img {
		width: 66px !important;
		max-height: 38px;
	}

	#header-sticky.header-2.header-3 .header-right {
		grid-column: 2;
		grid-row: 1;
	}

	#header-sticky.header-2.header-3 .main-header__search {
		width: 38px;
		min-width: 38px;
		height: 38px;
	}

	#header-sticky.header-2.header-3 .col-responsive-header-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		gap: 0;
	}

	#header-sticky.header-2.header-3 .col-responsive-header-nav ul {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		width: 100%;
		row-gap: 0;
	}

	#header-sticky.header-2.header-3 .col-responsive-header-nav a {
		min-height: 27px;
		padding: 6px 2px !important;
		font-size: clamp(9px, 2.7vw, 11px) !important;
	}

	.gt-hero-4::after {
		display: none;
	}

	.gt-hero-4 {
		padding-top: calc(clamp(28px, 7vw, 52px) + 64px);
	}
}