/* =====================================================================
   Turismo-style header  (Factorika child theme)
   Transparent overlay header + hamburger slide-out panel on ALL screens.
   Colors are variables — change them here to rebrand.
   ===================================================================== */
:root {
	--ta-dark: #243d1a;        /* panel / scrolled header bg (deep green)   */
	--ta-dark-2: #16260f;      /* darker shade                              */
	--ta-accent: #f47a20;      /* orange accent (from logo)                 */
	--ta-accent-d: #d8631a;    /* accent hover                              */
	--ta-green: #6aa84f;       /* menu social circles (reference green)     */
	--ta-container-w: 1320px;  /* main site content container width (match the page) */
	--ta-line: rgba(255,255,255,.28); /* divider/border on transparent bar */
}

/* ---------- Hide the theme's inline horizontal menu + its toggle ---------- */
body.ta-header-on #pr-nav #navbarColor01,
body.ta-header-on #pr-nav #mobile-toggle {
	display: none !important;
}

/* The hidden source wrapper (cluster gets moved out of it by JS) */
.ta-hdr-extra { display: none; }

/* Standalone phone hamburger is hidden except on phones (see max-width:600px) */
.ta-mobile-burger { display: none; }

/* ---------- Header row ---------- */
body.ta-header-on #pr-nav.primary-menu {
	z-index: 1000;
	width: 100% !important;
	max-width: 100% !important;
	left: 0 !important;
	right: 0 !important;
	box-sizing: border-box;
	transition: background-color .3s ease, box-shadow .3s ease;
}
body.ta-header-on #pr-nav .container-fluid {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
body.ta-header-on #pr-nav .primary-menu-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--ta-container-w);  /* align logo/cluster with the main container */
	margin: 0 auto;
	padding: 14px 0;
	gap: 16px;
}
/* match the page's section side-padding below the container width */
@media (max-width: 1024px) {
	body.ta-header-on #pr-nav .primary-menu-inner { padding-left: 20px; padding-right: 20px; }
}
/* keep the logo from taking the full row width on mobile (theme sets 100%) */
body.ta-header-on #pr-nav .top-wrap {
	display: flex !important;
	align-items: center;
	margin: 0;
	width: auto !important;
	flex: 0 1 auto !important;
}
body.ta-header-on #pr-nav .custom-logo,
body.ta-header-on #pr-nav .custom-logo-link img {
	max-height: 54px;
	width: auto;
	height: auto;
}

/* Desktop: after scrolling past 15% of the viewport, the header sticks to the
   top as a solid WHITE bar with BLACK text. */
@media (min-width: 992px) {
	body.ta-header-on #pr-nav.ta-scrolled {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		background: #fff !important;
		background-image: none !important;
		box-shadow: 0 2px 16px rgba(0, 0, 0, .12);
		animation: taStickyDrop .35s ease;
	}
	body.ta-header-on #pr-nav.ta-scrolled .primary-menu-inner { padding-top: 9px; padding-bottom: 9px; }

	/* black text / dark controls on the white sticky bar */
	body.ta-header-on #pr-nav.ta-scrolled .ta-hcell {
		color: #111 !important;
		border-color: rgba(0, 0, 0, .12);
		text-shadow: none !important;
	}
	body.ta-header-on #pr-nav.ta-scrolled .ta-hcell .ta-ico { color: var(--ta-accent); }
	body.ta-header-on #pr-nav.ta-scrolled .ta-hcell.ta-hcell-contact:hover { color: var(--ta-accent) !important; background: rgba(0, 0, 0, .04); }
	body.ta-header-on #pr-nav.ta-scrolled .ta-burger-lines span { background: #111 !important; box-shadow: none !important; }
	body.ta-header-on #pr-nav.ta-scrolled .ta-burger:hover .ta-burger-lines span { background: var(--ta-accent) !important; }
}

@keyframes taStickyDrop {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* When logged in, keep the fixed/sticky header clear of the WP admin bar.
   The admin bar is 32px tall above 782px and 46px at/below 782px. */
@media (min-width: 992px) {
	body.admin-bar.ta-header-on #pr-nav.ta-scrolled { top: 32px; }
}

/* ---------- Right cluster: contact cells + hamburger ---------- */
.ta-header-right {
	display: flex;
	align-items: stretch;
	height: 54px;
	margin-left: auto;   /* always pin the cluster to the right, any structure */
	flex: 0 0 auto;
}
.ta-hcell {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 22px;
	color: #fff !important;
	text-decoration: none;
	font-size: 15px;
	white-space: nowrap;
	background: transparent;
	border: 1px solid var(--ta-line);
	border-right-width: 0;
	transition: background .2s ease, color .2s ease;
}
.ta-header-right .ta-hcell:first-child { /* nothing special; keeps left border */ }
.ta-hcell.ta-burger { border-right-width: 1px; }
.ta-hcell .ta-ico { display: inline-flex; color: var(--ta-accent); }
.ta-hcell.ta-hcell-contact:hover { background: rgba(255, 255, 255, .08); color: var(--ta-accent) !important; }

/* Hamburger box */
.ta-burger {
	cursor: pointer;
	padding: 0 20px;
	min-width: 60px;
	justify-content: center;
}
.ta-burger-lines { position: relative; width: 26px; height: 18px; }
.ta-burger-lines span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.ta-burger-lines span:nth-child(1) { top: 0; }
.ta-burger-lines span:nth-child(2) { top: 8px; }
.ta-burger-lines span:nth-child(3) { top: 16px; }
.ta-burger:hover .ta-burger-lines span { background: var(--ta-accent); }
/* animate to X when panel open */
body.ta-panel-open .ta-burger-lines span:nth-child(1) { top: 8px; transform: rotate(45deg); }
body.ta-panel-open .ta-burger-lines span:nth-child(2) { opacity: 0; }
body.ta-panel-open .ta-burger-lines span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* ---------- Full-screen navigation overlay ---------- */
.ta-panel {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	color: #fff;
	z-index: 100001;
	visibility: hidden;
	transform: translateX(-100%);   /* off-screen to the left */
	transition: transform .5s cubic-bezier(.65, 0, .35, 1), visibility .5s;
	background: #1b1b1b;
}
.ta-panel.open {
	visibility: visible;
	transform: translateX(0);       /* slides in left-to-right */
}

/* LEFT: media column with logo + social */
.ta-panel-media {
	position: relative;
	flex: 0 0 42%;
	max-width: 42%;
	background-color: #14260d;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: linear-gradient(160deg, #2c4a1c, #0d1a08);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 48px 46px;
	overflow: hidden;
}
.ta-panel-media-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .68));
	z-index: 1;
}
.ta-panel-logo,
.ta-panel-media .ta-panel-social { position: relative; z-index: 2; }
.ta-panel-logo { display: inline-block; }
.ta-panel-logo img { max-width: 190px; height: auto; max-height: 66px; filter: brightness(0) invert(1); } /* render the logo white on the dark panel */
.ta-panel-logo-text { color: #fff; font-size: 26px; font-weight: 700; letter-spacing: .5px; }

/* RIGHT: content column with close + menu */
.ta-panel-content {
	flex: 1 1 auto;
	background: #1b1b1b;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 70px 8% 44px;
	overflow-y: auto;
	overscroll-behavior: contain;
	position: relative;
}
.ta-panel-close {
	position: absolute;
	top: 26px;
	right: 34px;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, color .2s ease, transform .3s ease;
}
.ta-panel-close:hover { background: rgba(255, 255, 255, .08); color: var(--ta-accent); transform: rotate(90deg); }

.ta-panel-nav { width: 100%; }
.ta-panel-menu,
.ta-panel-menu ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.ta-panel-menu li { position: relative; }
.ta-panel-menu a {
	display: inline-block;
	color: #d7d7d7;
	text-decoration: none;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.95;
	transition: color .2s ease;
}
.ta-panel-menu a:hover,
.ta-panel-menu .current-menu-item > a,
.ta-panel-menu .current-menu-parent > a { color: var(--ta-accent); }

/* dash indicator for items that have a sub-menu (reference style) */
.ta-panel-menu .menu-item-has-children > a::after,
.ta-panel-menu .page_item_has_children > a::after {
	content: " \2014";
	color: rgba(255, 255, 255, .4);
}
.ta-panel-menu li.ta-open > a::after { color: var(--ta-accent); }

/* sub-menus accordion */
.ta-panel-menu .sub-menu {
	max-height: 0;
	overflow: hidden;
	transition: max-height .4s ease;
	padding-left: 24px;
}
.ta-panel-menu li.ta-open > .sub-menu { max-height: 1400px; }
.ta-panel-menu .sub-menu a { font-size: 18px; line-height: 1.75; color: #b7b7b7; }

/* full-row click zone to toggle a parent's sub-menu */
.ta-caret {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 58px;
	cursor: pointer;
	background: transparent;
	z-index: 1;
}
.ta-panel-menu .sub-menu .ta-caret { height: 42px; }

/* footer: contact (+ social on small screens) */
.ta-panel-foot { margin-top: 34px; }
.ta-panel-contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #cdcdcd;
	text-decoration: none;
	font-size: 15px;
	margin-right: 26px;
	padding: 4px 0;
	transition: color .2s ease;
}
.ta-panel-contact:hover { color: var(--ta-accent); }
.ta-panel-contact .ta-ico { color: var(--ta-accent); display: inline-flex; }
.ta-panel-content .ta-panel-social { display: none; }  /* social lives in the media column on desktop */

/* social circles (green, like the reference) */
.ta-panel-social { display: flex; gap: 12px; }
.ta-panel-social .ta-soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--ta-green);
	border: 1px solid var(--ta-green);
	background: transparent;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ta-panel-social .ta-soc:hover { background: var(--ta-green); color: #fff; transform: translateY(-2px); }

/* ---------- Desktop: sub-menu opens as a second column on hover ---------- */
@media (min-width: 901px) {
	.ta-panel-nav { position: relative; }
	.ta-panel-menu { width: 52%; }
	/* Anchor the sub-menu to the hovered <li> so it opens to the RIGHT, level
	   with that item (Babylon-style), instead of jumping to the menu top. */
	.ta-panel-menu > li { position: relative !important; }
	.ta-panel-menu > li > a { white-space: nowrap; } /* keep each item (and its dash) on one line */
	.ta-caret { display: none; }                   /* hover handles it on desktop */

	.ta-panel-menu > li > .sub-menu {
		position: absolute;
		top: 0;                     /* level with the top of the hovered item */
		left: 100%;                 /* just right of the menu column */
		width: 80%;
		max-height: none !important;
		overflow: hidden;          /* clip items while they slide in from the left */
		padding-left: 40px;        /* gap between the menu and its sub-menu */
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease, visibility .2s ease;
	}
	.ta-panel-menu > li:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
	}
	/* Each sub-item emerges from under the main menu and slides left-to-right,
	   staggered for a cascading reveal. */
	.ta-panel-menu > li > .sub-menu > li {
		opacity: 0;
		transform: translateX(-40px);
		transition: opacity .4s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
	}
	.ta-panel-menu > li:hover > .sub-menu > li {
		opacity: 1;
		transform: translateX(0);
	}
	.ta-panel-menu > li:hover > .sub-menu > li:nth-child(1) { transition-delay: .04s; }
	.ta-panel-menu > li:hover > .sub-menu > li:nth-child(2) { transition-delay: .10s; }
	.ta-panel-menu > li:hover > .sub-menu > li:nth-child(3) { transition-delay: .16s; }
	.ta-panel-menu > li:hover > .sub-menu > li:nth-child(4) { transition-delay: .22s; }
	.ta-panel-menu > li:hover > .sub-menu > li:nth-child(5) { transition-delay: .28s; }
	.ta-panel-menu > li:hover > .sub-menu > li:nth-child(6) { transition-delay: .34s; }
	.ta-panel-menu > li:hover > .sub-menu > li:nth-child(7) { transition-delay: .40s; }
	.ta-panel-menu > li:hover > .sub-menu > li:nth-child(8) { transition-delay: .46s; }
	.ta-panel-menu > li:hover > .sub-menu > li:nth-child(9) { transition-delay: .52s; }
	.ta-panel-menu > li:hover > .sub-menu > li:nth-child(10) { transition-delay: .58s; }

	/* hovered parent turns green (reference style) */
	.ta-panel-menu > li:hover > a,
	.ta-panel-menu > li:hover > a::after { color: var(--ta-green); }

	.ta-panel-menu .sub-menu a { font-size: 18px; line-height: 2.05; color: #cfcfcf; }
	.ta-panel-menu .sub-menu a:hover { color: var(--ta-green); }
}

/* Stack to a single column when there's no room for the media side */
@media (max-width: 900px) {
	.ta-panel-media { display: none; }
	.ta-panel-content { flex-basis: 100%; max-width: 100%; padding: 80px 28px 36px; justify-content: flex-start; }
	.ta-panel-content .ta-panel-social { display: flex; margin-top: 18px; }
	.ta-panel-menu a { font-size: 26px; line-height: 1.8; }
	.ta-panel-menu .sub-menu a { font-size: 17px; }
	.ta-caret { height: 50px; }
}
@media (max-width: 480px) {
	.ta-panel-menu a { font-size: 22px; }
	.ta-panel-content { padding: 76px 22px 30px; }
}

body.ta-panel-open { overflow: hidden; }

/* Slight legibility shadow for the white controls over the hero (desktop) */
@media (min-width: 992px) {
	body.ta-header-on #pr-nav:not(.ta-scrolled) .ta-hcell { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
	body.ta-header-on #pr-nav:not(.ta-scrolled) .ta-burger-lines span { box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
}

/* ---------- Responsive: below 992px the hero no longer backs the header,
   so use a clean solid white bar with dark controls. ---------- */
@media (max-width: 991.98px) {
	body.ta-header-on #pr-nav.primary-menu,
	body.ta-header-on #pr-nav.ta-scrolled {
		background: #fff !important;
		background-image: none !important;
		box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
	}
	/* Keep the whole header bar pinned to the top on scroll (not just the
	   floating burger). The theme leaves #pr-nav static below 1200px, so it
	   would otherwise scroll away with the page. */
	body.ta-header-on #pr-nav.primary-menu {
		position: sticky !important;
		top: 0;
		z-index: 1000;
	}
}
/* Logged-in: the WP admin bar is fixed (32px) between 783px and 991px, so
   offset the sticky header below it. At/below 782px the admin bar scrolls
   away with the page, so top:0 is correct there. */
@media (min-width: 783px) and (max-width: 991.98px) {
	body.admin-bar.ta-header-on #pr-nav.primary-menu { top: 32px; }
	/* dark hamburger + contact on the white bar */
	body.ta-header-on .ta-burger-lines span { background: var(--ta-dark); box-shadow: none; }
	body.ta-header-on .ta-burger:hover .ta-burger-lines span,
	body.ta-panel-open .ta-burger-lines span { background: var(--ta-accent); }
	body.ta-header-on .ta-hcell {
		color: var(--ta-dark) !important;
		border-color: rgba(0, 0, 0, .12);
		text-shadow: none;
	}
	body.ta-header-on .ta-hcell .ta-ico { color: var(--ta-accent); }
	body.ta-header-on .ta-hcell.ta-hcell-contact:hover { color: var(--ta-accent) !important; background: rgba(0, 0, 0, .05); }
}
@media (min-width: 601px) and (max-width: 991.98px) {
	.ta-hcell-contact .ta-hcell-txt { display: none; }  /* icons only on tablets */
	.ta-hcell { padding: 0 16px; }
}
@media (max-width: 600px) {
	body.ta-header-on #pr-nav .custom-logo,
	body.ta-header-on #pr-nav .custom-logo-link img { max-height: 44px; }

	/* Phones: keep only the hamburger in the header (hide the contact cells),
	   so it stays part of the now-sticky bar instead of floating detached over
	   the page content. Rendered as a solid green box for a clear tap target. */
	body.ta-header-on .ta-header-right { height: auto; }
	body.ta-header-on .ta-header-right .ta-hcell-contact { display: none !important; }
	body.ta-header-on .ta-burger {
		min-width: 0;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 0 !important;
		border-radius: 6px;
		background: var(--ta-dark) !important;
	}
	body.ta-header-on .ta-burger .ta-burger-lines span { background: #fff !important; }
	body.ta-header-on .ta-burger:hover .ta-burger-lines span,
	body.ta-panel-open .ta-burger .ta-burger-lines span { background: var(--ta-accent) !important; }

	/* The standalone floating burger is no longer needed (it duplicated the
	   in-header one and looked detached once the whole bar became sticky). */
	.ta-mobile-burger { display: none !important; }
}