/**
 * StarzMeet — the site header, light.
 *
 * WHAT PAINTED THE GREY. The header's own elements are all transparent; the dark
 * band on the home page came from `.lp-header-overlay`, a `rgba(0,0,0,.7)` sheet
 * ListingPro lays over the header whenever `header_bgcolor` is "transparent", so
 * white nav text stays readable over a photographic banner. There is no banner
 * photograph any more — the hero is a pale mint field — so the overlay was
 * darkening nothing but itself. On inner pages the colour comes from somewhere
 * else entirely: `.lp-menu-bar.header-bg-color-class`, painted with the
 * `header_bgcolor_inner_pages` theme option.
 *
 * Both are handled here rather than in the theme options, because the options
 * write a STATIC file (`listingpro/assets/css/dynamic-css.css`, regenerated only
 * on a Redux save) and that file belongs to the parent theme, which is
 * overwritten on update.
 *
 * The header now carries the hero's own top colour, so on the front page there
 * is no bar at all — the mint runs from the top of the window through the
 * headline. Everywhere else the same colour reads as a light header above white
 * content.
 *
 * THE PART THAT IS NOT COLOUR: the logo. The one in the media library is white
 * lettering, which is invisible on this. `assets/img/logo-dark.png` is the same
 * artwork with the wordmark recoloured navy (the star keeps its colours), and
 * `content: url(…)` swaps it without touching the theme's markup or the option.
 */

:root {
	--sh-band: #eaf7fa;   /* the hero's top colour, exactly */
	--sh-ink: #13293f;
	--sh-brand: #1795a8;
	--sh-brand-dark: #12798a;
	--sh-line: #cfe7ec;
}

/* ------------------------------------------------------------- the band -- */

/* The overlay's only job was to darken a photograph that no longer exists. */
.lp-header-overlay {
	background: transparent !important;
}

.lp-menu-bar.header-bg-color-class,
.lp-menu-bar {
	background: var(--sh-band) !important;
}

/* Scrolled state: the band leaves the hero behind and travels over white
   content, so it needs an edge of its own or the links float on nothing. */
.lp-menu-bar.sticky-header,
.header-sticky .lp-menu-bar,
.lp-header-sticky .lp-menu-bar {
	background: #ffffff !important;
	box-shadow: 0 2px 14px rgba(19, 41, 63, .09);
}

/* ------------------------------------------------------------- the logo -- */

.lp-logo img,
.lp-logo-container img {
	content: url("../img/logo-dark.png");
}

/* ---------------------------------------------------------------- links -- */

.lp-menu-bar .lp-menu a,
.lp-menu-bar .menu-item a,
.lp-menu-bar .lp-join-now a,
.lp-menu-bar .lp-joinus-icon a,
.lp-menu-bar .lp-join-now span,
.lp-menu-bar .lp-join-now i {
	color: var(--sh-ink) !important;
}

.lp-menu-bar .lp-menu a:hover,
.lp-menu-bar .menu-item a:hover,
.lp-menu-bar .menu-item.current-menu-item > a,
.lp-menu-bar .lp-join-now a:hover {
	color: var(--sh-brand) !important;
}

/* The theme separates menu items with a printed "|" in an ::after. It was a
   faint white on charcoal; on this it would be a hard dark tick. */
.lp-menu-outer::after,
.lp-menu-bar .lp-menu::after {
	color: var(--sh-line) !important;
}

/* --------------------------------------------------------- the buttons -- */

/**
 * Add Listing and Sign In were a blue pill and a white-outlined box, both drawn
 * for a dark bar. They become one filled teal button and one quiet text button —
 * the header should offer one obvious action, not two competing ones.
 */
.lp-menu-bar .lp-add-listing-btn a,
.lp-menu-bar .lpl-add-listing-loggedout {
	background: var(--sh-brand) !important;
	border-color: var(--sh-brand) !important;
	color: #ffffff !important;
}

/**
 * The wrapper around that link must stay unpainted.
 *
 * `starzmeet-provider.css` paints `.single-listing .lp-add-listing-btn` — the
 * containing DIV, not the link — purple with a purple border, as part of the
 * provider page's button sweep. Against a teal link that shows up as a purple
 * ring around the button on every listing page. It is a wrapper; nothing should
 * be drawing it at all.
 */
.lp-menu-bar .lp-add-listing-btn,
.single-listing .lp-menu-bar .lp-add-listing-btn {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.lp-menu-bar .lp-add-listing-btn a:hover,
.lp-menu-bar .lpl-add-listing-loggedout:hover {
	background: var(--sh-brand-dark) !important;
	border-color: var(--sh-brand-dark) !important;
	color: #ffffff !important;
}

.lp-menu-bar .lp-joinus-icon,
.lp-menu-bar .lp-joinus-icon-outer .lp-joinus-icon {
	border-color: var(--sh-line) !important;
	background: rgba(255, 255, 255, .72) !important;
}

/**
 * The Sign In / Sign Up pair.
 *
 * The theme drew this as a 2px WHITE box, which on a dark bar was an outline and
 * on this is an invisible box with a purple button floating inside it. The box
 * becomes a light outline, and Sign Up — injected by starzmeet-auth.js, and
 * purple, which is the site's OTHER palette — becomes teal so that at least the
 * header agrees with itself. (The class is .sm-signup-btn, not .szm-.)
 */
.lp-menu-bar .lp-join-now {
	border-color: var(--sh-line) !important;
}

.lp-menu-bar .sm-signup-btn,
.lp-menu-bar a.sm-signup-btn {
	background: var(--sh-brand) !important;
	border-color: var(--sh-brand) !important;
	color: #ffffff !important;
}

.lp-menu-bar .sm-signup-btn:hover,
.lp-menu-bar a.sm-signup-btn:hover {
	background: var(--sh-brand-dark) !important;
	color: #ffffff !important;
}

/* The region switcher pill (USA / IN / …). Its own <select> carries the site's
   pre-purple green as a colour, which on a white pill left the country name
   looking blank — the pill has to be dressed inside as well as out. */
.lp-menu-bar .szr-switch,
.lp-menu-bar .szr-switch-btn,
.lp-menu-bar .szr-pill {
	border-color: var(--sh-line) !important;
	background: rgba(255, 255, 255, .72) !important;
	color: var(--sh-ink) !important;
}

.lp-menu-bar .szr-switch select,
.lp-menu-bar .szr-switch button,
.lp-menu-bar .szr-switch span {
	color: var(--sh-ink) !important;
}

/**
 * The country code itself is not text in the document — the real <select> is
 * invisible and the label is drawn by `::after { content: attr(data-label) }` in
 * region-switch-header.php, coloured white for the dark bar. So the pill looked
 * like an empty box with a flag in it: nothing to select, nothing to inspect,
 * just missing. Same selector as the original, plus the header, plus important.
 */
html.szm-region-header .lp-menu-bar .szr-switch.szm-in-header::after {
	color: var(--sh-ink) !important;
}

html.szm-region-header .lp-menu-bar .szr-switch.szm-in-header {
	border-color: var(--sh-line) !important;
	background: rgba(255, 255, 255, .72) !important;
}

html.szm-region-header .lp-menu-bar .szr-switch.szm-in-header:hover {
	border-color: var(--sh-brand) !important;
	background: #ffffff !important;
}

/* ------------------------------------------- the page-title band, light -- */

/**
 * The second grey.
 *
 * On every listing, category and search page a 216px charcoal slab sits
 * directly under the header carrying the page title, the breadcrumb and the
 * map/grid/list controls. It is the same device as the header overlay —
 * `.page-header-overlay`, another `rgba(0,0,0,.7)` sheet over a banner image —
 * and once the header above it went light it stopped reading as one dark top
 * and started reading as a black brick glued under a white strip.
 *
 * So the band takes the same mint as the header and everything written on it
 * turns navy. Its text was white without exception, which is why every rule
 * below exists: leave one out and that word disappears rather than looks wrong.
 */
.page-heading .page-header-overlay,
.page-header-overlay {
	background: transparent !important;
}

.page-heading {
	background: var(--sh-band) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--sh-line);
}

.page-heading h1,
.page-heading h2,
.page-heading h3,
.page-heading .lp-page-title,
.page-heading p,
.page-heading a,
.page-heading span,
.page-heading i {
	color: var(--sh-ink) !important;
}

/**
 * The title itself is NOT inside `.page-heading`.
 *
 * "Listings In Cupertino" is an `h3.test` in `.lp-title`, part of the search
 * FORM that overlaps the band from below — which is why it kept its white after
 * everything around it had turned. Colour it where it actually lives.
 */
.lp-title h3,
.lp-title h3 span,
.filter-top-section .lp-title,
.filter-top-section .lp-title a {
	color: var(--sh-ink) !important;
}

.page-heading a:hover {
	color: var(--sh-brand) !important;
}

/* The grid / list toggles are white circles drawn as borders. */
.page-heading .grid,
.page-heading .list,
.page-heading .all-list-map {
	border-color: var(--sh-line) !important;
}

.page-heading .grid:hover,
.page-heading .list:hover,
.page-heading .grid.active,
.page-heading .list.active {
	border-color: var(--sh-brand) !important;
	color: var(--sh-brand) !important;
}

/* ------------------------------------------------------- small screens -- */

/* The burger is three white bars. */
.lp-menu-bar .nav-icon .icon-bar,
.mobile-nav-icon .icon-bar {
	background: var(--sh-ink) !important;
}

@media (max-width: 991px) {
	/* The slide-out menu keeps the theme's dark panel — it covers the page
	   rather than sitting on the hero, so nothing there was ever grey-on-grey. */
	.lp-menu-bar { border-bottom: 1px solid var(--sh-line); }
}