/* =================== NIGHTHAWK PAGE OVERRIDES =================== */
/* This file contains styles specific to nighthawk.html only */

/* Flow step scroll animation (moved from nighthawk.html inline style) */
body.leadsonline.nighthawk .features-flow .flow-step {
  opacity: 0;
  transform: translateY(40px);
  animation: none;
}
body.leadsonline.nighthawk .features-flow .flow-step.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* =================== HERO LOGO SIZING =================== */
/* NightHawk logo uses scale(1.6) vs the default scale(1.3) in cellhawk-overrides.css */
body.leadsonline.nighthawk .clearcase-hero-logo {
  transform: scale(1.6);
  transform-origin: left center;
  margin-bottom: 32px;
  margin-left: 0;
  display: block;
}

/* =================== ICON-ONLY BUTTON RESETS =================== */
/* Override the global "button" rule in styles.css that forces blue bg + padding on all buttons */
body.leadsonline.nighthawk .case-study-share-btn,
body.leadsonline.nighthawk .nav-search-icon,
body.leadsonline.nighthawk .lang-dropdown__toggle {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  background-image: none;
  border: none;
  box-shadow: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  border-radius: 0;
  outline: none;
}

body.leadsonline.nighthawk .case-study-share-btn:hover {
  background: rgba(53, 117, 226, 0.1);
  border-radius: 50%;
}

/* =================== HERO CTA BUTTON GROUP =================== */
.hero-cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hero-cta-group .btn-secondary {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.hero-cta-group .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Media & Resources Section - Solid Navy Background (matching CellHawk) */
html body.leadsonline .nighthawk-media-resources,
html body.leadsonline .clearcase-media-resources.nighthawk-media-resources,
html body.leadsonline section.nighthawk-media-resources,
html body.leadsonline .clearcase-media-resources,
html body.leadsonline section.clearcase-media-resources,
.clearcase-media-resources {
  position: relative;
  background: #002855;
  background-image: none;
  background-color: #002855;
  min-height: 520px;
  padding-top: 56px;
  padding-bottom: 56px;
  color: #fff;
  overflow: hidden;
  border-radius: 0;
}

/* FAQ Section - Remove rounded corners */
html body.leadsonline .clearcase-faq {
  border-radius: 0;
}

/* =================== FAQ SECTION - Light Blue Background with Black Text (matching CellHawk) =================== */
html body.leadsonline .nighthawk-faq,
html body.leadsonline .clearcase-faq.nighthawk-faq,
html body.leadsonline section.nighthawk-faq,
section.nighthawk-faq.clearcase-faq,
.nighthawk-faq.clearcase-faq {
  background: #F5F9FF;
  background-color: #F5F9FF;
  background-image: none;
}

/* Hide decorative orbs in FAQ */
html body.leadsonline .nighthawk-faq::before,
html body.leadsonline .nighthawk-faq::after,
section.nighthawk-faq.clearcase-faq::before,
section.nighthawk-faq.clearcase-faq::after {
  display: none;
  content: none;
  background: none;
}

/* FAQ title - black text */
html body.leadsonline .nighthawk-faq .clearcase-faq__title,
.nighthawk-faq .clearcase-faq__title,
section.nighthawk-faq .clearcase-faq__title {
  color: #000000;
}

/* FAQ accordion items - light blue background */
html body.leadsonline .nighthawk-faq .faq-item,
html body.leadsonline .nighthawk-faq.clearcase-faq .faq-item,
html body.leadsonline section.nighthawk-faq .faq-item,
html body.leadsonline .clearcase-faq.nighthawk-faq .faq-item {
  background: #F5F9FF;
  background-color: #F5F9FF;
  border: 1px solid rgba(0, 40, 85, 0.2);
  box-shadow: none;
}

/* FAQ item hover state */
html body.leadsonline .clearcase-faq.nighthawk-faq .faq-item:hover,
html body.leadsonline .nighthawk-faq .faq-item:hover {
  background: #e8f1fc;
  background-color: #e8f1fc;
  transform: none;
  box-shadow: none;
}

/* FAQ item open state */
html body.leadsonline .clearcase-faq.nighthawk-faq .faq-item[open],
html body.leadsonline .nighthawk-faq .faq-item[open] {
  background: #F5F9FF;
  background-color: #F5F9FF;
}

/* All text inside FAQ items - black */
.nighthawk-faq .faq-item,
.nighthawk-faq .faq-item *,
.nighthawk-faq .faq-item summary,
.nighthawk-faq .faq-item__q,
.nighthawk-faq .faq-item__a,
.nighthawk-faq .faq-item__a p,
section.nighthawk-faq .faq-item,
section.nighthawk-faq .faq-item * {
  color: #000000;
}

/* Dropdown arrow - black */
.nighthawk-faq .faq-item summary::after,
.nighthawk-faq .faq-item summary::marker,
section.nighthawk-faq .faq-item summary::after,
section.nighthawk-faq .faq-item summary::marker {
  color: #000000;
  border-color: #000000;
}

/* NightHawk Contact Section - Match footer dark blue gradient (same as CellHawk) */
html body.leadsonline .clearcase-contact {
  background: linear-gradient(135deg, #0a1f44 0%, #0a2a5c 50%, #1a3666 100%);
  background-image: linear-gradient(135deg, #0a1f44 0%, #0a2a5c 50%, #1a3666 100%);
}

/* =================== DECORATIVE BACKGROUND ELEMENTS =================== */
/* Hide decorative orbs to match CellHawk */
html body.leadsonline .clearcase-media-resources::before,
html body.leadsonline .clearcase-media-resources::after {
  display: none;
  content: none;
  background: none;
}

/* Ensure content is above the orbs */
html body.leadsonline .clearcase-media-resources .container {
  position: relative;
  z-index: 1;
}

/* Right edge fade - removed to match CellHawk */
html body.leadsonline .clearcase-media-resources .benefits-scroller-wrap {
  position: relative;
  overflow: visible;
  padding-top: 12px;
  margin-top: -12px;
}

/* Remove the fade overlay that causes hard edge */
html body.leadsonline .clearcase-media-resources .benefits-scroller-wrap::after {
  display: none;
}

/* Remove mask to match CellHawk */
html body.leadsonline .clearcase-media-resources .benefits-scroller {
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 12px;
  padding-bottom: 20px;
  margin-top: -12px;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Return to Top Button */
.return-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  left: auto;
  top: auto;
  padding: 14px 24px;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  border: none;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
  z-index: 9999;
}

.return-to-top:hover {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.5), 0 6px 16px rgba(0, 0, 0, 0.2);
}

.return-to-top:active {
  transform: translateY(-2px);
}

.return-to-top svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.return-to-top span {
  white-space: nowrap;
}

/* =================== SCROLLBAR STYLING =================== */
/* Thinner, gray scrollbar for Media & Resources scroller */
html body.leadsonline .clearcase-media-resources .benefits-scroller::-webkit-scrollbar {
  height: 4px;
}

html body.leadsonline .clearcase-media-resources .benefits-scroller::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

html body.leadsonline .clearcase-media-resources .benefits-scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

html body.leadsonline .clearcase-media-resources .benefits-scroller::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

/* Firefox scrollbar */
html body.leadsonline .clearcase-media-resources .benefits-scroller {
  scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.05);
  scrollbar-width: thin;
}

/* =================== GLASSMORPHISM CARDS (matching CellHawk) =================== */
html body.leadsonline .clearcase-media-resources .benefit-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Hover state (matching CellHawk) */
html body.leadsonline .clearcase-media-resources .benefit-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Card text color */
html body.leadsonline .clearcase-media-resources .benefit-card p {
  color: rgba(255, 255, 255, 0.9);
}

/* Icon sizing (matching CellHawk) */
html body.leadsonline .clearcase-media-resources .benefit-card__icon,
html body.leadsonline .clearcase-media-resources .benefit-card__icon--paper,
html body.leadsonline .clearcase-media-resources .benefit-card__icon--press,
html body.leadsonline .clearcase-media-resources .benefit-card__icon--watch {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

html body.leadsonline .clearcase-media-resources .benefit-card__icon svg {
  width: 36px;
  height: 36px;
  display: block;
  margin: 0 auto;
}

/* =================== FAQ SECTION ENHANCEMENTS =================== */
/* FAQ Section - Background and positioning */
html body.leadsonline .clearcase-faq {
  position: relative;
  background: #005587;
  overflow: visible;
}

/* Floating orb - top left for FAQ */
html body.leadsonline .clearcase-faq::before {
  content: '';
  display: block;
  position: absolute;
  top: -80px;
  left: -80px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0.06) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: floatOrb 9s ease-in-out infinite;
  filter: blur(40px);
}

/* Floating orb - bottom right for FAQ */
html body.leadsonline .clearcase-faq::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -100px;
  right: -60px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, rgba(37, 99, 235, 0.07) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: floatOrb 11s ease-in-out infinite reverse;
  filter: blur(40px);
}

/* Ensure FAQ content is above the orbs */
html body.leadsonline .clearcase-faq .clearcase-faq__inner {
  position: relative;
  z-index: 1;
}

/* Enhanced glassmorphism for FAQ items */
html body.leadsonline .clearcase-faq .faq-item {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* FAQ item hover state */
html body.leadsonline .clearcase-faq .faq-item:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 40px -15px rgba(37, 99, 235, 0.2);
  transform: translateY(-2px);
}

/* FAQ item open state */
html body.leadsonline .clearcase-faq .faq-item[open] {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0.07) 100%
  );
  border-color: rgba(255, 255, 255, 0.15);
}

/* =================== CONTACT SECTION =================== */
html body.leadsonline .clearcase-contact__inner {
  display: flex;
  flex-direction: column;
}

html body.leadsonline .clearcase-contact__heading {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0 0;
  padding: 0;
  line-height: 1.1;
  text-align: left;
}

html body.leadsonline .clearcase-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: -20px;
  padding-top: 0;
}

@media (max-width: 880px) {
  html body.leadsonline .clearcase-contact__grid {
    grid-template-columns: 1fr;
  }
}

/* =================== OVERVIEW SECTION - REMOVE COLOR SPILL =================== */
/* Ensure the Overview section has a clean white background with no bleed */
html body.leadsonline .clearcase-intro.leadsonline-overview {
  background: #ffffff;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Contain the solution section decorative elements */
html body.leadsonline .clearcase-solution.leads-soukltion {
  overflow: hidden;
}

/* Prevent the decoration from bleeding above the section */
html body.leadsonline .leads-soukltion-deco {
  top: 0;
  clip-path: inset(0);
}

html body.leadsonline .leads-soukltion-overlay {
  clip-path: inset(0);
}

/* =================== ALL FAQ SECTIONS - WHITE THEME =================== */
/* All FAQ sections - white background, black text, soft borders */
html body.leadsonline .clearcase-faq {
  background: #ffffff;
  background-color: #ffffff;
  background-image: none;
}

html body.leadsonline .clearcase-faq::before,
html body.leadsonline .clearcase-faq::after {
  display: none;
  content: none;
  background: none;
  width: 0;
  height: 0;
}

html body.leadsonline .clearcase-faq .clearcase-faq__title {
  color: #000000;
}

html body.leadsonline .clearcase-faq .faq-item {
  background: #ffffff;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body.leadsonline .clearcase-faq .faq-item:hover {
  background: #f5f5f5;
  background-color: #f5f5f5;
  transform: none;
  box-shadow: none;
}

html body.leadsonline .clearcase-faq .faq-item[open] {
  background: #ffffff;
  background-color: #ffffff;
}

html body.leadsonline .clearcase-faq .faq-item summary,
html body.leadsonline .clearcase-faq .faq-item__q,
html body.leadsonline .clearcase-faq .faq-item__a,
html body.leadsonline .clearcase-faq .faq-item__a p,
html body.leadsonline .clearcase-faq .faq-item * {
  color: #000000;
}

html body.leadsonline .clearcase-faq .faq-item summary::after {
  border-color: #999999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23999999' d='M7 10l5 5 5-5z'/></svg>");
}

/* Mobile hero: Hide secondary buttons, show only Request Demo */
@media (max-width: 768px) {
  .hero-cta-group .btn-secondary {
    display: none;
  }
  
  /* Mobile: Stack How it Works cards vertically */
  .flow-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 40px;
  }
  
  /* Mobile: Center align How it Works header and subtitle */
  .solution-copy__h,
  .features-flow-subtitle {
    text-align: center;
  }
}