/**
 * Hall’s Kitchen — mobile / narrow viewport fixes.
 * Loads after styles.css + grid.css to override shared theme rules.
 */

/* -------------------------------------------------------------------------
 * Image slider — remove desktop “zoom crop” (160% width + negative offset)
 * Applies to all block instances, not only legacy #ccm-image-slider-2199
 * ------------------------------------------------------------------------- */
@media (max-width: 1020px) {
	.ccm-image-slider-inner,
	.ccm-image-slider-container,
	.ccm-image-slider {
		overflow: hidden;
		max-width: 100%;
		position: relative;
	}

	ul.rslides,
	.ccm-image-slider ul.rslides,
	.ccm-block-image-slider ul.rslides {
		width: 100% !important;
		max-width: 100% !important;
		left: 0 !important;
		right: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: none !important;
	}

	.rslides li,
	.ccm-image-slider .rslides li {
		position: relative;
	}

	.rslides img,
	.ccm-image-slider .rslides img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
		margin: 0 auto;
	}

	[id^="ccm-image-slider-"] {
		width: 100% !important;
		max-width: 100% !important;
		left: 0 !important;
		position: relative !important;
	}
}

@media (max-width: 768px) {
	ul.rslides,
	.ccm-image-slider ul.rslides {
		width: 100% !important;
		left: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#main .ccm-image-slider-text {
		padding: 12px 16px 24px;
		box-sizing: border-box;
	}

	#main .ccm-image-slider-text h2,
	#main .ccm-image-slider-text h3 {
		font-size: clamp(1.25rem, 5.5vw, 1.75rem) !important;
		line-height: 1.15 !important;
	}
}

/* -------------------------------------------------------------------------
 * Slide-out navigation — wider drawer, tighter vertical rhythm, wrap long labels
 * (theme default: 50vw + 10vw padding creates clipping + huge gaps)
 * ------------------------------------------------------------------------- */
@media (max-width: 1020px) {
	#header .nav {
		--hk-drawer-w: min(70vw, 100%);
		width: var(--hk-drawer-w) !important;
		right: calc(-1 * var(--hk-drawer-w)) !important;
		max-width: 100% !important;
		/* Clear fixed ORDER NOW + hamburger (z-index above .nav) — was blocking first links */
		padding: calc(env(safe-area-inset-top, 0px) + clamp(76px, 20vw, 108px)) 16px max(28px, env(safe-area-inset-bottom, 0px)) 12px !important;
		box-sizing: border-box !important;
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	.mobMe #header .nav {
		right: 0 !important;
	}

	#header .nav > li {
		margin: 0 0 2px !important;
	}

	#header .nav > li > a {
		padding: 7px 6px !important;
		font-size: clamp(12px, 3.1vw, 15px) !important;
		line-height: 1.28 !important;
		white-space: normal !important;
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	#header ul.nav ul {
		margin: 0 0 6px !important;
		padding: 0 0 0 6px !important;
		left: 0 !important;
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}

	#header ul.nav ul li {
		margin: 0 0 1px !important;
	}

	#header ul.nav ul li > a {
		padding: 5px 6px 5px 10px !important;
		font-size: clamp(11px, 2.9vw, 14px) !important;
		line-height: 1.3 !important;
		white-space: normal !important;
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	#header ul.nav ul ul {
		margin: 2px 0 4px !important;
		padding-left: 8px !important;
	}

	#header ul.nav li.has-order-links > ul.order-submenu {
		padding: 2px 0 4px !important;
	}

	#header ul.nav li.has-order-links > ul.order-submenu > li.order-link > a {
		white-space: normal !important;
		flex-wrap: wrap;
		padding: 5px 8px 5px 14px !important;
		font-size: 11px !important;
		line-height: 1.35 !important;
		gap: 6px !important;
	}
}

/* -------------------------------------------------------------------------
 * Content columns — row uses inline flex without wrap; stack on small screens
 * (master view.css targets .content-column .row — typo vs .content-columns)
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.content-columns .row {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 1.25rem !important;
	}

	.content-columns .colFlex {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box;
	}

	.content-columns .colFlex a.colFlex {
		display: block;
		width: 100%;
	}

	.content-columns-wrapper {
		max-width: 100% !important;
		overflow-x: hidden;
	}

	.pan-content-column {
		min-height: min(85vh, 640px);
		height: auto !important;
		max-height: none !important;
		padding: 48px 20px !important;
	}
}

@media (max-width: 576px) {
	.pan-content-column {
		min-height: unset;
		padding: 40px 16px !important;
	}
}

/* -------------------------------------------------------------------------
 * Side-by-side block — 50/50 → stacked
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.sidebyside,
	.sidebyside.rightAlign {
		flex-direction: column !important;
	}

	.sidebyside > .imageSide,
	.sidebyside > .textSide {
		width: 100% !important;
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	.sidebyside .textSide {
		font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
		padding: 28px 20px !important;
		min-height: 200px;
	}

	.sidebyside .imageSide img {
		width: 100% !important;
		height: auto !important;
		display: block;
	}
}

/* -------------------------------------------------------------------------
 * Header logo — site uses id="logoPlace"; tall artwork needs max-height too
 * ------------------------------------------------------------------------- */
@media (max-width: 1020px) {
	#header img#logoPlace,
	#header a[href] img#logoPlace {
		max-width: min(72vw, 315px) !important;
		max-height: clamp(108px, 21vh, 162px) !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain;
		padding: 6px 10px !important;
		box-sizing: border-box;
	}
}

@media (max-width: 576px) {
	#header img#logoPlace,
	#header a[href] img#logoPlace {
		max-width: min(66vw, 252px) !important;
		max-height: clamp(90px, 18vh, 138px) !important;
		padding: 4px 8px !important;
	}
}

/* -------------------------------------------------------------------------
 * Main vs fixed header — theme footer runs headRem() and sets #main margin-top
 * from $('#header').outerHeight(). DO NOT use margin-top !important here; it
 * overrides that JS and causes the hero/content to slide under the header on mobile.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.contenter {
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}
}

/*
 * Inline font-size on spans vs `.listOneText p span { font-size:22px !important }` (master styles.css).
 * Crawled hallskitchen home, about, menu, careers — common px values below.
 */
@media (max-width: 768px) {
	.listOneText span[style*="85px"],
	.listOneText p span[style*="85px"] {
		font-size: 40px !important;
		line-height: 40px !important;
	}

	.listOneText span[style*="72px"],
	.listOneText p span[style*="72px"],
	#main span[style*="font-size:72px"],
	#main span[style*="font-size: 72px"] {
		font-size: 36px !important;
		line-height: 36px !important;
	}

	.listOneText span[style*="48px"],
	.listOneText p span[style*="48px"],
	#main span[style*="font-size:48px"],
	#main span[style*="font-size: 48px"] {
		font-size: 30px !important;
		line-height: 30px !important;
	}

	.listOneText span[style*="40px"],
	.listOneText p span[style*="40px"],
	#main span[style*="font-size:40px"],
	#main span[style*="font-size: 40px"] {
		font-size: 24px !important;
		line-height: 28px !important;
	}

	.listOneText span[style*="30px"],
	.listOneText p span[style*="30px"],
	#main span[style*="font-size:30px"],
	#main span[style*="font-size: 30px"] {
		font-size: 22px !important;
		line-height: 26px !important;
	}

	.listOneText span[style*="28px"],
	.listOneText p span[style*="28px"],
	#main span[style*="font-size:28px"],
	#main span[style*="font-size: 28px"] {
		font-size: 20px !important;
		line-height: 24px !important;
	}

	.listOneText span[style*="26px"],
	.listOneText p span[style*="26px"],
	#main span[style*="font-size:26px"],
	#main span[style*="font-size: 26px"] {
		font-size: 20px !important;
		line-height: 24px !important;
	}

	.listOneText span[style*="24px"],
	.listOneText p span[style*="24px"],
	#main span[style*="font-size:24px"],
	#main span[style*="font-size: 24px"] {
		font-size: 18px !important;
		line-height: 22px !important;
	}

	.listOneText span[style*="22px"],
	.listOneText p span[style*="22px"],
	#main span[style*="font-size:22px"],
	#main span[style*="font-size: 22px"] {
		font-size: 18px !important;
		line-height: 22px !important;
	}

	.listOneText span[style*="20px"],
	.listOneText p span[style*="20px"],
	#main span[style*="font-size:20px"],
	#main span[style*="font-size: 20px"] {
		font-size: 16px !important;
		line-height: 20px !important;
	}

	.listOneText span[style*="18px"],
	.listOneText p span[style*="18px"],
	#main span[style*="font-size:18px"],
	#main span[style*="font-size: 18px"] {
		font-size: 15px !important;
		line-height: 19px !important;
	}

	.listOneText span[style*="16px"],
	.listOneText p span[style*="16px"],
	#main span[style*="font-size:16px"],
	#main span[style*="font-size: 16px"] {
		font-size: 15px !important;
		line-height: 19px !important;
	}

	.listOneText span[style*="15px"],
	.listOneText p span[style*="15px"],
	#main span[style*="font-size:15px"],
	#main span[style*="font-size: 15px"] {
		font-size: 14px !important;
		line-height: 18px !important;
	}

	.listOneText span[style*="14px"],
	.listOneText p span[style*="14px"],
	#main span[style*="font-size:14px"],
	#main span[style*="font-size: 14px"] {
		font-size: 13px !important;
		line-height: 17px !important;
	}

	.listOneText span[style*="13px"],
	.listOneText p span[style*="13px"],
	#main span[style*="font-size:13px"],
	#main span[style*="font-size: 13px"] {
		font-size: 12px !important;
		line-height: 16px !important;
	}

	.listOneText span[style*="12px"],
	.listOneText p span[style*="12px"],
	#main span[style*="font-size:12px"],
	#main span[style*="font-size: 12px"] {
		font-size: 12px !important;
		line-height: 15px !important;
	}

	.listOneText span[style*="11px"],
	.listOneText p span[style*="11px"],
	#main span[style*="font-size:11px"],
	#main span[style*="font-size: 11px"] {
		font-size: 11px !important;
		line-height: 14px !important;
	}

	.listOneText span[style*="10px"],
	.listOneText p span[style*="10px"],
	#main span[style*="font-size:10px"],
	#main span[style*="font-size: 10px"] {
		font-size: 10px !important;
		line-height: 13px !important;
	}
}

/* -------------------------------------------------------------------------
 * Image float / wide embeds — don’t spill past viewport
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.imageFloat,
	.ccm-block-styles .imageFloat {
		max-width: 100% !important;
	}

	.imageFloat img {
		max-width: 100% !important;
		height: auto !important;
	}

	/*
	 * Remove imagefloat 98% squeeze on mobile (application/blocks/imagefloat
	 * view.css + per-block #me* injected rules). #main … beats #me* specificity.
	 */
	#main .imageFloat .listOneText,
	#main .imageFloat img,
	#main .imageFloat .widerMan {
		width: 100% !important;
	}

	iframe {
		max-width: 100% !important;
	}
}