/* =============================================
   TWIKIT ACADEMY — Custom CSS for Scroll Sites
   Font: Jost | Primary: #ED4100 | Secondary: #0060A9
   Text: #212121 | Border radius: 10px
   Based on actual Scroll Sites HTML structure
   ============================================= */

/* --- IMPORT JOST FONT --- */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700&display=swap');

/* =============================================
   1. GLOBAL
   ============================================= */

* {
  font-family: 'Jost', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  text-decoration: none !important;
}

body {
  color: #212121 !important;
  background: #ffffff !important;
  scrollbar-width: none !important; /* Firefox */
  overflow-y: scroll !important;
}

body::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari */
}

/* Offset anchor scroll position to account for sticky header height */
h1, h2, h3, h4, h5, h6,
[id] {
  scroll-margin-top: 80px !important;
}

/* =============================================
   2. HEADER
   ============================================= */

header[data-component="header"] {
  background: #ffffff !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

header[data-component="header"] div {
  border-bottom: none !important;
}

header[data-component="header"] a {
  color: #212121 !important;
  font-weight: 500 !important;
}

header[data-component="header"] a:hover {
  color: #ED4100 !important;
}

/* =============================================
   3. SIDEBAR NAVIGATION
   ============================================= */

[class*="sidebar"] a,
[class*="nav-item"] a,
[class*="navItem"] a {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #212121 !important;
  transition: color 200ms, background 200ms !important;
}

[class*="sidebar"] a:hover,
[class*="nav-item"] a:hover,
[class*="navItem"] a:hover {
  color: #ED4100 !important;
  background: rgba(237, 65, 0, 0.05) !important;
  border-radius: 6px !important;
}

[class*="nav-item"][class*="active"] a,
[class*="navItem"][class*="active"] a,
[class*="nav-item"] a[aria-current="page"],
[class*="navItem"] a[aria-current="page"] {
  color: #ED4100 !important;
  font-weight: 600 !important;
}

/* =============================================
   4. BREADCRUMBS
   ============================================= */

[class*="breadcrumb"] {
  font-size: 13px !important;
}

[class*="breadcrumb"] a,
[class*="breadcrumb"] span {
  color: #888 !important;
  font-weight: 400 !important;
}

[class*="breadcrumb"] a:hover {
  color: #ED4100 !important;
}

/* =============================================
   5. CONTENT BODY
   ============================================= */

.article-page h1 {
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #212121 !important;
  margin-bottom: 24px !important;
}

.article-page h2 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #212121 !important;
  margin-top: 40px !important;
  margin-bottom: 12px !important;
}

.article-page h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #212121 !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}

.article-page h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #212121 !important;
  margin-top: 16px !important;
  margin-bottom: 6px !important;
}

.article-page p {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #212121 !important;
}

.article-page .content a {
  color: #ED4100 !important;
  font-weight: 500 !important;
}

.article-page .content a:hover {
  text-decoration: underline !important;
}

/* =============================================
   6. TABLES
   ============================================= */

table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 0 !important;
  margin: 24px 0 !important;
}

thead tr {
  background: #f5f5f5 !important;
}

th {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #212121 !important;
  padding: 12px 16px !important;
  text-align: left !important;
  border: none !important;
  border-bottom: 1px solid #e8e8e8 !important;
  border-radius: 0 !important;
  background: #f5f5f5 !important;
}

td {
  font-size: 14px !important;
  color: #212121 !important;
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  border-radius: 0 !important;
}

tr:last-child td {
  border-bottom: none !important;
}



/* =============================================
   7. CODE BLOCKS
   ============================================= */

code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 13px !important;
  background: #F2F3F7 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

pre {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 13px !important;
  background: #F2F3F7 !important;
  border-radius: 6px !important;
  border-left: 3px solid #ED4100 !important;
  padding: 16px 20px !important;
  overflow-x: auto !important;
}

/* Outer wrapper and all children */
code-snippet.theme-code-snippet,
code-snippet.theme-code-snippet *,
[data-component="code"],
[data-component="code"] * {
  background: #F2F3F7 !important;
}

/* Slightly darker header bar to distinguish label from code body */
.theme-code-snippet-header,
[data-component="code"] [class*="header"] {
  background: #E6E8F0 !important;
  border-bottom: 1px solid #d8dae6 !important;
}

/* =============================================
   8. ON THIS PAGE (right panel)
   ============================================= */

[class*="onThisPage"] a,
[class*="on-this-page"] a,
[class*="toc"] a {
  font-size: 13px !important;
  color: #888 !important;
  font-weight: 400 !important;
}

[class*="onThisPage"] a:hover,
[class*="on-this-page"] a:hover,
[class*="toc"] a:hover {
  color: #ED4100 !important;
}

/* Active item — exact selector from DevTools */
a.toc-link[aria-current="true"] {
  color: #ED4100 !important;
  font-weight: 600 !important;
  border-left-color: #ED4100 !important;
}

/* =============================================
   9. ARTICLE FOOTER (prev / next navigation)
   ============================================= */

.article-page footer,
article footer {
  background: #ffffff !important;
  border-top: 1px solid #e8e8e8 !important;
  border-radius: 0 !important;
  margin-top: 48px !important;
  padding: 24px 0 !important;
}

.article-page footer a,
article footer a {
  color: #ED4100 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

.article-page footer span,
article footer span {
  color: #888 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.article-page footer::before,
.article-page footer::after,
article footer::before,
article footer::after,
.article-page footer *::before,
.article-page footer *::after {
  content: none !important;
  display: none !important;
}

/* =============================================
   10. SITE FOOTER
   ============================================= */

footer[data-component="footer"] {
  background: #F8F8F8 !important;
  border-top: 1px solid #e8e8e8 !important;
  color: #888 !important;
  font-size: 13px !important;
}

footer[data-component="footer"] a {
  color: #888 !important;
  font-weight: 400 !important;
}

footer[data-component="footer"] a:hover {
  color: #ED4100 !important;
}

/* =============================================
   11. SPACE CARDS (homepage)
   ============================================= */

[class*="spaceCard"],
[class*="space-card"],
[class*="SpaceCard"],
[class*="integration-card"] {
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 28px 24px !important;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms !important;
}

[class*="spaceCard"]:hover,
[class*="space-card"]:hover,
[class*="SpaceCard"]:hover,
[class*="integration-card"]:hover {
  border-color: #ED4100 !important;
  box-shadow: 0 4px 20px rgba(237, 65, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* =============================================
   12. BUTTONS
   ============================================= */

button {
  font-family: 'Jost', sans-serif !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: background 200ms !important;
}

/* =============================================
   13. TAB NAVIGATION (portal homepage only)
   ============================================= */

.tk-tab-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 24px 36px;
  background: transparent;
  margin-top: -8px;
}

.tk-tab-nav a {
  font-family: 'Jost', sans-serif !important;
  display: inline-block;
  padding: 9px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.tk-tab-nav a:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
}

.tk-tab-nav a.tk-tab-active {
  background: #ffffff !important;
  color: #ED4100 !important;
  border-color: #ffffff !important;
  font-weight: 600 !important;
}

/* Hide tabs on non-portal pages */
body:not(.sc-portal) .tk-tab-nav {
  display: none;
}

/* =============================================
   14. SEARCH BAR
   ============================================= */

header[data-component="header"] {
  overflow: visible !important;
}

header div.search-bar {
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
}

header div.search-bar__input-container {
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  transition: border-color 200ms !important;
  box-sizing: border-box !important;
}

header div.search-bar:focus-within div.search-bar__input-container {
  border-color: #ED4100 !important;
}

header div.search-bar:focus-within {
  border-color: #ED4100 !important;
}

header input.search-input__input {
  font-family: 'Jost', sans-serif !important;
  font-size: 14px !important;
  color: #212121 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}

header input.search-input__input::placeholder {
  color: #aaa !important;
}

/* =============================================
   15. COOKIE BANNER
   ============================================= */

/* Override cookieconsent CSS variables */
#cc-main {
  --cc-bg: #ffffff !important;
  --cc-primary-color: #212121 !important;
  --cc-secondary-color: #555555 !important;
  --cc-btn-primary-bg: #ED4100 !important;
  --cc-btn-primary-hover-bg: #d43a00 !important;
  --cc-btn-primary-color: #ffffff !important;
  --cc-btn-secondary-bg: #ffffff !important;
  --cc-btn-secondary-hover-bg: #ffffff !important;
  --cc-btn-secondary-color: #212121 !important;
  --cc-btn-secondary-hover-color: #ED4100 !important;
  --cc-btn-secondary-border-color: #e0e0e0 !important;
  --cc-btn-secondary-hover-border-color: #ED4100 !important;
  --cc-modal-border-radius: 10px !important;
  --cc-btn-border-radius: 10px !important;
  --cc-font-family: 'Jost', sans-serif !important;
  --cc-link-color: #ED4100 !important;
  --cc-toggle-on-bg: #ED4100 !important;
  --cc-toggle-off-bg: #cccccc !important;
  --cc-separator-border-color: #e8e8e8 !important;
}

/* Modal container */
#cc-main .cm {
  font-family: 'Jost', sans-serif !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Title */
#cc-main .cm .cm--title,
#cc-main .cm #cm_title {
  font-family: 'Jost', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #212121 !important;
}

/* Body text */
#cc-main .cm .cm--texts p,
#cc-main .cm p {
  font-family: 'Jost', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #555 !important;
  line-height: 1.6 !important;
}

/* All buttons base */
#cc-main .cm .cm_btn {
  font-family: 'Jost', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  transition: background 200ms, border-color 200ms, color 200ms !important;
}

/* "Accept all" — primary */
#cc-main .cm .cm_btn[data-role="all"] {
  background: #ED4100 !important;
  color: #ffffff !important;
  border: none !important;
}

#cc-main .cm .cm_btn[data-role="all"]:hover {
  background: #d43a00 !important;
}

/* "Necessary only" — secondary */
#cc-main .cm .cm_btn[data-role="necessary"] {
  background: #ffffff !important;
  color: #212121 !important;
  border: 1.5px solid #e0e0e0 !important;
}

#cc-main .cm .cm_btn[data-role="necessary"]:hover {
  border-color: #ED4100 !important;
  color: #ED4100 !important;
}

/* "Manage preferences" — tertiary */
#cc-main .cm .cm_btn[data-role="show_settings"],
#cc-main .cm .cm_btn--secondary {
  background: #f5f5f5 !important;
  color: #888 !important;
  border: none !important;
}

#cc-main .cm .cm_btn[data-role="show_settings"]:hover,
#cc-main .cm .cm_btn--secondary:hover {
  color: #ED4100 !important;
  background: #f5f5f5 !important;
}

/* =============================================
   16. SCROLL TO TOP ON PAGE LOAD
   ============================================= */

html {
  scroll-behavior: auto !important;
}

/* =============================================
   16. HORIZONTAL RULE
   ============================================= */

hr {
  margin: 16px 0 !important;
  border: none !important;
  border-top: 1px solid #e8e8e8 !important;
}

/* =============================================
   16. HOMEPAGE HERO
   ============================================= */

/* Main "Twikit Academy" title */
[class*="hero"] h1,
[class*="portal"] h1,
[class*="home"] h1 {
  font-weight: 700 !important;
}

/* Subtitle / tagline — targets exact element from DevTools */
header[data-component="banner"] hgroup p {
  font-weight: 200 !important;
  color: #ED4100 !important;
}