/* Tnuva archive replica - /recipes/ and /products/.
   Measured on the live Squarespace archives at a 1920px frame; lengths are
   px / 19.2 expressed in vw so the page scales the way Squarespace does. */

.tnuva-archive {
	--tna-navy: #08163A;
	--tna-red: #E62A00;
	--tna-cream: #F2ECD9;
	--tna-head: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--tna-body: Arial, Helvetica, sans-serif;
	--tna-gutter: max(3.5vw,(100vw - 1414px) / 2);
	--tna-h1: clamp(30px, min(66.4px,4.7428vw), 74px);
	--tna-h2: clamp(25px, min(42.88px,3.0628vw), 48px);
	--tna-h3: clamp(16px, min(19.36px,1.3829vw), 21px);
	--tna-plg: clamp(16px, min(19.36px,1.3829vw), 21px);
	--tna-pmd: clamp(15px, min(17.68px,1.2629vw), 20px);
	font-family: var(--tna-body);
	color: var(--tna-navy);
	background: var(--tna-cream);
	overflow-x: clip;
	display: block;
}

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

.tna-wrap { padding-left: var(--tna-gutter); padding-right: var(--tna-gutter); }

.tnuva-archive .tna-h2 {
	font-family: var(--tna-head);
	font-size: var(--tna-h2);
	line-height: 1.3104;
	font-weight: 500;
	letter-spacing: normal;
	color: var(--tna-navy);
	margin: 0;
	text-align: center;
	text-transform: none;
}

.tnuva-archive .tna-h2--light { color: #fff; }

.tna-hero { background: var(--tna-cream); padding: calc(52.15px + 8.3908vw) 0 calc(17.22px + 2.7706vw); }

.tnuva-archive .tna-title {
	font-family: var(--tna-head);
	font-size: var(--tna-h1);
	line-height: 1.232;
	font-weight: 500;
	letter-spacing: normal;
	color: var(--tna-navy);
	margin: 0;
	max-width: min(930.01px,66.4293vw);
	text-align: left;
	text-transform: none;
}

.tnuva-archive .tna-intro {
	font-family: var(--tna-body);
	font-size: var(--tna-plg);
	line-height: 1.8;
	font-weight: 400;
	color: var(--tna-navy);
	max-width: min(694px,49.5717vw);
	margin: calc(12.79px + 2.0582vw) 0 0;
}

.tnuva-archive--product .tna-hero { padding-bottom: calc(25.83px + 4.1559vw); }
.tnuva-archive--product .tna-intro { margin-top: 11px; }

.tna-listing { background: var(--tna-cream); padding: calc(11.32px + 1.8207vw) 0 0; }
.tnuva-archive--product .tna-listing { padding-top: calc(3.94px + 0.6333vw); }

.tnuva-archive .tna-listing-title {
	font-family: var(--tna-head);
	font-size: var(--tna-h2);
	line-height: 1.3104;
	font-weight: 500;
	color: var(--tna-navy);
	margin: 0;
	text-align: left;
	text-transform: none;
}

.tna-toolbar-wrap { padding: 0 min(48px,3.4286vw); }
.tna-toolbar { display: flex; align-items: flex-start; }
.tna-filter { width: min(300px,21.4286vw); padding: 0 10px; }
.tna-drop { position: relative; }

.tna-drop-toggle {
	display: flex;
	align-items: center;
	min-height: 43px;
	padding: var(--tnuva-space-2xs) 16px;
	border-bottom: 1px solid var(--tna-navy);
	font-family: var(--tna-body);
	font-size: 13.5px;
	line-height: 1.1;
	color: var(--tna-navy);
	cursor: pointer;
	list-style: none;
}

.tna-drop-toggle::-webkit-details-marker { display: none; }
.tna-drop-label { text-transform: uppercase; }
.tna-drop-value { margin-left: 7px; }
/* An 11px glyph is not a tap target; the padding makes the hit area
   usable without changing where the mark sits. */
.tna-drop-reset { margin-left: auto; margin-right: -10px; padding: 10px; color: var(--tna-navy); text-decoration: none; font-size: 11px; line-height: 1; }

.tna-drop-caret {
	margin-left: auto;
	width: 9px;
	height: 9px;
	border-right: 1px solid var(--tna-navy);
	border-bottom: 1px solid var(--tna-navy);
	transform: rotate(45deg) translate(-2px, -2px);
}

.tna-drop-reset + .tna-drop-caret { margin-left: 9px; }

.tna-drop-list {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(8, 22, 58, .2);
	max-height: 320px;
	overflow-y: auto;
}

.tna-drop-list a { display: block; padding: 7px 16px; font-size: 13.5px; color: var(--tna-navy); text-decoration: none; }
.tna-drop-list a:hover { background: var(--tna-cream); }

.tna-search { display: flex; align-items: center; min-height: 43px; border-bottom: 1px solid var(--tna-navy); padding: 0 16px; }

.tna-search-icon {
	width: 12px;
	height: 12px;
	margin-right: 8px;
	border: 1px solid var(--tna-navy);
	border-radius: 50%;
	position: relative;
	flex: 0 0 auto;
}

.tna-search-icon::after {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 5px;
	height: 1px;
	background: var(--tna-navy);
	transform: rotate(45deg);
}

.tnuva-archive .tna-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--tna-body);
	font-size: 13.5px;
	color: var(--tna-navy);
	padding: 0;
	text-transform: uppercase;
	box-shadow: none;
}

.tnuva-archive .tna-search-input::placeholder { color: var(--tna-navy); opacity: 1; }

.tna-grid { display: grid; }

.tna-grid--recipe {
	margin: 30px min(58px,4.1431vw) 0;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: min(38.4px,2.7429vw);
}

.tna-grid--product {
	margin: 15px 0 0 min(513px,36.6432vw);
	width: min(1140px,81.4286vw);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: min(76.8px,5.4857vw);
	row-gap: calc(7.66px + 1.2318vw);
}

.tnuva-archive .tna-card { display: block; text-decoration: none; color: var(--tna-navy); }
.tna-card-media { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.tna-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tnuva-archive .tna-card:hover .tna-card-media img { transform: scale(1.03); }

.tnuva-archive .tna-card-title {
	display: block;
	margin-top: calc(7.13px + 1.1478vw);
	font-family: var(--tna-head);
	font-size: var(--tna-h3);
	line-height: 1.389;
	font-weight: 500;
	color: var(--tna-navy);
}

.tna-grid--recipe .tna-card-title { text-align: left; }
.tna-grid--product .tna-card-title { text-align: center; }

.tna-pagination { margin: 60px min(58px,4.1431vw) 0; padding-bottom: calc(14.76px + 2.3748vw); }
.tna-pagination .page-numbers { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 20px; }
.tna-pagination .page-numbers li { line-height: 1; }

.tnuva-archive .tna-pagination a,
.tnuva-archive .tna-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	font-family: var(--tna-body);
	font-size: var(--tna-pmd);
	color: var(--tna-navy);
	text-decoration: none;
}

.tnuva-archive .tna-pagination .current { background: var(--tna-navy); color: #fff; }

.tna-questions { background: #fff; padding: calc(49.69px + 7.9952vw) 0 calc(35.67px + 5.7391vw); }
.tna-q-inner { width: min(694px,49.5717vw); margin: 0 auto; }
.tna-questions .tna-h2 { margin-bottom: calc(12.79px + 2.0582vw); }
.tna-form { display: block; }
.tna-fieldset { border: 0; margin: 0 0 calc(4.92px + 0.7916vw); padding: 0; }

.tnuva-archive .tna-legend,
.tnuva-archive .tna-label {
	display: block;
	font-family: var(--tna-body);
	font-size: var(--tna-pmd);
	line-height: 2.04;
	font-weight: 400;
	color: var(--tna-navy);
	padding: 0;
	margin: 0;
}

.tnuva-archive .tna-caption {
	display: block;
	font-family: var(--tna-body);
	font-size: 12px;
	line-height: 2.58;
	color: var(--tna-navy);
}

.tnuva-archive .tna-legend span,
.tnuva-archive .tna-label span,
.tnuva-archive .tna-caption span { opacity: .6; }

.tna-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.tna-field { margin: 0 0 calc(4.92px + 0.7916vw); }
.tna-row-2 .tna-field { margin: 0; }

.tnuva-archive .tna-input,
.tnuva-archive .tna-textarea {
	display: block;
	width: 100%;
	height: 44px;
	padding: 5px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(8, 22, 58, .55);
	border-radius: 0;
	font-family: var(--tna-body);
	font-size: var(--tna-pmd);
	color: var(--tna-navy);
	box-shadow: none;
}

.tnuva-archive .tna-textarea { height: 100px; resize: vertical; }

.tnuva-archive .tna-submit {
	margin-top: calc(4.92px + 0.7916vw);
	width: 132px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--tna-red);
	color: #fff;
	font-family: var(--tna-head);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .32px;
	text-transform: uppercase;
	cursor: pointer;
}

.tnuva-archive .tna-submit:hover { opacity: .88; }

.tna-faqs { background: var(--tna-navy); padding: calc(25.58px + 4.1163vw) 0 calc(33.21px + 5.3433vw); }
.tna-faq-inner { width: min(930.01px,66.4293vw); margin: 0 auto; }
.tna-faqs .tna-h2 { margin-bottom: calc(6.64px + 1.0687vw); }
.tna-acc-item { border-bottom: 1px solid rgba(255, 255, 255, .25); }

.tna-acc-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 81px;
	padding: var(--tnuva-space-s) 0;
	font-family: var(--tna-body);
	font-size: var(--tna-pmd);
	line-height: 1.8;
	color: #fff;
	cursor: pointer;
	list-style: none;
}

.tna-acc-q::-webkit-details-marker { display: none; }

.tna-acc-q::after {
	content: '';
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.tna-acc-item[open] .tna-acc-q::after { transform: rotate(225deg) translate(-2px, -2px); }

.tnuva-archive .tna-acc-a { padding: 0 0 max(var(--tnuva-space-s), calc(6.89px + 1.1082vw)); }

.tnuva-archive .tna-acc-a p {
	margin: 0;
	font-family: var(--tna-body);
	font-size: clamp(14px, min(15.74px,1.1246vw), 18px);
	line-height: 1.8;
	color: rgba(255, 255, 255, .85);
}

/* The overlaying header used to be switched on here by a body class
   (.tnuva-overlay-header) that nothing in the theme ever added, so the
   archives fell back to style.css's absolutely positioned header and it
   scrolled away with the page. site.css now fixes the bar everywhere. */


/* --- Round 2: measured against the live archives ------------------------ */
.tna-filter { padding: 10px; }
.tna-grid--recipe { margin-top: calc(7.63px + 1.227vw); }
.tnuva-archive .tna-submit { margin-top: 0; }

@media (max-width: 1024px) {
	.tnuva-archive { --tna-gutter: 6vw; }
	.tnuva-archive .tna-title, .tnuva-archive .tna-intro { max-width: none; }
	.tna-hero { padding-top: calc(var(--tnuva-header-h) + var(--tnuva-space-2xl)); }
	.tna-toolbar { flex-wrap: wrap; }
	.tna-filter { width: 50%; }
	.tna-grid--recipe { margin: 30px 6vw 0; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--tnuva-space-l); }
	.tna-grid--product { margin: 15px 6vw 0; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3vw; row-gap: var(--tnuva-space-l); }
	.tna-pagination { margin: var(--tnuva-space-xl) 6vw 0; }
	.tna-toolbar-wrap { padding: 0 6vw; }
	.tna-q-inner, .tna-faq-inner { width: 88vw; }
	.tna-questions { padding: var(--tnuva-space-3xl) 0; }
	.tna-faqs { padding: var(--tnuva-space-2xl) 0; }
}

@media (max-width: 767px) {
	.tnuva-archive { --tna-gutter: 5vw; }
	.tna-filter { width: 100%; }
	/* The vw row gaps resolve to 10-12px on a phone, which runs the card
	   captions into the next row of artwork. */
	.tna-grid--recipe,
	.tna-grid--product {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-left: 5vw;
		margin-right: 5vw;
		column-gap: 5vw;
		row-gap: var(--tnuva-space-l);
	}
	.tna-row-2 { grid-template-columns: minmax(0, 1fr); gap: var(--tnuva-space-s); }
	/* Match the grid's gutter instead of the narrower vw fit. */
	.tna-pagination { margin: var(--tnuva-space-xl) 5vw 0; }
	.tna-toolbar-wrap { padding: 0 5vw; }
}