/*
Theme Name:   DA VA Store (Blocksy)
Theme URI:    https://davastore.de
Description:  Blocksy child theme for davastore.de -- modern, minimal fashion-store look. Self-hosted Assistant typeface, brand palette (#121212 text, #334FB4 accent, #242833 footer) applied in a modern layout: full-width hero, big-image product grid with hover second image, clean product pages, high-contrast footer.
Author:       davastore
Template:     blocksy
Version:      1.1.0
Text Domain:  davastore-blocksy
*/

:root {
	--dv-color-text: #121212;
	--dv-color-background: #ffffff;
	--dv-color-surface: #f3f3f3;
	--dv-color-accent: #334fb4;
	--dv-color-accent-hover: #26399a;
	--dv-color-accent-contrast: #ffffff;
	--dv-color-footer-bg: #242833;
	--dv-color-footer-text: #ffffff;
	--dv-font-body: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
	font-family: var(--dv-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title, .site-logo-container {
	font-family: var(--dv-font-body);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* --- Announcement bar (header top row) --- */

#header [data-row="top"] {
	background: var(--dv-color-footer-bg);
}
#header [data-row="top"] [data-id="text"],
#header [data-row="top"] [data-id="text"] p {
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-align: center;
	margin: 0;
	padding: 0.55rem 0;
}

/* --- Header: clean white, logo left (Blocksy default), menu right --- */

#header.ct-header {
	background: var(--dv-color-background);
	border-bottom: 1px solid #ededed;
}

#header .site-logo-container img {
	max-height: 52px;
	width: auto;
}

#header-menu-1.menu-container > ul.menu > li > a,
#header .ct-menu-link {
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	color: var(--dv-color-text);
}

/* --- Buttons: brand accent everywhere --- */

.ct-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button.alt,
.added_to_cart,
button[type="submit"] {
	background-color: var(--dv-color-accent);
	border-color: var(--dv-color-accent);
	color: var(--dv-color-accent-contrast);
	border-radius: 2px;
}

.ct-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--dv-color-accent-hover);
	border-color: var(--dv-color-accent-hover);
	color: var(--dv-color-accent-contrast);
}

.woocommerce span.onsale {
	background-color: var(--dv-color-accent);
}

/* --- Homepage: full-width hero, USP strip, category tiles --- */

/* max-width: none !important is required here -- WordPress core's own
   .is-layout-constrained > * block-layout rule (applied to .entry-content's
   direct children) caps this element's width at the content column width
   with the same CSS specificity as the rule below, and loads later in the
   cascade, so it was winning and silently boxing the hero despite
   width:100vw -- confirmed by inspecting the real DOM ancestry
   (.entry-content.is-layout-constrained > section.dv-hero) and a real
   browser screenshot showing it boxed. */
.dv-hero {
	position: relative;
	overflow: hidden;
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.dv-hero__image {
	width: 100%;
	min-height: 80vh;
	max-height: 900px;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}
/* Dark gradient from the left (where the text sits) fading out toward the
   model on the right -- keeps white text readable (WCAG-safe contrast)
   without dimming the product photo itself. Stronger than a first attempt
   that turned out barely visible in a real screenshot against this
   particular (light gray) photo. */
.dv-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.6) 35%, rgba(10, 10, 10, 0) 65%);
	pointer-events: none;
}
.dv-hero__content {
	position: absolute;
	top: 50%;
	left: 8%;
	transform: translateY(-50%);
	max-width: 440px;
	color: #fff;
}
.dv-hero__content h1 {
	font-size: clamp(2.1rem, 4vw, 3.25rem);
	line-height: 1.1;
	margin: 0 0 0.75rem;
	color: #fff;
}
.dv-hero__content p {
	margin: 0 0 1.5rem;
	font-size: 1.15rem;
}
.dv-hero__button {
	display: inline-block;
	padding: 0.85rem 2rem;
	background-color: var(--dv-color-accent);
	color: #fff;
	font-weight: 700;
	border-radius: 2px;
	text-decoration: none;
}
.dv-hero__button:hover {
	background-color: var(--dv-color-accent-hover);
	color: #fff;
}
/* Mobile: text stacks below the image instead of overlaying it, so it never
   competes with the model for space and never needs the gradient to stay
   readable. */
@media screen and (max-width: 600px) {
	.dv-hero {
		display: flex;
		flex-direction: column;
	}
	.dv-hero__image {
		min-height: 0;
		height: 52vh;
		order: 1;
	}
	.dv-hero__overlay {
		display: none;
	}
	.dv-hero__content {
		position: static;
		transform: none;
		order: 2;
		max-width: none;
		color: var(--dv-color-text);
		padding: 1.5rem 1.25rem 2rem;
		background: var(--dv-color-background);
	}
	.dv-hero__content h1 {
		color: var(--dv-color-text);
	}
}

.dv-usp-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem 2.5rem;
	padding: 2rem 1rem;
	text-align: center;
	border-bottom: 1px solid #ededed;
	margin-bottom: 3rem;
}
.dv-usp {
	display: flex;
	flex-direction: column;
	min-width: 160px;
}
.dv-usp strong {
	font-size: 1rem;
	font-weight: 700;
}
.dv-usp span {
	font-size: 0.875rem;
	font-weight: 500;
	color: #444;
}

.dv-category-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin: 0 auto 4rem;
	max-width: 1100px;
	padding: 0 1rem;
}
/* Same card language as the product grid: 3:4 portrait, light gray card
   background, image scaled/cropped to fill, label as a pill-button overlay
   rather than a plain caption. */
.dv-tile {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: #f5f5f5;
	aspect-ratio: 3 / 4;
	text-decoration: none;
}
.dv-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.dv-tile:hover img {
	transform: scale(1.04);
}
.dv-tile__label {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	padding: 0.6rem 1.5rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--dv-color-text);
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	white-space: nowrap;
}
@media screen and (max-width: 650px) {
	.dv-category-tiles {
		grid-template-columns: 1fr;
	}
}

/* --- Product grid: big images, hover second image --- Blocksy's own
   native card system (inc/components/woocommerce/archive/product-card.php,
   `product_image_hover: 'swap'` on the `woo_card_layout` theme_mod, set in
   scripts/setup-blocksy-theme.php) handles the hover-swap mechanic and its
   own opacity/positioning CSS -- only the card's light gray background
   needs adding here. A custom PHP hook was tried first and abandoned: see
   functions.php's docblock for why it rendered every product twice. */
.woocommerce ul.products li.product .ct-media-container {
	background: #f5f5f5;
	border-radius: 4px;
	overflow: hidden;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: 600;
}

/* --- Footer: brand navy background, white text everywhere (WCAG AA) ---
   Fixes the earlier black-on-black contrast bug by making every element
   inside the footer inherit white text by default, not just <a> tags, so
   nothing can fall back to a dark inherited color against this dark
   background. */

/* Blocksy gives each footer row (top/middle/bottom) its own default white
   background via generated dynamic CSS, independent of the <footer>
   element's own background -- without this override the logo row (top)
   renders as a visible white band above the navy middle/bottom rows.
   Overriding each row directly, not just the <footer> element, removes
   that seam. */
#footer.ct-footer,
#footer.ct-footer [data-row] {
	background: var(--dv-color-footer-bg) !important;
}
#footer.ct-footer,
#footer.ct-footer * {
	color: var(--dv-color-footer-text);
}
/* Underline rather than a color change on hover: the brand accent blue
   (#334fb4) against this navy background measures ~2:1 contrast, well
   under WCAG AA -- white-on-navy (~15:1) stays the one hover-safe color. */
#footer.ct-footer a:hover {
	text-decoration: underline;
	opacity: 1;
}
#footer.ct-footer .widget-title,
#footer.ct-footer h4 {
	color: var(--dv-color-footer-text);
	opacity: 0.85;
}
#footer.ct-footer .ct-footer-copyright {
	opacity: 0.7;
	font-size: 0.85rem;
}
#footer .ct-social-box a {
	color: var(--dv-color-footer-text);
}

/* The source file is a dark "D" mark on a fully opaque white square canvas
   (confirmed: its alpha channel is 100% opaque everywhere, no transparent
   background to invert against) -- an earlier brightness(0)/invert(1)
   attempt to make it read white-on-navy instead turned the whole square
   solid white, erasing the mark entirely (confirmed in a real screenshot).
   Shown at its real size/colors instead, small and badge-like. */
.dv-footer-logo {
	height: 40px;
	width: 40px;
	display: block;
	margin-bottom: 0.75rem;
	border-radius: 6px;
}
.dv-footer-brand-text {
	max-width: 260px;
	font-size: 0.875rem;
	opacity: 0.8;
	margin: 0;
}

.dv-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dv-footer-list li {
	margin: 0 0 0.4rem;
}

.dv-payment-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.dv-payment-icon {
	height: 28px;
	width: auto;
	background: #fff;
	border-radius: 3px;
	padding: 3px 6px;
}
.dv-payment-badge {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 3px;
	background: #fff;
	color: var(--dv-color-text) !important;
	font-size: 0.75rem;
	font-weight: 700;
}

/* --- Size chart / materials product tabs (unchanged content, re-themed) --- */

table.dv-size-chart {
	border-collapse: collapse;
	margin-bottom: 1rem;
}
table.dv-size-chart th,
table.dv-size-chart td {
	border: 1px solid #e0e0e0;
	padding: 0.5rem 1rem;
	text-align: left;
}
table.dv-size-chart th {
	background: var(--dv-color-surface);
}
.dv-size-chart-note {
	color: #666;
	font-size: 0.9rem;
}
.dv-care-list {
	margin: 0 0 1rem 1.25rem;
}

/* --- Blog: archive cards + single-post related products, matching the
   shop's own product-card visual language (light gray image background,
   same section-heading style as the homepage's "Beliebte Produkte"). */
.entries .entry-card .ct-media-container {
	background: #f5f5f5;
	border-radius: 4px;
	overflow: hidden;
}
.entries .entry-card .entry-title {
	font-weight: 600;
}
.dv-blog-related {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--dv-color-surface);
}
.dv-blog-related__heading {
	margin-bottom: 1.5rem;
}
.dv-blog-related .woocommerce ul.products li.product .ct-media-container,
.dv-blog-related ul.products li.product .ct-media-container {
	background: #f5f5f5;
	border-radius: 4px;
	overflow: hidden;
}