/*
 * Hydra Command Center landing page
 * Loaded only on the "Hydra Command Center" page template
 * (template-hydra-command-center.php) — see serialcables_hcc_assets() in functions.php.
 *
 * Colours and layout follow the serialcables.com home page; typography follows the
 * earlier HCC release page (Instrument Sans, sentence-case 700 headings, grey body copy).
 * Everything is scoped under .hcc so it cannot leak into the rest of the theme.
 */
.hcc {
  --sc-indigo: #3730A3;      /* section headings, item titles */
  --sc-indigo-deep: #2E20A1; /* hover fill, pill text */
  --sc-ink: #140E45;         /* taglines */
  --sc-text: #111111;        /* body copy, outline buttons */
  --sc-navy: #0a0349;        /* footer navy */
  --sc-violet: #8135E6;      /* hero gradient start */
  --sc-royal: #1807AF;       /* hero gradient end */
  --sc-dark-a: #181155;      /* dark card gradient */
  --sc-dark-b: #3525BB;
  --sc-primary: #6423fd;     /* site primary button */
  --sc-red: #E11D48;         /* badge */
  --sc-green: #17885C;
  --sc-amber: #A8690A;
  --sc-card: #F2F0EF;        /* card background */
  --sc-offwhite: #F2F0EF;    /* body text on dark sections */
  --sc-pill: #E7E4FA;        /* pill background */
  --sc-lilac: #ede9fe;       /* white-button hover */
  --sc-line: #dedbe6;
  --sc-grey: #5B5A6E;         /* body copy on white (previous landing page) */
  --sc-head: #0A0349;         /* bold / strong text on white */
  /* Typography follows the previous landing page: Instrument Sans throughout, 17px body */
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--sc-text);
  -webkit-font-smoothing: antialiased;
  background: #ffffff;
}
.hcc *, .hcc *::before, .hcc *::after { box-sizing: border-box; }
.hcc h1, .hcc h2, .hcc h3, .hcc p, .hcc ul, .hcc ol, .hcc figure, .hcc table { margin: 0; padding: 0; }
.hcc img { max-width: 100%; height: auto; display: block; }
.hcc a { color: var(--sc-indigo); text-underline-offset: 2px; }
.hcc a:hover { color: var(--sc-indigo-deep); }
.hcc code, .hcc pre { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }
.hcc p code, .hcc li code, .hcc td code {
  font-size: 0.86em; background: var(--sc-pill); color: var(--sc-indigo-deep);
  border-radius: 3px; padding: 1px 5px;
}

.hcc-wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .hcc-wrap { padding: 0 24px; } }
.hcc-section { padding: 64px 0; }


/* Section heading: the home page's .section-heading */
.hcc h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 44px; font-weight: 700; line-height: 1.08; text-wrap: balance;
  color: var(--sc-indigo); letter-spacing: -0.5px;
  margin-bottom: 14px;
}
/* Tagline under a heading: the home page's .section-tagline */
.hcc .hcc-tagline {
  font-size: 18.5px; font-weight: 400; color: var(--sc-grey);
  max-width: 760px; margin-bottom: 36px;
}
/* Item title: the home page's .item-title */
.hcc h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(24px, 2.6vw, 31px); font-weight: 700; line-height: 1.15; letter-spacing: -0.3px;
  color: var(--sc-indigo); margin-bottom: 14px;
}
.hcc h3.small { font-size: 20px; letter-spacing: 0; margin-bottom: 8px; }
/* Body copy on white sections is grey, bold runs are navy */
.hcc-section:not(.hcc-dark) { color: var(--sc-grey); }
.hcc .hcc-section:not(.hcc-dark) b, .hcc .hcc-section:not(.hcc-dark) strong { color: var(--sc-head); font-weight: 600; }
.hcc p + p { margin-top: 12px; }
.hcc .muted { color: var(--sc-grey); font-size: 14.5px; }

/* Buttons */
.hcc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Instrument Sans', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2;
  border-radius: 4px; padding: 12px 24px; text-decoration: none; text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hcc .hcc-btn.outline { color: var(--sc-text); border: 1.5px solid var(--sc-text); background: transparent; }
.hcc .hcc-btn.outline:hover { background: var(--sc-indigo-deep); border-color: var(--sc-indigo-deep); color: #fff; }
.hcc .hcc-btn.white { background: #fff; color: var(--sc-indigo); border: 1.5px solid #fff; border-radius: 6px; }
.hcc .hcc-btn.white:hover { background: var(--sc-lilac); border-color: var(--sc-lilac); color: var(--sc-royal); }
.hcc .hcc-btn.ghost { color: #fff; border: 1.5px solid rgba(255,255,255,0.75); border-radius: 6px; }
.hcc .hcc-btn.ghost:hover { background: rgba(255,255,255,0.15); color: #fff; }
.hcc-btn small { font-weight: 400; font-size: 12.5px; opacity: 0.8; margin-top: 2px; }
.hcc-btn .stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }

/* Pills: the home page's .reseller-geo */
.hcc-pill {
  display: inline-block; font-family: 'Instrument Sans', sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
  border-radius: 999px; padding: 3px 11px; white-space: nowrap;
  background: var(--sc-pill); color: var(--sc-indigo-deep);
}
.hcc-pill.ok { background: #DDF2E8; color: #0F6B47; }
.hcc-pill.warn { background: #FBEEDB; color: #87540A; }
.hcc-pill.red { background: #FCE1E8; color: #B0123A; }

/* ── HERO ─────────────────────────────────────────────── */
.hcc-hero {
  /* Curved overlay = the serialcables.com home page slider background (same file, same placement) */
  background:
    url('https://cdn.raveretailer.com/E889F552C3/2026/05/images/GSR_6a0b7850573f92393371779140192.png') center bottom / 50% auto no-repeat,
    linear-gradient(to right, var(--sc-violet), var(--sc-royal));
  color: #fff; padding: 56px 0 64px; overflow: hidden;
}
.hcc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hcc .hcc-hero-media { order: -1; position: relative; padding-bottom: 15%; } /* room for the JBOF hanging below the video */
/* JBOF photo sits over the video's bottom-right corner */
.hcc .hcc-jbof { position: absolute; z-index: 3; right: -5%; bottom: 0; width: 42%; height: auto; filter: drop-shadow(0 18px 26px rgba(5, 1, 41, 0.45)); }
.hcc-badge {
  display: inline-block; font-family: 'Instrument Sans', sans-serif; font-size: 10px; font-weight: 700;
  color: #fff; background: var(--sc-red); border-radius: 20px; padding: 4px 10px;
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px;
}
.hcc-hero h1 {
  font-family: 'Instrument Sans', sans-serif; font-size: 44px; font-weight: 700;
  line-height: 1.04; letter-spacing: -1px; color: #fff; margin-bottom: 18px;
}
.hcc-hero .lead { font-size: clamp(19px, 2vw, 23px); font-weight: 600; color: #fff; line-height: 1.35; margin-bottom: 14px; max-width: 720px; }
.hcc-hero ul.bullets { list-style: none; max-width: 720px; }
/* Bullets styled like the home page slider: small dot markers, soft white text */
.hcc-hero .bullets li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.82); margin-bottom: 6px; }
.hcc-hero .bullets li::before { content: '·'; position: absolute; left: 4px; top: -1px; font-weight: 700; color: rgba(255,255,255,0.6); }
.hcc-hero .bullets code { font-size: 0.88em; background: rgba(255,255,255,0.18); color: #fff; border-radius: 3px; padding: 1px 5px; }
.hcc-hero .hcc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hcc-hero .fine { font-size: 14px; color: rgba(255,255,255,0.75); margin-top: 18px; }
.hcc-hero .fine a { color: #fff; }
.hcc-hero-media video {
  position: relative; z-index: 2;
  display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; background: #0d0a2e;
  box-shadow: 0 18px 44px rgba(5, 1, 41, 0.45);
}

/* ── STATS ────────────────────────────────────────────── */
/* Same treatment as the home page product row: grey disc, centred indigo title, left-aligned copy */
.hcc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.hcc-stat { display: flex; flex-direction: column; align-items: center; }
.hcc-stat .disc {
  width: 100%; max-width: 180px; aspect-ratio: 1; border-radius: 50%; background: #EEEDED;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  font-family: 'Instrument Sans', sans-serif; font-size: 44px; font-weight: 700; line-height: 1;
  color: var(--sc-indigo); letter-spacing: -1px; transition: transform 0.2s ease;
}
.hcc-stat:hover .disc { transform: scale(1.05); }
.hcc .hcc-stat h3 { text-align: center; font-size: 22px; letter-spacing: -0.2px; margin-bottom: 8px; }
.hcc-stat p { font-size: 15px; text-align: center; max-width: 240px; }
.hcc-shot { margin-top: 48px; }
video.hcc-shot { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; background: #0d0a2e; }

/* ── FEATURE ROWS (home page .flex-container) ─────────── */
.hcc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hcc-row + .hcc-row { margin-top: 64px; }
.hcc-row.flip .hcc-row-media { order: -1; }
.hcc-row ul { list-style: disc; padding-left: 18px; margin-top: 14px; }
.hcc-row li { font-size: 15.5px; margin-bottom: 8px; }
.hcc .hcc-callout { margin-top: 20px; background: var(--sc-card); border-left: 3px solid var(--sc-indigo); padding: 14px 18px; font-size: 15px; }
.hcc figcaption { font-size: 14.5px; margin-top: 12px; }

/* Code */
.hcc pre {
  background: var(--sc-navy); color: #E9E6FF; border-radius: 4px; padding: 18px 20px;
  font-size: 14px; line-height: 1.75; overflow-x: auto; margin-top: 18px; white-space: pre;
}
.hcc pre .c { color: #9C95D6; }
.hcc pre .p { color: #C9A8FF; }

/* ── TABLES ───────────────────────────────────────────── */
.hcc-table-wrap { overflow-x: auto; background: #fff; }
.hcc table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.hcc th {
  text-align: left; font-family: 'Instrument Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase; color: #fff; background: var(--sc-indigo); padding: 13px 18px;
}
.hcc td { padding: 13px 18px; border-top: 1px solid var(--sc-line); vertical-align: top; color: var(--sc-grey); }
.hcc tbody tr:nth-child(even) td { background: #FAF9F8; }
.hcc td:first-child { font-weight: 600; color: var(--sc-head); }

/* ── CARDS ────────────────────────────────────────────── */
.hcc-grid { display: grid; gap: 24px; }
.hcc-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.hcc-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.hcc-card { background: var(--sc-card); border-radius: 4px; padding: 32px; font-size: 15.5px; }
.hcc-card .hcc-btn { margin-top: 20px; }

/* Dark sections (footer navy). Sections alternate white / dark only. */
.hcc-dark { background: var(--sc-navy); color: var(--sc-offwhite); }
.hcc .hcc-dark h2, .hcc .hcc-dark h3, .hcc .hcc-dark b, .hcc .hcc-dark strong, .hcc .hcc-dark th, .hcc .hcc-dark .code-label { color: #fff; }
.hcc .hcc-dark .hcc-tagline { color: var(--sc-offwhite); }
.hcc .hcc-dark a:not(.hcc-btn) { color: #C9B6FF; }
.hcc .hcc-dark .muted { color: rgba(255,255,255,0.7); }
.hcc .hcc-dark p code, .hcc .hcc-dark li code { background: rgba(255,255,255,0.12); color: #fff; }
.hcc .hcc-dark figcaption { color: var(--sc-offwhite); opacity: 0.9; }
.hcc .hcc-dark figcaption b { color: #fff; }
.hcc .hcc-dark .hcc-callout { background: rgba(255,255,255,0.07); border-left-color: var(--sc-violet); color: var(--sc-offwhite); }
.hcc .hcc-dark .hcc-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.hcc .hcc-dark .hcc-note { background: rgba(255,255,255,0.07); color: var(--sc-offwhite); }
.hcc .hcc-dark .hcc-steps li::before { background: var(--sc-violet); }
.hcc .hcc-dark .hcc-table-wrap th { color: #fff; }
.hcc .hcc-dark .hcc-table-wrap code { background: var(--sc-pill); color: var(--sc-indigo-deep); }
/* White sections that follow another white section get a hairline divider */
.hcc-section:not(.hcc-dark) + .hcc-section:not(.hcc-dark) { border-top: 1px solid var(--sc-line); }
.hcc-pl { border-radius: 4px; padding: 32px; color: #fff; font-size: 15.5px; }
.hcc-pl.a { background: linear-gradient(to right, var(--sc-violet), var(--sc-royal)); }
.hcc-pl.b { background: linear-gradient(to left, var(--sc-dark-a), var(--sc-dark-b)); }
.hcc-pl h3 { color: #fff; font-weight: 700; }
.hcc .hcc-pl p { color: var(--sc-offwhite); }
.hcc .hcc-dark .code-label { font-weight: 700; font-size: 17px; margin-top: 40px; }
.hcc-dark pre { background: #050129; border: 1px solid rgba(255,255,255,0.12); margin-top: 10px; }

.hcc-row > *, .hcc-grid > *, .hcc-hero-grid > *, .hcc-stats > *, .hcc-gallery > * { min-width: 0; }

/* Gallery */
.hcc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }

/* Install steps */
.hcc ol.hcc-steps { list-style: none; counter-reset: s; margin-top: 18px; }
.hcc-steps li { counter-increment: s; position: relative; padding-left: 48px; margin-bottom: 16px; font-size: 15.5px; }
.hcc-steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--sc-indigo); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.hcc-steps pre { margin-top: 10px; }
.hcc .hcc-note { margin-top: 32px; background: #fff; border-radius: 4px; border-left: 3px solid var(--sc-red); padding: 18px 22px; font-size: 15px; }

/* Downloads */
.hcc .hcc-dl-title { font-size: 20px; font-weight: 700; color: var(--sc-head); margin: 8px 0 16px; }
.hcc .hcc-dl-title:not(:first-of-type) { margin-top: 40px; }
.hcc-dl { display: flex; flex-direction: column; background: var(--sc-card); border-radius: 4px; padding: 28px; }
.hcc-dl h3 { font-size: 20px; }
.hcc-dl p { font-size: 14.5px; flex: 1; }
.hcc-dl .file { font-family: 'SFMono-Regular', Consolas, Menlo, monospace; font-size: 12.5px; color: #555; margin-top: 14px; word-break: break-all; }
.hcc-dl .hcc-btn { margin-top: 16px; align-self: flex-start; }
.hcc .hcc-dl.primary { background: linear-gradient(to right, var(--sc-violet), var(--sc-royal)); color: var(--sc-offwhite); }
.hcc-dl.primary h3 { color: #fff; }
.hcc-dl.primary .file { color: rgba(255,255,255,0.75); }

/* Closing band */
.hcc-close { background: linear-gradient(to left, var(--sc-dark-a), var(--sc-dark-b)); color: #fff; text-align: center; padding: 72px 0; }
.hcc .hcc-close h2 { color: #fff; }
.hcc .hcc-close .hcc-tagline { color: var(--sc-offwhite); margin: 0 auto 28px; }
.hcc-close .hcc-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hcc-close ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 36px; font-size: 13.5px; color: var(--sc-offwhite); }

/* ── IMAGE EXPAND: click to open, click anywhere to close ── */
.hcc img[data-zoom] { cursor: zoom-in; transition: opacity 0.15s; }
.hcc img[data-zoom]:hover { opacity: 0.92; }
.hcc img[data-zoom]:focus-visible { outline: 3px solid var(--sc-primary); outline-offset: 3px; }
.hcc-lb {
  position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center;
  padding: 24px; background: #050129; cursor: zoom-out;
}
.hcc-lb.open { display: flex; }
.hcc .hcc-lb-fig { display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.hcc .hcc-lb-fig img { max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; object-fit: contain; }
.hcc .hcc-lb-cap { margin-top: 12px; font-size: 14px; text-align: center; color: rgba(255,255,255,0.85); }
.hcc .hcc-lb-cap b { color: #fff; }
html.hcc-lb-lock, html.hcc-lb-lock body { overflow: hidden; }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 991px) {
  .hcc-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hcc-hero-media { max-width: 720px; width: 100%; justify-self: center; }
  .hcc .hcc-jbof { right: 0; }
  .hcc-hero h1, .hcc h2 { font-size: 36px; }
  .hcc-grid.c3, .hcc-gallery { grid-template-columns: repeat(2, 1fr); }
  .hcc-stats { grid-template-columns: repeat(2, 1fr); }
  .hcc-row { gap: 32px; }
}
@media (max-width: 767px) {
  .hcc-section { padding: 48px 0; }
  .hcc-hero { padding: 40px 0 48px; background: linear-gradient(to right, var(--sc-violet), var(--sc-royal)); } /* site drops the curve on mobile too */
  .hcc-hero-grid { grid-template-columns: 1fr; }
  .hcc-hero h1, .hcc h2 { font-size: 30px; }
  .hcc-hero .lead { font-size: 17px; }
  .hcc-hero .hcc-btn { width: 100%; justify-content: flex-start; }
  .hcc h3 { font-size: 20px; }
  .hcc-row, .hcc-grid.c2, .hcc-grid.c3, .hcc-gallery { grid-template-columns: 1fr; }
  .hcc-row.flip .hcc-row-media { order: 0; }
  .hcc-stat .disc { max-width: 130px; font-size: 36px; }
  .hcc-card, .hcc-pl, .hcc-dl { padding: 24px; }
}
@media (min-width: 768px) and (max-width: 991px) {
}

/* ── WORDPRESS THEME INTEGRATION ─────────────────────── */
/* The theme wraps page content in #page-wrap with padding and a grey background;
   this template is full-bleed, so the hero must touch the header. */
#page-wrap.site-content { padding: 0; min-height: 0; background: none; }
/* Bootstrap 4 reboot adds a bottom margin to <pre> */
.hcc pre { margin-bottom: 0; }
/* Bootstrap 4 removes link underlines; inline text links on this page keep them */
.hcc p a:not(.hcc-btn), .hcc li a:not(.hcc-btn) { text-decoration: underline; }