/* Ticket-IT Zoho Desk portal (Classic theme) - branding to match ticket-it.com
   Paste into: Setup > Channels > Help Center > Help Center Customization
   > Customize (Classic theme) > CSS tab
   Pair with ticket-it-portal-header.html and ticket-it-portal-footer.html */

/* Brand font, matches Poppins used across ticket-it.com */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ===== Header ===== */

/* Replace the stock Zoho photo background with the brand dark slate,
   same colour used across ticket-it.com's own header bar */
.Header__headerBg {
  background-image: none !important;
}
.Header__bgColor {
  background: #384F5A !important;
  opacity: 1 !important;
}

/* Brand font across the header */
.Header__logotxt,
.Header__link,
.Header__welcomeTitle,
.Header__welcomeDescription,
.signinLink,
.Header__tClr {
  font-family: 'Poppins', sans-serif !important;
}

.Header__logotxt {
  font-weight: 600 !important;
}

/* Hero heading: drop the "Welcome to" prefix, keep just the org name.
   ${WelcomeText} renders "Welcome to the Ticket-IT Support Centre" as one
   fixed string with no separate setting to edit just part of it, so this
   hides the original and swaps in the trimmed text. If the organisation
   name ever changes, this text will need updating manually - it's no
   longer reading the live variable. */
.Header__welcomeTitle {
  font-size: 0 !important;
}

.Header__welcomeTitle::before {
  content: "Ticket-IT Support Centre";
  font-size: 40px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}

/* "Log Ticket" button (the ${AddTicket} placeholder, moved into the main
   nav by the header HTML). Relabelled from "Add Ticket" via a pseudo-element
   since the placeholder's own text can't be edited directly - the original
   text is hidden (font-size: 0) and the new label is generated in its place. */
#new_ticket_btn .Header__containerLink {
  background-color: #EB2B7B !important;
  color: #ffffff !important;
  border-radius: 5px !important;
  padding: 10px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
}

#new_ticket_btn .Header__tClr {
  font-size: 0 !important;
}

#new_ticket_btn .Header__tClr::before {
  content: "Log Ticket";
  font-size: 16px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
}

/* Hide the small ticket icon so it reads as a clean text button, matching
   the style used elsewhere on the portal */
#new_ticket_btn .Header__dropicon {
  display: none !important;
}

#new_ticket_btn:hover .Header__containerLink {
  background-color: #c72268 !important;
}

/* Fix white corners showing behind the rounded pink button - the
   <li> wrapper Zoho renders around it still has its own white
   background and a slightly different border-radius than our button,
   which peeked through at the corners. Making it transparent removes it. */
#new_ticket_btn.Header__containerLi {
  background: transparent !important;
}

/* Hide My Area, Knowledge Base and Sign In - only Home and Log Ticket
   should show in the main nav */
#portal_tabCases,
#portal_tabSolutions,
#logoutDetails {
  display: none !important;
}

/* Hide the search bar on the home page */
#titleSearch .Header__searchSubCont {
  display: none !important;
}

/* Remove the empty gap between the hero and the footer. The theme
   reserves a fixed height for home page widgets (Popular Articles,
   Announcements etc.) - since none are added, that space just sits
   empty. This collapses it so the footer sits right under the hero. */
.Layout__oneColumn {
  min-height: 0 !important;
}

/* ===== Footer ===== */

.Footer__footerCopyrigt {
  background: #F3F3F3;
  padding: 40px 20px;
  text-align: center;
}

.ti-priority h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #384F5A;
  margin-bottom: 20px;
}

.ti-priority img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}