/*
Theme Name: shitate
Theme URI: https://shitate.weblley.co.jp/
Author: weblley inc
Author URI: https://weblley.co.jp/
Description: shitate is a WordPress block theme for corporate and business websites, built around a typographic scale. Choose one of 8 standard type scale ratios, and every size on the site, from headings and body text to spacing, follows that single ratio, so pages look consistent without writing additional CSS. The theme fully supports Full Site Editing: the header, footer, and every template can be edited in the Site Editor. Colors work the same way. Set three colors (accent, base, and contrast) and they are applied across the whole site. Style variations and block patterns for common business uses are included. shitate was developed by a web production agency in Japan for sites that are handed over to clients and updated by them afterward. The settings are intentionally few, so builders can put a site together quickly and the people who maintain it are unlikely to break the design. Available in English and Japanese. See the demo sites at https://shitate.weblley.co.jp
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shitate
Tags: blog, portfolio, block-patterns, full-site-editing, block-styles, style-variations, wide-blocks, editor-style, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

shitate WordPress Theme, (C) 2026 weblley inc.
shitate is distributed under the terms of the GNU GPL.
*/

/*
 * Mobile menu: the overlay's close button sits exactly where the hamburger
 * is, whatever the header's height. assets/js/navigation-toggle.js records
 * the hamburger's viewport position as --shitate-nav-toggle-* on the
 * navigation block when the menu opens (and on resize).
 *
 * Two overlays exist in core:
 * 1. The default overlay (no .disable-default-overlay): core renders its own
 *    close button. The overlay is position: fixed at the viewport origin and
 *    core animates it in with a transform, so the button is positioned
 *    absolutely against the overlay (not fixed against the viewport): it
 *    rides along with the fade-in and lands on the hamburger. The overlay
 *    gets padding-top so the menu starts below the button.
 * 2. The custom Navigation Overlay template part (WP 7.1+, marked with
 *    .disable-default-overlay): the site owner designs the overlay and
 *    places the Close block themselves, so the theme leaves the layout alone
 *    and only nudges that Close block onto the hamburger with a translate
 *    (--shitate-nav-close-dx/dy, measured by the same script). A transform
 *    does not affect layout, so the owner's spacing is preserved.
 * The fallbacks mirror core's default overlay padding for the no-JS case.
 * The extra .wp-block-navigation ancestor outranks core's inline block CSS.
 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-close {
	position: static;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: var(--shitate-nav-toggle-top, 1rem);
	right: var(--shitate-nav-toggle-right, 1rem);
	margin: 0;
	padding: 0;
}

/* Default overlay: start the menu content below the close button. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding-top: calc(var(--shitate-nav-toggle-top, 1rem) + var(--shitate-nav-toggle-size, 1.5rem) + var(--st-space-m, 1rem));
}

/* Custom overlay template part: move its Close block onto the hamburger. */
.wp-block-navigation .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation-overlay-close {
	translate: var(--shitate-nav-close-dx, 0px) var(--shitate-nav-close-dy, 0px);
}

/*
 * Interaction: everything with a hover state eases with the same
 * --st-transition (tokens.css, 0.2s). Zero specificity, so a block's own
 * transition or the owner's CSS wins; reduced-motion users get none (see
 * assets/css/reset/reset.css).
 */
:where(a, button, summary, .wp-element-button, .wp-block-button__link, input[type="submit"], input[type="button"], input[type="reset"]) {
	transition: var(--st-transition, 0.2s);
}