/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Lexend:wght@300;400;500;600;700&display=swap');

/* =================================
   TYPOGRAPHY - SPACE GROTESK
   ================================= */

h1, h2, h3, h4, h5, h6,
.heading, .title,
[class*="heading"],
[class*="title"],
[class*="header"] {
    font-family: 'Space Grotesk', sans-serif !important;
}

span.Header__logotxt {
    font-family: 'Space Grotesk', sans-serif !important;
}

.Header__logotxt,
[class*="Support Hub"] {
    font-family: 'Space Grotesk', sans-serif !important;
}

h1:contains("Welcome"),
.welcome-heading,
[class*="Welcome"] {
    font-family: 'Space Grotesk', sans-serif !important;
}

.zd-portal-header,
.zd-portal-title,
.zd-article-title,
.zd-category-title,
.zd-section-title {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* =================================
   TYPOGRAPHY - LEXEND
   ================================= */

p, body,
.description, .content,
[class*="description"],
[class*="content"],
[class*="body-text"],
.article-content,
.ticket-description,
.comment-body {
    font-family: 'Lexend', sans-serif !important;
}

p:contains("Search our help center"),
.subheading,
[class*="subheading"] {
    font-family: 'Lexend', sans-serif !important;
}

input[placeholder*="Search"],
.search-input,
[class*="search"] input {
    font-family: 'Lexend', sans-serif !important;
}

.zd-article-body,
.zd-portal-description,
.zd-ticket-content,
.zd-comment-content {
    font-family: 'Lexend', sans-serif !important;
}

/* =================================
   TYPOGRAPHY - WEIGHTS & SPACING
   ================================= */

h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 500; }
h4, h5, h6 { font-weight: 500; }

p, .zd-article-body {
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

/* =================================
   FIXED HEADER: single full-width background + overlay
   ================================= */

:root {
  --header-solid: hsla(213,87%,9%,1);
  --header-grad-1: radial-gradient(at 12% 89%, hsla(204,87%,54%,0.47) 0px, transparent 50%);
  --header-grad-2: radial-gradient(at 88% 69%, hsla(207,85%,25%,0.51) 0px, transparent 50%);
  --header-darken: rgba(0,0,0,0.35);
}

.Header__header {
  position: relative !important;
  background:
    var(--header-grad-1),
    var(--header-grad-2),
    var(--header-solid) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
}

.Header__header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--header-darken) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.Header__headerBg,
.Header__bgColor,
.Header__titleSearchWrapper {
  background: none !important;
}

.Header__titleSearchWrapper {
  position: relative !important;
  min-height: 400px !important;
}

.Header__titleSearchBox {
  position: relative !important;
  z-index: 1 !important;
  padding: 60px 20px !important;
}

/* =================================
   ENHANCED HEADER STYLING
   ================================= */

.Header__welcomeTitle {
  color: #ffffff !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6) !important;
  margin-bottom: 20px !important;
  animation: fadeInUp 1s ease-out !important;
}

.Header__welcomeDescription {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6) !important;
  opacity: 0.95 !important;
  animation: fadeInUp 1s ease-out 0.3s both !important;
}

@media (max-width: 768px) {
  .Header__titleSearchWrapper { min-height: 260px !important; }
}

/* =================================
   NAVIGATION STYLING
   ================================= */

.Header__link {
    color: #ffffff !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.Header__link:hover {
    color: #54b477 !important;
}

.Header__link.Header__navactive {
    color: #54b477 !important;
}

.Header__link::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #54b477 !important;
    transition: width 0.3s ease !important;
}

.Header__link:hover::after,
.Header__link.Header__navactive::after {
    width: 100% !important;
}

/* =================================
   SEARCH BOX STYLING
   ================================= */

.Header__searchalt {
    animation: fadeInUp 1s ease-out 0.6s both !important;
}

.SearchBox__searchTextbox input {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
}

.SearchBox__searchTextbox input:focus {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #54b477 !important;
    box-shadow: 0 4px 20px rgba(84, 180, 119, 0.3) !important;
    outline: none !important;
}

/* =================================
   SIMPLE BUTTON STYLING (NO ICONS)
   ================================= */

.Header__containerLi,
.Header__containerLi:hover,
.Header__containerLi:focus-within {
  background: transparent !important;
  box-shadow: none !important;
}

.Header__containerLi::before,
.Header__containerLi::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.Header__containerLi a,
.Header__containerLi button {
  background-color: #54b477; /* primary green */
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  padding: 0.6rem 1.2rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  min-height: 40px !important;
  font-size: 1rem !important;
  text-align: center !important;
  text-decoration: none !important;
}

.Header__containerLi a:hover,
.Header__containerLi button:hover,
.Header__containerLi a:focus-visible,
.Header__containerLi button:focus-visible {
  background-color: #7bdb9e !important; /* lighter green hover */
  color: #fff !important;
  outline: none !important;
}

/* =================================
   ANIMATIONS
   ================================= */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================
   RESPONSIVE ADJUSTMENTS
   ================================= */

@media (max-width: 768px) {
    .Header__welcomeTitle {
        font-size: 2rem !important;
    }
    
    .Header__welcomeDescription {
        font-size: 1rem !important;
    }
    
    .Header__titleSearchBox {
        padding: 40px 20px !important;
    }
}