/**
 * WPminty Frontend Styles
 *
 * @package WPminty
 * @since 0.1.0
 */

/**
 * Base Styles
 * These styles complement theme.json settings
 */

/* Smooth scrolling for anchor links */
html {
	scroll-behavior: smooth;
}

/* Focus visible styles for accessibility */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Ensure a visible focus ring for keyboard users only. Using :focus-visible
   (not :focus) keeps the outline off mouse clicks while preserving keyboard
   accessibility. */
:where(.wp-site-blocks *:focus-visible) {
	outline-width: 2px;
	outline-style: solid;
}

:where(.wp-site-blocks) > *:nth-child(-n+2) {
  margin-block-start: 0;
}

/* Selection color */
::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

/**
 * Typography Enhancements
 */

/* Improve text rendering */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Prevent long words from breaking layout */
p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Link style refinements
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/* Change the position of the more block on the front */
.more-link {
	display: block;
}

/**
 * Block Style Enhancements
 * Note: Per-block styles (image, video, embed, table) are loaded on demand
 * from assets/styles/ via wp_enqueue_block_style().
 */

/* Increase the bottom margin on submenus for visible outline */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase outline offset on parent menu items */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from submenus to prevent overflow */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/**
 * Navigation dropdown (submenu) overrides — real-stylesheet specificity.
 *
 * The core navigation stylesheet (wp-includes/blocks/navigation/style.css)
 * targets submenu containers with real, moderately specific selectors:
 *   .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container      -> (0,3,0) background + border
 *   .wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container      -> (0,3,0) color
 *   .wp-block-navigation .has-child:not(.open-on-click):focus-within > …__submenu-container -> (0,6,0) min-width: 200px
 *
 * theme.json `css` is compiled to `:root :where(…)`, and :where() carries ZERO
 * specificity, so declarations authored there can never beat core no matter how
 * many classes are repeated. These overrides therefore live in the real theme
 * stylesheet, where selector specificity counts. They apply the theme's default
 * dropdown design to every navigation block and consume the custom properties
 * injected on the <nav> by NavigationMenuStyles, so per-block settings override
 * the defaults simply by setting the matching variable.
 */

/* Menu item text colour. Core's navigation stylesheet forces the item link to
   `color: inherit` at (0,3,0), which beats the theme.json `elements.link` rule
   (compiled to `:root :where(...)`, (0,1,0)). Top-level links therefore inherit
   the surrounding body colour instead of the intended contrast (only submenu
   links work, because the submenu container below sets its own colour). Re-
   assert contrast here at (0,4,0); the active/current ((0,5,0)) and hover
   (!important) rules still win when set. */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wpminty-nav-text, var(--wp--preset--color--contrast));
}

/* Container surface — (0,4,0) beats core's (0,3,0) background/border/color. */
.wp-block-navigation .has-child:not(.open-always) > .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wpminty-nav-dd-bg, var(--wp--preset--color--base));
	border-style: var(--wpminty-nav-dd-border-style, solid);
	border-width: var(--wpminty-nav-dd-border-width, 1px);
	border-color: var(--wpminty-nav-dd-border-color, var(--wp--preset--color--divider));
	border-radius: var(--wpminty-nav-dd-radius, 5px);
	box-shadow: var(--wpminty-nav-dd-shadow, var(--wp--preset--shadow--md));
	padding: var(--wpminty-nav-dd-padding, 0);
	z-index: 100;
}

/* Vertical offset from the top-level bar + a transparent bridge so the pointer
   can cross the gap without collapsing the menu. The top-level list
   (.wp-block-navigation__container) is nested inside the responsive-container
   wrappers, so a direct child (>) chain from .wp-block-navigation never matches;
   a descendant combinator to the container is required. Because nested submenus
   live under another __submenu-container (not the container UL), this stays
   first-level only, leaving core's side positioning for deeper levels intact.
   (0,5,0) beats core's top:100% (0,3,0) and the .has-background variant (0,4,0). */
.wp-block-navigation .wp-block-navigation__container > .has-child:not(.open-always) > .wp-block-navigation__submenu-container {
	top: calc(100% + var(--wpminty-nav-dd-offset, 0px));
}
.wp-block-navigation .wp-block-navigation__container > .has-child:not(.open-always) > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--wpminty-nav-dd-offset, 0px);
	background: transparent;
}

/* Dropdown min-width in every open state — four repeated container classes give
   (0,7,0), beating core's :focus-within rule (0,6,0). */
.wp-block-navigation .has-child:not(.open-always) > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	min-width: var(--wpminty-nav-dd-min-width, 200px);
}

/* Submenu item rounding, hover surface and optional divider. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--wpminty-nav-dd-item-radius, 2px);
	font-size: var(--wpminty-nav-dd-item-font-size, inherit);
}
/* Submenu item padding — matches core's selector plus one repeated class to
   reach (0,6,0), beating core's (0,5,0) `padding: 0.5em 1em` rule. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding: var(--wpminty-nav-dd-item-padding, 0.5em 1em);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wpminty-nav-dd-item-hover-bg, var(--wp--preset--color--surface));
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item + .wp-block-navigation-item {
	border-top: var(--wpminty-nav-dd-divider-width, 1px) var(--wpminty-nav-dd-divider-style, solid) var(--wpminty-nav-dd-divider-color, var(--wp--preset--color--divider));
}

/* Mobile overlay (is-menu-open): flatten dropdowns back to inline blocks so the
   desktop card styling above never leaks into the overlay. The submenu reset
   uses (0,8,0) to outrank the (0,7,0) min-width rule and core's mobile rules.
   Overlay text/background colour is already handled by core's !important rules. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	border: 0;
	box-shadow: none;
	border-radius: 0;
	min-width: 0;
	padding: 0 0 0 var(--wp--preset--spacing--40);
}

/**
 * Transition Utilities
 */
a,
button,
input,
.wp-block-button__link {
	transition: color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease),
		background-color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease),
		border-color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease),
		box-shadow var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}

/**
 * Print Styles
 */
@media print {
	.site-header,
	.site-footer,
	.wp-block-navigation {
		display: none;
	}

	body {
		font-size: 12pt;
		line-height: 1.5;
	}

	a[href]::after {
		content: " (" attr(href) ")";
	}
}
