/* ═══════════════════════════════════════════════════════
   Grevon Help Centre — Zoho Desk Custom CSS
   ═══════════════════════════════════════════════════════ */


/* ── FONT ────────────────────────────────────────────── */
* {
  font-family: 'Satoshi', sans-serif !important;
}


/* ── BRAND COLOUR OVERRIDE (teal) ────────────────────── */
.commonStyle__zt3Brand {
  color: #29BCAF !important;
}
.commonStyle__zt3Brand:hover {
  color: #1f9a8f !important;
}

/* ── ACTIVE / HOVER NAV TAB ──────────────────────────── */
a.Header__tabs__link[aria-selected="true"],
a.Header__tabs__link.Header__tabsActive,
a.Header__tabs__link:hover,
a.Header__tabs__link:focus {
  color: #29BCAF !important;
  border-bottom-color: #29BCAF !important;
}


/* ── BRAND ICONS ─────────────────────────────────────── */
svg.Icon__icon.Icon__small.Icon__brand {
  color: #29BCAF !important;
  fill: #29BCAF !important;
}
svg.Icon__icon.Icon__small.Icon__brand path,
svg.Icon__icon.Icon__small.Icon__brand polygon {
  fill: #29BCAF !important;
  stroke: #29BCAF !important;
}

/* ── HOVER ICONS ─────────────────────────────────────── */
svg.Icon__icon.Icon__small.Icon__greyShade70.Icon__hoverbrand:hover,
svg.Icon__icon.Icon__small.Icon__greyShade70.Icon__hoverbrand:hover path {
  fill: #29BCAF !important;
  color: #29BCAF !important;
}


/* ── BUTTONS ─────────────────────────────────────────── */

/* Primary — teal fill */
span.Button__tagPrimary.Button__basic.commonStyle__inlineBlock {
  background-color: #29BCAF !important;
  border-color: #29BCAF !important;
  color: #ffffff !important;
}
span.Button__tagPrimary.Button__basic.commonStyle__inlineBlock:hover {
  background-color: #1f9a8f !important;
  border-color: #1f9a8f !important;
}

/* Neutral — teal outline */
span.Button__neutral.Button__basic.commonStyle__inlineBlock {
  background-color: transparent !important;
  border: 1.5px solid #29BCAF !important;
  color: #29BCAF !important;
}
span.Button__neutral.Button__basic.commonStyle__inlineBlock:hover {
  background-color: rgba(41,188,175,0.1) !important;
  border-color: #1f9a8f !important;
  color: #1f9a8f !important;
}

/* Follow button — teal outline */
button.Button__btnFont.Button__primaryBorder.commonStyle__txtCapitalize {
  color: #29BCAF !important;
  border-color: #29BCAF !important;
}
button.Button__btnFont.Button__primaryBorder.commonStyle__txtCapitalize:hover {
  background-color: rgba(41,188,175,0.1) !important;
  border-color: #1f9a8f !important;
  color: #1f9a8f !important;
}


/* ── BACK TO TOP BUTTON ──────────────────────────────── */
span.AppContainer__backToTop.commonStyle__zt3BrandBg {
  background-color: #29BCAF !important;
}


/* ── FILE UPLOAD ─────────────────────────────────────── */
span.FileUpload__userLink.commonStyle__zt3Brand {
  color: #29BCAF !important;
}
span.FileUpload__attachPin.commonStyle__zt3BrandBorder {
  border-color: #29BCAF !important;
  color: #29BCAF !important;
}


/* ── SEARCH ──────────────────────────────────────────── */
span.SearchContainer__searchBoxIcon.commonStyle__cursor.commonStyle__positionAbs {
  color: #29BCAF !important;
  fill: #29BCAF !important;
}
span.SearchContainer__searchIcon.commonStyle__positionRel.commonStyle__cursor {
  background-color: #29BCAF !important;
}


/* ── SUBMIT TICKET BUTTON (header template) ──────────── */
li.Header__tabsTab:has(> a.hc-ticket-btn) {
  padding: 0 !important;
}
a.hc-ticket-btn {
  display: flex !important;
  align-items: center !important;
  background-color: #29BCAF !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 5px 16px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s !important;
}
a.hc-ticket-btn:hover {
  background-color: #1f9a8f !important;
  color: #ffffff !important;
}


/* ── NAVIGATION ──────────────────────────────────────── */

/* Hide Sign In tab — uncomment to enable */
/*
li#logoutDetails,
a.LoginDetail__tabLink.signinLink {
  display: none !important;
}
*/

/* Sign In button — white outline */
li#portal_tabsignin.LoginDetail__signin {
  border: 1.5px solid #ffffff !important;
  border-radius: 4px !important;
  background-color: transparent !important;
  padding: 0 !important;
  height: 36px !important;
  align-self: center !important;
  transition: background 0.15s !important;
}
li#portal_tabsignin.LoginDetail__signin:hover {
  background-color: rgba(255,255,255,0.1) !important;
}
li#portal_tabsignin.LoginDetail__signin *,
li#portal_tabsignin.LoginDetail__signin a.LoginDetail__tabLink,
li#portal_tabsignin.LoginDetail__signin a.signinLink {
  color: #ffffff !important;
  padding: 6px 14px 0 !important;
  display: inline-block !important;
}

/* Sign in page links */
a.Signin__userLink.commonStyle__zt3Brand {
  color: #29BCAF !important;
}
a.Signin__userLink.commonStyle__zt3Brand:hover {
  color: #1f9a8f !important;
}


/* ── USER AVATAR ─────────────────────────────────────── */
div[data-id="userInitial"].AvatarText__avatarText {
  background-color: #29BCAF !important;
  border-top-color: #29BCAF !important;
  border-right-color: #29BCAF !important;
  border-bottom-color: #29BCAF !important;
  border-left-color: #29BCAF !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

div[class*="AvatarText__avatarText"] {
  color: #29BCAF !important;
}

/* ── PROFILE ICON ────────────────────────────────────── */
svg.Icon__icon.commonStyle__positionRel.commonStyle__verticalMiddle.Icon__xxMedium {
  color: #666B72 !important;
  fill: #666B72 !important;
}
svg.Icon__icon.commonStyle__positionRel.commonStyle__verticalMiddle.Icon__xxMedium path {
  fill: #666B72 !important;
  stroke: #666B72 !important;
}


/* ── PROFILE DROPDOWN ────────────────────────────────── */
div.LoginDetail__profileBtn.commonStyle__alignCenter.commonStyle__flex {
  background-color: #29BCAF !important;
}
a.LoginDetail__userLink.commonStyle__zt3Brand {
  color: #29BCAF !important;
}
a.LoginDetail__userLink.commonStyle__zt3Brand:hover {
  color: #1f9a8f !important;
}


/* ── PROFILE TABS ────────────────────────────────────── */
span.ProfileTabs__tabName {
  color: #29BCAF !important;
}

div.ProfileTabs__tabList.ProfileTabs__activeTab,
div.ProfileTabs__tabList.ProfileTabs__subTabActive {
  border-bottom-color: #29BCAF !important;
  color: #29BCAF !important;
}

/* ── FILTER TABS ─────────────────────────────────────── */
li.FilterTabs__filterList.FilterTabs__activeFilter {
  color: #29BCAF !important;
  border-bottom-color: #29BCAF !important;
}


/* ── EMPTY STATE ─────────────────────────────────────── */
h3.NoContent__title {
  color: #29BCAF !important;
}


/* ── ARTICLE LINKS (sidebar widget) ─────────────────── */
a.CustomWidgets__widgetContents.commonStyle__link.commonStyle__cursor {
  color: #29BCAF !important;
  text-decoration: none !important;
}
a.CustomWidgets__widgetContents.commonStyle__link.commonStyle__cursor:hover {
  color: #666B72 !important;
  text-decoration: none !important;
}


/* ── FOLLOW / SUBSCRIBE BLOCKS ───────────────────────── */
/*
div.ArticleDetailRightContainer__followContentLow { display: none !important; }
div.SubscribeDepart__followContent { display: none !important; }
*/


/* ── ERROR PAGE ──────────────────────────────────────── */
h3.ErrorPage__errorTitle {
  color: #29BCAF !important;
}


/* ── TICKET FORM RIGHT PANEL ─────────────────────────── */
@media (min-width: 1024px) {
  div.TicketFormRightContainer__rightPanelDetail.commonStyle__rightPanelDetail {
    margin-top: 24px !important;
  }
}


/* ── LAYOUT ──────────────────────────────────────────── */
div.Layout__layout1 {
  padding: 24px 3% !important;
}

@media (min-width: 768px) {
  div#layoutContainer {
    padding-top: 0 !important;
  }
  div.Layout__layout1 {
    padding: 24px 3% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  div.Layout__layout1 {
    padding: 20px 4% !important;
  }
}

@media (max-width: 767px) {
  div.Layout__layout1 {
    padding: 0 6% 16px !important;
  }
  div#layoutContainer.Layout__oneColumn.commonStyle__marginAuto {
    padding-top: 0 !important;
  }
  div.Header__name {
    padding: 0 !important;
  }
  div.Header__menuicon {
    padding-bottom: 0 !important;
  }
  header#headerContainer img {
    width: 32px !important;
    height: 32px !important;
  }
}


/* ── CATEGORY TILE GRID ──────────────────────────────── */
.ModuleCategoryContainer__gridview {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  .ModuleCategoryContainer__gridview {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* ── CATEGORY TILE ───────────────────────────────────── */
div.KbSubCategoryContainer__contentList {
  border: 1px solid #e2e4e6 !important;
  border-top: 3px solid #29BCAF !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  padding-top: 16px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

div.TitleContainer__container {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 16px 20px !important;
}

div.TitleContainer__container .TitleContainer__header,
div.TitleContainer__container .TitleContainer__body,
div.TitleContainer__container .TitleContainer__content,
div.TitleContainer__container .link__link {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}

div.TitleContainer__container .TitleContainer__header {
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
}

div.TitleContainer__container .TitleContainer__body {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

div.TitleContainer__container .TitleContainer__content,
div.TitleContainer__container .commonStyle__padding {
  margin: 0 !important;
  padding: 0 !important;
}

div.TitleContainer__container .WidgetsContainer__1ftwd {
  margin: 0 !important;
  padding: 0 !important;
}

/* Category title */
a.ListHeader__linkText.commonStyle__zt3Link {
  font-size: 15px !important;
}

/* Remove grey dotted line under title */
h5.ListHeader__header2.commonStyle__overflowDotted {
  border-bottom: none !important;
  text-decoration: none !important;
}


/* ── ARTICLE LINK CAPSULES ───────────────────────────── */
div.ContentList__topicList.commonStyle__wordWrapWord,
div.ContentList__topicList.commonStyle__wordWrapWord a {
  font-size: 13px !important;
}

div.ContentList__topicList.commonStyle__wordWrapWord {
  background: #ffffff !important;
  border: 1px solid #666B72 !important;
  border-radius: 100px !important;
  padding: 5px 14px !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  transition: background 0.15s, border-color 0.15s !important;
}

div.ContentList__topicList.commonStyle__wordWrapWord:hover {
  background: rgba(41,188,175,0.2) !important;
  border-color: #29BCAF !important;
}


/* ── MOBILE NAV MENU ─────────────────────────────────── */
@media (max-width: 767px) {
  li.Header__tabsTab:has(> a.hc-ticket-btn) {
    padding: 0 !important;
    width: 100% !important;
  }
  a.hc-ticket-btn {
    width: 100% !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
  }
  li#portal_tabsignin.LoginDetail__signin {
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
  }
  li#portal_tabsignin.LoginDetail__signin * {
    width: 100% !important;
    padding: 10px 16px !important;
    display: block !important;
  }
}


/* ── MOBILE OVERRIDES ────────────────────────────────── */
@media (max-width: 767px) {

  /* Category tile */
  div.KbSubCategoryContainer__contentList {
    padding-top: 12px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  div.TitleContainer__container {
    padding: 12px 14px !important;
  }

  /* Category title & description */
  h5.ListHeader__header2,
  a.ListHeader__linkText {
    font-size: 15px !important;
  }
  div.ListHeader__description {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Article link capsules */
  div.ContentList__topicList.commonStyle__wordWrapWord,
  div.ContentList__topicList.commonStyle__wordWrapWord a {
    font-size: 12px !important;
  }
  div.ContentList__topicList.commonStyle__wordWrapWord {
    padding: 4px 12px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
}


/* ── REPLY BOX ───────────────────────────────────────── */

/* Hide quoted email history in the reply editor */
.zd-comment-editor-quote,
.zd_portal_comment_history_wrapper {
  display: none !important;
}

/* Editor background and border */
.zd-comment-textarea,
.cke_inner,
.cke_wysiwyg_frame,
.cke_wysiwyg_div {
  background-color: #ffffff !important;
  border-radius: 4px !important;
  border-style: solid !important;
  border-color: #e2e4e6 !important;
}

/* Focus state — teal highlight */
.cke_focus,
.zd-comment-textarea:focus {
  border-color: #29BCAF !important;
  box-shadow: 0 0 0 2px rgba(41, 188, 175, 0.15) !important;
}

/* ── HIDE HOME BREADCRUMB ON SIGN IN PAGE ─────────────── */
a[href*="/portal/en/home"] {
  display: none !important;
}