/* =========================================================================
   Handknitted — Front page
   -------------------------------------------------------------------------
   Styles the Home page, which is built from core Gutenberg blocks + two
   WooCommerce product rows. Structure/classes are added by the
   "Handknitted — Home" block pattern (see inc/patterns.php). Visual spec
   pulled from the Figma "Home" design frame.
   ========================================================================= */

/* The hero must sit flush against the header hairline (design y=86/87):
   remove the generic .site-content padding on the front page. */
.home .site-content { padding-block: 0; }

/* Chrome lets the carousel snap-track's scrollable overflow leak into the
   page's scroll area (phantom horizontal scrollbar). The track clips its
   own content; clip the article too so the leak stops at the content edge.
   The carousel arrows sit inside the gutter, so nothing visible is cut. */
.hk-front .entry-content { overflow-x: clip; }

.hk-front .entry-content {
	--hk-front-width: 1310px;
}

/* Full-bleed sections break out of the article container. */
.hk-front .entry-content > .alignfull {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

/* Wide sections align to the design's 1310px content band. */
.hk-front .entry-content > * {
	max-width: var(--hk-front-width);
	margin-inline: auto;
	padding-inline: var(--hk-gutter);
}
.hk-front .entry-content > .alignfull { padding-inline: 0; }

/* Vertical rhythm between blocks (~50px in the design). */
.hk-front .entry-content > * { margin-block: clamp(2rem, 4.5vw, 3.25rem); }
.hk-front .entry-content > .hk-hero { margin-block: 0; }

/* -------------------------------------------------------------------------
   Nexa display headings (fall back to Poppins until Nexa files are added)
   ------------------------------------------------------------------------- */
.hk-hero__title,
.hk-section-title,
.hk-feature__title,
.hk-shop-tile__title {
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

/* -------------------------------------------------------------------------
   1. Hero — full-bleed image with overlaid display heading
   ------------------------------------------------------------------------- */
.hk-hero.wp-block-cover {
	min-height: clamp(340px, 40vw, 575px);
	align-items: center;          /* title sits vertically centered (design) */
	justify-content: flex-start;
}
.hk-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--hk-front-width);
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 3rem) var(--hk-gutter);
}
.hk-hero__title {
	color: #fff;
	font-size: clamp(2.75rem, 6vw, 5rem);   /* 80px in the design */
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------------------------------
   2. Section titles ("Handknitted locally…", "Best sellers")
   ------------------------------------------------------------------------- */
.hk-section-title {
	color: var(--hk-brand);
	font-size: clamp(1.5rem, 3vw, 1.875rem); /* 30px */
}
/* Section titles hug the block that follows them (design: ~25px gap between
   "Best sellers" and the product cards). Both margins must shrink because
   adjacent block margins collapse to the larger value. */
.hk-front .entry-content > .hk-section-title { margin-bottom: 1.5rem; }
.hk-front .entry-content > .hk-section-title + * { margin-top: 1.5rem; }
.hk-section-title--sub { /* two-line intro under the hero */
	margin-bottom: 0.25rem;
}

/* -------------------------------------------------------------------------
   3 + 6. WooCommerce product rows
   Card styles are shared with the single-product "Other recommendations"
   section and live in wc-cards.css (enqueued alongside this file).
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   4. "Icelandic Lopapeysa" feature — text left, image right
   ------------------------------------------------------------------------- */
.hk-feature { align-items: center; }
.hk-feature__title {
	color: #010101;
	font-size: clamp(1.5rem, 3vw, 1.875rem); /* 30px */
	margin-bottom: 1rem;
}
.hk-feature__text {
	color: var(--hk-ink-soft);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}
/* generous air between the text and the Learn more button (design ~90px) */
.hk-feature .wp-block-buttons { margin-top: clamp(2rem, 4.5vw, 4.5rem); }
.hk-feature .wp-block-image img { border-radius: 4px; }

/* Rectangular CTA (design uses a flat cyan rectangle, not the global pill) */
.hk-btn-rect .wp-block-button__link,
.wp-block-button.hk-btn-rect .wp-block-button__link {
	border-radius: 2px;
	padding: 0.75rem 1.6rem;
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: 1rem;
}

/* -------------------------------------------------------------------------
   Collection carousels — side-scrollable product rows. The track shows
   exactly data-columns cards per view (same card design); bare chevron
   arrows scroll one card at a time.
   ------------------------------------------------------------------------- */
.hk-carousel { position: relative; }
.hk-carousel ul.hk-carousel__track {
	display: grid !important;
	/* wc-cards lays the rows out as an explicit column grid — the carousel
	   uses implicit columns only, so the template must be cleared */
	grid-template-columns: none !important;
	grid-auto-flow: column;
	gap: 25px !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;      /* no visible scrollbar; arrows + swipe */
	margin: 0 !important;
	padding: 0;
	list-style: none;
}
.hk-carousel ul.hk-carousel__track::-webkit-scrollbar { display: none; }
.hk-carousel[data-columns="3"] ul.hk-carousel__track { grid-auto-columns: calc((100% - 50px) / 3); }
.hk-carousel[data-columns="4"] ul.hk-carousel__track { grid-auto-columns: calc((100% - 75px) / 4); }
.hk-carousel ul.hk-carousel__track li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	scroll-snap-align: start;
}
/* mouse users can drag the track like a touch swipe */
.hk-carousel ul.hk-carousel__track { cursor: grab; }
.hk-carousel ul.hk-carousel__track.is-dragging {
	cursor: grabbing;
	user-select: none;
	scroll-snap-type: none;
}
/* clean bare chevrons, vertically centred on the card image, sitting in the
   page gutter fully OUTSIDE the photos (the gutter is never narrower than
   the button, so anchoring to it can't clip the viewport) */
.hk-carousel__nav {
	position: absolute;
	top: 36%;
	transform: translateY(-50%);
	z-index: 5;
	width: 32px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background: none;
	color: var(--hk-ink);
	cursor: pointer;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.hk-carousel__nav:hover { color: var(--hk-brand); }
.hk-carousel__nav--prev { left: calc(var(--hk-gutter) * -1); }
.hk-carousel__nav--next { right: calc(var(--hk-gutter) * -1); }
.hk-carousel__nav.is-end { opacity: 0.25; pointer-events: none; }
@media (max-width: 900px) {
	.hk-carousel[data-columns="3"] ul.hk-carousel__track,
	.hk-carousel[data-columns="4"] ul.hk-carousel__track { grid-auto-columns: 72%; }
	/* no gutter room on small screens — arrows overlay the photo edges,
	   with a soft halo so they stay legible on the images */
	.hk-carousel__nav {
		filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.95));
	}
	.hk-carousel__nav--prev { left: 0; }
	.hk-carousel__nav--next { right: 0; }
}
/* phones: exactly one card per view; swipe (or the arrows) to browse */
@media (max-width: 640px) {
	.hk-carousel[data-columns="3"] ul.hk-carousel__track,
	.hk-carousel[data-columns="4"] ul.hk-carousel__track { grid-auto-columns: 100%; }
}

/* -------------------------------------------------------------------------
   7. Shop Mens / Shop Womens image tiles
   ------------------------------------------------------------------------- */
.hk-shop-tiles { gap: clamp(0.75rem, 1.4vw, 1.25rem) !important; }
.hk-shop-tile.wp-block-cover {
	/* design tiles are 650×575; !important beats the block's inline min-height */
	min-height: clamp(340px, 40vw, 575px) !important;
	padding: 0; /* core cover adds 1em — the inner container owns the inset */
	align-items: center;          /* "Shop Mens" sits vertically centered */
	justify-content: flex-start;
	border-radius: 3px;
	overflow: hidden;
}
/* the design tiles have NO dark overlay — neutralize the cover dim */
.hk-shop-tile .wp-block-cover__background { opacity: 0 !important; }
.hk-shop-tile .wp-block-cover__inner-container {
	/* design: the title sits ~24px in from the tile's left edge */
	padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 1.7vw, 1.5rem);
	width: 100%;
}
.hk-shop-tile__title { line-height: 1.05; }
.hk-shop-tile__title a,
.hk-shop-tile__title {
	color: #fff;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem); /* 40px */
	text-decoration: none;
}
.hk-shop-tile__title a:hover { text-decoration: none; opacity: 0.92; }
/* stretched link: the WHOLE tile is clickable, not just the text.
   The cover's inner container is positioned by core — make it static so the
   link's ::after anchors to the tile itself. The static text would then
   paint BEHIND the absolutely-positioned cover image, so the tile isolates
   its stacking and the image drops below in-flow content (z -1). */
.hk-shop-tile.wp-block-cover { position: relative; isolation: isolate; }
.hk-shop-tile .wp-block-cover__inner-container { position: static; }
.hk-shop-tile .wp-block-cover__image-background { z-index: -1 !important; }
.hk-shop-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.hk-feature.wp-block-columns { flex-direction: column; }
	.hk-shop-tiles.wp-block-columns { flex-direction: column; }
}