/*
 * The Argus design system.
 *
 * Derived from the finished homepage, not written in the abstract: every value below was
 * measured off a section that has already been approved. This file is the single source
 * for the tokens; the homepage stylesheets consume them, and internal pages inherit them.
 *
 * It declares tokens and a small number of named styles. It does not compose pages —
 * that stays in Elementor.
 */

:root {
	/* Colour ---------------------------------------------------------------
	   plum       the brand ground: hero, final call, dark fields
	   plum-2     the lighter end of the hero gradient
	   magenta    interaction and accent — links, affordances, kickers
	   orange     the second accent, used sparingly for primary action
	   lavender   the lightest plum tint: quiet full-width fields
	   cream      the warm light field: the teacher story
	   ink        body and heading text on light ground
	   muted      metadata, leads, captions
	   line       hairlines, borders, dividers */
	--argus-plum: #281030;
	--argus-plum-2: #42164b;
	--argus-magenta: #cb3ca5;
	--argus-orange: #ff7a1a;
	--argus-lavender: #ffffff;
	--argus-cream: #ffffff;
	--argus-ink: #2e1735;
	--argus-muted: #6f6274;
	--argus-line: rgba(46, 23, 53, .12);

	/* Layout ---------------------------------------------------------------
	   The mobile gutter was measured, not chosen: nine of the twelve homepage
	   sections already sat at 18px. Full-width backgrounds reach the viewport
	   edges; content inside them respects the gutter. */
	--argus-gutter: 18px;
	--argus-gutter-wide: 34px;
	--argus-grid: 1240px;
	--argus-measure: 660px;

	/* Display heading — LOCKED ---------------------------------------------
	   The «ΜΙΧΑΛΗΣ ΔΙΑΜΑΝΤΑΡΑΣ» specification, approved as the reference for
	   every section title and page title. 40px at mobile and tablet, scaling to
	   55px from approximately 1223px up. */
	--argus-display-family: Roboto, sans-serif;
	--argus-display-weight: 700;
	--argus-display-size: clamp(40px, 4.5vw, 55px);
	--argus-display-leading: 1.2;
	--argus-display-tracking: -.04em;
	--argus-display-transform: uppercase;
	--argus-display-color: var(--argus-ink);

	/* Kicker — the small tracked label above a display heading. */
	--argus-kicker-size: 13px;
	--argus-kicker-weight: 800;
	--argus-kicker-tracking: .16em;

	/* Lead — the paragraph under a display heading. */
	--argus-lead-size: 18px;
	--argus-lead-leading: 1.75;

	/* Section rhythm. */
	--argus-section-y: 110px;
	--argus-section-y-mobile: 72px;
}

/* Site-wide display title ---------------------------------------------------
   Add `argus-section-title` to every primary Elementor section heading.
   The legacy homepage and teacher classes remain aliases so existing sections
   receive the same specification without page-specific typography rules. */
.argus-section-title .elementor-heading-title,
.argus-home-section-title .elementor-heading-title,
.argus-teacher-v3-section-title .elementor-heading-title {
	color: var(--argus-display-color) !important;
	font-family: var(--argus-display-family) !important;
	font-size: var(--argus-display-size) !important;
	font-weight: var(--argus-display-weight) !important;
	letter-spacing: var(--argus-display-tracking) !important;
	line-height: var(--argus-display-leading) !important;
	max-width: 920px;
	text-transform: var(--argus-display-transform) !important;
}

.argus-section-title--light .elementor-heading-title,
.argus-home-section-title--light .elementor-heading-title,
.argus-teacher-v3-section-title--light .elementor-heading-title,
.argus-teacher-v3-zimia .argus-teacher-v3-section-title .elementor-heading-title {
	color: #fff !important;
}

/* Native TheGem loading states ------------------------------------------------
   Keep the theme's markup, timing and concentric motion, but replace its default
   cyan / blue palette with the Argus interaction colours. The page-level loader
   sits on the brand plum field; component, gallery, search and lightbox loaders
   inherit the same rings on their existing surfaces. */
#page-preloader {
	background-color: var(--argus-plum);
}

#page-preloader .page-preloader-spin,
.block-preloader .page-preloader-spin,
.preloader-spin {
	border-top-color: var(--argus-magenta);
}

#page-preloader .page-preloader-spin::before,
.block-preloader .page-preloader-spin::before,
.preloader-spin::before {
	border-top-color: var(--argus-orange);
}

#page-preloader .page-preloader-spin::after,
.block-preloader .page-preloader-spin::after,
.preloader-spin::after {
	border-top-color: var(--argus-plum-2);
}

#page-preloader .page-preloader-spin::after {
	border-top-color: var(--argus-cream);
}

.gem-fancybox-preloader .preloader-spin::after {
	border-top-color: var(--argus-orange);
}

.preloader-spin-new {
	border-color: var(--argus-magenta);
}

/* TheGem still paints its older pale-blue GIF behind the current ring spinner.
   Remove that redundant image only when the native `.preloader-spin` child is
   present; legacy loaders without the ring keep their original fallback. */
.preloader:has(> .preloader-spin)::after {
	background: var(--argus-cream);
}

/*
 * Primary navigation states on internal pages.
 *
 * The homepage establishes the interaction language: magenta type on the
 * transparent header field, without a filled tab or framed rectangle. TheGem
 * otherwise gives current items its own pale background / framed active style,
 * depending on the selected header variant. Keep the theme's structure,
 * spacing, dropdown panels and sticky behaviour; only align the visible state.
 * The responsive `.argus-mobile-accordion` has its own approved state language
 * and remains the authority below the desktop breakpoint.
 */
body:not(.home) #site-header .header-main:not(.header-layout-fullwidth_hamburger) #primary-menu.no-responsive > li:hover > a,
body:not(.home) #site-header .header-main:not(.header-layout-fullwidth_hamburger) #primary-menu.no-responsive > li.menu-item-current > a,
body:not(.home) #site-header .header-main:not(.header-layout-fullwidth_hamburger) #primary-menu.no-responsive > li.menu-item-active > a,
body:not(.home) #site-header .header-main:not(.header-layout-fullwidth_hamburger) #primary-menu.no-responsive > li.current-menu-item > a,
body:not(.home) #site-header .header-main:not(.header-layout-fullwidth_hamburger) #primary-menu.no-responsive > li.current-menu-ancestor > a {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	color: var(--argus-to-menu-level1-light-hover-color, var(--argus-magenta));
}

/* Transparent desktop dropdowns keep TheGem's existing one-pixel separators,
   but colour them with the same pale plum used by the submenu hover background.
   Sticky and responsive menus retain their own established treatments. */
@media (min-width: 1213px) {
	#site-header:not(.shrink) #primary-menu.no-responsive ul.sub-menu > li:not(.dl-back):not(:last-child) {
		border-bottom-color: #d9d3dd !important;
	}
}

/* Internal desktop headers use one logo asset and one large footprint in both
   the transparent and sticky states. The sticky colour treatment stays distinct;
   only TheGem's automatic swap to its smaller logo is neutralised. */
@media (min-width: 1213px) {
	body:not(.home) #site-header .site-title {
		padding-bottom: 15px !important;
		padding-top: 15px !important;
	}

	body:not(.home) #site-header .site-title a img.default,
	body:not(.home) #site-header .site-title a img.small {
		height: auto !important;
		width: 320px !important;
	}

	body:not(.home) #site-header.fixed.shrink .site-title a img.default {
		opacity: 1 !important;
		visibility: visible !important;
	}

	body:not(.home) #site-header.fixed.shrink .site-title a img.small {
		opacity: 0 !important;
		visibility: hidden !important;
	}
}

/* Top-header social glyphs keep their quiet white resting state, then reveal each
   platform's recognisable brand colour on hover or keyboard focus. The circular
   container, spacing, size, and header colour fields remain unchanged. */
#site-header #top-area .socials-item .socials-item-icon::before {
	display: inline-block;
	transition: color .18s ease, opacity .18s ease, text-shadow .18s ease;
}

#site-header #top-area .socials-item:hover .socials-item-icon.facebook,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.facebook,
#site-header #top-area .socials-item:hover .socials-item-icon.facebook::before,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.facebook::before {
	color: #1877f2 !important;
	-webkit-text-fill-color: #1877f2 !important;
}

#site-header #top-area .socials-item:hover .socials-item-icon.linkedin,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.linkedin,
#site-header #top-area .socials-item:hover .socials-item-icon.linkedin::before,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.linkedin::before {
	color: #0a66c2 !important;
	-webkit-text-fill-color: #0a66c2 !important;
}

#site-header #top-area .socials-item:hover .socials-item-icon.twitter,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.twitter,
#site-header #top-area .socials-item:hover .socials-item-icon.twitter::before,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.twitter::before {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

#site-header #top-area .socials-item:hover .socials-item-icon.instagram,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.instagram,
#site-header #top-area .socials-item:hover .socials-item-icon.instagram::before,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.instagram::before {
	-webkit-background-clip: text;
	background-image: linear-gradient(135deg, #833ab4 0%, #c13584 30%, #e1306c 55%, #f77737 78%, #fcaf45 100%);
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

#site-header #top-area .socials-item:hover .socials-item-icon.pinterest,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.pinterest,
#site-header #top-area .socials-item:hover .socials-item-icon.pinterest::before,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.pinterest::before {
	color: #e60023 !important;
	-webkit-text-fill-color: #e60023 !important;
}

#site-header #top-area .socials-item:hover .socials-item-icon.youtube,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.youtube,
#site-header #top-area .socials-item:hover .socials-item-icon.youtube::before,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.youtube::before {
	color: #f00 !important;
	-webkit-text-fill-color: #f00 !important;
}

#site-header #top-area .socials-item:hover .socials-item-icon.whatsapp,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.whatsapp,
#site-header #top-area .socials-item:hover .socials-item-icon.whatsapp::before,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.whatsapp::before {
	color: #25d366 !important;
	-webkit-text-fill-color: #25d366 !important;
}

#site-header #top-area .socials-item:hover .socials-item-icon.viber,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.viber,
#site-header #top-area .socials-item:hover .socials-item-icon.viber::before,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.viber::before {
	color: #7360f2 !important;
	-webkit-text-fill-color: #7360f2 !important;
}

#site-header #top-area .socials-item:hover .socials-item-icon.tiktok,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.tiktok,
#site-header #top-area .socials-item:hover .socials-item-icon.tiktok::before,
#site-header #top-area .socials-item:focus-visible .socials-item-icon.tiktok::before {
	color: #25f4ee !important;
	filter: drop-shadow(1px 0 0 #fe2c55);
	-webkit-text-fill-color: #25f4ee !important;
	text-shadow: 1px 0 #fe2c55 !important;
}

/*
 * Page headers — three proposals.
 *
 * Every one has the same job in its first 195px: the Argus navigation is transparent and
 * its links are white, on internal pages exactly as on the homepage. So each proposal has
 * to hand the navigation a dark ground for that strip. None of them introduces a second
 * header — they solve the context beneath the one header, which is the rule.
 */

/* A page header is the first thing on the page, so the theme's content wrapper — which
   pads every ordinary page by 135px at the top — has to get out of its way. Scoped by
   `:has()` to pages that actually carry one, so no other page is affected. */
body:has(.argus-ph) #main,
body:has(.argus-ph) .block-content { padding-top: 0; }

/* The theme wraps page content in `.container > .panel > .panel-center`, which is 1212px
   wide with 21px of padding. A page header has to reach the viewport edges, so on pages
   that carry one those wrappers step aside — the same escape the homepage already makes.
   The content inside the header still sits on the site grid via `.argus-ph-inner`. */
body:has(.argus-ph) .block-content > .container,
body:has(.argus-ph) .block-content .panel,
body:has(.argus-ph) .block-content .panel-center {
	/* `.panel` is a Bootstrap-style row carrying -21px side margins that cancel
	   `.panel-center`'s 21px padding. Removing only the padding shifts the whole page
	   21px to the left, which is what clipped the headings at mobile. Both go. */
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.argus-ph {
	position: relative;

	/* TheGem prints an inline rule for Elementor heading widgets:
	   `.elementor-widget-heading h1.elementor-heading-title { font-size: var(--argus-to-h1-font-size) !important; … }`
	   — every property marked !important. Rather than answer !important with more of
	   it, the locked display values are fed into TheGem's own custom properties here.
	   The inline rule then resolves them from this scope and prints the Argus
	   specification, which is what `!important` is for. */
	--argus-to-h1-font-family: var(--argus-display-family);
	--argus-to-h1-font-size: var(--argus-display-size);
	--argus-to-h1-font-weight: var(--argus-display-weight);
	--argus-to-h1-font-style: normal;
	--argus-to-h1-letter-spacing: var(--argus-display-tracking);
	--argus-to-h1-line-height: calc(var(--argus-display-size) * var(--argus-display-leading));
	--argus-to-h1-text-transform: var(--argus-display-transform);
}
.argus-ph .argus-ph-inner {
	margin: 0 auto;
	max-width: var(--argus-grid);
	padding: 0 var(--argus-gutter-wide);
	position: relative;
	z-index: 2;
}
.argus-ph .argus-ph-kicker,
.argus-ph .argus-ph-kicker .elementor-heading-title {
	color: var(--argus-magenta);
	font-size: var(--argus-kicker-size);
	font-weight: var(--argus-kicker-weight);
	letter-spacing: var(--argus-kicker-tracking);
	margin: 0 0 18px;
	text-transform: uppercase;
}
.argus-ph .argus-ph-title,
.argus-ph .argus-ph-title .elementor-heading-title {
	font-family: var(--argus-display-family);
	font-size: var(--argus-display-size);
	font-weight: var(--argus-display-weight);
	letter-spacing: var(--argus-display-tracking);
	line-height: var(--argus-display-leading);
	margin: 0;
	max-width: 15ch;
	text-transform: var(--argus-display-transform);
}
.argus-ph .argus-ph-lead,
.argus-ph .argus-ph-lead p {
	font-size: var(--argus-lead-size);
	line-height: var(--argus-lead-leading);
	margin: 26px 0 0;
	max-width: 560px;
}
.argus-ph .argus-ph-meta,
.argus-ph .argus-ph-meta p {
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 700;
	gap: 12px;
	letter-spacing: .13em;
	margin: 34px 0 0;
	text-transform: uppercase;
}

/* --- A. Editorial masthead -------------------------------------------------
   A deep plum field with the title set left rather than centred, and nothing in
   it but type. The navigation ground is the field itself, so no scrim is
   needed. */
.argus-ph--a {
	background:
		radial-gradient(circle at 88% 8%, rgba(203, 60, 165, .30), transparent 34%),
		linear-gradient(135deg, var(--argus-plum) 0%, var(--argus-plum-2) 100%);
	padding: 232px 0 96px;
}
.argus-ph--a .argus-ph-title,
.argus-ph--a .argus-ph-title .elementor-heading-title { color: #fff; }
.argus-ph--a .argus-ph-lead,
.argus-ph--a .argus-ph-lead p { color: rgba(255, 255, 255, .74); }
.argus-ph--a .argus-ph-meta,
.argus-ph--a .argus-ph-meta p { color: rgba(255, 255, 255, .52); }
.argus-ph--a .argus-ph-rule {
	background: rgba(255, 255, 255, .18);
	height: 1px;
	margin: 44px 0 0;
}

/* --- A2. Editorial masthead, separated from the navigation ------------------
   A's composition, with the one thing that did not work about it changed: A ran the
   masthead and the menu together on a single plum field, so the page never visibly
   began — the navigation dissolved into the title.

   A2 splits that into a plum band whose only job is to be the navigation's ground, and
   a pale field that is the page. The separation is the colour change itself: no rule,
   no divider, no shadow. A boundary you can see at a glance is stronger than a line,
   and it survives being scrolled past.

   The field is `--argus-lavender`, the palette's lightest plum — a tonal step down from
   the band rather than a change of temperature, so the two read as one system. Swapping
   it for `--argus-cream` is a one-token change if a warmer page is wanted. */
.argus-ph--a2-band {
	background:
		radial-gradient(circle at 88% 12%, rgba(203, 60, 165, .30), transparent 36%),
		linear-gradient(135deg, var(--argus-plum) 0%, var(--argus-plum-2) 100%);
	/* Match the 206px internal desktop header footprint. The normal header is transparent,
	   so this native Elementor band must cover its full height just as the sticky field does. */
	min-height: 206px;
}
.argus-ph--a2-band > .elementor-container { min-height: 206px; }

.argus-ph--a2 {
	background: var(--argus-lavender);
	padding: 54px 0 58px;
}
/* The masthead sits on the site grid; the field behind it reaches the viewport edges. */
/* This Elementor build wraps columns in `.elementor-container`, so alignment set on the
   container alone never reaches them. The title and the intro share a baseline: the
   metadata lands level with the last line of the headline, which is what makes the
   asymmetry read as composed rather than merely unequal. */
.argus-ph--a2 > .elementor-container { align-items: flex-end; display: flex; }
.argus-ph--a2 > .elementor-container {
	align-items: flex-end;
	gap: 48px;
	margin: 0 auto;
	max-width: var(--argus-grid);
	padding: 0 var(--argus-gutter-wide);
}
.argus-ph--a2 .elementor-column { padding: 0; }
.argus-ph--a2 .elementor-widget { margin-bottom: 0; }

.argus-ph--a2 .argus-ph-title,
.argus-ph--a2 .argus-ph-title .elementor-heading-title { color: var(--argus-ink); max-width: 13ch; }
.argus-ph--a2 .argus-ph-lead,
.argus-ph--a2 .argus-ph-lead p { color: var(--argus-muted); margin: 0; max-width: none; }
.argus-ph--a2 .argus-ph-meta,
.argus-ph--a2 .argus-ph-meta p { color: var(--argus-muted); margin: 22px 0 0; }

/* --- B. Photographic -------------------------------------------------------
   The page opens on a photograph. A plum scrim across the top keeps the white
   navigation legible whatever the picture is doing underneath it. */
.argus-ph--b {
	align-items: flex-end;
	display: flex;
	min-height: 620px;
	overflow: hidden;
	padding: 0 0 76px;
}
.argus-ph--b:before {
	background: linear-gradient(rgba(24, 9, 30, .84) 0%, rgba(24, 9, 30, .30) 40%, rgba(24, 9, 30, .78) 100%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}
.argus-ph--b .argus-ph-title,
.argus-ph--b .argus-ph-title .elementor-heading-title { color: #fff; max-width: 17ch; }
.argus-ph--b .argus-ph-lead,
.argus-ph--b .argus-ph-lead p { color: rgba(255, 255, 255, .80); }
.argus-ph--b .argus-ph-meta,
.argus-ph--b .argus-ph-meta p { color: rgba(255, 255, 255, .60); }
.argus-ph--b .argus-ph-credit {
	color: rgba(255, 255, 255, .45);
	font-size: 11px;
	letter-spacing: .1em;
	margin: 30px 0 0;
	text-transform: uppercase;
}

/* --- C. Field and card -----------------------------------------------------
   A shallow plum strip gives the navigation its ground, and the title then sits
   in a white card straddling the edge of it — the page title as an object, the
   way the questions are objects, rather than a band to scroll past. */
.argus-ph--c {
	background: var(--argus-lavender);
	padding: 0 0 72px;
}
/* The strip is its own section. Two columns in one Elementor section sit side by side,
   which put the card next to the plum instead of over it — and straight under the menu. */
.argus-ph--c-strip {
	background:
		radial-gradient(circle at 80% 30%, rgba(203, 60, 165, .26), transparent 38%),
		linear-gradient(135deg, var(--argus-plum) 0%, var(--argus-plum-2) 100%);
	height: 306px;
}
.argus-ph--c .argus-ph-card {
	background: #fff;
	border: 1px solid var(--argus-line);
	border-radius: 28px;
	box-shadow: 0 26px 60px rgba(31, 11, 36, .13);
	margin-top: -104px;
	padding: 52px 56px 48px;
}
.argus-ph--c .argus-ph-title,
.argus-ph--c .argus-ph-title .elementor-heading-title { color: var(--argus-ink); }
.argus-ph--c .argus-ph-lead,
.argus-ph--c .argus-ph-lead p { color: var(--argus-muted); }
.argus-ph--c .argus-ph-meta,
.argus-ph--c .argus-ph-meta p { color: var(--argus-muted); margin-top: 0; }
.argus-ph--c .argus-ph-card-foot {
	align-items: center;
	border-top: 1px solid var(--argus-line);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin: 36px 0 0;
	padding: 22px 0 0;
}

@media (max-width: 1024px) {
	.argus-ph--a { padding: 208px 0 72px; }
	.argus-ph--a2 { padding: 44px 0 48px; }
	.argus-ph--a2 > .elementor-container { gap: 34px; }
	.argus-ph--b { min-height: 520px; }
	.argus-ph--c .argus-ph-card { padding: 40px 34px 36px; }
}

@media (max-width: 767px) {
	.argus-ph .argus-ph-inner { padding: 0 var(--argus-gutter); }
	.argus-ph .argus-ph-title,
.argus-ph .argus-ph-title .elementor-heading-title { max-width: none; }
	.argus-ph .argus-ph-lead,
.argus-ph .argus-ph-lead p { margin-top: 20px; }
	.argus-ph .argus-ph-meta,
.argus-ph .argus-ph-meta p { margin-top: 26px; }
	.argus-ph--a { padding: 168px 0 56px; }
	.argus-ph--a2-band,
	.argus-ph--a2-band > .elementor-container { min-height: 216px; }
	.argus-ph--a2 { padding: 34px 0 38px; }
	.argus-ph--a2 > .elementor-container { display: block; padding: 0 var(--argus-gutter); }
	.argus-ph--a2 .argus-ph-title,
	.argus-ph--a2 .argus-ph-title .elementor-heading-title { max-width: none; }
	.argus-ph--a2 .argus-ph-lead { margin-top: 22px; }
	.argus-ph--b { min-height: 470px; padding-bottom: 46px; }
	.argus-ph--c { padding-bottom: 52px; }
	.argus-ph--c-strip { height: 196px; }
	.argus-ph--c .argus-ph-card { border-radius: 20px; margin-top: -64px; padding: 30px 22px 26px; }
}

/* Elementor gives every widget a bottom margin of its own; the named styles above own
   the spacing in these headers, so the wrapper contributes none. */
.argus-ph .elementor-widget { margin-bottom: 0; }
.argus-ph .elementor-widget-container { margin: 0; }

/* Shared accessible enlargement for embedded YouTube players. */
.argus-youtube-expand {display:block;margin:12px auto 20px;border:0;border-radius:99px;padding:12px 24px;min-height:44px;background:#722c76;color:#fff;font:600 14px/1.4 Roboto,Arial,sans-serif;cursor:pointer;}
.argus-youtube-expand:hover {background:#4e265e;}
.argus-youtube-expand:focus-visible {outline:3px solid #f58220;outline-offset:4px;}
iframe:fullscreen {width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;border:0!important;}

iframe.argus-youtube-expanded {position:fixed!important;inset:70px 3vw 3vh!important;width:94vw!important;height:calc(97dvh - 70px)!important;max-width:none!important;max-height:none!important;z-index:2147483000!important;background:#000;border:0!important;border-radius:0!important;box-shadow:0 0 0 100vmax rgba(20,10,24,.96);}
.argus-youtube-expand.argus-youtube-close {position:fixed;top:12px;right:3vw;margin:0;z-index:2147483001;background:#722c76;}
body.argus-video-viewing #site-header-wrapper,
body.argus-video-viewing #site-header,
body.argus-video-viewing .scroll-top-button {visibility:hidden!important;}

/* The close control lives directly under body, above editor/admin stacking contexts. */
body.argus-video-viewing #wpadminbar {visibility:hidden!important;}
body > .argus-youtube-expand.argus-youtube-close {position:fixed!important;inset:12px 3vw auto auto!important;z-index:2147483647!important;min-height:44px;visibility:visible!important;opacity:1!important;box-shadow:0 0 0 2px #fff;}
/* Responsive accordion: separated sections and clear expanded hierarchy. */
@media (max-width: 1212px) {
    #site-header #primary-navigation.responsive .minisearch .sf-input {
        background: rgba(255, 255, 255, .9) !important;
        border-color: rgba(255, 255, 255, .65) !important;
        color: #2b1534 !important;
    }
    #site-header #primary-navigation.responsive .minisearch .sf-input::placeholder {
        color: rgba(43, 21, 52, .7) !important;
    }
    #site-header #primary-navigation.responsive .minisearch .sf-submit-icon:before {
        color: #4e265e !important;
    }
    #site-header #primary-navigation.argus-mobile-accordion #primary-menu > li:not(.menu-item-search) {
        border-bottom: 1px solid rgba(209, 201, 218, .3) !important;
    }
    /* The first section has no preceding row separator to close its top edge. */
    #site-header #primary-navigation.argus-mobile-accordion #primary-menu > li:first-child:is(.argus-submenu-open, .menu-item-active, .menu-item-current, .current-menu-item, .current_page_item, .current-menu-ancestor) {
        border-top: 1px solid rgba(209, 201, 218, .3) !important;
    }
    #site-header #primary-navigation.argus-mobile-accordion #primary-menu > li.argus-submenu-open,
    #site-header #primary-navigation.argus-mobile-accordion #primary-menu > li:is(.menu-item-active, .menu-item-current, .current-menu-item, .current_page_item, .current-menu-ancestor):not(.argus-submenu-open) {
        border-left: 1px solid rgba(209, 201, 218, .3) !important;
        border-right: 1px solid rgba(209, 201, 218, .3) !important;
        box-sizing: border-box;
    }
    #site-header #primary-navigation.argus-mobile-accordion #primary-menu li > ul.dl-submenu,
    #site-header #primary-navigation.argus-mobile-accordion #primary-menu li > ul.dl-submenu > li > a {
        background: #fff !important;
        color: #2b1534 !important;
    }
    #site-header #primary-navigation.argus-mobile-accordion #primary-menu li > ul.dl-submenu > li:not(.dl-back) {
        border-bottom: 1px solid rgba(43, 21, 52, .16) !important;
    }
    #site-header #primary-navigation.argus-mobile-accordion #primary-menu > li:not(.argus-submenu-open) > a:hover,
    #site-header #primary-navigation.argus-mobile-accordion #primary-menu > li:not(.argus-submenu-open) > a:focus-visible {
        background: transparent !important;
    }
    #site-header #primary-navigation.argus-mobile-accordion #primary-menu li.argus-submenu-open > a {
        background: #4e265e !important;
        color: #fff !important;
    }
}


/* Shared editorial text links — Argus, 2026-10-02. */
:root {
    --argus-content-link: #A658B3;
    --argus-content-link-hover: #572666;
}

body #main :is(.elementor-widget-text-editor, p, blockquote, .entry-content li) a:not(:is(.elementor-button, .gem-button, .button, [role="button"])):not(:has(img, svg)),
body #main .wp-block-paragraph a {
    color: var(--argus-content-link) !important;
}

body #main :is(.elementor-widget-text-editor, p, blockquote, .entry-content li) a:not(:is(.elementor-button, .gem-button, .button, [role="button"])):not(:has(img, svg)):is(:hover, :focus-visible),
body #main .wp-block-paragraph a:is(:hover, :focus-visible) {
    color: var(--argus-content-link-hover) !important;
}

/* Back to top follows the site's circular controls and plum/magenta palette. */
body .scroll-top-button {
    --argus-scroll-top-button-size: 46px;
    --argus-scroll-top-button-icon-size: 24px;
    --argus-scroll-top-button-background-color: var(--argus-plum, #281030);
    --argus-scroll-top-button-arrow-color: #fff;
    --argus-scroll-top-button-border-style: solid;
    --argus-scroll-top-button-border: 1px;
    --argus-scroll-top-button-border-color: rgba(255, 255, 255, .25);
    --argus-scroll-top-button-border-radius: 50%;
    --argus-scroll-top-button-hover-background-color: var(--argus-magenta, #cb3ca5);
    --argus-scroll-top-button-hover-arrow-color: #fff;
    --argus-scroll-top-button-hover-border-color: rgba(255, 255, 255, .25);
    right: 24px;
    bottom: 24px;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(40, 16, 48, .18);
}
body .scroll-top-button.visible { opacity: 1; }
body .scroll-top-button::before { transition: background-color .18s ease; }
body .scroll-top-button:focus-visible { outline: 2px solid var(--argus-magenta, #cb3ca5); outline-offset: 4px; }
body .scroll-top-button:focus-visible::before { background-color: var(--argus-magenta, #cb3ca5); }
@media(max-width:767px) { body .scroll-top-button { right: 18px; bottom: 18px; } }