/* ==========================================================================
   MKT System — enhancement classes for Elementor.
   Rules of the road:
   - Every rule is opt-in through a class added in Elementor → Advanced → CSS Classes.
   - :where() keeps specificity at zero for anything Elementor also controls,
     so Elementor's own colour/spacing/typography settings always win.
   - Tunable values are CSS custom properties (override them per element with
     Elementor → Advanced → Custom CSS if you have Pro, or here).
   Documentation: CLASSES.md (also at Appearance → MKT Classes).
   ========================================================================== */

:root {
  --mkt-ink: #0a0a0a;
  --mkt-accent: #1f4fd8;
  --mkt-hero: #0b0d12;
  --mkt-hero-accent: #9db4ff;
  --mkt-border: #e8e8e5;
  --mkt-ease: cubic-bezier(.2, .7, .1, 1);
  --mkt-shadow-hover: 0 18px 40px -18px rgba(10, 10, 10, .22);
}

/* ---------- Header ---------- */
/* .mkt-header — outer container of the Header template: sticky; pairs with .mkt-header-bar.
   Normal pages: the bar keeps its Elementor styling (e.g. a white pill) and gets a soft shadow once scrolled.
   Pages with .mkt-hero: the header overlays the hero; while over it, the bar is flat, full-width and transparent
   (frosted dark once you scroll), then returns to its Elementor styling below the hero. */
.mkt-header { position: sticky; top: 0; z-index: 100; } /* behaviour, not styling: needs real specificity to stay above page sections */
.mkt-has-hero .mkt-header { position: fixed; left: 0; right: 0; width: auto !important; max-width: none !important; }
.admin-bar .mkt-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mkt-header { top: 46px; } }
/* .mkt-header-bar — the visible bar inside .mkt-header (style it in Elementor: background, radius, border, padding). */
.mkt-header-bar { position: relative; transition: max-width .45s var(--mkt-ease), border-radius .45s var(--mkt-ease), background-color .45s, border-color .45s, box-shadow .45s, padding .45s var(--mkt-ease); }
.mkt-header.is-scrolled:not(.is-over-hero) .mkt-header-bar { box-shadow: 0 12px 32px -14px rgba(10, 10, 10, .28); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); }
.mkt-header.is-over-hero { padding: 0 !important; }
.mkt-header.is-over-hero .mkt-header-bar { max-width: 100% !important; width: 100% !important; border-radius: 0 !important; background-color: transparent !important; border-color: transparent transparent rgba(255, 255, 255, .1) !important; box-shadow: none !important; padding-left: max(var(--mkt-gutter, 40px), calc((100% - 1200px) / 2)) !important; padding-right: max(var(--mkt-gutter, 40px), calc((100% - 1200px) / 2)) !important; }
.mkt-header.is-over-hero.is-scrolled .mkt-header-bar { background-color: rgba(11, 13, 18, .55) !important; backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
@media (max-width: 767px) { .mkt-header.is-over-hero .mkt-header-bar { --mkt-gutter: 16px; } }
/* .mkt-header-light-on-hero — text/icons in this element turn white while the header is over the dark hero. */
.mkt-header.is-over-hero .mkt-header-light-on-hero :is(.elementor-heading-title, .elementor-icon-list-text, .elementor-icon, a:not(.elementor-button)) { color: #fff !important; }
.mkt-header.is-over-hero .mkt-header-light-on-hero svg { fill: #fff !important; }
.mkt-header.is-over-hero .mkt-header-invert-on-hero .elementor-button { background-color: #fff !important; color: var(--mkt-ink) !important; }

/* .mkt-nav — the Icon List used as main navigation. On tablet/mobile it collapses into a panel opened by .mkt-nav-toggle. */
@media (max-width: 1024px) {
  .mkt-nav { position: absolute !important; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--mkt-border); border-radius: 20px; padding: 12px; box-shadow: 0 30px 60px -20px rgba(10,10,10,.25); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .25s var(--mkt-ease), visibility .25s; }
  .mkt-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .mkt-nav .elementor-icon-list-items { flex-direction: column; align-items: stretch !important; }
  .mkt-nav .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
  .mkt-nav .elementor-icon-list-item a { display: block; padding: 12px 14px; border-radius: 12px; }
  .mkt-nav .elementor-icon-list-item a:hover { background: #f4f4f2; }
  .mkt-header.is-over-hero .mkt-header-bar .mkt-nav.mkt-header-light-on-hero .elementor-icon-list-text { color: var(--mkt-ink) !important; }
}
/* .mkt-nav-toggle — hamburger icon that opens .mkt-nav (hide it on desktop with Elementor's Responsive → Hide on Desktop). */
.mkt-nav-toggle { cursor: pointer; }
.mkt-nav-toggle .elementor-icon { transition: transform .3s var(--mkt-ease); }
.mkt-nav-toggle[aria-expanded="true"] .elementor-icon { transform: rotate(90deg); }
/* Current page link in the nav. */
.mkt-nav .elementor-icon-list-item.is-current .elementor-icon-list-text { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

/* ---------- Hero ---------- */
/* .mkt-hero — marks the page's hero (lets the header overlay it). Layout comes from Elementor (e.g. Min Height 100vh). */
:where(.mkt-hero) { position: relative; isolation: isolate; overflow: hidden; }
/* .mkt-glow — one soft accent glow in the top-right corner. Colour via --mkt-glow. */
.mkt-glow { position: relative; isolation: isolate; overflow: hidden; }
.mkt-glow::before { content: ""; position: absolute; z-index: -1; width: 80vmax; height: 80vmax; right: -30vmax; top: -45vmax; border-radius: 50%; background: radial-gradient(circle, var(--mkt-glow, rgba(31, 79, 216, .55)), transparent 62%); pointer-events: none; }
/* .mkt-grid-lines — faint 64px grid that fades out downward. */
.mkt-grid-lines { position: relative; isolation: isolate; }
.mkt-grid-lines::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 30% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 30% 0%, #000, transparent 70%); }

/* .mkt-title-rise — headline words rise in one after another on load. */
.mkt-title-rise .mkt-w { display: inline-block; opacity: 0; transform: translateY(.4em); filter: blur(10px); animation: mkt-word-in .9s var(--mkt-ease) forwards; }
@keyframes mkt-word-in { to { opacity: 1; transform: none; filter: blur(0); } }

/* .mkt-rotate — put on a <span> inside a Heading: words separated by | cycle with a slide. */
.mkt-rotate { display: inline-grid; vertical-align: baseline; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mkt-rotate > span { grid-area: 1 / 1; white-space: nowrap; color: var(--mkt-rotate-color, inherit); transform: translateY(105%); opacity: 0; transition: transform .7s var(--mkt-ease), opacity .7s var(--mkt-ease); }
.mkt-rotate > span.is-active { transform: none; opacity: 1; }
.mkt-rotate > span.is-leaving { transform: translateY(-105%); opacity: 0; }
.mkt-hero-accent { color: var(--mkt-hero-accent); }

/* ---------- Cards & interaction ---------- */
/* .mkt-lift — card lifts with a soft tinted shadow on hover. */
:where(.mkt-lift) { transition: transform .25s var(--mkt-ease), box-shadow .25s var(--mkt-ease), border-color .25s; }
.mkt-lift:hover { transform: translateY(-3px); box-shadow: var(--mkt-shadow-hover); }
/* .mkt-tile — whole tile is clickable when it contains a link; its .mkt-tile-arrow icon turns on hover. */
.mkt-tile { position: relative; }
.mkt-tile .mkt-tile-arrow .elementor-icon { transition: transform .3s var(--mkt-ease), opacity .3s; opacity: .45; }
.mkt-tile:hover .mkt-tile-arrow .elementor-icon { transform: rotate(-45deg); opacity: 1; }
.mkt-tile.is-linked { cursor: pointer; }
/* .mkt-gray-hover — images inside start greyscale and turn to colour on hover. */
.mkt-gray-hover img { filter: grayscale(1); transition: filter .5s var(--mkt-ease), transform .5s var(--mkt-ease); }
.mkt-gray-hover:hover img, .mkt-gray-hover:focus-within img { filter: none; transform: scale(1.03); }
.mkt-gray-hover .elementor-image-box-img, .mkt-gray-hover .elementor-widget-image { overflow: hidden; }
/* .mkt-link-arrow — Button/link gets a → that nudges on hover. */
.mkt-link-arrow .elementor-button-text::after, .mkt-link-arrow a:not(.elementor-button)::after { content: "→"; display: inline-block; margin-left: .4em; transition: transform .25s var(--mkt-ease); }
.mkt-link-arrow:hover .elementor-button-text::after, .mkt-link-arrow a:hover::after { transform: translateX(3px); }

/* ---------- Typography helpers ---------- */
/* .mkt-eyebrow — small blue dot before a label heading (keep label typography in Elementor). */
.mkt-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: .55em; }
.mkt-eyebrow .elementor-heading-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mkt-eyebrow-dot, var(--mkt-accent)); flex: none; }
/* .mkt-balance — balanced line breaks for headings/paragraphs. */
.mkt-balance :is(.elementor-heading-title, p) { text-wrap: balance; }

/* ---------- Marquee ---------- */
/* .mkt-marquee — an inline Icon List becomes a slow, endless ticker (pauses on hover). */
.mkt-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mkt-marquee .elementor-icon-list-items { flex-wrap: nowrap !important; width: max-content; animation: mkt-marquee var(--mkt-marquee-speed, 40s) linear infinite; }
.mkt-marquee:hover .elementor-icon-list-items { animation-play-state: paused; }
@keyframes mkt-marquee { to { transform: translateX(-50%); } }

/* ---------- Lists & widgets ---------- */
/* .mkt-rows — WordPress "Recent Posts" widget rendered as minimal dated rows. */
.mkt-rows ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mkt-border); }
.mkt-rows li { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: baseline; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--mkt-border); }
.mkt-rows li a { font-size: 1.125rem; font-weight: 500; letter-spacing: -.015em; color: inherit; text-decoration: none; flex: 1 1 320px; }
.mkt-rows li a:hover { color: var(--mkt-accent); }
.mkt-rows .post-date { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #5c5f66; order: -1; flex: 0 0 140px; }
.mkt-rows h5, .mkt-rows .widget-title { display: none; }

/* .mkt-form — MetForm polish: rounded inputs, accent focus ring, pill submit. Field styling stays editable in MetForm/Elementor. */
.mkt-form :is(input:not([type=checkbox]):not([type=radio]), textarea, select) { border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.mkt-form :is(input, textarea, select):focus { outline: none; border-color: var(--mkt-accent) !important; box-shadow: 0 0 0 4px rgba(31, 79, 216, .12); }
.mkt-form .metform-btn { border-radius: 999px; }

/* ---------- Motion ---------- */
/* .mkt-reveal — element fades up when it scrolls into view. */
.mkt-js .mkt-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--mkt-ease), transform .6s var(--mkt-ease); }
.mkt-js .mkt-reveal.is-visible { opacity: 1; transform: none; }
.elementor-editor-active .mkt-reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mkt-marquee .elementor-icon-list-items, .mkt-title-rise .mkt-w { animation: none; opacity: 1; transform: none; filter: none; }
  .mkt-rotate > span { transition: none; }
  .mkt-js .mkt-reveal { opacity: 1; transform: none; transition: none; }
}