/* =====================================================================
   Trancite Support Center — Brand Theme
   Matches the look & feel of https://www.trancite.com
   ---------------------------------------------------------------------
   Design tokens were read directly from the live trancite.com theme:
     brand blue   #0088CB   (primary)
     brand red    #ED1C24   (accent / link hover / active nav)
     brand yellow #FFCB05   (highlight)
     steel navy   #37627D   (deep band — footer / hero option)
     charcoal     #1C1C1E   (headings & body text)
     gray         #727272   (muted text)
   Typography: Poppins (display/headings) + Open Sans (body),
   matching the marketing site exactly.

   This file only restyles color, type, links, buttons, the header bar,
   the search/hero band, and the footer. It deliberately avoids changing
   Zoho's structural layout so the portal stays responsive and intact.
   Every value is driven by the variables below — tweak there to retune.
   ===================================================================== */

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

:root {
  /* ---- Brand palette (from trancite.com) ---- */
  --t-blue:        #0088CB;
  --t-blue-dark:   #006fa6;
  --t-red:         #ED1C24;
  --t-red-dark:    #c8141b;
  --t-yellow:      #FFCB05;
  --t-navy:        #37627D;
  --t-charcoal:    #1C1C1E;
  --t-gray:        #727272;
  --t-gray-light:  #b0b0b0;

  /* ---- Surfaces & lines ---- */
  --t-bg:          #ffffff;
  --t-bg-soft:     #f5f7f9;
  --t-line:        #e4e7ec;

  /* ---- Typography ---- */
  --t-font-display: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --t-font-body:    'Open Sans', Arial, Helvetica, sans-serif;

  /* ---- Shape ---- */
  --t-radius:      5px;   /* matches the marketing site's CTA buttons */
  --t-radius-lg:   8px;
  --t-shadow:      0 1px 3px rgba(28, 28, 30, 0.08), 0 1px 2px rgba(28, 28, 30, 0.06);
  --t-shadow-md:   0 6px 20px rgba(28, 28, 30, 0.10);
}

/* =====================================================================
   1. Base typography
   ===================================================================== */
body,
.body {
  font-family: var(--t-font-body);
  color: var(--t-charcoal);
  background: var(--t-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.Header__searchTitle,
.Header__name {
  font-family: var(--t-font-display);
  color: var(--t-charcoal);
  letter-spacing: -0.01em;
}

h1 { font-weight: 700; }
h2 { font-weight: 600; padding-top: 70px; }
h3, h4 { font-weight: 600; }

/* =====================================================================
   2. Links — match the marketing site (blue, red on hover)
   The header tabs, logo, and buttons are anchors too, so they are
   explicitly opted out further below.
   ===================================================================== */
a {
  color: var(--t-blue);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
a:hover,
a:focus {
  color: var(--t-red);
  text-decoration: underline;
}

/* Anchors that are NOT body links shouldn't inherit the blue link color */
.Header__navbar a,
.Header__logo a,
.Footer__footerCopyrigt a {
  text-decoration: none;
}

/* =====================================================================
   3. Header / navbar  —  black bar  ->  clean white bar (trancite.com)
   ===================================================================== */
.Header__navbar {
  background: var(--t-bg) !important;
  border-bottom: 1px solid var(--t-line);
  box-shadow: var(--t-shadow);
}

/* Company name: was white-on-black, now charcoal Poppins on white */
.Header__name {
  color: var(--t-charcoal) !important;
  font-family: var(--t-font-display);
  font-weight: 600;
}

/* Menu tabs: charcoal by default, brand red on hover/active (mirrors
   the red "Home" active state on trancite.com) */
.Header__tabsTab {
  color: var(--t-charcoal) !important;
  font-family: var(--t-font-display);
  font-weight: 500;
  position: relative;
  transition: color 0.15s ease;
}
.Header__tabsTab:hover,
.Header__tabsTab.active,
.Header__tabsTab.selected,
.Header__tabsTab[aria-selected="true"],
.Header__tabsTab.Header__activeTab {
  color: var(--t-red) !important;
}
/* Thin red underline accent on the active/hovered tab */
.Header__tabsTab:hover::after,
.Header__tabsTab.active::after,
.Header__tabsTab.selected::after,
.Header__tabsTab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--t-red);
  border-radius: 2px;
}

/* Hamburger + accessibility icons: light -> charcoal so they read on white */
.Header__menu,
.Header__menu::before,
.Header__menu::after {
  background-color: var(--t-charcoal) !important;
}
.Header__menuBoxMain svg,
.Header__navbar svg {
  fill: var(--t-charcoal);
  color: var(--t-charcoal);
}

/* =====================================================================
   4. Search / hero band  —  matches the site's clean, light hero
   ===================================================================== */
.Header__searchSection,
#headerContent {
  background: var(--t-bg-soft);
  border-bottom: 1px solid var(--t-line);
  /* subtle brand keyline echoing the blue→red accent */
  border-top: 3px solid transparent;
}

.Header__searchTitle {
  color: var(--t-charcoal) !important;
  font-family: var(--t-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.Header__description {
  color: var(--t-gray) !important;
  font-family: var(--t-font-body);
}

/* Search field. The input itself carries no border — Zoho puts the
   visible box on the wrapper (.SearchContainer__globalSearch / __formGroup)
   so we style the wrapper and add the brand-blue ring on :focus-within. */
/* The whole search row is ONE bordered, rounded container. The inner input
   group must stay borderless and transparent — otherwise it renders as a
   misaligned box-within-a-box (the input's own border nested inside the
   row's border, which is what looked off). */
.SearchContainer__globalSearch {
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-radius);
  background: #fff;
  box-shadow: var(--t-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.SearchContainer__globalSearch:focus-within {
  border-color: var(--t-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 136, 203, 0.18);
}
.SearchContainer__formGroup {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.Input__inputCommon,
.Input__searchBox,
.Input__headerSearch {
  font-family: var(--t-font-body);
  color: var(--t-charcoal);
}
.Input__inputCommon::placeholder { color: var(--t-gray-light); }

/* ---- Remap Zoho's theme accent (default orange #E46317) to brand blue ----
   Zoho applies its accent through two global hooks:
     .commonStyle__zt3Brand    -> accent text / SVG fill (search icon, links)
     .commonStyle__zt3BrandBg  -> accent backgrounds (scroll-to-top, etc.)
   Remapping both keeps every accent on-brand in one place. */
.commonStyle__zt3Brand,
.commonStyle__zt3Brand svg,
.commonStyle__zt3Brand path,
.Icon__brand,
.Icon__brand path,
.Icon__brand use,
span[class*="searchBoxIcon" i] svg,
span[class*="searchBoxIcon" i] path,
[fill="#e46317"],
[fill="#E46317"] {
  color: var(--t-blue) !important;
  fill: var(--t-blue) !important;
}
.commonStyle__zt3BrandBg {
  background-color: var(--t-blue) !important;
}

/* ...but an icon sitting ON a brand-colored background (the magnifier inside
   the blue home search button) must stay WHITE — otherwise the accent remap
   above paints it blue-on-blue and it disappears. Zoho marks these icons with
   .Icon__white; we also cover anything nested in a .zt3BrandBg surface. */
.Icon__white,
.Icon__white path,
.Icon__white use,
.commonStyle__zt3BrandBg svg,
.commonStyle__zt3BrandBg path,
.commonStyle__zt3BrandBg use,
.SearchContainer__searchIcon svg,
.SearchContainer__searchIcon path,
.SearchContainer__searchIcon use {
  fill: #fff !important;
  color: #fff !important;
}

/* Search-scope dropdown beside the search button: the caret is a CSS
   border-triangle and the selected filter item both default to Zoho's
   orange. Mute the caret to gray and brand the active selection blue. */
.SearchContainer__downArrow {
  border-top-color: var(--t-gray) !important;
}
.SearchContainer__selected,
li.SearchContainer__selected {
  color: var(--t-blue) !important;
}

/* =====================================================================
   5. Buttons — brand blue, lightly rounded (trancite.com CTA shape)
   Covers Zoho's default button classes + generic submit buttons.
   ===================================================================== */
/* Zoho Help Center buttons all share .Button__btnFont (gray 32px pills by
   default). Turn them into brand-blue, lightly-rounded CTAs that match the
   marketing site. Generic submit/button selectors are kept as a safety net. */
.Button__btnFont,
button[type="submit"],
input[type="submit"],
input[type="button"],
a.button,
.btn {
  font-family: var(--t-font-display) !important;
  font-weight: 500;
  border-radius: var(--t-radius) !important;
  background-color: var(--t-blue) !important;
  border: 1px solid var(--t-blue) !important;
  color: #fff !important;
  box-shadow: var(--t-shadow);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.Button__btnFont:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn:hover,
a.button:hover {
  background-color: var(--t-blue-dark) !important;
  border-color: var(--t-blue-dark) !important;
  color: #fff !important;
  text-decoration: none;
}

/* If Zoho exposes an explicit secondary/ghost variant, keep it outlined */
.Button__secondaryBtn,
.btn-secondary {
  background-color: #fff !important;
  border: 1px solid var(--t-blue) !important;
  color: var(--t-blue) !important;
}
.Button__secondaryBtn:hover,
.btn-secondary:hover {
  background-color: var(--t-blue) !important;
  color: #fff !important;
}

/* =====================================================================
   6. Content surfaces — cards / tiles / KB sections
   Soft borders, brand-blue accents on hover. Kept light to match the
   marketing site's white, airy feel.
   ===================================================================== */
.card,
.tile,
.kb-section,
[class*="card" i],
[class*="tile" i],
[class*="categoryBox" i],
[class*="widget" i] {
  border-radius: var(--t-radius-lg);
  border-color: var(--t-line);
}
.card:hover,
.tile:hover,
[class*="card" i]:hover,
[class*="tile" i]:hover {
  box-shadow: var(--t-shadow-md);
  border-color: var(--t-blue);
}

/* Section headings inside content */
[class*="sectionTitle" i],
[class*="widgetTitle" i],
[class*="heading" i] {
  font-family: var(--t-font-display);
  color: var(--t-charcoal);
}

/* Breadcrumbs */
[class*="breadcrumb" i] a { color: var(--t-gray); }
[class*="breadcrumb" i] a:hover { color: var(--t-red); }

/* Selection + focus accents */
::selection { background: rgba(0, 136, 203, 0.18); }
:focus-visible { outline: 2px solid var(--t-blue); outline-offset: 2px; }

/* =====================================================================
   7. Footer — dark brand band, matching trancite.com's footer
   ===================================================================== */
.Footer__footerCopyrigt {
  background: var(--t-charcoal);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--t-font-body);
}
.Footer__container2 span {
  color: rgba(255, 255, 255, 0.78);
}
.Footer__footerLink {
  color: #fff !important;
  font-weight: 500;
  text-decoration: none;
}
.Footer__footerLink:hover {
  color: var(--t-yellow) !important;   /* warm brand highlight on dark */
  text-decoration: underline;
}

/* =====================================================================
   8. Home page density — tighten vertical whitespace so the
   "Submit a ticket" CTA isn't buried under large empty gaps.
   ===================================================================== */
/* Smaller, even gaps between home widgets (Zoho defaults to ~56px) */
.WidgetContainer__contentList { margin-top: 18px !important; }
.WidgetContainer__list > .WidgetContainer__contentList:first-child { margin-top: 0 !important; }
/* Drop empty spacer widgets that only contribute a gap */
.WidgetContainer__contentList:empty { display: none !important; margin: 0 !important; }
/* Let the module cards size to their content instead of a tall fixed box */
.ModuleCont__moduleCont,
.ContentBox__boxThree,
.ContentBox__boxInnerHome { height: auto !important; min-height: 0 !important; }
.ContentBox__boxThree { padding-bottom: 14px !important; }
/* Trim the hero/search band and the footer CTA band */
.Header__searchSection,
#headerContent { padding-top: 26px !important; padding-bottom: 26px !important; }
.Footer__footerBg { padding-top: 22px !important; padding-bottom: 22px !important; }

/* =====================================================================
   9. Quality floor: reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}