/* ==========================================================================
   Card system: add the classes to an Elementor container (Advanced › CSS Classes)
   or to theme markup, and the card gets the look and the hover.

   .e29-card           white card, soft shadow; hover lifts, top accent bar grows,
                      icon scales, title turns blue, "→" arrow slides.
   .e29-card--link     the whole card is one link (its title link is stretched over
                      the card); pointer cursor and a visible focus ring.
   .e29-card--subtle   for form panels and info boxes: no lift; the shadow deepens
                      and the border turns light blue.
   .e29-card--dark     for cards on a dark/blue background: lighter border and a
                      soft glow instead of a dark shadow.
   .e29-card--static   look only, no hover (e.g. legal notes).

   Only transform, opacity, box-shadow and colours animate, so hovering never
   moves the layout. Lift happens only on devices that can hover; reduced motion
   keeps the colour and shadow changes but drops movement.
   ========================================================================== */

:root {
	--e29-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--e29-dur: 300ms;
	--e29-radius: 16px;
	--e29-card-shadow: 0 1px 2px rgba(11, 27, 63, 0.05), 0 4px 14px rgba(11, 27, 63, 0.06);
	--e29-shadow-hover: 0 2px 4px rgba(0, 51, 153, 0.06), 0 16px 32px rgba(0, 51, 153, 0.16);
	--e29-shadow-subtle: 0 2px 4px rgba(11, 27, 63, 0.06), 0 8px 20px rgba(0, 51, 153, 0.1);
	--e29-border-hover: color-mix(in srgb, var(--e29-primary) 35%, var(--e29-border));
}

.e29-card {
	position: relative;
	border: 1px solid var(--e29-border);
	border-radius: var(--e29-radius);
	box-shadow: var(--e29-card-shadow);
	transition: transform var(--e29-dur) var(--e29-ease), box-shadow var(--e29-dur) var(--e29-ease), border-color var(--e29-dur) var(--e29-ease), translate 500ms var(--e29-ease), opacity 500ms var(--e29-ease);
}

.e29-card:not(.e29-card--dark) { background-color: var(--e-global-color-white, #fff); }

/* Accent bar: drawn inside the card and clipped by it (overflow: hidden), so it follows the
   rounded corners and lifts with the card. On hover it takes the place of the top border, which
   turns transparent. ::before is also Elementor's background-overlay layer on containers; cards
   never use an overlay, and every property that rule sets is reset here ("html body" outranks it). */
html body .e29-card:not(.e29-card--subtle):not(.e29-card--static) { overflow: hidden; }
html body .e29-card::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	z-index: 2;
	width: auto;
	height: 4px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--e29-accent); /* logo gold: decorative, so the 2.1:1 on white is fine */
	opacity: 1;
	mix-blend-mode: normal;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--e29-dur) var(--e29-ease);
	pointer-events: none;
}

/* Parts that react: icon, title, arrow. */
.e29-card :is(.elementor-icon, .e29-page-card__icon, .e29-card__icon) {
	transition: transform var(--e29-dur) var(--e29-ease), color var(--e29-dur) var(--e29-ease);
}
.e29-card :is(.elementor-heading-title, .elementor-icon-box-title, .e29-page-card__title, .e29-card__title) :is(a, span),
.e29-card :is(h2, h3).elementor-heading-title {
	transition: color var(--e29-dur) var(--e29-ease);
}
.e29-card :is(.e29-page-card__arrow, .e29-card__arrow) {
	display: inline-block;
	transition: transform var(--e29-dur) var(--e29-ease);
}

/* Active state: hover on devices that can hover; keyboard focus everywhere. */
.e29-card:not(.e29-card--static):is(:hover, :has(:focus-visible)) {
	box-shadow: var(--e29-shadow-hover);
	border-color: var(--e29-border-hover);
}
.e29-card:not(.e29-card--static):is(:hover, :has(:focus-visible))::before { transform: scaleX(1); }
/* The bar takes the place of the top border (no double line). */
@media (hover: hover) {
	.e29-card:not(.e29-card--static):not(.e29-card--subtle):hover { border-top-color: transparent; }
}
.e29-card:not(.e29-card--static):not(.e29-card--subtle):has(:focus-visible) { border-top-color: transparent; }
.e29-card:not(.e29-card--static):not(.e29-card--dark):is(:hover, :has(:focus-visible)) :is(.elementor-icon, .e29-page-card__icon, .e29-card__icon) {
	color: var(--e29-primary);
	transform: scale(1.08);
}
/* Title colour change on light cards only: on dark cards text always stays as it is. */
.e29-card:not(.e29-card--static):not(.e29-card--dark):is(:hover, :has(:focus-visible)) :is(.elementor-icon-box-title, .e29-page-card__title, .e29-card__title) :is(a, span),
.e29-card:not(.e29-card--static):not(.e29-card--dark):is(:hover, :has(:focus-visible)) :is(h2, h3).elementor-heading-title {
	color: var(--e29-primary);
}
.e29-card:not(.e29-card--static):is(:hover, :has(:focus-visible)) :is(.e29-page-card__arrow, .e29-card__arrow) { transform: translateX(4px); }

/* Lift: only where hovering is real, and for keyboard focus. */
@media (hover: hover) {
	.e29-card:not(.e29-card--subtle):not(.e29-card--static):hover { transform: translateY(-6px); z-index: 1; }
}
.e29-card:not(.e29-card--subtle):not(.e29-card--static):has(:focus-visible) { transform: translateY(-6px); z-index: 1; }

/* Touch screens: no hover lift (it would stick); a short pressed state on tap instead. */
@media (hover: none) {
	.e29-card:not(.e29-card--static):hover { box-shadow: var(--e29-card-shadow); border-color: var(--e29-border); }
	.e29-card:not(.e29-card--static):hover::before { transform: scaleX(0); }
	.e29-card--link:active { transform: scale(0.985); box-shadow: var(--e29-shadow-subtle); transition-duration: 90ms; }
}

/* Whole card as one link: the title link is stretched over the card. */
.e29-card--link { cursor: pointer; }
.e29-card--link :is(.e29-page-card__title, .e29-card__title, .e29-card__title) a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.e29-card--link :is(.e29-page-card__title, .e29-card__title, .e29-card__title) a:focus-visible { outline: none; }
.e29-card--link:has(:focus-visible) {
	outline: 3px solid var(--e29-focus, var(--e29-primary));
	outline-offset: 3px;
}

/* Subtle: deeper shadow and a light blue border, no lift and no accent bar. */
.e29-card--subtle:is(:hover, :has(:focus-visible)) {
	box-shadow: var(--e29-shadow-subtle);
	border-color: color-mix(in srgb, var(--e29-primary) 30%, #fff);
}
html body .e29-card--subtle::before { display: none; }

/* Dark backgrounds (navy/blue bands). Text colours never change here; the hover is the lift,
   a deeper shadow, the gold accent bar and a slightly lighter card: 6% white laid over the
   card colour with an inset shadow, which sits above the background and below the content. */
.e29-card--dark {
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 100vmax rgba(255, 255, 255, 0);
}
html body .e29-card--dark::before { background: var(--e29-accent); }
.e29-card--dark:not(.e29-card--static):is(:hover, :has(:focus-visible)) {
	border-color: rgba(255, 255, 255, 0.24);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), inset 0 0 0 100vmax rgba(255, 255, 255, 0.06);
}
@media (hover: none) {
	.e29-card--dark:not(.e29-card--static):hover:not(:has(:focus-visible)) {
		border-color: rgba(255, 255, 255, 0.14);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 100vmax rgba(255, 255, 255, 0);
	}
}

/* Static: the look without any hover. */
html body .e29-card--static::before { display: none; }

/* Scroll-in (assets/js/cards.js): cards below the fold fade up once. "translate" is separate
   from "transform", so it never fights the hover lift. */
.e29-reveal { opacity: 0; translate: 0 16px; }
.e29-reveal.is-in { opacity: 1; translate: 0 0; }
/* Non-card blocks (.e29-fade) use the same reveal; cards have their own transition list above. */
.e29-fade.e29-reveal { transition: opacity 600ms var(--e29-ease), translate 600ms var(--e29-ease); }
@media print {
	.e29-reveal { opacity: 1; translate: none; }
}

/* Buttons, site-wide: 2px lift and a soft shadow on hover (colours: site.css / Elementor kit); pressed on click. */
html body :is(.elementor-button, .e29-btn) {
	transition: background-color 200ms var(--e29-ease), color 200ms var(--e29-ease), border-color 200ms var(--e29-ease), transform 200ms var(--e29-ease), box-shadow 200ms var(--e29-ease);
}
@media (hover: hover) {
	html body :is(.elementor-button, .e29-btn):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11, 27, 63, 0.18); }
}
html body :is(.elementor-button, .e29-btn):focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11, 27, 63, 0.18); }
html body :is(.elementor-button, .e29-btn):active { transform: translateY(0); box-shadow: 0 2px 6px rgba(11, 27, 63, 0.18); transition-duration: 80ms; }
html body .e29-btn--accent:is(:hover, :focus-visible) { background: var(--e29-primary); color: #fff; }

/* Reduced motion: colour and shadow only. */
@media (prefers-reduced-motion: reduce) {
	.e29-card, .e29-card::before, .e29-card *, html body :is(.elementor-button, .e29-btn) { transition-property: box-shadow, border-color, color, background-color; }
	.e29-card:is(:hover, :has(:focus-visible), :active),
	html body :is(.elementor-button, .e29-btn):is(:hover, :focus-visible, :active) { transform: none !important; }
	.e29-card :is(.elementor-icon, .e29-page-card__icon, .e29-card__icon, .e29-page-card__arrow, .e29-card__arrow) { transform: none !important; }
	/* The bar appears at full width, without growing. */
	html body .e29-card::before { transform: scaleX(1); opacity: 0; transition: none; }
	html body .e29-card:not(.e29-card--static):is(:hover, :has(:focus-visible))::before { opacity: 1; }
	.e29-reveal { opacity: 1; translate: none; }
}