/*
 * mod_simplemobilemenu
 * Bootstrap-style mobile navbar (logo left, hamburger right), optionally
 * fixed to the top of the viewport on scroll (module option "Sticky
 * Navbar", default on -- see .smm-bar--sticky below; it uses
 * `position: fixed`, not CSS `position: sticky` -- see the comment on that
 * rule for why). The hamburger opens the menu in a genuine
 * Bootstrap modal (full-screen) rather than a collapsing dropdown panel
 * -- the fade/slide transition, backdrop, and sizing all come from the
 * site's own Bootstrap CSS via the standard .modal / .fade / .show /
 * .modal-dialog / .modal-backdrop classes. This file only themes them
 * (dark background) and styles the menu list itself; it does not
 * redefine any of Bootstrap's transition or positioning rules.
 *
 * IMPORTANT: unlike Bootstrap's own JS, this module's backdrop element
 * is static markup (see tmpl/default.php), not dynamically inserted and
 * removed. Bootstrap's stock .modal-backdrop CSS has no `display: none`
 * in its closed state (it relies on the JS never inserting it into the
 * DOM at all until shown) -- left as-is, a static copy of it would sit
 * there as an invisible but fully interactive full-viewport layer,
 * blocking every click on the page even while "closed". The
 * `.smm-modal__backdrop { display: none; }` / `.show { display: block; }`
 * rules below exist specifically to prevent that.
 *
 * All visual choices below are CSS custom properties on .smm-bar /
 * .smm-modal so a site's template CSS can override them (either by
 * redeclaring these variables on a wrapping selector, or by overriding
 * the classes directly). Per-item "button" styling (e.g. an "Order
 * Online" CTA) is NOT hardcoded here -- it comes from whatever CSS class
 * the admin adds via each menu item's own "Link CSS Style / Class" field
 * (Page Display tab), which is printed straight onto the <a>. Add
 * matching rules for that class in your template/site CSS, e.g.:
 *
 *   .smm-menu__link.btn-cta { background:#f5c344; color:#1a1a1a; border-radius:4px; }
 *
 * This module relies on Bootstrap's own `.visually-hidden` utility class
 * for screen-reader-only text, so it isn't redefined here -- make sure
 * your site's Bootstrap CSS (and, importantly for this revision, its
 * .modal / .btn-close component CSS) is loaded on any page this module
 * appears on.
 */

.smm-bar,
.smm-modal {
	--smm-bg: #171717;
	--smm-fg: #f5f5f5;
	--smm-muted: rgba(245, 245, 245, 0.65);
	--smm-border: rgba(245, 245, 245, 0.12);
	--smm-gap: 1.25rem;
	--smm-z: 1040;
}

.smm-bar {
	position: relative;
	z-index: var(--smm-z);
}

/* Applied only when the "Sticky Navbar" module option is on (default);
   see tmpl/default.php $isSticky. Left off, .smm-bar stays position:relative
   above and scrolls away with the rest of the page as normal.

   This deliberately uses `position: fixed`, not `position: sticky`. Sticky
   positioning is bounded by the element's own containing block (in effect
   its parent), and Joomla/Astroid wrap this module in a chain of divs that
   are all shrink-wrapped tight to the navbar's own ~50px height (the real
   page content lives in a sibling section, not a taller ancestor) -- so a
   sticky navbar here would only stay "stuck" for the first ~50px of scroll
   and then scroll away with the page, which is exactly the bug this fixes.
   `position: fixed` anchors to the viewport instead and isn't affected by
   any of that. Fixed removes the bar from normal flow, so `.smm-bar__spacer`
   (below, and only rendered in the template when sticky is on) reserves an
   equal amount of space where the bar used to sit, sized by JS
   (simplemobilemenu.js) to match the bar's real rendered height -- this
   keeps working correctly even if the navbar's height changes (e.g. a
   taller admin-uploaded logo) without needing a hardcoded value here. */
.smm-bar--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}

.smm-bar__spacer {
	display: block;
	width: 100%;
	/* height is set at runtime by simplemobilemenu.js to match .smm-bar's
	   real rendered height; 0 here is just a safe default before JS runs. */
	height: 0;
}

/* ---------- Navbar (logo left, hamburger right) ---------- */

.smm-navbar {
	background: var(--smm-bg);
	color: var(--smm-fg);
	padding: 0;
}

.smm-navbar__inner {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0.5rem 1rem;
}

.smm-navbar__brand,
.smm-modal__brand {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* Shared by the navbar logo and the modal header's own copy of it. */
.smm-logo-img {
	display: block;
	max-height: 2.25rem;
	width: auto;
}

/* ---------- Toggler (hamburger, morphs into an X while open) ---------- */

.smm-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	background: transparent;
	border: 0;
	padding: 0.5rem;
	color: inherit;
	line-height: 1;
	cursor: pointer;
	outline: none;
	box-shadow: none;
}

.smm-toggle:focus,
.smm-toggle:focus-visible,
.smm-toggle:active {
	outline: none;
	box-shadow: none;
}

.smm-toggle__icon {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 1.5rem;
	height: 1.1rem;
}

.smm-toggle__icon span {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 1px;
	transition: transform 180ms ease, opacity 180ms ease;
}

.smm-toggle[aria-expanded="true"] .smm-toggle__icon span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.smm-toggle[aria-expanded="true"] .smm-toggle__icon span:nth-child(2) {
	opacity: 0;
}

.smm-toggle[aria-expanded="true"] .smm-toggle__icon span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Modal theming (structure/position/transition all come from Bootstrap) ---------- */

.smm-modal__content {
	background: var(--smm-bg);
	color: var(--smm-fg);
	border: 0;
	border-radius: 0;
}

.smm-modal__header {
	border-bottom-color: var(--smm-border);
}

.smm-modal__close {
	opacity: 0.85;
}

.smm-modal__close:hover,
.smm-modal__close:focus {
	opacity: 1;
	box-shadow: none;
}

/* See the file-level note above: closed by default, JS reveals it. */
.smm-modal__backdrop {
	display: none;
}

.smm-modal__backdrop.show {
	display: block;
}

/* Body scroll lock while the modal is open. A dedicated class (rather
   than relying on Bootstrap's own body.modal-open, which this module
   doesn't assume is wired up the same way since we don't use Bootstrap's
   JS) so this never conflicts with any other real Bootstrap modal the
   page might also use. */
html.smm-modal-open {
	overflow: hidden;
}

/* ---------- Menu list ---------- */

.smm-panel__nav {
	padding: 1rem 0 2rem;
}

/* display:flex + flex-direction:column (not the default block/list-item
   flow) is deliberate, not cosmetic: since v1.3.2 an item's Astroid
   "Custom Menu Class" (see tmpl/default.php) can land Bootstrap's own
   .btn class on a .smm-menu__item <li>, and .btn sets display:inline-block.
   In normal block flow that turns each such <li> into an inline-level box,
   so two of them back-to-back (e.g. "Private Dining" / "Reservations",
   both CTAs on this site) render side-by-side on one line instead of each
   getting its own row -- confirmed live on https://dev.tavernhousekb.com/.
   A flex column always lays out its direct children one per line
   (browsers "blockify" every flex item's outer display for layout
   purposes, regardless of inline/inline-block set elsewhere), while
   align-items:center keeps each item sized to its own content -- exactly
   like the old inline-block/list-item boxes -- rather than stretching
   every item to the full row width. Net effect: identical visual layout
   to before, but immune to whatever display value a carried-over class
   happens to set. */
.smm-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* font-size, font-weight, letter-spacing, text-transform, text-decoration,
   color, and margin are deliberately NOT set on menu items below (removed
   at the user's request, 2026-09-24 -- styled manually in the site's own
   CSS instead). Only the structural rules this module actually depends on
   remain: `display: inline-block` on .smm-menu__link/.smm-menu__heading
   (removing it would break more than the look -- see the flex-column note
   above, which relies on every item's outer box blockifying correctly)
   and `cursor: default` on .smm-menu__heading (so heading items still read
   as non-interactive, not a link). `--smm-gap` and `--smm-muted` (declared
   on .smm-bar/.smm-modal above) are no longer referenced by anything now
   that the margin/color rules that used them are gone -- harmless to leave
   declared, or remove them too if you don't plan to reuse them.
   NOTE for whoever adds spacing back: .smm-menu is a flex column (see
   above), and flex does NOT collapse margins between siblings the way
   normal block flow does -- two adjacent items' margins simply add
   instead of collapsing to the larger one. Keep that in mind, especially
   around heading -> child-item and CTA -> CTA transitions. */
.smm-menu__link,
.smm-menu__heading {
	display: inline-block;
}

.smm-menu__heading {
	cursor: default;
}

/* Icon-only items (e.g. Facebook/Yelp/Instagram/Youtube) -- the visible
   label is swapped for an <i> icon-font glyph in tmpl/default.php whenever
   the menu item has an icon class set (Astroid's own "Icon" field on the
   item's Page Display tab, params.astroid_menu_options.icon -- the same
   place the site's own desktop nav gets its social icons from). The
   accessible name (e.g. "Facebook") is kept for screen readers via
   Bootstrap's .visually-hidden on a span next to the icon. The
   .smm-menu__link--icon class is still printed on these items' <a> as a
   styling hook (e.g. for a larger icon glyph size) -- this module no
   longer sets any size/spacing on it itself; style it directly. */

/* Progressive enhancement: if JS never runs, the modal can never be
   opened (Bootstrap's own .modal CSS defaults to display:none with no
   JS to ever add .show), so show the menu inline & static instead of
   hiding it entirely. The backdrop stays hidden either way. Likewise the
   fixed/sticky navbar (see .smm-bar--sticky above) depends on JS to size
   its spacer, so fall back to a normal, non-fixed navbar too. */
html:not(.smm-js) .smm-modal {
	position: static;
	display: block;
	overflow: visible;
}

html:not(.smm-js) .smm-modal .modal-dialog {
	transform: none;
	margin: 0;
	max-width: none;
	height: auto;
}

html:not(.smm-js) .smm-toggle {
	display: none;
}

html:not(.smm-js) .smm-bar--sticky {
	position: relative;
	top: auto;
}

html:not(.smm-js) .smm-bar__spacer {
	display: none;
}