/* Ambient Flare — shared overrides on top of the Warhol theme.
   Loaded after skin.css on every page. Keep page-specific rules out of here. */

/* One dark header at phone and tablet widths, on every page.

   The theme assumes a mobile header sits on a light background: below 960px it
   forces the dark logo visible and hides the light one on any header that is
   not .header-dark. But the About and Contact headers are .header-transparent,
   and on mobile the theme never adds the .header-background class that would
   give them a solid backdrop on scroll — so .header-inner stays transparent,
   the white page shows through, and whichever logo is showing is unreadable
   against it.

   Rather than chase the theme's light/dark swap, pin the mobile header to the
   same charcoal the homepage already uses and always show the light logo.
   Every selector here is qualified with .header-fixed-on-mobile, which every
   page carries, purely to outrank the theme's own !important rules. */
@media only screen and (max-width: 960px) {

	.header.header-fixed-on-mobile .header-inner {
		background-color: #232323 !important;
		border-color: #232323 !important;
	}

	/* dark logo, meant for light backgrounds — never wanted here */
	.header.header-fixed-on-mobile .logo a:first-child {
		display: none !important;
	}

	/* light logo, the only one shown on mobile */
	.header.header-fixed-on-mobile .logo a + a:last-child {
		display: block !important;
		opacity: 1 !important;
		position: relative;
		top: 0;
		-webkit-transform: none !important;
		transform: none !important;
	}

	.header.header-fixed-on-mobile .navigation-show.nav-icon {
		color: #fff;
		border-color: rgba(255, 255, 255, 0.35);
	}

	.header.header-fixed-on-mobile .navigation-show.nav-icon:hover,
	.header.header-fixed-on-mobile .navigation-show.nav-icon:focus {
		color: #fff;
		border-color: #fff;
	}

	/* in case the inline nav is visible at the wider end of this range */
	.header.header-fixed-on-mobile .navigation > ul > li > a {
		color: #d8d8d8;
	}

	.header.header-fixed-on-mobile .navigation > ul > li > a:hover,
	.header.header-fixed-on-mobile .navigation > ul > li.current > a {
		color: #fff;
	}
}