/**
 * Ardena Theme — minimal CSS for states Tailwind cannot express statically.
 * Everything else is handled by ard: Tailwind classes in the HTML.
 */

/* ---- Body defaults ----
   Specificity 0,0,0,1 — inherits everywhere but loses to any Tailwind
   utility (0,0,1,0), so block authors can override with ard:text-* etc. */
body {
	font-size: 16px;
	line-height: 1.7;
	color: #222222;
}

@media (min-width: 1024px) {
	body {
		font-size: 18px;
	}
}

/* ---- Scroll state ---- */
#ardena-header { background: transparent; }
#ardena-header.is-scrolled { background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px color-mix(in srgb, var(--ard-color-ardena-burgundy) 6%, transparent); }
#ardena-header.is-scrolled .ardena-nav-btn { color: color-mix(in srgb, var(--ard-color-ardena-dark) 60%, transparent); }
#ardena-header.is-scrolled .ardena-nav-btn:hover { color: var(--ard-color-ardena-orange); background: color-mix(in srgb, var(--ard-color-ardena-orange) 10%, transparent); }
#ardena-header.is-scrolled .ardena-logo-white { opacity: 0; }
#ardena-header.is-scrolled .ardena-logo-color { opacity: 1; }
#ardena-header.is-scrolled .ardena-mobile-toggle { color: var(--ard-color-ardena-burgundy); }
#ardena-header.is-scrolled .ardena-linkedin,
#ardena-header.is-scrolled .ardena-contact-mobile,
#ardena-header.is-scrolled .ardena-search-toggle { color: var(--ard-color-ardena-dark); background: color-mix(in srgb, var(--ard-color-ardena-dark) 10%, transparent); }
#ardena-header.is-scrolled .ardena-linkedin:hover,
#ardena-header.is-scrolled .ardena-contact-mobile:hover,
#ardena-header.is-scrolled .ardena-search-toggle:hover { color: color-mix(in srgb, var(--ard-color-ardena-dark) 60%, transparent); background: color-mix(in srgb, var(--ard-color-ardena-dark) 20%, transparent); }

/* ---- Dark header variant (light hero backgrounds) ---- */
#ardena-header.header-dark .ardena-nav-btn { color: color-mix(in srgb, var(--ard-color-ardena-dark) 60%, transparent); }
#ardena-header.header-dark .ardena-nav-btn:hover { color: var(--ard-color-ardena-orange); background: color-mix(in srgb, var(--ard-color-ardena-orange) 10%, transparent); }
#ardena-header.header-dark .ardena-logo-white { opacity: 0; }
#ardena-header.header-dark .ardena-logo-color { opacity: 1; }
#ardena-header.header-dark .ardena-mobile-toggle { color: var(--ard-color-ardena-burgundy); }
#ardena-header.header-dark .ardena-linkedin,
#ardena-header.header-dark .ardena-contact-mobile,
#ardena-header.header-dark .ardena-search-toggle { color: var(--ard-color-ardena-dark); background: color-mix(in srgb, var(--ard-color-ardena-dark) 10%, transparent); }
#ardena-header.header-dark .ardena-linkedin:hover,
#ardena-header.header-dark .ardena-contact-mobile:hover,
#ardena-header.header-dark .ardena-search-toggle:hover { color: color-mix(in srgb, var(--ard-color-ardena-dark) 60%, transparent); background: color-mix(in srgb, var(--ard-color-ardena-dark) 20%, transparent); }

/* ---- Active state (current page) ----
   Main nav: persistent orange underline bar centered under the active item.
   Reads against both transparent (white text) and scrolled/dark (dark text)
   header backgrounds. On scrolled/dark/search-open the label also turns
   orange to reinforce the state. */
.ardena-nav-btn { position: relative; }
.ardena-nav-btn.is-current::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 44px;
	height: 2px;
	background: var(--ard-color-ardena-orange);
	border-radius: 1px;
}
#ardena-header.is-scrolled .ardena-nav-btn.is-current,
#ardena-header.header-dark .ardena-nav-btn.is-current,
#ardena-header.search-open .ardena-nav-btn.is-current { color: var(--ard-color-ardena-orange); }

/* Submenu (dropdown) items — orange text + orange/5 background, matching the
   hover style, but persistent. */
.ardena-submenu-link.is-current {
	color: var(--ard-color-ardena-orange);
	background: color-mix(in srgb, var(--ard-color-ardena-orange) 6%, transparent);
}

/* Mobile primary nav active item. */
.ardena-mobile-nav-link.is-current {
	color: var(--ard-color-ardena-orange);
	background: color-mix(in srgb, var(--ard-color-ardena-orange) 6%, transparent);
}

/* ---- Desktop panel transitions ---- */
.ardena-mega-panel { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.ardena-nav-item.is-open .ardena-mega-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ardena-dropdown-panel { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.ardena-nav-item.is-open .ardena-dropdown-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ardena-flyout-panel { opacity: 0; transform: translateX(-4px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; }
.ardena-flyout-item.is-open .ardena-flyout-panel { opacity: 1; transform: translateX(0); pointer-events: auto; }

/* ---- Mega menu group switching ----
   `--accent` (inline CSS var) drives all per-group color. Hover and active
   share the same 8% light tint background; active adds the accent-colored
   indicator bar, accent title text, and tinted icon stroke. */
.ardena-mega-group-btn { background: transparent; text-decoration: none; color: inherit; display: block; }
.ardena-mega-group-btn:hover { text-decoration: none; }
.ardena-mega-group-btn:hover,
.ardena-mega-group-btn.is-active { background: color-mix(in srgb, var(--accent) 8%, white); }

/* Indicator bar — hidden by default, shown in accent on hover & active. */
.ardena-mega-group-btn .ardena-mega-group-bar { background-color: var(--accent); opacity: 0; }
.ardena-mega-group-btn:hover .ardena-mega-group-bar,
.ardena-mega-group-btn.is-active .ardena-mega-group-bar { opacity: 1; }

/* Icon wrapper tint */
.ardena-mega-group-btn .ardena-mega-group-icon { background-color: color-mix(in srgb, var(--accent) 3%, transparent); }
.ardena-mega-group-btn:hover .ardena-mega-group-icon,
.ardena-mega-group-btn.is-active .ardena-mega-group-icon { background-color: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Icon SVG stroke — accent color when active (overrides the stroke attr
   baked into the SVG markup at render time). */
.ardena-mega-group-btn.is-active .ardena-mega-group-icon svg [stroke] { stroke: var(--accent); }

/* Title — dark by default & on hover, accent color when active. */
.ardena-mega-group-btn .ardena-mega-group-title { color: var(--ard-color-ardena-dark); }
.ardena-mega-group-btn.is-active .ardena-mega-group-title { color: var(--accent); }

/* Trailing arrow */
.ardena-mega-group-btn .ardena-mega-group-arrow { color: var(--accent); opacity: 0; transform: translateX(-4px); }
.ardena-mega-group-btn:hover .ardena-mega-group-arrow,
.ardena-mega-group-btn.is-active .ardena-mega-group-arrow { opacity: 0.85; transform: translateX(0); }

.ardena-mega-content { display: none; }
.ardena-mega-content.is-active { display: flex; }

/* ---- Mega item hover (color set via JS data-color attr) ---- */
.ardena-mega-item:hover .ardena-mega-item-title { color: var(--hover-color, inherit); }

/* ---- Header search panel ----
   The panel lives inside the header so it inherits the header's transitions
   (the white background slide-down feels native to the existing scrolled
   state). It collapses to height: 0 by default, animates open from 0 to
   its content height, and switches the header to opaque white while open
   so the search input always reads against a clean background. */
.ardena-search-panel {
	max-height: 0;
	overflow: hidden;
	background: white;
	transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ardena-search-panel.is-open { max-height: 200px; border-bottom: 1px solid color-mix(in srgb, var(--ard-color-ardena-dark) 8%, transparent); }
#ardena-header.search-open { background: white; box-shadow: 0 1px 0 color-mix(in srgb, var(--ard-color-ardena-dark) 6%, transparent); }
#ardena-header.search-open .ardena-nav-btn { color: color-mix(in srgb, var(--ard-color-ardena-dark) 60%, transparent); }
#ardena-header.search-open .ardena-nav-btn:hover { color: var(--ard-color-ardena-orange); background: color-mix(in srgb, var(--ard-color-ardena-orange) 10%, transparent); }
#ardena-header.search-open .ardena-logo-white { opacity: 0; }
#ardena-header.search-open .ardena-logo-color { opacity: 1; }
#ardena-header.search-open .ardena-search-toggle,
#ardena-header.search-open .ardena-linkedin,
#ardena-header.search-open .ardena-contact-mobile { color: var(--ard-color-ardena-dark); background: color-mix(in srgb, var(--ard-color-ardena-dark) 8%, transparent); }
#ardena-header.search-open .ardena-search-toggle { color: var(--ard-color-ardena-burgundy); background: color-mix(in srgb, var(--ard-color-ardena-burgundy) 10%, transparent); }
#ardena-header.search-open .ardena-mobile-toggle { color: var(--ard-color-ardena-burgundy); }

/* Backdrop sits behind the header (z-40) so the header (z-50) stays above
   it but the rest of the page is dimmed when the search panel is open. */
.ardena-search-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(26, 10, 16, 0.4);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 40;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.ardena-search-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Native search-cancel button kills the input's pristine look — hide it
   so the layout stays consistent across browsers. */
.ardena-search-input::-webkit-search-cancel-button { display: none; }

/* ---- Search results: filter chips ----
   `--chip-color` is set inline per chip so each post type's chip carries its
   own accent. Inactive chips are neutral grey with a tinted hover; the active
   chip flips to a solid colored pill. The count badge inside the chip is a
   smaller pill that picks up the chip color at 12% opacity. */
.ardena-search-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.95rem;
	border-radius: 9999px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--ard-color-ardena-dark) 70%, transparent);
	background: white;
	border: 1px solid color-mix(in srgb, var(--ard-color-ardena-dark) 10%, transparent);
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.ardena-search-chip:hover {
	color: var(--chip-color, var(--ard-color-ardena-burgundy));
	border-color: color-mix(in srgb, var(--chip-color, #91014B) 40%, transparent);
}
.ardena-search-chip.is-active {
	background: var(--chip-color, var(--ard-color-ardena-burgundy));
	color: white;
	border-color: var(--chip-color, var(--ard-color-ardena-burgundy));
}
.ardena-search-chip-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	padding: 0 0.4rem;
	height: 1.25rem;
	border-radius: 9999px;
	font-size: 0.6875rem;
	font-weight: 700;
	background: color-mix(in srgb, var(--ard-color-ardena-dark) 6%, transparent);
	color: color-mix(in srgb, var(--ard-color-ardena-dark) 60%, transparent);
}
.ardena-search-chip.is-active .ardena-search-chip-count {
	background: rgba(255, 255, 255, 0.22);
	color: white;
}

/* ---- Search results: CPT badge on each row ----
   Small flat pill at the top of each result. Uses the same `--badge-color`
   inline-var pattern so a single class covers all post types. Color stays
   muted (12% bg, full-color text) so the row title remains the focal point. */
.ardena-search-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.65rem;
	border-radius: 9999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--badge-color, var(--ard-color-ardena-burgundy));
	background: color-mix(in srgb, var(--badge-color, #91014B) 12%, transparent);
}

/* ---- Mobile overlay / drawer ---- */
.ardena-mobile-overlay { display: none; }
.ardena-mobile-overlay.is-open { display: block; }
@media (min-width: 1024px) { .ardena-mobile-overlay { display: none !important; } }
.ardena-mobile-drawer { transform: translateX(100%); transition: transform 0.3s ease-in-out; }
.ardena-mobile-overlay.is-open .ardena-mobile-drawer { transform: translateX(0); }

/* ---- Mobile accordions ---- */
.ardena-mobile-acc-content { display: none; }
.ardena-mobile-acc-content.is-open { display: block; }

/* ---- Body scroll lock ---- */
body.ardena-noscroll { overflow: hidden; }

/* ---- Fix WP core "a:where(:not(.wp-element-button)){text-decoration:none}" overriding Tailwind hover ---- */
@media (hover: hover) {
	[class*="hover\:underline"]:hover {
		text-decoration: underline !important;
	}
}

/* ---- Content links: orange + underline only inside paragraph text ---- */
.entry-content p a,
.ardena-article-content a {
	color: var(--ard-color-ardena-orange);
	text-decoration: underline;
}
.entry-content p a:hover,
.ardena-article-content a:hover {
	color: var(--ard-color-ardena-magenta);
}

/* ---- Core heading defaults ----
   These size/weight/line-height defaults apply ONLY to WP core heading blocks
   (which always emit `.wp-block-heading`). Custom Ardena blocks use their own
   `ard:text-*` Tailwind utilities on h2/h3/h4 and must not be overridden by a
   blanket `:where(h*)` rule, so we scope these defaults to `.wp-block-heading`
   instead of using `styles.elements.h*` in theme.json. Selector specificity
   (0,1,1) is high enough to win over font-size presets the editor might apply
   only when the editor hasn't picked an explicit size — preset classes
   `.has-*-font-size` (0,1,0) lose, so we boost preset line-heights below with
   matching specificity. */
h1.wp-block-heading { font-size: var(--wp--preset--font-size--heading-1); font-weight: 700; line-height: 1.1; }
h2.wp-block-heading { font-size: var(--wp--preset--font-size--heading-2); font-weight: 700; line-height: 1.2; }
h3.wp-block-heading { font-size: var(--wp--preset--font-size--heading-3); font-weight: 700; line-height: 1.25; }
h4.wp-block-heading { font-size: var(--wp--preset--font-size--heading-4); font-weight: 600; line-height: 1.3; }
h5.wp-block-heading { font-size: var(--wp--preset--font-size--heading-5); font-weight: 600; line-height: 1.4; }
h6.wp-block-heading { font-size: var(--wp--preset--font-size--heading-6); font-weight: 600; line-height: 1.5; }

/* When the editor picks a different size preset on a heading, the explicit
   preset class needs to win over the default tag rule above. Boost specificity
   to (0,2,1) so editor choices override the per-tag defaults. */
.wp-block-heading.has-eyebrow-font-size   { font-size: var(--wp--preset--font-size--eyebrow); }
.wp-block-heading.has-small-font-size     { font-size: var(--wp--preset--font-size--small); }
.wp-block-heading.has-medium-font-size    { font-size: var(--wp--preset--font-size--medium); }
.wp-block-heading.has-large-font-size     { font-size: var(--wp--preset--font-size--large); }
.wp-block-heading.has-x-large-font-size   { font-size: var(--wp--preset--font-size--x-large); }
.wp-block-heading.has-heading-6-font-size { font-size: var(--wp--preset--font-size--heading-6); }
.wp-block-heading.has-heading-5-font-size { font-size: var(--wp--preset--font-size--heading-5); }
.wp-block-heading.has-heading-4-font-size { font-size: var(--wp--preset--font-size--heading-4); }
.wp-block-heading.has-heading-3-font-size { font-size: var(--wp--preset--font-size--heading-3); }
.wp-block-heading.has-heading-2-font-size { font-size: var(--wp--preset--font-size--heading-2); }
.wp-block-heading.has-heading-1-font-size { font-size: var(--wp--preset--font-size--heading-1); }
.wp-block-heading.has-display-font-size   { font-size: var(--wp--preset--font-size--display); }

/* ---- Font-size preset line-heights ----
   Each WP font-size preset gets a fixed line-height so editors don't have to
   match them by hand (the line-height control is hidden in theme.json). These
   classes cover any block that picks a heading size manually (e.g. a paragraph
   using the "Heading 2" font size, or a heading with a non-default size). */
.has-eyebrow-font-size   { line-height: 1.5; }
.has-small-font-size     { line-height: 1.6; }
.has-medium-font-size    { line-height: 1.7; }
.has-large-font-size     { line-height: 1.65; }
.has-x-large-font-size   { line-height: 1.5; }
.has-heading-6-font-size { line-height: 1.5; }
.has-heading-5-font-size { line-height: 1.4; }
.has-heading-4-font-size { line-height: 1.3; }
.has-heading-3-font-size { line-height: 1.25; }
.has-heading-2-font-size { line-height: 1.2; }
.has-heading-1-font-size { line-height: 1.1; }
.has-display-font-size   { line-height: 1.05; }

/* ---- Article prose ----
   Heading sizes/weights/line-heights come from theme.json (styles.elements.h*).
   Only margins and the dark/muted text colors are article-specific overrides.
   Scoped to direct children so Single Event / custom blocks nested in the post
   body keep their own utility-class typography (paragraphs inside focus-areas,
   perks, agenda etc. would otherwise inherit the 1.125rem / 1.75 leading set
   below and override their own ard:text-sm / ard:m-0 utilities on specificity). */
.ardena-article-content > p { color: var(--ard-color-ardena-dark); line-height: 1.75; font-size: 1.125rem; margin-bottom: 1.5rem; }
/* Heading sizes scoped down for long-form prose. Global theme.json presets
   are meant for marketing / landing display headings and look oversized
   when used as inline subheadings inside dense article copy. */
.ardena-article-content > h2 { color: var(--ard-color-ardena-dark); font-size: 1.5rem; line-height: 1.3; margin-top: 3rem; margin-bottom: 1.5rem; }
.ardena-article-content > h3 { color: var(--ard-color-ardena-dark); font-size: 1.25rem; line-height: 1.35; margin-top: 2rem; margin-bottom: 1rem; }
.ardena-article-content > h4 { color: var(--ard-color-ardena-dark); font-size: 1.125rem; line-height: 1.4; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.ardena-article-content > h5 { color: var(--ard-color-ardena-dark); font-size: 1rem; line-height: 1.4; margin-top: 1.25rem; margin-bottom: 0.5rem; }
.ardena-article-content > h6 { color: var(--ard-color-ardena-dark); font-size: 0.9375rem; line-height: 1.4; margin-top: 1rem; margin-bottom: 0.5rem; }
.ardena-article-content > ul, .ardena-article-content > ol { color: var(--ard-color-ardena-dark); font-size: 1.125rem; margin-bottom: 1.5rem; padding-left: 1.5rem; }
.ardena-article-content > ul { list-style: disc; }
.ardena-article-content > ol { list-style: decimal; }
.ardena-article-content > ul ul { list-style: circle; }
.ardena-article-content > ol ol { list-style: lower-alpha; }
.ardena-article-content > ul li, .ardena-article-content > ol li { margin-bottom: 0.5rem; line-height: 1.75; }
.ardena-article-content > blockquote { border-left: 4px solid var(--ard-color-ardena-magenta); padding-left: 1.5rem; margin: 2rem 0; color: color-mix(in srgb, var(--ard-color-ardena-dark) 60%, transparent); font-style: italic; }
.ardena-article-content > figure img, .ardena-article-content > img { border-radius: 0.75rem; margin: 2rem 0; }
.ardena-article-content > figure.wp-block-table { margin: 2rem 0; overflow-x: auto; }
.ardena-article-content > figure.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 1rem; color: var(--ard-color-ardena-dark); }
.ardena-article-content > figure.wp-block-table th,
.ardena-article-content > figure.wp-block-table td { padding: 0.875rem 1rem; border: 1px solid color-mix(in srgb, var(--ard-color-ardena-dark) 12%, transparent); text-align: left; vertical-align: top; line-height: 1.6; }
.ardena-article-content > figure.wp-block-table thead th { background: var(--ard-color-ardena-light); font-weight: 700; }
.ardena-article-content > figure.wp-block-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ard-color-ardena-light) 50%, transparent); }
.ardena-article-content > *:first-child { margin-top: 0; }

/* ---- Constrained layout for top-level blocks (classic theme) ----
   Block themes get this automatically via .wp-site-blocks; classic themes
   that render content with the_content() do not, so the alignment toolbar
   (None / Wide / Full) only sets classes that no rule consumes. These
   rules emulate FSE behavior for direct children of .entry-content using
   theme.json's contentSize (1216px) and wideSize (1440px). */
.entry-content > * {
	max-width: var(--wp--style--global--content-size, 1216px);
	margin-left: auto;
	margin-right: auto;
}
.entry-content > .alignwide {
	max-width: var(--wp--style--global--wide-size, 1440px);
}
.entry-content > .alignfull {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
/* Top-level <section> elements (Ardena section blocks) bleed full-width.
   Their backgrounds need to reach the viewport edges; their inner content
   is constrained by max-w-7xl inside each block's own markup. */
.entry-content > section {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ---- Core Block Styles ---- */

/* Ardena Card (core/group) */
.wp-block-group.is-style-ardena-card { border-radius: 16px; padding: 32px; background-color: var(--ard-color-ardena-light); border: 1px solid color-mix(in srgb, var(--ard-color-ardena-burgundy) 10%, transparent); }
@media (min-width: 1024px) { .wp-block-group.is-style-ardena-card { padding: 40px; } }

/* Ardena Section -- auto-apply on any full-width Group.
   Editors can override any side via the Dimensions panel; inline padding wins
   over class CSS. Padding is written per-side (not shorthand) so a single-side
   override doesn't reset the other three. */
.wp-block-group.alignfull {
	padding-top: 4rem;
	padding-right: 1.5rem;
	padding-bottom: 4rem;
	padding-left: 1.5rem;
	position: relative;
	overflow: hidden;
}
@media (min-width: 1024px) {
	.wp-block-group.alignfull {
		padding-top: 5rem;
		padding-right: 2rem;
		padding-bottom: 5rem;
		padding-left: 2rem;
	}
}

/* Numbered section badge (the "01" / "02" pill in service-detail sections).
   Two WP defaults are overridden: (1) `:where(.wp-block-group.has-background)
   { padding: 1.25em 2.375em }` adds chunky padding to any colored Group; (2)
   selfStretch:fixed only emits flex-basis, not flex-shrink:0, so a sibling
   label can squash the badge. Force a true fixed 40x40 box with no padding. */
.ardena-numbered-badge {
	flex: 0 0 40px !important;
	width: 40px !important;
	height: 40px !important;
	min-height: 40px;
	padding: 0 !important;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ardena-numbered-badge p {
	margin: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

/* Reversed two-column layout. Add "is-reversed" via the Advanced -> Additional
   CSS class(es) field on a core/columns block to flip the visual order on
   desktop: source order stays text-first / image-second (mobile reads naturally
   when columns stack), but at >=782px the row visually renders image-left /
   text-right. NOTE: editor preview does NOT honor flex-direction the same way
   the iframe doesn't run frontend CSS uniformly -- the editor will show
   text-left while the frontend shows text-right. This is intentional; we trade
   editor-preview parity for clean source-order on mobile. */
@media (min-width: 782px) {
	.wp-block-columns.is-reversed {
		flex-direction: row-reverse;
	}
}

/* Auto-round images placed inside core/columns. Editors don't need to set a
   radius style per image — any wp-block-image inside a columns block gets the
   brand 16px corner radius for free. */
.wp-block-columns .wp-block-image,
.wp-block-columns .wp-block-image img {
	border-radius: 16px;
}

/* Default core/button — orange filled, rounded-full. Matches the primary CTA
   pattern used inside Ardena custom blocks. Applies to every core/button block
   without needing a style class, so editors get the brand button by default. */
.wp-block-button .wp-block-button__link {
	background-color: var(--ard-color-ardena-orange);
	color: #fff;
	border-radius: 9999px;
	/* !important needed: core injects inline padding via undefined spacing
	   preset vars, which collapses to 0. Force the brand padding to win. */
	padding: 14px 28px !important;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: none;
	transition: background-color 0.2s ease;
	text-decoration: none;
}
.wp-block-button .wp-block-button__link:hover {
	background-color: var(--ard-color-ardena-burgundy);
	color: #fff;
}

/* Ardena Dots (core/list) */
.wp-block-list.is-style-ardena-dots { list-style: none; padding-left: 0; }
.wp-block-list.is-style-ardena-dots li { position: relative; padding-left: 20px; }
.wp-block-list.is-style-ardena-dots li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 50%; background-color: var(--ard-color-ardena-orange); }

/* Ardena Numbers (core/list) -- 01, 02, 03 prefixes in orange */
.wp-block-list.is-style-ardena-numbers { list-style: none; padding-left: 0; counter-reset: ardena-num; }
.wp-block-list.is-style-ardena-numbers li { position: relative; padding-left: 44px; counter-increment: ardena-num; margin-bottom: 12px; }
.wp-block-list.is-style-ardena-numbers li::before { content: counter(ardena-num, decimal-leading-zero); position: absolute; left: 0; top: 0.05em; font-weight: 700; font-size: 18px; color: var(--ard-color-ardena-orange); letter-spacing: 0.02em; }

/* Styled video embed */
.wp-block-video video,
.wp-block-embed.is-type-video .wp-block-embed__wrapper { border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* Back to top button */
.ardena-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	background-color: var(--ard-color-ardena-orange);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 4px 10px -4px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
	pointer-events: none;
}
.ardena-back-to-top[hidden] { display: none; }
.ardena-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.ardena-back-to-top:hover {
	background-color: var(--ard-color-ardena-burgundy);
}
.ardena-back-to-top:focus-visible {
	outline: 2px solid var(--ard-color-ardena-orange);
	outline-offset: 3px;
}
@media (max-width: 1023.98px) {
	.ardena-back-to-top,
	.ardena-back-to-top.is-visible { display: none; }
}
@media (min-width: 1024px) {
	.ardena-back-to-top {
		right: 32px;
		bottom: 32px;
		width: 48px;
		height: 48px;
	}
}

/* ---- Utility: hide on mobile (below lg / 1024px) ---- */
@media (max-width: 1023.98px) {
	.hide-on-mobile { display: none !important; }
}

/* ---- Utility: force height auto (overrides inline / block-applied heights) ---- */
.h-auto { height: auto !important; }

/* event-pad-fix: single-event blocks double-pad horizontally because each block's
   inner container repeats the gutter already applied by .ardena-article-content.
   Remove the redundant inner padding below lg so block content lines up with body copy. */
@media (max-width: 1023px) {
    .ardena-article-content [class*="wp-block-ardena-single-event-"] > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}