/*! Netlogic My365 - site-wide chrome (promo banner, floating CTA, back-to-top). */
:root{
  --brand-900:#084A8C; --brand-700:#0A5FA8; --brand-500:#328ED2;
  --accent:#7EC454; --accent-green:#7EC454; --accent-fg:#88B7E0;
  --card:#12203A; --container:1200px;
  --font-primary:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --radius-sm:8px; --radius-md:14px;
}
.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--brand-900); color: #fff;
  padding: 10px 14px; border-radius: 0 0 8px 0; z-index: 1000;
  font-weight: 700;
}.skip-link:focus{ left: 0; outline: 3px solid var(--accent); }.ai-promo-banner{
  position: relative;
  background: linear-gradient(100deg, #06366A 0%, #084A8C 40%, #1E6FB8 100%);
  color: #fff;
  font-family: var(--font-primary);
  border-bottom: 2px solid var(--accent-green);
}.ai-promo-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;       /* keep everything on one line */
  white-space: nowrap;
}.ai-promo-icon{ display: inline-flex; align-items: center; line-height: 1; flex-shrink: 0; }.ai-promo-icon svg{ display: block; }.ai-promo-text{ font-size: 1.05rem; line-height: 1.3; white-space: nowrap; }.ai-promo-badge{
  display: inline-block;
  background: var(--accent-green);
  color: #143C07;
  font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin-right: 10px; vertical-align: 2px;
}.ai-promo-text strong{ font-weight: 800; }.ai-promo-detail{ color: #CFE3F6; }.ai-promo-cta{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-green); color: #143C07;
  font-weight: 800; font-size: 1rem;
  padding: 8px 18px; border-radius: 999px;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}.ai-promo-cta:hover, .ai-promo-cta:focus-visible{
  background: #8FD267; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.22); outline: none;
}.float-cta{
  display: none;
  position: fixed; bottom: 16px; right: 16px;
  z-index: 60;
  background: var(--brand-900); color: #fff;
  padding: 12px 18px; border-radius: 999px;
  font-family: var(--font-primary); font-weight: 700; font-size: .9rem;
  box-shadow: 0 8px 24px rgba(8,74,140,.32);
  text-decoration: none;
  align-items: center; gap: 8px;
}.float-cta:hover, .float-cta:focus-visible{ background: var(--brand-700); color: #fff; outline: none; }.float-cta:focus-visible{ box-shadow: 0 0 0 3px var(--accent), 0 8px 24px rgba(8,74,140,.32); }.back-to-top{
  display: none;
  position: fixed; right: 20px; bottom: 76px;
  z-index: 59;
  width: 40px; height: 40px;
  background: #fff; color: var(--brand-900);
  border: 2px solid var(--brand-900);
  border-radius: 50%;
  align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 14px rgba(8,74,140,.18);
  transition: background .15s ease, color .15s ease;
}.back-to-top.visible{ display: inline-flex; }.back-to-top:hover{ background: var(--brand-900); color: #fff; }.back-to-top:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--accent), 0 4px 14px rgba(8,74,140,.18); }[data-theme="dark"] .float-cta{
  background: var(--brand-500);
  color: #0B1220;
}[data-theme="dark"] .back-to-top{
  background: var(--card);
  color: var(--accent-fg);
  border-color: var(--brand-500);
}[data-theme="dark"] .back-to-top:hover{
  background: var(--brand-500);
  color: #0B1220;
  border-color: var(--brand-500);
}[data-theme="dark"] .skip-link:focus{
  background: var(--brand-500);
  color: #0B1220;
}[data-theme="dark"] .float-cta:hover{ background: var(--brand-700); }
/* ------------------------------------------------------------------
   On My365 pages only (body.my365-active), stand the design up on its
   own: hide the Astra header/footer and neutralise the theme's boxed
   container so our full-bleed sections render edge to edge.
   Every other page on the site keeps its normal theme chrome.
   ------------------------------------------------------------------ */
body.my365-active #masthead,
body.my365-active #colophon,
body.my365-active .ast-above-header,
body.my365-active .ast-below-header,
body.my365-active .entry-header,
body.my365-active .ast-single-post-order,
body.my365-active .page-title { display: none !important; }

body.my365-active #content.site-content { padding: 0 !important; margin: 0 !important; }
body.my365-active #content .ast-container,
body.my365-active #primary,
body.my365-active .entry-content,
body.my365-active .ast-article-single,
body.my365-active .site-content > .ast-container {
  max-width: none !important; width: 100% !important;
  padding: 0 !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.my365-active.ast-separate-container { background: transparent !important; }
body.my365-active #page { background: transparent !important; }
/* the injected chrome wrappers must not inherit section padding */
body.my365-active .my365-chrome > .top-bar,
body.my365-active .my365-chrome > .site-header,
body.my365-active .my365-chrome > .site-footer { display: block; }

/* ------------------------------------------------------------------
   Integrated pages (blog, privacy policy): swap the theme header and
   footer for the My365 ones so navigation is consistent, but leave the
   page's own content layout completely alone - no full-bleed, no
   restyling of the article body.
   ------------------------------------------------------------------ */
body.my365-integrated #masthead,
body.my365-integrated #colophon,
body.my365-integrated .ast-above-header,
body.my365-integrated .ast-below-header { display: none !important; }
body.my365-integrated #content.site-content { padding-top: 40px !important; }

/* ------------------------------------------------------------------
   Header nav: 12 items in the ~605px the flex row leaves between the
   logo and the CTAs wrapped to three rows and orphaned "Contact" on a
   line of its own. Tightening spacing lands a balanced 6 + 6 and drops
   the header from 156px to 111px.

   NOTE ON SPECIFICITY: my365.css loads AFTER this file (it declares this one
   as a dependency), and it carries `.my365-page .nav a.nav-link` at the same
   (0,3,1) specificity - so a `.my365-chrome ...` selector here would lose the
   cascade tie. The chrome wrapper has BOTH classes, so qualifying with
   `.my365-page.my365-chrome` takes it to (0,4,1) and wins cleanly without
   resorting to !important. */
.my365-page.my365-chrome .nav ul { flex: 1 1 auto; gap: 0; }
.my365-page.my365-chrome .nav a.nav-link {
  padding-left: 7px; padding-right: 7px;
  font-size: .88rem; letter-spacing: -.01em;
}
@media (max-width: 980px) {
  /* mobile drawer is vertical - restore comfortable tap targets */
  .my365-page.my365-chrome .nav ul { gap: 0; }
  .my365-page.my365-chrome .nav a.nav-link { padding: 12px 8px; font-size: 1rem; letter-spacing: normal; }
}

/* ------------------------------------------------------------------
   Articles: same treatment as the other tiers.

   Posts joined the chrome tier but these rules still only named
   .my365-active and .my365-integrated, so Astra kept rendering its own
   #masthead (192px, carrying a second logo and the green Contact Us button)
   and #colophon (298px, a second footer) underneath ours - the duplicate
   header and empty band on every article.

   .entry-header is deliberately NOT hidden here: unlike a marketing page,
   an article header holds the real title and featured image.
   ------------------------------------------------------------------ */
body.my365-article #masthead,
body.my365-article #colophon,
body.my365-article .ast-above-header,
body.my365-article .ast-below-header,
body.my365-article .ast-single-post-order,
body.my365-article .page-title,
body.my365-article .ast-header-break-point .main-header-bar { display: none !important; }

body.my365-article #content.site-content{ padding-top: 30px !important; margin-top: 0 !important; }
body.my365-article #page{ background: transparent !important; }
/* Paint the article surface on BODY. An earlier version set this to
   transparent !important to kill Astra's container slab - but that selector
   targets <body> itself, so it overrode the dark-mode surface and put light
   text back on white at 1.13:1. Set the real colour here and make only the
   inner containers transparent. */
body.my365-article,
body.my365-article.ast-separate-container{ background: var(--bg) !important; }
body.my365-article #content,
body.my365-article #content .ast-container,
body.my365-article #primary{ background: transparent !important; }
body.my365-article .ast-article-single{ padding: 0 !important; background: transparent !important; }

/* Featured image sits with the article, not as a full-bleed slab. */
body.my365-article .entry-header img,
body.my365-article .post-thumb img,
body.my365-article .ast-single-post-featured-section img{
  max-width: 100%; height: auto; border-radius: 14px;
}
body.my365-article .entry-header{ margin-bottom: 18px; }

/* Astra ships its own scroll-to-top (#ast-scroll-top, 67px, z-index 99) and
   the plugin adds one (#backToTop, 40px, z-index 59), so every page rendered
   two stacked in the corner - Astra's sat on top because of the z-index.
   Ours matches the design system, so drop Astra's. Hidden site-wide because
   our button is output on every page. */
#ast-scroll-top,
.ast-scroll-to-top-right,
.ast-scroll-to-top-left{ display: none !important; }