/* CRM header — own rules (crm/header/header.php). */

/* The toggles are <button>s here (a <div role="button"> on the demo): drop button chrome. */
.lotto_crm_header button.trx-addons-hamburger-toggle,
.lotto_crm_header button.trx-addons-mobile-menu-close {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	line-height: 1;
}
.lotto_crm_header .trx-addons-toggle-close { display: none; }
.lotto_crm_header .trx-addons-toggle-opened .trx-addons-toggle-text { display: none; }
.lotto_crm_header .trx-addons-toggle-opened .trx-addons-toggle-close { display: inline-block; }

/* Keyboard users open a submenu by focusing into it (the demo does hover only). */
.lotto_crm_header .trx-addons-nav-menu .menu-item-has-children:focus-within > .trx-addons-submenu {
	visibility: visible;
	opacity: 1;
}

.lotto_crm_header .sc_layouts_logo .logo_text {
	font-size: 1.5em;
	font-weight: 700;
	color: var(--theme-color-link); /* no logo picture: the site's name in the theme's accent */
}

/* Hamburger: in the heading colour (the inherited grey was barely visible on the dark row) and a
   44px tap area around the 24px icon, without moving it. */
.lotto_crm_header button.trx-addons-hamburger-toggle {
	box-sizing: content-box; /* the demo's CSS gives it a width; the padding adds to it */
	font-size: 24px;
	padding: 10px;
	margin: -10px;
}
.lotto_crm_header button.trx-addons-hamburger-toggle svg,
.lotto_crm_header button.trx-addons-mobile-menu-close svg {
	display: block;
	color: var(--theme-color-title); /* the icon's own colour came from its wrapper: grey */
}

/* The tablet/mobile row fixed at the top while scrolling (header.js; `sc_layouts_row_fixed_always`
   on the row, or trx_addons' responsive CSS puts a fixed row back in the flow below 768px): on the row's own dark
   background — over the homepage hero it is transparent. Below the admin bar when logged in
   (fixed above 600px wide: 46px, 32px from 783px). */
.lotto_crm_header .lotto_crm_header_mrow.sc_layouts_row_fixed_on {
	background-color: var(--theme-color-bg_color);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
@media (min-width: 601px) {
	body.admin-bar .lotto_crm_header .lotto_crm_header_mrow.sc_layouts_row_fixed_on { top: 46px; }
}
@media (min-width: 783px) {
	body.admin-bar .lotto_crm_header .lotto_crm_header_mrow.sc_layouts_row_fixed_on { top: 32px; }
}