/* =====================================================================
   PressONE — Zoho Desk Help Center theme  (Elegant theme, tuned)
   Paste into / Import at:
     Setup → Channels → Help Center → Help Center Customization
       → Customize (published theme) → CSS → Preview → Publish.

   Selectors below are matched to your live Elegant theme's real class
   names (Header__*, KbCategory__*, ArticleDetail_description, etc.).
   Article styling is scoped to .ArticleDetail_description so it only
   affects the body you write — not the title, sidebar, or TOC.

   You keep writing articles normally in Zoho's editor; formatting is
   applied automatically.
   ===================================================================== */

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

:root{
  --p1-purple-900:#2A0E45;
  --p1-purple-800:#45166A;
  --p1-purple-600:#8154A4;
  --p1-purple-100:#EFE6F6;
  --p1-purple-50:#F8F4FB;
  --p1-orange-700:#E06A00;
  --p1-orange-600:#FF8200;
  --p1-orange-50:#FFF4E6;
  --p1-ink:#363636;
  --p1-hairline:#ECECEC;
  --p1-border:#D9D9D9;
  --p1-warn-bg:#FDECEC; --p1-warn-bar:#D64545; --p1-warn-ink:#B42318;
}

/* ---------------------------------------------------------------
   1. Global typography
   --------------------------------------------------------------- */
body, .zohodesk, .zohodesk input, .zohodesk button,
.zohodesk textarea, .zohodesk select{
  font-family:"Encode Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  color:var(--p1-ink);
}

/* Brand link colour utility used across the portal */
.commonStyle__zt3Link, .zohodesk a{ color:var(--p1-purple-600) !important; transition:color .12s ease; }
.commonStyle__zt3Link:hover, .zohodesk a:hover{ color:var(--p1-orange-600) !important; }

/* Brand-accent background utility (search icon, back-to-top) → orange */
.commonStyle__zt3BrandBg{ background-color:var(--p1-orange-600) !important; }

/* ---------------------------------------------------------------
   2. Header  (Elegant: .Header__header)
   --------------------------------------------------------------- */
.Header__header{
  background-color:var(--p1-purple-900) !important;
  background-image:none !important;
  border-bottom:4px solid var(--p1-orange-600) !important;
}
.Header__header a,
.Header__name,
.Header__description,
.Header__searchTitle,
.Header__tabs__link,
.Header__tabsTab,
.AppContainer__welcomeHeading{ color:#fff !important; }

/* Active nav tab — orange underline */
.Header__tabsTab.Header__active{ border-bottom:3px solid var(--p1-orange-600) !important; }

/* Search box — rounded pill, branded focus */
.Input__headerSearch,
.SearchContainer__searchBox input,
.Header__globalSearch input{
  border-radius:999px !important;
  border:1px solid var(--p1-border) !important;
  background:#fff !important;
}
.Input__headerSearch:focus,
.SearchContainer__searchBox input:focus{
  outline:none !important;
  box-shadow:0 0 0 3px var(--p1-orange-50) !important;
}

/* ---------------------------------------------------------------
   3. KB landing — category cards (Elegant: .KbCategory__box)
   --------------------------------------------------------------- */
.KbCategory__box{
  border:1px solid var(--p1-hairline) !important;
  border-radius:16px !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.KbCategory__box:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(69,22,106,.14) !important;
}
.KbCategory__count{ color:var(--p1-orange-600) !important; font-weight:700; }

/* Article links inside category / list panels */
.ContentList__listLink{ font-weight:500; }

/* Primary buttons (submit ticket, etc.) */
.zohodesk button[type="submit"],
.zohodesk button[class*="primary"]{
  background-color:var(--p1-orange-600) !important;
  border-color:var(--p1-orange-600) !important;
  border-radius:999px !important;
}
.zohodesk button[type="submit"]:hover,
.zohodesk button[class*="primary"]:hover{ background-color:var(--p1-orange-700) !important; }

/* ===============================================================
   4. ARTICLE READING — scoped to the article body only.
   =============================================================== */

/* Article title (above the body) */
.KbDetailLtContainer__articleTitle{
  font-family:"Encode Sans", sans-serif !important;
  color:var(--p1-purple-800) !important;
  font-weight:800 !important; letter-spacing:-.01em;
}

/* Headings inside the article (Zoho wraps text in a <span> — colour both) */
.ArticleDetail_description h1,
.ArticleDetail_description h2,
.ArticleDetail_description h3,
.ArticleDetail_description h4,
.ArticleDetail_description h1 span,
.ArticleDetail_description h2 span,
.ArticleDetail_description h3 span,
.ArticleDetail_description h4 span{
  font-family:"Encode Sans", sans-serif !important;
  color:var(--p1-purple-800) !important;
  line-height:1.25 !important;
}
.ArticleDetail_description h2{
  font-size:22px !important; font-weight:700 !important;
  margin-top:32px !important; padding-bottom:8px !important;
  border-bottom:2px solid var(--p1-purple-100) !important;
}
.ArticleDetail_description h3,
.ArticleDetail_description h3 span{
  font-size:18px !important; font-weight:700 !important;
  color:var(--p1-purple-600) !important; margin-top:22px !important;
}

/* Body text */
.ArticleDetail_description,
.ArticleDetail_description li,
.ArticleDetail_description div[role="paragraph"]{
  font-size:16px; line-height:1.65; color:var(--p1-ink);
}

/* Ordered lists → branded numbered "step" badges */
.ArticleDetail_description ol{
  counter-reset:p1step; list-style:none !important;
  padding-left:0 !important; margin:16px 0 !important;
}
.ArticleDetail_description ol > li{
  counter-increment:p1step; position:relative;
  padding-left:44px !important; margin-bottom:12px !important;
}
.ArticleDetail_description ol > li::before{
  content:counter(p1step);
  position:absolute; left:0; top:0;
  width:28px; height:28px;
  background:var(--p1-purple-800); color:#fff;
  border-radius:999px; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}

/* Unordered lists */
.ArticleDetail_description ul{ padding-left:22px; margin:14px 0; }
.ArticleDetail_description ul li{ margin-bottom:6px; }

/* Tables — purple header row, zebra body */
.ArticleDetail_description table{
  width:100%; border-collapse:collapse; margin:18px 0; font-size:15px;
  border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(69,22,106,.08);
}
.ArticleDetail_description th,
.ArticleDetail_description td{
  text-align:left; padding:11px 14px;
  border-bottom:1px solid var(--p1-hairline); vertical-align:top;
}
.ArticleDetail_description tr:first-child th,
.ArticleDetail_description thead th{
  background:var(--p1-purple-800) !important; color:#fff !important;
  font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em;
}
.ArticleDetail_description tbody tr:nth-child(even) td,
.ArticleDetail_description tr:nth-child(even) td{ background:var(--p1-purple-50); }

/* Blockquote → purple "Note" box (works with the editor's Quote button) */
.ArticleDetail_description blockquote{
  margin:18px 0; padding:14px 18px;
  background:var(--p1-purple-50);
  border-left:3px solid var(--p1-purple-600);
  border-radius:6px; color:var(--p1-ink);
}
.ArticleDetail_description blockquote b,
.ArticleDetail_description blockquote strong{ color:var(--p1-purple-800); }

/* Inline code / keys (your articles use <code> for keys & paths) */
.ArticleDetail_description code,
.ArticleDetail_description kbd{
  font-family:"Encode Sans", monospace;
  background:var(--p1-purple-100) !important; color:var(--p1-purple-800) !important;
  border:1px solid var(--p1-border); border-radius:4px;
  padding:1px 7px; font-size:13.5px; font-weight:600;
}

/* Images / screenshots — framed, never overflow */
.ArticleDetail_description img{
  max-width:100%; height:auto;
  border:1px solid var(--p1-hairline); border-radius:10px;
  box-shadow:0 1px 3px rgba(69,22,106,.08);
}

/* Horizontal rule */
.ArticleDetail_description hr{ border:none; border-top:1px solid var(--p1-hairline); margin:26px 0; }

/* ---------------------------------------------------------------
   5. OPTIONAL callout classes for the article HTML/source view.
   In the editor, switch to source view and wrap text like:
     <div class="p1-callout"><b>Do this first:</b> …</div>
   Classes: p1-callout (orange) · p1-note (purple) · p1-warn (red)
   --------------------------------------------------------------- */
.ArticleDetail_description .p1-callout,
.ArticleDetail_description .p1-note,
.ArticleDetail_description .p1-warn{
  padding:14px 18px; border-radius:8px; margin:18px 0; border-left:3px solid;
}
.ArticleDetail_description .p1-callout{ background:var(--p1-orange-50); border-left-color:var(--p1-orange-600); }
.ArticleDetail_description .p1-callout b, .ArticleDetail_description .p1-callout strong{ color:var(--p1-orange-700); }
.ArticleDetail_description .p1-note{ background:var(--p1-purple-50); border-left-color:var(--p1-purple-600); }
.ArticleDetail_description .p1-note b, .ArticleDetail_description .p1-note strong{ color:var(--p1-purple-800); }
.ArticleDetail_description .p1-warn{ background:var(--p1-warn-bg); border-left-color:var(--p1-warn-bar); }
.ArticleDetail_description .p1-warn b, .ArticleDetail_description .p1-warn strong{ color:var(--p1-warn-ink); }