/**
 * layout.css - container, header, footer, page scaffolding.
 * Depends on base.css.
 */

/*
 * Content width follows the client spacing spec: a percentage of the viewport
 * on desktop, full width with a fixed inline padding on phones. Both come from
 * tokens, so the switch happens in responsive.css and never here.
 */
.container {
	width: var(--mb-content-width);
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--mb-pad-inline);
}

/* Prose columns stay readable regardless of the percentage width. */
.container--narrow {
	max-width: var(--mb-container-narrow);
}

/*
 * Section rhythm.
 *
 * .section          default block padding  (spec: 75px top / 75px bottom @1920)
 * .section--first   the opening section    (spec: 150px top / 75px bottom @1920)
 * .section--faq     narrower content       (spec: 80% wide)
 */
.section {
	padding-block: var(--mb-pad-block-top) var(--mb-pad-block-bottom);
}

.section--first {
	padding-block-start: var(--mb-section-first-top);
}

.section--faq > .container,
.container--faq {
	width: var(--mb-content-width-faq);
}

.site-main {
	padding-block: var(--mb-pad-block-top) var(--mb-pad-block-bottom);
}

/* ==========================================================================
   Top bar - pink announcement strip
   ========================================================================== */
.topbar {
	background: var(--mb-primary);
	color: var(--mb-maroon);
	font-family: var(--mb-font-heading);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mb-space-md);
	min-height: var(--mb-topbar-height);
}

/*
 * The cake sits inline with the sentence and stays put if the text wraps on
 * a narrow phone, which is why the label is its own element.
 */
.topbar__text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mb-topbar-gap);
	margin: 0;
	font-size: var(--mb-topbar-size);
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
}

.topbar__icon {
	flex: 0 0 auto;
	width: var(--mb-topbar-icon);
	height: auto;
}

.topbar a { color: var(--mb-maroon); }

/* ==========================================================================
   Header - nav left, logo centred, actions right
   ========================================================================== */
.site-header {
	background: var(--mb-header-bg);
}

.site-header--sticky {
	position: sticky;
	top: 0;
	z-index: 50;
}

/*
 * The centre column is sized to its content and the outer columns each take
 * an equal share of what is left, so the logo lands on the true page centre
 * regardless of how many menu items or action icons exist.
 */
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--mb-space-md);
	min-height: var(--mb-header-height);
}

.site-header__start {
	display: flex;
	align-items: center;
	gap: var(--mb-space-sm);
	justify-self: start;
}

.site-header__center { justify-self: center; }

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--mb-header-action-gap);
	justify-self: end;
}

.site-brand {
	display: block;
	text-decoration: none;
}

.site-brand__text {
	font-family: var(--mb-font-heading);
	font-weight: 700;
	font-size: var(--mb-h5);
	color: var(--mb-color-text);
}

.site-brand__logo {
	width: auto;
	height: var(--mb-logo-height);
}

/* Breadcrumbs */
.breadcrumbs {
	padding-block: var(--mb-space-sm);
	border-bottom: 1px solid var(--mb-color-border);
	font-size: 0.875rem;
	color: var(--mb-color-muted);
}

/* Page scaffolding */
.page-header { padding-block: var(--mb-space-lg) 0; }
.page-title { margin: 0; }
.page-content { padding-block: var(--mb-space-lg); }

.post-grid {
	display: grid;
	gap: var(--mb-space-lg);
	grid-template-columns: repeat(auto-fill, minmax(var(--mb-grid-min), 1fr));
}

/* ==========================================================================
   Footer
   Two columns. Both are distributed with space-between and share a grid row,
   so they are the same height - that is what lines FOLLOW US up with CONTACT
   US, and the copyright up with the legal links, without any fixed offsets.
   ========================================================================== */
.site-footer {
	background: var(--mb-secondary);
	color: var(--mb-black);
}

.site-footer a {
	color: var(--mb-black);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus { color: var(--mb-navy); }

.site-footer__inner {
	display: grid;
	grid-template-columns: var(--mb-footer-columns);
	gap: var(--mb-footer-gap);
	padding-block: var(--mb-footer-pad);
}

.site-footer__brand,
.site-footer__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--mb-footer-row-gap);
}

/* Brand column */
.site-footer__headline {
	margin: 0 0 var(--mb-space-lg);
	max-width: 12ch;
	color: var(--mb-navy);
	font-family: var(--mb-font-heading);
	font-size: var(--mb-footer-headline);
	font-weight: 700;
	line-height: 1.1;
}

.footer-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-sm);
}

.footer-phone .icon {
	width: var(--mb-footer-phone-icon);
	height: var(--mb-footer-phone-icon);
	flex: 0 0 auto;
}

.footer-phone__number {
	font-size: var(--mb-footer-phone);
	font-weight: 500;
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--mb-footer-link);
}

/* Section headings - QUICK LINKS, CATEGORIES, CONTACT US, FOLLOW US */
.site-footer__heading {
	margin: 0 0 var(--mb-footer-heading-gap);
	color: var(--mb-navy);
	font-family: var(--mb-font-heading);
	font-size: var(--mb-footer-heading);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Link columns */
.site-footer__columns {
	display: grid;
	grid-template-columns: var(--mb-footer-link-columns);
	gap: var(--mb-footer-gap);
}

/*
 * Footer menus stack. Categories flows across two CSS columns - the design's
 * unlabelled third column is this menu's spillover, not a separate menu.
 */
.site-footer .menu__list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .menu__list li { margin-bottom: var(--mb-footer-item-gap); }

.site-footer .menu__list a {
	font-family: var(--mb-font-body);
	font-size: var(--mb-footer-link);
	font-weight: 400;
}

/*
 * Categories fills the first column top to bottom, then continues in the
 * second. A grid with an explicit row count is used rather than CSS columns:
 * `columns: 2` auto-balances ten items to 5/5, while the design calls for 6
 * then 4. The row count is a token so it can flatten to one column on phones.
 */
.footer-col--categories .menu__list {
	display: grid;
	grid-auto-flow: column;
	/*
	 * min-content rather than auto: auto rows stretch to share height across
	 * both columns, which double-spaced the list against the neighbouring
	 * Quick Links. Spacing comes from row-gap, so the item margin is dropped.
	 */
	grid-template-rows: repeat(var(--mb-footer-cat-rows), min-content);
	align-content: start;
	column-gap: var(--mb-footer-gap);
	row-gap: var(--mb-footer-item-gap);
}

.footer-col--categories .menu__list li { margin-bottom: 0; }

/* Contact block */
.footer-contact__address {
	margin: 0 0 var(--mb-space-md);
	max-width: 34ch;
	font-family: var(--mb-font-body);
	font-size: var(--mb-footer-link);
	font-style: normal;
	line-height: 1.6;
}

.footer-contact__email {
	margin: 0;
	font-size: var(--mb-footer-link);
}

/* Legal row */
.site-footer__legal .menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mb-space-md);
}

.site-footer__legal .menu__list li { margin-bottom: 0; }

/* The separator bar between the legal links, per the design. */
.site-footer__legal .menu__list li + li { position: relative; }

.site-footer__legal .menu__list li + li::before {
	position: absolute;
	left: calc(var(--mb-space-md) / -2);
	color: var(--mb-maroon);
	content: "|";
}

.hours { list-style: none; margin: 0; padding: 0; }
.hours__row { display: flex; justify-content: space-between; gap: var(--mb-space-md); }

/*
 * No media queries live in this file. All breakpoint behaviour is defined in
 * assets/css/responsive.css against the token set declared in base.css.
 */