/*
Theme Name: Tevily Child
Theme URI: https://gaviaspreview.com/wp/tevily/
Author URI: https://themeforest.net/user/gavias
Author: Gaviasthemes Team
Description: Child theme for the Tevily theme.
Template: tevily
*/

/* ============================================================
   Megamenu: link hover color (same as regular menu items).
   The parent theme locks megamenu link color with !important,
   which kills the hover effect — re-enable it here.
   ============================================================ */
ul.gva-nav-menu > li.megamenu-main .megamenu-wrap-inner ul.megamenu-sub > li > a:hover,
ul.gva-nav-menu > li.megamenu-main .megamenu-wrap-inner ul.megamenu-sub > li > a:focus,
ul.gva-nav-menu > li.megamenu-main .megamenu-wrap-inner ul.megamenu-sub > li > a:active {
	color: var(--tevily-theme-color, #AF794D) !important;
}


/* ============================================================
   Mobile: editorial "Beautiful Places" rail (ed-places--film).
   The desktop pinned-scroll stage depends on JS that is not
   critical on phones — collapse it into a simple swipeable strip
   and guarantee the cards/photos are always visible.
   ============================================================ */

@media (max-width: 760px) {
	.ed-home .ed-place-stage { height: auto !important; }
	.ed-place-stage__sticky {
		position: static !important;
		height: auto !important;
		display: block !important;
		overflow: visible !important;
	}
	.ed-places--film .ed-places__viewport {
		overflow-x: auto !important;
		overflow-y: hidden !important;
		touch-action: pan-x pan-y !important;
		-webkit-overflow-scrolling: touch;
	}
	.ed-places--film .ed-places__grid {
		transform: none !important;
		width: max-content !important;
		gap: 16px !important;
		padding: 0 20px 26px !important;
	}
	.ed-places--film .ed-place-card { width: 78vw !important; min-width: 0 !important; }
	.ed-places--film .ed-place-card__ph { height: 380px !important; }
	.ed-places--film .ed-place-card__ph img { opacity: 1 !important; transform: none !important; }
	.ed-places--film .ed-places__foot { padding: 16px 20px 0 !important; }
	.ed-places__nav { display: none !important; }
}


/* ============================================================
   Mobile header: bigger logo + social buttons below the menu panel.
   The opened mobile menu (.gva-offcanvas-content) is fixed with
   z-index 9999; the social buttons block from the parent theme
   uses the same 9999 and is printed later in <head>, so it paints
   on top of the panel. Demote the buttons and lift the panel.
   ============================================================ */

/* menu drawer close button: minimal terracotta ✕ (rotates on hover) */
.gva-offcanvas-content .top-canvas .control-close-mm {
	background: transparent;
	border: 0;
	width: 44px;
	height: 44px;
	margin-top: 6px;
	color: #B34423;
	text-align: center;
	transition: transform .18s, color .18s;
}
.gva-offcanvas-content .top-canvas .control-close-mm i {
	display: none;
}
.gva-offcanvas-content .top-canvas .control-close-mm:before {
	content: "\2715";
	font-family: inherit;
	font-style: normal;
	font-size: 24px;
	line-height: 44px;
}
.gva-offcanvas-content .top-canvas .control-close-mm:hover {
	transform: rotate(90deg);
	color: #7d2d14;
}

/* new wide logo: give it more room on desktop too */
.header-default .header-bottom .header-bottom-inner .logo {
	width: 220px;
}

@media (max-width: 1024px) {
	/* social buttons: stay above page content, below the menu panel */
	.mobile-social-custom {
		z-index: 500 !important;
	}

	/* opened menu panel always on top of header elements */
	.gva-offcanvas-content.mobile,
	.gva-offcanvas-content.open,
	.gva-offcanvas-content {
		z-index: 99999;
	}
}

/* larger logos on mobile: drawer top bar + mobile header */
@media (max-width: 1024px) {
	.gva-offcanvas-content .top-canvas .logo-mm {
		padding: 12px 10px 8px 22px;
	}
	.gva-offcanvas-content .top-canvas .logo-mm img {
		max-height: 40px;
	}
	.gva-offcanvas-content .top-canvas {
		line-height: 56px;
	}
	.gva-offcanvas-content .top-canvas .control-close-mm {
		margin-top: 6px;
	}
	.header-mobile .header-mobile-content .header-content-inner .header-left .logo-mobile {
		max-width: 210px;
	}
	.header-default .header-bottom .header-bottom-inner .logo {
		width: 210px;
	}
}