/*
 * Shared components: pill bullets.
 *
 * Part of the Web Weasel child theme. Loaded from inc/enqueue-assets.php.
 * Order matters: this file is printed after the previous module.
 */

Pill bullets (replacing the native marker): reused on the Features cards and on
   the trade/territory pages below */
.ww-dot-list,
.ww-feature-card .wp-block-list {
	list-style: none !important;
	padding-left: 0 !important;
}
.ww-dot-list li,
.ww-feature-card .wp-block-list li {
	position: relative;
	padding-left: 17px;
	font-size: 14.5px;
	color: var(--wp--preset--color--ww-slate-deep, #3E5B58);
}
.ww-dot-list li::before,
.ww-feature-card .wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--ww-sun);
}

/* ===================================================================


/* Same bug as .ww-engagements-grid: WordPress' default flow spacing
   (:where(.is-layout-flow) > * { margin-block-start: ... }) pushes every
   card but the first down inside its grid cell, on top of the grid's own
   gap -- which on row 2 (cards 4-6) visibly cropped their alignment and
   rounded corners against the row above. */
.ww-feature-grid.is-layout-flow > .ww-feature-card {
	margin-block-start: 0 !important;
}
/* Force the yellow dot as the ONLY marker: strip both the box-model list
   marker and the modern ::marker pseudo-element so nothing native can show
   through regardless of cascade order elsewhere. */
.ww-feature-card .wp-block-list,
.ww-feature-card .wp-block-list li {
	list-style-type: none !important;
}
.ww-feature-card .wp-block-list li::marker {
	content: none !important;
}

/* ww-faq-v2 -- SEOPress FAQ block (wpseopress/faq-block-v2), site-wide.
 * Each question used to stack a 16px block-gap margin, 10px of summary
 * padding and a tall line-height, which left big empty bands between the
 * closed questions. Questions now sit as a ruled list with a chevron, and
 * open with a height transition where the browser supports
 * ::details-content (others simply open instantly). */
.wp-block-wpseopress-faq-block-v2 {
	border-top: 1px solid rgba(18, 54, 54, 0.15);
}

.wp-block-wpseopress-faq-block-v2 > .wp-block-details {
	margin: 0 !important;
	padding: 0;
	border-bottom: 1px solid rgba(18, 54, 54, 0.15);
}

.wp-block-wpseopress-faq-block-v2 > .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	box-sizing: border-box; /* the theme's 44px min-height must include the padding */
	padding: 0.7rem 0.25rem;
	line-height: 1.4;
	list-style: none;
}

.wp-block-wpseopress-faq-block-v2 > .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-wpseopress-faq-block-v2 > .wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.25rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.2em) rotate(45deg);
	transition: transform 0.3s ease;
}

.wp-block-wpseopress-faq-block-v2 > .wp-block-details[open] > summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.wp-block-wpseopress-faq-block-v2 > .wp-block-details > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--ww-sun, #f5c542);
	outline-offset: 2px;
}

/* Padding, not margins: a margin would sit outside the animated
   ::details-content box and pop in at the end of the transition. */
.wp-block-wpseopress-faq-block-v2 > .wp-block-details > :not(summary) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 0.25rem 0.75rem;
}

.wp-block-wpseopress-faq-block-v2 > .wp-block-details > :last-child:not(summary) {
	padding-bottom: 1.1rem;
}

@supports selector(::details-content) {
	.wp-block-wpseopress-faq-block-v2 {
		interpolate-size: allow-keywords;
	}

	.wp-block-wpseopress-faq-block-v2 > .wp-block-details::details-content {
		height: 0;
		overflow: clip;
		transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
	}

	.wp-block-wpseopress-faq-block-v2 > .wp-block-details[open]::details-content {
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-wpseopress-faq-block-v2 > .wp-block-details > summary::after,
	.wp-block-wpseopress-faq-block-v2 > .wp-block-details::details-content {
		transition: none;
	}
}

/* ww-cta -- single call-to-action card (candidate replacement for the
 * "Double CTA SEO" reusable block). Dark teal card, text + reassurance chips
 * + two actions on the left, illustration on the right; stacks on mobile. */
.ww-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 1rem + 3vw, 3rem) !important;
	color: #fff;
	background: #123636;
	border-radius: 1.25rem;
}

.ww-cta::before {
	content: "";
	position: absolute;
	right: -6rem;
	bottom: -8rem;
	width: 22rem;
	height: 22rem;
	background: radial-gradient(circle, rgba(183, 226, 223, 0.16) 0%, rgba(183, 226, 223, 0) 70%);
	pointer-events: none;
}

.ww-cta > .wp-block-columns {
	position: relative;
	margin: 0;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.ww-cta h2 {
	margin: 0 0 0.75rem !important;
	color: #fff;
}

.ww-cta .ww-eyebrow {
	margin: 0 0 0.5rem !important;
	color: var(--wp--preset--color--ww-sun, #f5c542) !important;
}

.ww-cta p {
	max-width: 60ch;
	margin: 0 0 1rem !important;
	color: var(--wp--preset--color--ww-cloud-200, #d6f1ef);
}

.ww-cta .ww-cta__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem !important;
	padding: 0 !important;
	list-style: none;
}

.ww-cta .ww-cta__points li {
	margin: 0;
	padding: 0.3rem 0.85rem;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--wp--preset--color--ww-mint-300, #b7e2df);
	border: 1px solid rgba(183, 226, 223, 0.45);
	border-radius: 999px;
}

.ww-cta .wp-block-buttons {
	gap: 0.75rem;
}

.ww-cta .wp-block-button.is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
	background: transparent;
}

.ww-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ww-cta .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	color: #123636;
	background: #fff;
}

.ww-cta .ww-cta__mail {
	margin: 1rem 0 0 !important;
	font-size: 0.95rem;
}

.ww-cta .ww-cta__mail a {
	color: #fff;
	text-decoration-color: var(--wp--preset--color--ww-sun, #f5c542);
	text-underline-offset: 0.2em;
}

.ww-cta .ww-cta__art img {
	display: block;
	width: min(230px, 100%);
	height: auto;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.ww-cta .ww-cta__art {
		order: -1;
	}

	.ww-cta .ww-cta__art img {
		width: 140px;
	}
}

/* ww-cta fixes -- core list and outline-button styles from the theme win on
 * specificity: the chips stacked as full-width rows and the phone button
 * kept its dark-on-light text, invisible on the dark card. */
.ww-cta ul.ww-cta__points {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
}

.ww-cta ul.ww-cta__points > li {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
	padding: 0.3rem 0.85rem !important; /* theme zeroes a list's first-item top padding */
	line-height: 1.4;
}

.ww-cta .wp-block-button.is-style-outline .wp-block-button__link {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
	background: transparent !important;
}

.ww-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ww-cta .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	color: #123636 !important;
	background: #fff !important;
}

/* ww-offer-note -- low-key offer box (association discount): white card,
 * teal edge, small title, fine print in muted text. */
.ww-offer-note {
	margin-top: 1.5rem !important;
	padding: 1.25rem 1.5rem !important;
	background: #fff;
	border: 1px solid var(--wp--preset--color--ww-mint-300, #b7e2df);
	border-left: 4px solid var(--wp--preset--color--ww-teal-500, #2f7375);
	border-radius: 0.75rem;
}

.ww-offer-note > * {
	margin-top: 0 !important;
}

.ww-offer-note h3 {
	margin-bottom: 0.5rem !important;
	font-size: 1.1rem;
	color: #123636;
}

.ww-offer-note p {
	margin-bottom: 0.5rem !important;
}

.ww-offer-note .ww-offer-note__terms {
	margin-bottom: 0 !important;
	font-size: 0.88rem;
	color: #4a5d5d;
}

/* ww-zone-bg -- bands placed between full-width sections without a
 * background of their own (the "exemple concret" note, the synced CTA
 * section) take the background of the section right above them, so they
 * read as part of that zone instead of showing the body gradient, which
 * changes tone with the scroll position. The "doux" gradient ends on
 * #D9F8F8 (its last stop), white sections are the base colour. */
.entry-content > .has-custom-d-grad-doux-gradient-background + .ww-seo-note,
.entry-content > .has-custom-d-grad-doux-gradient-background + .ww-cta-zone {
	--ww-zone-bg: #d9f8f8;
}

.entry-content > .has-base-background-color + .ww-seo-note,
.entry-content > .has-base-background-color + .ww-cta-zone {
	--ww-zone-bg: #fff;
}

/* alignwide note: paint the background edge to edge without widening it. */
.entry-content > .ww-seo-note {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: var(--wp--preset--spacing--medium) !important;
	background: var(--ww-zone-bg, transparent) !important;
	box-shadow: 0 0 0 100vmax var(--ww-zone-bg, transparent);
	clip-path: inset(0 -100vmax);
}

.entry-content > .ww-cta-zone {
	background: var(--ww-zone-bg, transparent) !important;
}