/**
 * Header fix.
 *
 * The theme's header row puts the nav menu and the APPOINTMENTS button in one
 * flex column (25% logo / 74.665% menu+button) with flex-wrap:wrap. Adding a
 * sixth menu item pushed the row past the column width, so the button wrapped
 * onto its own line. Measured at a 1440px viewport: 788px menu + 50px gap +
 * 170px button = 1008px needed against 896px available.
 *
 * This reclaims the difference by tightening the menu spacing and giving the
 * right-hand column more room, and stops the row wrapping so the button can
 * never drop again. Only applies to the desktop header — below 1025px the theme
 * swaps in its own mobile header with a hamburger, which is left alone.
 */

@media (min-width: 1025px) {

	.ct-header-elementor-main .elementor-widget-wrap,
	.ct-header-elementor-sticky .elementor-widget-wrap {
		flex-wrap: nowrap !important;
	}

	/* Narrow the logo column, widen the menu + button column. */
	.ct-header-elementor-main .elementor-top-column:first-child,
	.ct-header-elementor-sticky .elementor-top-column:first-child {
		width: 20% !important;
	}

	.ct-header-elementor-main .elementor-top-column:last-child,
	.ct-header-elementor-sticky .elementor-top-column:last-child {
		width: 79.6% !important;
	}

	/* The gap between the menu and the button was 50px. */
	.ct-header-elementor-main .elementor-widget-ct_menu > .elementor-widget-container,
	.ct-header-elementor-sticky .elementor-widget-ct_menu > .elementor-widget-container {
		margin-right: 20px;
	}

	/* Menu items sat on 15px side margins. */
	.ct-header-elementor-main .ct-main-menu > li,
	.ct-header-elementor-sticky .ct-main-menu > li {
		margin-left: 11px;
		margin-right: 11px;
	}

	/* With nowrap the menu is a shrinkable flex item; left to shrink it squeezes
	   its own <ul> onto two lines. Both widgets keep their natural width. */
	.ct-header-elementor-main .elementor-widget-ct_menu,
	.ct-header-elementor-sticky .elementor-widget-ct_menu,
	.ct-header-elementor-main .elementor-widget-ct_button,
	.ct-header-elementor-sticky .elementor-widget-ct_button {
		flex-shrink: 0;
	}

	.ct-header-elementor-main .ct-main-menu,
	.ct-header-elementor-sticky .ct-main-menu {
		flex-wrap: nowrap;
	}

	.ct-header-elementor-main .ct-main-menu > li > a,
	.ct-header-elementor-sticky .ct-main-menu > li > a {
		white-space: nowrap;
	}
}

/*
 * Laptops between 1025px and 1300px still run the desktop header but have a
 * much narrower container, so the same row needs to be tighter again.
 */
@media (min-width: 1025px) and (max-width: 1300px) {

	.ct-header-elementor-main .elementor-top-column:first-child,
	.ct-header-elementor-sticky .elementor-top-column:first-child {
		width: 16% !important;
	}

	.ct-header-elementor-main .elementor-top-column:last-child,
	.ct-header-elementor-sticky .elementor-top-column:last-child {
		width: 83.6% !important;
	}

	.ct-header-elementor-main .ct-main-menu > li,
	.ct-header-elementor-sticky .ct-main-menu > li {
		margin-left: 7px;
		margin-right: 7px;
	}

	.ct-header-elementor-main .ct-main-menu > li > a,
	.ct-header-elementor-sticky .ct-main-menu > li > a {
		font-size: 15px;
	}

	.ct-header-elementor-main .elementor-widget-ct_menu > .elementor-widget-container,
	.ct-header-elementor-sticky .elementor-widget-ct_menu > .elementor-widget-container {
		margin-right: 12px;
	}

	.ct-header-elementor-main .ct-button-wrapper .btn,
	.ct-header-elementor-sticky .ct-button-wrapper .btn {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
}

/*
 * Page-title banner.
 *
 * The theme ships a stock photo (bg-page-title.jpg from the demo import) behind
 * every page title, applied globally as `body #ct-pagetitle`. It only ever shows
 * on the shop pages, and it is generic stock imagery rather than Carla's own, so
 * it is replaced with the brand colours used elsewhere on the site.
 */
#ct-pagetitle.ct-pagetitle {
	background-image: none !important;
	background-color: #5A3E42 !important;
	background: linear-gradient(120deg, #5A3E42 0%, #7A3348 55%, #8E2F4A 100%) !important;
}

/*
 * Pages where the transparent header sits over a light background.
 *
 * The header is transparent site-wide and its menu is white, which only works
 * over the dark hero or the dark title banner. On a page with neither — the
 * workbook landing page — the menu was practically invisible.
 */
body.pbc-light-header .ct-header-elementor-main .ct-nav-menu .ct-main-menu > li > a,
body.pbc-light-header .ct-header-elementor-sticky .ct-nav-menu .ct-main-menu > li > a {
	color: #5A3E42 !important;
	font-weight: 500;
}

body.pbc-light-header .ct-header-elementor-main .ct-nav-menu .ct-main-menu > li:hover > a,
body.pbc-light-header .ct-header-elementor-main .ct-nav-menu .ct-main-menu > li.current-menu-item > a,
body.pbc-light-header .ct-header-elementor-main .ct-nav-menu .ct-main-menu > li.current_page_item > a,
body.pbc-light-header .ct-header-elementor-main .ct-nav-menu .ct-main-menu > li:after {
	color: #8E2F4A !important;
}

/* The wordmark next to the logo is white too. */
body.pbc-light-header .ct-header-elementor-main .elementor-widget-text-editor,
body.pbc-light-header .ct-header-elementor-main .elementor-widget-text-editor p {
	color: #5A3E42 !important;
}

/* The logo becomes a link (see frontend.js) — show it. */
.ct-logo a img {
	cursor: pointer;
}