/*
Theme Name: Shimna Consulting
Author: Shimna Consulting
Description: A custom WordPress block theme for Shimna Consulting — leadership development and executive coaching. Engineered for total dashboard editability: every section is restyleable from wp-admin with native block controls, no page builder.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shimna-consulting
*/

/*
 * Visible focus for keyboard users on any interactive element (links,
 * nav items, the logo link). Buttons additionally carry the theme.json
 * :focus outline. Uses the design-token focus treatment.
 */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/*
 * Utility applied through the block editor's Additional CSS class field,
 * so the owner can add or remove it from wp-admin: keeps a short figure
 * (e.g. the "3 disciplines" stat) on a single line in both portrait and
 * landscape orientations.
 */
.shimna-nowrap {
	white-space: nowrap;
}

/*
 * Enlarge the header title's tap target: pad the link on every side and
 * pull the same amount back with negative margin, so the hit area grows
 * without shifting the visual layout of the header row.
 */
header.wp-block-template-part .wp-block-site-title a {
	display: inline-block;
	padding: var(--wp--preset--spacing--20);
	margin: calc(-1 * var(--wp--preset--spacing--20));
}

/*
 * Core's root block gap inserts a 24px margin-block-start above the footer
 * template part on every page; the footer carries its own padding, so the
 * extra gap only opens a seam between the last section and the footer.
 */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/*
 * The header CTA button duplicates the Contact entry in the menu and
 * crowds narrow headers, so show it only in landscape view: hidden on
 * every portrait viewport (phone or tablet), visible on any landscape
 * one. CSS treats a square viewport as portrait, so "not landscape"
 * and this query match exactly.
 */
@media (orientation: portrait) {
	header.wp-block-template-part .wp-block-buttons {
		display: none;
	}
}

/*
 * Mobile navigation (below core's 600px overlay breakpoint): pin the menu
 * open toggle to the top right of the screen, and the overlay's close
 * toggle to the same coordinates, so the control does not jump when the
 * menu opens. Core makes .wp-block-navigation itself position:relative
 * (for submenu anchoring, unused in overlay mode), which would trap the
 * absolute toggle inside the tiny nav element — anchor the header wrapper
 * instead. The open toggle resolves against the header (which sits at the
 * top of the page); the close toggle resolves against the fixed full-screen
 * overlay, so the same offsets give the same on-screen position.
 */
@media (max-width: 599px) {
	header.wp-block-template-part > .wp-block-group {
		position: relative;
	}

	header.wp-block-template-part .wp-block-navigation.is-responsive {
		position: static;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog {
		position: static;
	}

	/*
	 * Both toggles keep the same top-right coordinates (so the control
	 * does not jump when the menu opens) and sit on the same line as the
	 * header text: the button box starts at the header's spacing-30 top
	 * padding and spans the 56px row set by the site logo, flex-centring
	 * the icon on the title's line.
	 */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		position: absolute;
		top: var(--wp--preset--spacing--30);
		right: var(--wp--preset--spacing--40);
		height: 56px;
		display: flex;
		align-items: center;
		z-index: 10;
	}

	/*
	 * On sub-600px landscape viewports the CTA stays visible (portrait
	 * hides it via the orientation rule above) while the nav is
	 * collapsed to the pinned toggle. Keep the button right-aligned
	 * whether it shares the title row or wraps beneath it, and clear
	 * the toggle's 24px icon plus a spacing-30 gap so the two never
	 * collide when they do share the row.
	 */
	header.wp-block-template-part
		.wp-block-group.alignwide
		> .wp-block-group:last-child {
		flex-grow: 1;
	}

	header.wp-block-template-part .wp-block-buttons {
		margin-left: auto;
		margin-right: calc(24px + var(--wp--preset--spacing--30));
	}

	/*
	 * Centre the open menu's options in the middle of the overlay, both
	 * axes. Core stacks them top-left with padding reserved for the close
	 * toggle; instead let every wrapper between the fixed overlay and the
	 * menu list fill the screen and centre its content, and space the
	 * options with a roomy gap. The close toggle is already pinned
	 * top-right above (z-index), so no clearance padding is needed. The
	 * header.wp-block-template-part prefix out-specifies core's overlay
	 * rules, which load after this stylesheet at equal specificity.
	 */
	header.wp-block-template-part
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-close,
	header.wp-block-template-part
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog,
	header.wp-block-template-part
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		flex: 1;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-top: 0;
	}

	header.wp-block-template-part
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--50);
		width: 80vw;
		flex-grow: 0;
	}

	/*
	 * Each option spans the full 80% menu width with its label centred,
	 * which also stretches the tap target across the band.
	 */
	header.wp-block-template-part
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		width: 100%;
		justify-content: center;
	}

	header.wp-block-template-part
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		width: 100%;
		text-align: center;
	}
}

/*
 * The theme itself declares no animation, but core block styles (e.g. the
 * navigation overlay) and future Global Styles edits may. Neutralise all
 * motion for users who ask for it (WCAG 2.3.3 / 2.2.2).
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}