/**
 * Theme Name:        Brook & Badger
 * Theme URI:         https://debumedia.com
 * Description:       A custom WordPress block theme for The Brook and Badger.
 * Version:           1.2
 * Author:            Debu Media
 * Author URI:        https://debumedia.com
 * Text Domain:       brook-and-badger
 * Requires at least: 6.6
 * Requires PHP:      8.0
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

/* Menu page: hide the "Reservations" nav item since the header
   button becomes "Reservations" on this page (swapped via JS in
   functions.php). Uses the page-slug body class we add via filter.
   Target the <li> via :has() so the flex gap collapses too. */
body.page-the-menu .wp-block-navigation-item:has(a[href*="sevenrooms"]) {
	display: none;
}

/* All other pages: hide the "Menu" nav item since the header button
   already says "View our Menu" — showing both is redundant. On the
   menu page itself the button swaps to "Reservations", so the Menu
   nav item stays visible there.
   Target the <li> via :has() so the flex gap collapses too. */
body:not(.page-the-menu) .wp-block-navigation-item:has(a[href*="/the-menu"]) {
	display: none;
}

/* Font smoothing — Sorts Mill Goudy renders thicker on macOS by
   default because Chrome/Safari use subpixel antialiasing. Switch to
   grayscale antialiasing so the on-screen weight matches the Figma
   reference (which previews with grayscale smoothing). */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Button padding + optical centering.
   The is-style-outline block variation ships its own em-based
   padding (0.667em top/bottom), which bypasses theme.json and gives
   outline buttons a different height than solid buttons. Force both
   variations to the same 12px/spacing-sm padding so Book a Table and
   Get Directions line up with View our Menu.

   Sorts Mill Goudy ships with asymmetric metrics (≈65% ascent, ≈35%
   descent), so even with equal padding the caps sit too high and
   leave extra space underneath. text-box-trim crops the font's
   reserved half-leading to cap-top / alphabetic-baseline so the
   visible glyphs are what the padding centers. Modern browsers
   only; unsupported browsers fall back to the pre-trim layout. */
.wp-element-button {
	font-size: 1rem !important; /* 16px everywhere for readability */
	padding: 0.75rem var(--wp--preset--spacing--sm);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Instagram row — the paragraph next to the social icon sits low
   because of Sorts Mill Goudy's asymmetric metrics. Trim the same
   half-leading so the text's cap/baseline box centers against the
   icon instead of hugging the top. */
.wp-block-social-links + p {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Zero root flow gap around template parts so their own padding
   is the source of truth for spacing. */
main.wp-block-group,
footer.wp-block-template-part,
footer[class*="wp-block-template-part"] {
	margin-top: 0;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Desktop + tablet layer. Everything below this marker is additive
   on top of the mobile-first rules above — the mobile experience
   (<768px) stays untouched.
   Two breakpoints are wired even if tablet and desktop share the
   same design today, so later tweaks can target one without the
   other. Keep mobile-only rules outside the media queries.
   --------------------------------------------------------------- */

/* Push WP's core/navigation hamburger→inline switch up from its
   hardcoded 600px to 654px — at tight tablet widths the inline
   nav crowds the header. Between 600 and 654 we force the
   hamburger back on and hide the inline container. */
@media (min-width: 600px) and (max-width: 653.98px) {
	.brook-header .wp-block-navigation__responsive-container-open {
		display: flex;
	}

	.brook-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

/* Reorder so nav items sit before "View our Menu" whenever the
   inline nav is actually shown — i.e. from 654px up, matching the
   override above. Below that the hamburger is visible and the
   button-then-hamburger DOM order reads correctly. */
@media (min-width: 654px) {
	.brook-header .brook-header__actions .wp-block-navigation {
		order: -1;
	}
}

@media (min-width: 768px) {

	/* Hero scope — override the preset font-size variables the WP
	   utility classes read from, so .has-3xl-font-size and
	   .has-xl-font-size render at the Figma desktop scale without
	   fighting !important on the utility-class rules. */
	body.home .wp-block-post-content > .wp-block-group.alignfull:first-child {
		--wp--preset--font-size--3-xl: 3rem;  /* 48px, Figma display-lg */
		--wp--preset--font-size--xl: 1.5rem;  /* 24px, Figma display-xs */
		padding-top: 9.375rem !important;     /* 150px */
		padding-bottom: 9.375rem !important;
	}

	body.home .wp-block-post-content > .wp-block-group.alignfull:first-child h1 {
		line-height: 1.25; /* 60/48 */
		letter-spacing: -0.02em;
		max-width: 828px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Mobile forces a line break between "The" and "Brook & Badger".
	   Desktop wants the title on one line, so hide the br. The
	   pattern/content has a space before the br so the two words
	   read "The Brook & Badger" when the break is hidden. */
	body.home .wp-block-post-content > .wp-block-group.alignfull:first-child h1 br {
		display: none;
	}

	/* Subtitle: 24px / 32px, narrower column. The existing <br>
	   break in the copy still lands in the right place. */
	body.home .wp-block-post-content > .wp-block-group.alignfull:first-child .has-xl-font-size {
		line-height: 1.333; /* 32/24 */
		max-width: 488px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Hero CTAs: 16px font, 18px padding on all sides.
	   The .has-sm-font-size utility uses !important, so we override
	   the variable it reads from inside the hero scope. */
	body.home .wp-block-post-content > .wp-block-group.alignfull:first-child .wp-block-buttons {
		--wp--preset--font-size--sm: 1rem;
	}

	body.home .wp-block-post-content > .wp-block-group.alignfull:first-child .wp-element-button {
		padding: 18px;
	}

	/* Header — swap the hamburger for inline nav items. */
	.brook-header {
		padding-top: var(--wp--preset--spacing--xl);
	}

	/* Logo scales up on desktop to match the live site (90×82). */
	.brook-header .wp-block-site-logo img {
		width: 90px;
		height: auto;
	}

	/* Inline nav items at Figma text-lg (18px), 32px between items.
	   overlayMenu:"mobile" on the navigation block already hides
	   the hamburger and shows the list above the internal breakpoint
	   at 600px. */
	.brook-header .wp-block-navigation {
		--wp--style--block-gap: 2rem;
	}

	.brook-header .wp-block-navigation .wp-block-navigation-item {
		font-size: 1.125rem;
	}

	.brook-header .wp-block-navigation .wp-block-navigation-item a {
		padding: 0;
	}

	/* Larger "View our Menu" button on desktop — 16px font, bigger
	   padding from the Figma header button. Same variable-override
	   trick as the hero buttons. */
	.brook-header .wp-block-buttons {
		--wp--preset--font-size--sm: 1rem;
	}

	.brook-header .wp-element-button {
		padding: 15px var(--wp--preset--spacing--sm);
	}

	/* Scale body text (lg) from 18px to 21px on desktop to match
	   the live brookandbadger.com rendering. This affects all
	   has-lg-font-size elements: opening hours, footer address, etc.
	   Overrides via the CSS variable so the WP utility class with
	   !important picks it up automatically. */
	:root {
		--wp--preset--font-size--lg: 1.3125rem; /* 21px */
	}
}

@media (min-width: 1024px) {
	/* Reserved for desktop-only tweaks. Tablet and desktop share
	   the same layout today; any differences (tighter max-widths,
	   different spacing, etc.) land here. */
}

/* Mobile menu overlay — mirror the brookandbadger.com live site:
   full-screen base-coloured backdrop, items vertically and
   horizontally centered, Sorts Mill Goudy at 21px with a slight
   letter-spacing, no link underlines. The site logo stays visible
   above the overlay (z-index trick) and the "View our Menu" button
   hides while the menu is open so only the logo and the × remain
   in the corners. */
/* Selector matches WP's own injected rule
   .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open
   so we override its forced white background. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	align-items: center;
	justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	align-items: center;
	justify-content: center;
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100%;
	/* Override the 32px nav block-gap (spacing-lg, set on the
	   <wp:navigation> block for the desktop inline menu) — in the
	   overlay we want the items stacked tight, with each item's
	   12px top/bottom padding being the only spacing. */
	gap: 0 !important;
	row-gap: 0 !important;
	/* Pull the items above the page center to mirror the live site
	   composition: items start ~174px from the viewport top, sit
	   above the geometric centre. The live layout uses a header
	   section + flow positioning; we approximate the same visual
	   centre with a generous margin-bottom that pushes the centered
	   ul upward. */
	margin-bottom: 164px;
}

/* Each li shrinks to its text width so align-items: center on the
   ul actually centers the item to the viewport, not just within a
   149px column constrained by the widest sibling. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: auto;
	align-self: center;
}

/* Close × — sit exactly where the hamburger sits when the menu is
   closed, so opening the menu just swaps the icon in place rather
   than jumping it. position: fixed because the close's natural
   absolute container (the responsive-dialog) sits offset inside the
   centered overlay.

   Hamburger sits at top = (admin bar height) + 32 (header pt) + 19
   (half of button row height to the icon centre) − 12 (half close
   icon height) ≈ admin bar + 51. For non-logged-in visitors the
   admin bar is absent, so 51 is the base; the .admin-bar selector
   adds the bar's height (32 desktop, 46 mobile per WP). */
/* Close × aligns with the header button row. Base inset is 51px
   (half button-row height minus half close-icon height). The
   admin bar, if pinned at the top of the viewport, adds its own
   height — measured live via --brook-top-inset (set by
   sticky-header.js) because on mobile (<600px) WP switches the
   admin bar to position:absolute and it scrolls away. */
.wp-block-navigation__responsive-container-close {
	position: fixed;
	top: calc(var(--brook-top-inset, 0px) + 51px);
	right: 16px;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	padding: 12px 0;
	text-align: center;
	letter-spacing: 0.03em;
	font-size: 21px;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	color: inherit;
	text-decoration: none;
}

/* Core/navigation ships its overlay at z-index: 100000, which forces
   anything competing with it into the six-figure range. Bring it
   down to something sane so the rest of the stack can use normal
   values. */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 50;
}

/* Keep the site logo visible above the overlay so the corners read
   logo / close × — same composition as the live site. Applies to
   both the original header and the JS-added sticky clone (both
   carry .brook-header). WP core puts has-modal-open on <html>. */
html.has-modal-open .brook-header .wp-block-site-logo {
	position: relative;
	z-index: 60;
}

/* Hide the "View our Menu" button while the overlay is open so it
   doesn't sit on top of the menu list. */
html.has-modal-open .brook-header .wp-block-buttons {
	display: none;
}

/* Navigation hamburger icon — replace default core/navigation icon with
   the hamburger (menu-04) from the design system. */
.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask-image: url("assets/images/menu-04.svg");
	mask-image: url("assets/images/menu-04.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* ----------------------------------------------------------
   Sticky header (hide-on-scroll-down, show-on-scroll-up)

   A clone of .brook-header (created by sticky-header.js and
   tagged .brook-sticky-header) lives permanently in the DOM,
   fixed to the top and translated off-screen. Sliding it in/out
   via transform keeps the original header untouched, so nothing
   in normal flow moves when sticky mode engages — no layout snap.

   The mobile-overlay hamburger inside the clone is hidden — it
   wouldn't re-bind to WP's Interactivity runtime anyway, and the
   real nav is still reachable by scrolling back to the top.
   ---------------------------------------------------------- */
/* Animated via `top` (not transform) so the clone doesn't create a
   new containing block — WP's mobile nav overlay uses position:fixed
   relative to the viewport, which `transform: …` on an ancestor
   would silently reparent. JS owns the `top` value: off-screen when
   hidden, measured offset (admin-bar aware) when visible. */
.brook-sticky-header {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 40;
	background-color: var(--wp--preset--color--base);
	transition: top 250ms ease;
}