/*
 * Angus Steakhouse — shared front-end styles.
 * The design is built with inline styles (ported verbatim for fidelity). This
 * file only carries the global resets the prototype set in each <style> block,
 * plus responsive safety rules so the fixed desktop layout degrades gracefully
 * on narrow screens. Desktop rendering is unchanged.
 */

* { box-sizing: border-box; }

/* The page background matches the design's cream canvas. */
body.angus-page { margin: 0; padding: 0; background: #fbf5ec; }

a { cursor: pointer; }

input, select, textarea { font-family: 'Archivo', sans-serif; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #c8102e; }
button { font-family: 'Oswald', sans-serif; }

/* Hide the theme's default page title / chrome — pages render full layouts. */
.angus-page .wp-block-post-title,
.angus-page .entry-header { display: none; }

/* Menu card description — clamp to 2 lines so every card aligns consistently. */
.angus-card-desc {
	font-size: 13px;
	line-height: 1.5;
	color: #7a665c;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 39px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE / MOBILE
 * The design ships as fixed-desktop inline styles. These media queries override
 * the inline values (hence !important) to deliver a proper mobile experience:
 * a hamburger nav, fluid headings, single-column stacking and a tuned hero.
 * Desktop (> 980px) is untouched.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Never allow sideways scroll from a stray fixed width. */
body.angus-page { overflow-x: hidden; }
.angus-page img { max-width: 100%; }

/* ── Mobile app vs desktop site ──────────────────────────────────────────────
 * The dark "ember" mobile app lives in [data-angus-app] and is hidden by
 * default (desktop). At ≤768px on a customer page, the app takes over the
 * screen and the desktop markup is hidden. Desktop (>768px) is untouched. */
[data-angus-app] { display: none; }
@media (max-width: 768px) {
	body.angus-has-app [data-angus-app] {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 2147482000;
		background: #1b100e;
	}
	body.angus-has-app.admin-bar [data-angus-app] { top: 46px; }
	body.angus-has-app .angus-desktop { display: none !important; }
	body.angus-has-app { overflow: hidden; }
}

/* ── Tablet / small laptop (≤ 980px) ─────────────────────────────────────── */
@media (max-width: 980px) {
	.angus-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
	.angus-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
	.angus-menu-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.angus-summary { position: static !important; flex: 1 1 100% !important; width: 100% !important; }
	.angus-stats { grid-template-columns: repeat(2, 1fr) !important; }
	.angus-hero-inner { min-height: calc(100vh - 72px) !important; padding: 60px 28px !important; }
}

/* ── Hamburger nav (≤ 820px) ─────────────────────────────────────────────── */
@media (max-width: 820px) {
	.angus-navwrap { position: relative; padding: 12px 18px !important; }
	.angus-navtoggle { display: flex !important; }
	.angus-navlinks {
		display: none !important;
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column !important; align-items: stretch !important;
		gap: 2px !important; background: #fffdf9;
		padding: 8px 18px 16px !important;
		border-bottom: 1px solid #f0e7da;
		box-shadow: 0 14px 26px rgba(0, 0, 0, .12);
	}
	.angus-navlinks.is-open { display: flex !important; }
	.angus-navlinks a { padding: 13px 6px !important; font-size: 15px !important; }
	.angus-navlinks > a:last-child { justify-content: center !important; margin-top: 8px !important; }
}

/* ── Phone (≤ 760px) ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
	/* Fluid display type (desktop layout only — the mobile app styles itself). */
	.angus-desktop h1 { font-size: clamp(30px, 8.5vw, 56px) !important; line-height: 1.04 !important; }
	.angus-desktop h2 { font-size: clamp(26px, 7vw, 44px) !important; line-height: 1.06 !important; }

	/* Stack every multi-column band. */
	.angus-grid-3, .angus-grid-4 { grid-template-columns: 1fr !important; }
	.angus-menu-grid { grid-template-columns: 1fr !important; }
	.angus-stats { grid-template-columns: repeat(2, 1fr) !important; }
	.angus-contact-pair { flex-direction: column !important; }
	.angus-console-head { flex-wrap: wrap !important; gap: 12px !important; }
	.angus-admin-cols { flex-direction: column !important; }
	.angus-admin-cols > [data-rail] { position: static !important; flex: 1 1 auto !important; width: 100% !important; }

	/* Trim the generous desktop section padding (desktop layout only). */
	.angus-desktop section:not(.angus-hero) {
		padding-left: 20px !important; padding-right: 20px !important;
		padding-top: clamp(40px, 9vw, 78px) !important; padding-bottom: clamp(40px, 9vw, 78px) !important;
	}

	/* Hero: shorter, with a stronger wash so white text reads over the photo. */
	.angus-hero-inner { min-height: calc(100svh - 62px) !important; padding: 48px 20px !important; }
	.angus-hero > div:first-child {
		background: linear-gradient(90deg, rgba(40, 8, 12, .92) 0%, rgba(40, 8, 12, .6) 100%) !important;
	}

	/* Reservation form → single column. */
	.angus-res-grid { grid-template-columns: 1fr !important; }
	.angus-res-grid > div { grid-column: 1 / -1 !important; }
	.angus-res-side { flex: 1 1 100% !important; }

	/* Manager search fills the row. */
	.angus-page [data-search] { flex: 1 1 100% !important; width: auto !important; }

	/* Menu filter bar: search on its own row, categories in ONE swipeable row
	   (was wrapping to 6 rows and covering half the screen). */
	.angus-filterbar { top: 66px !important; }
	.angus-filter-inner { padding: 12px 16px !important; gap: 10px !important; }
	.angus-filter-search { flex: 1 1 100% !important; }
	.angus-pills {
		flex: 1 1 100% !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.angus-pills::-webkit-scrollbar { display: none; }
	.angus-pills .angus-pill { flex: 0 0 auto; }

	/* The cowboy band drops to a flat red band so the copy isn't crowded. */
	.angus-delivery-band { background-image: none !important; min-height: 0 !important; padding: 48px 20px !important; }
	.angus-delivery-band > div:first-child { display: none !important; }
}

/* ── Narrow phone (≤ 400px) ──────────────────────────────────────────────── */
@media (max-width: 400px) {
	.angus-stats { grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
	/* Keep the two hero CTAs from overflowing. */
	.angus-hero a[href] { font-size: 14px !important; padding: 13px 20px !important; }
}