/* ==========================================================================
   Criteo header — Caards-style floating bar, mega menu, right cluster.
   Loaded on the front end only.
   ========================================================================== */

/* --- Sticky header area --------------------------------------------------
   Make the <header> template-part wrapper sticky (not the bar itself): its
   parent spans the whole page, so it stays pinned as you scroll. The bar
   inside keeps position:relative so the mega-menu panel anchors to it.
   It hides while the user is actively scrolling and slides back in when
   scrolling stops (the .criteo-header-hidden class is toggled by JS). */
header.wp-block-template-part:has( .criteo-header-bar ) {
	position: sticky;
	top: 0;
	z-index: 30;
	transition: transform 0.4s ease;
	/* NOTE: deliberately no `will-change: transform` here. A will-change (or an
	   applied transform) makes this element the containing block for any
	   position:fixed descendant — which trapped the mobile nav's full-screen
	   overlay inside the 53px header bar. The 0.4s transform transition is
	   cheap enough not to need the hint. */
}

/* The pill<->bar morph animates margin-top on this sticky element. Disable
   scroll anchoring so the browser doesn't nudge the scroll position to
   compensate — that nudge is what makes the bar blink near the top. */
html {
	overflow-anchor: none;
}

/* Slides up out of view on scroll-down; slides back down on scroll-up. */
header.wp-block-template-part.criteo-header-hidden {
	transform: translateY( -120% );
	pointer-events: none;
}

/* --- Floating rounded bar (Criteo blue) ----------------------------------
   Width (not max-width) + auto margins so the float <-> full-width morph can
   animate smoothly (max-width:none / margin:auto are not animatable). */
.criteo-header-bar {
	position: relative; /* anchors the absolutely-positioned mega panel */
	z-index: 30;
	box-sizing: border-box;
	width: min( var( --wp--style--global--wide-size, 1332px ), calc( 100% - 4rem ) );
	margin-inline: auto;
	margin-top: clamp( 1rem, 2vw, 1.75rem );
	padding: 1rem 1.6rem;
	border-radius: 20px;
	/* THIS MUST STAY `primary` (#130183, brand "Blue"). IT IS A LOGO RULE, NOT TASTE.
	   Criteo Brand Guidelines v5.0, Brand Logo: the Sunrise (orange) logo is
	   sanctioned on white — preferred — and on Blue as the alt version, which is
	   exactly what this pill is. The same page states plainly: "Do not place the
	   Sunrise logo on the Electric Blue background."
	   So the pill can never take the Twilight gradient, because Twilight STARTS at
	   Electric Blue #3d1ef8. That swap has been floated once already and looks
	   tempting — it is prohibited while the header carries the orange logo. Painting
	   it Electric Blue or Twilight means switching to the white logo lockup first. */
	background-color: var( --wp--preset--color--primary, #296deb );
	box-shadow: 0 10px 34px rgba( 16, 24, 40, 0.22 );
	transition: width 0.4s ease, margin-top 0.4s ease, border-radius 0.4s ease,
		padding 0.4s ease, box-shadow 0.4s ease;
}

/* --- Full-width ("solid") state ------------------------------------------
   Once scrolled away from the top (.criteo-header-solid, toggled by JS) the
   bar spans the full width, flush to the top, with its content centered to
   the site's wide width. At the very top it stays a floating pill on every
   template (single posts included) — the JS drives the morph everywhere. */
header.criteo-header-solid .criteo-header-bar {
	width: 100%;
	margin-top: 0;
	border-radius: 0;
	padding-block: 0.85rem;
	padding-inline: max( 1.5rem, calc( ( 100% - var( --wp--style--global--wide-size, 1332px ) ) / 2 ) );
	box-shadow: 0 4px 20px rgba( 16, 24, 40, 0.18 );
}

/* The bar is always Criteo blue, so its text and icons are always white
   (palette "base"), independent of the light/dark page remap. This keeps the
   nav ("Blog", etc.), toggle and search icons readable in dark mode.
   The CTA keeps its own blue-on-white pill and is intentionally excluded. */
.wp-block-group.criteo-header-bar .wp-block-navigation,
.wp-block-group.criteo-header-bar .wp-block-navigation a,
.wp-block-group.criteo-header-bar .wp-block-navigation .wp-block-navigation-item__content,
.wp-block-group.criteo-header-bar .wp-block-site-title a,
.wp-block-group.criteo-header-bar .criteo-color-toggle {
	color: #ffffff;
}

/* ...with one exception that needs more force. The nav block carries core's
   `has-base-color`, which WordPress emits as
   `color: var(--wp--preset--color--base) !important`, and dark mode remaps
   `base` to near-black — so the nav *container* went #14171d on the blue bar.
   The links above are unaffected (that rule matches the <a> directly, and the
   anchors don't carry the preset class), but the hamburger and close buttons
   aren't links: they only inherit from the container, so in dark mode they
   turned near-black on navy. Restate white with !important to beat the preset.

   Inheritance-only, so this is safe for the cloned CTA further down: its own
   `color` declaration still wins over an inherited value. */
.wp-block-group.criteo-header-bar .wp-block-navigation,
.wp-block-group.criteo-header-bar .wp-block-navigation__responsive-container-open,
.wp-block-group.criteo-header-bar .wp-block-navigation__responsive-container-close {
	color: #ffffff !important;
}

/* Link hover = Criteo orange. Literal #fe5000 (not the tertiary preset var)
   because dark mode remaps tertiary to grey, but this navy bar wants the
   brand orange in both modes. */
.wp-block-group.criteo-header-bar .wp-block-navigation a:hover,
.wp-block-group.criteo-header-bar .wp-block-navigation a:focus,
.wp-block-group.criteo-header-bar .wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-group.criteo-header-bar .wp-block-site-title a:hover {
	color: #fe5000;
}

/* The inner flex row (logo | nav | actions) is laid out by the block itself;
   these just tune spacing/alignment. */
.criteo-header-bar .wp-block-site-logo img {
	display: block;
}

/* --- Nav tweaks so the mega-menu trigger blends with the nav links -------- */
.criteo-header-nav .wp-block-navigation {
	--wp--style--block-gap: 0;
}

/* --- Right-hand action cluster -------------------------------------------- */
.criteo-header-actions {
	align-items: center;
}

.criteo-header-tagline {
	margin: 0;
	color: rgba( 255, 255, 255, 0.85 );
	font-size: var( --wp--preset--font-size--x-small, 0.868rem );
	white-space: nowrap;
}

/* Vertical divider (a core/separator repurposed) */
.criteo-header-divider.wp-block-separator {
	align-self: center;
	width: 0;
	height: 22px;
	margin: 0;
	border: 0;
	border-left: 1px solid rgba( 255, 255, 255, 0.32 );
	opacity: 1;
}

/* Primary CTA — a white pill with a lightning icon, stands out on the blue bar */
.criteo-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	white-space: nowrap;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	background-color: #ffffff;
	font-size: var( --wp--preset--font-size--x-small, 0.868rem );
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	color: var( --wp--preset--color--primary, #296deb );
	transition: background-color 0.15s ease, transform 0.15s ease;
}

/* Hover: invert to a prominent Criteo-orange pill — white label, yellow bolt. */
.criteo-cta:hover,
.criteo-cta:focus {
	color: #ffffff;
	background-color: #fe5000;
	text-decoration: none;
	transform: translateY( -1px );
	box-shadow: 0 6px 18px rgba( 254, 80, 0, 0.45 );
}

/* The bolt uses currentColor; recolor it yellow via the SVG's color so it
   stays independent of the white label text. */
.criteo-cta:hover svg,
.criteo-cta:focus svg {
	color: #ffd43b;
}

.criteo-cta svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* --- Color-mode toggle ---------------------------------------------------- */
.criteo-color-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
	border: 0;
	background: transparent;
	color: inherit;
	line-height: 0;
	cursor: pointer;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.criteo-color-toggle:hover {
	background-color: rgba( 255, 255, 255, 0.16 );
}

.criteo-color-toggle svg {
	width: 20px;
	height: 20px;
}

.criteo-color-toggle__icon {
	display: inline-flex;
}

.criteo-color-toggle__icon--sun {
	display: none;
}

:root[data-theme="dark"] .criteo-color-toggle__icon--moon {
	display: none;
}

:root[data-theme="dark"] .criteo-color-toggle__icon--sun {
	display: inline-flex;
}

/* --- Search: transparent icon-only trigger in the bar -------------------- */
.criteo-header-actions .wp-block-search {
	margin: 0;
}

.criteo-header-actions .wp-block-search__button {
	padding: 0.4rem !important;
	background-color: transparent !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 999px !important;
}

.criteo-header-actions .wp-block-search__button:hover {
	background-color: rgba( 255, 255, 255, 0.16 ) !important;
}

.criteo-header-actions .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* --- Mega menu ------------------------------------------------------------ */
.criteo-mega {
	position: static; /* panel anchors to .criteo-header-bar */
	display: inline-flex;
	align-items: center;
}

.criteo-mega__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.6rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var( --wp--preset--font-size--small, 1.042rem );
	cursor: pointer;
}

.criteo-mega__trigger::after {
	content: "";
	width: 0.42em;
	height: 0.42em;
	margin-top: -0.2em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.15s ease;
}

.criteo-mega.is-open .criteo-mega__trigger::after {
	transform: rotate( -135deg );
	margin-top: 0.15em;
}

.criteo-mega__panel {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	top: calc( 100% + 0.6rem );
	margin: 0 auto;
	padding: 1.75rem 2rem;
	border-radius: 20px;
	background-color: var( --wp--preset--color--base, #ffffff );
	color: var( --wp--preset--color--contrast, #000000 );
	box-shadow: 0 24px 48px rgba( 16, 24, 40, 0.16 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -8px );
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
	z-index: 30;
}

.criteo-mega.is-open .criteo-mega__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* --- Categories mega menu (the "Blog" dropdown) --------------------------- */
.criteo-catmenu {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.criteo-catmenu__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.6rem;
	font-size: var( --wp--preset--font-size--small, 1.042rem );
	text-decoration: none;
	color: #ffffff;
	cursor: pointer;
	white-space: nowrap;
}

.criteo-catmenu__trigger:hover,
.criteo-catmenu__trigger:focus {
	color: #fe5000;
	text-decoration: none;
}

.criteo-catmenu__trigger::after {
	content: "";
	width: 0.42em;
	height: 0.42em;
	margin-top: -0.2em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.15s ease;
}

.criteo-catmenu.is-open .criteo-catmenu__trigger::after {
	transform: rotate( -135deg );
	margin-top: 0.15em;
}

.criteo-catmenu__panel {
	position: absolute;
	left: 0;
	top: calc( 100% + 0.6rem );
	width: min( 820px, 92vw );
	display: flex;
	gap: 1.5rem;
	padding: 1.5rem;
	border-radius: 20px;
	background-color: var( --wp--preset--color--base, #ffffff );
	color: var( --wp--preset--color--contrast, #101828 );
	box-shadow: 0 24px 48px rgba( 16, 24, 40, 0.16 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -8px );
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
	z-index: 40;
}

.criteo-catmenu.is-open .criteo-catmenu__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Left: category list */
.criteo-catmenu__cats {
	flex: 0 0 12rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0 1rem 0 0;
	list-style: none;
	border-right: 1px solid rgba( 16, 24, 40, 0.1 );
}

.criteo-catmenu__cat-item {
	margin: 0;
}

.criteo-catmenu__cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.6rem;
	border-radius: 8px;
	text-decoration: none;
	color: var( --wp--preset--color--contrast, #101828 );
	font-weight: 600;
	font-size: 0.95rem;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.criteo-catmenu__cat:hover,
.criteo-catmenu__cat.is-active {
	background-color: color-mix( in srgb, var( --wp--preset--color--primary, #296deb ) 10%, transparent );
	color: var( --wp--preset--color--primary, #296deb );
}

/* "See all articles" — the route to the full archive, as the list's last row.
   Added in 1.8.4: before it, the only link to the blog page in this component was the
   trigger anchor itself, which nothing signalled was a destination as well as a
   disclosure.

   Reads as a footer rather than a seventh category: a hairline above it, lighter weight,
   smaller, and an arrow. The arrow is a CSS ::after so it stays out of the translatable
   string and out of the accessible name.

   Colour is a NEUTRAL that resolves against the panel, never the `primary` preset.
   `primary` is #130183 in BOTH colour modes — the one preset the colour-mode toggle does
   not remap — and using it for text on this panel is exactly the bug that made these
   category labels invisible in dark mode until 1.8.3. */
.criteo-catmenu__all-item {
	margin: 0.35rem 0 0;
	padding-top: 0.35rem;
	border-top: 1px solid rgba( 16, 24, 40, 0.1 );
}

:root[data-theme="dark"] .criteo-catmenu__all-item {
	border-top-color: rgba( 255, 255, 255, 0.12 );
}

.criteo-catmenu__all {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.6rem;
	border-radius: 8px;
	text-decoration: none;
	/* Inherits the panel's text colour, so dark mode needs no override here. */
	color: inherit;
	opacity: 0.72;
	font-weight: 600;
	font-size: 0.85rem;
	transition: background-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.criteo-catmenu__all::after {
	content: "\2192";
	font-size: 0.95em;
	line-height: 1;
	transition: transform 0.12s ease;
}

.criteo-catmenu__all:hover,
.criteo-catmenu__all:focus-visible {
	color: #fe5000;
	opacity: 1;
	background-color: rgba( 254, 80, 0, 0.08 );
}

.criteo-catmenu__all:hover::after,
.criteo-catmenu__all:focus-visible::after {
	transform: translateX( 2px );
}

.criteo-catmenu__all:focus-visible {
	outline: 2px solid #fe5000;
	outline-offset: 2px;
}

/* "No previews" variant: collapse the mega-panel to a compact category list
   that hugs the names (no wide dead space, tighter padding). */
.criteo-catmenu--no-previews .criteo-catmenu__panel {
	width: max-content;
	min-width: 0;
	max-width: 90vw;
	padding: 0.6rem;
}

.criteo-catmenu--no-previews .criteo-catmenu__cats {
	flex-basis: auto;
	border-right: none;
	padding-right: 0;
}

/* Right: post previews (one set per category, toggled) */
.criteo-catmenu__previews {
	flex: 1 1 auto;
	min-width: 0;
}

.criteo-catmenu__postset {
	display: none;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.1rem;
}

.criteo-catmenu__postset.is-active {
	display: grid;
}

.criteo-catmenu__post {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
}

.criteo-catmenu__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 8px;
	overflow: hidden;
	background-color: rgba( 16, 24, 40, 0.06 );
}

.criteo-catmenu__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.criteo-catmenu__post:hover .criteo-catmenu__thumb img {
	transform: scale( 1.05 );
}

.criteo-catmenu__post-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.criteo-catmenu__post-cat {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--primary, #296deb );
}

.criteo-catmenu__post-title {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.25;
	color: var( --wp--preset--color--contrast, #101828 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.criteo-catmenu__post:hover .criteo-catmenu__post-title {
	color: var( --wp--preset--color--primary, #296deb );
}

.criteo-catmenu__post-date {
	font-size: 0.75rem;
	color: var( --wp--preset--color--tertiary, #757575 );
}

.criteo-catmenu__empty {
	margin: 0;
	color: var( --wp--preset--color--tertiary, #757575 );
	font-size: 0.9rem;
}

/* Keep the inline "Blog" nav link out of the desktop bar (the mega replaces
   it); it still appears in the mobile hamburger overlay. */
@media ( min-width: 782px ) {
	.criteo-header-nav .wp-block-navigation:not( .is-menu-open ) .criteo-nav-blog {
		display: none !important;
	}
}

/* --- Responsive: shed the bar's contents in tiers ------------------------
   The bar is a single nowrap flex row, so anything that doesn't fit doesn't
   wrap — it overflows and drags a horizontal scrollbar onto the whole page.
   Each tier below drops the least essential item still present, widest first:
     < 1200px  tagline + divider (decorative, and the widest single item)
     <  782px  the "Blog" mega-menu (its panel needs desktop room)
     <  600px  the Join Us CTA — this is where core swaps the nav for the
               hamburger, and header-scroll.js clones the CTA into the overlay,
               so the button stays reachable rather than simply disappearing. */

/* Nav labels are two words ("AI Lab", "Open Source") and were wrapping onto a
   second line everywhere below ~1366px, which stretched the bar. */
.criteo-header-nav .wp-block-navigation-item__content {
	white-space: nowrap;
}

@media ( max-width: 1199px ) {
	.criteo-header-tagline,
	.criteo-header-divider {
		display: none !important;
	}
}

@media ( max-width: 781px ) {
	.criteo-mega,
	.criteo-catmenu {
		display: none !important;
	}

	.criteo-header-bar {
		margin-top: 0.75rem;
		padding: 0.5rem 0.9rem;
		border-radius: 14px;
	}
}

@media ( max-width: 599px ) {
	.criteo-header-bar > .criteo-header-actions .criteo-cta {
		display: none !important;
	}
}

/* --- Mobile nav overlay ---------------------------------------------------
   Core renders the open menu as a position:fixed full-screen dialog. Two
   things used to break it:
   1. The sticky <header> created a containing block for fixed descendants, so
      the overlay was clipped to the header bar (see the will-change note at
      the top of this file). While the menu is open we also force `transform:
      none` so a mid-scroll `.criteo-header-hidden` can't re-trap or hide it.
   2. The bar pins its nav text to white for the blue bar — which left white
      links on the overlay's default white background. The overlay now takes
      the same Criteo blue as the bar, so the white text is correct there. */
header.wp-block-template-part:has(
		.wp-block-navigation__responsive-container.is-menu-open
	) {
	transform: none !important;
	pointer-events: auto !important;
}

/* The background carries !important on purpose. Core ships
     .wp-block-navigation:not(.has-background)
     .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
     { background-color: #fff }
   — a 5-class selector in a stylesheet that loads *after* this one. Matching it
   would mean mirroring core's exact selector and re-breaking the moment core
   edits it; the alternative (setting a background on the nav block so
   `:not(.has-background)` stops matching) would also tint the desktop bar's
   nav. One !important on one declaration is the smaller evil. */
.criteo-header-bar .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--primary, #296deb ) !important;
	padding: 1.5rem;
}

/* Roomier, thumb-sized targets — the desktop bar's tight nav spacing is far
   too small for a full-screen touch menu. */
.criteo-header-bar
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 0.25rem;
}

.criteo-header-bar
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display: block;
	padding: 0.7rem 0.25rem;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Close button: white on the blue overlay, with a comfortable tap area. */
.criteo-header-bar
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	color: #ffffff;
	padding: 0.5rem;
	margin: -0.5rem;
}

/* The "Join Us" CTA lives in .criteo-header-actions, a sibling of the nav, so
   CSS can't move it into the overlay — header-scroll.js clones it in as
   .criteo-cta--mobile. Here it's a full-width pill at the foot of the menu. */
.criteo-cta--mobile {
	display: inline-flex;
	justify-content: center;
	/* Hug the label rather than stretching across the overlay — a full-width
	   pill reads far heavier than the nav links above it. Left-aligned so it
	   sits on the same edge as those links, and still ~46px tall for touch. */
	align-self: flex-start;
	width: auto;
	margin-top: 1.75rem;
	/* 0.9rem block padding keeps the pill at the 44px minimum touch target
	   (the label's line-height is 1, so the padding does all the work). */
	padding: 0.9rem 1.4rem;
	font-size: 0.95rem;
}

/* Only ever meaningful inside the open overlay. */
.wp-block-navigation__responsive-container:not( .is-menu-open ) .criteo-cta--mobile {
	display: none;
}

/* The clone now lives inside .wp-block-navigation, so the bar's "pin nav text
   white" rule above (.criteo-header-bar .wp-block-navigation a) would win over
   .criteo-cta's own colour and leave a white label on the white pill. Restate
   the pill's colours at matching specificity. */
.criteo-header-bar .wp-block-navigation a.criteo-cta--mobile {
	color: var( --wp--preset--color--primary, #296deb );
}

.criteo-header-bar .wp-block-navigation a.criteo-cta--mobile:hover,
.criteo-header-bar .wp-block-navigation a.criteo-cta--mobile:focus {
	color: #ffffff;
}

/* --- Mobile categories accordion -----------------------------------------
   header-scroll.js builds a <details class="criteo-catmenu-mobile"> from the
   (CSS-hidden) desktop .criteo-catmenu and inserts it at the top of the open
   overlay, so phones can reach the category archives. Deliberately NOT named
   `.criteo-catmenu` — that selector is hidden below 782px and has hover-open
   handlers bound to it in the block's view.js.

   All colours are literal #ffffff / #fe5000 rather than the base/tertiary
   presets: dark mode remaps those, but this overlay is navy in both modes. */
.criteo-catmenu-mobile {
	margin-bottom: 0.25rem;
}

/* Only ever meaningful inside the open overlay. */
.wp-block-navigation__responsive-container:not( .is-menu-open ) .criteo-catmenu-mobile {
	display: none;
}

/* Matches the overlay's top-level nav links, plus a disclosure chevron. */
.criteo-catmenu-mobile__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.7rem 0.25rem;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	cursor: pointer;
	list-style: none;
}

.criteo-catmenu-mobile__summary::-webkit-details-marker {
	display: none;
}

.criteo-catmenu-mobile__summary:hover,
.criteo-catmenu-mobile__summary:focus-visible {
	color: #fe5000;
}

.criteo-catmenu-mobile__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY( -2px ) rotate( 45deg );
	transition: transform 0.15s ease;
}

.criteo-catmenu-mobile[open] .criteo-catmenu-mobile__summary::after {
	transform: translateY( 1px ) rotate( -135deg );
}

/* The category list reads as secondary to the top-level rows: smaller, dimmer,
   and indented behind a hairline rule. */
.criteo-catmenu-mobile__list {
	list-style: none;
	margin: 0.25rem 0 0.75rem;
	padding: 0 0 0 0.25rem;
	border-left: 2px solid rgba( 255, 255, 255, 0.22 );
}

.criteo-catmenu-mobile__item {
	margin: 0;
}

.criteo-catmenu-mobile__link {
	display: block;
	/* 0.7rem block padding on a 1.05rem/1.3 line clears the 44px tap target
	   (0.65rem lands at 43px — measured, not guessed). */
	padding: 0.7rem 0 0.7rem 0.9rem;
	font-size: 1.05rem;
	line-height: 1.3;
	color: #ffffff;
	opacity: 0.78;
	text-decoration: none;
}

.criteo-catmenu-mobile__link:hover,
.criteo-catmenu-mobile__link:focus {
	color: #fe5000;
	opacity: 1;
	text-decoration: none;
}

/* The accordion's summary replaces the plain "Blog" nav link (whose destination
   moves into the list as "All articles"), so hide that duplicate in the overlay.
   It's already hidden ≥782px, where the desktop dropdown replaces it. */
.wp-block-navigation__responsive-container.is-menu-open .criteo-nav-blog {
	display: none !important;
}

/* --- Post byline (criteo/post-byline) ------------------------------------
   Multi-author byline used on the cards (and reusable elsewhere). Inherits the
   surrounding text colour so it matches whatever context it sits in (card meta
   row, etc.); names link to author profiles and hover Criteo orange. */
.criteo-byline {
	font-weight: 600;
}

.criteo-byline .criteo-byline__name {
	color: inherit;
	text-decoration: none;
}

.criteo-byline .criteo-byline__name:hover,
.criteo-byline .criteo-byline__name:focus {
	color: #fe5000;
	text-decoration: underline;
}

.criteo-byline .criteo-byline__more {
	font-weight: 400;
	opacity: 0.7;
}

/* The "&" that joins two co-authors — lighter so the names stay prominent. */
.criteo-byline .criteo-byline__amp {
	font-weight: 400;
	opacity: 0.7;
}

/* --- Article sidebar (criteo/article-sidebar): reading rail -------------- */
.criteo-article-sidebar {
	font-size: 0.85rem;
	color: inherit;
}

.criteo-readmeta {
	margin-bottom: 1.5rem;
}

.criteo-readmeta__time {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var( --wp--preset--color--contrast, #15181e );
}

.criteo-progress {
	height: 4px;
	border-radius: 999px;
	background-color: rgba( 127, 127, 127, 0.22 );
	overflow: hidden;
}

.criteo-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background-color: #fe5000;
	transition: width 0.1s linear;
}

/* The TOC is a <details>; its <summary> is the "Contents" label. On desktop
   view.js forces it open and we strip the disclosure marker so it reads as a
   plain heading. On mobile (where the rail stacks above the article) it stays
   collapsed and gets a chevron + a proper tap target — see the media query. */
.criteo-toc__title {
	margin: 0 0 0.6rem;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
	list-style: none;
	cursor: pointer;
}

.criteo-toc__title::-webkit-details-marker {
	display: none;
}

@media ( max-width: 900px ) {
	.criteo-toc {
		border: 1px solid rgba( 127, 127, 127, 0.22 );
		border-radius: 14px;
	}

	.criteo-toc__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		margin: 0;
		padding: 0.85rem 1rem;
		font-size: 0.78rem;
		opacity: 0.75;
	}

	/* Chevron, rotated when open. */
	.criteo-toc__title::after {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY( -2px ) rotate( 45deg );
		transition: transform 0.15s ease;
	}

	.criteo-toc[open] .criteo-toc__title::after {
		transform: translateY( 1px ) rotate( -135deg );
	}

	.criteo-toc__list {
		padding: 0 1rem 1rem;
		border-left: 0;
	}

	/* Thumb-sized rows once expanded. */
	.criteo-toc__link {
		padding-block: 0.35rem;
	}
}

.criteo-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-left: 2px solid rgba( 127, 127, 127, 0.2 );
}

.criteo-toc__item {
	margin: 0;
}

.criteo-toc__item.is-sub {
	padding-left: 0.8rem;
}

.criteo-toc__link {
	display: block;
	margin-left: -2px;
	padding-left: 0.85rem;
	border-left: 2px solid transparent;
	color: inherit;
	opacity: 0.7;
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.12s ease, opacity 0.12s ease, border-color 0.12s ease;
}

.criteo-toc__link:hover {
	opacity: 1;
	color: #fe5000;
}

.criteo-toc__link.is-active {
	opacity: 1;
	font-weight: 600;
	color: #fe5000;
	border-left-color: #fe5000;
}