/*
Theme Name: Deal Bay
Theme URI: https://premiummattresses.local
Description: Deal Bay storefront — a child theme of Storefront carrying our own logo, brand colors, and typography. Built as a child theme so Storefront updates never overwrite our customizations.
Author: Deal Bay
Template: storefront
Version: 1.3.0
Text Domain: dealbay
*/

/* -----------------------------------------------------------------------
   Most colors (header/footer/buttons/links/headings/body text) are set as
   Storefront Customizer defaults in functions.php, so they stay editable
   from Appearance > Customize > Colors without touching code. What's below
   is only what that system can't do on its own.
   ----------------------------------------------------------------------- */

/* The search icon button that replaces the old always-open search box
   (see dealbay-header.js) — small enough to sit comfortably in the
   header at any screen width, so this part isn't scoped to desktop. */
.site-header .pm-search-toggle {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	color: #ffffff;
	font-size: 0.95rem;
	padding: 0.55em 0.7em;
	cursor: pointer;
}
.site-header .pm-search-toggle:hover {
	color: #FCB825;
	border-color: #FCB825;
}
.site-header .site-search {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	width: 280px;
	max-width: calc(100vw - 2em);
	margin-top: 0.5em;
	padding: 0.75em;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	z-index: 100;
}
.site-header .site-search.pm-search-open {
	display: block;
}
.site-header .col-full {
	position: relative; /* anchors the search dropdown above, at any width */
}

/* Single unified navy header bar: logo, nav links, search and cart all in
   one row (functions.php re-times the hooks so they share one wrapper;
   this is the layout for that shared row). Desktop only — below 768px
   the nav becomes a full dropdown behind Storefront's own hamburger
   button, and trying to keep it flex-aligned with the logo/cart on the
   same line made the open dropdown overlap them. Below 768px this block
   is skipped entirely and Storefront's normal stacked mobile layout
   (logo, then Menu + search, then its own handheld footer bar for
   account/cart) is used untouched. */
@media screen and (min-width: 768px) {
	.site-header .col-full {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5em 0.65em;
		padding-top: 0.6em;
		padding-bottom: 0.6em;
	}

	.site-header .site-branding {
		margin: 0;
		flex: 0 0 auto;
		max-width: 150px !important;
	}

	.site-header .main-navigation {
		/* Don't grow to fill leftover space (that starved the search
		   box/cart of room) — just take the width its links actually
		   need. A hard max-width (rather than relying on content-based
		   auto sizing) is what actually makes the browser's line-wrap
		   math treat this as narrow enough to share the row with the
		   logo/search/cart. */
		flex: 0 1 auto !important;
		width: auto !important;
		max-width: 640px !important;
		float: none !important;
		clear: none !important;
		margin-right: 0 !important;
		background-color: transparent; /* the whole header bar is already navy */
	}

	/* Trim the nav links' default padding so all 6 items fit comfortably
	   in the shared row alongside the logo, search and cart. */
	.site-header .main-navigation ul.nav-menu > li > a {
		padding: 0.7em 0.4em !important;
		font-size: 0.88em;
	}

	.site-header .pm-search-toggle {
		flex: 0 0 auto;
	}

	.site-header .site-search {
		flex: 0 0 auto;
	}

	/* display:flex (not just a width override) is what's needed here —
	   without it this list's items were collapsing to 0 width once
	   Storefront's own fixed 21.7% float width was overridden. Below
	   768px, Storefront replaces the header cart with its own "handheld
	   footer bar" (account/search/cart icons pinned to the bottom of the
	   screen), so this stays scoped to desktop rather than forcing the
	   header cart to stay visible there too. */
	.site-header .site-header-cart {
		display: flex !important;
		align-items: center;
		gap: 0.75em;
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: 150px !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
	}
	.site-header .site-header-cart li {
		list-style: none;
		margin: 0;
	}
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	color: #ffffff;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li:hover > a,
.main-navigation ul.nav-menu > li > a:hover,
.site-header ul.menu li.current-menu-item > a {
	color: #FCB825;
}

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
	background-color: #1a1729;
}

.main-navigation ul.menu ul.sub-menu a,
.main-navigation ul.nav-menu ul.children a {
	color: #ffffff;
}

/* On narrower headers the nav collapses behind Storefront's own "Menu"
   toggle button — style it to match the navy bar instead of its default
   look, and give the mobile dropdown menu a solid navy background so it
   doesn't render see-through over page content. */
.site-header .menu-toggle {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #ffffff;
}
.site-header .main-navigation ul.nav-menu {
	background-color: #1a1729;
}

/* Headings use a confident semi-bold sans-serif; body text keeps the
   theme's clean system sans-serif. */
h1, h2, h3, h4, h5, h6,
.site-title,
.storefront-product-search-toggle,
.woocommerce-loop-product__title {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 600;
}

/* Logo sizing: clearly visible without crowding the nav on mobile. */
.site-branding {
	max-width: 220px;
}

/* White rounded badge behind the logo now that it sits on the navy bar —
   the logo has navy elements baked into the artwork (the figure, "Bay")
   that would otherwise vanish against a navy background. Same treatment
   used on the promotional banner images. */
.custom-logo-link {
	display: inline-block;
	background-color: #ffffff;
	border-radius: 8px;
	padding: 0.3em 0.55em;
	line-height: 0;
}
.custom-logo-link img {
	max-height: 42px;
	width: auto;
	display: block;
}
@media screen and (max-width: 768px) {
	.custom-logo-link img {
		max-height: 40px;
	}
	.custom-logo-link {
		padding: 0.3em 0.6em;
	}
}

/* Gold used sparingly: sale badges + best-seller style highlight tags. */
.onsale {
	background-color: #FCB825 !important;
	color: #252138 !important;
	font-weight: 600;
}

/* Keep the duty-rating badge (added in Stage 2) visually consistent with
   the brand palette instead of its original generic amber. */
.pm-duty-badge {
	background: #fff6df;
	border-color: #FCB825;
	color: #252138;
}

/* Homepage: "Shop by Category" tiles (Stage 4). */
.pm-category-tile {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease;
}
.pm-category-tile:hover {
	transform: translateY(-3px);
}
.pm-category-tile img {
	border-radius: 4px;
	border: 1px solid #eee;
}
.pm-category-tile p {
	margin-top: 0.5em;
	color: #252138;
}

/* Homepage: trust badges row spacing. */
.pm-trust-badges {
	padding: 2em 0;
}
.pm-trust-badges p {
	font-size: 1rem;
	line-height: 1.8;
}

/* Trust badge icons (Font Awesome, already loaded by Storefront) replace
   the old raw emoji so they render consistently across devices/OSes. */
.pm-trust-icon {
	font-size: 2rem;
	color: #252138;
	margin-bottom: 0.2em;
}

/* The "Edit" link WordPress core prints after page content is only ever
   shown to logged-in editors (edit_post_link() checks capability before
   printing anything — customers never see it). It's still hidden here on
   the homepage specifically, since it left an odd gap of blank space
   above the footer when reviewing the page while logged in. */
.home .edit-link {
	display: none;
}

/* Storefront puts a ~2.6em bottom margin under the main content area on
   every page, as breathing room before the footer. That's invisible
   against the site's white background elsewhere, but on the homepage the
   last section is a full-bleed navy block, so the gap showed up as a
   stray white band between it and the (also navy) footer. Homepage only. */
.home #primary,
.home #main {
	margin-bottom: 0;
}