/**
 * Accessibility & global layout fixes — WCAG 2.1 AA compliance.
 * Loaded globally on all pages.
 */

/* ===== Link underlines: prose only ===== */
/* Underline links inside prose (paragraphs, lists in content) */
.entry-content p a,
.entry-content li a,
.wp-block-paragraph a,
.wp-block-list a,
.od-guide-article a {
	text-decoration: underline;
}
/* Never underline: cards, titles, product links, buttons, breadcrumbs, nav */
.od-guide-card a,
.wp-block-post-title a,
.wp-block-post-excerpt a,
.wc-block-product a,
.woocommerce-loop-product__title a,
.wp-block-button__link,
.wp-block-navigation a,
.woocommerce-breadcrumb a,
.od-guide-back,
footer a {
	text-decoration: none !important;
}
/* Hover/focus: underline on non-prose elements for affordance */
.od-guide-card a:hover,
.od-guide-card a:focus,
.wp-block-post-title a:hover,
.wp-block-post-title a:focus,
.wp-block-post-excerpt a:hover,
.wp-block-post-excerpt a:focus,
.wc-block-product a:hover,
.wc-block-product a:focus,
.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus,
.wp-block-navigation a:hover,
.wp-block-navigation a:focus,
footer a:hover,
footer a:focus {
	text-decoration: underline !important;
}
/* Buttons: never underline, even on hover */
.wp-element-button,
.wp-element-button:hover,
.wp-element-button:focus {
	text-decoration: none !important;
}

/* ===== Touch targets: 44px via padding ===== */
.wp-block-navigation a {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
}

/* Buttons: ensure minimum touch target */
.wp-element-button,
.wc-block-components-button,
button,
input[type="submit"] {
	min-height: 44px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* ===== Focus visible ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary, #2b6cb0);
	outline-offset: 2px;
}

/* ===== Navigation CTA "Choisir mon osmoseur" ===== */
.wp-block-navigation .od-nav-cta a,
.wp-block-navigation-item.od-nav-cta a {
	background: var(--wp--preset--color--accent, #2c7a7b);
	color: #fff !important;
	border-radius: var(--wp--custom--border-radius--button, 6px);
	padding: 0.4rem 1rem !important;
	font-weight: 700;
	white-space: nowrap;
}
.wp-block-navigation .od-nav-cta a:hover,
.wp-block-navigation-item.od-nav-cta a:hover {
	background: var(--wp--preset--color--accent-hover, #285E61);
	text-decoration: none !important;
}

/* ===== Account link (header, all pages) ===== */
.od-account-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	transition: color 0.2s ease;
}
.od-account-link:hover {
	color: var(--wp--preset--color--secondary);
}
.od-account-link svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
@media (max-width: 782px) {
	.od-account-link span {
		display: none;
	}
	.od-account-link {
		padding: 0.5rem;
	}
}

/* ===== Cart link (header, all pages) ===== */
.od-cart-link {
	display: inline-flex;
	align-items: center;
	position: relative;
	color: var(--wp--preset--color--primary);
	text-decoration: none !important;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
	justify-content: center;
	transition: color 0.2s ease;
}
.od-cart-link:hover {
	color: var(--wp--preset--color--secondary);
}
.od-cart-link svg {
	width: 22px;
	height: 22px;
}

/* Cart counter badge */
.od-cart-count {
	position: absolute;
	top: 2px;
	right: 0;
	background: var(--wp--preset--color--accent, #2c7a7b);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	border-radius: 8px;
	padding: 0 4px;
}
.od-cart-count:empty {
	display: none;
}

/* ===== Footer ===== */
/* Contrast: links must be >=4.5:1 on #1A365D primary bg */
footer a {
	color: rgba(255, 255, 255, 0.9) !important;
}
footer a:hover,
footer a:focus {
	color: #ffffff !important;
}

/* Remove default list bullets and padding */
footer ul,
footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

/* Touch targets via padding, not line-height (less visual gap) */
footer li {
	margin-bottom: 0;
}
footer li a {
	display: block;
	padding: 0.35rem 0;
	min-height: 44px;
	line-height: 1.4;
	display: flex;
	align-items: center;
}

/* ===== Outline buttons on dark gradients: force white ===== */
.wp-block-button.is-style-outline .wp-block-button__link[style*="color:#ffffff"] {
	border-color: #ffffff !important;
	color: #ffffff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link[style*="color:#ffffff"]:hover {
	background: rgba(255, 255, 255, 0.15) !important;
}

/* ===== Container padding ===== */
/* Root padding set via theme.json useRootPaddingAwareAlignments + styles.spacing.padding.
   Fallback: override inline spacing-30 on top-level sections. */
.wp-site-blocks > main > .wp-block-group[style*="spacing--30"],
.wp-site-blocks > main > .wp-block-cover[style*="spacing--30"] {
	padding-left: clamp(1.5rem, 3vw, 2rem) !important;
	padding-right: clamp(1.5rem, 3vw, 2rem) !important;
}

/* ===== Logo ===== */
.od-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none !important;
	min-height: 44px;
	flex-shrink: 0;
}
.od-logo {
	height: 32px;
	width: auto;
}
@media (max-width: 480px) {
	.od-logo {
		height: 24px;
	}
}
/* P28: prevent overflow at 320px — reduce logo + header padding at very narrow viewports */
@media (max-width: 359px) {
	header.wp-block-template-part > .wp-block-group {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}
	.od-logo-link {
		flex-shrink: 1;
		min-width: 0;
	}
	.od-logo {
		height: 20px;
		min-width: 0;
	}
	.od-account-link {
		padding: 0.25rem;
	}
	.od-cart-link {
		padding: 0.25rem;
		min-width: 36px;
	}
}

/* ===== Sticky header ===== */
/* Header is sticky on all viewports. Reassurance band is outside the header
   (in templates, after the header part), so it scrolls away naturally.
   On desktop the header is just the nav bar (~78px). */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
header.wp-block-template-part > .wp-block-group {
	transition: box-shadow 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ===== P2-B: Remove blockGap between header and reassurance ===== */
/* WP applies margin-block-start: var(--wp--preset--spacing--30) (1rem/16px)
   to every .wp-site-blocks > * except :first-child. The reassurance template-part
   is the 2nd child → gets 16px gap. Override to 0 for a seamless stack. */
header.wp-block-template-part + .wp-block-template-part {
	margin-block-start: 0 !important;
}

/* ===== P2-A: Extend burger menu to 850px (tablet portrait) ===== */
/* WP core shows horizontal nav at min-width:600px. Between 600-849px the 5 nav
   items + account/cart don't fit on one line → 2 rows → header 122px.
   Keep the burger/overlay until 850px where they all fit on 1 row. */
@media (min-width: 600px) and (max-width: 849px) {
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
}

/* ===== P1-K: Reassurance band: responsive grid ===== */
/* 2-column grid 360-849px, single column <360px, flex >849px. */
@media (max-width: 849px) {
	header.wp-block-template-part + .wp-block-template-part .is-layout-flex {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0.5rem 1rem;
		justify-items: start;
	}
}
@media (max-width: 359px) {
	header.wp-block-template-part + .wp-block-template-part .is-layout-flex {
		grid-template-columns: 1fr;
	}
}

/* ===== Sticky bar footer clearance (mobile) ===== */
/* The fixed sticky bar (66px) can overlap the footer bottom.
   Add padding so the last footer content is never hidden. */
@media (max-width: 782px) {
	body.single-product {
		padding-bottom: 70px;
	}
}

/* ===== Product page: TTC spacing ===== */
.woocommerce div.product .price {
	margin-bottom: 0.5rem;
}

/* Pack upsell: secondary outline button */
.od-pack-card .wp-element-button,
.od-pack-card .button {
	background: transparent;
	color: var(--wp--preset--color--secondary);
	border: 2px solid var(--wp--preset--color--secondary);
}
.od-pack-card .wp-element-button:hover,
.od-pack-card .button:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

/* P1-J: Tables — horizontal scroll on narrow screens */
/* Bare tables (no .wp-block-table wrapper) in content, product sections, groups */
.entry-content > table,
.od-product-section > table,
.wp-block-group > table,
figure.wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ===== P1-E: Burger overlay styling ===== */
/* Elements injected by JS are hidden when overlay is closed */
.od-overlay-only {
	display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .od-overlay-only {
	display: block !important;
}

/* Overlay background + P1-L: force left-align (override items-justified-right) */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--surface, #F7FAFC) !important;
	--navigation-layout-justification-setting: flex-start !important;
	--navigation-layout-align: flex-start !important;
}

/* Dialog: relative positioning for absolute-positioned children */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 clamp(1.5rem, 4vw, 2rem) !important;
}

/* Logo: top-left, P2-F: force no underline */
.od-overlay-logo,
.wp-block-navigation__responsive-container .od-overlay-logo,
a.od-overlay-logo {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #1A365D) !important;
	text-decoration: none !important;
	text-decoration-line: none !important;
	padding: 1rem 0;
	min-height: 48px;
	line-height: 48px;
}

/* Close button: top-right, keep WP positioning */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 0.5rem;
	right: clamp(1rem, 3vw, 1.5rem);
	z-index: 2;
	min-width: 48px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Nav links: left-aligned, full-width, 48px touch targets */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	padding-top: 0.5rem;
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	text-align: left !important;
	min-height: 48px;
	padding: 0.5rem 0;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--wp--preset--color--primary, #1A365D) !important;
	text-decoration: none !important;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--secondary, #2b6cb0) !important;
}

/* Extra section: account, cart, CTA — P1-M: full-width, vertical stack */
/* Specificity must match .is-menu-open .od-overlay-only (0,3,0) */
.wp-block-navigation__responsive-container.is-menu-open .od-overlay-extra {
	margin-top: 0.5rem;
	width: 100%;
	display: flex !important;
	flex-direction: column;
	gap: 0;
	align-items: flex-start;
}
.od-overlay-sep {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border, #E2E8F0);
	margin: 0.5rem 0;
	align-self: stretch;
	width: 100%;
}
.od-overlay-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	min-height: 48px;
	color: var(--wp--preset--color--primary, #1A365D);
	text-decoration: none !important;
	font-size: 1rem;
	font-weight: 500;
}
.od-overlay-link:hover,
.od-overlay-link:focus {
	color: var(--wp--preset--color--secondary, #2b6cb0);
}
.od-overlay-link svg {
	flex-shrink: 0;
}
.od-overlay-cta {
	display: block !important;
	text-align: center;
	margin-top: 1rem;
	text-decoration: none !important;
	font-size: 1rem;
	width: 100%;
}

/* Reassurance footer: fixed at bottom of overlay */
.od-overlay-reassurance {
	padding: 1rem 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted, #637085);
	text-align: center;
	border-top: 1px solid var(--wp--preset--color--border, #E2E8F0);
	margin-top: auto;
}

/* Section nav active state: in woocommerce.css (product pages only) */