/*
Theme Name: Herman Phillips
Theme URI: https://hermanphillips.com
Description: Bear Witness. Child theme of Twenty Twenty-Five carrying the Fracture design: logo pigments, self-hosted Big Shoulders Display and Barlow, the video hero, the light shop band, the story band, and the product-page proportions (WooCommerce's own buying blocks underneath).
Author: Herman Phillips
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hermanphillips
*/

/* Rules this sheet keeps (from the Fracture design):
   Big Shoulders = headlines only. Barlow = everything else.
   Ochre = primary action + announcement bar. Nothing else.
   Two button styles: square ochre fill, or underlined text link. */

/* ── base ─────────────────────────────────────────────────── */
/* dark canvas under a short page, so the light cart band never shows a strip below the footer */
html { background-color: #14100D; }
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) :focus-visible { outline: 2px solid #E8A33F; outline-offset: 3px; }

/* ── header: announcement bar + masthead ──────────────────── */
@media (min-width: 783px) {
	header.wp-block-template-part { position: sticky; top: 0; z-index: 60; }
	.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
}
.hp-anbar { padding: 9px 18px; }
.hp-anbar p { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.hp-topbar { background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--accent-5); }
.hp-topbar-in { gap: 20px; padding-block: 12px; }
.hp-brand-link { display: flex; align-items: center; gap: 11px; color: var(--wp--preset--color--contrast); text-decoration: none; }
.hp-brand-link:hover { text-decoration: none; }
.hp-brand-link img { display: block; width: 30px; height: auto; }
.hp-wm { font-family: var(--wp--preset--font-family--display); font-size: 19px; font-weight: 800; letter-spacing: .05em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.hp-nav .wp-block-navigation__container { gap: 34px; }
.hp-nav .wp-block-navigation-item__content { text-decoration: none; text-underline-offset: 6px; }
.hp-nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.hp-tools { gap: 4px; }
.hp-tools .wc-block-mini-cart__badge { background: var(--wp--preset--color--accent-1); border-color: transparent; color: var(--wp--preset--color--base); }
@media (max-width: 599px) {
	.hp-topbar-in > .hp-brand { margin-right: auto; }
	.hp-topbar-in > .hp-nav { order: 3; }
	.hp-wm { font-size: 15px; }
	.hp-brand-link { gap: 8px; }
	.hp-brand-link img { width: 26px; }
}
@media (max-width: 380px) {
	.hp-wm { font-size: 13px; }
	.hp-brand-link img { width: 22px; }
}

/* ── cinematic hero ───────────────────────────────────────── */
@keyframes hpFadeIn { from { opacity: 0; } }
.hp-cine-wrap { margin-block: 0; }
.hp-cine { position: relative; height: clamp(560px, calc(100svh - 140px), 900px); overflow: hidden; background: #0d0906; color: #F3EDE3; }
.hp-cine-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hp-cine-shade {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(8,6,4,.45) 0%, rgba(8,6,4,0) 26%, rgba(8,6,4,0) 52%, rgba(8,6,4,.72) 100%),
		radial-gradient(60% 55% at 50% 44%, rgba(8,6,4,.38), rgba(8,6,4,0) 70%);
}
.hp-cine-copy {
	position: relative; z-index: 1; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	padding: 40px 24px; text-align: center;
	animation: hpFadeIn .9s ease backwards .15s;
}
/* text-shadow kept on purpose: it holds the headline's contrast over moving video */
.hp-cine h1 {
	margin: 0; color: #F3EDE3;
	font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xx-large); font-weight: 900;
	letter-spacing: -.01em; line-height: .84; text-transform: uppercase; text-wrap: balance;
	text-shadow: 0 4px 40px rgba(0,0,0,.45);
}
.hp-cine-sub { margin: 0; color: rgba(243,237,227,.92); font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }
.hp-link,
.hp-cine-cta,
.hp-cine-toggle {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0;
	background: none; border: 0; border-radius: 0; cursor: pointer;
	font-family: var(--wp--preset--font-family--body); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.hp-link { color: var(--wp--preset--color--contrast); }
.hp-cine-cta, .hp-cine-toggle { color: #F3EDE3; }
.hp-link:hover, .hp-cine-cta:hover, .hp-cine-toggle:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.hp-cine-cta:hover, .hp-cine-toggle:hover { color: #F3EDE3; }
.hp-cine-cta { margin-top: 10px; }
.hp-cine-toggle { position: absolute; z-index: 2; right: 24px; bottom: 14px; }
/* the button stays hidden until hero.js runs (no JS = no video = nothing to pause) */
.hp-cine-toggle[hidden] { display: none; }
@media (max-width: 620px) {
	.hp-cine { height: min(640px, calc(100svh - 110px)); }
	.hp-cine-media { object-position: 62% 40%; }
	.hp-cine-copy { justify-content: flex-end; padding-bottom: 64px; }
	.hp-cine-sub { letter-spacing: .08em; }
}

/* ── proof row ────────────────────────────────────────────── */
.hp-proof { margin-block: 0; border-bottom: 1px solid var(--wp--preset--color--accent-5); }
.hp-proof ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 40px; max-width: 1240px; margin: 0 auto; padding: 14px 30px; list-style: none; }
.hp-proof li { color: var(--wp--preset--color--accent-4); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 620px) {
	.hp-proof ul { justify-content: flex-start; gap: 4px 18px; padding: 12px 18px; }
}

/* ── shop grid: one tile style ────────────────────────────── */
.hp-shop { padding-top: 72px; scroll-margin-top: 120px; }
.hp-archive .hp-shop { padding-top: 12px; }
.hp-sechead { margin: 0 0 28px; font-size: var(--wp--preset--font-size--x-large); }
.hp-shop .wc-block-product-template { gap: 44px 24px; }
.hp-shop .wc-block-components-product-image { margin: 0; overflow: hidden; background: #fff; }
.hp-shop .wc-block-components-product-image img { transition: transform .25s ease; }
.hp-shop .hp-tile-name { margin: 14px 0 0; font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; text-align: left; text-transform: none; }
.hp-shop .hp-tile-name a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.hp-shop .hp-tile-price { margin-top: 6px; font-size: 15px; font-weight: 600; text-align: left; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
	.hp-shop .wc-block-product:hover .wc-block-components-product-image img { transform: translateY(-3px); }
	.hp-shop .wc-block-product:hover .hp-tile-name a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

/* ── story ────────────────────────────────────────────────── */
.hp-story { padding-block: 120px 72px; scroll-margin-top: 120px; }
.hp-story .wp-block-columns { gap: 56px; }
.hp-story-bear { display: block; width: min(220px, 70%); height: auto; margin-inline: auto; }
.hp-story h2 { margin: 0; font-weight: 900; line-height: .92; }
.hp-story p { max-width: 54ch; margin: 18px 0 0; color: var(--wp--preset--color--accent-4); line-height: 1.7; }
.hp-story p strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.hp-story p.hp-cta-row { margin-top: 28px; }
@media (max-width: 781px) {
	.hp-story { padding-block: 96px 58px; }
	.hp-story .wp-block-columns { gap: 30px; }
	.hp-story-bear { width: 140px; margin-inline: 0; }
}

/* ── footer ───────────────────────────────────────────────── */
footer.wp-block-template-part { margin-block-start: 104px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.hp-footer { padding-block: 48px 60px; border-top: 1px solid var(--wp--preset--color--accent-5); }
.hp-mega { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 34px; align-items: start; }
.hp-sig { display: block; width: 200px; max-width: 100%; height: auto; }
.hp-brandcol p { max-width: 32ch; margin: 16px 0 0; color: var(--wp--preset--color--accent-4); }
.hp-foot-h { margin: 0 0 12px; color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; text-transform: none; }
.hp-mega ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hp-mega ul a { color: var(--wp--preset--color--accent-4); text-decoration: none; text-underline-offset: 4px; }
.hp-mega ul a:hover { color: var(--wp--preset--color--contrast); text-decoration: underline; }
.hp-contact a { overflow-wrap: anywhere; }
/* CA B&P 17538(d): not smaller or less legible than the offer text, so body size in the contrast colour */
.hp-disclosure { max-width: 72ch; margin: 42px 0 0; color: var(--wp--preset--color--contrast); font-size: 15px; line-height: 1.6; }
.hp-disclosure a { color: inherit; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.hp-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; margin-top: 42px; color: var(--wp--preset--color--accent-4); font-size: 12px; }
.hp-disclosure + .hp-legal { margin-top: 20px; }
@media (max-width: 781px) {
	.hp-mega { grid-template-columns: 1fr 1fr; }
	.hp-brandcol, .hp-contact { grid-column: 1 / -1; }
}

/* ── light "bone" band: the design's .ground-bone section style ── */
.hp-bone {
	--wp--preset--color--base: #E9E4DA;
	--wp--preset--color--contrast: #231F20;
	--wp--preset--color--accent-1: #94651A;
	--wp--preset--color--accent-2: #F3EFE6;
	--wp--preset--color--accent-3: #603913;
	--wp--preset--color--accent-4: #5C5146;
	--wp--preset--color--accent-5: #D3C9B6;
	--wp--preset--color--accent-6: #DED7C8;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.hp-band { margin-block: 0; padding-block: 48px 72px; scroll-margin-top: 120px; }
.hp-band .hp-shop { padding-top: 0; }
.hp-shead { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: 14px 28px; margin-bottom: 28px; }
.hp-eyebrow { margin: 0 0 10px; color: var(--wp--preset--color--accent-4); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hp-shead .hp-sechead { margin: 0; }
.hp-shead-r { max-width: 40ch; margin: 0; color: var(--wp--preset--color--accent-4); text-align: right; }
@media (max-width: 880px) { .hp-shead-r { text-align: left; } }

/* ── product page: the design's .pdp proportions, WooCommerce's own buying blocks ── */
.hp-product { padding-top: 30px; }
.hp-pdp { gap: clamp(28px, 5vw, 76px); margin-top: 26px; }
/* Woo caps the gallery at 512px (.woocommerce .wp-block-woocommerce-product-image-gallery); let it fill the 55% column */
body .hp-pdp-media .wp-block-woocommerce-product-image-gallery { max-width: none; }
.hp-pdp-pane .wp-block-post-title { margin: 0; }
.hp-pdp-pane .wp-block-woocommerce-product-price { margin-top: 14px; font-size: var(--wp--preset--font-size--large); }
.hp-pdp-pane .wp-block-post-excerpt { margin-top: 14px; color: var(--wp--preset--color--accent-4); }
.hp-pdp-pane .wp-block-add-to-cart-form { margin-top: 24px; }
.hp-product .wp-block-woocommerce-product-details { margin-top: 56px; }

/* Woo paints notice banners white; the theme's light link colour would vanish on them */
.wc-block-components-notice-banner a { color: inherit; }

/* ── product page ─────────────────────────────────────────── */
.single-product main .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); line-height: .92; }
.single-product .wp-block-woocommerce-product-price { font-weight: 600; }
.woocommerce-Tabs-panel h2 { font-size: var(--wp--preset--font-size--large); }
/* Tapstitch's size chart ships inline cell backgrounds (#F8F8F8); on the dark ground the theme's
   light ink landed on them at 1.18:1. Give description tables their own light card with dark ink. */
.woocommerce-Tabs-panel--description table { background: #F8F8F8; color: #231F20; border-collapse: collapse; }
/* its cells are fixed 150px wide (1024px table); scroll inside the chart, never the page, on phones */
.woocommerce-Tabs-panel--description table { display: block; max-width: 100%; overflow-x: auto; }
.woocommerce-Tabs-panel--description table th,
.woocommerce-Tabs-panel--description table td { color: #231F20; }
.wc-block-breadcrumbs, .woocommerce-breadcrumb { color: var(--wp--preset--color--accent-4); font-size: 12px; font-weight: 600; }
.wc-block-breadcrumbs a, .woocommerce-breadcrumb a { color: inherit; }
/* Woo draws a black chevron with a 4-class selector; this one outranks it (5 classes) */
body.single-product.woocommerce div.product form.cart .variations select,
body.single-product.woocommerce div.product form.cart input.qty {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
}
body.single-product.woocommerce div.product form.cart .variations select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDE5D8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── cart, checkout, account: the light "bone" band ───────── */
/* Card fields render in the payment provider's frame; a light band keeps them legible. */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
	--wp--preset--color--base: #E9E4DA;
	--wp--preset--color--contrast: #231F20;
	--wp--preset--color--accent-1: #94651A;
	--wp--preset--color--accent-2: #F3EFE6;
	--wp--preset--color--accent-3: #603913;
	--wp--preset--color--accent-4: #5C5146;
	--wp--preset--color--accent-5: #D3C9B6;
	--wp--preset--color--accent-6: #DED7C8;
}
/* header and footer stay dark on every page, including checkout's own header part and order-received */
body.woocommerce-cart header.wp-block-template-part,
body.woocommerce-cart footer.wp-block-template-part,
body.woocommerce-checkout header.wp-block-template-part,
body.woocommerce-checkout footer.wp-block-template-part,
body.woocommerce-account header.wp-block-template-part,
body.woocommerce-account footer.wp-block-template-part {
	--wp--preset--color--base: #14100D;
	--wp--preset--color--contrast: #EDE5D8;
	--wp--preset--color--accent-1: #C98B2E;
	--wp--preset--color--accent-2: #1C1714;
	--wp--preset--color--accent-3: #6B4118;
	--wp--preset--color--accent-4: #A2957F;
	--wp--preset--color--accent-5: #332A21;
	--wp--preset--color--accent-6: #0D0A08;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
/* #FFF8EC on #94651A = 4.81:1; the band's own ground colour on ochre would fall under AA */
body.woocommerce-cart main .wp-element-button,
body.woocommerce-checkout main .wp-element-button,
body.woocommerce-account main .wp-element-button { color: #FFF8EC; }
/* ochre ring is 1.70:1 on bone; ink ring on every light ground */
.hp-bone :focus-visible,
body.woocommerce-cart main :focus-visible,
body.woocommerce-checkout main :focus-visible,
body.woocommerce-account main :focus-visible { outline-color: #231F20; }

@media (prefers-reduced-motion: reduce) {
	.hp-cine-copy { animation: none; }
	.hp-shop .wc-block-components-product-image img { transition: none; }
}