/* Travel Business Core - header and footer layout fixes.
   Loaded on every page (see tbc_enqueue_site_chrome_css in travel-business-core.php).
   Colours come only from Elementor Global Colors (hex values are var() fallbacks).
   To remove: delete this file and the enqueue block in the plugin. The Elementor
   header/footer templates keep working, just without these fixes.

   Hooks used by the templates:
   .tbc-topbar-wrap  top bar container      .tbc-main-header  main header container
   .tbc-brand        logo + site title      .tbc-header-right menu + Book Now
   .tbc-book-btn     Book Now button        .tbc-footer       footer container
   .tbc-footer-contact  footer Contact Us column
*/

/* ---------- 1. Sticky header (top bar scrolls away, main header stays) ---------- */

#masthead {
	position: sticky;
	top: -40px; /* = top bar height, so only the white header stays pinned */
	z-index: 999;
}

body.admin-bar #masthead {
	top: calc(32px - 40px); /* WordPress admin bar is 32px on desktop */
}

@media (max-width: 782px) {
	body.admin-bar #masthead {
		top: calc(46px - 40px); /* admin bar is 46px on small screens */
	}
}

/* Top bar is hidden below 768px, so there is nothing to scroll away. */
@media (max-width: 767px) {
	#masthead {
		top: 0;
	}

	body.admin-bar #masthead {
		top: 46px;
	}
}

/* Below 601px the admin bar scrolls with the page instead of staying fixed. */
@media (max-width: 600px) {
	body.admin-bar #masthead {
		top: 0;
	}
}

/* ---------- 2. Top bar ---------- */

body .elementor .tbc-topbar-wrap {
	height: 40px;
	min-height: 40px;
	box-sizing: border-box;
}

body .elementor .tbc-topbar-wrap .elementor-widget {
	margin: 0;
}

body .elementor .tbc-topbar-wrap .tbc-topbar-city,
body .elementor .tbc-topbar-wrap .tbc-topbar-city p {
	margin: 0;
	color: var(--e-global-color-accent, #F7F4EE);
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
}

/* ---------- 3. Main header ---------- */

body .elementor .tbc-main-header {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Logo and menu groups size to their content, never to a fixed width. */
body .elementor .tbc-main-header .tbc-brand,
body .elementor .tbc-main-header .tbc-header-right {
	--width: auto;
	width: auto;
	flex: 0 0 auto;
	min-width: 0;
}

body .elementor .tbc-main-header .tbc-brand .elementor-widget {
	margin: 0;
	width: auto;
}

/* Logo: 56px tall on desktop, 44px on mobile, width follows the picture. */
body .elementor .tbc-main-header .hfe-site-logo-container {
	display: flex;
	align-items: center;
}

body .elementor .tbc-main-header .hfe-site-logo .hfe-site-logo-container img.hfe-site-logo-img {
	display: block;
	height: 56px;
	width: auto;
	max-width: none;
	object-fit: contain;
}

@media (max-width: 767px) {
	body .elementor .tbc-main-header .hfe-site-logo .hfe-site-logo-container img.hfe-site-logo-img {
		height: 44px;
	}
}

body .elementor .tbc-main-header .hfe-site-title,
body .elementor .tbc-main-header .hfe-site-title .hfe-heading-text {
	white-space: nowrap;
}

/* Between 1025px and 1199px the site title is hidden to keep the menu on one line. */
@media (min-width: 1025px) and (max-width: 1199px) {
	body .elementor .tbc-main-header .tbc-brand .elementor-widget-hfe-site-title {
		display: none;
	}
}

/* Menu: one line, never wraps. DESKTOP ONLY (above 1024px). Below that the menu is a
   hamburger dropdown: these three rules used to apply at every width, which kept the
   hidden menu 500px+ wide (it pushed Book Now and the toggle next to the logo) and
   forced the open dropdown into one cut-off row. */
@media (min-width: 1025px) {
	body .elementor .tbc-main-header .elementor-widget-navigation-menu {
		width: auto;
		flex: 0 0 auto;
	}

	body .elementor .tbc-main-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		flex-wrap: nowrap;
	}

	body .elementor .tbc-main-header .hfe-nav-menu a.hfe-menu-item {
		white-space: nowrap;
	}
}

body .elementor .tbc-main-header .hfe-nav-menu a.hfe-menu-item {
	font-size: 15px;
	line-height: 1.2;
}

/* Book Now: its own space, never overlaps the menu. */
body .elementor .tbc-main-header .tbc-book-btn {
	flex: 0 0 auto;
	width: auto;
}

body .elementor .tbc-main-header .tbc-book-btn a.elementor-button {
	white-space: nowrap;
}

@media (min-width: 1025px) {
	body .elementor .tbc-main-header .tbc-book-btn {
		margin-left: 12px;
	}
}

/* Tablet and mobile: hamburger dropdown is full width and easy to read. */
@media (max-width: 1024px) {
	body .elementor .tbc-main-header .hfe-nav-menu nav.hfe-dropdown a.hfe-menu-item,
	body .elementor .tbc-main-header .hfe-nav-menu nav.hfe-dropdown-expandible a.hfe-menu-item {
		font-size: 16px;
		padding: 14px 20px;
		white-space: normal;
	}
}

/* ---------- 4. Footer ---------- */

/* Footer logo: at most 70px tall. The light plate keeps a dark logo readable on the dark footer. */
body .elementor .tbc-footer .hfe-site-logo .hfe-site-logo-container {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 8px;
	background-color: var(--e-global-color-accent, #F7F4EE);
}

body .elementor .tbc-footer .hfe-site-logo .hfe-site-logo-container img.hfe-site-logo-img {
	display: block;
	height: auto;
	max-height: 70px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Contact Us column: light text, white links, Secondary on hover. */
body .elementor .tbc-footer-contact .elementor-widget-shortcode .elementor-shortcode {
	color: var(--e-global-color-accent, #F7F4EE);
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

body .elementor .tbc-footer-contact .elementor-widget-shortcode .elementor-shortcode a:not(.tbc-contact-buttons__btn) {
	color: var(--e-global-color-ttwhite, #FFFFFF);
	text-decoration: none;
	transition: color 0.2s ease;
}

body .elementor .tbc-footer-contact .elementor-widget-shortcode .elementor-shortcode a:not(.tbc-contact-buttons__btn):hover,
body .elementor .tbc-footer-contact .elementor-widget-shortcode .elementor-shortcode a:not(.tbc-contact-buttons__btn):focus-visible {
	color: var(--e-global-color-secondary, #F28C28);
}

/* WhatsApp button in the footer: normal size, Secondary colour. */
body .elementor .tbc-footer a.tbc-contact-buttons__btn {
	min-height: 44px;
	padding: 0 20px;
	border-color: var(--e-global-color-secondary, #F28C28);
	background-color: var(--e-global-color-secondary, #F28C28);
	color: var(--e-global-color-text, #1B1B1B);
	font-size: 15px;
}

body .elementor .tbc-footer a.tbc-contact-buttons__btn:hover,
body .elementor .tbc-footer a.tbc-contact-buttons__btn:focus-visible {
	border-color: var(--e-global-color-ttwhite, #FFFFFF);
	background-color: var(--e-global-color-ttwhite, #FFFFFF);
	color: var(--e-global-color-primary, #0E5A66);
}

body .elementor .tbc-footer .tbc-contact-buttons__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

/* ---------- 5. Small screens: logo left, Book Now + hamburger right, one row ---------- */

/* Never let the header groups wrap onto a second row (Elementor flips the
   right-hand group to wrap-reverse on mobile). */
body .elementor .tbc-main-header .tbc-brand,
body .elementor .tbc-main-header .tbc-header-right {
	flex-wrap: nowrap;
	min-width: 0;
}

/* On phones the logo is enough: the site title next to it would push
   Book Now and the hamburger off the screen. */
@media (max-width: 767px) {
	body .elementor .tbc-main-header .tbc-brand .elementor-widget-hfe-site-title {
		display: none;
	}

	body .elementor .tbc-main-header .tbc-header-right {
		margin-left: auto;
	}
}


/* =====================================================================
   TBC LAYOUT: ONE ALIGNMENT RULE  (start of block)
   One content width + one side gutter for the WHOLE site: top bar, header,
   every page section and the footer. Change the two variables below and
   everything moves together.
     --tbc-content-width : max inner width, centred (default 1200px)
     --tbc-gutter        : side padding (24px desktop/tablet, 16px mobile)
   Full-width backgrounds stay on the OUTER containers; only the inner
   content is limited to the content width.
   Delete this whole block to go back to the per-container Elementor values.
   ===================================================================== */

:root {
	--tbc-content-width: 1200px;
	--tbc-gutter: 24px;
}

@media (max-width: 767px) {
	:root {
		--tbc-gutter: 16px;
	}
}

/* Outer containers: full-width background, gutter as side padding, inner content limited to the content width. */
body .elementor .e-con.tbc-topbar-wrap,
body .elementor .e-con.tbc-main-header,
body .elementor .e-con.tbc-footer,
body .elementor .e-con.tbc-footer-bottom,
body .elementor .e-con.tbc-hero,
body .elementor .e-con.tbc-trust-wrap,
body .elementor .e-con.tbc-fleet,
body .elementor .e-con.tbc-fleet-help,
body .elementor .e-con.tbc-packages,
body .elementor .e-con.tbc-packages-custom,
body .elementor .e-con.tbc-why,
body .elementor .e-con.tbc-steps,
body .elementor .e-con.tbc-faq,
body .elementor .e-con.tbc-cta {
	--content-width: var(--tbc-content-width);
	padding-left: var(--tbc-gutter);
	padding-right: var(--tbc-gutter);
}

/* Inner boxed containers: exactly the content width, no extra side padding. */
body .elementor .e-con.tbc-hero-inner,
body .elementor .e-con.tbc-trust-inner,
body .elementor .e-con.tbc-fleet-inner,
body .elementor .e-con.tbc-fleet-help-inner,
body .elementor .e-con.tbc-packages-inner,
body .elementor .e-con.tbc-packages-custom-inner,
body .elementor .e-con.tbc-why-inner,
body .elementor .e-con.tbc-steps-inner,
body .elementor .e-con.tbc-faq-inner,
body .elementor .e-con.tbc-cta-inner {
	--content-width: var(--tbc-content-width);
	padding-left: 0;
	padding-right: 0;
}

/* Book Now page: the gutter sits on the inner boxed container (outer has none). */
body .elementor .e-con.tbc-book-banner-inner,
body .elementor .e-con.tbc-book-main-inner {
	--content-width: var(--tbc-content-width);
	padding-left: var(--tbc-gutter);
	padding-right: var(--tbc-gutter);
}

/* Top bar: left item on the left edge, city on the right edge. */
body .elementor .tbc-topbar-wrap > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--tbc-content-width);
}

/* Main header, desktop: logo left | menu truly centred on one line | Book Now right. */
body .elementor .tbc-main-header > .e-con-inner {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--tbc-content-width);
}

@media (min-width: 1025px) {
	body .elementor .tbc-main-header > .e-con-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 24px;
	}

	body .elementor .tbc-main-header > .e-con-inner > .tbc-brand {
		justify-self: start;
	}

	body .elementor .tbc-main-header > .e-con-inner > .tbc-header-nav {
		justify-self: center;
	}

	body .elementor .tbc-main-header > .e-con-inner > .tbc-book-btn {
		justify-self: end;
		margin-left: 0;
	}

	body .elementor .tbc-main-header .tbc-header-nav .hfe-nav-menu {
		justify-content: center;
	}
}

/* Narrow laptops: slightly tighter menu so it stays on one line. */
@media (min-width: 1025px) and (max-width: 1199px) {
	body .elementor .tbc-main-header .hfe-nav-menu a.hfe-menu-item {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 14px;
	}
}

/* Tablet and mobile: logo left, Book Now then hamburger on the right. */
@media (max-width: 1024px) {
	body .elementor .tbc-main-header > .e-con-inner {
		flex-wrap: nowrap;
		gap: 12px;
	}

	body .elementor .tbc-main-header > .e-con-inner > .tbc-brand {
		order: 1;
		margin-right: auto;
	}

	body .elementor .tbc-main-header > .e-con-inner > .tbc-book-btn {
		order: 2;
		margin-left: 0;
	}

	body .elementor .tbc-main-header > .e-con-inner > .tbc-header-nav {
		order: 3;
		width: auto;
	}
}

/* Footer: columns span the content width; bottom bar text centred inside it. */
body .elementor .tbc-footer > .e-con-inner,
body .elementor .tbc-footer-bottom > .e-con-inner {
	width: 100%;
	max-width: var(--tbc-content-width);
}

/* Home: trust strip = full-width white band right under the hero. */
body .elementor .tbc-trust-wrap {
	position: relative;
	z-index: 1;
	border-top: 1px solid var(--tbc-light);
	box-shadow: 0 4px 16px rgba(27, 27, 27, 0.06);
}

@media (min-width: 1025px) {
	body .elementor .tbc-trust-item + .tbc-trust-item {
		border-left: 1px solid color-mix(in srgb, var(--tbc-dark) 12%, transparent);
	}
}

/* Home: the light custom-trip band sits between white and light sections, so it gets hairlines. */
body .elementor .tbc-packages-custom {
	border-top: 1px solid color-mix(in srgb, var(--tbc-dark) 10%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--tbc-dark) 10%, transparent);
}

/* TBC LAYOUT: ONE ALIGNMENT RULE  (end of block) */

/* =====================================================================
   TBC FULL-WIDTH PAGES SAFETY NET  (start)
   Every Elementor page uses the Elementor Full Width template. Whatever the
   Astra page layout says, the theme wrappers must not box, pad or narrow the
   page content: sections carry their own full-width background and their own
   boxed inner container. Delete this whole block to go back to Astra defaults.
   ===================================================================== */
body.elementor-template-full-width .site-content > .ast-container {
	display: block;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.elementor-template-full-width .site .site-content #primary {
	width: 100%;
	margin: 0;
	padding: 0;
}

body.elementor-template-full-width .site-content .hentry,
body.elementor-template-full-width .site-content .entry-content {
	margin: 0;
	padding: 0;
}

/* TBC FULL-WIDTH PAGES SAFETY NET  (end) */

/* Both phone numbers on one line: [tbc_phone which="both" link="yes"] (phones update) */
.tbc-phone-both {
	display: inline;
}

.tbc-phone-both__link,
.tbc-phone-both__sep {
	white-space: nowrap;
}