/*
 * assets/css/global.css
 * i-dia theme global stylesheet: variables, reset, layout, brand rules,
 * SVG recoloring support, image handling support, Gutenberg block-style
 * mirrors, and reusable long-form content ("prose") rules shared by
 * single.php, front-page.php, and any future article/recipe template.
 * Pure CSS3 only. No frameworks/preprocessors.
 * Enqueued via functions.php using get_asset_url() (asset base path
 * constant). @font-face rules are generated in PHP and injected on the
 * 'idia-fonts' handle.
 *
 * NOTE: Pastel and primary-dark-blue hex values below are PLACEHOLDERS
 * chosen to pass WCAG AA contrast against --idia-color-dark-blue text.
 * Replace with the confirmed brand hex codes before production launch.
 */

/* ==========================================================================
   1. Color variables
   ========================================================================== */

:root {
	--idia-color-dark-blue: #0d2240;
	--idia-color-white: #ffffff;
	--idia-color-gray: #6b6f76;

	--idia-color-pastel-pink: #f6d9e2;
	--idia-color-pastel-purple: #e6dcf2;
	--idia-color-pastel-yellow: #f9edc4;
	--idia-color-pastel-green: #dcefdc;
	--idia-color-pastel-blue: #dbe8f6;

	--idia-color-text: var(--idia-color-dark-blue);
	--idia-color-text-muted: var(--idia-color-gray);
	--idia-color-background: var(--idia-color-white);
	--idia-color-link: var(--idia-color-dark-blue);
	--idia-color-focus-ring: var(--idia-color-dark-blue);

	--idia-icon-color: var(--idia-color-dark-blue);
	--idia-icon-color-inverted: var(--idia-color-white);
	--idia-icon-color-muted: var(--idia-color-gray);

	--font-primary: 'Nicky Sans', sans-serif;
	--font-signature: 'Honestine Signature', cursive;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	--line-height-tight: 1.2;
	--line-height-body: 1.6;
	--line-height-loose: 1.8;

	--letter-spacing-tight: -0.01em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.04em;

	--heading-text-transform: uppercase;
	--button-text-transform: uppercase;
	--button-letter-spacing: var(--letter-spacing-wide);

	--space-xxs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;

	--shadow-card: 0 1px 3px rgba(13, 34, 64, 0.08), 0 1px 2px rgba(13, 34, 64, 0.06);
	--shadow-elevated: 0 4px 12px rgba(13, 34, 64, 0.12);

	--idia-max-width: 1200px;
	--idia-content-max-width: 720px;

	--icon-size-sm: 1rem;
	--icon-size-md: 1.5rem;
	--icon-size-lg: 2rem;

	--aspect-ratio-standard: 3 / 2;
	--aspect-ratio-square: 1 / 1;
	--aspect-ratio-wide: 16 / 9;
	--aspect-ratio-hero: 21 / 9;
}

/* ==========================================================================
   5. Global reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img, picture, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

a {
	text-decoration: none;
	color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--idia-color-focus-ring);
	outline-offset: 2px;
}

/* Standard WP visually-hidden utility, used for accessible text that
   accompanies decorative icons (rating stars, "opens in new tab", etc). */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   6. Global layout rules
   ========================================================================== */

body {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	letter-spacing: var(--letter-spacing-normal);
	color: var(--idia-color-text);
	background-color: var(--idia-color-background);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--idia-color-dark-blue);
	margin-bottom: var(--space-sm);
}

h1, h2 { text-transform: var(--heading-text-transform); }
h3, h4, h5, h6 { text-transform: none; }

p {
	margin-bottom: var(--space-md);
	text-transform: none;
}

ul li, ol li { margin-bottom: var(--space-xs); }

a {
	color: var(--idia-color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

button,
.idia-button,
input[type="submit"],
input[type="button"] {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	text-transform: var(--button-text-transform);
	letter-spacing: var(--button-letter-spacing);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-md);
	border-radius: 4px;
	background-color: var(--idia-color-dark-blue);
	color: var(--idia-color-white);
	box-shadow: var(--shadow-card);
}

button:hover, .idia-button:hover { box-shadow: var(--shadow-elevated); }

/* ==========================================================================
   5. Brand-specific rules
   ========================================================================== */

.idia-signature {
	font-family: var(--font-signature);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-normal);
	color: var(--idia-color-dark-blue);
}

.idia-bg-pastel-pink,
.idia-bg-pastel-purple,
.idia-bg-pastel-yellow,
.idia-bg-pastel-green,
.idia-bg-pastel-blue {
	color: var(--idia-color-dark-blue) !important;
}

.idia-bg-pastel-pink { background-color: var(--idia-color-pastel-pink); }
.idia-bg-pastel-purple { background-color: var(--idia-color-pastel-purple); }
.idia-bg-pastel-yellow { background-color: var(--idia-color-pastel-yellow); }
.idia-bg-pastel-green { background-color: var(--idia-color-pastel-green); }
.idia-bg-pastel-blue { background-color: var(--idia-color-pastel-blue); }

.has-pastel-pink-background-color,
.has-pastel-purple-background-color,
.has-pastel-yellow-background-color,
.has-pastel-green-background-color,
.has-pastel-blue-background-color {
	color: var(--idia-color-dark-blue) !important;
}

.idia-bg-pastel-gradient {
	background-image: linear-gradient(135deg, var(--idia-color-pastel-pink), var(--idia-color-pastel-blue));
}

.idia-bg-pastel-gradient .idia-text-panel {
	background-color: var(--idia-color-white);
	color: var(--idia-color-dark-blue);
	padding: var(--space-md);
	border-radius: 4px;
}

.idia-content-narrow,
article.idia-post,
.wp-block-group.idia-content-narrow,
.wp-block-post-content {
	max-width: var(--idia-content-max-width);
	margin-left: auto;
	margin-right: auto;
}

.idia-card {
	background-color: var(--idia-color-white);
	border-radius: 6px;
	box-shadow: var(--shadow-card);
	padding: var(--space-md);
}

/* ==========================================================================
   7. SVG recoloring support
   ========================================================================== */

.idia-icon-svg {
	width: var(--icon-size-md);
	height: var(--icon-size-md);
	color: var(--idia-icon-color);
	fill: none;
	stroke: currentColor;
	flex-shrink: 0;
}

.idia-icon-svg--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.idia-icon-svg--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.idia-icon-svg--filled { fill: currentColor; stroke: none; }
.idia-icon-svg--inverted { color: var(--idia-icon-color-inverted); }
.idia-icon-svg--muted { color: var(--idia-icon-color-muted); }

button .idia-icon-svg,
.idia-button .idia-icon-svg { color: currentColor; }

.idia-divider-svg {
	color: var(--idia-color-gray);
	stroke: currentColor;
	fill: none;
	width: 100%;
	height: 1rem;
}

.idia-bunting-image img,
.idia-logo-image img {
	width: auto;
	height: auto;
}

/* ==========================================================================
   8. Image handling support
   ========================================================================== */

.idia-figure {
	margin: 0;
	position: relative;
	overflow: hidden;
}

.idia-figure img,
.idia-responsive-image,
.idia-placeholder-image {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.idia-figure--standard { aspect-ratio: var(--aspect-ratio-standard); }
.idia-figure--square { aspect-ratio: var(--aspect-ratio-square); }
.idia-figure--wide { aspect-ratio: var(--aspect-ratio-wide); }
.idia-figure--hero { aspect-ratio: var(--aspect-ratio-hero); }

.idia-figure--standard img,
.idia-figure--square img,
.idia-figure--wide img,
.idia-figure--hero img { height: 100%; }

.idia-figure-caption {
	font-size: 0.875rem;
	color: var(--idia-color-text-muted);
	margin-top: var(--space-xs);
	text-transform: none;
}

.idia-illustration,
.idia-bunting-image img {
	aspect-ratio: auto;
	object-fit: contain;
	width: auto;
	max-width: 100%;
}

.idia-placeholder-image {
	border: 1px dashed var(--idia-color-gray);
}

.woocommerce ul.products li.product img {
	aspect-ratio: var(--aspect-ratio-square);
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   9. Gutenberg custom block styles (front-end render)
   ========================================================================== */

.is-style-signature {
	font-family: var(--font-signature);
	font-weight: var(--font-weight-regular);
	color: var(--idia-color-dark-blue);
	font-size: 1.5rem;
}

.is-style-editorial {
	text-transform: none;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-tight);
	border-bottom: 2px solid var(--idia-color-dark-blue);
	padding-bottom: var(--space-xs);
}

.is-style-brand-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--idia-color-dark-blue);
	border: 2px solid var(--idia-color-dark-blue);
	box-shadow: none;
}

.is-style-recipe-steps {
	list-style: none;
	counter-reset: idia-recipe-step;
}

.is-style-recipe-steps li {
	counter-increment: idia-recipe-step;
	position: relative;
	padding-left: var(--space-lg);
	margin-bottom: var(--space-sm);
}

.is-style-recipe-steps li::before {
	content: counter(idia-recipe-step);
	position: absolute;
	left: 0;
	top: 0;
	width: var(--icon-size-md);
	height: var(--icon-size-md);
	border-radius: 50%;
	background-color: var(--idia-color-dark-blue);
	color: var(--idia-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	font-size: 0.875rem;
}

.is-style-editorial-pullquote {
	border-left: none;
	padding: var(--space-md) var(--space-lg);
	text-align: center;
	font-size: 1.5rem;
	font-weight: var(--font-weight-medium);
	color: var(--idia-color-dark-blue);
}

.is-style-bunting-divider img {
	object-fit: contain;
	aspect-ratio: auto;
	width: 100%;
	height: auto;
	max-height: 60px;
}

.is-style-pastel-notice {
	padding: var(--space-md);
	border-radius: 6px;
	color: var(--idia-color-dark-blue) !important;
}

/* ==========================================================================
   10. Long-form content ("prose") rules
   ==========================================================================
   Applied via the .idia-prose wrapper class around the_content() output
   (single.php) and any future recipe/article template. The global
   reset above strips list markers and margins for utility contexts
   (nav menus, cards, grids) — prose content needs real bullets/numbers
   and blockquote treatment restored, scoped so it never leaks into
   navigation or component markup elsewhere on the page.
   ========================================================================== */

.idia-prose p {
	margin-bottom: var(--space-md);
}

.idia-prose ul,
.idia-prose ol {
	list-style: revert;
	padding-left: 1.5em;
	margin-bottom: var(--space-md);
}

.idia-prose li {
	margin-bottom: var(--space-xs);
}

.idia-prose h2,
.idia-prose h3,
.idia-prose h4 {
	margin-top: var(--space-lg);
}

.idia-prose blockquote {
	border-left: 3px solid var(--idia-color-dark-blue);
	padding: var(--space-sm) var(--space-md);
	margin: var(--space-md) 0;
	color: var(--idia-color-text);
	font-style: normal;
	background-color: var(--idia-color-white);
}

.idia-prose blockquote p:last-child {
	margin-bottom: 0;
}

.idia-prose img,
.idia-prose figure {
	border-radius: 4px;
	margin: var(--space-md) 0;
}

.idia-prose a {
	text-decoration-thickness: 1px;
}

.idia-prose hr {
	border: none;
	border-top: 1px solid var(--idia-color-gray);
	margin: var(--space-lg) 0;
}

/* ==========================================================================
   Structural layout
   ========================================================================== */

.idia-header-inner,
.idia-footer-inner,
.idia-content-inner {
	max-width: var(--idia-max-width);
	margin: 0 auto;
	padding: 0 var(--space-sm);
}

.idia-mobile-drawer-toggle { display: none; }

@media (max-width: 768px) {
	.idia-primary-nav { display: none; }
	.idia-mobile-drawer-toggle { display: inline-block; }
}

/* ==========================================================================
   WooCommerce typography and color inheritance
   ========================================================================== */

.woocommerce,
.woocommerce-page {
	font-family: var(--font-primary);
	line-height: var(--line-height-body);
	color: var(--idia-color-text);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	text-transform: var(--button-text-transform);
	letter-spacing: var(--button-letter-spacing);
	background-color: var(--idia-color-dark-blue);
	color: var(--idia-color-white);
	box-shadow: var(--shadow-card);
}

.woocommerce ul.products li.product .price {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	color: var(--idia-color-dark-blue);
}

.woocommerce span.onsale {
	background-color: var(--idia-color-dark-blue);
	color: var(--idia-color-white);
}