/* ================================================================
   THEME V2 — "Vintage Computing" light/dark retheme
   ================================================================
   Loaded AFTER main.css (and after any inline <style> blocks in the
   page <head>) on every public page. Everything in here is additive/
   override-only — main.css and every SCSS partial under assets/scss/
   are UNTOUCHED. To revert to the old look, just remove this file's
   <link> tag (and the theme-toggle button/script) from a page; the
   old design comes back exactly as it was, nothing to "undo".

   Default theme is LIGHT. Dark mode activates via [data-theme="dark"]
   on <html>, set by assets/js/theme-toggle.js (persisted in
   localStorage under "hpc-theme"). No system-preference auto-switch —
   the explicit default must stay light regardless of OS settings.
   ================================================================ */

:root {
  --mono-font: 'IBM Plex Mono', 'Courier New', Courier, monospace;
}

/* ================================================================
   LIGHT THEME (default) — warm paper + amber terminal accent
   ================================================================ */
:root,
html:not([data-theme="dark"]) {
  --background-color: #f2f0e6;
  --default-color: #2a2a24;
  --heading-color: #1c1c1c;
  --accent-color: #8a4c00;
  --surface-color: #ffffff;
  --contrast-color: #fffaf0;

  --nav-color: #3a3a30;
  --nav-hover-color: #8a4c00;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #2a2a24;
  --nav-dropdown-hover-color: #8a4c00;

  --terminal-green: #1e5c3a;
  --card-border-radius: 0;
}

html:not([data-theme="dark"]) .header {
  --background-color: #ffffff;
  --surface-color: #f2f0e6;
}

/* .light-background/.dark-background are BootstrapMade's preset "alternate
   section background" utility classes (used on .about and .team-2 here) —
   they hardcode --background-color/--surface-color (and more, for
   dark-background) to the OLD dark-navy palette in _variables.scss,
   which otherwise silently overrides the theme redefinition above on any
   section using them. */
html:not([data-theme="dark"]) .light-background {
  --background-color: #ffffff;
  --surface-color: #f2f0e6;
}
html:not([data-theme="dark"]) .dark-background {
  --background-color: #eae4d0;
  --default-color: #2a2a24;
  --heading-color: #1c1c1c;
  --surface-color: #ffffff;
  --contrast-color: #fffaf0;
}

/* ================================================================
   DARK THEME — near-black, green-tinted, amber brightens for contrast
   ================================================================ */
html[data-theme="dark"] {
  --background-color: #0d1210;
  --default-color: #d8e8d8;
  --heading-color: #eef7ee;
  --accent-color: #ffb347;
  --surface-color: #16201a;
  --contrast-color: #14100a;

  --nav-color: #c3d6c3;
  --nav-hover-color: #ffb347;
  --nav-mobile-background-color: #16201a;
  --nav-dropdown-background-color: #16201a;
  --nav-dropdown-color: #d8e8d8;
  --nav-dropdown-hover-color: #ffb347;

  --terminal-green: #3ddc84;
  --card-border-radius: 0;

  /* paramshakti.php's System Architecture diagram — IPMI/Infiniband line
     colors. The light-theme values (defined in paramshakti.php itself)
     were nearly invisible against this near-black background. */
  --arch-ipmi: #a89cf0;
  --arch-ib: #e2596b;

  /* dgx-ai-cluster.php's System Architecture diagram — "Data/InfiniBand"
     fabric line color (the dark slate default was similarly too close to
     this near-black background). */
  --arch-data: #93a9c4;
}

html[data-theme="dark"] .header {
  --background-color: #0a0e0c;
  --surface-color: #16201a;
}

html[data-theme="dark"] .light-background {
  --background-color: #16201a;
  --surface-color: #0d1210;
}
html[data-theme="dark"] .dark-background {
  --background-color: #050806;
  --default-color: #d8e8d8;
  --heading-color: #eef7ee;
  --surface-color: #0d1210;
  --contrast-color: #14100a;
}

/* ================================================================
   SHARP CORNERS — Bootstrap components (buttons, cards, dropdowns,
   modals, alerts, forms, badges, accordions all reference these vars)
   ================================================================ */
:root {
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
}

/* ================================================================
   SHARP CORNERS — this site's own custom classes (hardcoded px radii
   in the SCSS partials, not routed through a variable). Circular
   shapes (avatars, spinners, social icons, decorative blobs) use
   border-radius:50% and are deliberately left alone below.

   Card/panel containers (service-item, cta-banner, faq-item, channel-
   card, mac-code-box, doc-table-wrap) used to be in this list too, but
   have been moved to the ROUNDED CARDS block below instead — see that
   block's comment for why. Everything still listed here is genuine UI
   chrome (buttons, form controls, badges/pills, icon squares, dropdown
   menus, inline code, images) where the sharp vintage-computing corner
   stays intentional.
   ================================================================ */
.services .icon-wrapper,
.services .badge-popular,
.services .cta-banner .cta-badge,
.faq .faq-item .faq-header .faq-icon,
.contact .channel-card .channel-icon,
.contact .contact-intro .intro-badge,
.doc-nav-btn,
.mac-code-qr,
.term-card .term-card-header .term-number,
.term-card code,
.term-card img.img-fluid,
.navmenu .dropdown ul,
select,
input,
textarea,
.form-control,
.form-select,
.btn,
.card,
.badge,
.dropdown-menu,
.alert {
  border-radius: 0 !important;
}

/* ================================================================
   ROUNDED CARDS — 14px radius, matching the hero stat chips/buttons
   and the index.php "System Architecture" service-item cards. Additive-
   only like everything else in this file: the underlying SCSS/inline
   radius values (8px/10px/12px/16px/etc., all over the map before this)
   are untouched, so removing this file still restores each component's
   original pre-theme-v2 radius, not a broken in-between state.

   Deliberately NOT included here (left as-is, judgment calls): the
   Publications/Patents accordion (`.ipr-accordion .accordion-item`) —
   Bootstrap's accordion CSS handles first/last-child corner-joining via
   this same var, touching it risks breaking that seam logic for
   uncertain visual benefit; `table.dgx-table` — a data table, not a
   content panel; `.check-item`/`.restrict-item` — single-line list rows,
   not grouped-content boxes; `.stack-sidebar-cell` — a table `<td>`
   styled as a label chip, not a standalone panel.
   ================================================================ */
.services .service-item,
.services .cta-banner,
.faq .faq-wrapper,
.faq .faq-item,
.contact .channel-card,
.contact .form-wrapper,
.team-2 .team-member,
.mac-code-box,
.doc-table-wrap,
.terms-of-service-2 .term-card,
.terms-of-service-2 .sidebar-nav,
.terms-of-service-2 .highlight-callout,
.terms-of-service-2 .warning-banner,
.terms-of-service-2 .disclaimer-panel,
.terms-of-service-2 .support-banner,
.ack-card,
.dgx-error-card,
.dgx-contact-box,
.dgx-code-box,
.dgx-policy-note,
.dgx-stats-grid,
.psk-stats-grid {
  border-radius: 14px !important;
}

.team-2 .team-member .member-img img {
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
}
@media (max-width: 767px) {
  .team-2 .team-member .member-img img {
    border-radius: 14px 14px 0 0 !important;
  }
}

/* ================================================================
   NO GRADIENTS — flatten to solid colors, keep the same visual weight
   ================================================================ */
.about .floating-badge .badge-icon,
.services .cta-banner {
  background: var(--accent-color) !important;
}
.services .badge-popular {
  background: var(--terminal-green) !important;
}
.contact::before {
  background: none !important;
}

/* ================================================================
   HERO BACKGROUND PHOTO — day/night crossfade
   Same server room, two lighting passes. Layout/transition lives in
   _hero.scss; only which one is visible belongs here with the rest of
   the [data-theme] logic.
   ================================================================ */
html:not([data-theme="dark"]) .hero .hero-bg-light {
  opacity: 1;
}
html[data-theme="dark"] .hero .hero-bg-dark {
  opacity: 1;
}

/* ================================================================
   PARAMSHAKTI PAGE-TITLE BACKGROUND PHOTO — day/night crossfade
   Reuses the same two hero photos on paramshakti.php's page-title heading
   (that page has its own scoped .psk-hero-bg-* classes since it isn't the
   .hero section) — layout/transition lives in paramshakti.php's own
   <style> block; only which one is visible belongs here.
   ================================================================ */
html:not([data-theme="dark"]) .psk-hero-bg-light {
  opacity: 1;
}
html[data-theme="dark"] .psk-hero-bg-dark {
  opacity: 1;
}

/* ================================================================
   ABOUT SECTION (PARAM Shakti) BACKGROUND PHOTO — day/night crossfade
   Same idea as the hero photo above, scoped to .about-bg-light/dark.
   ================================================================ */
html:not([data-theme="dark"]) .about .about-bg-light {
  opacity: 1;
}
html[data-theme="dark"] .about .about-bg-dark {
  opacity: 1;
}

/* ================================================================
   MONOSPACE ACCENTS — "terminal readout" feel on labels/data, not body text
   ================================================================ */
.hero-badge .badge,
.about .section-badge,
.services .badge-popular,
.services .cta-banner .cta-badge,
.contact .intro-badge span,
.sidebar-progress,
.doc-nav-btn .btn-label,
.term-card h5,
.card-value,
.card-label {
  font-family: var(--mono-font) !important;
  letter-spacing: 0.03em;
}

/* ================================================================
   THEME TOGGLE BUTTON
   ================================================================ */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 14px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  background: var(--surface-color);
  color: var(--default-color);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.theme-toggle-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.theme-toggle-btn .bi-moon-stars { display: none; }
html[data-theme="dark"] .theme-toggle-btn .bi-sun { display: none; }
html[data-theme="dark"] .theme-toggle-btn .bi-moon-stars { display: inline-block; }

@media (max-width: 1200px) {
  .theme-toggle-btn { order: 2; margin: 0 10px; }
}

/* Two instances now exist per page: a nav-bar one (mobile, <1200px —
   matches the site's own .navmenu/.mobile-nav-toggle breakpoint) and a
   fixed bottom-left floating one (desktop, >=1200px — mirrors
   .scroll-top's fixed bottom-right placement, opposite corner so the
   two never overlap). theme-toggle.js wires up every .theme-toggle-btn
   on the page, so both stay in sync automatically. */
@media (min-width: 1200px) {
  .theme-toggle-btn-nav { display: none; }
}
@media (max-width: 1199px) {
  .theme-toggle-btn-floating { display: none; }
}
.theme-toggle-btn-floating {
  position: fixed;
  left: 15px;
  bottom: 15px;
  z-index: 99999;
  margin-right: 0;
  border-radius: 4px;
}

/* ================================================================
   HEADER LOGO — assets/img/hpc-logo.png is a white-only asset (fine
   as-is on the dark theme's near-black header). On the light theme's
   white/cream header it's otherwise invisible, so force it dark;
   brightness(0) collapses it to solid black regardless of the source
   file's color, same trick used for the partner logos elsewhere in
   this file.
   ================================================================ */
html:not([data-theme="dark"]) .header .logo img {
  filter: brightness(0);
}

/* The per-page inline height:56px was previously getting clamped right
   back down to 36px by _header.scss's own `.header .logo img { max-
   height: 36px; }` — max-height always wins over height, so raising the
   inline value alone had no visible effect. Overriding the cap here.

   Responsive, not flat everywhere: Bootstrap's own .container is only
   1140px wide from 1200–1399px (it doesn't grow to 1320px until the
   1400px xxl breakpoint), so a large logo at that width leaves the
   "HPC Account" button too little room and it collides with "User
   Support". A smaller cap in that tight band keeps enough breathing
   room; the full size is restored once the wider 1320px container
   kicks in.

   Below 1200px the header switches to the collapsed hamburger nav, but
   the row still holds logo + theme toggle + "HPC Account" button +
   hamburger all at once — on real phone widths (measured: 375px) that
   combination overflowed the viewport and pushed the hamburger icon
   off-screen entirely, making the mobile menu unopenable. So the same
   40px cap now also applies for the whole <1200px range, shrinking
   further still on narrow phones. */
.header .logo img {
  max-height: 72px;
}
@media (max-width: 1399.98px) {
  .header .logo img {
    max-height: 40px;
  }
}
@media (max-width: 480px) {
  .header .logo img {
    max-height: 30px;
  }
}

/* ================================================================
   HEADER "HPC Account" BUTTON — same glassmorphism treatment as the
   hero's .btn-primary (gradient, blur, accent border), instead of the
   flat solid-accent .btn-getstarted look, but with no drop-shadow/glow
   (removed on request — too heavy sitting in the nav row). Kept at the
   header's own compact font-size/padding (not the hero's much larger
   scale) since this sits in a cramped nav row, not a spacious hero.
   white-space:nowrap + flex-shrink:0 stop the "HPC Account ↗" label
   from wrapping the arrow onto a second line if the row ever gets
   tight again — it'll overflow slightly rather than silently break.
   ================================================================ */
.header .btn-getstarted,
.header .btn-getstarted:focus {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-color) 92%, transparent),
    color-mix(in srgb, var(--accent-color) 74%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-color) 60%, transparent) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Same overflowing-header fix as the logo cap above: on narrow phones
   every header item (logo, theme toggle, this button, hamburger) has to
   get smaller together or the row overflows and hides the hamburger.
   Text-only shrink here (no hiding/icon-dropping) so the button stays
   just as usable, just more compact. */
@media (max-width: 480px) {
  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    padding: 6px 14px;
    font-size: 12px;
    margin-right: 8px !important;
  }
  .theme-toggle-btn-nav {
    width: 32px;
    height: 32px;
    margin: 0 6px !important;
  }
  .mobile-nav-toggle {
    font-size: 24px !important;
    margin-right: 4px !important;
  }
}

/* ================================================================
   HERO BADGE — Bootstrap's base .badge forces white-space:nowrap,
   which is fine for short pills but this one holds a full sentence
   ("Indian Institute of Technology Kharagpur"); on phone widths it was
   silently clipped off the right edge of the viewport instead of
   wrapping. Override just for this instance rather than touching
   .badge globally (other badges on the site are short labels where
   nowrap is correct and intentional).
   ================================================================ */
@media (max-width: 576px) {
  .hero .hero-content .hero-badge .badge {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
}
.header .btn-getstarted:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-color) 100%, transparent),
    color-mix(in srgb, var(--accent-color) 82%, transparent)) !important;
  box-shadow: none !important;
}

/* ================================================================
   PARTNERS / CLIENTS LOGOS
   Partner logo files (assets/img/clients/*) are dark-ink-on-transparent
   artwork — shown as-is (their real ink/brand color) in light mode. In
   dark mode every logo is forced to a flat white silhouette instead of
   trying to keep true colors: brightness(0) collapses all opaque pixels
   to black regardless of original hue, then invert(1) flips that to
   white, while transparent areas stay transparent either way.
   ================================================================ */
.clients-logos {
  justify-content: space-evenly;
  row-gap: 32px;
}
.clients-logos img {
  max-height: 60px;
}
html[data-theme="dark"] .clients-logos img {
  filter: brightness(0) invert(1);
}

/* ================================================================
   CONTACT MAP — dark mode
   The embedded map uses Google's free Maps Embed iframe
   (google.com/maps/embed?pb=...), which has no official dark-theme
   parameter — that only exists via the paid Maps JavaScript API with a
   custom `styles` array. Standard workaround for the free iframe: invert
   all colors, then rotate hue 180° to bring roads/water/land back to
   roughly natural-looking (not inverted-looking) colors, net result
   reads as a dark map instead of a jarring negative image.
   ================================================================ */
html[data-theme="dark"] #contact iframe {
  filter: invert(90%) hue-rotate(180deg);
}

/* ================================================================
   SITE TOPBAR — wraps the announcement bar + .header together so both
   stick to the top of the viewport as one unit. .header alone already
   carries Bootstrap's .sticky-top utility class, but that pins it to
   top:0 on its own — with the announcement bar sitting above it in
   normal flow, the bar would scroll out of view underneath the sticky
   header instead of staying visible. Making the wrapper the sticky
   element (and neutralizing .header's own sticky positioning inside
   it) keeps the whole group, bar included, pinned together.
   ================================================================ */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: 997;
  /* Solid backing for the whole stuck group (announcement bar + header +
     breadcrumb, whichever are present) — page content scrolls underneath
     this the moment it's stuck, so no child of it can afford a
     translucent background without letting that content show through. */
  background: var(--background-color);
}
.site-topbar .header {
  position: static;
}

/* ================================================================
   ANNOUNCEMENT BAR — not dismissible (no close button, no localStorage
   persistence, no hide-on-scroll) — stays visible, pinned above the
   header via .site-topbar above. Message scrolls horizontally as a
   continuous marquee so longer announcements don't need to wrap or
   truncate. Background matches .header exactly (same light/dark
   override values below, since as a preceding sibling it can't
   inherit .header's own locally-scoped --background-color).
   ================================================================ */
.announcement-bar {
  background: var(--background-color);
  color: var(--default-color);
  padding: 6px 0;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
html:not([data-theme="dark"]) .announcement-bar {
  --background-color: #ffffff;
}
html[data-theme="dark"] .announcement-bar {
  --background-color: #0a0e0c;
}
.announcement-bar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.announcement-bar-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.announcement-bar-track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  font-size: 14px;
  font-weight: 500;
  /* --marquee-duration is set by main.js from the track's actual rendered
     width so scroll speed (px/sec) stays constant regardless of how much
     announcement text is joined together — the 34s fallback below only
     matters until JS runs (or if it's ever disabled). */
  animation: announcementMarquee var(--marquee-duration, 34s) linear infinite;
}
.announcement-bar-marquee:hover .announcement-bar-track {
  animation-play-state: paused;
}
.announcement-bar-track .announcement-bar-link {
  color: var(--accent-color);
  font-weight: 700;
  text-decoration: underline;
  margin-left: 12px;
}
@keyframes announcementMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.announcement-bar-notice {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--background-color);
  color: var(--accent-color);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 0;
  border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.announcement-bar-notice:hover {
  color: color-mix(in srgb, var(--accent-color), black 15%);
}
@media (max-width: 575px) {
  .announcement-bar-track {
    font-size: 12.5px;
  }
  .announcement-bar-notice {
    font-size: 11.5px;
    padding: 4px 10px 4px 10px;
  }
}
