/* Analyze IQ — brand styling carried over from the previous Gantry (aiq) template.
   Reference: aniq_cc_backups/reference/look-and-feel-notes.md */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700&family=Sora:wght@500;600;700&display=swap');

:root {
  --cassiopeia-color-primary: #262626;
  --cassiopeia-color-link: #8b1a35;
  --cassiopeia-color-hover: #6d142a;
  --aiq-maroon: #8b1a35;
  --aiq-maroon-dark: #6d142a;
  --aiq-navy: #231e7a;          /* sampled from the logo */
  --aiq-navy-dark: #1a1559;
  --aiq-dark: #262626;
  --aiq-heading: #1d1d1d;        /* near-black for headings */
  --aiq-heading-font: 'Sora', 'Heebo', Helvetica, Arial, sans-serif;
}

body.site {
  font-family: 'Heebo', Helvetica, Tahoma, Geneva, Arial, sans-serif;
  background: url('/images/logos_icons/Images/Wallpaper.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* White "card" floating over the photo background, like the old site.
   Note: .site-grid itself spans the full viewport, so paint only its children. */
.site-grid {
  background: transparent;
}

.site-grid > [class^="container-"],
.site-grid > [class*=" container-"] {
  background: #ffffff;
}

.container-main {
  padding: 1.5rem 2rem 2.5rem;
}

.container-breadcrumbs {
  padding-left: 2rem;
  padding-right: 2rem;
}

.container-sidebar-right {
  padding: 1.25rem;
}

/* Header as a centred white card floating on background image (Wallpaper.jpg) (wallpaper shows above & on
   the sides), logo left + maroon tagline right, like the original site. */
header.header.container-header {
  width: 100%;
  max-width: 1320px;
  margin: 1.4rem auto 1.4rem;   /* bottom gap so content/slider isn't flush to the header */
  padding-bottom: .35rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  /* no overflow:hidden — it would clip the hover dropdowns */
}
@media (max-width: 1360px) { header.header.container-header { margin-left: 1rem; margin-right: 1rem; } }

/* Logo + tagline side by side */
header.header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: .6rem 0 .4rem 1.6rem;
}
header.header .navbar-brand img {
  max-height: 104px;   /* enlarged from 72px */
  width: auto;
}
header.header .site-description {
  max-width: 17rem;
  margin: 0;
  color: var(--aiq-maroon);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.55rem);
  line-height: 1.15;
}

/* Navigation: dark text on white, maroon hover, dark dropdowns.
   Transparent so the header card's rounded white corners show (no clipping needed). */
.container-nav {
  background: transparent;
  padding-left: 1.2rem;
}

header.header .metismenu.mod-menu > li > a,
header.header .metismenu.mod-menu > li > button,
.container-nav .mod-menu a,
.container-nav .mod-menu button.mod-menu__heading {
  color: var(--aiq-dark) !important;
}

header.header .metismenu.mod-menu > li > a:hover,
header.header .metismenu.mod-menu > li > button:hover,
.container-nav .mod-menu a:hover,
.container-nav .mod-menu a:focus {
  color: var(--aiq-maroon) !important;
}

.metismenu.mod-menu .mm-collapse,
.metismenu.mod-menu ul.mm-collapse,
.mod-menu__sub {
  background: rgba(38, 38, 38, 0.95) !important;
}

.metismenu.mod-menu .mm-collapse a,
.mod-menu__sub a {
  color: #ffffff !important;
}

.metismenu.mod-menu .mm-collapse a:hover,
.mod-menu__sub a:hover {
  color: #ffffff !important;
  background: var(--aiq-maroon);
}

/* Headings: near-black + distinctive heading font (maroon now reserved for
   links/buttons/accents). The main page H1 keeps a maroon tint for brand pop. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--aiq-heading-font);
  color: var(--aiq-heading);
  letter-spacing: -0.01em;
}
.container-component .page-header h1,
.container-component .item-page > h1:first-child {
  color: var(--aiq-maroon);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  margin-bottom: 1.1rem;
}
/* a touch more air + readability in body copy */
.container-component { line-height: 1.65; }
.container-component p { margin-bottom: 1.05rem; }

/* Sidebar modules: light cards, consistent with the main content + product cards.
   All styling is here (and the module title), so adding news items needs no code-view work. */
.container-sidebar-right .card,
.container-sidebar-right .moduletable {
  background: #ffffff;
  color: #333;
  border: 1px solid #e6e6e6;
  border-top: 4px solid var(--aiq-navy);
  border-radius: 8px;
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 1.4rem;
}

/* Module title -> same treatment as the in-content section titles (maroon underline) */
.container-sidebar-right h3,
.container-sidebar-right .card-header {
  font-family: var(--aiq-heading-font);
  color: var(--aiq-heading);
  background: transparent;
  text-transform: none;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 .9rem;
  padding-bottom: .4rem;
  border-bottom: 3px solid var(--aiq-maroon);
}

/* News items: clean list, headlines styled like article headings */
.container-sidebar-right .mod-articlesnews__item {
  padding: .75rem 0;
  border-bottom: 1px solid #ededed;
}
.container-sidebar-right .mod-articlesnews__item:first-child { padding-top: 0; }
.container-sidebar-right .mod-articlesnews__item:last-child { border-bottom: 0; padding-bottom: 0; }
.container-sidebar-right .newsflash-title {
  font-family: var(--aiq-heading-font);
  font-size: 1rem;
  line-height: 1.25;
  margin: 0 0 .4rem;
}
.container-sidebar-right .newsflash-title a {
  color: var(--aiq-heading);
  text-decoration: none;
}
.container-sidebar-right .newsflash-title a:hover {
  color: var(--aiq-maroon);
  text-decoration: underline;
}
.container-sidebar-right .mod-articlesnews__item p {
  font-size: .9rem;
  color: #555;
  margin: .25rem 0 .35rem;
}
.container-sidebar-right .newsflash-image img {
  border-radius: 6px;
  max-width: 100%;
  height: auto;
  margin-bottom: .4rem;
}

/* Links + read-more in brand maroon */
.container-sidebar-right a {
  color: var(--aiq-maroon);
  text-decoration: none;
}
.container-sidebar-right a:hover { text-decoration: underline; }
.container-sidebar-right .readmore a { font-weight: 600; }

/* Search input tidy */
.container-sidebar-right input.form-control,
.container-sidebar-right input[type="search"],
.container-sidebar-right input[type="text"] {
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Footer: dark strip with grey text */
footer.container-footer,
.container-footer {
  background: var(--aiq-dark);
  color: #b9bdc9;
}

.container-footer a {
  color: #ffffff;
}

/* Buttons in brand colour */
.btn-primary {
  background-color: var(--aiq-maroon);
  border-color: var(--aiq-maroon);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cassiopeia-color-hover);
  border-color: var(--cassiopeia-color-hover);
}

/* ============================================================
   Home rotator (mod_articles_news "slider" layout)
   ============================================================ */
.aiq-slider {
  position: relative;
  width: 100%;
  max-width: 1320px;          /* match the header card + content block width */
  margin-inline: auto;
  overflow: hidden;
  border-radius: 8px;
  background: #1d1d1d;
  height: clamp(190px, 24vw, 300px);   /* compact banner; was a tall 16:6 */
}
@media (max-width: 1360px) { .aiq-slider { width: calc(100% - 2rem); } }
@media (max-width: 800px) { .aiq-slider { height: clamp(160px, 38vw, 230px); } }

.aiq-slider__track { position: absolute; inset: 0; }

/* No-JS / progressive fallback: stack slides vertically so content is still reachable */
.aiq-slider:not(.is-enhanced) .aiq-slider__track { position: static; }
.aiq-slider:not(.is-enhanced) .aiq-slide { position: relative; opacity: 1; }

.aiq-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease;
  text-decoration: none;
  color: #fff;
}
.aiq-slide.is-active { opacity: 1; visibility: visible; }

/* Blurred fill of the slide's own image, so portrait/landscape images all sit
   nicely in one compact banner without awkward side bars. */
.aiq-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--aiq-bg) center / cover no-repeat;
  filter: blur(22px) brightness(.55);
  transform: scale(1.12);
  z-index: 0;
}

/* The actual image: fully visible (no cropping), centred over the blurred fill. */
.aiq-slide__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* caption panel, echoing the old dark/maroon slide title */
.aiq-slide__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  max-width: 80%;
  margin: 0 0 1.1rem 0;
  padding: .5rem 1.2rem .5rem 1.6rem;
  font-size: clamp(1.05rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  background: rgba(29, 29, 29, .58);
  border-left: 4px solid var(--aiq-maroon);
  border-radius: 0 6px 6px 0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
a.aiq-slide:hover .aiq-slide__cap { background: rgba(29, 29, 29, .72); }
a.aiq-slide { cursor: pointer; }

/* arrows */
.aiq-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(38,38,38,.45);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.aiq-slider__nav:hover { background: rgba(139,26,53,.9); }
.aiq-slider__prev { left: .6rem; }
.aiq-slider__next { right: .6rem; }

/* dots */
.aiq-slider__dots {
  position: absolute;
  left: 0; right: 0; bottom: .6rem;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: .5rem;
}
.aiq-slider__dot {
  width: 11px; height: 11px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: .8;
}
.aiq-slider__dot.is-active { background: #fff; }

/* the slider sits flush in the white content card */
/* Banner stays full-width but transparent, so the sunset shows beside the
   centred slider. Specificity must match the generic ".site-grid > container-*"
   white-card rule above, otherwise that rule keeps painting it white. */
.site-grid > .container-banner { background: transparent; }
.container-banner .mod-articlesnews { margin: 0; }

/* ============================================================
   Navigation: hover dropdowns (desktop) + hamburger (mobile)
   ============================================================ */

/* ---------- Desktop: open submenus on hover ---------- */
@media (min-width: 992px) {
  .aiq-hamburger { display: none; }

  header.header .container-nav .mod-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .metismenu-item.level-1 { position: relative; }

  /* Parent items that also have a link (About Us, Login) get a separate caret
     button (.mm-toggler-link); keep it VISIBLE so they show a caret like the
     no-link parents (Products, etc.), but make it non-interactive on desktop
     since hover opens the dropdown (a click would fight the hover state). */
  header.header .metismenu .mm-toggler-link { pointer-events: none; }

  /* level-2 submenu becomes an absolutely-positioned dropdown panel */
  header.header .metismenu-item.level-1 > .mm-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 232px;
    margin: 0;
    padding: .3rem 0;
    display: block !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 1000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    border-radius: 0 0 6px 6px;
  }
  header.header .metismenu-item.level-1:hover > .mm-collapse,
  header.header .metismenu-item.level-1:focus-within > .mm-collapse {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  header.header .metismenu-item.level-1 > .mm-collapse .metismenu-item > a {
    padding: .5rem 1.2rem;
    white-space: nowrap;
  }
}

/* ---------- Mobile: collapse behind a hamburger ---------- */
@media (max-width: 991px) {
  header.header .container-nav { position: relative; padding-bottom: .4rem; }
  header.header .container-nav .mod-menu { display: none; width: 100%; }
  header.header .container-nav.aiq-nav-open .mod-menu { display: block; }

  .aiq-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 40px;
    margin: .35rem 0;
    padding: 9px;
    background: transparent;
    border: 1px solid rgba(38, 38, 38, .35);
    border-radius: 6px;
    cursor: pointer;
  }
  .aiq-hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--aiq-dark);
    border-radius: 2px;
  }
}

/* ============================================================
   Content links + article spacing
   ============================================================ */

/* Body-content links: brand maroon, underline only on hover (was blue + solid underline).
   Scoped to the main content area so menu, sidebar and buttons are untouched. */
.container-component a:not(.btn):not(.aiq-slide):not(.page-link),
.com-content-article a:not(.btn),
.item-page a:not(.btn) {
  color: var(--aiq-maroon);
  text-decoration: none;
}
.container-component a:not(.btn):not(.aiq-slide):not(.page-link):hover,
.container-component a:not(.btn):not(.aiq-slide):not(.page-link):focus,
.com-content-article a:not(.btn):hover,
.item-page a:not(.btn):hover {
  color: var(--cassiopeia-color-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Comfortable margins inside the main content card so text isn't flush to the edge. */
.container-component {
  padding: 1.6rem 2.2rem 2.4rem;
}
@media (max-width: 600px) {
  .container-component { padding: 1.2rem 1.1rem 1.6rem; }
}

/* ============================================================
   Call-to-action buttons (.aiqbutton — restored, was lost with Gantry)
   ============================================================ */
a.aiqbutton, .aiqbutton {
  display: inline-block;
  padding: .7rem 1.6rem;
  background: var(--aiq-maroon);
  color: #fff !important;
  font-weight: 600;
  font-family: var(--aiq-heading-font);
  text-decoration: none !important;
  border: 2px solid var(--aiq-maroon);
  border-radius: 6px;
  line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
a.aiqbutton:hover, a.aiqbutton:focus, .aiqbutton:hover {
  background: var(--aiq-maroon-dark);
  border-color: var(--aiq-maroon-dark);
  color: #fff !important;
  text-decoration: none !important;
}
a.aiqbutton:active { transform: translateY(1px); }
/* secondary / outline variant */
a.aiqbutton--alt {
  background: transparent;
  color: var(--aiq-maroon) !important;
}
a.aiqbutton--alt:hover {
  background: var(--aiq-maroon);
  color: #fff !important;
}

/* ============================================================
   Framed screenshots
   ============================================================ */
figure.aiq-shot { margin: 1.6rem 0; text-align: center; }
figure.aiq-shot img, .aiq-shot img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}
/* gently frame centred screenshots on other pages (product pages etc.) */
.container-component p[align="center"] > img,
.container-component p[style*="text-align: center"] > img {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  height: auto;
}

/* ============================================================
   Modular homepage sections
   ============================================================ */
.aiq-lead { margin: 0 0 1.8rem; }
.aiq-lead > p:first-child {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: #333;
}
.aiq-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }

.aiq-section { margin: 2.6rem 0; }
.aiq-section__title {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  margin: 0 0 1.4rem;
  padding-bottom: .45rem;
  border-bottom: 3px solid var(--aiq-maroon);
  display: inline-block;
}

/* product cards */
.aiq-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.aiq-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-top: 4px solid var(--aiq-navy);
  border-radius: 8px;
  padding: 1.3rem 1.3rem 1.15rem;
  transition: box-shadow .15s ease, transform .1s ease;
}
.aiq-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .1); transform: translateY(-3px); }
.aiq-card h3 { margin: .1rem 0 .55rem; font-size: 1.2rem; }
.aiq-card h3 a { color: var(--aiq-navy) !important; text-decoration: none !important; }
.aiq-card p { color: #444; flex: 1 1 auto; margin-bottom: 1rem; }
.aiq-card__link { font-weight: 600; color: var(--aiq-maroon) !important; text-decoration: none !important; }
.aiq-card__link:hover { text-decoration: underline !important; }

/* feature grid */
.aiq-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem 1.6rem; }
.aiq-feature { display: flex; gap: .9rem; align-items: flex-start; }
.aiq-feature__num {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--aiq-navy); color: #fff;
  font-weight: 700; font-family: var(--aiq-heading-font);
  display: flex; align-items: center; justify-content: center;
}
.aiq-feature p { margin: 0; }

/* highlight callout */
.aiq-callout {
  display: flex; gap: 1.3rem; align-items: center;
  background: #faf3f4;
  border-left: 5px solid var(--aiq-maroon);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  margin: 2.6rem 0;
}
.aiq-callout img { flex: 0 0 auto; }
.aiq-callout p { margin: 0; }

/* bottom CTA band */
.aiq-cta-band {
  text-align: center;
  background: var(--aiq-navy); color: #fff;
  border-radius: 10px;
  padding: 2.1rem 1.5rem;
  margin: 2.8rem 0 .5rem;
}
.aiq-cta-band p { margin: 0 0 1.1rem; font-size: 1.1rem; }
.aiq-cta-band .aiqbutton--alt { color: #fff !important; border-color: #fff; }
.aiq-cta-band .aiqbutton--alt:hover { background: #fff; color: var(--aiq-navy) !important; }

@media (max-width: 600px) { .aiq-callout { flex-direction: column; text-align: center; } }

/* ============================================================
   Product-page helpers: check-list features + screenshot captions
   ============================================================ */
.aiq-checklist {
  list-style: none;
  margin: .3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: .55rem 1.8rem;
}
.aiq-checklist li {
  position: relative;
  padding-left: 1.7rem;
}
.aiq-checklist li::before {
  content: "\2713"; /* checkmark */
  position: absolute;
  left: 0; top: 0;
  color: var(--aiq-maroon);
  font-weight: 700;
}
figure.aiq-shot figcaption {
  margin-top: .55rem;
  font-size: .9rem;
  color: #666;
  font-style: italic;
}