/*
 * Manolas Imports — theme styles
 * v3 (Capers-style red/yellow/blue collage) — full rewrite.
 * Palette: earth red + sandy yellow + ocean blue + cream + black ink.
 */

/* ----------- Tokens ----------- */
:root {
	--mi-red:       #C8442A;
	--mi-yellow:    #E5B852;
	--mi-blue:      #1F4795;
	--mi-paper:     #F1E8D0;
	--mi-cream:     #FBF5E1;
	--mi-ink:       #1A1A1A;
	--mi-ink-soft:  #3A3A3A;

	/* Fonts */
	--mi-font-display:  "Archivo Black", "Bungee", Impact, "Arial Black", sans-serif;
	--mi-font-greek:    "Russo One", "Archivo Black", Impact, sans-serif;
	--mi-font-body:     "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
	--mi-font-mono:     "Major Mono Display", ui-monospace, "SF Mono", Menlo, monospace;

	/* Layout */
	--mi-container:       1280px;
	--mi-section-pad-y:   clamp(4rem, 9vw, 7.5rem);
	--mi-section-pad-x:   clamp(1.25rem, 4vw, 2.5rem);

	/* Per-section foreground (overridden on dark-band sections) */
	--mi-section-fg:      var(--mi-ink);
}

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

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

body {
	margin: 0;
	background: var(--mi-paper);
	color: var(--mi-ink);
	font-family: var(--mi-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s ease, background .2s ease;
}
a:hover, a:focus-visible {
	color: var(--mi-red);
}

h1, h2, h3, h4, h5 { margin: 0; line-height: 1.0; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

/* Skip link + sr-only */
.mi-skip-link, .mi-sr-only {
	position: absolute; left: -10000px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.mi-skip-link:focus {
	position: static; width: auto; height: auto;
	padding: .75rem 1rem; background: var(--mi-ink);
	color: var(--mi-paper); text-decoration: none;
}

/* ----------- Layout primitives ----------- */
.mi-container {
	max-width: var(--mi-container);
	margin: 0 auto;
	padding-left: var(--mi-section-pad-x);
	padding-right: var(--mi-section-pad-x);
}

.mi-section {
	padding-top: var(--mi-section-pad-y);
	padding-bottom: var(--mi-section-pad-y);
	position: relative;
	overflow: hidden;
	color: var(--mi-section-fg);
}

/* ---------- Site header (brand row + section nav) ----------- */
html { scroll-behavior: smooth; }

.mi-site-header {
	background: var(--mi-paper);
	border-bottom: 3px solid var(--mi-ink);
	position: sticky;
	top: 0;
	z-index: 100;
}
.mi-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2rem);
	padding-block: clamp(0.5rem, 1.2vw, 0.8rem);
	flex-wrap: wrap;
}
.mi-site-header__brand {
	display: flex;
	align-items: center;
	gap: clamp(0.55rem, 1.4vw, 1rem);
	text-decoration: none;
	min-width: 0;
}
.mi-site-header__mark {
	display: block;
	height: clamp(44px, 7vw, 60px);
	width: auto;
}
.mi-site-header__wordmark {
	/* Anton = closest free Google Font to the condensed black wordmark in the
	   original logo-v3 art (Christina M's note: the Arial-Black render was too
	   wide). Swap for 'Oswald'/'Saira Condensed'/'Archivo Black' if preferred. */
	font-family: 'Anton', 'Archivo Black', 'Arial Narrow', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--mi-ink);
	font-size: clamp(1.6rem, 3.8vw, 2.4rem);
	letter-spacing: 0.015em;
	line-height: 1;
	white-space: nowrap;
}
.mi-site-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(0.8rem, 2.2vw, 1.8rem);
}
.mi-site-nav a {
	font-family: var(--mi-font-body);
	font-weight: 600;
	font-size: clamp(0.78rem, 1vw, 0.92rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mi-ink);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: color .15s ease, border-color .15s ease;
}
.mi-site-nav a:hover,
.mi-site-nav a:focus-visible {
	color: var(--mi-red);
	border-bottom-color: currentColor;
}
/* Stop the sticky header hiding a section's top when you jump to it. */
.mi-section { scroll-margin-top: clamp(80px, 12vw, 96px); }

@media (max-width: 720px) {
	.mi-site-header__inner { justify-content: center; }
	.mi-site-nav { width: 100%; justify-content: center; gap: 0.7rem 1.1rem; }
	.mi-site-nav a { font-size: 0.74rem; letter-spacing: 0.03em; }
}

/* Alternating coloured bands */
.mi-section--hero      { background: var(--mi-paper); padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.mi-section--promise   { background: var(--mi-red);    --mi-section-fg: var(--mi-ink); }
.mi-section--source    { background: var(--mi-paper); }
.mi-section--producers { background: var(--mi-blue);   --mi-section-fg: var(--mi-cream); }
.mi-section--contact   { background: var(--mi-yellow); --mi-section-fg: var(--mi-ink); }

/* ----------- Section heading (English + Greek pair) ----------- */
.mi-section__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}

.mi-section__h2 {
	font-family: var(--mi-font-display);
	font-weight: 400;
	font-size: clamp(3rem, 6.5vw, 5.5rem);
	letter-spacing: -.01em;
	color: var(--mi-section-fg);
	text-transform: uppercase;
	margin: 0;
	line-height: .92;
}

.mi-section__h2-greek {
	font-family: var(--mi-font-greek);
	font-size: clamp(.95rem, 1.4vw, 1.2rem);
	letter-spacing: .4em;
	color: var(--mi-section-fg);
	opacity: .7;
	margin: 0;
	text-transform: uppercase;
}

/* ----------- Hero ----------- */
.mi-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.mi-hero__art {
	margin: 0 auto;
	width: 100%;
	/* Statue is a supporting accent, not the hero's main focus (John M feedback
	   2026-06-17) — roughly half its old size, leaving more negative space. */
	max-width: 380px;
}

.mi-hero__image {
	width: 100%;
	height: auto;
	display: block;
}

.mi-hero__greek {
	font-family: var(--mi-font-greek);
	font-size: clamp(1.2rem, 2.2vw, 1.7rem);
	letter-spacing: .35em;
	color: var(--mi-red);
	text-transform: uppercase;
	margin: clamp(.5rem, 1.5vw, 1rem) 0 0;
	padding-left: .35em;
}

.mi-hero__tagline {
	font-family: var(--mi-font-body);
	font-weight: 500;
	font-style: normal;
	font-size: clamp(1.05rem, 1.7vw, 1.4rem);
	color: var(--mi-ink);
	letter-spacing: .005em;
	max-width: 52ch;
	margin: 0 auto;
}

/* ----------- Display prose (What we do / Producers / Contact body) ----------- */
.mi-prose-display {
	font-family: var(--mi-font-body);
	font-weight: 500;
	font-size: clamp(1.1rem, 1.7vw, 1.4rem);
	line-height: 1.55;
	color: var(--mi-section-fg);
	text-align: center;
	max-width: 64ch;
	margin: 0 auto;
}
.mi-prose-display--centered { text-align: center; }
.mi-prose-display p { margin-bottom: 1em; }
.mi-prose-display p:last-child { margin-bottom: 0; }

/* ----------- What we source — 5-category tiles ----------- */
.mi-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);  /* 3 cols on desktop — 5 tiles render as 3 + 2 */
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 900px) {
	.mi-cats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
	.mi-cats { grid-template-columns: 1fr; }
}

.mi-cat {
	background: var(--mi-cream);
	color: var(--mi-ink);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 3px solid var(--mi-ink);
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease;
	box-shadow: 6px 6px 0 0 var(--mi-ink);
}
/* Food image band, flush to the top of the coloured tile (John M feedback
   2026-06-17 — more food-focused imagery). Text sits in the coloured body below. */
.mi-cat__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-bottom: 3px solid var(--mi-ink);
}
.mi-cat__body {
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.mi-cat:hover {
	transform: translate(-2px, -2px);
	box-shadow: 10px 10px 0 0 var(--mi-ink);
}

/* Alternating tile colours */
.mi-cat--1 { background: var(--mi-red);    color: var(--mi-ink); }
.mi-cat--2 { background: var(--mi-yellow); color: var(--mi-ink); }
.mi-cat--3 { background: var(--mi-blue);   color: var(--mi-cream); }
.mi-cat--4 { background: var(--mi-cream);  color: var(--mi-ink); }
.mi-cat--5 { background: var(--mi-red);    color: var(--mi-ink); }

.mi-cat__num {
	font-family: var(--mi-font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	color: inherit;
	line-height: 1;
	display: block;
	margin-bottom: .5rem;
	opacity: .9;
}

.mi-cat__name {
	font-family: var(--mi-font-display);
	font-weight: 400;
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	color: inherit;
	margin-bottom: .75rem;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -.01em;
}

.mi-cat__desc {
	font-family: var(--mi-font-body);
	font-size: .95rem;
	line-height: 1.55;
	color: inherit;
	margin: 0;
}

/* ----------- Contact ----------- */
.mi-contact-list {
	list-style: none;
	padding: 0;
	margin: 2.5rem 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.mi-contact-link {
	font-family: var(--mi-font-display);
	font-weight: 400;
	font-size: clamp(1.3rem, 2.5vw, 2.2rem);
	color: var(--mi-ink);
	text-decoration: none;
	background: var(--mi-cream);
	padding: .55rem 1.35rem;
	border: 3px solid var(--mi-ink);
	box-shadow: 5px 5px 0 0 var(--mi-ink);
	text-transform: lowercase;
	letter-spacing: -.005em;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.mi-contact-link:hover {
	background: var(--mi-ink);
	color: var(--mi-yellow);
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 0 var(--mi-red);
}

/* ----------- Footer ----------- */
.mi-site-footer {
	background: var(--mi-ink);
	color: var(--mi-paper);
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	position: relative;
}

/* Red / yellow / blue tricolour stripe at top of footer */
.mi-site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 12px;
	background: linear-gradient(
		to right,
		var(--mi-red)    0%,
		var(--mi-red)    33.33%,
		var(--mi-yellow) 33.33%,
		var(--mi-yellow) 66.66%,
		var(--mi-blue)   66.66%,
		var(--mi-blue)   100%
	);
}

.mi-site-footer__inner {
	text-align: center;
	padding-top: 1rem;
}

.mi-site-footer__atomic {
	font-family: var(--mi-font-body);
	font-weight: 500;
	font-size: clamp(.95rem, 1.35vw, 1.15rem);
	margin: 0 auto 1.5rem;
	line-height: 1.55;
	color: var(--mi-paper);
}

.mi-site-footer__base {
	font-family: var(--mi-font-mono);
	font-size: .8rem;
	letter-spacing: .1em;
	color: var(--mi-yellow);
	margin: 0;
	text-transform: uppercase;
}
.mi-site-footer__base a {
	color: var(--mi-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mi-site-footer__base a:hover { color: var(--mi-yellow); }

/* ----------- Responsive ----------- */
@media (max-width: 640px) {
	.mi-cat {
		border-width: 2px;
		box-shadow: 4px 4px 0 0 var(--mi-ink);
	}
	.mi-contact-link {
		border-width: 2px;
		box-shadow: 3px 3px 0 0 var(--mi-ink);
	}
}

/* ----------- Print ----------- */
@media print {
	.mi-section--hero,
	.mi-section--promise,
	.mi-section--source,
	.mi-section--producers,
	.mi-section--contact { background: transparent; --mi-section-fg: var(--mi-ink); }
	.mi-site-footer { background: transparent; color: var(--mi-ink); }
	.mi-site-footer::before { display: none; }
	.mi-cat { break-inside: avoid; box-shadow: none; border-color: var(--mi-ink); }
}