/*
Theme Name: Hugo North
Theme URI: https://hugonorth.com
Author: Hugo North
Author URI: https://hugonorth.com
Description: A modern, block-based (Full Site Editing) WooCommerce theme for the Hugo North store. Built with theme.json, block templates and template parts.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hugonorth
Tags: full-site-editing, block-styles, e-commerce, woocommerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, block-patterns, wide-blocks
*/

/*
 * Hugo North is a block theme. Almost all styling lives in theme.json.
 * Use this file only for CSS that cannot be expressed in theme.json.
 */

/* --- Hero headline: small "BRING" over a single-line statement --- */
.hn-hero-bring {
	font-size: 50%;
	font-weight: 350;
	letter-spacing: 0.1em;
}

.hn-hero-rest {
	font-weight: 350;
	white-space: nowrap;
}

/* On phones the single line won't fit — let it wrap instead of overflowing. */
@media (max-width: 600px) {
	.hn-hero-rest {
		white-space: normal;
	}
}

/* --- Main content sits flush under the header, and the section divs
   inside it lose the default 24px block-gap top margin (each section
   provides its own padding) --- */
.wp-site-blocks > main,
.wp-site-blocks > main > *,
.wp-site-blocks > footer {
	margin-top: 0;
	margin-block-start: 0;
}

/* --- Sticky site header --- */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
}

/* --- One-line header: tight centred cluster, icons far right --- */
/* Equal-width left/right zones keep the centre cluster (logo) centred. */
.hn-header-left {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.hn-header-right {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.hn-header-center {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* Centre everything in the bar vertically, including nav items,
   the account icon and the mini-cart. */
.hn-headerbar {
	align-items: center;
}

.hn-headerbar .wp-block-navigation,
.hn-headerbar .wp-block-navigation__container,
.hn-headerbar .wc-block-mini-cart {
	align-items: center;
}

/* Tighten the link spacing in the desktop cluster */
.hn-nav-left .wp-block-navigation__container,
.hn-nav-right .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}

/* Brand lockup: arrow mark + the site title rendered as text.
   The anchor's line-height would add phantom space below the SVG,
   pushing the arrow above the bar's centre line. */
.hn-nav-arrow {
	display: block;
	line-height: 0;
	color: var(--wp--preset--color--contrast);
}

.hn-nav-arrow svg {
	display: block;
	width: 38px;
	height: 38px;
}

.hn-nav-brand .wp-block-site-title {
	margin: 0;
	white-space: nowrap;
}

/* Breathing space either side of the brand lockup (desktop only —
   the mobile bar is too tight for it) */
@media (min-width: 901px) {
	.hn-nav-brand {
		padding-left: var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
	}
}

/* Keep the wordmark out of the global link style (primary + underline) */
.hn-nav-brand .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Account + cart icons */
.hn-header-right .hn-icon-account {
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
}

.hn-header-right .hn-icon-account:hover {
	color: var(--wp--preset--color--secondary);
}

/* Hamburger hidden on desktop (scoped to beat the navigation block's own
   display rule, which has equal specificity). */
.hn-headerbar .hn-nav-mobile {
	display: none;
}

/* Dropdown panels */
.hn-headerbar .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base-2);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	padding: 0.5rem 0;
	min-width: 230px;
}

.hn-headerbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.3rem;
}

/* Mobile: single hamburger (left), logo centred, icons right */
@media (max-width: 900px) {
	.hn-headerbar .hn-nav-left,
	.hn-headerbar .hn-nav-right {
		display: none;
	}

	.hn-headerbar .hn-nav-mobile {
		display: flex;
	}

	.hn-nav-arrow svg {
		width: 28px;
		height: 28px;
	}

	.hn-nav-brand .wp-block-site-title {
		font-size: 1.2rem;
	}

	/* Tighter zone gap so the equal-width side zones (and with them the
	   logo's centring) survive down to 360px-wide phones. */
	.hn-headerbar {
		gap: 12px;
	}
}

/* --- Buttons: smooth transitions + subtle hover lift --- */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

@media (hover: hover) {
	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

/* --- Reviews: a quiet hairline above each quote --- */
.hn-reviews .wp-block-column {
	border-top: 1px solid var(--wp--preset--color--base-2);
	padding-top: var(--wp--preset--spacing--40);
}

/* --- Collections grid: wrap to 3 per row (handles any number) --- */
.wp-block-columns.hn-collections {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	justify-content: center;
}

.wp-block-columns.hn-collections > .wp-block-column {
	flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--50)) / 3);
}

/* --- Collection cards: gradient label, whole-card link, hover zoom --- */
.hn-collection-card {
	overflow: hidden;
}

.hn-collection-card a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* Stretch the heading link across the whole card so it is all clickable. */
.hn-collection-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hn-collection-card .wp-block-cover__image-background {
	transition: transform 0.6s ease;
}

@media (hover: hover) {
	.hn-collection-card:hover .wp-block-cover__image-background {
		transform: scale(1.05);
	}
}

/* --- Product grid: editorial cards with lifestyle hover-swap --- */
ul.products li.product {
	position: relative;
	text-align: left;
	transition: transform 0.3s ease;
}

/* Image wrapper crops the hover zoom and stacks the two images.
   .hn-loop-thumb is output by hugonorth_loop_thumbnail() in functions.php;
   the secondary image is the product's first gallery image (lifestyle ->
   clean), and is absent (so nothing swaps) when there is no gallery image. */
.hn-loop-thumb {
	position: relative;
	overflow: hidden;
	margin-bottom: 0.6em;
}

.hn-loop-thumb img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Secondary image waits off to the right, then slides across on hover. */
.hn-loop-thumb .hn-secondary-image {
	position: absolute;
	inset: 0;
	transform: translateX(100%);
	transition: transform 0.5s ease;
	pointer-events: none;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 350;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 0.15em;
}

/* Product names stay in normal case (override the uppercase heading style) */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
	text-transform: none;
	letter-spacing: 0;
}

ul.products li.product .price {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	margin: 0;
}

/* Subtle hover lift; the secondary image slides across (cards rest as
   image + title + price). */
@media (hover: hover) {
	ul.products li.product:hover {
		transform: translateY(-4px);
	}

	ul.products li.product:hover .hn-loop-thumb .hn-secondary-image {
		transform: translateX(0);
	}
}

/* ============================================================
   Collection / shop archive — curated gallery
   ============================================================ */

.woocommerce-products-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
}

/* Eyebrow above the collection name */
.woocommerce-products-header::before {
	content: "Fine Art Prints";
	display: block;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-bottom: var(--wp--preset--spacing--30);
}

.woocommerce-products-header__title.page-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 0.4em;
}

.woocommerce-products-header .term-description {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--medium);
	text-align: justify;
	text-align-last: center;
}

.woocommerce-products-header .term-description p:last-child {
	margin-bottom: 0;
}

/* Hugo's signature beneath the collection intro */
.hn-signature {
	display: block;
	width: 190px;
	max-width: 55%;
	height: auto;
	margin: var(--wp--preset--spacing--40) auto 0;
}

/* Refined sort control */
.woocommerce .woocommerce-ordering {
	margin-bottom: var(--wp--preset--spacing--50);
}

.woocommerce .woocommerce-ordering select {
	padding: 0.6em 0.9em;
	border: 1px solid var(--wp--preset--color--base-2);
	border-radius: 2px;
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
}

/* Gallery grid: centred, so partial last rows sit in the middle too */
.woocommerce ul.products {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--60) 3.8%;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	float: none !important;
	clear: none !important;
	width: 22% !important;
	margin: 0 !important;
}

@media (max-width: 768px) {
	.woocommerce ul.products {
		gap: var(--wp--preset--spacing--50) 6%;
	}

	.woocommerce ul.products li.product {
		width: 47% !important;
	}
}

/* ============================================================
   Single product page
   ============================================================ */

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.woocommerce div.product div.summary {
	padding-left: var(--wp--preset--spacing--30);
}

.woocommerce div.product .product_title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 0.3em;
}

/* Prominent single-product price */
.woocommerce div.product p.price,
.woocommerce div.product div.summary .price {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	margin-bottom: 1.2em;
}

.woocommerce div.product div.summary .woocommerce-product-details__short-description {
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 1.5em;
}

/* Size selector */
.woocommerce div.product form.cart .variations {
	margin-bottom: 1.2em;
}

.woocommerce div.product form.cart .variations td.label,
.woocommerce div.product form.cart .variations th.label {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.woocommerce div.product form.cart .variations select {
	padding: 0.7em 0.9em;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	min-height: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	padding: 1em 2.6em;
}

/* Craft / trust list under the add-to-cart */
.hn-pdp-craft {
	list-style: none;
	margin: 1.6em 0 0;
	padding: 1.6em 0 0;
	border-top: 1px solid var(--wp--preset--color--base-2);
}

.hn-pdp-craft li {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 0.7em;
	font-size: var(--wp--preset--font-size--small);
}

.hn-pdp-craft li svg {
	color: var(--wp--preset--color--secondary);
	flex: 0 0 auto;
}

.hn-pdp-delivery {
	margin-top: 1.1em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

/* Tabs (description / additional information) */
.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--wp--preset--spacing--60);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 350;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--small);
}

/* Related products */
.woocommerce .related.products,
.woocommerce .upsells.products {
	margin-top: var(--wp--preset--spacing--70);
}

.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* ============================================================
   Footer
   ============================================================ */

/* Links read light on the ink background, gold on hover */
footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base-2);
	text-decoration: none;
}

footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--secondary);
}

.hn-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.hn-footer-links li {
	margin: 0 0 0.7em;
}

/* Thin divider above the copyright/legal row */
.hn-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hn-footer-bottom p {
	margin: 0;
}

/* Footer brand lockup: white emblem + wordmark */
.hn-footer-emblem {
	margin: 0;
	flex: 0 0 auto;
}

.hn-footer-brand .wp-block-site-title {
	margin: 0;
}