Add Mobile Menu with lifecycle-phase accordion for Services

assets/css/animations.css

@@ -1485,6 +1485,184 @@
     transition: none;
   }
 }
+/********** Mobile Menu (Ollie Menu Designer mobileMenuSlug drawer) **********/
+/*
+ * Logo row + close button. The close button is WP core's own
+ * .wp-block-navigation__responsive-container-close — rendered as a sibling before the injected
+ * mobileMenuSlug content, not part of this template part — so it can only be reached and aligned
+ * via a global selector, not through markup here. Core's default top:0/right:0 plus the content's
+ * default padding-top: calc(2rem + 24px) (wp-includes/blocks/navigation/style.css) is what was
+ * producing the oversized gap above the logo; both are overridden to the same spacing token here
+ * so the logo row and the close button land on the same line. Styled with the same circular
+ * icon-button language as the header's search/theme-toggle buttons
+ * (styles/blocks/groups/header-icon-button.json) for visual consistency.
+ *
+ * Scoped under .site-header: this theme only has the one core/navigation instance (the header's),
+ * but these are otherwise generic core class names that would restyle any Navigation block's
+ * overlay drawer anywhere on the site if left unscoped.
+ */
+.site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
+  padding-top: var(--wp--preset--spacing--20);
+}
+
+.site-header .wp-block-navigation__responsive-container-close {
+  position: absolute;
+  top: var(--wp--preset--spacing--20);
+  right: var(--wp--preset--spacing--20);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 44px;
+  min-block-size: 44px;
+  padding: var(--wp--preset--spacing--10);
+  border: 1px solid var(--wp--custom--color--border--card);
+  border-radius: var(--wp--preset--border-radius--500);
+  background-color: color-mix(in srgb, var(--wp--custom--color--surface--highlight) 4%, transparent);
+  transition: background-color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard), border-color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard);
+}
+.site-header .wp-block-navigation__responsive-container-close svg {
+  inline-size: 20px;
+  block-size: 20px;
+}
+.site-header .wp-block-navigation__responsive-container-close:hover, .site-header .wp-block-navigation__responsive-container-close:focus-visible {
+  background-color: var(--wp--custom--color--surface--card-raised);
+  border-color: var(--wp--custom--color--phase--create);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .site-header .wp-block-navigation__responsive-container-close {
+    transition: none;
+  }
+}
+/*
+ * core/details already ships a full card-style accordion (border, background, chevron, hover,
+ * [open] state) globally via styles/presets/blocks/core-details.json + _details-motion.scss. The
+ * mobile drawer wants that same disclosure mechanism but flattened into a full-width list row
+ * (no individual card border/background/shadow, no hover lift) with a divider between siblings
+ * instead — none of which is expressible in theme.json, so it's layered on here rather than
+ * duplicating the chevron/open logic that already exists.
+ */
+.mobile-menu > .mobile-menu-accordion,
+.mobile-menu > .mobile-menu-link-row {
+  border: none;
+  border-bottom: 1px solid var(--wp--custom--color--border--card);
+  border-radius: 0;
+}
+.mobile-menu > .mobile-menu-accordion:last-child,
+.mobile-menu > .mobile-menu-link-row:last-child {
+  border-bottom: none;
+}
+
+.mobile-menu > .mobile-menu-accordion {
+  background: none;
+  box-shadow: none;
+}
+.mobile-menu > .mobile-menu-accordion:hover, .mobile-menu > .mobile-menu-accordion[open], .mobile-menu > .mobile-menu-accordion[open]:hover {
+  background: none;
+  border-color: var(--wp--custom--color--border--card);
+  box-shadow: none;
+}
+.mobile-menu > .mobile-menu-accordion:last-child {
+  border-bottom: none;
+}
+.mobile-menu > .mobile-menu-accordion {
+  /*
+   * Fixed min-block-size (rather than relying on padding + line-height parity with
+   * .mobile-menu-link-row below) so every top-level row — whether a <summary> with its chevron
+   * or a plain <a> — renders at the exact same height regardless of small content differences.
+   * padding-inline-end keeps a little clearance for the chevron: zeroing it entirely (matching
+   * the row's flush-left text) let the rotated 10px chevron's diagonal corners get clipped by
+   * .wp-block-details's own overflow:hidden.
+   */
+}
+.mobile-menu > .mobile-menu-accordion > summary {
+  min-block-size: 3rem;
+  padding-inline: 0 var(--wp--preset--spacing--10);
+  padding-block: 0;
+  font-size: var(--wp--preset--font-size--200);
+  font-weight: var(--wp--custom--typography--font-weight--semibold);
+}
+.mobile-menu > .mobile-menu-accordion > :where(:not(summary)) {
+  padding-inline: 0;
+}
+.mobile-menu > .mobile-menu-accordion[open] > summary {
+  border-bottom-color: var(--wp--custom--color--border--card);
+}
+.mobile-menu > .mobile-menu-accordion {
+  /*
+   * The card-style focus ring from _details-motion.scss's base :focus-within rule doesn't fit
+   * this flattened row (it draws a border-colour box-shadow meant for the bordered card look),
+   * so it's suppressed above — but that must not mean no focus indicator at all. :focus-visible
+   * on the summary itself restores a visible keyboard-focus outline instead.
+   */
+}
+.mobile-menu > .mobile-menu-accordion:focus-within {
+  box-shadow: none;
+}
+.mobile-menu > .mobile-menu-accordion > summary:focus-visible {
+  outline: 2px solid var(--wp--custom--color--focus--ring);
+  outline-offset: -2px;
+}
+
+.mobile-menu-link-row {
+  margin: 0;
+}
+.mobile-menu-link-row a {
+  display: flex;
+  align-items: center;
+  min-block-size: 3rem;
+  font-family: var(--wp--preset--font-family--heading);
+  font-size: var(--wp--preset--font-size--200);
+  font-weight: var(--wp--custom--typography--font-weight--semibold);
+  color: var(--wp--custom--color--text--default);
+  text-decoration: none;
+}
+.mobile-menu-link-row a:focus-visible {
+  outline: 2px solid var(--wp--custom--color--focus--ring);
+  outline-offset: -2px;
+}
+
+/*
+ * Footer CTAs (Book a consultation / Start a project): reuse the existing pill button styles,
+ * just stretched to the drawer's full width. No top border here — Contact (the row directly
+ * above) isn't actually :last-child of .mobile-menu once this buttons group follows it, so its
+ * own row divider already renders; adding one here too produced a doubled-up divider line.
+ */
+.mobile-menu-actions {
+  padding-block-start: var(--wp--preset--spacing--20);
+}
+.mobile-menu-actions .wp-block-button {
+  width: 100%;
+}
+.mobile-menu-actions .wp-block-button__link {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+/*
+ * Services accordion: phase groups are separated by dashed dividers rather than solid ones,
+ * keeping the lighter-weight hierarchy the desktop Services panel also uses between phase
+ * columns. core/separator has no "style: dashed" support declared in its block.json, so setting
+ * that via a block style attribute fails Gutenberg's save-output validation — the dashed look is
+ * applied here instead, against the plain default-attribute wp:separator markup.
+ */
+.mobile-menu-accordion-services hr.wp-block-separator {
+  margin-block: var(--wp--preset--spacing--10);
+  border-style: dashed;
+}
+
+.mobile-menu-brand {
+  min-block-size: 44px;
+  padding-block-end: var(--wp--preset--spacing--20);
+  border-block-end: 1px solid var(--wp--custom--color--border--card);
+}
+.mobile-menu-brand .wp-block-site-logo img {
+  display: block;
+  max-block-size: 32px;
+  inline-size: auto;
+}
+
 /********** Site Footer **********/
 /*
  * "LightSpeed notes" badge: a flex group with no explicit width constraint defaults to filling

functions.php

@@ -37,6 +37,10 @@ function ls_theme_setup() {
 	// Add support for editor styles.
 	add_theme_support( 'editor-styles' );
 
+	// Required for core/site-logo to render (used by the mobile menu's logo row); without this,
+	// the block outputs nothing even when a Site Logo is set via the Site Editor.
+	add_theme_support( 'custom-logo' );
+
 	// Enqueue editor styles. animations.css must be listed here (not just enqueued via
 	// enqueue_block_editor_assets) so the header/footer interactive-control CSS — the collapsed
 	// search field, the icon-toggle button shell — reliably reaches the Site Editor's iframed canvas.