/**
 * Custom front-end styles for Holydog Child Theme
 *
 * @package HolydogChild
 * @since   1.1.0
 */

/* Static location maps (replace Google Maps embeds) */
.hd-map-image,
.elementor-widget-image.hd-map-image {
	overflow: hidden;
}

.hd-map-image img,
.elementor-widget-image.hd-map-image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
	transition: opacity .2s ease;
}

.hd-map-image a:hover img,
.elementor-widget-image.hd-map-image a:hover img {
	opacity: .92;
}

/* ── Modern Cart: keep slide-out markup off-page when closed ──
   Prevents cart drawer HTML (in wp_footer) from appearing below the
   site footer when plugin CSS fails to load or is cached stale. */
#moderncart-slide-out-modal:not(.moderncart-show),
#moderncart-popup-modal:not(.moderncart-show) {
	display: none !important;
}

#moderncart-slide-out-modal,
#moderncart-popup-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 2147482647 !important;
	pointer-events: none;
}

#moderncart-slide-out-modal.moderncart-show,
#moderncart-popup-modal.moderncart-show {
	pointer-events: auto;
}

#moderncart-slide-out-modal.moderncart-cart-style-slideout #moderncart-slide-out {
	position: fixed !important;
}

/* ── Mobile header: keep burger / account / cart visible ──
   Search in the Astra header was forcing a wide min-width and
   pushing the menu toggle off-screen on phones.
   Keep in sync with astra_tablet_breakpoint (1120). */
@media (max-width: 1120px) {
	.ast-mobile-header-wrap .ast-builder-grid-row,
	.ast-primary-header-bar .ast-builder-grid-row,
	.main-header-bar .ast-builder-grid-row {
		align-items: center;
		column-gap: 8px;
	}

	.ast-mobile-header-wrap .ast-builder-layout-element,
	.ast-primary-header-bar .ast-builder-layout-element {
		min-width: 0;
	}

	/* Search may shrink; controls stay visible */
	.ast-mobile-header-wrap .ast-builder-html-element,
	.ast-mobile-header-wrap .widget.holydog-ajax-search-widget,
	.ast-mobile-header-wrap .holydog-search-widget,
	.ast-primary-header-bar .ast-builder-html-element,
	.ast-primary-header-bar .widget.holydog-ajax-search-widget,
	.ast-primary-header-bar .holydog-search-widget {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
		width: auto;
	}

	.ast-mobile-header-wrap .holydog-search-input,
	.ast-primary-header-bar .holydog-search-input {
		min-width: 0;
		height: 40px;
		font-size: 16px; /* avoid iOS zoom on focus */
	}

	/* Always show the hamburger / mobile trigger */
	.ast-button-wrap,
	.ast-mobile-menu-trigger-minimal,
	.menu-toggle,
	.ast-mobile-menu-buttons,
	.ast-header-break-point .main-header-menu-toggle,
	button.menu-toggle,
	.ast-mobile-header-wrap .ast-button-wrap,
	.ast-mobile-header-wrap .ast-mobile-menu-trigger-fill,
	.ast-mobile-header-wrap .ast-mobile-menu-trigger-minimal,
	.ast-mobile-header-wrap .ast-mobile-menu-trigger-outline {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		visibility: visible !important;
		opacity: 1 !important;
		flex: 0 0 auto;
		min-width: 44px;
		min-height: 44px;
		z-index: 5;
	}

	.ast-mobile-header-wrap .ast-site-header-cart,
	.ast-mobile-header-wrap .ast-header-account-wrap,
	.ast-primary-header-bar .ast-site-header-cart,
	.ast-primary-header-bar .ast-header-account-wrap {
		flex: 0 0 auto;
	}

	/* Logo shouldn't monopolise the row */
	.ast-mobile-header-wrap .site-branding,
	.ast-mobile-header-wrap .ast-site-identity,
	.ast-primary-header-bar .site-branding {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 42%;
	}

	.ast-mobile-header-wrap .custom-logo-link img,
	.ast-mobile-header-wrap .site-logo-img img,
	.ast-primary-header-bar .custom-logo-link img {
		max-height: 40px;
		width: auto;
		height: auto;
	}
}

@media (max-width: 544px) {
	.ast-mobile-header-wrap .site-branding,
	.ast-mobile-header-wrap .ast-site-identity,
	.ast-primary-header-bar .site-branding {
		max-width: 36%;
	}

	.ast-mobile-header-wrap .holydog-search-input,
	.ast-primary-header-bar .holydog-search-input {
		padding-left: 36px !important;
		padding-right: 32px !important;
	}
}

/* ── Shared page gutter (header / footer align to same edge) ──
   One inset only: pad the outer bar. Nested .site-primary-header-wrap
   still carries Astra's .ast-container { padding: 20px }, which was
   stacking on top of --hd-page-pad and pushing the logo past the hero. */
.ast-primary-header-bar.main-header-bar,
.ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-mobile-header-wrap .main-header-bar,
.site-above-header-wrap.ast-builder-grid-row-container,
.site-below-header-wrap.ast-builder-grid-row-container {
	padding-left: var(--hd-page-pad, 1.25rem) !important;
	padding-right: var(--hd-page-pad, 1.25rem) !important;
	box-sizing: border-box;
}

.ast-primary-header-bar .site-primary-header-wrap.ast-container,
.ast-mobile-header-wrap .site-primary-header-wrap.ast-container,
.site-primary-header-wrap > .ast-builder-grid-row,
.ast-mobile-header-wrap .ast-builder-grid-row {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: none;
}

@media (min-width: 768px) {
	.ast-primary-header-bar.main-header-bar,
	.ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar,
	.ast-mobile-header-wrap .ast-primary-header-bar,
	.ast-mobile-header-wrap .main-header-bar,
	.site-above-header-wrap.ast-builder-grid-row-container,
	.site-below-header-wrap.ast-builder-grid-row-container {
		padding-left: var(--hd-page-pad-lg, 2rem) !important;
		padding-right: var(--hd-page-pad-lg, 2rem) !important;
	}
}

/* ── Site gutters: Elementor % side-pad → header --hd-page-pad ──
   Class is auto-added in PHP when L/R padding are equal % (see
   Holydog_Elementor::tag_site_pad). No element IDs. */
.elementor .hd-site-pad {
	--padding-left: var(--hd-page-pad, 1.25rem);
	--padding-right: var(--hd-page-pad, 1.25rem);
	padding-left: var(--hd-page-pad, 1.25rem) !important;
	padding-right: var(--hd-page-pad, 1.25rem) !important;
}

@media (min-width: 768px) {
	.elementor .hd-site-pad {
		--padding-left: var(--hd-page-pad-lg, 2rem);
		--padding-right: var(--hd-page-pad-lg, 2rem);
		padding-left: var(--hd-page-pad-lg, 2rem) !important;
		padding-right: var(--hd-page-pad-lg, 2rem) !important;
	}
}

/* Tablet + phone: Elementor homepage hero (classes from Holydog_Elementor::tag_home_hero).
   Desktop Elementor keeps title at ~50% width and CTA padded — clips copy and off-centers the button. */
@media (max-width: 1024px) {
	.hd-el-hero {
		--min-height: 75vh;
		--justify-content: center;
		--flex-direction: column;
		--padding-top: 0%;
		--padding-bottom: 10%;
	}

	.hd-el-hero-title {
		width: 100% !important;
		max-width: 100% !important;
		--container-widget-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: center !important;
	}

	.hd-el-hero-title .elementor-heading-title {
		font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
		line-height: 1.15 !important;
		white-space: normal !important;
		overflow-wrap: break-word;
		max-width: 100%;
	}

	.hd-el-hero-cta {
		--display: flex;
		--flex-direction: column !important;
		--justify-content: center;
		--align-items: center;
		width: 100% !important;
		max-width: 100% !important;
	}

	.hd-el-hero-cta.e-flex > .e-con-inner {
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
	}

	.hd-el-hero-btn,
	.hd-el-hero-cta.elementor-element {
		padding: 0 !important;
		--container-widget-width: 100% !important;
		--container-widget-flex-grow: 0;
		--flex-grow: 0;
		--flex-shrink: 1;
		--align-self: center !important;
		width: 100% !important;
		max-width: 100% !important;
		text-align: center !important;
		align-self: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.hd-el-hero-btn .elementor-button-wrapper,
	.hd-el-hero-cta .elementor-button-wrapper {
		text-align: center !important;
	}
}

/* ── Footer: don't squeeze 4 cols on mid widths ───────────────
   Astra keeps desktop 4-equal until ≤921px. Long DE legal links
   break earlier — stack to 2 cols, then 1. */

/* Long German link labels: wrap at spaces, not mid-word */
.site-primary-footer-wrap .footer-widget-area a,
.site-primary-footer-wrap .footer-widget-area li {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.site-primary-footer-wrap .footer-widget-area .widget {
	margin: 0 !important;
}

.site-primary-footer-wrap .footer-widget-area .widget-title,
.site-primary-footer-wrap .footer-widget-area h2.widget-title {
	margin-top: 0 !important;
	margin-bottom: 0.5rem !important;
}

.site-primary-footer-wrap .footer-widget-area ul {
	margin: 0 !important;
	padding: 0 !important;
}

.site-primary-footer-wrap .footer-widget-area li {
	margin: 0.15rem 0 !important;
}

/* Full-bleed footer (match header / Elementor bands).
   Astra hb-footer-layout-width:content caps .ast-builder-grid-row
   at site-content-width (~1200) — drop that and spread the 4 cols. */
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap,
.site-footer .ast-builder-grid-row-container-inner {
	max-width: none !important;
	width: 100%;
}

.site-footer .site-primary-footer-wrap .ast-builder-grid-row,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row,
.site-footer .site-below-footer-wrap .ast-builder-grid-row,
.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: var(--hd-page-pad, 1.25rem) !important;
	padding-right: var(--hd-page-pad, 1.25rem) !important;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.site-footer .site-primary-footer-wrap .ast-builder-grid-row,
	.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row,
	.site-footer .site-below-footer-wrap .ast-builder-grid-row,
	.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
		padding-left: var(--hd-page-pad-lg, 2rem) !important;
		padding-right: var(--hd-page-pad-lg, 2rem) !important;
	}
}

/* Wide desktop: logo column wider; link cols share the rest evenly.
   Empty Astra slots used to leave a dead gap mid-row. */
@media (min-width: 1101px) {
	.site-footer .site-primary-footer-wrap .ast-builder-grid-row,
	.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row {
		display: grid !important;
		grid-template-columns: minmax(16rem, 2fr) repeat(3, minmax(0, 1fr)) !important;
		column-gap: clamp(1.5rem, 3vw, 2.75rem) !important;
		align-items: start !important;
		justify-content: stretch !important;
	}

	.site-primary-footer-wrap .site-footer-section,
	.site-primary-footer-wrap .footer-widget-area {
		min-width: 0;
		max-width: none !important;
		width: auto !important;
	}

	/* Drop empty builder cells so gaps collapse */
	.site-primary-footer-wrap .site-footer-section:empty,
	.site-primary-footer-wrap .ast-builder-layout-element:empty,
	.site-primary-footer-wrap .footer-widget-area:not(:has(*)) {
		display: none !important;
	}

	.site-primary-footer-wrap .site-footer-section-1 {
		max-width: none !important;
	}
}

/* Mid: explicit 2×2 grid */
@media (max-width: 1100px) {
	.site-footer .site-primary-footer-wrap .ast-builder-grid-row,
	.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-rows: auto auto;
		align-items: start !important;
		column-gap: 1.5rem !important;
		row-gap: 1.5rem !important;
	}

	.site-primary-footer-wrap .site-footer-section,
	.site-primary-footer-wrap .footer-widget-area {
		display: block !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		margin: 0 !important;
		align-self: start;
	}
}

/* Narrow: single column, keep side gutter */
@media (max-width: 640px) {
	.site-footer .site-primary-footer-wrap .ast-builder-grid-row,
	.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-template-rows: none;
		row-gap: 1.25rem !important;
	}

	.site-footer-section-1,
	.site-footer .site-footer-section-1,
	.site-primary-footer-wrap .site-footer-section-1 {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.site-footer-section-1 .wp-block-image,
	.site-footer-section-1 .ast-builder-html-element,
	.site-footer-section-1 .site-logo-img,
	.site-footer-section-1 .custom-logo-link {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.site-footer-section-1 img {
		margin-left: auto;
		margin-right: auto;
		display: inline-block;
	}
}

/* Cloned header social icons under footer logo */
.hd-footer-social-clone {
	display: flex !important;
	justify-content: flex-start;
	align-items: center;
	width: auto;
	max-width: 100%;
	margin: 0.75rem 0 0;
	padding: 0;
}

.hd-footer-social-clone .header-social-inner-wrap,
.hd-footer-social-clone.ast-header-social-wrap {
	display: flex !important;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.25rem;
	width: auto;
}

/* Footer touch targets: keep one row under the logo */
.hd-footer-social-clone .ast-builder-social-element,
.hd-footer-social-clone a {
	min-width: 36px;
	min-height: 36px;
	flex: 0 0 auto;
	margin: 0 !important;
}

/* Center under logo when footer stacks on mobile (must follow flex-start base) */
@media (max-width: 640px) {
	.site-footer-section-1 .footer-widget-area:has(.hd-footer-social-clone) {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.hd-footer-social-clone,
	.hd-footer-social-clone .header-social-inner-wrap,
	.hd-footer-social-clone.ast-header-social-wrap {
		justify-content: center !important;
		width: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Footer is white — force dark icons (header clones inherit light fills) */
.hd-footer-social-clone .ast-builder-social-element,
.hd-footer-social-clone .ast-builder-social-element:hover,
.hd-footer-social-clone .ast-builder-social-element:focus {
	--color: #1a1a1a;
	color: #1a1a1a !important;
}

.hd-footer-social-clone .ast-builder-social-element svg,
.hd-footer-social-clone .ast-social-color-type-custom svg,
.hd-footer-social-clone .ahfb-svg-iconset svg {
	fill: #1a1a1a !important;
	color: #1a1a1a !important;
}

.hd-footer-social-clone .ast-builder-social-element svg path {
	fill: #1a1a1a !important;
}

/* ── Home products + “Kategorien” row ─────────────────────────
   Stable hd-* classes (see Holydog_Elementor::tag_home_layout).
   Prefer the same names in Elementor → Advanced → CSS Classes. */
.hd-home-products-stack {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 2rem !important;
}

.hd-home-products-col,
.hd-home-cats-row {
	width: 100% !important;
	max-width: 100% !important;
	--width: 100%;
	flex: 0 0 auto !important;
	height: auto !important;
	min-height: 0 !important;
	align-self: stretch !important;
}

.hd-home-products-col {
	justify-content: flex-start !important;
	gap: 1.25rem !important;
}

.hd-home-cats-row {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 1.5rem !important;
	align-items: stretch !important;
}

.hd-home-cats-cell {
	flex: 1 1 280px !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

@media (max-width: 1024px) {
	.hd-home-cats-row {
		flex-direction: column !important;
	}
}

@media (max-width: 767px) {
	.hd-home-products-stack .hd-home-cats-row {
		--margin-top: 0% !important;
		margin-top: 0 !important;
	}
}

/*
 * Piece / Knabbern: hide accidental portion UI from the legacy portion plugin.
 * Do NOT hide when the product has an explicit weight sell mode (dropdown/hybrid).
 */
.hd-piece-product .hp-w:not([data-mode="preset_weight"]):not([data-mode="hybrid"]):not([data-mode="custom_weight"]),
.hd-piece-product [data-hdc-portion="1"]:not([data-mode="preset_weight"]):not([data-mode="hybrid"]):not([data-mode="custom_weight"]) {
	display: none !important;
}

/* Hide stale Modern Cart badge until body.hd-cart-toast-ok (assets/js/moderncart-toast.js) */
body:not(.hd-cart-toast-ok) .moderncart-add-to-cart-notification,
body:not(.hd-cart-toast-ok) .moderncart-floating-cart-button-notification {
	display: none !important;
}

/* DE price notice (Woo .woocommerce-price-suffix) — shipping lives in cart */
.woocommerce-price-suffix {
	display: inline-block;
	margin-left: 0.35em;
	font-size: 0.75em;
	font-weight: 500;
	opacity: 0.7;
	white-space: nowrap;
}

/*
 * Complianz: undo broken short-viewport layout.
 * Plugin uses zoom + 15vh buttons under max-height:400px, which fires in
 * mid-width / short-height previews (DevTools docked) and squishes text.
 */
@media (max-height: 400px) {
	.cmplz-cookiebanner {
		zoom: 1 !important;
		padding: 12px 16px !important;
		gap: 8px !important;
		grid-row-gap: 8px !important;
		height: auto !important;
		max-height: calc(100vh - 20px) !important;
		display: grid !important;
		overflow-y: auto !important;
	}

	.cmplz-cookiebanner .cmplz-header {
		max-height: none !important;
		margin-bottom: 0 !important;
		grid-template-columns: 1fr !important;
	}

	.cmplz-cookiebanner .cmplz-title {
		grid-column: 1 !important;
		justify-self: start !important;
	}

	.cmplz-cookiebanner .cmplz-body {
		margin-top: 0 !important;
	}

	.cmplz-cookiebanner .cmplz-buttons {
		flex-direction: column !important;
		gap: 8px !important;
	}

	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		height: auto !important;
		min-height: 40px !important;
		padding: 8px 12px !important;
		font-size: var(--cmplz_button_font_size, 15px) !important;
		line-height: 1.3 !important;
		zoom: 1 !important;
	}

	.cmplz-cookiebanner .cmplz-documents,
	.cmplz-cookiebanner .cmplz-information,
	.cmplz-close {
		zoom: 1 !important;
	}
}

/* Hide shipping-zone debug notices without detaching Blocks React nodes */
.hd-hide-shipping-zone-notice {
	display: none !important;
}