/**
 * DHUKR global styles for the Custom Blocks Template.
 *
 * Loaded on pages that use template-custom-blocks.php (and the single post /
 * single product templates). Depends on tokens.css.
 *
 * Element base styles are wrapped in :where() so they have zero specificity
 * and never fight block styles or WooCommerce/WPForms styles.
 *
 * Contents:
 *   1. Fonts
 *   2. Base (reset + typography)
 *   3. Layout (container, section)
 *   4. Section backgrounds (shared ACF clone field)
 *   5. Shared typography components (pre-title, headings, script)
 *   6. Buttons
 *   7. Prose (single post body, product description)
 *   8. Accessibility (focus, skip link)
 */

/* ==========================================================================
   1. Fonts (self-hosted, latin subset, SIL OFL)
   ========================================================================== */

@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900; /* variable font: one file covers 400/500/600/700 */
	font-display: swap;
	src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
}

/* Fallback for the script font stack. Only downloaded when Segoe Script and
 * Bradley Hand are not installed (browsers skip unused @font-face files). */
@font-face {
	font-family: 'Kalam';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/kalam-latin-400-normal.woff2') format('woff2');
}

/* ==========================================================================
   2. Base
   ========================================================================== */

:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(html) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--dh-header-height);
}

@media (prefers-reduced-motion: no-preference) {
	:where(html) {
		scroll-behavior: smooth;
	}
}

:where(body) {
	margin: 0;
	background: var(--dh-color-bg);
	color: var(--dh-color-text);
	font-family: var(--dh-font-body);
	font-size: var(--dh-fs-body-18);
	font-weight: var(--dh-fw-regular);
	line-height: var(--dh-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	color: var(--dh-color-heading);
	font-family: var(--dh-font-display);
	font-weight: var(--dh-fw-regular);
	line-height: var(--dh-lh-heading);
}

:where(p, ul, ol, figure, blockquote) {
	margin: 0;
}

:where(img, svg, video, iframe) {
	display: block;
	max-width: 100%;
}

:where(img, video) {
	height: auto;
}

:where(a) {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

:where(strong, b) {
	font-weight: var(--dh-fw-bold);
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

/* 1440px content width; at 1920px this leaves the 240px side padding from Figma. */
.dh-container {
	width: min(100% - (var(--dh-gutter) * 2), var(--dh-container-max));
	margin-inline: auto;
}

.dh-container--narrow {
	max-width: var(--dh-container-narrow);
}

.dh-container--prose {
	max-width: var(--dh-container-prose);
}

.dh-container--form {
	max-width: var(--dh-container-form);
}

/* Default vertical rhythm. Blocks with padding fields override this per
 * breakpoint through their ID-scoped <style>. */
.dh-section {
	padding-block: var(--dh-section-py);
}

/* ==========================================================================
   4. Section backgrounds (shared ACF clone field)
   Semantic tokens are redefined inside the section, so every block that uses
   them switches colors automatically.
   ========================================================================== */

.dh-section--bg-cream {
	background-color: var(--dh-color-bg-alt);
}

.dh-section--bg-dark {
	background-color: var(--dh-color-bg-dark);
	--dh-color-heading: var(--dh-color-text-on-dark);
	--dh-color-text: var(--dh-color-text-on-dark-muted);
	--dh-color-focus: var(--dh-color-focus-on-dark);
	color: var(--dh-color-text);
}

/* Image background: the image itself is an <img> rendered by the block
 * (wp_get_attachment_image) and positioned with .dh-section__bg-media. */
.dh-section--bg-image {
	position: relative;
	isolation: isolate;
}

.dh-section__bg-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   5. Shared typography components
   ========================================================================== */

.page-template-template-custom-blocks h2 {
	margin-bottom: 0;
}

.dh-pretitle {
	color: var(--dh-color-accent-text);
	font-family: var(--dh-font-body);
	font-size: var(--dh-fs-body-20);
	font-weight: var(--dh-fw-semibold);
	line-height: 1.4;
	text-transform: uppercase;
}

.dh-display-160,
.dh-display-96,
.dh-display-72 {
	line-height: var(--dh-lh-display);
}

.dh-display-160 { font-size: var(--dh-fs-display-160); }
.dh-display-96  { font-size: var(--dh-fs-display-96); }
.dh-display-72  { font-size: var(--dh-fs-display-72); }

.dh-heading-64 { font-size: var(--dh-fs-heading-64); }
.dh-heading-48 { font-size: var(--dh-fs-heading-48); }
.dh-heading-40 { font-size: var(--dh-fs-heading-40); line-height: var(--dh-lh-display); }
.dh-heading-36 { font-size: var(--dh-fs-heading-36); }
.dh-heading-32 { font-size: var(--dh-fs-heading-32); }
.dh-heading-24 { font-size: var(--dh-fs-heading-24); }

.dh-script {
	color: var(--dh-color-heading);
	font-family: var(--dh-font-script);
	font-weight: var(--dh-fw-regular);
	line-height: var(--dh-lh-script);
	text-transform: none;
}

.dh-script--48 { font-size: var(--dh-fs-script-48); }
.dh-script--32 { font-size: var(--dh-fs-script-32); }

/* ==========================================================================
   6. Buttons
   No hover/active states are designed in Figma; the ones below are minimal
   and use only token colors.
   ========================================================================== */

.dh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dh-space-8);
	padding: var(--dh-btn-padding);
	border: var(--dh-border-width-button) solid transparent;
	border-radius: var(--dh-radius-button);
	background-color: var(--dh-btn-bg);
	color: var(--dh-btn-color);
	font-family: var(--dh-font-display);
	font-size: var(--dh-btn-font-size);
	font-weight: var(--dh-fw-regular);
	line-height: 1;
	letter-spacing: var(--dh-ls-button);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--dh-transition-fast),
		border-color var(--dh-transition-fast),
		color var(--dh-transition-fast),
		filter var(--dh-transition-fast);
}

.dh-btn:hover {
	filter: brightness(0.92);
}

/* Dark filled: add to cart, bundle buttons */
.dh-btn--dark {
	--dh-btn-bg: var(--dh-btn-bg-dark);
	--dh-btn-color: var(--dh-color-white);
}

/* Outline on dark backgrounds: "See how it works", "For retailers" */
.dh-btn--outline-light {
	--dh-btn-bg: transparent;
	--dh-btn-color: var(--dh-color-white);
	border-color: var(--dh-color-white);
}

.dh-btn--outline-light:hover {
	--dh-btn-bg: var(--dh-color-white);
	--dh-btn-color: var(--dh-color-green-900);
	filter: none;
}

/* Outline on light backgrounds: "See all products", "Back to all products" */
.dh-btn--outline-dark {
	--dh-btn-bg: transparent;
	--dh-btn-color: var(--dh-color-green-900);
	border-color: var(--dh-color-green-900);
}

.dh-btn--outline-dark:hover {
	--dh-btn-bg: var(--dh-color-green-900);
	--dh-btn-color: var(--dh-color-white);
	filter: none;
}

/* Full width: form submit, "Go back to blog", product card buttons */
.dh-btn--block {
	display: flex;
	width: 100%;
}

/* Small: product card buttons (Bebas 16px) */
.dh-btn--sm {
	--dh-btn-font-size: var(--dh-fs-heading-16);
	padding: var(--dh-space-12) var(--dh-space-24);
}

/* Disabled: add to cart before a variation is chosen */
.dh-btn:disabled,
.dh-btn[aria-disabled="true"],
.dh-btn.disabled {
	--dh-btn-bg: var(--dh-btn-bg-disabled);
	--dh-btn-color: var(--dh-color-white);
	border-color: transparent;
	cursor: not-allowed;
	filter: none;
}

/* ==========================================================================
   7. Prose (single post body, product long description)
   Styles core Gutenberg output, so authors write in the normal editor.
   ========================================================================== */

.dh-prose {
	color: var(--dh-color-text);
	font-size: var(--dh-fs-body-18);
	line-height: var(--dh-lh-body);
}

.dh-prose > * + * {
	margin-top: var(--dh-space-16);
}

.dh-prose :where(h2) {
	margin-top: var(--dh-space-48);
	font-size: var(--dh-fs-heading-36);
}

.dh-prose :where(h3) {
	margin-top: var(--dh-space-32);
	font-size: var(--dh-fs-heading-32);
}

.dh-prose :where(h4) {
	margin-top: var(--dh-space-32);
	font-size: var(--dh-fs-heading-24);
}

.dh-prose :where(h2, h3, h4) + * {
	margin-top: var(--dh-space-24);
}

.dh-prose :where(ul, ol) {
	padding-left: 1.25em;
}

.dh-prose :where(li + li) {
	margin-top: var(--dh-space-8);
}

.dh-prose :where(strong) {
	color: var(--dh-color-heading);
}

.dh-prose :where(a) {
	color: var(--dh-color-heading);
	text-decoration: underline;
}

.dh-prose :where(img, .wp-block-image img) {
	border-radius: var(--dh-radius-card);
}

.dh-prose :where(blockquote) {
	padding-left: var(--dh-space-24);
	border-left: 3px solid var(--dh-color-accent);
	color: var(--dh-color-heading);
}

/* ==========================================================================
   8. Accessibility
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--dh-focus-ring-width) solid var(--dh-color-focus);
	outline-offset: var(--dh-focus-ring-offset);
}

.dh-skip-link {
	position: absolute;
	top: var(--dh-space-8);
	left: var(--dh-space-8);
	z-index: calc(var(--dh-z-modal) + 1);
	padding: var(--dh-space-12) var(--dh-space-16);
	border-radius: var(--dh-radius-button);
	background: var(--dh-color-white);
	color: var(--dh-color-green-900);
	font-weight: var(--dh-fw-semibold);
	transform: translateY(-200%);
}

.dh-skip-link:focus {
	transform: none;
}