/* ============================================================
   Future Energy — Zoho Desk Help Center custom CSS (STARTER)
   For Professional / Enterprise editions (CSS tab or Import CSS).

   HOW TO USE
   1. Paste into Setup > Channels > Help Center > Help Center
      Customization > Customize > CSS tab  (or Import CSS).
   2. Many selectors below are best-guess based on Zoho's
      documented class patterns. Use your browser Inspector on the
      live Help Center to confirm/replace selectors that don't hit.
   3. Preview, then Publish.

   BRAND PALETTE
   Navy   #002240   | Teal  #00566e | Blue  #00a0d4
   Green  #70d44b   | Orange#ff4d00 | BG    #f6f7f8
   Border #c9d1d7   | Text  #28455e | Muted #5e7486
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Optional display font — host the file and update the URL.
@font-face {
  font-family: 'From the Stars';
  src: url('https://YOUR-HOST/from-the-stars-rg.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

body,
.zohodesk,
.home, .kbLanding, .articleList, .articleDetail,
.ticketList, .ticketDetail, .ticketForm,
.communityLanding, .communityList, .communityDetail,
.userProfile, .signin, .signup {
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  color: #28455e;
}

/* ---- Page background ---- */
body, .zohodesk {
  background-color: #f6f7f8 !important;
}

/* ---- Header / top bar ---- */
.Header__header,
header, .header {
  background-color: #002240 !important;
  background-image: none !important;
}

/* Header text + nav links */
.Header__header a,
header a {
  color: #ffffff !important;
}

/* ---- Hero / search banner ---- */
.bannerSearch, .searchBanner, .home .Header__header {
  background-color: #002240 !important;
}

/* Breadcrumb / page title on the navy band — all pages
   (kbLanding, signup, signin, ticketList, articleList, etc.) */
[data-id*="breadcrumb"] {
  color: #ffffff !important;  /* use #c9d1d7 for a softer tone */
}

/* ---- Primary buttons / calls to action ---- */
button, .button, .btn,
input[type="submit"], input[type="button"],
a.button, .primaryBtn, .submitBtn {
  background-color: #00566e !important;
  border-color: #00566e !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

button:hover, .button:hover, .btn:hover,
.primaryBtn:hover, .submitBtn:hover {
  background-color: #00445a !important;  /* darker teal */
  border-color: #00445a !important;
}

/* ---- Body links ---- */
a, a:link, a:visited {
  color: #00566e;
}
a:hover {
  color: #00a0d4;
}

/* ---- Headings ---- */
h1, h2, h3, h4 {
  color: #002240;
  /* If you self-host the display font, swap the family below:
     font-family: 'From the Stars', 'Roboto', sans-serif; */
}

/* ---- KB category / topic cards ---- */
.kbCategory, .category, .card, .tile, .panel {
  border: 1px solid #c9d1d7 !important;
  border-radius: 8px !important;
}
.kbCategory:hover, .category:hover, .card:hover, .tile:hover {
  border-color: #00a0d4 !important;
  box-shadow: 0 2px 10px rgba(0,34,64,0.08) !important;
}

/* Category icon / accent strips */
.kbCategory .icon, .category .icon {
  color: #00566e !important;
}

/* ---- Search box ---- */
input[type="search"], .searchInput, .searchBox input {
  border: 1px solid #c9d1d7 !important;
  border-radius: 6px !important;
}
input[type="search"]:focus, .searchInput:focus {
  border-color: #00a0d4 !important;
  outline: none !important;
}

/* ---- Footer ---- */
.Footer__footer, footer, .footer {
  background-color: #002240 !important;
  color: #93a2af !important;
}
.Footer__footer a, footer a, .footer a {
  color: #c9d1d7 !important;
}

/* ---- Tables / dividers ---- */
hr, .divider {
  border-color: #c9d1d7 !important;
}

/* ---- Badges / status pills (tickets) ---- */
.status, .badge, .tag {
  border-radius: 12px !important;
}