/**
 * Theme Name: OH MY WEB Child
 * Template:   kadence
 * Version:    0.1.0
 * Author:     OH MY WEB!
 * Description: Kadence child theme for oh-my-web.com. Applies Vercel Web Interface Guidelines fixes.
 */

/* prefers-reduced-motion: pause the hero background gradient + soft-kill other transitions. */
@media (prefers-reduced-motion: reduce) {
	.kadence-column10_06e29a-a1 { animation: none !important; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Parent theme sets body.hide-focus-outline which strips :focus outline globally.
   Restore a visible focus ring for keyboard users via :focus-visible. */
.hide-focus-outline a:focus-visible,
.hide-focus-outline button:focus-visible,
.hide-focus-outline input:focus-visible,
.hide-focus-outline select:focus-visible,
.hide-focus-outline textarea:focus-visible,
.hide-focus-outline summary:focus-visible,
.hide-focus-outline [tabindex]:focus-visible {
	outline: 2px solid var(--global-palette1, #006cff);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Sticky header would otherwise cover in-page heading anchors. */
:is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: 6rem; }

/* Tabular figures where numbers line up. */
.wp-block-table td,
.price, .amount,
.woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* Prevent widows in headings + prettier paragraph wrap. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Kill 300ms tap delay on interactive elements. */
button, .button, .wp-block-button__link,
input[type="button"], input[type="submit"],
a[role="button"], a.button { touch-action: manipulation; }

/* Contain overscroll inside the mobile drawer so parent scroll doesn't chain. */
#mobile-drawer, .drawer-inner,
.kadence-modal, .kadence-modal-content { overscroll-behavior: contain; }

/* Small visual bump for the icon-only logout link (⏻). */
a[href$="/logout/"], a[href$="/logout"] {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* Footer address: content is currently in a single <h2> with many <br> — until it's
   edited in wp-admin, at least give the placeholder a readable rhythm and stop it
   from looking like a heading. */
.site-footer h2.kt-adv-heading91789e-1a {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--global-palette5, #5f5f5f);
}

/* Brand tokens should not wrap awkwardly mid-word. */
.brand, .site-branding, [translate="no"] { hyphens: none; }

/* DNS Manager — NS records that resolve to our own infra get a friendly chip
   instead of showing the upstream vendor hostname. Raw value stays in the tooltip. */
.omw .dns-rec-val.dns-rec-val-our {
	display: inline-block;
	background: #e0f2fe;
	color: #0369a1;
	border: 1px solid #bae6fd;
	border-radius: 10px;
	padding: 0 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
}

/* Menu-item icons — SVG prepended to the label via _omw_menu_icon meta.
   Icon inherits currentColor so it re-tints on hover/current-menu automatically. */
.menu-item .omw-menu-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	margin-right: 0.45em;
	flex-shrink: 0;
}
.menu-item .omw-menu-label { vertical-align: middle; }
/* Anchor already flexes on the mobile drawer — icons need to sit inline. */
.mobile-navigation .menu-item > a { display: inline-flex; align-items: center; }

/* Nav item group separators. Two ways to insert one:
   1. Click "+ Add Spacer to Menu" in Appearance → Menus (recommended).
   2. Add class `nav-group-start` to a menu item's CSS Classes field.
   Both render the same look. */

/* Desktop primary nav — spacer is a thin vertical rule. */
.main-navigation .primary-menu-container > ul > li.menu-item.menu-spacer,
.main-navigation .primary-menu-container > ul > li.menu-item.nav-group-start {
	position: relative;
}
.main-navigation .primary-menu-container > ul > li.menu-item.menu-spacer > .menu-spacer-inner {
	display: inline-block;
	width: 1px;
	height: 1.4em;
	margin: 0 0.5rem;
	background: currentColor;
	opacity: 0.2;
	vertical-align: middle;
}
.main-navigation .primary-menu-container > ul > li.menu-item.nav-group-start {
	margin-left: 1.5rem;
}
.main-navigation .primary-menu-container > ul > li.menu-item.nav-group-start::before {
	content: "";
	position: absolute;
	left: -0.75rem;
	top: 25%;
	bottom: 25%;
	width: 1px;
	background: currentColor;
	opacity: 0.2;
}

/* Mobile drawer — spacer is a top-border gap. */
.mobile-navigation ul li.menu-item.menu-spacer,
.mobile-navigation ul li.menu-item.nav-group-start {
	margin-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 0.5rem;
	pointer-events: none;
}
.mobile-navigation ul li.menu-item.menu-spacer > .menu-spacer-inner {
	display: block;
	height: 0;
}