/*
 * AMA India Twenty-Six — Edupreme Template Kit Overrides
 *
 * Remaps Edupreme's colour tokens and font assignments to the AMA India
 * design system. Applied whenever the Edupreme header / footer templates
 * are active. Does not touch any page-content templates.
 *
 * Load order: enqueued AFTER elementor-frontend so CSS vars win cleanly.
 *
 * Colour mapping summary
 * ──────────────────────
 *  Edupreme Primary   #213153  →  AMA Blue Deep  #0d2160
 *  Edupreme Accent    #A51C30  →  AMA Red        #d6362f
 *  Edupreme Secondary #1E1E1E  →  AMA Ink        #1a1f33
 *  Edupreme Text      #6D6D6D  →  AMA Ink Soft   #4a5474
 *  Edupreme BG-1      #324A7D  →  AMA Blue       #1740a8
 *  Edupreme BG-2      #762F69  →  AMA Red Deep   #a82720
 *  Edupreme Accent-2  #FFD43B  →  AMA Rule       #d4c8b0
 *  Edupreme BG-Light  #F0F0F0  →  AMA Cream      #faf6ee
 *  Edupreme Border    #DBDBDB  →  AMA Rule       #d4c8b0
 *
 * Font mapping (Option B — WCAG-optimised)
 * ──────────────────────────────────────────
 *  Body slots (Lora / Noto Sans / Inter)  →  Atkinson Hyperlegible
 *  Heading slots (Lora / Instrument Serif) →  Plus Jakarta Sans 700
 */

/* ============================================================
   1. REMAP EDUPREME CUSTOM COLOUR CSS VARIABLES
   Elementor exposes each palette entry as --e-global-color-{id}.
   Overriding the Edupreme-specific IDs here means every widget
   that references them automatically picks up AMA colours.
   ============================================================ */
:root {
    /* Edupreme "Netral / White" — keep white */
    --e-global-color-308e809: #ffffff;

    /* Edupreme "Transparent" */
    --e-global-color-9eaa092: transparent;

    /* Edupreme "Border / Divider" (#DBDBDB) → AMA Rule */
    --e-global-color-a954db2: #d4c8b0;

    /* Edupreme "BG Light" (#F0F0F0) → AMA Cream */
    --e-global-color-651faef: #faf6ee;

    /* Edupreme "BG 1" medium-navy (#324A7D) → AMA Blue */
    --e-global-color-2db06a9: #1740a8;

    /* Edupreme "BG 2" purple (#762F69) → AMA Red Deep */
    --e-global-color-43f69ca: #a82720;

    /* Edupreme "Accent 2" yellow (#FFD43B) → AMA Rule/warm-gold
       Change to #d6362f to use AMA Red as the highlight instead */
    --e-global-color-88fa288: #d4c8b0;
}

/* ============================================================
   2. REMAP EDUPREME TYPOGRAPHY CSS VARIABLES
   Elementor stores each font slot as
   --e-global-typography-{id}-font-family.
   Edupreme's own slots are CHAINED to Elementor's system slots rather than
   pinned to a typeface. Previously each was nailed to "Plus Jakarta Sans" /
   "Atkinson Hyperlegible", so Site Settings → Global Fonts had no effect on any
   widget using them. Chaining keeps Edupreme's Lora/Noto Sans defaults from
   coming back while letting your global choice flow through — deleting the
   block outright would have reverted the header nav and hero to Lora.

   The three SYSTEM slots (primary / secondary / text) are deliberately NOT
   declared here any more. Pinning those is precisely what overrode Site
   Settings; they now come from Elementor alone.

   ON `body`, NOT `:root`: Elementor emits these variables on
   .elementor-kit-{id}, a class on <body>. Custom properties inherit downward
   only, so a :root declaration sits above the kit and cannot read it — the
   var() references below would silently fall through to their literals.
   ============================================================ */
body {
    /* "Header" nav font (was Noto Sans) → follows Primary */
    --e-global-typography-520c191-font-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans");
    --e-global-typography-520c191-font-weight: 600;

    /* "Footer" font (footer body copy) → follows Text.
       Footer headings are forced to the heading face by explicit h2–h6 rules below. */
    --e-global-typography-112b6c4-font-family: var(--e-global-typography-text-font-family, "Atkinson Hyperlegible");

    /* "Global Font" (the global/body default) → follows Text */
    --e-global-typography-b2ce6af-font-family: var(--e-global-typography-text-font-family, "Atkinson Hyperlegible");

    /* "Small Font" (body small print) → follows Text */
    --e-global-typography-69c152f-font-family: var(--e-global-typography-text-font-family, "Atkinson Hyperlegible");

    /* Text slot: family now comes from Site Settings, but these three stay.
       Edupreme shipped Text as 700 + letter-spacing + uppercase, which rendered
       all Elementor body copy in a bold heading style. Resetting the family
       alone would bring that back. */
    --e-global-typography-text-font-weight:    400;
    --e-global-typography-text-text-transform: none;
    --e-global-typography-text-letter-spacing: normal;

    /* Named heading slots (all Lora in Edupreme) → follow Primary */
    --e-global-typography-583e54c-font-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"); /* H1        */
    --e-global-typography-5d167aa-font-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"); /* H2        */
    --e-global-typography-d3dae9a-font-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"); /* H3        */
    --e-global-typography-83682a1-font-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"); /* H4        */
    --e-global-typography-7044a64-font-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"); /* H5        */
    --e-global-typography-84ca66e-font-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans");/* H6 label  */
    --e-global-typography-84ca66e-font-weight: 700;

    /* "Hero Title" (Lora) → follows Primary */
    --e-global-typography-3715edf-font-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans");
}

/* ============================================================
   3. HARD-OVERRIDE INLINE FONT-FAMILY OUTPUT
   Elementor sometimes inlines style="font-family:Lora" on widget
   containers. These rules catch those without !important everywhere.
   ============================================================ */

/* Scoped to .site-header / .ama-footer, NOT to the bare `header` / `footer`
   element types, and that distinction is load-bearing.

   These rules were written for the theme's own header and footer. ElementsKit
   builds this site's header and footer and emitted only <div>s, so for as long
   as that was true these selectors matched nothing and lay dormant. The moment
   an Elementor container is given an HTML Tag of `header` or `footer` — which
   is what makes it a banner / contentinfo landmark — all 69 of them would wake
   up at once and repaint an Elementor-designed header in the Edupreme palette:
   forced fonts, white nav links, navy sub-menus.

   Scoping them to the theme's own classes keeps the accessible markup and the
   Elementor design from fighting: the landmark tags are free to be correct, and
   these rules still apply if template-parts/navigation/mega-menu.php or the
   built-in footer is ever used again. Do not widen them back to element types.

   Headings in header & footer — Option B: Plus Jakarta Sans */
.site-header h1, .site-header h2, .site-header h3,
.site-header h4, .site-header h5, .site-header h6,
.ama-footer h1, .ama-footer h2, .ama-footer h3,
.ama-footer h4, .ama-footer h5, .ama-footer h6,
.site-header .elementor-heading-title,
.ama-footer  .elementor-heading-title {
    font-family: var(--font-sans);
    font-weight: 700;
}

/* Body copy & links in header & footer → Atkinson Hyperlegible (body face).
   Rule across the theme: body text = Atkinson, only headings/nav/buttons = Jakarta. */
.site-header, .ama-footer,
.site-header p, .ama-footer p,
.site-header a, .ama-footer a,
.site-header li, .ama-footer li,
.site-header span, .ama-footer span {
    font-family: var(--font-body);
}

/* Nav menus & buttons keep the UI/heading face (Plus Jakarta Sans). These
   selectors are more specific than the body rule above, so nav text — including
   text wrapped in <a>/<span> — stays Jakarta. */
.site-header .elementor-nav-menu, .ama-footer .elementor-nav-menu,
.site-header .elementor-nav-menu a, .ama-footer .elementor-nav-menu a,
.site-header .elementor-nav-menu span, .ama-footer .elementor-nav-menu span,
.ekit-nav-menu, .ekit-nav-menu .ekit-menu-nav-link,
.site-header button, .ama-footer button,
.site-header .elementor-button, .ama-footer .elementor-button {
    /* Top-level nav links only — NOT ".ekit-nav-menu *", which forced this font
       onto every widget inside the ElementsKit mega-menu panel and fought the
       pixel-perfect Elementor design. The panel is now Elementor-controlled. */
    font-family: var(--font-sans);
}

/* ============================================================
   4. HEADER — NAV LINK COLOURS
   Edupreme: deep-navy bg, white links, yellow hover.
   AMA:      deep-navy bg (remapped), white links, AMA-Red hover.
   ============================================================ */
.site-header .elementor-nav-menu > li > a,
.site-header nav a,
.ekit-nav-menu .ekit-menu-nav-link {
    color: #ffffff;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.site-header .elementor-nav-menu > li > a:hover,
.site-header .elementor-nav-menu > li.current-menu-item > a,
.site-header .elementor-nav-menu > li.current-menu-ancestor > a,
.ekit-nav-menu .ekit-menu-nav-link:hover {
    color: var(--e-global-color-secondary, #d6362f); /* AMA Red */
}

/* Dropdown / mega panel */
.site-header .elementor-nav-menu .sub-menu {
    background: #0d2160; /* AMA Blue Deep */
    border-top: 2px solid var(--e-global-color-secondary, #d6362f);
}
.site-header .elementor-nav-menu .sub-menu a {
    color: #e6ebf7; /* AMA Blue Soft — readable on deep navy */
}
.site-header .elementor-nav-menu .sub-menu a:hover {
    color: #ffffff;
    background: rgba(23, 64, 168, 0.35);
}

/* ElementsKit mega panel */
.ekit-nav-menu .ekit-megamenu-panel {
    background: #0d2160 !important;
    border-top: 2px solid var(--e-global-color-secondary, #d6362f) !important;
}
.ekit-nav-menu .ekit-megamenu-panel a {
    color: #e6ebf7 !important;
}
.ekit-nav-menu .ekit-megamenu-panel a:hover {
    color: #ffffff !important;
}

/* ============================================================
   5. HEADER — CTA BUTTON
   Edupreme accent (#A51C30) → AMA Red, 2px radius.
   ============================================================ */
.site-header .elementor-button,
.site-header .elementor-widget-button .elementor-button {
    background-color: var(--e-global-color-secondary, #d6362f) !important;
    color: #ffffff !important;
    border-radius: 2px !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    padding: 10px 22px !important;
    box-shadow: 0 3px 8px rgba(13, 33, 96, 0.18) !important;
}
.site-header .elementor-button:hover,
.site-header .elementor-widget-button .elementor-button:hover {
    background-color: var(--e-global-color-ama-rd, #a82720) !important;
    box-shadow: 0 2px 4px rgba(13, 33, 96, 0.22) !important;
}

/* ============================================================
   6. FOOTER — TYPOGRAPHY & COLOURS
   ============================================================ */
.ama-footer,
.site-footer,
.ama-footer .elementor-section,
.ama-footer .e-con {
    font-family: var(--font-body); /* body face */
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Footer body links */
.ama-footer a,
.ama-footer .elementor-icon-list-text,
.ama-footer .elementor-icon-list-item > a {
    color: #e6ebf7; /* AMA Blue Soft — readable on deep navy */
    text-decoration: none;
    transition: color 0.15s;
}
.ama-footer a:hover,
.ama-footer .elementor-icon-list-item > a:hover {
    color: #ffffff;
}

/* Footer eyebrow / label headings (H4-H6) */
.ama-footer .elementor-heading-title,
.ama-footer h4, .ama-footer h5, .ama-footer h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #d4c8b0; /* AMA Rule — warm gold label on navy */
}

/* Footer display headings (H2-H3) — Option B: Plus Jakarta Sans */
.ama-footer h2, .ama-footer h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
}

/* Footer dividers */
.ama-footer hr,
.ama-footer .elementor-divider-separator {
    border-color: rgba(212, 200, 176, 0.25) !important; /* AMA Rule low-opacity */
}

/* Footer CTA / subscribe button */
.ama-footer .elementor-button {
    background-color: var(--e-global-color-secondary, #d6362f) !important;
    color: #ffffff !important;
    border-radius: 2px !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    text-transform: none !important;
}
.ama-footer .elementor-button:hover {
    background-color: var(--e-global-color-ama-rd, #a82720) !important;
}

/* Footer social icons */
.ama-footer .elementor-social-icon {
    background-color: rgba(23, 64, 168, 0.35) !important;
    border-radius: 3px !important;
    transition: background-color 0.15s !important;
}
.ama-footer .elementor-social-icon:hover {
    background-color: var(--e-global-color-secondary, #d6362f) !important;
}

/* Footer copyright bar */
.ama-footer .elementor-text-editor,
.ama-footer .copyright,
.ama-footer [class*="copyright"] {
    font-size: 0.75rem;
    color: #8898b8;
    font-family: var(--font-body); /* body face */
}

/* ============================================================
   7. GLOBAL BUTTON NORMALISATION
   Edupreme: uppercase, 0px radius.
   AMA:      sentence-case, 2px radius, Plus Jakarta Sans.
   ============================================================ */
.elementor-button {
    border-radius: 2px !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}

/* ============================================================
   8. CATCH HARD-CODED YELLOW (#FFD43B) INLINE STYLES
   Any widget that has the Edupreme yellow baked in as an inline
   background-color gets remapped to AMA Rule (warm parchment).
   ============================================================ */
[style*="#FFD43B"],
[style*="ffd43b"],
[style*="FFD43B"] {
    background-color: #d4c8b0 !important;
    color: #0d2160 !important;
}

/* ============================================================
   9. PAGE-TRANSITION PRELOADER
   Edupreme uses its Accent colour for the preloader ring.
   Remap to AMA Red.
   ============================================================ */
.e-page-transition__preloader-path {
    stroke: var(--e-global-color-secondary, #d6362f) !important;
}

/* ============================================================
   10. POST CARD SPECIFICITY GUARDS
   This file loads after elementor-frontend, so these rules
   reliably beat .elementor-kit-N h3/img/a inline styles.
   Selectors use parent+element+class to reach (0,2,1)+(0,3,1)
   which always wins over the Kit's (0,1,1).
   ============================================================ */

/* Image: fill the 16:9 padding-top box — beats .elementor img */
.ama-post-card img.ama-post-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Title: beats .elementor-kit-N h3 font-size/weight overrides */
.ama-post-card h3.ama-post-card__title {
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
}

/* Title link: beats .elementor-kit-N a color */
.ama-post-card h3.ama-post-card__title a {
    color: inherit;
    text-decoration: none;
}

/* Title link hover: beats .elementor-kit-N a:hover red color */
.ama-post-card h3.ama-post-card__title a:hover {
    color: var(--arc-maroon, #8a3a2a) !important;
    text-decoration: none !important;
}

/* View All button hover: beats .elementor-kit-N a:hover */
a.ama-rp__view-all:hover,
a.ama-sp-related__view-all:hover {
    background: #1a2744 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Read More button hover.
   Uses --e-global-color-accent directly rather than --arc-gold: that variable
   is scoped to .ama-archive-wrap, and this selector also has to cover the
   related-posts widget, whose cards render outside that wrapper. Same value,
   one less thing to be in scope. See ama-posts-archive.css for why the colour
   is derived rather than written out. */
a.ama-post-card__read-more:hover {
    background: var(--e-global-color-accent, #c89b3c) !important;
    background: color-mix(in srgb, var(--e-global-color-accent, #c89b3c) 85%, #000) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ============================================================
   11. ELEMENTSKIT MOBILE MENU & HAMBURGER FIXES
   ElementsKit renders the mega panel under .elementskit-menu-container
   (NOT .ekit-megamenu-panel that the older rules above targeted).
   ============================================================ */

/* ── Hamburger toggle (markup: <button class="elementskit-menu-hamburger
      elementskit-menu-toggler"><svg class="ekit-menu-icon ekit-svg-icon">).
      IMPORTANT: do NOT set `display` here — ElementsKit hides this on desktop
      and shows it on mobile itself. Forcing display made it appear on desktop.
      We only give it a tappable size and (critically) size the SVG, which had
      no width/height and was collapsing to a thin line. ───────────────────── */
.elementskit-menu-hamburger.elementskit-menu-toggler,
.elementskit-menu-hamburger,
.ekit_menu_responsive_bar {
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    text-align: center;
    line-height: 1;
    cursor: pointer;
}
/* The SVG icon itself — give it real dimensions and the AMA colour */
.elementskit-menu-hamburger .ekit-menu-icon,
.elementskit-menu-hamburger svg,
.ekit_menu_responsive_bar svg {
    width: 26px;
    height: 26px;
    fill: var(--blue-deep, #0d2160);
    display: inline-block;
    vertical-align: middle;
}
/* icon-font fallback (other ElementsKit versions use an <i>) */
.elementskit-menu-hamburger i,
.ekit_menu_responsive_bar i {
    font-size: 1.625rem !important;
    line-height: 1 !important;
    color: var(--blue-deep, #0d2160) !important;
}
/* On hover/active the toggler background turns blue — flip the icon to white so
   it isn't blue-on-blue (invisible). */
.elementskit-menu-hamburger:hover .ekit-menu-icon,
.elementskit-menu-hamburger:hover svg,
.elementskit-menu-hamburger.elementskit-menu-toggler:hover svg,
.elementskit-menu-hamburger.active .ekit-menu-icon,
.elementskit-menu-hamburger.active svg {
    fill: #ffffff !important;
}
.elementskit-menu-hamburger:hover i,
.elementskit-menu-hamburger.active i {
    color: #ffffff !important;
}

/* ── Mega panel inside the MOBILE off-canvas drawer only. Scoped to ≤767px (the
      width at which ElementsKit switches to the drawer and caps it to 325px) so
      the desktop mega — which needs Elementor's Stretch to lay out its 4 columns
      — is never affected. ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .elementskit-menu-container,
    .ekit-wid-con .elementskit-menu-container {
        /* Only clip horizontal spill — do NOT touch height; ElementsKit's drawer
           is full-height with its own vertical scroll, and overriding it shrank
           the drawer to half the screen. */
        overflow-x: hidden;
    }

    /* Drawer top-level menu links (e.g. "About Us") — ElementsKit renders these
       in its own small default font. Match the site nav: Plus Jakarta Sans, a
       readable size and the AMA blue. Scoped to mobile so the desktop nav
       (white-on-dark header) is untouched. */
    .elementskit-menu-container .ekit-menu-nav-link {
        font-family: var(--font-sans);
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: .01em;
        color: var(--blue-deep, #0d2160);
    }
    .elementskit-menu-container .ekit-menu-nav-link:hover {
        color: var(--red, #d6362f) !important;
    }
    /* Submenu dropdown indicator arrow — only match the link colour. Do NOT set
       width/height: ElementsKit sizes this arrow via its own padding/font-size,
       so a fixed width/height shrank it to a tiny down-arrow. */
    .elementskit-menu-container .ekit-menu-nav-link .elementskit-submenu-indicator {
        fill: currentColor !important;
    }
    /* Neutralise Elementor's "stretched section" JS inside the mobile slide panel.
       It sets an inline width (e.g. 502px = full viewport) plus a negative left,
       which overflows ElementsKit's narrower drawer. Force the section to fit. */
    .elementskit-menu-container .elementor-section.elementor-section-stretched,
    .elementskit-menu-container .elementor-section,
    .elementskit-menu-container .e-con,
    .elementskit-menu-container .elementor-container {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }
    /* NOTE: the theme no longer tweaks the mega-panel column padding / widget
       margins / section padding on mobile — that spacing is now owned by the
       Elementor design. Only the overflow + stretch-fit guards above remain (they
       prevent the panel spilling outside the 325px drawer). To re-enable the old
       theme spacing tweaks, restore the column/widget/section padding rules here. */
}

/* ============================================================
   12. MEGA MENU — hand layout to ElementsKit / Elementor.
   The mega-menu panel is built pixel-perfect in Elementor. The theme's
   GLOBAL heading/text rules (heading margin-bottom, line-height 1.1,
   letter-spacing −0.5px, etc. from style.css) leaked into the panel and
   shifted the spacing vs the editor. Neutralise those defaults inside the
   panel so the live output matches what you built. Elementor's own
   per-widget settings have higher specificity and still win — this only
   strips the theme's defaults where Elementor sets nothing.
   ──> To re-enable theme styling inside the mega menu, delete this block.
   ============================================================ */
.elementskit-menu-container :is(h1, h2, h3, h4, h5, h6),
.elementskit-menu-container .elementor-heading-title,
.elementskit-menu-container p {
    margin-top: 0;
    margin-bottom: 0;
    line-height: normal;
    letter-spacing: normal;
}

/* Icon List: keep the leading icon a constant size, and align it to the FIRST
   line of text — i.e. visually centred for single-line items, and at the top of
   line 1 for items that wrap to two lines.
   Elementor's icon-list-item is a flex row with the icon as a shrinkable child
   set to align-items:center, so a long title (a) squeezes the icon to 1–2px and
   (b) vertically centres it against both lines. We lock the icon size, top-align
   it, then nudge it down ~half a line so it sits on the first line rather than at
   the very top. (Tune the margin-top if your icon/text sizes differ.) */
.elementskit-menu-container .elementor-icon-list-items .elementor-icon-list-item {
    align-items: flex-start;
}
.elementskit-menu-container .elementor-icon-list-icon {
    flex: 0 0 auto;            /* never shrink the icon */
    align-self: flex-start;
    margin-top: 0.3em;                   /* drop onto the first line, not the top */
}
.elementskit-menu-container .elementor-icon-list-icon svg,
.elementskit-menu-container .elementor-icon-list-icon i {
    flex: 0 0 auto;            /* keep the glyph at its set size */
}

/* ============================================================
   13. TOP-LEVEL MENU BAR — three selectable desktop layouts.
   The active layout is chosen in Appearance → AMA Templates → Mega Menu,
   which prints ONE body class. Desktop only (≥768px) — the mobile drawer is
   a vertical list with its own layout.

     Body class                 Setting label
     ───────────────────────    ──────────────────────────────────────────
     ama-megamenu--equal-left   Equal columns, left-aligned (default)
     ama-megamenu--auto-gaps    Equal spacing — single row, one line each
     ama-megamenu--one-line     One line, wrap bar

   OVERFLOW SAFETY (all layouts): a single un-spaceable word (e.g.
   "Thisisatestfor") has no place to wrap, so by default it spills out of its
   box — over the dropdown arrow and into the next item. `overflow-wrap:
   anywhere` lets such a word break so it can NEVER overflow; in the two
   content-width layouts each item is also at least as wide as its label, so
   the label shows in full on one line.
   ============================================================ */
@media (min-width: 768px) {

    /* ── Shared defaults (apply to every layout) ────────────────────────── */
    /* Bar stays on one row by default; the "one-line" layout re-enables wrap. */
    .elementskit-menu-container > ul,
    .elementskit-menu-container .elementskit-navbar-nav,
    #ekit-megamenu-main-menu > ul,
    #ekit-megamenu-main-menu .elementskit-navbar-nav {
        flex-wrap: nowrap;
    }
    .elementskit-menu-container > ul > li,
    .elementskit-menu-container .elementskit-navbar-nav > li {
        min-width: 0;                   /* allow shrink so labels can wrap to fit */
    }
    .elementskit-menu-container .ekit-menu-nav-link {
        white-space: normal; /* word-wrap by default ("one-line" overrides) */
        overflow-wrap: anywhere;        /* break an over-long single word instead of
                                           letting it spill over the arrow / next item */
        word-break: break-word;         /* older-engine fallback for the same */
        line-height: 1.2;
        text-align: left;               /* left-aligned (default), never centred */
        justify-content: flex-start;    /* if the link is a flex row */
    }
    /* Dropdown indicator arrow — always inline + visible, never shrunk to 0.
       Fixes the "arrow disappears / gets overlapped" bug in EVERY layout. */
    .elementskit-menu-container .ekit-menu-nav-link .elementskit-submenu-indicator {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        fill: currentColor !important;
        color: currentColor !important;
    }

    /* ── Layout A (DEFAULT) — Equal columns, left-aligned ───────────────────
       Every item the SAME width; long labels wrap to fit one row, and an
       over-long single word breaks (shared rule) so it never overflows. NOTE:
       a very long title in a crowded menu can still wrap to several lines here
       — that is inherent to equal columns; use "Auto width" or "One line" if
       that bothers you. */
    body.ama-megamenu--equal-left .elementskit-menu-container > ul > li,
    body.ama-megamenu--equal-left .elementskit-menu-container .elementskit-navbar-nav > li {
        flex: 1 1 0 !important;
    }

    /* ── Layout B — Equal spacing, single row (auto-fit) ───────────────────
       The clean classic nav: every label on ONE line, distributed evenly across
       the FULL width of the menu section. Items are NEVER shrunk per-item (so
       "Home" never becomes "H…"); instead `ama-megamenu-fit.js` sizes the WHOLE
       menu's font (via --ama-nav-fs) as large as fits, so it reads as a proper
       relative size and only steps down on narrow screens. clamp() = no-JS
       fallback.

       • align-items:stretch → every trigger is full bar height, so hovering
         from the link down into the mega panel never crosses a dead gap.
       • justify-content:space-between → the auto-fit first GROWS the font (big,
         bold), then any width the text doesn't consume is shared out as even
         gaps, so the row fills the WHOLE section left-to-right (first item flush
         left, last flush right). Big font + full-width fill + even spacing.

       The menu container is forced to fill its header column below — without
       that, ElementsKit shrink-wraps it to its content, which made the JS
       measure a moving target so the font collapsed to the floor. */

    /* Make the ElementsKit Nav-Menu WIDGET take the leftover header space (the
       gap between the logo and the cart / search icons) — but bounded, never
       wider. flex:1 1 0% + min-width:0 is the key: it lets the widget GROW into
       the free space yet also SHRINK below its content width, so its content can
       never push the header (and the page) wider than the viewport. The
       auto-fit then sizes the font to that bounded width. (Works when the header
       is an Elementor flex Container; otherwise set the widget width to "Grow"
       in Elementor.) */
    body.ama-megamenu--auto-gaps .elementor-widget-ekit-nav-menu {
        flex: 1 1 0%;
        min-width: 0;        /* allow shrinking below content → no page overflow */
        max-width: 100%;
        box-sizing: border-box;
    }
    body.ama-megamenu--auto-gaps .elementor-widget-ekit-nav-menu > .elementor-widget-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    body.ama-megamenu--auto-gaps .elementskit-menu-container,
    body.ama-megamenu--auto-gaps #ekit-megamenu-main-menu {
        width: 100%;
        max-width: 100%;
        min-width: 0;        /* propagate the shrink down the chain */
        flex: 1 1 auto;
        box-sizing: border-box;  /* width:100% must INCLUDE any padding */
    }
    body.ama-megamenu--auto-gaps .elementskit-menu-container > ul,
    body.ama-megamenu--auto-gaps .elementskit-menu-container .elementskit-navbar-nav,
    body.ama-megamenu--auto-gaps #ekit-megamenu-main-menu > ul,
    body.ama-megamenu--auto-gaps #ekit-megamenu-main-menu .elementskit-navbar-nav {
        flex-wrap: nowrap;   /* one row */
        box-sizing: border-box;
        width: 100%;         /* = the bounded container width; the JS budget */
        min-width: 0;
        margin: 0;           /* kill default list margin/padding so 100% can't overflow */
        padding-left: 0;
        padding-right: 0;
        align-items: stretch;     /* full-height triggers → no hover dead-zone */
        justify-content: space-between;  /* spread to fill the full width */
    }
    body.ama-megamenu--auto-gaps .elementskit-menu-container > ul > li,
    body.ama-megamenu--auto-gaps .elementskit-menu-container .elementskit-navbar-nav > li {
        flex: 0 0 auto;      /* natural width, NEVER shrink → no crushing */
        align-self: stretch;
        margin: 0;
    }
    /* TOP-LEVEL links only. The child combinators (> li >) keep every rule off
       the mega-panel contents, which are built in Elementor and styled there. */
    body.ama-megamenu--auto-gaps #ekit-megamenu-main-menu > ul > li > a.ekit-menu-nav-link,
    body.ama-megamenu--auto-gaps .elementskit-menu-container > ul > li > a.ekit-menu-nav-link,
    body.ama-megamenu--auto-gaps .elementskit-menu-container .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
        display: flex;
        align-items: center;            /* vertically centre the label in the full-height link */
        white-space: nowrap; /* each label stays on ONE line */
        padding-left: 14px;  /* comfortable, even spacing between items */
        padding-right: 14px;
    }
    /* Font-size — TOP-LEVEL ONLY (note `> ul > li > a`, never `ul li a`, so the
       Elementor mega-panel links are untouched). JS sets --ama-nav-fs on the ul;
       clamp() is the no-JS fallback. The `#ekit-megamenu-main-menu` ID is needed
       to out-rank ElementsKit's own `#ekit-megamenu-main-menu ul li a` rule.
       Bold for a bright, crisp look. */
    body.ama-megamenu--auto-gaps #ekit-megamenu-main-menu > ul > li > a.ekit-menu-nav-link,
    body.ama-megamenu--auto-gaps #ekit-megamenu-main-menu > ul > li > a,
    body.ama-megamenu--auto-gaps .elementskit-menu-container > ul.elementskit-navbar-nav > li > a.ekit-menu-nav-link {
        font-size: var(--ama-nav-fs, clamp(0.85rem, 0.4rem + 1.1vw, 1.5rem));
        font-weight: 700;
    }

    /* ── Layout C — One line, wrap bar ─────────────────────────────────────
       Keeps every label on ONE line at full size and packed to the left; if
       they can't all fit, the BAR drops to a tidy second row (it does NOT
       shrink the font or clamp titles the way "Equal spacing" does). */
    body.ama-megamenu--one-line .elementskit-menu-container > ul,
    body.ama-megamenu--one-line .elementskit-menu-container .elementskit-navbar-nav,
    body.ama-megamenu--one-line #ekit-megamenu-main-menu > ul,
    body.ama-megamenu--one-line #ekit-megamenu-main-menu .elementskit-navbar-nav {
        flex-wrap: wrap !important;
        row-gap: 2px;
        align-items: stretch;
    }
    body.ama-megamenu--one-line .elementskit-menu-container > ul > li,
    body.ama-megamenu--one-line .elementskit-menu-container .elementskit-navbar-nav > li {
        flex: 0 0 auto !important;
    }
    body.ama-megamenu--one-line .elementskit-menu-container .ekit-menu-nav-link {
        white-space: nowrap !important;
    }
}

/* ============================================================
   14. AMA FLOATING HEADER MODULES (Search / Cart)
   The AMA Search & Mini-Cart Elementor widgets can be pulled out of the header
   and floated on screen (fixed) so the menu bar can use the full width. The
   trait adds these classes + custom-properties to the widget's OUTER element
   (`.elementor-element`) via its `_wrapper`, so the whole widget leaves the
   header flow when floated:
     class="ama-float ama-float--<position> ama-float--scope-<scope>"
     style="--ama-float-x; --ama-float-y; --ama-float-z;"
   Position offsets are harmless until the element is actually fixed, so a
   Desktop-scoped float stays in normal flow on mobile (≤768px) untouched.
   ============================================================ */

/* Offsets — only affect a positioned (fixed) element; no-op while static. */
.ama-float--top-right    { top: var(--ama-float-y, 20px);    right: var(--ama-float-x, 20px); left: auto; bottom: auto; }
.ama-float--bottom-right { bottom: var(--ama-float-y, 20px); right: var(--ama-float-x, 20px); left: auto; top: auto; }
.ama-float--center-right { top: 50%;                          right: var(--ama-float-x, 20px); left: auto; bottom: auto; }
.ama-float--top-left     { top: var(--ama-float-y, 20px);    left:  var(--ama-float-x, 20px); right: auto; bottom: auto; }
.ama-float--bottom-left  { bottom: var(--ama-float-y, 20px); left:  var(--ama-float-x, 20px); right: auto; top: auto; }
.ama-float--center-left  { top: 50%;                          left:  var(--ama-float-x, 20px); right: auto; bottom: auto; }

/* Activate fixed positioning + the centre transform — ALL views. */
.ama-float--scope-all {
    position: fixed !important;
    z-index: var(--ama-float-z, 999);
}
.ama-float--scope-all.ama-float--center-right,
.ama-float--scope-all.ama-float--center-left {
    transform: translateY(-50%);
}

/* Desktop-only float: fixed positioning + centre transform apply ≥769px only,
   so on mobile the module stays exactly where it was in the header. */
@media (min-width: 769px) {
    .ama-float--scope-desktop {
        position: fixed !important;
        z-index: var(--ama-float-z, 999);
    }
    .ama-float--scope-desktop.ama-float--center-right,
    .ama-float--scope-desktop.ama-float--center-left {
        transform: translateY(-50%);
    }
}

/* ============================================================
   14b. AMA UTILITY DOCK — align multiple floating modules as ONE stack.

   Two ways to get Search / Account / Mini-Cart to line up on screen instead of
   each claiming its own corner (which overlaps and collides with the chatbot):

   OPTION A — `.ama-dock` class (DIY):
     Put the modules in ONE Elementor Container (or Column), then add the CSS
     class `ama-dock` to that container, plus a position modifier:
       ama-dock ama-dock--top-right
     The container becomes a fixed, auto-stacking flex strip: its children line
     up with a consistent gap and can never overlap each other. Offsets reuse the
     same --ama-float-x/y tokens; set them with an inline style on the container
     (Advanced ▸ Custom CSS or a wrapper style) or accept the 20px defaults.
     Add `ama-dock--desktop` to keep it in normal flow on mobile (≤768px).

   OPTION B — the "AMA Utility Bar" widget (turnkey):
     One widget that bundles all three modules pre-aligned; float it as a unit
     with the standard Placement controls. Styled by `.ama-utility-bar` below.

   Reserve the BOTTOM-RIGHT corner for the chatbot launcher — dock/float the
   utilities to a top or left position so the two never sit on top of each other.
   ============================================================ */

/* Shared offset tokens (same names as the single-widget float). */
.ama-dock--top-right    { top: var(--ama-float-y, 20px);    right: var(--ama-float-x, 20px); left: auto; bottom: auto; }
.ama-dock--bottom-right { bottom: var(--ama-float-y, 20px); right: var(--ama-float-x, 20px); left: auto; top: auto; }
.ama-dock--center-right { top: 50%;                          right: var(--ama-float-x, 20px); left: auto; bottom: auto; }
.ama-dock--top-left     { top: var(--ama-float-y, 20px);    left:  var(--ama-float-x, 20px); right: auto; bottom: auto; }
.ama-dock--bottom-left  { bottom: var(--ama-float-y, 20px); left:  var(--ama-float-x, 20px); right: auto; top: auto; }
.ama-dock--center-left  { top: 50%;                          left:  var(--ama-float-x, 20px); right: auto; bottom: auto; }

/* Turn the container into a fixed, auto-stacking flex strip. Works for both the
   Flexbox Container (children are direct .elementor-element) and the legacy
   Column (children live in .elementor-widget-wrap). */
.ama-dock {
    display: flex;
    flex-direction: var(--ama-dock-dir, column);
    gap: var(--ama-dock-gap, 14px);
    align-items: var(--ama-dock-align, center);
    z-index: var(--ama-float-z, 999);
    width: max-content;
    max-width: min(92vw, 420px);
}
.ama-dock > .elementor-widget-wrap {
    display: flex;
    flex-direction: var(--ama-dock-dir, column);
    gap: var(--ama-dock-gap, 14px);
    align-items: var(--ama-dock-align, center);
    width: 100%;
}
.ama-dock > .elementor-widget-wrap > .elementor-widget { margin-bottom: 0 !important; }

/* Activate the fixed positioning + centre transform — all views by default. */
.ama-dock { position: fixed !important; }
.ama-dock.ama-dock--center-right,
.ama-dock.ama-dock--center-left { transform: translateY(-50%); }

/* Desktop-only dock: stays in normal header flow on mobile. */
.ama-dock--desktop { position: static !important; transform: none; }
@media (min-width: 769px) {
    .ama-dock--desktop { position: fixed !important; }
    .ama-dock--desktop.ama-dock--center-right,
    .ama-dock--desktop.ama-dock--center-left { transform: translateY(-50%); }
}

/* ── Option B: the AMA Utility Bar widget ─────────────────────────────────── */
.ama-utility-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}
.ama-utility-bar__item {
    display: flex;
    align-items: center;
}

/* ============================================================
   15. PAGE — kill the horizontal scrollbar from off-screen panels.
   ElementsKit's off-canvas sidebar + overlay, the mega-menu panels, and the
   AMA mini-cart drawer are parked OFF-SCREEN to the right when closed (with
   real coordinates, not just transforms), so they extend the page width and
   add a horizontal scrollbar. Clipping horizontal overflow at the root removes
   the scrollbar. `clip` (not `hidden`) is used on purpose: it does NOT create a
   scroll container, so the sticky header keeps working, and it leaves vertical
   scrolling untouched. Panels still display normally when opened (they animate
   INTO the viewport, where they are not clipped).
   ============================================================ */
html,
body {
    overflow-x: clip;
}

/* ============================================================
   16. BUTTONS — never underline button text.
   A global link-underline (Elementor Kit "Link" typography, applied
   to <a>) bleeds onto button-styled links, so buttons show an
   underline under their label. Strip it from buttons site-wide,
   normal + hover/focus, while leaving genuine text links untouched.
   ============================================================ */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.button,
.button,
.wp-block-button__link,
.elementor-button,
.ekit-btn,
.sdm_download,
.woocommerce a.button,
.woocommerce button.button,
.single_add_to_cart_button,
.added_to_cart,
.checkout-button,
.ama-search-filter,
.hmc__cat-pill,
.hml__cat-pill,
a.button:hover,
a.button:focus,
.button:hover,
.button:focus,
.wp-block-button__link:hover,
.elementor-button:hover,
.elementor-button:focus,
.sdm_download:hover,
.sdm_download:focus,
.single_add_to_cart_button:hover,
.added_to_cart:hover {
    text-decoration: none !important;
}

/* ============================================================
   17. HEADER / MEGA-MENU STACKING
   Keep the ElementsKit header and its dropdown / mega-menu panels
   above ALL page content. Some content creates its own stacking
   context with a positive z-index — e.g. FooGallery album "pile"
   uses z-index:10 — which otherwise paints over the menu. Lifting
   the header container (a positioned stacking context at a high
   z-index) puts the whole menu + its dropdowns above everything.
   ============================================================ */
.elementor-location-header {
    position: relative;
    z-index: 9999;
}
.elementskit-menu-container,
.elementskit-navbar-nav,
.elementskit-navbar-nav .elementskit-submenu-panel,
.elementskit-megamenu-panel,
#ekit-megamenu-main-menu {
    z-index: 9999 !important;
}

/* ============================================================
   ICON BOX — let a link inherit the colour set on its wrapper
   ============================================================
   Elementor's Icon Box renders its title as

       <span class="elementor-icon-box-title"><a href="…">Text</a></span>

   and its "Title Color" control paints the SPAN, not the anchor. Colour is an
   inherited property, but an inherited value always loses to any rule that
   matches the element directly — and Elementor's kit emits
   `.elementor-kit-25 a { color: … }`, which matches the anchor. So the title
   colour someone sets in the editor is applied, and then ignored, and the link
   silently keeps the global link colour. On a dark section that produced
   #1a1f33 text on a navy backdrop: 1.60:1.

   Making the anchor inherit fixes every icon box at once instead of per widget.
   Specificity here is (0,2,1) against the kit's (0,1,1), so this wins; and a
   colour genuinely set ON the anchor still outranks `inherit`, so a deliberate
   per-widget link colour keeps working. */
.elementor-widget-icon-box .elementor-icon-box-title a,
.elementor-widget-icon-box .elementor-icon-box-description a {
    color: inherit;
}

/* ============================================================
   12. ELEMENTOR IMAGE CAROUSEL — keep the image's own proportions
   ============================================================
   Elementor constrains the carousel viewport to a fixed ratio:

     .elementor-widget-image-carousel .elementor-image-carousel-wrapper
     { aspect-ratio: 16 / 9; }                        (0,2,0)

   That is why changing Image Size in the widget — medium_large, full,
   anything — made no difference to the cropping: the box is a fixed
   16:9 and whichever file loads has to fit it, so a portrait or square
   image loses its top and bottom.

   NOT ours. Neither the theme nor ama-features mentions the carousel
   anywhere, and the Elementor 4.3.5 copy in PLUGINTHEME has no
   aspect-ratio in its carousel stylesheet at all — so this arrived
   with a newer Elementor on the live site.

   `aspect-ratio: auto` returns the wrapper to sizing from its content.
   The repeated class puts this at (0,3,0) against Elementor's (0,2,0),
   so it wins on specificity and does not depend on which stylesheet
   loads last — the same reason the button and social-icon overrides
   above are written this way rather than with !important.

   Note this restores TRUE proportions, which means slides of differing
   shapes no longer share a height. Swiper still sizes the track to the
   tallest slide, so mixed portrait/landscape sets will show space
   around the shorter ones. That is Swiper working as intended, not a
   second bug; the cure for it is consistent source images, or a ratio
   with object-fit: contain, which crops nothing.
   ============================================================ */
.elementor-widget-image-carousel .elementor-image-carousel-wrapper.elementor-image-carousel-wrapper {
    aspect-ratio: auto;
}