/* strata-datachan overrides — .dcn- prefix throughout */

/* Parent's global `a:hover` rule (core.css) beats theme.json's zero-specificity
   :where() button styles, turning solid-button hover text the same color as
   the darkened hover background. Restore contrast text on hover for buttons
   that don't already set their own textColor (those win via !important). */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--accent-contrast);
}

/* WP core's built-in is-style-outline padding (0.667em/1.333em) doesn't match
   our spacing scale, making outline buttons noticeably shorter than solid
   ones in the same row. Match the default button's padding tokens, minus the
   2px border (which the solid button doesn't have) so rendered heights are equal. */
.wp-block-button.is-style-outline .wp-block-button__link {
	padding: calc(var(--wp--preset--spacing--20) - 2px) calc(var(--wp--preset--spacing--40) - 2px);
}

.dcn-badge {
	display: inline-block;
	margin-left: var(--wp--preset--spacing--20);
	padding: 0.2em 0.75em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-subtle);
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--xs);
}

/* Header — sticky, separated from content, logo lockup */
.dcn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* The header row is `nowrap` by default — at desktop widths the logo lockup and
   nav together sit a little wider than the 1200px content column, but that
   only overflows into the surrounding page margin, which is harmless. Below the
   mobile nav breakpoint there's no margin to overflow into (the row IS the
   viewport), so stack logo and nav into two centered rows instead of a
   cramped edge-to-edge one — same breakpoint core/navigation uses for its own
   overlay toggle, so the two switch to mobile layout together. */
@media (max-width: 600px) {
	.dcn-header-row {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		text-align: center;
	}
	/* Core's space-between layout (desktop: logo left, nav right) is implemented
	   as `margin-left: auto` on the last child, not `justify-content`. That auto
	   margin survives our switch to a centered column layout and shoves this row
	   flush right instead — cancel it so `align-items: center` above can actually
	   center the row. */
	.dcn-header-row > :last-child {
		margin-left: 0;
	}
}

/* The hero's dual CTA ("Get Notified" / "See How It Works") is a plain flex row
   with no justifyContent set, so it defaults to flex-start — fine when it sits
   under left-aligned heading text on desktop, but stranded on the left edge once
   the columns block stacks the hero to full width on mobile. */
@media (max-width: 600px) {
	.dcn-hero .wp-block-buttons {
		justify-content: center;
	}
}

.dcn-logo {
	margin: 0;
}
.dcn-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.dcn-logo-mark {
	display: inline-flex;
	color: var(--wp--preset--color--accent);
}
.dcn-logo-mark img {
	display: block;
	box-shadow: var(--wp--preset--shadow--xs);
}
.dcn-logo-word {
	font-weight: 800;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.01em;
}
.dcn-logo--footer .dcn-logo-link {
	color: var(--wp--preset--color--base);
}
.dcn-logo--footer .dcn-logo-mark {
	color: var(--wp--preset--color--accent-subtle);
}

/* Header CTA button text must never wrap mid-word — translated labels vary in length
   (e.g. Spanish "Avísame"), and letting flexbox shrink the button below its natural
   width breaks a word across two lines instead of keeping it on one. */
.dcn-header-cta a {
	white-space: nowrap;
}

/* Polylang's nav language switcher inherits the sitewide `img { display: block }` reset
   above, which forces the flag onto its own line above the language name in any inline
   label — happens in both languages, not translation-specific. */
.wp-block-polylang-navigation-language-switcher img {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.25em;
}

/* The language switcher's parent toggle (current-language link + expand arrow) stays
   visible even inside the mobile nav overlay, where its own submenu is already forced
   flat — so the current language renders twice in a row. Hide the redundant toggle only
   in the overlay; the desktop dropdown (click-to-open) is untouched. */
.has-modal-open .wp-block-polylang-navigation-language-switcher > .wp-block-navigation-item__content,
.has-modal-open .wp-block-polylang-navigation-language-switcher > .wp-block-navigation-submenu__toggle {
	display: none !important;
}

/* Setting overlayBackgroundColor/overlayTextColor on core/navigation makes core add
   has-background/has-text-color classes to .wp-block-navigation__responsive-container,
   which core's own CSS gives 60px padding unconditionally — even at desktop widths where
   the container is just the inline nav row, not the fullscreen mobile overlay. Only keep
   that padding once the overlay is actually open (.is-menu-open, real fullscreen state). */
.wp-block-navigation__responsive-container:not(.is-menu-open) {
	padding: 0;
}

/* Hero scan-card mockup */
.dcn-scan-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 1rem;
	box-shadow: var(--wp--preset--shadow--lg);
	padding: var(--wp--preset--spacing--30);
}
.dcn-hero-icon {
	display: block;
}
.dcn-hero-icon img {
	box-shadow: var(--wp--preset--shadow--md);
}
.dcn-scan-thumb img {
	border-radius: 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	object-fit: cover;
	flex-shrink: 0;
}
.dcn-scan-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.dcn-scan-row:last-child {
	border-bottom: none;
}
.dcn-trend {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.15em 0.6em;
	border-radius: 999px;
	white-space: nowrap;
}
.dcn-trend--down {
	background: var(--wp--preset--color--accent-subtle);
	color: var(--wp--preset--color--success);
}
.dcn-trend--up {
	background: #fdf1e0;
	color: var(--wp--preset--color--warning);
}
.dcn-scan-meta {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--success);
}

/* How-it-works numbered steps */
.dcn-step-number {
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 800;
	color: var(--wp--preset--color--accent);
}

/* FAQ accordion — card treatment + custom expand/collapse indicator */
.dcn-faq details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.75rem;
	background: var(--wp--preset--color--base);
	margin-bottom: var(--wp--preset--spacing--20);
	transition: border-color 0.15s ease;
}
.dcn-faq details[open],
.dcn-faq details:hover {
	border-color: var(--wp--preset--color--accent);
}
.dcn-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: 1.25rem 1.5rem;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}
.dcn-faq summary::-webkit-details-marker {
	display: none;
}
.dcn-faq summary::after {
	content: "+";
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-subtle);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
}
.dcn-faq details[open] summary::after {
	content: "\2212";
}
.dcn-faq details > p {
	margin-top: 0;
	padding: 0 1.5rem 1.25rem;
}

/* Verification tiers — icon badge + tinted card per trust level */
.dcn-tier-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 1rem;
	border-top-width: 3px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	height: 100%;
}
.dcn-tier-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	margin-bottom: var(--wp--preset--spacing--20);
}
.dcn-tier-card--pending {
	border-top-color: var(--wp--preset--color--contrast-3);
}
.dcn-tier-card--pending .dcn-tier-icon {
	background: color-mix(in srgb, var(--wp--preset--color--contrast-3) 14%, white);
	color: var(--wp--preset--color--contrast-3);
}
.dcn-tier-card--likely {
	border-top-color: var(--wp--preset--color--warning);
}
.dcn-tier-card--likely .dcn-tier-icon {
	background: color-mix(in srgb, var(--wp--preset--color--warning) 14%, white);
	color: var(--wp--preset--color--warning);
}
.dcn-tier-card--verified {
	border-top-color: var(--wp--preset--color--success);
}
.dcn-tier-card--verified .dcn-tier-icon {
	background: color-mix(in srgb, var(--wp--preset--color--success) 14%, white);
	color: var(--wp--preset--color--success);
}
.dcn-tier--pending {
	color: var(--wp--preset--color--contrast-3);
}
.dcn-tier--likely {
	color: var(--wp--preset--color--warning);
}
.dcn-tier--verified {
	color: var(--wp--preset--color--success);
}