/* ==========================================================================
   RSI / Shadow design system — theme.css
   Loaded after assets/css/responsive.css and before my.css (see css.php).
   Plain CSS custom properties, no build step — matches the site's stack.
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     Color tokens — extracted from RSI's own marketing collateral (Marketing\
     PPT\Ringcentral\RingCentral UK Summit\Shadow Analytics.png / Shadow
     Analytics Banner PNG.png / AI black.png, and the Generic portfolio
     deck's official taglines): dark navy base, blue as the dominant brand
     color, a blue→purple gradient on "Analytics", teal for the AI-powered
     category, and a sparingly-used gold/amber highlight. Every component
     below references these tokens rather than hardcoded hex values.
     ----------------------------------------------------------------------- */
  --rsi-brand-primary:   #2F6FEB; /* dominant brand blue */
  --rsi-brand-primary-dark: #1F4FC4;
  --rsi-brand-secondary: #7C4DFF; /* purple/violet, gradient partner on "Analytics" wordmark */
  --rsi-brand-accent:    #E8952E; /* gold/amber — sparing highlight only (CTAs, dividers, small badges), never a large fill */
  --rsi-brand-teal:      #14B8A6; /* "AI-powered analytics" category accent */

  --rsi-ink-900: #0B1220; /* dark navy base for header/footer/hero */
  --rsi-ink-700: #3A4150;
  --rsi-ink-400: #8892A0;
  --rsi-surface-0:   #FFFFFF; /* body/content background stays white */
  --rsi-surface-100: #F8FBFF;
  --rsi-surface-200: #EEF3F8;
  --rsi-border: #E1E7EF;

  /* Vendor accent tokens — formalizes my.css's .section-cblue/.section-orange/.section-zoom */
  --rsi-vendor-ringcentral: #FF7A00;
  --rsi-vendor-cisco:       #005073;
  --rsi-vendor-webex:       #005073;
  --rsi-vendor-zoom:        #2286F7;
  --rsi-vendor-avaya:       #CC0000;
  --rsi-vendor-mitel:       #5CB85C;
  --rsi-vendor-microsoft:   #00A4EF;
  --rsi-vendor-intermedia:  #5B3EBB;

  /* Feedback/status colors */
  --rsi-success: #2E9E5B;
  --rsi-warning: #E0A50E;
  --rsi-danger:  #D64545;

  /* Type scale (existing Google Fonts already loaded in css.php) */
  --rsi-font-display: "Dosis", sans-serif;
  --rsi-font-body: "Catamaran", sans-serif;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;

  /* Spacing scale (8px base) */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;

  /* Radius / shadow */
  --rsi-radius: 10px;
  --rsi-shadow: 0 10px 30px rgba(16, 20, 28, 0.08);
}


/* -----------------------------------------------------------------------
   Layout primitives
   ----------------------------------------------------------------------- */

.rsi-section {
  padding: var(--space-8) 0;
}

.rsi-section--alt {
  background: var(--rsi-surface-100);
}

/* Tighter vertical rhythm for back-to-back rows of paired cards, where the
   full --space-8 padding on every section leaves a large-looking gap. */
.rsi-section--tight {
  padding: var(--space-4) 0;
}

.rsi-hero {
  position: relative;
  padding: var(--space-8) 0;
  background: linear-gradient(135deg, var(--rsi-ink-900) 0%, var(--rsi-brand-primary) 55%, var(--rsi-brand-secondary) 100%);
  color: var(--rsi-surface-0);
  overflow: hidden;
}

.rsi-hero__eyebrow {
  font-family: var(--rsi-font-display);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--rsi-brand-accent);
}

.rsi-hero__title {
  font-family: var(--rsi-font-display);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1.15;
  margin: var(--space-2) 0;
}

.rsi-hero__lead {
  font-family: var(--rsi-font-body);
  font-size: var(--step-1);
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
}

.rsi-hero__video {
  border-radius: var(--rsi-radius);
  overflow: hidden;
  box-shadow: var(--rsi-shadow);
}

.rsi-hero__video video {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

/* -----------------------------------------------------------------------
   Cards
   ----------------------------------------------------------------------- */

.rsi-card {
  background: var(--rsi-surface-200);
  border: 1px solid var(--rsi-border);
  border-radius: var(--rsi-radius);
  padding: var(--space-4);
  transition: transform .2s ease, box-shadow .2s ease;
}

.rsi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rsi-shadow);
}

/* For paired two-column feature rows (e.g. shadow-analytics.php): use on a
   plain .row (no align-items-center, so Bootstrap's default stretch makes
   both columns equal height) plus this modifier, so both cards fill that
   equal height rather than sizing to their own shorter/taller content. */
.rsi-card--row {
  height: 100%;
}

/* Reserve consistent space for the title regardless of whether it wraps to
   one line or two, so the body paragraph (and the titles themselves) start
   at the same vertical position across sibling cards in the same row. */
.rsi-card--row h6 {
  min-height: 1.2em;
}

.rsi-card--row h2 {
  min-height: 2.8em;
}

/* Same equal-height fix as .rsi-card--row, for plain N-up grid rows (no
   paired eyebrow/title alignment needed, just equal card height). */
.rsi-card--grid {
  height: calc(100% - var(--space-4));
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
}

/* Reserve space for a 2-line title so a card with a short 1-line title
   doesn't start its body paragraph higher than siblings whose title wraps
   to 2 lines. */
.rsi-card--grid h2 {
  min-height: 2.8em;
}

/* Horizontal share-icon row (news-article-body.php). */
.rsi-article-share {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.rsi-article-share li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rsi-surface-200);
  color: var(--rsi-brand-primary);
  font-size: 14px;
  transition: background-color .2s ease, color .2s ease;
}

.rsi-article-share li a:hover {
  background: var(--rsi-brand-primary);
  color: var(--rsi-surface-0);
}

.rsi-article-share li a .social-icon-x {
  font-family: var(--rsi-font-display);
  font-weight: 700;
  font-size: 14px;
  font-style: normal;
}

/* Logo tiles (e.g. technology partner roster) — white background so vendor
   logo images (many with their own white/transparent backgrounds) blend
   into the card instead of showing a mismatched box edge. */
.rsi-card--logo {
  background: var(--rsi-surface-0);
}

/* -----------------------------------------------------------------------
   Feedback / contact form (feedback-body.php) — visual restyle only.
   Field names/ids/hidden inputs feed a Salesforce Web-to-Case submission,
   reCAPTCHA and js/formvalidation.js; do not rename them, only style them.
   ----------------------------------------------------------------------- */

.liaise table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
}

.liaise td.head {
  font-weight: 600;
  color: var(--rsi-ink-700);
  padding-right: var(--space-3);
  vertical-align: middle;
}

.liaise input[type="text"],
.liaise input[type="email"],
.liaise select,
.liaise textarea {
  width: 100%;
  max-width: 420px;
  padding: .6rem .9rem;
  border: 1px solid var(--rsi-border);
  border-radius: var(--rsi-radius);
  font-family: var(--rsi-font-body);
  font-size: 1rem;
  box-sizing: border-box;
}

.liaise input[type="text"]:focus,
.liaise input[type="email"]:focus,
.liaise select:focus,
.liaise textarea:focus {
  outline: none;
  border-color: var(--rsi-brand-primary);
}

.liaise .blueformButton {
  font-family: var(--rsi-font-display);
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: 50px;
  border: 2px solid var(--rsi-brand-primary);
  background: var(--rsi-brand-primary);
  color: var(--rsi-surface-0);
  cursor: pointer;
}

.liaise .blueformButton:hover {
  background: var(--rsi-brand-primary-dark);
  border-color: var(--rsi-brand-primary-dark);
}

.rsi-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rsi-surface-200);
  color: var(--rsi-brand-primary);
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
}

/* Official product badges (images/products/*.png) - square logos on black
   backgrounds, styled as rounded tiles so the black background reads as an
   intentional badge rather than a crop mismatch. */
.rsi-product-badge {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  margin-bottom: var(--space-2);
}

.rsi-product-badge--wide {
  display: block;
  width: auto;
  height: 48px;
  border-radius: 10px;
  object-fit: contain;
  margin-bottom: var(--space-2);
}

/* Small inline mark sized to sit beside a text line (e.g. the hero eyebrow)
   rather than as a large standalone block. */
.rsi-product-badge--inline {
  display: block;
  width: auto;
  height: 28px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
  margin-bottom: 0;
}

/* Small CAPS label inside a .rsi-card, above the sentence-style title -
   for consistency across feature cards that otherwise vary in body length. */
.rsi-card__eyebrow {
  display: block;
  font-family: var(--rsi-font-display);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rsi-brand-primary);
  margin-bottom: var(--space-1);
}

/* Product hub cards (products-body.php): a black banner across the top holds
   the logo at full size, blending into the logo's own black background,
   instead of a small rounded badge floating awkwardly on a white card. */
.rsi-card--product {
  padding: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rsi-card--product .rsi-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rsi-card--product .rsi-card__banner {
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  padding: var(--space-3);
  box-sizing: border-box;
}

.rsi-card--product .rsi-card__banner .rsi-product-badge {
  width: 112px;
  height: 112px;
  margin-bottom: 0;
  border-radius: 0;
  object-fit: contain;
}

.rsi-card--product .rsi-card__banner .rsi-product-badge--wide {
  height: 84px;
  margin-bottom: 0;
  border-radius: 0;
  object-fit: contain;
}

.rsi-card--product .rsi-card__content {
  padding: var(--space-4);
  background: var(--rsi-surface-100);
}

.rsi-card__title {
  font-family: var(--rsi-font-display);
  font-weight: 600;
  font-size: var(--step-2);
  color: var(--rsi-ink-900);
  margin-bottom: var(--space-1);
}

.rsi-card__body {
  font-family: var(--rsi-font-body);
  color: var(--rsi-ink-700);
}

/* -----------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */

.rsi-btn-primary,
.rsi-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--rsi-font-display);
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.rsi-btn-primary {
  background: var(--rsi-brand-primary);
  color: var(--rsi-surface-0);
  border: 2px solid var(--rsi-brand-primary);
}

.rsi-btn-primary:hover {
  background: var(--rsi-brand-primary-dark);
  border-color: var(--rsi-brand-primary-dark);
  color: var(--rsi-surface-0);
}

.rsi-btn-outline {
  background: transparent;
  color: var(--rsi-brand-primary);
  border: 2px solid var(--rsi-brand-primary);
}

.rsi-btn-outline:hover {
  background: var(--rsi-brand-primary);
  color: var(--rsi-surface-0);
}

/* -----------------------------------------------------------------------
   Vendor badges — formalizes my.css's .section-cblue/.section-orange/.section-zoom
   ----------------------------------------------------------------------- */

.rsi-vendor-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--rsi-font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 50px;
  color: var(--rsi-surface-0);
}

.rsi-vendor-badge--ringcentral { background: var(--rsi-vendor-ringcentral); }
.rsi-vendor-badge--cisco,
.rsi-vendor-badge--webex       { background: var(--rsi-vendor-webex); }
.rsi-vendor-badge--zoom        { background: var(--rsi-vendor-zoom); }
.rsi-vendor-badge--avaya       { background: var(--rsi-vendor-avaya); }
.rsi-vendor-badge--mitel       { background: var(--rsi-vendor-mitel); }
.rsi-vendor-badge--microsoft   { background: var(--rsi-vendor-microsoft); }
.rsi-vendor-badge--intermedia  { background: var(--rsi-vendor-intermedia); }

/* -----------------------------------------------------------------------
   Capability tier chips (used on vendor pages to show full vs. KPI-only)
   ----------------------------------------------------------------------- */

.rsi-tier {
  display: inline-block;
  font-family: var(--rsi-font-display);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: 50px;
}

.rsi-tier--full {
  background: rgba(46, 158, 91, 0.12);
  color: var(--rsi-success);
}

.rsi-tier--kpi {
  background: rgba(224, 165, 14, 0.14);
  color: var(--rsi-warning);
}

/* -----------------------------------------------------------------------
   Comparison table (used on shadow-agent.php)
   ----------------------------------------------------------------------- */

.rsi-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--rsi-surface-0);
  border-radius: var(--rsi-radius);
  overflow: hidden;
  box-shadow: var(--rsi-shadow);
}

.rsi-compare-table th,
.rsi-compare-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--rsi-border);
  font-family: var(--rsi-font-body);
}

.rsi-compare-table th {
  font-family: var(--rsi-font-display);
  font-weight: 700;
  background: var(--rsi-surface-100);
  color: var(--rsi-ink-900);
}

.rsi-compare-table td:first-child {
  font-weight: 600;
  color: var(--rsi-ink-900);
}

/* -----------------------------------------------------------------------
   Header / footer — dark navy bookends around the (still white) content
   area, per the marketing collateral's consistent dark-background brand
   look. Overrides the Techvio theme's transparent-over-hero nav and its
   sticky-scroll swap to a white bar, so the header stays dark everywhere.
   ----------------------------------------------------------------------- */

.navbar-area,
.navbar-area.is-sticky {
  background-color: var(--rsi-ink-900) !important;
}

.techvio-nav .navbar .navbar-nav .nav-item > a,
.navbar-area.is-sticky .navbar-nav .nav-item > a {
  color: var(--rsi-surface-0) !important;
}

.techvio-nav .navbar .navbar-nav .nav-item > a:hover,
.techvio-nav .navbar .navbar-nav .nav-item > a:focus,
.techvio-nav .navbar .navbar-nav .nav-item > a.active,
.navbar-area.is-sticky .navbar-nav .nav-item > a:hover,
.navbar-area.is-sticky .navbar-nav .nav-item > a:focus,
.navbar-area.is-sticky .navbar-nav .nav-item > a.active {
  color: var(--rsi-brand-accent) !important;
}

/* Dropdown popups: the Techvio theme styles these for a white background
   (dark text) - now that the header/nav is always dark, give the popups a
   dark background too so their text (also forced light above via the
   nav-item selector's original descendant reach) doesn't end up light-on-
   white. Covers every nesting level the theme's CSS defines flyout submenus
   for, even though this site's markup currently only uses one level. */
.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu,
.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu,
.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  background: var(--rsi-ink-900) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li a,
.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a,
.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--rsi-surface-0) !important;
}

.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover,
.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus,
.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
  color: var(--rsi-brand-accent) !important;
  background: rgba(255, 255, 255, 0.06);
}

/* No more light-background nav state to swap into, so keep the
   default/"white-logo" slot's mark showing at all times. */
.navbar-area.is-sticky .techvio-nav .navbar-brand .white-logo,
.navbar-area.is-sticky .logo .white-logo,
.techvio-responsive-nav .logo .white-logo {
  display: block !important;
}
.navbar-area.is-sticky .techvio-nav .navbar-brand .black-logo,
.navbar-area.is-sticky .logo .black-logo,
.techvio-responsive-nav .logo .black-logo {
  display: none !important;
}

/* Page-load "curtain" preloader (assets/css/style.css) used the old cyan-blue
   brand color (#02A0EE) - swap to the current brand blue. */
.preloader::before,
.preloader::after {
  background: var(--rsi-brand-primary);
}

.footer-area {
  background-color: var(--rsi-ink-900);
}

.footer-subscribe-wrapper {
  background-color: var(--rsi-ink-900);
}

/* No X glyph in the bundled Font Awesome 5.8.1 - use a plain bold "X" character
   instead of an icon-font glyph. It's still just text content of the <i> tag, so
   the shared rule's line-height: 35px centers it the same way as the other icons. */
.single-footer-widget .footer-social i.social-icon-x {
  font-family: var(--rsi-font-display);
  font-weight: 700;
  font-size: 16px;
}