/* ==========================================================================
   HD Custom Styles - Henryks Design
   Location: /themes/extendable/custom/hd-custom-styles.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Latest Posts Block ("Neueste Arbeiten")
   -------------------------------------------------------------------------- */
.wp-block-latest-posts__featured-image {
	display: block !important;
	width: 100% !important;
	overflow: hidden !important;
	border-radius: 8px !important;
	position: relative !important;
	margin: 0 0 12px 0 !important;
	-webkit-mask-image: -webkit-radial-gradient(white, black) !important;
}

.wp-block-latest-posts__featured-image a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	border-radius: 8px !important;
}

.wp-block-latest-posts__featured-image img,
.wp-block-latest-posts .wp-post-image {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	pointer-events: none !important;
	transform: none !important;
	transition: none !important;
}

.wp-block-latest-posts li:hover .wp-block-latest-posts__featured-image img {
	transform: none !important;
}

/* Title Pill Badges with Animated Arrow */
.wp-block-latest-posts__post-title {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	background-color: #ffffff !important;
	color: #000000 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 8px 18px 8px 16px !important;
	border-radius: 9999px !important;
	text-decoration: none !important;
	margin-top: 8px !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.wp-block-latest-posts__post-title::after {
	content: "→" !important;
	display: inline-block !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1 !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	will-change: transform !important;
}

.wp-block-latest-posts__post-title:hover::after,
.wp-block-latest-posts li:hover .wp-block-latest-posts__post-title::after {
	transform: translateX(4px) !important;
}

.wp-block-latest-posts__post-title:hover,
.wp-block-latest-posts li:hover .wp-block-latest-posts__post-title {
	background-color: #ffffff !important;
	color: #000000 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* --------------------------------------------------------------------------
   2. Header & Sticky Animation
   -------------------------------------------------------------------------- */
html, body {
	margin-top: 0 !important;
	padding-top: 0 !important;
	overflow-x: clip !important;
	max-width: 100% !important;
}

header.wp-block-template-part,
.site-header {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	margin-top: 0 !important;
	z-index: 99999 !important;
	background-color: #e3e3e3 !important;
	background-image: none !important;
	opacity: 1 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: none !important;
	transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
	padding: 0 !important;
}

header.wp-block-template-part > div.wp-block-group {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 30px !important;
	padding-bottom: 30px !important;
	transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

header.wp-block-template-part .is-content-justification-space-between,
header.wp-block-template-part > div > div {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	max-width: var(--wp--style--global--wide-size, 75%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 1200px) {
	header.wp-block-template-part .is-content-justification-space-between,
	header.wp-block-template-part > div > div {
		max-width: 100% !important;
		padding-left: var(--wp--preset--spacing--30, 1.5rem) !important;
		padding-right: var(--wp--preset--spacing--30, 1.5rem) !important;
	}
}

header.wp-block-template-part .is-nowrap {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}

header.wp-block-template-part .wp-block-site-logo,
header.wp-block-template-part .custom-logo-link {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	line-height: 0 !important;
}

header.wp-block-template-part img.custom-logo,
header.wp-block-template-part .wp-block-site-logo img {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	max-height: 44px !important;
	width: auto !important;
	transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hide duplicate site title text in header */
header.wp-block-template-part .wp-block-site-title,
header.wp-block-template-part .site-logo-title,
header.wp-block-template-part .wp-block-navigation .wp-block-site-logo {
	display: none !important;
}

/* Scrolled Sticky Header State */
header.wp-block-template-part.is-scrolled,
.site-header.is-scrolled {
	background-color: #e3e3e3 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

header.wp-block-template-part.is-scrolled > div.wp-block-group {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

header.wp-block-template-part.is-scrolled img.custom-logo,
header.wp-block-template-part.is-scrolled .wp-block-site-logo img {
	max-height: 24px !important;
}

/* Remove default browser / theme focus outline on mouse click (:active & :focus:not(:focus-visible))
   while maintaining accessibility for keyboard tab navigation (:focus-visible) */
header.wp-block-template-part *:focus:not(:focus-visible),
header.wp-block-template-part *:active,
header.wp-block-template-part a:focus:not(:focus-visible),
header.wp-block-template-part a:active,
header.wp-block-template-part button:focus:not(:focus-visible),
header.wp-block-template-part button:active {
	outline: none !important;
	box-shadow: none !important;
}

header.wp-block-template-part img,
header.wp-block-template-part svg {
	outline: none !important;
	user-select: none !important;
	-webkit-user-drag: none !important;
}

/* --------------------------------------------------------------------------
   3. Navigation Link Hover & Left-to-Right Underline Animation
   -------------------------------------------------------------------------- */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__label {
	text-decoration: none !important;
	text-decoration-line: none !important;
}

/* Ensure uniform line-height across all menu items to guarantee identical underline distance */
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation-item,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation-item__label,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) a {
	line-height: 1.2 !important;
}

/* Top level menu items container styling */
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item > a {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	padding-bottom: 2px !important;
	transition: text-shadow 0.15s ease, color 0.15s ease !important;
}

/* Hover: Visual Bold (text-shadow) - Zero layout width shift! */
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item:hover > a,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item > a:hover {
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor, 0 0.3px 0 currentColor !important;
	text-decoration: none !important;
}

/* Hover: Left-to-right animated 2px black underline with identical 6px spacing */
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item > a::after {
	content: "" !important;
	position: absolute !important;
	bottom: -6px !important;
	left: 0 !important;
	width: 100% !important;
	height: 2px !important;
	background-color: #000000 !important;
	transform: scaleX(0) !important;
	transform-origin: left center !important;
	transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1) !important;
}

header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item:hover > a::after,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation-submenu) .wp-block-navigation__container > .wp-block-navigation-item > a:hover::after {
	transform: scaleX(1) !important;
}

/* Exclude top-level underline animation on submenus & add submenu dropdown container styling */
header.wp-block-template-part .wp-block-navigation__submenu-container {
	margin-top: 16px !important;
	border-radius: 10px !important;
	background-color: #f7f7f7 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	padding: 6px !important;
	position: absolute !important;
}

/* Transparent hover bridge gap so dropdown stays open smoothly */
header.wp-block-template-part .wp-block-navigation__submenu-container::before {
	content: "" !important;
	position: absolute !important;
	top: -16px !important;
	left: 0 !important;
	width: 100% !important;
	height: 16px !important;
	background: transparent !important;
}

/* Submenu items styling */
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation__submenu-container a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 8px 14px !important;
	border-radius: 6px !important;
	color: #1d1d1f !important;
	font-weight: 500 !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Submenu animated right arrow → */
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after,
header.wp-block-template-part .wp-block-navigation__submenu-container a::after {
	display: inline-block !important;
	content: "→" !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1 !important;
	opacity: 0.35 !important;
	transform: translateX(0) !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
}

/* Submenu item hover state */
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > a,
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation__submenu-container a:hover {
	background-color: rgba(0, 0, 0, 0.08) !important;
	color: #000000 !important;
}

header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > a::after,
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after,
header.wp-block-template-part .wp-block-navigation__submenu-container a:hover::after {
	opacity: 1 !important;
	transform: translateX(4px) !important;
}