/* ============================================================
   custom.css - Energy Cloud overrides.
   Loaded AFTER style.css so these win without !important.
   Keep theme files pristine; put all local changes here.
   ============================================================ */

/* --- Geist font (self-hosted) -----------------------------------
   Matches how the Next.js homepage mockup (index.v1.44.html) loads
   Geist: it self-hosts the font via next/font, split into 13 files
   by unicode-range for full Unicode coverage. Of those, only this
   one - the primary Latin-range subset - matters for this
   English-language site; the other 12 cover Cyrillic, Vietnamese,
   extended Latin, etc. and would just be dead weight here.
   Weight range (100-900) and unicode-range copied verbatim from the
   mockup's own stylesheet so this behaves identically. Font file
   confirmed byte-identical to the mockup's copy via SHA-256 before
   upload (both hash to 9b6f5ff4...).
   Left out the mockup's "Geist Fallback" face - that's a
   next/font-generated metrics-matched fallback (auto-tuned so a
   pre-load swap doesn't reflow the page); not something we can
   regenerate outside Next's build, and not worth the complexity for
   how little Geist is used here yet. Arial covers the gap until the
   font itself loads.
   ACTION ITEM: when the homepage goes live on this same domain,
   confirm it isn't ALSO loading Geist via its own Next.js-hashed
   path (/_next/static/_vinext_fonts/geist-.../....woff2) - two
   different URLs for the same font bytes means two separate
   downloads instead of one shared, cached file. Either point the
   homepage at this /fonts/Geist.woff2 too, or confirm the two never
   load on the same page/session.                                  */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Geist.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Section eyebrow header (dominant) + shrunk legacy title ----
   New per-section heading treatment, adapted from the "eyebrow"
   label on the Next.js homepage mockup (index.v1.44.html) - see the
   Geist @font-face block above for that source. There it's a small
   uppercase kicker line ABOVE a large headline; here it becomes the
   headline itself (per explicit direction: "eyebrow becomes the
   dominant heading, H2 shrinks beneath it"), sized up to take over
   the role the old <h2> title used to play, sitting on real content
   sections instead of a dark hero.
   Label text for each section is pulled from the page's own nav
   (page-toc-inline) rather than restating the old descriptive
   title - short, uppercase, punchy, matching what the nav already
   calls that section. The old descriptive sentence (previously the
   whole <h2>) becomes .section-subtitle underneath it: still the
   real <h2> for SEO/structure (search snippets read better from a
   full sentence than an all-caps label), just visually smaller now,
   per the "reduce that down to a slightly smaller font size" note.
   Color uses the site's own existing accent blue (#0093df - same
   blue as page-toc-inline's hover state and the section dividers'
   accent) rather than the mockup's pale #79B8FF, which was tuned for
   a dark hero background and would have poor contrast here on
   bg-default/bg-gray-lighter's light backgrounds.
   Sizing: set directly per request - eyebrow maxes out at 48px
   desktop (down from the theme's own 60px base h2 size, which is
   what renders if this rule ever fails to load - see troubleshooting
   note below), subtitle maxes out at 32px. Both still fluid below
   that so they don't overflow narrow phones.
   Centered by default (not just inside .text-center columns) and
   the color carries !important: the theme has its own background-
   specific heading color rules (e.g. ".bg-gray-lighter h2"), which
   are a class+tag selector - more specific than a bare ".section-
   eyebrow" class - so on gray sections (Platform Learning, Building-
   Specific Knowledge, Detect/Cure/Monitor) the theme's black was
   winning over this blue. !important settles that regardless of
   which background a given section uses.                           */

.section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 10px;
  font-family: "Geist", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0093df !important;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 3rem);
  line-height: 1.15;
  text-align: center;
}

.section-eyebrow__bar {
  flex: none;
  width: 18px;
  height: 3px;
  background-color: #0093df;
  box-shadow: 0 0 10px rgba(0, 147, 223, 0.5);
}

.section-subtitle {
  margin: 0 0 20px;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  font-weight: 400;
  color: #555;
  text-align: center;
}

/* Detect/Cure/Monitor's subtitle ("across every system") sits right
   under that headline rather than a full section title, so pull it
   in closer - the default 10px eyebrow gap + subtitle's own weight
   read as too much air for two lines that belong together.         */

.section-subtitle--tight {
  margin-top: -6px;
}

/* --- CEO quote paragraph (Detect/Cure/Monitor section) ----------
   Measured directly against the real rendered text (rendered into a
   hidden node and measured, not estimated): at the site's default
   body copy size (32px) this paragraph wraps to 5 lines even at the
   section's normal col-lg-11 width, and still 4 lines at the full
   container width. Getting it to the requested 3 lines needed two
   changes together, confirmed at both common desktop container
   widths (1200px @ ~1440px-wide screens, 1400px @ 1600px+ screens):
   the section markup was widened from col-lg-11 to the full
   col-lg-12, AND this paragraph's own font-size was reduced to
   21px. Below the site's oversized 32px default, but still a normal
   readable body-copy size for a supporting quote.                  */

.ceo-quote {
  font-size: 21px;
}

/* --- Report callout card (Real-time Data section) ----------------
   Wraps the Peak KW/Amp report screenshot: a titled card (same navy
   header-band language as .page-toc-inline__title, so it reads as
   the same design system rather than a one-off box). Card started
   at 900px wide with a Magnific Popup lightbox; changed 30 Aug 2026
   to a small 235px thumbnail (several more of these reports are
   coming, so the card needed to read as "a preview, click for more"
   rather than as the report itself) and the click now opens a real
   separate browser window via custom.js's openReportPopup(), not
   Magnific Popup - feedback was that the modal overlay was hard to
   back out of. The popup window loads /util/report-popup.html (a
   shared support page, reusable per report) rather than the raw
   image, so a title
   and the copyright line can render with it. Image itself ships at
   three sizes: .235w for the card (pngquant-compressed, ~4.5KB),
   .900w (unused directly now, kept in case a future layout wants a
   mid-size version) and .full for the popup - all well under the
   size a raw screenshot like this would otherwise ship at.         */

.report-callout {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  max-width: 239px; /* the 235px image plus 2px border on each side - card never exceeds image width */
  margin-left: auto;
  margin-right: auto;
}

/* --- Report callout group: two award cards, side by side --------
   ai-infrastructure-components section: reuses .report-callout's
   own card look (border/radius/title bar) rather than a new
   component - just narrower (200px each) and grouped in a flex
   wrapper so the pair floats as one 420px block instead of each
   card floating separately. Side by side (not stacked) so the
   group is shorter overall and the paragraph text next to it
   doesn't run out before the cards do. Mirrors .platform-logos-
   float on the same section, just on the opposite side of the
   body copy. Below 767px there's no room for 420px beside text,
   so it drops back to stacked and centered, same as the logos
   float does at that width.                                       */

.report-callout-group {
  display: flex;
  gap: 20px;
  width: 420px;
}

.report-callout-group .report-callout {
  flex: 0 0 200px;
  max-width: 200px;
  margin-bottom: 0;
}

.report-callout-group--float-right {
  float: right;
  margin: 0 0 20px 28px;
}

@media (max-width: 767px) {
  .report-callout-group {
    display: block;
    width: auto;
    max-width: 200px;
    margin: 0 auto;
  }

  .report-callout-group .report-callout {
    max-width: 200px;
    margin: 0 auto 20px;
  }

  .report-callout-group .report-callout:last-child {
    margin-bottom: 0;
  }

  .report-callout-group--float-right {
    float: none;
    width: auto;
    max-width: 200px;
    margin: 0 auto 24px;
  }
}

/* --- Report callout, floated in body copy ----------------------
   real-time-data section: sits inside the paragraph/list column
   instead of below it, same float-beside-text pattern already
   used for .platform-logos-float further down the page. Floated
   right so it doesn't fight the list-marked bullets' left icons;
   unfloats and centers under 767px like the logos block does.    */

.report-callout--float-right {
  float: right;
  margin: 0 0 20px 28px;
}

/* .section-subtitle carries its own 20px bottom margin (used
   everywhere else to space the subtitle from the body copy below
   it) - when the float sits directly under the subtitle, that
   margin reads as an odd gap of white space above the card. Pull
   the float up flush without touching .section-subtitle itself, so
   nothing else that follows a subtitle on other sections changes.  */

.section-subtitle + .report-callout--float-right {
  margin-top: -20px;
}

@media (max-width: 767px) {
  .report-callout--float-right {
    float: none;
    margin: 0 auto 24px;
  }

  .section-subtitle + .report-callout--float-right {
    margin-top: 0;
  }
}

/* Theme default (style.css: "p + * { margin-top: 22px; }") adds
   22px above whatever follows a <p> - .report-callout__title IS a
   <p>, so every card that follows it straight with an image/link
   (peak report, both award cards) was getting that 22px shoved in
   between the navy title bar and its image. Override it here, once,
   for anything that follows the title, rather than fighting it card
   by card.                                                          */

.report-callout__title + * {
  margin-top: 0;
}

.report-callout__title {
  margin: 0;
  padding: 6px 16px;
  background-color: #001765;
  color: #f4f6fa;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.report-callout__image-link {
  display: block;
  line-height: 0;
}

/* Zoom badge: was an absolute overlay on the image, then its own
   row below the image. Moved 30 Aug 2026 again - now floated
   inside the caption paragraph itself, so it sits inline with the
   caption text (which wraps around it) rather than owning its own
   row. It's its own small link (report-callout__zoom-link) so
   clicking the icon still opens the popup, same as clicking the
   image.                                                           */

.report-callout__zoom-link {
  float: left;
  margin: 2px;
  line-height: 0;
}

.report-callout__zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(0, 23, 101, 0.85);
  color: #fff;
  font-size: 13px;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.report-callout__zoom-link:hover .report-callout__zoom {
  background-color: #0093df;
  transform: scale(1.08);
}

.report-callout__caption {
  margin: 0;
  padding: 14px 20px;
  font-size: 15px;
  font-style: italic;
  color: #555;
  text-align: left;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- Nav bar background ---------------------------------------
   Was an inline style on .rd-navbar-nav-wrap in the markup, which
   no stylesheet could override. Moved here so the homepage can
   opt out.                                                       */

.rd-navbar-nav-wrap { background-color: #001765; }

/* Homepage floats transparent over the hero carousel - desktop
   only. Below 1200px the navbar collapses to its fixed bar, which
   must keep a solid background or the menu sits on top of content. */

@media (min-width: 1200px) {
  .home .rd-navbar-nav-wrap { background-color: transparent; }
}

/* --- Nav logo -------------------------------------------------
   One image file, scaled per context. The width/height attributes
   on the <img> carry the 91:78 ratio, so space is reserved before
   it loads. Adjust the width values; height stays auto.          */

.rd-navbar-brand img       { width: 91px;  height: auto; }   /* sub-pages */
.home .rd-navbar-brand img { width: 150px; height: auto; }   /* homepage  */

/* Collapsed nav: the fixed bar is a set height, so size the logo
   by HEIGHT here or it overflows and gets clipped. 40px leaves
   room in a 56px bar - this is the number to change if it is
   still tight.                                                   */

@media (max-width: 1199px) {
  .rd-navbar-brand img,
  .home .rd-navbar-brand img { width: auto; height: 40px; }
}

/* --- Fine section dividers -------------------------------------
   bg-default and bg-gray-lighter (#f8f8f8) read as nearly the same
   tone, so on pages that stack alternating sections the seam alone
   doesn't register. A hairline at the boundary fixes that without
   darkening the background itself. Use between stacked sections;
   skip the boundary right after breadcrumbs and right before the
   footer, which already have their own separation.               */

hr.section-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 0;
}

/* --- Force a heading onto one line above a breakpoint -----------
   Bootstrap's fluid heading sizes plus a narrow col-lg-8/col-lg-10
   wrapper can wrap a short heading onto two lines on desktop even
   after shrinking the font. Reducing the font size alone isn't
   reliable at every desktop width, so pin white-space: nowrap from
   the lg breakpoint up (992px, where col-lg-* wrappers narrow the
   text column) - but leave it wrapping normally below that, since
   mobile has much less width to work with and a forced nowrap
   there would just push the heading off-screen instead.           */

@media (min-width: 992px) {
  .nowrap-lg { white-space: nowrap; }
}

/* --- Tighter section spacing -------------------------------------
   section-xl / section-lg ship with fluid top/bottom padding that
   scales well past 60px on larger monitors. .section-tight pins it
   to a flat 50px top and bottom regardless of viewport width - add
   it alongside section-xl/section-lg on any section that should be
   more compact.                                                    */

.section-tight {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* --- Inline sub-page nav ("page-toc-inline") --------------------
   Third iteration of this component. First tried a fixed left
   gutter (only had room above ~1800px viewport width - the
   container is 1400px wide, so most visitors never saw it). Then
   tried a bar fixed to the top of the viewport on scroll (needed a
   JS scroll listener as a workaround, since the theme's page
   wrapper has overflow:hidden and silently breaks CSS position:
   sticky). This version sidesteps both problems: it's just a left
   column sitting next to the intro paragraphs in the intro section
   (col-lg-3 beside col-lg-8 - see the "Intro / positioning" section
   in ai-infrastructure.html), in normal document flow. No fixed or
   sticky positioning, no JS, nothing to fight the theme's layout
   over - a straightforward reuse of the existing Bootstrap grid.
   Visual language (grey label, blue accent line, uppercase small
   caps) still adapted from hummingbirdairquality.com's
   tabs-corporate look.                                             */

.page-toc-inline {
  /* Pulls the nav column left of where col-lg-3's own grid gutter
     would place it - confirmed live there's ~65px of clearance
     between the container edge and the column at 1440px, so 25px
     leaves comfortable room to spare.
     border + border-radius + overflow:hidden turns the whole nav
     into one enclosing card, so the title band's background below
     doesn't spill past rounded corners.                            */
  margin-left: -25px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.page-toc-inline__title {
  margin: 0;
  padding: 12px 14px;
  background-color: #001765;
  color: #f4f6fa;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-toc-inline ul {
  list-style: none;
  margin: 0;
  padding: 14px;
}

.page-toc-inline li + li {
  margin-top: 8px;
}

.page-toc-inline li {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  transition: border-color 0.3s ease-in-out;
}

.page-toc-inline li:hover,
.page-toc-inline li.active {
  border-color: #0093df;
}

.page-toc-inline a {
  position: relative;
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #868686;
  text-decoration: none;
  line-height: 1.3;
}

.page-toc-inline a:hover,
.page-toc-inline a.active {
  color: #0093df;
}

/* Anchor-jump offset so a section's top isn't hidden under the
   fixed main navbar when a page-toc-inline link scrolls to it.
   90px covers the navbar's fixed-state height at 1200px+; below
   that it collapses to 56px, so 90px leaves headroom either way.  */

section[id] {
  scroll-margin-top: 90px;
}

/* --- Product logos embedded in the "One platform" paragraph -----
   gMeter and Hummingbird logos float left and the surrounding
   paragraphs wrap around them, instead of sitting in their own
   centered row above the text (that row's own bottom margin was
   the extra whitespace between the logos and the paragraph).
   Stacked vertically at a fixed width so two logos of different
   natural proportions line up consistently; float is cleared right
   after the paragraphs (see the empty clearing div that follows
   this block in ai-infrastructure.html) so nothing below - the
   sub-heading and card grid - gets pulled up into the cleared
   space. margin-top is 28px, not a small nudge like 4px - measured
   live against the first paragraph's own top edge so the top of
   the gMeter logo lines up exactly with the top of the paragraph
   text next to it (the two didn't share a margin-top by default,
   since the float sits right after the heading while the paragraph
   has its own top spacing). Checked both logo source files for
   baked-in transparent padding that might explain visible empty
   space below the Hummingbird mark - neither has any (both are
   opaque edge-to-edge); Hummingbird is just a taller square badge
   next to gMeter's short wide wordmark, so tightened the gap
   between them a bit to keep the stack itself compact.             */

.platform-logos-float {
  float: left;
  width: 160px;
  margin: 28px 28px 16px 0;
}

.platform-logos-float a {
  display: block;
}

.platform-logos-float a + a {
  margin-top: 14px;
}

@media (max-width: 767px) {
  .platform-logos-float {
    float: none;
    width: auto;
    max-width: 160px;
    margin: 0 auto 20px;
  }
}

/* --- Three-icon stack for the "Detect - Cure - Monitor" loop card -
   Only this one card in "The loop" grid gets three icons instead of
   the usual single blurb-minimal__icon, stacked one under the other
   in its own left-hand icon column - deliberately different from
   its five siblings, per request. .blurb-minimal__icon itself is
   left untouched (still block, 32x41px, from the theme) so each of
   the three keeps its normal appearance; this just wraps them in a
   flex column with a small gap so they stack with breathing room
   instead of touching edge-to-edge.                                */

.dcm-icon-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}