/*------------------------------------------------------------------------
 Header and footer redesign for Eprom PCE Child.

 Loaded site-wide by functions.php, printed after the parent styles and
 after the child's style.css, so it wins the cascade without touching
 either file. Palette matches the product-page redesign: dark #1a1a1a
 chrome, white surfaces, accent #fa4c29.

 The parent's 2013 look — beveled gray bars, 48px orange page titles on a
 940px dark band, three differently-gray footer strips — is flattened
 into: slim dark utility bar, white header, compact page-title band, one
 dark footer block that also absorbs the Germanized legal strip.
 ------------------------------------------------------------------------*/


/* ----------------------------------------------------------------------
	Header: white, flat navigation

	The parent bevels every nav link with light/dark 1px borders and
	fills hover/current states with #dadada. Flat white instead; the
	current page gets an accent underline. Dropdown panels (none in the
	current menu, styled in case one is added) go white; the parent
	paints them near-black with !important on the hover fill, hence the
	matching !important below.
/* ---------------------------------------------------------------------- */

#header {
	background-color: #fff;
	border-bottom: 1px solid #e5e5e5;
	box-sizing: border-box;
}

#header.fixed {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

#main-nav {
	border-left: 0;
	border-right: 0;
}

#main-nav a {
	color: #444;
	font-size: 13px;
	border-left: 0;
	border-right: 0;
	padding: 0 18px;
}

#main-nav a:hover,
#main-nav .hover > a,
#main-nav .current-menu-item > a,
#main-nav .current_page_item > a,
#main-nav .current-menu-ancestor > a,
#main-nav .active > a {
	color: #fa4c29;
	background-color: transparent;
	border-left: 0;
}

#main-nav .current-menu-item > a,
#main-nav .current_page_item > a,
#main-nav .current-menu-ancestor > a {
	box-shadow: inset 0 -3px 0 #fa4c29;
}

#main-nav ul ul {
	background: #fff;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	overflow: hidden;
}

#main-nav ul ul a {
	color: #444;
	border-top: 0;
	border-bottom: 1px solid #f0f0f0;
}

#main-nav ul ul a:hover,
#main-nav ul ul .hover > a,
#main-nav ul ul .current-menu-item > a,
#main-nav ul ul .current_page_item > a,
#main-nav ul ul .current-menu-ancestor > a,
#main-nav ul ul .active > a {
	background-color: #f5f5f5 !important;
	color: #fa4c29;
}

/* Mobile menu <select>, shown by media-queries.css below 768px */
#main-nav .responsive-nav,
#top-wrap .responsive-nav {
	background-color: #1a1a1a;
	border-radius: 8px;
}


/* ----------------------------------------------------------------------
	Page-title band

	Was 40px padding + 48px orange title + 36px subtitle on a dark
	image background — 386px tall on product pages, where it duplicated
	the full product title above the product card. Compact band instead.
	On product pages the duplicated product title is hidden and the
	subtitle ("Shop") is promoted to title size, so the band keeps the
	same height as on every other page and navigation does not jump.
/* ---------------------------------------------------------------------- */

/*
	Keeps the parent's angular-shards texture (default-bg.png), scaled to
	cover the now much shorter band; flat #1a1a1a alone read as boring.
	media-queries.css still flattens it to plain #222 below 768px with
	!important, which is fine. Path resolves from this file to the parent
	theme's image directory.
*/
#page-header {
	background: #1a1a1a url(../eprom_1_5_5/styles/img_light/default-bg.png) center top no-repeat;
	background-size: cover;
	border-top: 0;
	border-bottom: 0;
	padding-top: 22px;
}

#page-header .page-title {
	font-size: 26px;
	color: #fff;
}

#page-header .page-subtitle {
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#page-header .hgroup {
	margin-bottom: 14px;
}

#page-header hr {
	display: none;
}

#share-wrap ~ hr,
#page-header .hgroup ~ hr {
	margin-bottom: 22px;
}

.single-product #page-header .page-title {
	display: none;
}

.single-product #page-header .page-subtitle {
	font-size: 26px;
	color: #fff;
	text-transform: none;
	letter-spacing: 0;
}


/* ----------------------------------------------------------------------
	Footer: one dark block

	#footer-top (empty contact list + one Facebook icon on #888),
	#footer (nav + copyright on #999) and the Germanized strip (styled
	#666 in style.css) become a single #1a1a1a unit. The legal strip
	keeps a hairline separator so it still reads as its own row; the
	white-on-#1a1a1a text is ~16:1 contrast.
/* ---------------------------------------------------------------------- */

#footer-top {
	background-color: #1a1a1a;
	border-top: 0;
	border-bottom: 0;
	margin-top: 60px;
	padding-top: 26px;
}

.social-icons:before {
	display: none;
}

a.social-icon {
	background-color: #2a2a2a;
	border-radius: 6px;
}

a:hover.social-icon {
	background-color: #fa4c29;
}

#footer {
	background-color: #1a1a1a;
	border-top: 0;
}

#footer section.container {
	padding: 0 0 26px;
}

#footer, #footer a { color: #888; }

#footer-nav {
	margin: 0 0 10px;
	padding: 0;
}

#footer-nav li a {
	color: #aaa;
	border-left: 1px solid #333;
}

#footer-nav li a:hover {
	color: #fa4c29;
}

.copyright {
	color: #666;
}

/* Germanized strip below the footer (base look lives in style.css) */
p.footer-info,
.eu-owb-order-withdraw-from-contract-button {
	background: #111;
}

p.footer-info {
	border-top: 1px solid #2a2a2a;
}


/* ----------------------------------------------------------------------
	Contrast fixes in the chrome

	The darker accent set in style.css covers content links. Three places
	in the chrome set their own colour and so were unaffected:

	- #main-nav's current/hover state keeps the bright #fa4c29 from
	  light.css, which is 3.43:1 on the white header.
	- #top-wrap's #555 sits on the #c2c2c2 utility bar at 4.19:1 - close,
	  but still short.
	- #share .share is a light-background grey (#666) that ended up on the
	  dark page-title band at 3.29:1.
   ---------------------------------------------------------------------- */

#main-nav a:hover,
#main-nav .hover > a,
#main-nav .current-menu-item > a {
	color: #b32f13;
}

#top-wrap ul.nav li a {
	color: #444;
}

#share .share {
	color: #999;
}


/* ----------------------------------------------------------------------
	Footer: selling points above the bottom bar

	Added together with the rebuilt child footer.php, which drops
	#footer-top and the old two-column #footer in favour of a row of four
	selling points above a single bottom bar. The #footer-top rules above
	are inert now that the markup is gone; they are left in place so the
	file still reads against the parent theme.

	This lives here rather than in style.css because this file is enqueued
	last. Both files styling the footer is what produced the three-tone
	footer (#17130f / #1a1a1a / #111) this replaces.

	Ground stays #1a1a1a as set above. Link and body greys are unchanged
	too - #aaa on #1a1a1a is 7.5:1, #888 is 4.7:1, both clear of the 4.5:1
	the parent's #eee-on-#999 footer failed at 2.46:1.
/* ---------------------------------------------------------------------- */

#footer-wrapper {
	margin-top: 60px;
	background-color: #1a1a1a;
}

/* --- selling points --- */

#pce-usp {
	padding: 42px 0 34px;
}

#pce-usp ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#pce-usp li {
	margin: 0;
	padding: 0;
	background: none;
	list-style: none;
}

#pce-usp h3 {
	margin: 0 0 8px;
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .01em;
	text-transform: uppercase;
	/* A whisper of colour fringing, for a label that sells cult film on
	   disc. Subtle enough that the white glyphs still carry the contrast. */
	text-shadow: 1px 0 0 rgba(255, 42, 74, .5), -1px 0 0 rgba(0, 214, 255, .4);
}

#pce-usp p {
	margin: 0;
	color: #9a938d;
	font-size: 13px;
	line-height: 1.5;
	/* Columns are ~235px inside the 940px container, so the longer two
	   sentences take a second line. Balanced they break evenly instead of
	   leaving one word stranded. */
	text-wrap: balance;
}

/* --- bottom bar --- */

#footer {
	border-top: 1px solid #262626;
}

/* Flex rather than floats with a guessed percentage: the legal menu needs
   672px and a 62% cap gave it 583px, which broke it onto two rows. */
#footer section.container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px 30px;
	padding: 22px 0 26px;
}

/* .clearfix::after becomes a flex item in a flex container and eats a gap.
   It has no job here anyway - flex does not need clearing. */
#footer section.container::after {
	display: none;
}

#footer .pce-footer-left {
	float: none;
	flex: 0 1 auto;
	min-width: 0;
}

/* The legal menu needs 672px and the copyright block 372px, which does not
   fit the 940px container. margin-left:auto keeps the copyright hard right
   whether it sits beside the menu or wraps under it. */
#footer .pce-footer-right {
	float: none;
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	font-size: 12px;
	line-height: 1.6;
}

/* The parent draws divider bars between the footer links; the rebuilt bar
   spaces them instead. */
#footer-nav li a {
	padding-left: 0;
	border-left: 0;
	font-size: 13px;
}

#footer-nav li {
	margin-right: 22px;
}

/* Germanized's VAT notice now sits inside the bottom bar rather than
   floating below the footer, so it drops the strip styling it had while it
   was a direct child of body. */
#footer p.footer-info {
	margin: 0;
	padding: 0;
	background: none;
	border-top: 0;
	font-size: 12px;
	text-align: right;
}

/* The copyright inherits #666 further up this file, which is only 3.03:1
   on #1a1a1a. #888 takes it to 4.91:1. */
#footer .copyright {
	margin: 0;
	color: #888;
	font-size: 12px;
}

#footer ul.contact {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
}

#footer ul.contact li {
	display: inline-block;
	margin: 0 18px 0 0;
	padding: 0;
	background: none;
}

/* The theme floats social icons right, which was correct in the old
   #footer-top strip and wrong under the legal menu. */
#footer .social-icons {
	float: none;
	margin-top: 16px;
}

/* --- closing row: the Widerrufsbutton ---

   The plugin embeds this at wp_footer as a direct child of <body>, below
   #footer-wrapper. It is deliberately left on that path - the button is
   legally required, so it should not depend on this template - and simply
   given the footer's ground so it reads as the closing row. */

.eu-owb-order-withdraw-from-contract-button {
	margin: 0;
	padding: 0 20px 34px;
	background-color: #1a1a1a;
	text-align: center;
}

/* --- footer on small screens --- */

@media only screen and (max-width: 768px) {

	#pce-usp {
		padding: 30px 0 24px;
	}

	#pce-usp ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 20px;
	}

	#footer section.container {
		display: block;
	}

	#footer .pce-footer-left,
	#footer .pce-footer-right {
		float: none;
		max-width: none;
		text-align: left;
	}

	#footer .pce-footer-right {
		margin-top: 18px;
	}

	#footer p.footer-info {
		text-align: left;
	}

	#footer-nav li {
		margin: 0 16px 6px 0;
	}
}