/**
 * HRR Foods — mobile experience layer.
 *
 * Loaded last, after main.css, templates.css and refresh.css, so it can
 * resolve cascade conflicts in the older layers and apply mobile-specific
 * ergonomics without touching the desktop design.
 *
 * 1. Touch foundations & safe areas
 * 2. Header, top bar & mobile drawer
 * 3. Forms, keyboards & zoom
 * 4. Layout corrections
 * 5. Tables
 * 6. Cards, content & footer
 * 7. Back to top
 * 8. Small phones, landscape & pointer-specific polish
 */

/* ==========================================================================
   1. Touch foundations & safe areas
   ========================================================================== */
:root {
	--hrr-header-h: 76px;
	--hrr-touch: 44px;
}

html {
	scroll-padding-top: calc(var(--hrr-header-h) + 14px);
}

body {
	overflow-x: clip;
	-webkit-tap-highlight-color: transparent;
}

/*
 * JS pins the body while the drawer is open (see main.js). Positioning the
 * body rather than relying on overflow:hidden is what stops iOS Safari from
 * scrolling the page behind the overlay.
 */
body.menu-open {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
	touch-action: none;
}

body.menu-open .site-header {
	transform: none;
}

a,
button,
input,
select,
textarea,
summary {
	touch-action: manipulation;
}

/* Keep long words, URLs and email addresses from breaking the mobile grid. */
.entry-content,
.prose,
.footer__contact,
.single-aside__meta,
.archive-hero,
.page-hero {
	overflow-wrap: break-word;
}

.entry-content p,
.prose p,
.archive-hero__lead,
.page-hero__lead {
	text-wrap: pretty;
}

/* Respect the notch and home indicator when the browser is edge-to-edge. */
.container {
	padding-left: max(var(--gutter), env(safe-area-inset-left));
	padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.topbar {
	padding-top: env(safe-area-inset-top);
}

.site-footer {
	padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

/* ==========================================================================
   2. Header, top bar & mobile drawer
   ========================================================================== */
@media (max-width: 1100px) {
	:root {
		--hrr-header-h: 68px;
	}

	/* The sticky header can slide away while reading and return on scroll up. */
	.site-header {
		transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
			box-shadow 0.3s var(--ease), background 0.3s var(--ease);
	}

	.site-header.is-hidden {
		transform: translateY(-101%);
	}

	.header__inner {
		min-height: var(--hrr-header-h);
	}

	.header__portal,
	.menu-toggle {
		min-height: var(--hrr-touch);
	}

	.header__portal {
		width: var(--hrr-touch);
		height: var(--hrr-touch);
	}

	.menu-toggle {
		justify-content: center;
		padding: 10px 14px;
	}

	/* Full-height, safe-area aware drawer with its own scroll context. */
	.mobile-drawer {
		height: 100dvh;
		max-height: 100dvh;
		padding-top: calc(22px + env(safe-area-inset-top));
		padding-right: max(26px, env(safe-area-inset-right));
		padding-bottom: calc(26px + env(safe-area-inset-bottom));
		padding-left: max(26px, env(safe-area-inset-left));
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.mobile-drawer__head .brand {
		display: inline-flex;
		align-items: center;
		min-height: var(--hrr-touch);
	}

	.drawer-close {
		width: var(--hrr-touch);
		height: var(--hrr-touch);
	}

	.mobile-menu .nav-link,
	.mobile-nav .nav-link {
		min-height: 52px;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.mobile-nav .sub-menu .nav-link,
	.mobile-menu .sub-menu .nav-link {
		min-height: var(--hrr-touch);
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.mobile-drawer__links a,
	.mobile-drawer__contact a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	.mobile-drawer__contact {
		gap: 0;
	}

	.mobile-drawer__cities {
		line-height: 1.7;
	}
}

/* ==========================================================================
   3. Forms, keyboards & zoom
   ========================================================================== */
@media (max-width: 1100px) {
	/*
	 * iOS zooms the whole page when a form control is focused below 16px.
	 * Match the control size to the body copy instead of letting Safari zoom.
	 */
	.field input,
	.field textarea,
	.field select,
	.search-form .search-field,
	.search-form input[type="search"],
	.newsletter__form input,
	.newsletter__form input[type="email"],
	.zip-checker__form input,
	.resource-gate input,
	.inquiry-form input,
	.inquiry-form select,
	.inquiry-form textarea,
	input[type="search"],
	input[type="email"],
	input[type="tel"],
	input[type="text"],
	select,
	textarea {
		font-size: 16px;
	}

	.field label {
		font-size: 14px;
	}

	.field--check input {
		width: 20px;
		height: 20px;
	}

	/* Keep focused fields below the sticky header instead of underneath it. */
	.field,
	input,
	select,
	textarea,
	[id] {
		scroll-margin-top: calc(var(--hrr-header-h) + 22px);
	}
}

/* ==========================================================================
   4. Layout corrections
   ========================================================================== */

/* Post cards can be their own grid item; never let intrinsic media width
   stretch the card past its column. */
.post-card__media,
.post-card__body {
	min-width: 0;
}

.post-card__media img {
	max-width: 100%;
}

@media (max-width: 900px) {
	/* Gated resource panel: copy above the form, never beside a zero-width
	   column. The refresh layer re-declares the desktop grid, hence this. */
	.resource-download {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.resource-download__copy,
	.resource-download__action {
		min-width: 0;
	}

	.resource-gate {
		max-width: none;
	}

	/* Newsroom rows read as a date line followed by the release. */
	.press-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding-block: 22px;
	}

	.press-item__meta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px 14px;
	}

	.press-item h2,
	.press-item > p,
	.press-item > .link-arrow {
		grid-column: 1;
	}
}

@media (max-width: 700px) {
	:root {
		--hrr-header-h: 64px;
		--gutter: 20px;
	}

	html {
		scroll-padding-top: calc(var(--hrr-header-h) + 12px);
	}

	.topbar__inner {
		min-height: 44px;
	}

	.topbar__links {
		margin-left: auto;
	}

	.topbar__links a {
		min-height: 44px;
		padding: 0 10px;
		font-size: 13px;
	}

	.header__inner {
		min-height: var(--hrr-header-h);
	}

	.site-logo__img {
		height: 28px;
	}

	.hero {
		padding-top: 32px;
	}

	/* Featured insight: single column, image cropped to a friendly ratio. */
	.posts-grid .post-card--featured {
		grid-column: auto;
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 8px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.posts-grid .post-card--featured .post-card__media {
		aspect-ratio: 4 / 3;
		border-radius: var(--radius);
	}

	.posts-grid .post-card--featured .post-card__body {
		padding: 18px 2px 0;
	}

	.posts-grid .post-card--featured .post-card__title {
		font-size: 1.6rem;
	}

	/* A single column of content with a comfortable measure. */
	.post-card__body {
		padding: 20px;
	}

	.insight-cats a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.pagination .page-numbers {
		min-width: 44px;
		height: 44px;
	}

	/* Utility pages become tappable lists rather than 17px text targets. */
	.sitemap-block li {
		margin-bottom: 2px;
	}

	.sitemap-block li a {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}

	/* Larger, clearer form controls. */
	.search-form .search-field,
	.search-form input[type="search"] {
		height: 52px;
	}

	.form-grid {
		gap: 0;
	}
}

/* ==========================================================================
   5. Tables
   ========================================================================== */
@media (max-width: 700px) {
	/* Any rich-text table scrolls rather than pushing the page sideways. */
	.prose table,
	.entry-content table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ==========================================================================
   6. Cards, content & footer
   ========================================================================== */
@media (max-width: 700px) {
	.entry-thumbnail,
	.single-featured,
	.hero__photo,
	.post-card__media,
	.resource-hero__badge {
		overflow: hidden;
	}

	.entry-content h2,
	.prose h2 {
		text-wrap: balance;
	}

	.entry-content ul,
	.entry-content ol,
	.prose ul,
	.prose ol {
		padding-left: 1.25em;
	}

	.entry-content img,
	.prose img {
		border-radius: var(--radius-sm);
	}

	.share {
		gap: 8px;
	}

	/* Let the label take its own line so all share targets stay in one row. */
	.share__label {
		flex: 1 0 100%;
		margin: 0 0 4px;
	}

	.share > a,
	.share__copy {
		min-width: 44px;
		height: 44px;
		padding: 0 12px;
	}

	/* Touch-friendly footer lists without turning the footer into a wall. */
	.footer__social a {
		width: 44px;
		height: 44px;
	}

	.footer__contact a {
		min-height: 40px;
	}

	.footer-menu {
		gap: 2px;
	}

	.footer-menu a {
		display: flex;
		align-items: center;
		min-height: 34px;
	}

	.footer__col h2 {
		margin-bottom: 8px;
	}

	.footer__legal {
		gap: 4px 16px;
	}

	.footer__legal a {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}

	.footer__bottom {
		gap: 4px;
	}
}

/* Give coarse pointers a bigger hit area without changing the map artwork. */
@media (hover: none) and (pointer: coarse) {
	.map-dot::after {
		content: "";
		position: absolute;
		inset: -6px;
		border-radius: 50%;
	}

	.map-dot__label {
		font-size: 11px;
	}
}

/* Don't leave hover-only lifts stuck on touch screens. */
@media (hover: none) {
	.post-card:hover,
	.job-card:hover,
	.press-item:hover,
	.platform-item:hover,
	.solution-card:hover,
	.brand-tile:hover,
	.tpl-card:hover {
		transform: none;
	}

	.btn:hover {
		transform: none;
	}

	.btn:active,
	.post-card:active,
	.brand-tile:active {
		transform: scale(0.995);
	}
}

/* ==========================================================================
   7. Back to top
   ========================================================================== */
.back-to-top {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--ink);
	box-shadow: var(--shadow);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
		visibility 0.25s, color 0.2s var(--ease), border-color 0.2s var(--ease);
	cursor: pointer;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	border-color: var(--blue);
	color: var(--blue);
}

body.menu-open .back-to-top {
	opacity: 0;
	visibility: hidden;
}

@media (min-width: 1101px) {
	.back-to-top {
		display: none;
	}
}

/* ==========================================================================
   8. Small phones, landscape & pointer-specific polish
   ========================================================================== */
@media (max-width: 380px) {
	:root {
		--gutter: 16px;
	}

	.hero {
		padding-top: 26px;
	}

	.hero__title {
		font-size: clamp(2rem, 10.4vw, 2.55rem);
	}

	.display-1 {
		font-size: clamp(2.6rem, 13vw, 3.4rem);
	}

	.display-2 {
		font-size: clamp(1.95rem, 9.4vw, 2.4rem);
	}

	.post-card__body {
		padding: 18px;
	}

	.post-card__title {
		font-size: 1.2rem;
	}

	.menu-toggle {
		width: 44px;
		padding: 10px;
	}

	.menu-toggle__bars {
		width: 20px;
	}

	.btn {
		padding-inline: 16px;
	}

	.section {
		padding-block: 48px;
	}
}

/* Short landscape phones lose the utility bar to keep the header light. */
@media (max-height: 500px) and (orientation: landscape) {
	.topbar {
		display: none;
	}

	.site-header .header__inner {
		min-height: 56px;
	}

	.mobile-drawer {
		padding-top: 14px;
	}

	.hero {
		padding-top: 24px;
	}
}

/* Print: the mobile chrome and floating controls should not appear. */
@media print {
	.back-to-top,
	.topbar,
	.mobile-drawer,
	.drawer-backdrop,
	.menu-toggle {
		display: none !important;
	}
}