/*
	North Grocer design layer.
	Loaded after main.css (Directive by HTML5 UP), which still supplies the reset,
	the base form and button styles and the grid helpers. Everything that makes the
	page look like North Grocer rather than the template lives here.
*/

:root {
	--ink: #14301F;
	--ink-soft: #3E5647;
	--paper: #FAF7F0;
	--paper-tint: #F1ECE0;
	--leaf: #2F6B3A;
	--honey: #C8811B;
	/* Brighter honey, used only on dark backgrounds where the darker tone would
	   drop under the 4.5:1 contrast floor against ink text. */
	--honey-bright: #E0A33B;
	--rule: rgba(20, 48, 31, 0.14);
	--ease: cubic-bezier(0.32, 0.72, 0, 1);
	--nav-h: 62px;
}

/* Base */

body {
	background: var(--paper);
}

body, input, select, textarea, button {
	color: var(--ink-soft);
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 12.5pt;
	line-height: 1.7;
}

a {
	color: var(--leaf);
	border-bottom-color: rgba(47, 107, 58, 0.35);
}

a:hover {
	color: var(--ink);
}

strong, b {
	color: var(--ink);
	font-weight: 600;
}

h1, h2, h3 {
	color: var(--ink);
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-bottom: 0.6em;
	text-align: left;
	text-transform: none;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

h2 {
	font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.75rem);
}

h3 {
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
}

header p {
	color: inherit;
	position: static;
	text-transform: none;
	top: auto;
}

.container {
	margin: 0 auto;
	max-width: 68em;
	padding: 0 1.5em;
	text-align: left;
	width: 100%;
}

/* The template draws decorative vertical hairlines down the middle of #main.
   They were placed for its own layout and land arbitrarily in this one. */
#main:before,
#main:after {
	display: none;
}

/* Keyboard focus */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 3px solid var(--honey);
	outline-offset: 3px;
}

.skip-link {
	background: var(--ink);
	border: 0;
	color: #fff;
	font-family: Archivo, system-ui, sans-serif;
	left: 1rem;
	padding: 0.75em 1.25em;
	position: absolute;
	top: -100vh;
	z-index: 100;
}

.skip-link:focus {
	top: 1rem;
}

/* The shop awning: striped canvas with a scalloped lower edge, the way a
   greengrocer's awning is cut. The one decorative flourish on the page. */

.awning {
	background: repeating-linear-gradient(
		90deg,
		var(--ink) 0 26px,
		var(--paper) 26px 52px
	);
	height: 22px;
	position: relative;
	z-index: 12;
}

.awning:after {
	background: repeating-radial-gradient(
		circle at 13px 0,
		var(--paper) 0 9px,
		transparent 9px
	);
	bottom: -9px;
	content: '';
	height: 10px;
	left: 0;
	position: absolute;
	right: 0;
}

/* Site header */

.site-nav {
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	position: sticky;
	top: 0;
	z-index: 11;
}

.site-nav-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 68em;
	padding: 0 1.5em;
}

.wordmark {
	border: 0;
	color: var(--ink);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: var(--nav-h);
}

.wordmark:hover {
	color: var(--leaf);
}

.nav-menu {
	align-items: center;
	display: flex;
	gap: 1.8em;
}

.nav-menu ul {
	display: flex;
	gap: 1.6em;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* inline-block so the line height becomes the actual hit area. As plain inline
   links the clickable box was only as tall as the text, about 16px. */
.nav-menu a {
	border: 0;
	color: var(--ink-soft);
	display: inline-block;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 0.95rem;
	line-height: var(--nav-h);
}

.nav-menu a:hover {
	color: var(--leaf);
}

.nav-menu .nav-tel {
	color: var(--leaf);
	font-weight: 600;
}

.nav-toggle {
	background: none;
	border: 1px solid var(--rule);
	border-radius: 2px;
	color: var(--ink);
	cursor: pointer;
	display: none;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 0.9rem;
	gap: 0.55em;
	align-items: center;
	min-height: 44px;
	padding: 0 0.9em;
}

.nav-toggle-bars,
.nav-toggle-bars:before,
.nav-toggle-bars:after {
	background: var(--ink);
	content: '';
	display: block;
	height: 2px;
	width: 18px;
}

.nav-toggle-bars {
	position: relative;
}

.nav-toggle-bars:before { position: absolute; top: -6px; }
.nav-toggle-bars:after  { position: absolute; top: 6px; }

/* Hero */

.hero {
	background-image:
		linear-gradient(rgba(9, 26, 16, 0.86) 0%, rgba(9, 26, 16, 0.66) 55%, rgba(9, 26, 16, 0.8) 100%),
		url("../../images/header.jpg");
	background-position: center center, center 58%;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	color: rgba(255, 255, 255, 0.88);
	padding: 5.5em 0 12em 0;
	position: relative;
	text-align: center;
}

/* The angular cut that the Directive template is built around, kept as the
   transition out of the hero. */
.hero:after {
	background-image: url("images/top-3200.svg");
	background-position: bottom center;
	background-repeat: repeat-x;
	background-size: 3200px 460px;
	bottom: 0;
	content: '';
	height: 460px;
	left: 0;
	position: absolute;
	right: 0;
	pointer-events: none;
}

.hero-inner {
	margin: 0 auto;
	max-width: 46em;
	padding: 0 1.5em;
	position: relative;
	z-index: 1;
}

.hero h1 {
	color: #fff;
	font-size: clamp(2.6rem, 1.6rem + 5vw, 5.2rem);
	letter-spacing: -0.035em;
	margin-bottom: 0.3em;
	text-align: center;
}

.hero .lede {
	font-size: clamp(1rem, 0.94rem + 0.45vw, 1.3rem);
	margin: 0 auto 2em auto;
	max-width: 27em;
}

.hero-facts {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-family: Archivo, system-ui, sans-serif;
	gap: 0.7em 2.2em;
	justify-content: center;
	list-style: none;
	margin: 0 0 2.4em 0;
	padding: 0;
}

.hero-facts li {
	border-bottom: 2px solid var(--honey);
	color: #fff;
	font-size: 0.95rem;
	padding-bottom: 0.35em;
}

.hero-cta {
	margin: 0;
}

.hero .button {
	background: var(--honey-bright);
	color: var(--ink);
}

.hero .button:hover {
	background: #fff;
}

/* Sections */

.section {
	padding: 5em 0;
}

.section-tint {
	background: var(--paper-tint);
	border-block: 1px solid var(--rule);
}

.section-lede {
	margin-bottom: 2.5em;
	max-width: 34em;
}

.section p {
	max-width: 34em;
}

/* Two column text and image */

.split {
	align-items: center;
	display: grid;
	gap: 3em;
	grid-template-columns: 1fr 1fr;
}

.split-reverse .split-text { order: 2; }
.split-reverse .split-media { order: 1; }

.split-text :last-child {
	margin-bottom: 0;
}

.split-media {
	margin: 0;
}

/* A flat stock photo dropped next to text reads as an afterthought. The leaf
   tab pins it to the page like a price tag clipped to a shelf edge, and the
   radius plus lift give it enough weight to hold its side of the split. */
.split-media {
	position: relative;
}

.split-media:before {
	background: var(--leaf);
	border-radius: 2px;
	content: '';
	height: 2.75em;
	left: -0.9em;
	position: absolute;
	top: 1.75em;
	width: 0.55em;
	z-index: 1;
}

.split-reverse .split-media:before {
	left: auto;
	right: -0.9em;
}

.split-media img {
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(20, 48, 31, 0.1), 0 2.5em 3.5em -1.75em rgba(9, 26, 16, 0.5);
	display: block;
	height: auto;
	position: relative;
	width: 100%;
	z-index: 2;
}

/* Departments: a photo per section, the name on the dark lower edge. */

.aisles-head {
	align-items: end;
	display: grid;
	gap: 1em 4em;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	margin-bottom: 2.5em;
}

.aisles-head h2,
.aisles-head .section-lede {
	margin-bottom: 0;
}

.aisles {
	display: grid;
	gap: 0.9em;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aisle {
	aspect-ratio: 4 / 5;
	background: var(--ink);
	border-radius: 3px;
	color: #fff;
	isolation: isolate;
	overflow: hidden;
	padding: 0;
	position: relative;
}

.aisle img {
	display: block;
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	transition: transform 0.9s var(--ease);
	width: 100%;
}

/* Darkens the lower third so the label reads on any photo. */
.aisle:after {
	background: linear-gradient(to top, rgba(9, 26, 16, 0.92) 0%, rgba(9, 26, 16, 0.45) 45%, rgba(9, 26, 16, 0) 70%);
	content: '';
	inset: 0;
	position: absolute;
	z-index: 1;
}


.aisle-text {
	bottom: 0;
	display: block;
	left: 0;
	padding: 1.1em 1.1em 1.2em;
	position: absolute;
	right: 0;
	z-index: 2;
}

.aisle-text strong {
	color: #fff;
	display: block;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-wrap: balance;
}

.aisle-text em {
	color: rgba(255, 255, 255, 0.78);
	display: block;
	font-size: 0.9rem;
	font-style: normal;
	margin-top: 0.3em;
}

@media (hover: hover) {
	.aisle:hover img {
		transform: scale(1.05);
	}
}

/* Standards */

.standards {
	margin: 0;
}

.standards dt {
	color: var(--ink);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	margin-top: 1.4em;
}

.standards dt:first-child {
	margin-top: 0;
}

.standards dd {
	margin: 0.2em 0 0 0;
	max-width: 30em;
}

/* Two cards side by side */

.duo {
	display: grid;
	gap: 3em;
	grid-template-columns: 1fr 1fr;
}

.duo-card :last-child {
	margin-bottom: 0;
}

.duo-action {
	margin-top: 1.5em;
}

/* Contact */

/* Full width, so its rules line up with the department list above and the
   footer below rather than stopping halfway across the page. */
.contact-list {
	border-top: 1px solid var(--rule);
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-list li {
	border-bottom: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 1.5em;
	justify-content: space-between;
	padding: 0.9em 0;
}

.contact-label {
	color: var(--ink-soft);
}

.contact-value {
	font-family: Archivo, system-ui, sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Buttons */

input[type="submit"],
input[type="button"],
.button {
	background: var(--leaf);
	border-radius: 2px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 3em;
	min-width: 0;
	padding: 0 1.8em;
	text-transform: none;
	transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.button:hover {
	background: var(--ink);
}

.button:active {
	transform: translateY(1px);
}

.button.alt {
	background: none;
	box-shadow: inset 0 0 0 1px var(--rule);
	color: var(--ink);
}

.button.alt:hover {
	background: rgba(20, 48, 31, 0.06);
	color: var(--ink);
}

/* Footer */

.site-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.8);
	padding: 4em 0 2.5em 0;
}

.site-footer a {
	border: 0;
	color: #fff;
}

.site-footer a:hover {
	color: var(--honey-bright);
}

/* Legal disclosure, Article 47 §2. Centred company line above, then the fields
   in three columns inside a bordered box: label in bold, value beside it. */

.footer-mark {
	color: #fff;
	font-family: Archivo, system-ui, sans-serif;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 0.6em 0;
	text-align: center;
}

.footer-line {
	margin: 0 auto 2.5em auto;
	max-width: 36em;
	text-align: center;
}

.legal-box {
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 0.8rem;
	line-height: 1.55;
	padding: 2em 2.25em;
}

.legal-box h2 {
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 1.4em;
}

.legal-cols {
	display: grid;
	gap: 1.5em 3em;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.legal-box p {
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 0.7em 0;
	max-width: none;
}

.legal-box p:last-child {
	margin-bottom: 0;
}

.legal-box strong {
	color: #fff;
	font-weight: 600;
}

.copyright {
	color: rgba(255, 255, 255, 0.58);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 0.8rem;
	margin: 2em 0 0 0;
	text-align: center;
}

/* Small screens: the layout this was designed for first */

@media screen and (max-width: 860px) {
	.split,
	.duo {
		gap: 2.2em;
		grid-template-columns: 1fr;
	}

	.split-reverse .split-text,
	.split-reverse .split-media {
		order: initial;
	}

	.aisles-head {
		grid-template-columns: 1fr;
	}

	.aisles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nav-toggle {
		display: inline-flex;
	}

	.nav-menu {
		display: none;
		flex-basis: 100%;
		padding-bottom: 1em;
	}

	.nav-menu.is-open {
		display: block;
	}

	.nav-menu ul {
		flex-direction: column;
		gap: 0;
	}

	.nav-menu a {
		display: block;
		line-height: 48px;
	}

	.nav-menu .nav-tel {
		display: block;
		line-height: 48px;
	}
}

@media screen and (max-width: 736px) {
	.hero {
		padding: 4em 0 8em 0;
	}

	.hero:after {
		background-size: 1600px 230px;
		height: 230px;
	}

	.section {
		padding: 3.5em 0;
	}

	.hero-facts {
		flex-direction: column;
		gap: 0.9em;
	}

	.aisles {
		gap: 0.6em;
	}

	.aisle {
		aspect-ratio: 1 / 1;
	}

	.aisle-text {
		padding: 0.9em 0.85em 0.95em;
	}

	.aisle-text strong {
		font-size: 0.95rem;
	}

	.aisle-text em {
		font-size: 0.8rem;
		line-height: 1.4;
	}


	.legal-cols {
		gap: 1.2em;
		grid-template-columns: 1fr;
	}

	.legal-box {
		padding: 1.5em 1.5em;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}