/*
 * Home Location Chooser — content styles + targeted suppressions.
 *
 * The chooser template now uses get_header() and get_footer(), so the real
 * site chrome (logo, top links, main nav, footer tagline, footer social,
 * footer nav, copyright) is rendered by the theme. This stylesheet's only
 * jobs are:
 *
 *   1. Hide the two header elements that don't belong on the chooser:
 *      - the DoorDash banner (.banners)
 *      - the front-page hero rotator (#Carousel) and any banner-tout overlay
 *
 *   2. Lay out the chooser content area (intro + two-card grid) so it sits
 *      cleanly inside the theme's #PageBody wrapper.
 *
 *   3. Style the chooser-card-cta override on top of the theme .btn class
 *      it now carries (the location-card template part renders the CTA span
 *      with class="chooser-card-cta btn").
 *
 * Everything is scoped under body.mtm-chooser-body or under chooser-specific
 * classes so it cannot leak to other pages.
 */

/* ---------- Suppress DoorDash banner + hero rotator on the chooser only ---------- */
body.mtm-chooser-body .banners,
body.mtm-chooser-body #Carousel,
body.mtm-chooser-body #BannerTout {
	display: none !important;
}

/* The theme also wraps the banner + header + carousel in <div id="Rotator">.
 * That wrapper stays visible because it also contains <header id="HeaderContainer">,
 * which we DO want. We only hide the banner + carousel children. */

/* ---------- Force the header into its "scrolled" (.affixed) visual state ----------
 * The theme makes #HeaderContainer position:fixed but leaves it transparent at
 * page top; the .affixed class (added by the scroll handler in footer.php) gives
 * it a dark background and a gold border-bottom. Every other page has a hero
 * rotator behind the transparent header, so it reads fine. The chooser hides
 * the hero, so a transparent header means white nav text on white page until
 * the user scrolls. Apply the .affixed visual treatment from page load.
 * Mirrors style.css line 111. */
body.mtm-chooser-body #HeaderContainer {
	border-bottom: 2px solid #db9c1d;
	background: rgba(0, 0, 0, 0.9);
}

/* ---------- Force the logo and main nav to render inline on the chooser ----------
 * Bootstrap's .row uses flex-wrap: wrap. When the location-specific menu has
 * 9 items, the MainMenu column wraps to a second line, making the header tall
 * and pushing the chooser content below where the chooser-content padding-top
 * expected to land. Force nowrap and let the column flex naturally so the
 * logo and nav sit on a single horizontal row, matching the rest of the site. */
body.mtm-chooser-body #MainNavRow {
	flex-wrap: nowrap !important;
	/* position: relative is now sitewide in style.css for the header switcher */
}
body.mtm-chooser-body #LogoContainer {
	flex: 0 0 auto !important;
	max-width: 220px !important;
	min-width: 160px;
}
body.mtm-chooser-body #MainMenu {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	/* padding-right reservation is now sitewide in style.css */
}
/* Tighten nav-item horizontal padding so 9 items fit comfortably inline.
 * The theme's default .nav-link padding is fine for 5 items but cramped for 9. */
body.mtm-chooser-body #menu-main-nav > li > a {
	padding-left: 0.55rem !important;
	padding-right: 0.55rem !important;
}
/* Extra breathing room between the logo column and the first nav item. */
body.mtm-chooser-body #menu-main-nav > li:first-child > a {
	padding-left: 1.5rem !important;
}
/* Vertically center the nav row against the logo. */
body.mtm-chooser-body #MainMenu {
	align-items: center;
}
body.mtm-chooser-body .header-col {
	margin-top: 0 !important;
}

/* ---------- Hide the dormant Phase 3 mu-plugin switcher + popups on the chooser ---------- */
body.mtm-chooser-body .mtm-switcher,
body.mtm-chooser-body [id^="pum-"],
body.mtm-chooser-body .pum {
	display: none !important;
}

/* ---------- Chooser content area layout ----------
 * Top padding matches the theme's #ContentArea ladder (style.css ~line 215/526/635)
 * so the chooser clears the position:fixed #HeaderContainer the same way every
 * other page on the site does. Header heights aren't fixed in JS; the theme just
 * uses static padding-top at three breakpoints. We mirror that.
 */
.mtm-chooser-content {
	/* Generous clearance below the fixed header so the heading has air to breathe.
	 * Mobile/tablet values include +44px for the mobile location bar (#MtmMobileLocBar). */
	padding: 219px 0 40px;           /* mobile <768px */
	background: #ffffff;
}
@media (min-width: 768px) {
	.mtm-chooser-content { padding: 229px 0 50px; }   /* tablet */
}
@media (min-width: 992px) {
	.mtm-chooser-content { padding: 195px 0 60px; }   /* desktop — extra clearance below the fixed header */
}

/* ---------- Shrink the real site footer's vertical padding on the chooser ----------
 * style.css line 190 gives #FooterRow `padding: 100px 0 145px`. That's deliberate
 * on content pages with a lot of vertical content above it, but on the chooser
 * (which is a short page) it leaves a lot of empty cream above and below the
 * footer text. Trim about 40-50% on the chooser only. */
body.mtm-chooser-body #FooterRow {
	padding: 55px 0 70px;
}

/* ---------- Intro block ---------- */
.chooser-intro {
	max-width: 720px;
	margin: 0 auto 32px;
	text-align: center;
}
.chooser-eyebrow {
	margin: 0 0 8px;
	font-family: 'Myriad W01 Sm Cnd', 'Myriad W01 Regular', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #8e620b;
}
.chooser-title {
	margin: 0;
	font-family: 'ITC Blair W01 Medium', 'Trade Gothic LT W01 Bd Cn No-2', Georgia, serif;
	font-size: clamp(1.5rem, 2.6vw, 1.95rem);
	line-height: 1.25;
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
	color: #39302b;
}
.chooser-subhead {
	margin: 10px auto 0;
	max-width: 560px;
	font-family: 'Myriad W01 Sm Cnd', 'Myriad W01 Regular', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: 0;
	color: #5a4f47;
}
.chooser-page-content {
	margin: 16px auto 0;
	max-width: 640px;
	font-family: 'Myriad W01 Sm Cnd', 'Myriad W01 Regular', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #5a4f47;
}
.chooser-page-content p:last-child { margin-bottom: 0; }

/* ---------- Card grid ---------- */
.chooser-cards {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.chooser-cards {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
}

/* ---------- Card ---------- */
.chooser-card {
	background: #ffffff;
	border: 1px solid #ece3d2;
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.chooser-card:hover,
.chooser-card:focus-within {
	box-shadow: 0 6px 18px rgba(57, 48, 43, 0.10);
	transform: translateY(-1px);
}
.chooser-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.chooser-card-link:hover { text-decoration: none; }

/* ---------- Card image — 3:2 crop, image fills the container ---------- */
.chooser-card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #efe7d6;
	font-size: 0;
	line-height: 0;
}
.chooser-card-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform 0.5s ease;
}
.chooser-card:hover .chooser-card-image img,
.chooser-card:focus-within .chooser-card-image img {
	transform: scale(1.02);
}
.chooser-card-image::after { content: none; }

/* ---------- Card body ---------- */
.chooser-card-body {
	padding: 20px 22px 24px;
	text-align: center;
}
.chooser-card-overline { display: none; }
.chooser-card-title {
	margin: 0 0 6px;
	font-family: 'ITC Blair W01 Medium', 'Trade Gothic LT W01 Bd Cn No-2', Georgia, serif;
	font-size: clamp(1.2rem, 1.9vw, 1.4rem);
	line-height: 1.2;
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
	color: #39302b;
}
.chooser-card-title::after { content: none; }
.chooser-card-address,
.chooser-card-address p,
.chooser-card-address a {
	margin: 6px 0 16px;
	font-family: 'Myriad W01 Sm Cnd', 'Myriad W01 Regular', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;
	color: #c88b11;   /* brand gold/orange — matches the .btn background */
}
.chooser-card-address p { margin: 0; }

/* Hide the "Today HH–HH" line entirely. */
.chooser-card-hours { display: none; }
.chooser-card-status {
	margin: 6px 0 16px;
	font-family: 'Myriad W01 Sm Cnd', 'Myriad W01 Regular', Arial, sans-serif;
	font-size: 14px;
	letter-spacing: 0;
	color: #a13e3e;
}

/* Legacy decorative bits the markup may still contain — hidden via CSS */
.chooser-dingbat { display: none; }

/* ---------- CTA button — inherits theme .btn now; only tighten width + chevron ---------- */
/* The location-card template renders the CTA as: <span class="chooser-card-cta btn">…</span>
 * Theme .btn rule already gives: height 45, gold bg, gold text-shadow, square corners,
 * uppercase, letter-spacing -.01em, hover flip to black/cream.
 * We only need to fix the width on the card (theme .btn is display:block by default)
 * and hide the chevron (the theme .btn has no chevron). */
.chooser-card-cta.btn {
	display: inline-block;
	width: auto;
	min-width: 180px;
	margin: 4px auto 0;
	padding: 13px 26px 10px;
}
.chooser-card-cta .chooser-card-cta-chev { display: none; }
@media (max-width: 640px) {
	.chooser-card-cta.btn {
		display: block;
		width: 100%;
		padding: 13px 18px 10px;
	}
}

/* ---------- Below-the-fold (optional ACF content) ---------- */
.chooser-below {
	max-width: 760px;
	margin: 32px auto 0;
	padding: 22px 16px 0;
	border-top: 1px solid #ece3d2;
	font-family: 'Myriad W01 Sm Cnd', 'Myriad W01 Regular', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
	color: #5a4f47;
}
.chooser-below a {
	color: #b75106;
	text-decoration: underline;
}
.chooser-below p:last-child { margin-bottom: 0; }