/**
 * Turismo Malesia - Kadence overrides.
 *
 * Aligns Kadence's header builder, navigation, mobile drawer and content
 * wrappers with the design. Layout choices (which items go in which row,
 * sticky on/off) stay in the Customizer; this file only handles the look.
 */

/* ==========================================================================
   Header
   ========================================================================== */

/* Main row: white, with the logo colours as a thin rule underneath */
#masthead .site-main-header-wrap .site-header-row-container-inner {
	border-bottom: 1px solid var(--tm-border);
	background: var(--tm-white);
}

#masthead .site-main-header-inner-wrap {
	min-height: var(--tm-header-h);
}

#masthead::after {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--tm-ink) 0 62%, var(--tm-red) 62% 86%, var(--tm-accent) 86% 100%);
}

/* Logo */
#masthead .site-branding a.brand img {
	width: auto;
	max-height: 52px;
}

/* Tablet and phone: the width comes from the Customizer (logo_width), the
   height cap only keeps it on one line next to the menu icon. */
@media (max-width: 1024px) {
	#masthead .site-branding a.brand img {
		max-height: 50px;
	}
}

/* Desktop navigation: sans, ink; hover and current page get a red underline */
#masthead .header-navigation .header-menu-container > ul > li.menu-item > a {
	color: var(--tm-ink);
	font-family: var(--tm-font-nav);
	font-size: 1.0625rem; /* 17 */
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline 2px transparent;
	text-underline-offset: 10px;
	transition: text-decoration-color var(--tm-dur) var(--tm-ease), color var(--tm-dur) var(--tm-ease);
}

#masthead .header-navigation .header-menu-container > ul > li.menu-item > a:hover,
#masthead .header-navigation .header-menu-container > ul > li.menu-item.current-menu-item > a,
#masthead .header-navigation .header-menu-container > ul > li.menu-item.current-menu-ancestor > a {
	color: var(--tm-brand-dark);
	text-decoration-color: var(--tm-red);
}

/* Dropdowns */
/* No overflow: hidden here: it would clip the 3rd-level flyouts.
   Corners are rounded on the first/last links instead. */
#masthead .header-navigation ul ul.sub-menu {
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-md);
	background: var(--tm-white);
	box-shadow: var(--tm-shadow-md);
}

#masthead .header-navigation ul ul.sub-menu li.menu-item > a {
	padding-block: 0.625rem;
	border-bottom: 0;
	color: var(--tm-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

#masthead .header-navigation ul ul.sub-menu > li.menu-item:first-child > a {
	border-top-left-radius: calc(var(--tm-radius-md) - 1px);
	border-top-right-radius: calc(var(--tm-radius-md) - 1px);
}

#masthead .header-navigation ul ul.sub-menu > li.menu-item:last-child > a {
	border-bottom-left-radius: calc(var(--tm-radius-md) - 1px);
	border-bottom-right-radius: calc(var(--tm-radius-md) - 1px);
}

/* 3rd level: flyout aligned with the hovered item. No gap on the left,
   or the pointer would leave the hover area on its way to the flyout. */
#masthead .header-navigation ul ul.sub-menu ul.sub-menu {
	top: -1px;
}

#masthead .header-navigation ul ul.sub-menu li.menu-item > a:hover {
	background: var(--tm-gray-100);
	color: var(--tm-brand-dark);
}

/* Current page in a dropdown: black background, white text (overrides
   Kadence's grey-on-grey current item) */
#masthead .header-navigation ul ul.sub-menu li.menu-item.current-menu-item > a,
#masthead .header-navigation ul ul.sub-menu li.menu-item.current-menu-item > a:hover {
	background: var(--tm-ink);
	color: var(--tm-white);
}

/* --------------------------------------------------------------------------
   Mega menu (inc/mega-menu.php). The panel is the item's own ul.sub-menu,
   stretched across the header row and aligned with the content container.
   ----------------------------------------------------------------------- */

#masthead .site-main-header-wrap .site-header-row-container-inner {
	position: relative;
}

#masthead .header-navigation li.tm-mega {
	position: static;
}

#masthead .header-navigation li.tm-mega > ul.tm-mega__panel {
	display: grid;
	grid-template-columns: repeat(var(--tm-mega-cols, 3), minmax(170px, 230px));
	gap: var(--tm-space-8) var(--tm-space-12);
	align-items: start;
	top: 100%;
	right: 0;
	left: 0;
	padding: var(--tm-space-8) max(var(--tm-gutter), calc((100% - var(--tm-container)) / 2));
	border: 0;
	/* The panel covers the header row's bottom border (absolute offsets start
	   inside it), so it draws its own divider plus a faint inner shade. */
	border-top: 1px solid var(--tm-border);
	border-bottom: 1px solid var(--tm-border);
	border-radius: 0;
	background: var(--tm-white) linear-gradient(to bottom, rgba(11, 29, 54, 0.035), rgba(11, 29, 54, 0) 10px) no-repeat;
	box-shadow: 0 28px 40px -28px rgba(11, 29, 54, 0.28);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

#masthead .header-navigation li.tm-mega > ul.tm-mega__panel.has-intro {
	grid-template-columns: minmax(240px, 290px) repeat(var(--tm-mega-cols, 3), minmax(170px, 230px));
}

/* Same open states as Kadence's dropdowns (hover, keyboard toggle, focus) */
#masthead .header-navigation li.tm-mega:hover > ul.tm-mega__panel,
#masthead .header-navigation li.tm-mega.menu-item--toggled-on > ul.tm-mega__panel,
#masthead .header-navigation li.tm-mega:not(.menu-item--has-toggle):focus-within > ul.tm-mega__panel {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* Hover bridge over the gap between the menu link and the panel */
#masthead .header-navigation li.tm-mega > ul.tm-mega__panel::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 18px;
}

/* No dropdown arrows or keyboard toggles inside the panel */
#masthead .header-navigation .tm-mega__panel .dropdown-nav-toggle,
#masthead .header-navigation .tm-mega__panel .dropdown-nav-special-toggle {
	display: none;
}

#masthead .header-navigation .tm-mega__panel .nav-drop-title-wrap {
	padding-right: 0;
}

/* Intro card */
#masthead .header-navigation .tm-mega__intro {
	display: flex;
	flex-direction: column;
	gap: var(--tm-space-2);
	align-self: stretch;
	padding: var(--tm-space-6);
	border-radius: var(--tm-radius-md);
	background: var(--tm-ink);
	color: var(--tm-on-dark-2);
}

#masthead .header-navigation .tm-mega__title {
	margin: 0;
	color: var(--tm-white);
	font-family: var(--tm-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.1;
	text-transform: none;
}

#masthead .header-navigation .tm-mega__text {
	margin: 0;
	font-size: var(--tm-fs-sm);
	line-height: 1.5;
}

#masthead .header-navigation .tm-mega__cta {
	margin-top: auto;
	padding-top: var(--tm-space-4);
	color: var(--tm-brand-light);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

#masthead .header-navigation .tm-mega__cta:hover {
	color: var(--tm-white);
}

/* Column heading (beats the dropdown link rule: ul ul.sub-menu li.menu-item > a) */
#masthead .header-navigation ul.tm-mega__panel > li.tm-mega__col.menu-item > a {
	width: auto;
	margin-bottom: var(--tm-space-2);
	padding: 0 0 var(--tm-space-3);
	border-bottom: 1px solid var(--tm-border);
	border-radius: 0;
	background: none;
	color: var(--tm-ink);
	font-family: var(--tm-font-body);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

#masthead .header-navigation ul.tm-mega__panel > li.tm-mega__col.menu-item > a[href]:hover,
#masthead .header-navigation ul.tm-mega__panel > li.tm-mega__col.menu-item.current-menu-item > a {
	background: none;
	color: var(--tm-brand-dark);
}

#masthead .header-navigation ul.tm-mega__panel > li.tm-mega__col.menu-item > a:not([href]) {
	color: var(--tm-text-muted);
	cursor: default;
}

/* Column links: always visible, no flyout */
#masthead .header-navigation .tm-mega__col > ul.sub-menu {
	position: static;
	display: block;
	min-height: 0;
	height: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	clip: auto;
	opacity: 1;
	visibility: inherit;
	transform: none;
}

#masthead .header-navigation .tm-mega__col > ul.sub-menu > li.menu-item > a {
	width: auto;
	margin-inline: calc(var(--tm-space-3) * -1);
	padding: var(--tm-space-2) var(--tm-space-3);
	border-radius: var(--tm-radius-sm);
	line-height: 1.35;
}

#masthead .header-navigation .tm-mega__col > ul.sub-menu > li.menu-item.current-menu-item > a,
#masthead .header-navigation .tm-mega__col > ul.sub-menu > li.menu-item.current-menu-item > a:hover {
	background: var(--tm-brand-tint);
	color: var(--tm-brand-dark);
}

#masthead .header-navigation .tm-mega__desc {
	display: block;
	margin-top: 2px;
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-2xs);
	font-weight: 500;
}

/* Header button = primary .tm-btn */
#masthead .header-button-wrap .header-button {
	display: inline-flex;
	align-items: center;
	gap: var(--tm-space-2);
	padding: 0.75rem 1.375rem;
	border: 0;
	border-radius: var(--tm-radius-sm);
	background: var(--tm-brand);
	color: var(--tm-white);
	font-family: var(--tm-font-body);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}

#masthead .header-button-wrap .header-button:hover,
#masthead .header-button-wrap .header-button:focus-visible {
	background: var(--tm-brand-dark);
	color: var(--tm-white);
}

/* Mobile toggle: 30px icon in a 44px touch target */
#masthead .menu-toggle-open {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	padding: 0.4em;
	color: var(--tm-ink);
}

#masthead .menu-toggle-open .menu-toggle-icon {
	font-size: 30px;
}

#masthead .menu-toggle-open .menu-toggle-icon svg {
	width: 1em;
	height: 1em;
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

#mobile-drawer .drawer-inner {
	background: var(--tm-ink);
	color: var(--tm-white);
}

#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap {
	color: var(--tm-white);
	font-family: var(--tm-font-body);
	font-size: 0.9375rem; /* 15 */
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: none;
}

#mobile-drawer .mobile-navigation ul li a {
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

#mobile-drawer .mobile-navigation ul ul li a {
	padding-top: 0.45em;
	padding-bottom: 0.45em;
	font-family: var(--tm-font-body);
	font-size: 0.875rem; /* 14 */
	font-weight: 500;
	text-transform: none;
}

#mobile-drawer .mobile-navigation .drawer-sub-toggle {
	padding-top: 0;
	padding-bottom: 0;
}

#mobile-drawer .mobile-navigation ul li:not(.menu-item-has-children) a,
#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap {
	border-bottom-color: var(--tm-on-dark-border);
}

#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul li > a:hover {
	color: var(--tm-brand-light);
}

#mobile-drawer .drawer-toggle {
	color: var(--tm-white);
}

/* Top-level "#" headings (inc/mega-menu.php) collapse like any parent;
   the label itself opens them (main.js). */
#mobile-drawer .mobile-navigation > div > ul > li.tm-menu-heading > .drawer-nav-drop-wrap > a {
	cursor: pointer;
}

/* Nested "#" headings: a small label, links always open */
#mobile-drawer .mobile-navigation ul ul li.tm-menu-heading > .drawer-nav-drop-wrap {
	border-bottom: 0;
}

#mobile-drawer .mobile-navigation ul ul li.tm-menu-heading > .drawer-nav-drop-wrap > a,
#mobile-drawer .mobile-navigation ul ul li.tm-menu-heading > a {
	padding-top: 1.1em;
	padding-bottom: 0.3em;
	color: var(--tm-on-dark-3);
	font-family: var(--tm-font-body);
	font-size: var(--tm-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: none;
}

#mobile-drawer .mobile-navigation ul ul li.tm-menu-heading > .drawer-nav-drop-wrap .drawer-sub-toggle {
	display: none;
}

#mobile-drawer .mobile-navigation ul.has-collapse-sub-nav ul li.tm-menu-heading > ul.sub-menu {
	display: block;
	padding-left: 0;
}

/* ==========================================================================
   Content wrappers
   ========================================================================== */

/* Full-width templates (home, landing pages built with our sections) */
.content-width-fullwidth .content-area {
	margin-block: 0;
}

/* Default single/page title hero */
.entry-hero .entry-header h1,
.entry-header .entry-title {
	font-size: var(--tm-fs-h1);
}

.entry-meta {
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-2xs);
	font-weight: 600;
}

/* Kadence breadcrumbs */
.kadence-breadcrumbs {
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-2xs);
	font-weight: 600;
}

.kadence-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.kadence-breadcrumbs a:hover {
	color: var(--tm-brand-dark);
}

/* Archive pagination */
.pagination .nav-links .page-numbers {
	border-radius: var(--tm-radius-sm);
	font-family: var(--tm-font-body);
	font-weight: 600;
}

.pagination .nav-links .page-numbers.current {
	border-color: var(--tm-ink);
	background: var(--tm-ink);
	color: var(--tm-white);
}

/* Sidebar widgets */
.widget-area .widget-title {
	font-size: var(--tm-fs-sm);
	letter-spacing: 0.08em;
}

/* Scroll-to-top */
#kt-scroll-up.scroll-up-style-filled,
#kt-scroll-up-reader.scroll-up-style-filled {
	border-radius: var(--tm-radius-sm);
	background: var(--tm-ink);
	color: var(--tm-white);
}

/* ==========================================================================
   Landing pages (front page + "Landing" template): sections are full-width
   Kadence rows, so remove the theme's content spacing around them.
   ========================================================================== */

.tm-landing .content-area {
	margin-block: 0;
}

.tm-landing .entry-content-wrap {
	padding: 0;
}

.tm-landing .entry-content > .wp-block-kadence-rowlayout {
	margin-block: 0;
}

.tm-landing .entry-content > .wp-block-kadence-rowlayout:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Footer
   Kadence footer builder rows (inc/footer.php sets which widget area goes
   where). Top row: light, three columns. Bottom row: navy bar with the
   copyright and the legal links (footer navigation). Widget content is
   styled in components.css.
   ========================================================================== */

#colophon.site-footer {
	border-top: 1px solid var(--tm-border);
	background: var(--tm-gray-100);
	color: var(--tm-text-2);
	font-size: var(--tm-fs-sm);
}

#colophon .site-footer-row-container-inner {
	background: transparent;
}

#colophon .footer-widget-area-inner > .widget {
	margin: 0;
}

#colophon a {
	color: inherit;
	text-decoration: none;
}

#colophon a:hover,
#colophon a:focus-visible {
	color: var(--tm-brand-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Top row */
#colophon .site-top-footer-wrap .site-footer-row-container-inner {
	padding-block: 56px 48px;
}

#colophon .site-top-footer-inner-wrap {
	gap: var(--tm-space-10) var(--tm-space-8);
}

@media (min-width: 1025px) {
	#colophon .site-top-footer-inner-wrap {
		gap: var(--tm-space-16);
	}
}

@media (max-width: 767px) {
	#colophon .site-top-footer-wrap .site-footer-row-container-inner {
		padding-block: var(--tm-space-10) var(--tm-space-8);
	}
}

/* Column headings of the menu widgets */
#colophon .widget-title {
	margin: 0 0 var(--tm-space-4);
	padding-bottom: var(--tm-space-3);
	border-bottom: 1px solid var(--tm-border);
	color: var(--tm-ink);
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h5);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

#colophon .widget_nav_menu ul.menu {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 400;
}

#colophon .widget_nav_menu ul.menu li {
	margin: 0;
	padding: 0;
}

#colophon .footer-widget-area,
#colophon .footer-widget-area-inner {
	text-align: left;
}

/* Bottom bar: navy, copyright left, legal links right */
#colophon .site-bottom-footer-wrap .site-footer-row-container-inner {
	padding-block: var(--tm-space-4);
	background: var(--tm-ink);
	color: var(--tm-on-dark-2);
	font-size: var(--tm-fs-2xs);
}

#colophon .site-bottom-footer-wrap a:hover,
#colophon .site-bottom-footer-wrap a:focus-visible {
	color: var(--tm-white);
}

#colophon .site-bottom-footer-inner-wrap .footer-widget-area {
	width: 100%;
}

/* Kadence's nav is a flex box: push its menu to the right edge */
#colophon .footer-navigation {
	justify-content: flex-end;
}

@media (max-width: 767px) {
	#colophon .footer-navigation {
		justify-content: flex-start;
	}
}

#colophon .footer-navigation .footer-menu-container > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--tm-space-1) var(--tm-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

#colophon .footer-navigation .footer-menu-container > ul > li > a {
	padding: 0;
	color: var(--tm-on-dark-2);
	font-size: var(--tm-fs-2xs);
	font-weight: 400;
	line-height: 1.6;
	text-transform: none;
}

#colophon .footer-navigation .footer-menu-container > ul > li > a:hover,
#colophon .footer-navigation .footer-menu-container > ul > li > a:focus-visible {
	color: var(--tm-white);
}

@media (max-width: 767px) {
	#colophon .footer-navigation .footer-menu-container > ul {
		justify-content: flex-start;
	}
}