/*
Theme Name: Collector's Cache Child
Theme URI: https://example.com/
Description: Child theme for the Collector's Cache store. Presentation only: template overrides and styling. All business logic lives in the Collector's Cache plugin so the store survives a theme change (spec 57, 82).
Author: Collector's Cache
Template: blocksy
Version: 0.1.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: collector-cache-child
*/

/*
 * Keep this file small. Component styling belongs to the plugin's
 * assets/css/frontend.css, which is driven by the Website Customizer tokens.
 * Only genuine theme-level overrides go here.
 */

/* --------------------------------------------------------------------------
   Parent theme adapter.

   Blocksy paints the page from its own palette variables and prints that CSS
   inline in <head>, after this stylesheet. Redefining the variables it reads
   is what makes the whole parent theme - backgrounds, headings, links,
   buttons, borders - follow the Website Customizer instead of fighting it.

   `:root:root` is specificity (0,2,0) against Blocksy's `:root` (0,1,0), so
   this wins on specificity rather than on load order. No !important needed.

   This block is theme-specific by design: it is the only place that knows
   Blocksy's variable names. Swap the parent theme and you rewrite this block
   and nothing else.
   -------------------------------------------------------------------------- */
:root:root {
	--theme-palette-color-1: var(--cc-color-accent);
	--theme-palette-color-2: var(--cc-color-accent-hover);
	--theme-palette-color-3: var(--cc-color-text);
	--theme-palette-color-4: var(--cc-color-text-muted);
	--theme-palette-color-5: var(--cc-color-border);
	--theme-palette-color-6: var(--cc-color-surface-elevated);
	--theme-palette-color-7: var(--cc-color-bg);
	--theme-palette-color-8: var(--cc-color-surface);

	--theme-text-color: var(--cc-color-text);
	--theme-headings-color: var(--cc-color-text);
	--theme-link-initial-color: var(--cc-color-accent);
	--theme-link-hover-color: var(--cc-color-accent-hover);
	--theme-border-color: var(--cc-color-border);
	--theme-selection-background-color: var(--cc-color-accent);
	--theme-selection-text-color: var(--cc-color-accent-contrast);

	--theme-button-background-initial-color: var(--cc-color-accent);
	--theme-button-background-hover-color: var(--cc-color-accent-hover);
	--theme-button-text-initial-color: var(--cc-color-accent-contrast);
	--theme-button-text-hover-color: var(--cc-color-accent-contrast);

	--theme-font-family: var(--cc-font-body);
	--theme-content-spacing: var(--cc-space-3);
	--theme-border-radius: var(--cc-radius);
}

body {
	font-family: var(--cc-font-body);
	font-size: var(--cc-font-size);
	line-height: var(--cc-line-height);
	background-color: var(--cc-color-bg);
	color: var(--cc-color-text);
}

h1,
h2,
h3,
h4 {
	font-family: var(--cc-font-heading);
	color: var(--cc-color-text);
}

h1 {
	font-size: var(--cc-font-size-h1);
}

h2 {
	font-size: var(--cc-font-size-h2);
}

h3 {
	font-size: var(--cc-font-size-h3);
}

/* --------------------------------------------------------------------------
   The store footer replaces the parent theme's.

   The plugin renders its own footer - about us, quick links, community and the
   Valve disclaimer - on wp_footer. Blocksy still renders its own below it, so
   this hides that one whenever ours is present. Knowing the parent theme's
   footer class is exactly the sort of thing that belongs in the child theme
   rather than in the plugin.
   -------------------------------------------------------------------------- */
body.cc-has-store-footer footer.ct-footer {
	display: none;
}

/* Our footer is appended at the end of the body, so give it the page width. */
body.cc-has-store-footer .cc-footer {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Header adaptation.

   The plugin puts the store actions - account, cart, checkout, search and the
   light/dark switch - at the end of the primary menu. Blocksy also renders its
   own search element to the right of that menu, which would leave two search
   controls with the theme switch stranded between them. Blocksy's is hidden so
   the plugin owns the whole action row and their order is predictable.
   -------------------------------------------------------------------------- */
.ct-header [data-id="search"],
.ct-header [data-column="end"] [data-id="search"] {
	display: none;
}

/* Give the menu room so the actions can be pushed to the far right. */
.ct-header [data-id="menu"] {
	flex: 1;
}

.ct-header [data-id="menu"] > .menu {
	width: 100%;
}

/* The placeholder logo is a wide SVG; keep it to a sensible header height. */
.site-logo-container .custom-logo,
.ct-header .custom-logo {
	max-height: 46px;
	width: auto;
}

/* With a logo in place the site title beneath it is a duplicate. */
.ct-header .site-logo-container:has(.custom-logo-link) .site-title,
.ct-header .site-logo-container:has(.custom-logo) .site-title,
body.has-custom-logo .ct-header .site-title {
	display: none;
}

/* --------------------------------------------------------------------------
   Header redesign.

   The parent theme supplies the header shell; everything visual about it is
   set here, from the plugin's design tokens. The aim is a light header that
   gets out of the way: a hairline rule instead of a block of colour, generous
   spacing between navigation items, and a clear separation between navigation
   (where you can go) and actions (what you can do).
   -------------------------------------------------------------------------- */
.ct-header [data-row="middle"],
.ct-header [data-row] {
	background: color-mix(in srgb, var(--cc-color-bg) 88%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--cc-color-border);
}

/* A shorter header leaves more of the page for the page. */
.ct-header [data-row="middle"] > div {
	min-height: 68px;
}

/* Navigation ------------------------------------------------------------- */
.ct-header .menu > .menu-item > a {
	padding-inline: 12px;
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	font-weight: var(--cc-weight-medium, 500);
	letter-spacing: -0.005em;
	color: var(--cc-color-text-muted);
	transition: color var(--cc-transition);
}

.ct-header .menu > .menu-item > a:hover,
.ct-header .menu > .menu-item > a:focus-visible {
	color: var(--cc-color-text);
}

/*
 * The current section is marked with weight and colour rather than an
 * underline that would fight the header's own hairline.
 */
.ct-header .menu > .current-menu-item > a,
.ct-header .menu > .current_page_item > a,
.ct-header .menu > .current-menu-ancestor > a {
	color: var(--cc-color-text);
	font-weight: var(--cc-weight-strong, 600);
}

/* Actions ---------------------------------------------------------------- */
.cc-header-action:first-of-type {
	margin-left: auto;
	padding-left: var(--cc-space-2);
	border-left: 1px solid var(--cc-color-border);
}

.cc-header-button {
	min-height: 40px;
	padding: 8px 14px;
	font-size: 0.9375rem;
	font-weight: var(--cc-weight-medium, 500);
}

/*
 * Sign in is the header's one primary action; the rest are quiet icons.
 *
 * These carry the `.ct-header .menu >` prefix on purpose. The action buttons
 * are menu items, so the navigation link rule above matches them too, and at
 * (0,2,2) it outranked a bare `.cc-header-action--account .cc-header-button`
 * at (0,2,0). Sign in was drawing muted grey text on the solid accent - 1.15:1
 * in light mode, which is illegible rather than merely dim.
 */
.ct-header .menu > .cc-header-action--account > .cc-header-button {
	gap: 10px;
	min-width: 148px;
	padding-inline: 20px;
	background: var(--cc-color-accent);
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent-contrast);
	font-weight: var(--cc-weight-strong, 600);
}

/* Room for a name, but a very long one is cut rather than pushing the row. */
.ct-header .menu > .cc-header-action--account .cc-header-button__label {
	max-width: 22ch;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ct-header .menu > .cc-header-action--account > .cc-header-button:hover,
.ct-header .menu > .cc-header-action--account > .cc-header-button:focus-visible {
	background: var(--cc-color-accent-hover);
	border-color: var(--cc-color-accent-hover);
	color: var(--cc-color-accent-contrast);
}

/*
 * Icon-only actions are square and quiet until touched, but they are controls
 * rather than prose, so they take full text colour instead of the muted value
 * the navigation links use.
 */
.ct-header .menu > .cc-header-action--cart > .cc-header-button,
.ct-header .menu > .cc-header-action--search > .cc-header-button {
	padding-inline: 11px;
	border-color: transparent;
	color: var(--cc-color-text);
}

.ct-header .menu > .cc-header-action--cart > .cc-header-button:hover,
.ct-header .menu > .cc-header-action--search > .cc-header-button:hover,
.ct-header .menu > .cc-header-action--cart > .cc-header-button:focus-visible,
.ct-header .menu > .cc-header-action--search > .cc-header-button:focus-visible {
	border-color: var(--cc-color-border);
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text);
}

.cc-theme-toggle {
	border-color: transparent;
	color: var(--cc-color-text-muted);
}

.cc-theme-toggle:hover,
.cc-theme-toggle:focus-visible {
	border-color: var(--cc-color-border);
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text);
}

/* Logo ------------------------------------------------------------------- */
/*
 * Bounded on both axes. Height alone is not enough: a wide wordmark keeps its
 * intrinsic width, and at 1280px that width was pushing the action buttons
 * past the container's right edge. The width comes from Settings -> Store
 * identity -> Logo width.
 */
.ct-header .custom-logo,
.ct-header .default-logo,
.ct-header .site-logo-container img {
	max-height: 38px;
	max-width: var(--cc-logo-width, 190px);
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Mobile ----------------------------------------------------------------- */
@media (max-width: 999px) {
	.ct-header [data-row="middle"] > div {
		min-height: 60px;
	}

	/* In the slide-out panel the actions become full-width rows, in the same
	   order they appear on desktop. */
	.ct-panel .cc-header-action {
		width: 100%;
		margin: 0 0 10px;
		padding-left: 0;
		border-left: 0;
	}

	.ct-panel .cc-header-button,
	.ct-panel .cc-theme-toggle {
		width: 100%;
		justify-content: center;
		border-color: var(--cc-color-border);
	}

	.ct-panel .menu > .menu-item > a {
		padding-inline: 0;
		font-size: 1.0625rem;
	}
}

/* --------------------------------------------------------------------------
   With a logo in the header, the site title next to it is a duplicate.
   WordPress marks the case with a body class, which is more reliable than
   guessing at the theme's own container names.
   -------------------------------------------------------------------------- */
body.wp-custom-logo .ct-header .site-title,
body.wp-custom-logo .ct-header .site-description {
	display: none;
}

/* --------------------------------------------------------------------------
   The homepage leads with the hero, so the page title above it is both
   redundant and a second h1 on the page - which weakens the heading outline
   for search engines and screen readers alike.
   -------------------------------------------------------------------------- */
body.home .entry-header,
body.home .page-title {
	display: none;
}

/* Blocksy's page hero band would otherwise add empty space above ours. */
body.home .hero-section {
	display: none;
}

/* --------------------------------------------------------------------------
   One container for the whole page.

   The parent theme sizes its container as a percentage of the viewport, while
   the plugin's .cc-container is a max-width plus a fixed gutter. The two
   resolve to different widths, so the header and the store sections below it
   did not share a left edge - the logo sat 17px inboard of the first product
   card. Teaching the theme's container the plugin's formula lines them up and
   makes the customizer's "Container width" mean one thing everywhere.
   -------------------------------------------------------------------------- */
.ct-container,
.ct-container-narrow,
.ct-header .ct-container {
	width: 100%;
	max-width: var(--cc-container);
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}

/* The narrow variant stays narrower, but relative to the same scale. */
.ct-container-narrow {
	max-width: calc(var(--cc-container) - 200px);
}

/* --------------------------------------------------------------------------
   Header layout: identity hard left, actions hard right.

   The parent theme lays the row out as a grid of columns. Making it a flex row
   lets the logo keep its intrinsic width while the navigation column takes the
   remaining space, so the actions can be pushed to the container's right edge
   instead of floating short of it.
   -------------------------------------------------------------------------- */
.ct-header [data-row] > .ct-container {
	display: flex;
	align-items: center;
	gap: var(--cc-space-4);
}

.ct-header [data-column="start"] {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.ct-header [data-column="end"] {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/*
 * Blocksy clips this wrapper (overflow: hidden). With the store actions
 * appended to the end of the menu, the last of them - the light/dark switch -
 * was being cut off entirely at common desktop widths.
 */
.ct-header [data-id="menu"] {
	flex: 1 1 auto;
	min-width: 0;
	overflow: visible;
}

/*
 * The theme puts a 10px right margin on the menu column to separate it from
 * whatever follows. Nothing follows it here, so that margin only held the
 * actions 10px short of the edge the logo sits against. The extra attribute
 * selector is there to outrank the theme's own rule.
 */
.ct-header [data-row] [data-id="menu"] {
	/*
	 * !important because the theme sets this from its own generated
	 * stylesheet, which loads after the child theme and cannot be outranked by
	 * specificity alone. Scoped to this one property on this one element.
	 */
	margin-right: 0 !important;
	margin-inline-end: 0 !important;
}

.ct-header [data-id="menu"] > .menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	width: 100%;
	margin-inline: 0;
}

/* Actions ---------------------------------------------------------------- */
.cc-header-action {
	margin-left: var(--cc-space);
}

/* The account button is the primary action; it gets clear air on its right. */
.ct-header .menu > .cc-header-action--account + .cc-header-action {
	margin-left: var(--cc-space-2);
}

/*
 * The divider marks where "where you can go" ends and "what you can do"
 * begins, and margin-left:auto is what pushes the whole action group to the
 * right edge.
 *
 * Selecting the first action by :first-of-type does not work: every sibling
 * here is an li, so "first of type" is the first navigation item, not the
 * first action - the rule matched nothing and the actions merely trailed the
 * navigation. Matching the action that directly follows a non-action names it
 * exactly, whatever the menu contains.
 */
.ct-header .menu > .menu-item:not(.cc-header-action) + .cc-header-action {
	margin-left: auto;
	padding-left: var(--cc-space-3);
	border-left: 1px solid var(--cc-color-border);
}

/* --------------------------------------------------------------------------
   The shop archive leads with its own filter bar and product grid, so the
   theme's oversized "Shop" title is dead weight above it.

   It is hidden rather than removed: the page still needs exactly one h1 for
   its heading outline, and search engines still read it. Only the visual
   weight goes.
   -------------------------------------------------------------------------- */
body.post-type-archive-product .entry-header .page-title,
body.tax-cc_collection .entry-header .page-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * With the title gone the band around it has nothing left to space out, and
 * it was reserving 250px of empty page above the filters.
 *
 * The theme sizes that band with `padding: var(--container-padding, 50px 0)`
 * and `min-height: var(--min-height, 250px)`, so setting those two custom
 * properties collapses it through the theme's own mechanism - no specificity
 * contest, and it keeps working if Blocksy changes its selectors.
 */
body.post-type-archive-product .hero-section,
body.tax-cc_collection .hero-section,
body.post-type-archive-product .entry-header,
body.tax-cc_collection .entry-header {
	--container-padding: 0px;
	--min-height: 0px;
	margin-block: 0;
}