/*
 Theme Name:   Virtue Premium Child (Laguna)
 Theme URI:    https://www.lagunaresorts.com/
 Description:  Child theme for Laguna Resorts — custom home slider (replaces Revolution Slider), PHP 8 ready.
 Author:       Laguna Resorts / local maintenance
 Template:     virtue_premium
 Version:      1.1.7
 Text Domain:  virtue-laguna-child
*/

/* Parent styles load via functions.php */

/* -------------------------------------------------------------------------
   Typography trial — body: Noto Sans Thai · headings: IBM Plex Sans Thai
   Overrides Virtue Theme Options (Lato / Verdana) for EN + TH.
   ------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea,
.entry-content,
.main,
.sidebar,
#kadbreadcrumbs,
.page-header,
.virtue_image_widget_caption,
.kadence_image_widget_caption,
.topbarmenu,
.topbarmenu ul.sf-menu a,
#nav-main ul.sf-menu a,
.nav-main ul.sf-menu a,
#nav-second ul.sf-menu a,
.footernav,
.footerclass,
.footercredits {
	font-family: "Noto Sans Thai", "Noto Sans", system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.entry-title,
.page-header h1,
.page-header .entry-title,
#logo a.brand,
.logofont,
.home-iconmenu a h4,
.home-iconmenu .home-icon-item h4,
.captiontitle,
.product_item .product_details h5 {
	font-family: "IBM Plex Sans Thai", "Noto Sans Thai", "Noto Sans", system-ui, sans-serif !important;
	font-weight: 600;
}

h1, .h1, .page-header h1, .entry-title {
	font-weight: 700;
}

/* Body 15px · footer 14px (EN + TH) */
body,
body p,
.entry-content,
.entry-content p,
.main,
.sidebar {
	font-size: 15px !important;
	line-height: 1.55 !important;
	font-weight: 400;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Footer slightly smaller */
.footerclass,
.footerclass p,
.footerclass a,
.footerclass li,
.footerclass h3,
.footerclass h5,
#containerfooter,
#containerfooter p,
#containerfooter a,
#containerfooter li,
.footercredits,
.footercredits p,
.footernav,
.footernav a,
.footernav ul li a {
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/* -------------------------------------------------------------------------
   Language switcher flags — flag-icons (lipis) crisp SVG-derived PNG
   Equal opacity active/inactive; rounded corners
   ------------------------------------------------------------------------- */
.qtranxs_widget ul li,
.qtranxs_widget ul li.active,
.qtranxs_widget ul li:hover,
#qtranslate-3-chooser li,
#qtranslate-3-chooser li.active,
#qtranslate-3-chooser li:hover,
.language-chooser li,
.language-chooser li.active,
.language-chooser li:hover {
	opacity: 1 !important;
}

.qtranxs_widget img.qtranxs-flag,
#qtranslate-3-chooser img.qtranxs-flag,
.language-chooser img.qtranxs-flag {
	width: 22px !important;
	height: 16.5px !important;
	object-fit: cover;
	border-radius: 4px !important;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
	image-rendering: auto;
	display: inline-block;
	vertical-align: middle;
	opacity: 1 !important;
}

/* Background-flag mode (inline CSS from qTranslate) */
.qtranxs_flag {
	width: 22px !important;
	height: 16.5px !important;
	background-size: cover !important;
	background-position: center !important;
	border-radius: 4px !important;
	opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   Page featured image / page-head slider: rounded corners
   Covers Virtue “image” head (.postfeat) and “flex” slider head (.pagefeat)
   ------------------------------------------------------------------------- */
.postfeat.pageheadfeature .imghoverclass,
.postfeat.pageheadfeature .imghoverclass a.lightboxhover,
.postfeat.feature_container .imghoverclass,
.postfeat.feature_container .imghoverclass a.lightboxhover,
.pagefeat.container .kt-slickslider,
.pagefeat.container .kt-slick-slide,
.pagefeat.container .kt-slick-slide a,
.pagefeat.container .kt-slick-slide .gallery_item {
	display: block;
	border-radius: 16px !important;
	overflow: hidden !important;
}

.postfeat.pageheadfeature img.kt-feature-image,
.postfeat.feature_container img.kt-feature-image,
.postfeat.pageheadfeature img,
.postfeat.feature_container img,
.pagefeat.container .kt-slickslider img,
.pagefeat.container .kt-slick-slide img {
	border-radius: 16px !important;
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari clip fix */
}

/* -------------------------------------------------------------------------
   Home: space between hero slider and resort boxes
   ------------------------------------------------------------------------- */
body.home .lr-home-slider-wrap {
	margin-bottom: 0;
}

body.home #content.homepagecontent {
	padding-top: 56px;
	margin-top: 0;
}

@media (max-width: 767px) {
	body.home #content.homepagecontent {
		padding-top: 36px;
	}
}

/* -------------------------------------------------------------------------
   Home: resort image boxes (SiteOrigin panel layout) — rounded images
   Rows are 3-col via panels_data; this only styles corners + captions.
   ------------------------------------------------------------------------- */
body.home #pl-16 .kt-image-contain,
body.home #pl-16 .kt-image-inner-contain,
body.home #pl-16 .kad_img_upload_widget .kt-image-contain {
	border-radius: 12px;
	overflow: hidden;
}

body.home #pl-16 .kt-image-inner-contain a,
body.home #pl-16 .kt-image-contain a {
	display: block;
	border-radius: 12px;
	overflow: hidden;
}

body.home #pl-16 .panel-grid-cell img,
body.home #pl-16 .kt-image-inner-contain img,
body.home #pl-16 .kad_img_upload_widget img {
	border-radius: 12px !important;
	display: block;
	width: 100%;
	height: auto;
}

/* Caption title under each box */
body.home #pl-16 .virtue_image_widget_caption,
body.home #pl-16 .kadence_image_widget_caption,
body.home #pl-16 .virtue_image_widget_caption a,
body.home #pl-16 .kadence_image_widget_caption a {
	text-align: center;
	margin-top: 10px;
	font-size: 18px !important;
	line-height: 1.35 !important;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   Main header: vertically center logo + primary menu (all pages)
   Row gets a fixed band height; logo + menu sit in the vertical middle.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	header#kad-banner > .container > .row {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between;
		flex-wrap: nowrap;
		min-height: 120px;
		padding-top: 16px !important;
		padding-bottom: 16px !important;
		box-sizing: border-box;
	}

	/* Bootstrap 3 clearfix pseudo-elements break flex alignment */
	header#kad-banner > .container > .row:before,
	header#kad-banner > .container > .row:after {
		display: none !important;
		content: none !important;
	}

	header#kad-banner .kad-header-left,
	header#kad-banner .kad-header-right,
	header#kad-banner > .container > .row > [class*="col-"] {
		float: none !important;
		display: flex !important;
		align-items: center !important;
		align-self: center !important;
		min-height: 0;
		height: auto !important;
	}

	header#kad-banner .kad-header-left.clearfix:before,
	header#kad-banner .kad-header-left.clearfix:after,
	header#kad-banner #nav-main.clearfix:before,
	header#kad-banner #nav-main.clearfix:after {
		display: none !important;
		content: none !important;
	}

	header#kad-banner .kad-header-left {
		flex: 0 0 auto;
		width: auto !important;
		max-width: 33%;
	}

	header#kad-banner .kad-header-right {
		flex: 1 1 auto;
		justify-content: flex-end;
		width: auto !important;
	}

	header#kad-banner #logo,
	header#kad-banner #logo.logocase,
	header#kad-banner #logo .logocase,
	header#kad-banner #thelogo,
	header#kad-banner #logo a.brand {
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
		height: auto !important;
		line-height: 0 !important;
	}

	header#kad-banner #logo .kad-standard-logo {
		display: block !important;
		/* +20% vs previous 64px */
		height: 77px !important;
		max-height: 77px !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		object-fit: contain;
	}

	/* Kill Virtue Theme Options vertical nudge (menu_margin_top: 29) */
	header#kad-banner #nav-main,
	header#kad-banner .nav-main {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		width: 100%;
		height: auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end;
	}

	header#kad-banner #nav-main ul.sf-menu {
		display: flex !important;
		align-items: center !important;
		flex-wrap: wrap;
		justify-content: flex-end;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		height: auto !important;
	}

	header#kad-banner #nav-main ul.sf-menu > li {
		float: none !important;
		display: flex !important;
		align-items: center !important;
		height: auto !important;
		/* Gap between adjacent highlighted top-level items */
		margin-left: 4px !important;
		margin-right: 4px !important;
	}

	header#kad-banner #nav-main ul.sf-menu > li:first-child {
		margin-left: 0 !important;
	}

	header#kad-banner #nav-main ul.sf-menu > li:last-child {
		margin-right: 0 !important;
	}

	header#kad-banner #nav-main ul.sf-menu > li > a {
		display: flex !important;
		align-items: center !important;
		height: auto !important;
		/* Symmetric vertical + horizontal padding so labels sit mid-band */
		padding-top: 18px !important;
		padding-bottom: 18px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		line-height: 1.2 !important;
		box-sizing: border-box;
		border-radius: 10px;
		transition: background-color 0.2s ease, color 0.2s ease, border-radius 0.2s ease;
	}

	/* Keep parent title background while submenu is open (sfHover / :hover on li) */
	header#kad-banner #nav-main ul.sf-menu > li > a:hover,
	header#kad-banner #nav-main ul.sf-menu > li > a:focus,
	header#kad-banner #nav-main ul.sf-menu > li.sfHover > a,
	header#kad-banner #nav-main ul.sf-menu > li:hover > a,
	header#kad-banner #nav-main ul.sf-menu > li.current-menu-item > a,
	header#kad-banner #nav-main ul.sf-menu > li.current-menu-ancestor > a {
		background-color: #8ca39e !important;
		color: #ffffff !important;
		border-radius: 10px !important;
	}

	/* Parent with open dropdown: square bottom so it joins the panel, keep fill */
	header#kad-banner #nav-main ul.sf-menu > li.menu-item-has-children.sfHover > a,
	header#kad-banner #nav-main ul.sf-menu > li.menu-item-has-children:hover > a {
		border-radius: 10px 10px 0 0 !important;
		background-color: #8ca39e !important;
		color: #ffffff !important;
	}

	/* Dropdown panel */
	header#kad-banner #nav-main .sf-menu ul,
	header#kad-banner .nav-main .sf-menu ul {
		border-radius: 0 0 10px 10px !important;
		overflow: hidden;
		/* Lighter tint of brand green instead of pure white borders */
		border-color: #a8c4c0 !important;
		box-shadow: 0 8px 24px rgba(123, 163, 159, 0.22);
	}

	header#kad-banner #nav-main .sf-menu ul li,
	header#kad-banner .nav-main .sf-menu ul li {
		border-color: #a8c4c0 !important;
	}

	header#kad-banner #nav-main ul.sf-menu ul li a,
	header#kad-banner .nav-main ul.sf-menu ul li a {
		border-color: #a8c4c0 !important;
	}

	/* Last dropdown item: match panel bottom radius */
	header#kad-banner #nav-main .sf-menu ul li:last-child > a {
		border-radius: 0 0 10px 10px;
	}

	/* Submenu hover: darker shade of brand green (#7ba39f / #8ca39e) */
	header#kad-banner #nav-main ul.sf-menu ul li a:hover,
	header#kad-banner #nav-main ul.sf-menu ul li a:focus,
	header#kad-banner #nav-main ul.sf-menu ul li.current-menu-item > a,
	header#kad-banner .nav-main ul.sf-menu ul li a:hover,
	header#kad-banner .nav-main ul.sf-menu ul li a:focus,
	header#kad-banner .nav-main ul.sf-menu ul li.current-menu-item > a {
		background-color: #5f8a86 !important;
		color: #ffffff !important;
	}
}

/* Menu polish also applies below 992 if mobile shows similar styles — keep desktop-first above */