/*
Theme Name: InkWit v3
Theme URI: https://inkwitapparel.com
Description: InkWit Apparel child theme for Blocksy. Brand tokens, 4:5 shop grid, header and footer in code.
Author: InkWit Apparel
Author URI: https://inkwitapparel.com
Template: blocksy
Version: 3.0.1
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inkwit
*/

/* --------------------------------------------------------------------------
   1. Brand tokens (brand.md, ux-audit/04-redesign.md). Change them here only.
   -------------------------------------------------------------------------- */
:root {
	--iw-ink: #1A1A1A;          /* never pure #000 */
	--iw-wit: #C43B2A;          /* wit red, the one accent */
	--iw-wit-deep: #A33122;     /* hover on red */
	--iw-cream: #FDFBF8;        /* page ground */
	--iw-parchment: #F7F4F0;    /* panels, image wells */
	--iw-parchment-deep: #EDE8E2; /* borders */
	--iw-smoke: #8A847D;        /* secondary text */
	--iw-white: #FFFFFF;

	--iw-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--iw-font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--iw-tile-ratio: 4 / 5;     /* every product image, grid and gallery */
	--iw-tap: 44px;             /* minimum tap target */
	--iw-radius: 2px;
}

/* --------------------------------------------------------------------------
   2. Map the tokens onto Blocksy's own variables, so Blocksy's components
      (buttons, forms, cart, cards) come out on-brand without per-element CSS.
      :root:root outranks Blocksy's generated :root palette.
      Palette roles: 1 accent, 2 accent hover, 3 text, 4 headings,
      5 borders, 6 panels, 7 site background, 8 cards.
   -------------------------------------------------------------------------- */
:root:root {
	--theme-palette-color-1: var(--iw-wit);
	--theme-palette-color-2: var(--iw-wit-deep);
	--theme-palette-color-3: var(--iw-ink);
	--theme-palette-color-4: var(--iw-ink);
	--theme-palette-color-5: var(--iw-parchment-deep);
	--theme-palette-color-6: var(--iw-parchment);
	--theme-palette-color-7: var(--iw-cream);
	--theme-palette-color-8: var(--iw-white);

	--theme-text-color: var(--iw-ink);
	--theme-link-initial-color: var(--iw-ink);
	--theme-link-hover-color: var(--iw-wit);
	--theme-headings-color: var(--iw-ink);
	--theme-border-color: var(--iw-parchment-deep);

	--theme-button-background-initial-color: var(--iw-ink);
	--theme-button-background-hover-color: var(--iw-wit);
	--theme-button-text-initial-color: var(--iw-white);
	--theme-button-text-hover-color: var(--iw-white);
	--theme-button-border-radius: var(--iw-radius);
	--theme-button-min-height: var(--iw-tap);

	--theme-font-family: var(--iw-font-body);
}

body {
	background-color: var(--iw-cream);
	color: var(--iw-ink);
	font-family: var(--iw-font-body);
}

/* Display face on headings, product titles and prices */
body :is(h1, h2, h3, h4, .page-title, .ct-product-title, .product_title,
	.woocommerce-loop-product__title, .wc-block-components-product-name) {
	--theme-font-family: var(--iw-font-display);
	font-family: var(--iw-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
}

body :is(.price, .woocommerce-Price-amount) {
	font-family: var(--iw-font-body);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   3. Header: wordmark, Shop / Collections / Etsy, cart (placements set in
      functions.php). The wordmark is live text so it uses the brand face.
   -------------------------------------------------------------------------- */
.ct-header .site-title,
.ct-header .site-title a {
	font-family: var(--iw-font-display);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

@media (min-width: 1000px) {
	.ct-header .site-title,
	.ct-header .site-title a { font-size: 2.4rem; }
}

.iw-wordmark .iw-ink { color: var(--iw-ink); }
.iw-wordmark .iw-wit { color: var(--iw-wit); }
.iw-footer .iw-wordmark .iw-ink { color: var(--iw-cream); }

.ct-header [data-id="menu"] .ct-menu-link {
	font-family: var(--iw-font-body);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ct-header :is(.current-menu-item, .current-menu-ancestor) > .ct-menu-link {
	color: var(--iw-wit);
}

/* Etsy is an outbound link: mark it quietly */
.ct-header .iw-etsy > .ct-menu-link::after,
.mobile-menu .iw-etsy > a::after {
	content: "\2197"; /* north-east arrow */
	margin-left: 0.3em;
	font-size: 0.85em;
}

/* Tap targets for cart and menu trigger */
.ct-header :is([data-id="cart"], [data-id="trigger"]) > a,
.ct-header .ct-header-trigger {
	min-width: var(--iw-tap);
	min-height: var(--iw-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   4. Shop grid: 3-up desktop, 2-up phone (Blocksy mobile breakpoint 690px),
      4:5 tiles on the parchment well so a white shirt still reads.
   -------------------------------------------------------------------------- */
[data-products] {
	--grid-columns-gap: 28px;
	--grid-rows-gap: 40px;
}

@media (max-width: 689.98px) {
	[data-products],
	[data-products][class*="columns-"] {
		--shop-columns: repeat(2, minmax(0, 1fr));
		--grid-columns-gap: 12px;
		--grid-rows-gap: 24px;
	}
}

[data-products] .ct-media-container,
[data-products] figure {
	aspect-ratio: var(--iw-tile-ratio);
	background: var(--iw-parchment);
}

[data-products] .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

[data-products] .woocommerce-loop-product__title {
	font-size: 1.2rem;
	line-height: 1.2;
}

@media (max-width: 689.98px) {
	[data-products] .woocommerce-loop-product__title { font-size: 1.05rem; }
}

/* WooCommerce blocks grid (Product Collection), same rules */
.wc-block-product-template .wc-block-components-product-image img {
	aspect-ratio: var(--iw-tile-ratio);
	object-fit: cover;
	background: var(--iw-parchment);
}

@media (max-width: 689.98px) {
	.wc-block-product-template.is-flex-container.columns-3,
	.wc-block-product-template.is-flex-container.columns-4 {
		gap: 12px;
	}
	.wc-block-product-template.is-flex-container > li {
		width: calc(50% - 6px) !important; /* block sets inline widths */
	}
}

/* --------------------------------------------------------------------------
   5. Product page: 4:5 gallery (ratio set in functions.php), full-width
      buy button on the phone, no horizontal overflow from long titles.
   -------------------------------------------------------------------------- */
.woocommerce-product-gallery .ct-media-container {
	background: var(--iw-parchment);
}

.product_title {
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.single-product form.cart .single_add_to_cart_button {
	min-height: 52px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (max-width: 689.98px) {
	.single-product form.cart :is(.ct-cart-actions, .woocommerce-variation-add-to-cart) {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	.single-product form.cart .single_add_to_cart_button {
		flex: 1 1 100%;
	}
}

.variations select {
	min-height: var(--iw-tap);
}

/* --------------------------------------------------------------------------
   6. Footer (markup in template-parts/footer.php)
   -------------------------------------------------------------------------- */
.iw-footer {
	background: var(--iw-ink);
	color: var(--iw-parchment-deep);
	padding: 56px 0 28px;
	font-size: 0.95rem;
}

.iw-footer a {
	color: var(--iw-cream);
	text-decoration: none;
}

.iw-footer a:hover,
.iw-footer a:focus-visible {
	color: var(--iw-wit);
}

.iw-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}

@media (min-width: 690px) {
	.iw-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); }
}

.iw-footer .iw-wordmark {
	font-family: var(--iw-font-display);
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.iw-footer__line {
	margin: 12px 0 0;
	max-width: 32ch;
	color: var(--iw-smoke);
}

.iw-footer h2 {
	margin: 0 0 14px;
	font-family: var(--iw-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--iw-smoke);
}

.iw-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iw-footer li a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.iw-footer__signup {
	margin-top: 24px;
}

.iw-footer__bottom {
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid rgba(253, 251, 248, 0.12);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	font-size: 0.82rem;
	color: var(--iw-smoke);
}

/* --------------------------------------------------------------------------
   7. Home fallback (front-page.php), used until Phase 3 builds the home page
   -------------------------------------------------------------------------- */
.iw-home-hero {
	padding: clamp(48px, 10vw, 112px) 0 clamp(32px, 6vw, 64px);
	text-align: center;
}

.iw-home-hero h1 {
	margin: 0;
	font-size: clamp(2.6rem, 9vw, 5rem);
	line-height: 1;
}

.iw-home-hero h1 em {
	font-style: italic;
	color: var(--iw-wit);
}

.iw-home-hero p {
	margin: 16px auto 28px;
	max-width: 38ch;
	color: var(--iw-smoke);
}

.iw-home-section {
	padding-bottom: clamp(48px, 8vw, 96px);
}

.iw-home-section h2 {
	margin: 0 0 24px;
	font-size: clamp(1.8rem, 4vw, 2.4rem);
}

/* --------------------------------------------------------------------------
   8. Media never wider than its box. (No overflow-x: hidden on html/body:
      that would hide a real overflow from the 390px screenshot check.)
   -------------------------------------------------------------------------- */
img,
video,
iframe {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   9. Colour swatches: house colours shown, the rest behind "N more colours"
      (functions.php section 7 marks the rows). A chosen colour never hides.
   -------------------------------------------------------------------------- */
.variable-items-wrapper.iw-has-more:not(.iw-open) > .variable-item.iw-more:not(.selected) {
	display: none;
}

.iw-more-colours {
	min-height: var(--iw-tap);
	margin: 4px 0 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--iw-ink);
	font: 500 0.9rem/1 var(--iw-font-body);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.iw-more-colours:hover,
.iw-more-colours:focus-visible {
	color: var(--iw-wit);
}

/* -------------------------------------------------------------------------
   10. Product page: hover the main image to see it worn
   The overlay is injected in functions.php (section 8). Touch devices never
   hover, so they simply never see it and lose nothing.
   ---------------------------------------------------------------------- */

.ct-product-gallery-container {
	position: relative;
}

.iw-pdp-swap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
	z-index: 2;
}

.iw-pdp-swap img {
	width: 100%;
	height: auto;
	display: block;
}

@media (hover: hover) {
	.ct-product-gallery-container:has(.flexy-pills li:first-child.active):hover .iw-pdp-swap {
		opacity: 1;
	}
}