/* Aplikasi.us Help Center — custom CSS for Setup > Customize > CSS tab
   (append, do not replace).

   Brand tokens (from blog's real AutoCSS):
     --primary:     #c92127
     --primary-off: #ff914d
     --accent:      #f39c13
     --black:       #1b1b1b
     --bg-base:     #fff5ee
     --gradient-1:  linear-gradient(108deg, #ff3131 9.19%, #ff914d 70.73%, #ff914d 100%)

   Font: Montserrat (Google Fonts). Visby is the site's actual font but
   can't be used here - cross-origin CORS blocks linking it directly, and
   embedding it as base64 exceeds Zoho Desk's CSS box size limit.
   Montserrat is a clean, widely-used geometric sans that reads well at
   both heading and body sizes and needs no hosting workaround since
   Google Fonts already serves it with the right CORS headers. */

/* ===== brand-color rules ===== */
/* KB/Community/Tickets icon accent lines - needs !important, a more
   specific Zoho rule otherwise wins the cascade. */
.home .commonStyle__zt3BrandFill {
  fill: #ff3131 !important;
}
.commonStyle__zt3BrandFill {
  fill: #ff3131 !important;
}
.commonStyle__zt3BrandBg {
  background: linear-gradient(108deg, #ff3131 9.19%, #ff914d 70.73%, #ff914d 100%);
}
.commonStyle__zt3Brand {
  color: #ff3131 !important;
}
.Button__footerBtn {
  background: linear-gradient(89deg, #ff5757 9.19%, #8c52ff 72.57%, #8c52ff 92.85%) !important;
}
.Button__footerBtn:hover {
  background-color: #c92127;
}
.SearchContainer__downArrow {
  border-top-color: #c92127;
}
.Signin__userLink.commonStyle__zt3Brand {
  color: #c92127;
}
.Icon__brand {
  color: #c92127;
}
.commonStyle__zt3BrandBorder {
  color: #c92127;
  border-color: #c92127;
}

/* ===== Hero section (careers-hero recipe adapted to Help Center) ===== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

#navBar {
  background: #ffffff !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

#headerContent.Header__searchSection {
background: linear-gradient(100deg, #fff5ee 0%, #ffe0d1 45%, #ffbf9a 75%, #ffa876 100%) !important;
  text-align: center !important;
  padding: 80px 16px !important; /* matches .careers-hero padding */
  margin-top: 0px !important;
  clear: both !important; /* #navBar uses float:left; without this, hero
    renders starting at the same top as navBar instead of below it, so the
    navbar visually overlaps/covers the hero's top padding + part of the
    title text. */
  position: relative !important; /* anchors .HC__heroGhostImg (position:absolute) */
  overflow: hidden !important; /* clips the ghost image to the hero's own box */
}




/* Ghost background image - same recipe as .careers-hero-ghost-img:
   absolutely filled behind the text, faded via opacity + soft-light so
   it reads as texture, not a photo. */
.HC__heroGhostImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.7;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

/* Logo scaled up to match the taller #navBar padding. Higher specificity
   + max-height override in case Zoho's own image sizing rule wins otherwise. */
#navBar .Header__logo img,
.Header__logo a img {
  height: 60px !important;
  max-height: 60px !important;
  width: auto !important;
  max-width: none !important;
}

/* Matches .careers-hero-inner max-width - Zoho's default is wider.
   position:relative + z-index:1 keep the title/description above the
   ghost image (z-index:0) instead of the img painting over the text. */
#headerContent.Header__searchSection .Header__container {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

.Header__searchTitle {
  background: linear-gradient(90deg, #ff3131 0%, #ff914d 60%, #1b1b1b 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif !important;
  text-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  font-size: clamp(2.25rem, 2.0rem + 2.0vw, 3.5rem) !important;
  line-height: 1.1 !important;
letter-spacing : -0.02em !important ;
}

.HC__welcomeText {
  margin-right: 0.3em !important;
}

.Header__description {
  letter-spacing: 0.3px !important;
  color: #292c2e !important;
  font-family: 'Montserrat', sans-serif !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

/* Eyebrow - style ready, not used in HTML yet (no copy decided). */
.HC__eyebrow {
  letter-spacing: 0.3px !important;
  color: #c92127 !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 0.75em !important;
  font-size: 1rem !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ===== Nav ===== */

/* Alignment fix: #navBarContainer uses justify-content:space-between
   across its flex children (logo, name, menu, search, etc). Deleting the
   empty .Header__name div (no more "Support Centre" text) removed one of
   those children, so space-between redistributed the gaps oddly. Push
   the nav menu all the way to the right edge with margin-left:auto
   instead - logo stays left, menu pins right, robust regardless of how
   many other children exist. */
.Header__menuTab {
  margin-left: auto !important;
}

.Header__tabsTab,
.Header__tabsTab a,
.Header__tabsTab span,
.Header__name {
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #1b1b1b !important;
  text-shadow: none !important;
  font-family: 'Montserrat', sans-serif !important;
}
.Header__name {
  font-weight: 400 !important;
}
.Header__tabsTab,
.Header__tabsTab a,
.Header__tabsTab span {
  font-weight: 400 !important;
}

/* Hover/active color - needed its own rule since the black rule above
   has no :hover exception and was silencing it. */
.Header__tabsTab:hover,
.Header__tabsTab:hover a,
.Header__tabsTab.Header__active,
.Header__tabsTab.Header__active a {
  color: #ff914d !important;
  -webkit-text-fill-color: #ff914d !important;
}

/* Sign In / Sign Up - were invisible (white text, Zoho default, on our
   white navbar) until this rule. Font-size intentionally left unset so
   it matches the other nav tabs (Home/My Area/etc), which also have no
   explicit font-size - was 18px here only, which made it visibly bigger
   and out of sync with the rest of the nav. */
.LoginDetail__tabLink,
.signinLink,
.signupLink {
  color: #1b1b1b !important;
  -webkit-text-fill-color: #1b1b1b !important;
  font-weight: 400 !important;
  font-family: 'Montserrat', sans-serif !important;
}
.signinLink:hover,
.signupLink:hover {
  color: #c92127 !important;
  -webkit-text-fill-color: #c92127 !important;
}
/* Mobile dropdown menu (dark background) — Home/My Area/KB/Community
   already turn white here via the rule below, but Sign In/Sign Up use
   different classes (.signinLink/.signupLink, not .Header__tabsTab) so
   they were left out and stayed on the desktop black (#1b1b1b), making
   them unreadable against the dark panel. */
@media only screen and (max-width: 1024px) {
  .Header__menuTab {
    left: 0 !important;
    margin-left: 0 !important;
  }

  .Header__menuList .Header__tabsTab:not(.Header__active) .Header__tabs__link,
  .Header__menuList .LoginDetail__tabLink,
  .Header__menuList .signinLink,
  .Header__menuList .signupLink {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

@media only screen and (max-width: 1024px) {
  .Header__menuTab {
    left: 0 !important;
    margin-left: 0 !important;
  }

  .Header__menuList .Header__tabsTab:not(.Header__active) .Header__tabs__link,
  .Header__menuList .LoginDetail__tabLink {
    color: #ffffff !important;
  }
}