/* ==========================================================================
   edm.css — "app-like" UI layer: floating header card, pill badges, rounded
   cards, outline + solid CTA pair, floating enquiry button, article meta row
   and "In this article" card. Loads after fix.css / apple.css / modules.css.
   ========================================================================== */
:root { --edm-blue: #2045D8; --edm-line: #d6def0; --edm-r: clamp(22px, 3vw, 32px); }

/* ---- 1. floating header card (sticky state) ------------------------------ */
.header-area .menu-area.sticky-menu, .header-three .menu-area.sticky-menu, .header-area.header-three .menu-area.sticky-menu {
  top: 10px !important; left: 12px !important; right: 12px !important; width: auto !important;
  border-radius: 22px !important; background: rgba(254, 249, 238, .8) !important;
  box-shadow: 0 14px 34px -14px rgba(11, 31, 77, .3), 0 0 0 1px rgba(11, 31, 77, .06) !important;
}
.wift-subnav { top: calc(var(--wift-subnav-top, 0px) + 18px) !important; margin: 0 12px; border-radius: 18px; border: 0 !important; box-shadow: 0 16px 32px -16px rgba(7, 21, 52, .75), 0 0 0 1px rgba(254, 249, 238, .16); }
.header-area .second-menu .login .menu-tigger {
  display: grid !important; place-items: center; width: 46px; height: 46px; border-radius: 14px !important;
  border: 1.5px solid var(--edm-line) !important; background: #FEF9EE !important;
}
@media (max-width: 991px) {
  .sticky-menu .wift-logo img { height: 50px !important; }
  .sticky-menu .second-menu { padding-top: 6px !important; padding-bottom: 6px !important; }
}

/* ---- 2. pill badge, light/bold headline, outline + solid CTA pair --------- */
.edm-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto clamp(18px, 3vw, 26px); padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--edm-blue); background: rgba(254, 249, 238, .72); color: var(--edm-blue); font-weight: 600; font-size: clamp(14px, 3.8vw, 17px); line-height: 1.25; }
.edm-pill svg { width: 22px; height: 22px; flex: none; }
.wift-edu-hero { background: linear-gradient(180deg, #eaf0ff 0%, rgba(254, 249, 238, 0) 72%); }
.wift-edu-h1 { font-weight: 300 !important; letter-spacing: -.025em; }
.wift-edu-h1 b { font-weight: 700; }
.wift-edu-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.wift-edu-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 clamp(18px, 5vw, 30px); border-radius: 16px; border: 1.5px solid var(--edm-blue); color: var(--edm-blue); background: rgba(254, 249, 238, .6); font-size: clamp(16px, 4.4vw, 19px); font-weight: 600; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.wift-edu-links a:last-child { background: #FEF9EE; border-color: #FEF9EE; color: #0b1f4d; }
.wift-edu-links a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(11, 31, 77, .4); }
.wift-edu-links a i, .wift-edu-links a svg { display: none; }

/* ---- 3. rounded bordered cards, inset dark bands -------------------------- */
.wift-value-card, .wift-path-card, .wift-modrow, .s-single-services, .contact-box, .wift-mod-tile { border-radius: var(--edm-r); }
.wift-value-card, .wift-path-card { border: 1px solid var(--edm-line); }
main > section.wift-cta, main > section.wift-app-statement { margin-inline: 12px; border-radius: 32px; overflow: clip; }

/* ---- 4. floating enquiry button -------------------------------------------- */
.edm-fab { position: fixed; z-index: 9990; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #FEF9EE; color: #0b1f4d; box-shadow: 0 14px 30px -8px rgba(11, 31, 77, .5); transition: transform .2s; }
.edm-fab:hover { transform: scale(1.06); }
.edm-fab svg { width: 28px; height: 28px; }
#scrollUp { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; right: 20px !important; }

/* ---- 5. article: author | updated | read-time row, "In this article" card -- */
.news-text .meta-info ul { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 0 0 22px; padding: 0; list-style: none; }
.news-text .meta-info li { display: flex; flex-direction: column; justify-content: center; padding: 4px clamp(14px, 4vw, 26px); border-left: 1px solid var(--edm-line); font-size: clamp(16px, 4.2vw, 19px); font-weight: 600; color: #0b1f4d; line-height: 1.3; }
.news-text .meta-info li:first-child { border-left: 0; padding-left: 0; }
.news-text .meta-info li i { display: none; }
.news-text .meta-info li[data-l]::before, .news-text .meta-info li span[data-l]::before { content: attr(data-l); display: block; font-size: 13px; font-weight: 500; color: #5b6781; }
.news-text .meta-info .edm-author { flex-direction: row; align-items: center; gap: 12px; }
.news-text .meta-info .edm-author img { width: 48px; height: 48px; padding: 5px; border-radius: 50%; background: #FEF9EE; box-shadow: 0 0 0 1px var(--edm-line); object-fit: contain; }
.edm-toc { margin: 28px 0 36px; padding: clamp(22px, 5vw, 36px); border: 1.5px solid #b9c8f5; border-radius: var(--edm-r); background: #FEF9EE; }
.edm-toc-t { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5b6781; }
.edm-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.edm-toc li { counter-increment: t; margin: 0; }
.edm-toc li + li { border-top: 1px solid #e6ecf9; }
.edm-toc a { display: flex; gap: 12px; min-height: 52px; align-items: center; padding: 10px 0; color: #0b1f4d; text-decoration: none; font-size: clamp(17px, 4.4vw, 20px); line-height: 1.35; }
.edm-toc a::before { content: counter(t) "."; flex: none; min-width: 1.4em; color: var(--edm-blue); font-weight: 700; }
.edm-toc a:hover { color: var(--edm-blue); }

/* floating card height: the theme's 96px row min-height + the gutter margins made it 123px tall */
.sticky-menu .second-menu .row { min-height: 0 !important; margin-top: 0 !important; --bs-gutter-y: 0; align-items: center; }
.sticky-menu .second-menu .row > * { margin-top: 0 !important; min-height: 0 !important; }
@media (max-width: 991px) { .sticky-menu .second-menu .row { min-height: 64px !important; } }
@media (max-width: 991px) {
  .menu-area.sticky-menu { height: 76px !important; }
  .sticky-menu .container, .sticky-menu .second-menu { height: 76px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .sticky-menu .second-menu .row { height: 76px; min-height: 76px !important; flex-wrap: nowrap; align-items: center; }
  .sticky-menu .logo { display: flex; align-items: center; }
  .sticky-menu a.meanmenu-reveal { top: 50% !important; right: 14px !important; transform: translateY(-50%) !important; margin: 0 !important; width: 46px !important; height: 46px !important; border-radius: 14px !important; border: 1.5px solid var(--edm-line) !important; background: #FEF9EE !important; }
}
@media (max-width: 991px) {
  .sticky-menu .second-menu .logo { position: relative; top: -10px; }
  .sticky-menu a.meanmenu-reveal { top: 4px !important; right: 14px !important; transform: none !important; }
}
@media (max-width: 991px) {
  html body .header-area .menu-area.sticky-menu .mean-container a.meanmenu-reveal { top: 15px !important; margin: 0 !important; right: 14px !important; transform: none !important; }
}
.wift-edu-links a { flex: 1 1 150px; max-width: 240px; text-align: center; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; }
.wift-edu-links a::before, .wift-edu-links a::after { display: none !important; content: none !important; }

/* article meta + contents card: neutralise the theme's own li/ol styling */
.news-text .meta-info li { display: flex !important; float: none !important; margin: 0 !important; position: static; }
.news-text .meta-info li::after { display: none !important; content: none !important; }
.news-text .meta-info li.edm-author { flex-direction: row !important; align-items: center; gap: 12px; }
.news-text .meta-info li.edm-author span { display: block; font-size: clamp(16px, 4.2vw, 19px); font-weight: 600; line-height: 1.3; }
.news-text .edm-toc ol, .news-text .edm-toc li { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.news-text .edm-toc li::marker { content: "" !important; font-size: 0; }
.news-text .edm-toc li::before { display: none !important; content: none !important; }
.news-text .edm-toc a::before { display: inline !important; }
@media (max-width: 440px) {
  .news-text .meta-info ul { flex-wrap: nowrap; }
  .news-text .meta-info li { padding: 2px 12px; font-size: 15px; white-space: nowrap; }
  .news-text .meta-info li.edm-author img { display: none; }
  .news-text .meta-info li.edm-author span { font-size: 15px; }
}

/* ==== NAV FIX (all states) ================================================= */
/* resting bar: floating dark-glass card with the same shape as the sticky white card */
.header-area .menu-area:not(.sticky-menu) {
  margin: 0 12px !important; border-radius: 22px !important; border: 0 !important;
  background: rgba(11, 31, 77, .8) !important; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(254, 249, 238, .1) !important;
}
/* hamburger: glass on the dark bar (was a blank white square), white on the sticky card */
.header-area .second-menu .login .menu-tigger { background: rgba(254, 249, 238, .1) !important; border: 1.5px solid rgba(254, 249, 238, .4) !important; }
.header-area .sticky-menu .second-menu .login .menu-tigger { background: #FEF9EE !important; border-color: var(--edm-line) !important; }
.header-area .menu-area.sticky-menu, .header-three .menu-area.sticky-menu, .header-area.header-three .menu-area.sticky-menu { background: rgba(254, 249, 238, .94) !important; }

/* ==== BLOG ARTICLE: clean editorial layout ================================= */
.wift-article { padding-top: clamp(48px, 7vw, 96px) !important; }
.wift-article .row { justify-content: center; }
.wift-article .bsingle__content, .wift-article .blog-details-wrap { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.wift-article .news-text .admin { position: static !important; transform: none !important; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 16px; border-radius: 999px; background: #eef2ff; color: var(--edm-blue); font-size: 14px; font-weight: 600; box-shadow: none !important; }
.wift-article .news-text .admin i { color: inherit; }
.wift-article .news-text .meta-info ul { padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--edm-line); }
.wift-article .wift-article-lead { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.55; font-weight: 500; color: #0b1f4d; }
.wift-article .news-text p, .wift-article .news-text li { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.8; color: #2f3b57; }
.wift-article .news-text h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: clamp(40px, 6vw, 64px) 0 16px; color: #0b1f4d; scroll-margin-top: 130px; }
.wift-article .wift-article-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 32px 0; padding: 0; list-style: none; }
.wift-article .wift-article-stats li { margin: 0; padding: 20px; text-align: left; border-radius: 20px; background: #f5f7ff; border: 1px solid #e3e9fa !important; border-top-width: 1px !important; }
.wift-article .wift-article-stats strong { display: block; font-size: clamp(24px, 2.6vw, 32px); color: #0b1f4d; letter-spacing: -.02em; }
.wift-article .wift-article-stats span { font-size: 14px; color: #5b6781; line-height: 1.4; }
.wift-article blockquote { margin: 36px 0; padding: 4px 0 4px 24px; border: 0; border-left: 4px solid #FEF9EE; background: none; }
.wift-article blockquote i { display: none; }
.wift-article blockquote p { font-size: clamp(20px, 2.4vw, 26px) !important; line-height: 1.5 !important; font-weight: 600; color: #0b1f4d !important; margin: 0; }
.wift-article figure img, .wift-article .details__content-img img { border-radius: 24px; }
/* contents: inline card on small screens, sticky side list on wide ones */
.edm-aside { display: none; }
@media (min-width: 1200px) {
  .wift-article .row { flex-wrap: nowrap; gap: 64px; }
  .wift-article .row > .col-lg-9 { flex: 0 1 740px; max-width: 740px; }
  .edm-aside { display: block; flex: 0 0 250px; }
  .edm-aside .edm-toc { position: sticky; top: 140px; margin: 0; padding: 0 0 0 20px; border: 0; border-left: 2px solid var(--edm-line); border-radius: 0; background: none; }
  .edm-aside .edm-toc a { min-height: 0; padding: 8px 0; font-size: 15px; color: #5b6781; }
  .edm-aside .edm-toc li + li { border: 0; }
  .edm-aside .edm-toc a::before { content: none !important; }
  .edm-aside .edm-toc a.on { color: #0b1f4d; font-weight: 700; }
  .edm-aside .edm-toc a.on::after { content: ""; position: absolute; left: -22px; width: 2px; height: 1.4em; background: #FEF9EE; }
  .edm-aside .edm-toc li { position: relative; }
  .wift-article .news-text > .edm-toc { display: none; }
}
/* crest reads as a white mark on the dark resting bar */
.header-area .menu-area:not(.sticky-menu) .wift-logo img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }

/* ==== NAV ITEM SPACING (desktop) =============================================
   The three Bootstrap columns (logo / menu / actions) had fixed widths, so the
   centred menu overflowed leftwards into the logo and rightwards into the
   buttons. One flex row now: logo | menu (takes the free space) | actions.   */
@media (min-width: 992px) {
  .header-area .second-menu .row { flex-wrap: nowrap !important; align-items: center; gap: clamp(14px, 2.2vw, 36px); }
  .header-area .second-menu .row > div:nth-child(1) { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; }
  .header-area .second-menu .row > div:nth-child(2) { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0; padding: 0 !important; }
  .header-area .second-menu .row > div:nth-child(3) { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; }
  .header-area .second-menu .main-menu nav > ul { display: flex !important; justify-content: center; align-items: center; flex-wrap: nowrap; gap: clamp(0px, .6vw, 10px); margin: 0; padding: 0; }
  .header-area .second-menu .main-menu nav > ul > li { margin: 0 !important; padding: 0 !important; }
  .header-area .second-menu .main-menu nav > ul > li > a { padding: 10px clamp(8px, .9vw, 15px) !important; font-size: clamp(13px, 1.05vw, 16px) !important; white-space: nowrap; }
  .header-area .second-menu .login { display: flex !important; align-items: center; justify-content: flex-end; gap: clamp(10px, 1.2vw, 18px); margin: 0 !important; }
  .header-area .second-menu .login > * { margin: 0 !important; }
}
@media (min-width: 992px) and (max-width: 1150px) {
  .wift-logo img { height: 64px !important; }
  .wift-logo-name { font-size: 24px !important; }
  .header-area .second-menu .login .btn, .header-area .second-menu .login a.btn { padding-left: 16px !important; padding-right: 16px !important; font-size: 12px !important; }
}
@media (min-width: 992px) {
  .header-area .second-menu .container, .header-area .menu-area .container { max-width: none !important; width: 100% !important; padding-left: clamp(18px, 2.6vw, 44px) !important; padding-right: clamp(18px, 2.6vw, 44px) !important; }
}
@media (min-width: 992px) and (max-width: 1150px) {
  .header-area .second-menu .main-menu nav > ul > li > a { font-size: 13px !important; padding-left: 7px !important; padding-right: 7px !important; }
  .header-area .second-menu .login .menu-tigger { display: none !important; }
}

/* ==== NAV: true centring ==========================================================
   logo hugs the left, actions hug the right, the menu sits dead-centre of the bar
   (equal 1fr side columns), so left and right margins always match.            */
@media (min-width: 992px) {
  .header-area .second-menu .row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 2vw, 32px); }
  .header-area .second-menu .row > div:nth-child(1) { justify-self: start; }
  .header-area .second-menu .row > div:nth-child(2) { justify-self: center; flex: none !important; }
  .header-area .second-menu .row > div:nth-child(3) { justify-self: end; }
  .header-area .second-menu .row > div:nth-child(4) { display: none; }
}

/* ==== CENTRE ALIGNMENT: section headers + decorative art ===================== */
.wift-band-head { display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(14px, 2vw, 22px); }
.wift-band-head .section-title { text-align: center !important; margin: 0 auto !important; max-width: 780px; }
.wift-band-head .section-title p { margin-left: auto; margin-right: auto; }
.wift-band-head .wift-band-link { margin: 0 auto; }
main.wift-has-deco { isolation: isolate; }
.wift-deco { z-index: -1 !important; pointer-events: none; }
.wift-deco[style*="img/placeholders/"] { opacity: .06 !important; }   /* dummy art stays out of the way; real art keeps its own opacity */

/* card buttons: full width, label never truncated, arrow chip stays on the right */
.pricing-btn { text-align: center; }
.pricing-btn a.btn, a.btn.ss-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 100%; min-width: 0; white-space: normal !important; text-overflow: clip !important; overflow: visible !important; text-align: center; line-height: 1.25; }
