/* ============================================================
   TRAFIKK – Premium Documentation Theme
   Apple-inspired, modern, clean.
   ============================================================ */

/* ---- CSS Custom Properties ---- */
:root {
  --tk-bg:            #fafafa;
  --tk-surface:       #ffffff;
  --tk-text:          #1d1d1f;
  --tk-text-muted:    #6e6e73;
  --tk-border:        #e5e5ea;
  --tk-accent:        #6c3ec1;
  --tk-accent-light:  #f3eeff;
  --tk-accent-dark:   #4a1d96;
  --tk-gradient:      linear-gradient(135deg, #6c3ec1 0%, #a855f7 50%, #ec4899 100%);
  --tk-gradient-soft: linear-gradient(135deg, #f3eeff 0%, #fdf2f8 100%);
  --tk-radius:        12px;
  --tk-radius-sm:     8px;
  --tk-radius-lg:     20px;
  --tk-shadow:        0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --tk-shadow-md:     0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --tk-shadow-lg:     0 12px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  --tk-transition:    .25s cubic-bezier(.4,0,.2,1);
  --tk-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, sans-serif;
  --tk-mono:          "SF Mono", "Fira Code", "JetBrains Mono", "Cascadia Code",
                      Menlo, Consolas, monospace;
}

/* ---- General ---- */
body {
  font-family: var(--tk-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--tk-text);
  background: var(--tk-bg);
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6,
.rst-content h1, .rst-content h2, .rst-content h3,
.rst-content h4, .rst-content h5, .rst-content h6 {
  font-family: var(--tk-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--tk-text);
}

h1, .rst-content h1 { font-size: 2.4rem !important; line-height: 1.15; margin-top: 1.5rem !important; }
h2, .rst-content h2 { font-size: 1.7rem !important; line-height: 1.2;  margin-top: 2.5rem !important; }
h3, .rst-content h3 { font-size: 1.25rem !important; line-height: 1.3; }
h4, .rst-content h4 { font-size: 1.1rem !important; }

p, li, td, th, dd, dt {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--tk-text);
}

a {
  color: var(--tk-accent) !important;
  text-decoration: none !important;
  transition: color var(--tk-transition);
}
a:hover {
  color: var(--tk-accent-dark) !important;
  text-decoration: underline !important;
}

/* ---- Main Content Area ---- */
.wy-nav-content {
  max-width: 880px !important;
  background: var(--tk-surface);
  padding: 2rem 3rem 4rem !important;
}

/* Material theme specifics */
.main-content,
article,
.md-content__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* ---- Hero Section (landing page) ---- */
.hero-section {
  text-align: center;
  padding: 2.5rem 1.5rem 2rem;
  margin: -1rem -1rem 2rem;
  background: var(--tk-gradient-soft);
  border-bottom: 1px solid var(--tk-border);
  border-radius: 0 0 var(--tk-radius-lg) var(--tk-radius-lg);
}

.hero-section h1 {
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  background: var(--tk-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.3rem !important;
}

.hero-section .hero-tagline {
  font-size: 1.05rem;
  color: var(--tk-text-muted);
  font-weight: 400;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ---- Module Cards Grid ---- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.module-card {
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  padding: 1.2rem 1.3rem;
  transition: transform var(--tk-transition), box-shadow var(--tk-transition), border-color var(--tk-transition);
  position: relative;
  overflow: hidden;
}

.module-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tk-gradient);
  opacity: 0;
  transition: opacity var(--tk-transition);
}

.module-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tk-shadow-lg);
  border-color: #d1c4e9;
}

.module-card:hover::before {
  opacity: 1;
}

.module-card .card-icon {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
  display: block;
}

.module-card .card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--tk-text);
}

.module-card .card-title a {
  color: var(--tk-text) !important;
  text-decoration: none !important;
}
.module-card:hover .card-title a {
  color: var(--tk-accent) !important;
}

.module-card .card-desc {
  font-size: 0.82rem;
  color: var(--tk-text-muted);
  line-height: 1.5;
  margin: 0;
}

.module-card .card-tag {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--tk-accent-light);
  color: var(--tk-accent);
}

/* ---- Code Blocks ---- */
pre, code {
  font-family: var(--tk-mono) !important;
}

code {
  font-size: 0.88em !important;
  padding: 0.15em 0.4em !important;
  background: #f5f5f7 !important;
  border-radius: 5px !important;
  color: var(--tk-accent-dark) !important;
  border: 1px solid #e8e8ed !important;
}

pre {
  background: #1d1d1f !important;
  color: #f5f5f7 !important;
  border-radius: var(--tk-radius) !important;
  padding: 1.3rem 1.5rem !important;
  border: none !important;
  box-shadow: var(--tk-shadow-md) !important;
  overflow-x: auto;
  line-height: 1.6 !important;
  font-size: 0.88rem !important;
}

pre code {
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  padding: 0 !important;
  font-size: inherit !important;
}

/* Inline code in headings should inherit heading style */
h1 code, h2 code, h3 code, h4 code {
  font-size: 0.9em !important;
  background: var(--tk-accent-light) !important;
  color: var(--tk-accent-dark) !important;
}

/* ---- Tables ---- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--tk-radius-sm);
  overflow: hidden;
  box-shadow: var(--tk-shadow);
  margin: 1.5rem 0;
  font-size: 0.92rem;
}

thead th {
  background: #f5f5f7 !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em;
  padding: 0.85rem 1rem !important;
  border-bottom: 2px solid var(--tk-border) !important;
  color: var(--tk-text-muted) !important;
}

tbody td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--tk-border) !important;
}

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

tbody tr:hover {
  background: var(--tk-accent-light);
}

/* ---- Admonitions / Notes ---- */
.admonition, .note, .warning, .tip, .important, .caution,
div.admonition, div.note, div.warning, div.tip {
  background: var(--tk-surface) !important;
  border: 1px solid var(--tk-border) !important;
  border-left: 4px solid var(--tk-accent) !important;
  border-radius: var(--tk-radius-sm) !important;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
  box-shadow: var(--tk-shadow) !important;
}

.admonition-title, .admonition .admonition-title {
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tk-accent) !important;
  margin-bottom: 0.4rem !important;
}

.warning, div.warning {
  border-left-color: #ef4444 !important;
}
.warning .admonition-title {
  color: #ef4444 !important;
}

.tip, div.tip {
  border-left-color: #10b981 !important;
}
.tip .admonition-title {
  color: #10b981 !important;
}

/* ---- Blockquotes ---- */
blockquote {
  border-left: 3px solid var(--tk-accent) !important;
  background: var(--tk-accent-light);
  padding: 1rem 1.5rem !important;
  margin: 1.5rem 0 !important;
  border-radius: 0 var(--tk-radius-sm) var(--tk-radius-sm) 0;
  color: var(--tk-text);
  font-style: normal !important;
}

blockquote p {
  margin: 0.3rem 0;
}

/* ---- Sidebar / Navigation ---- */
.md-sidebar,
nav.wy-nav-side {
  font-family: var(--tk-font) !important;
}

/* ---- Lists ---- */
ul, ol {
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.3rem;
}

li > p {
  margin: 0.2rem 0;
}

/* ---- Horizontal Rule ---- */
hr {
  border: none;
  height: 1px;
  background: var(--tk-border);
  margin: 2.5rem 0;
}

/* ---- Info Box (custom) ---- */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--tk-accent-light);
  border: 1px solid #e0d4f5;
  border-radius: var(--tk-radius);
  margin: 1.5rem 0;
}

.info-box .info-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.info-box .info-content {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tk-text);
}

/* ---- Citation Box ---- */
.citation-box {
  background: var(--tk-gradient-soft);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.65;
}

.citation-box .cite-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tk-accent);
  margin-bottom: 0.35rem;
}

/* ---- Footer  ---- */
.section-divider {
  text-align: center;
  margin: 3rem 0 2rem;
  position: relative;
}

.section-divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--tk-border);
}

.section-divider span {
  position: relative;
  background: var(--tk-surface);
  padding: 0 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tk-text-muted);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .module-grid {
    grid-template-columns: 1fr;
  }
  .hero-section h1 {
    font-size: 1.8rem !important;
  }
  .hero-section .hero-tagline {
    font-size: 0.95rem;
  }
  .wy-nav-content {
    padding: 1.5rem 1.5rem 3rem !important;
  }
}

/* ---- Smooth scrolling ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Selection color ---- */
::selection {
  background: #d8b4fe;
  color: var(--tk-text);
}

/* ---- Material theme overrides ---- */
.md-header {
  background: var(--tk-surface) !important;
  box-shadow: var(--tk-shadow) !important;
}

.md-tabs {
  background: var(--tk-surface) !important;
}

/* Make the sidebar nav items prettier */
.md-nav__link, .md-nav__item {
  font-size: 0.9rem !important;
}

.md-nav__link--active {
  color: var(--tk-accent) !important;
  font-weight: 600 !important;
}

/* Sphinx-material specific overrides */
.globaltoc a {
  transition: color var(--tk-transition);
}
.globaltoc a.current {
  color: var(--tk-accent) !important;
  font-weight: 600;
}

/* Fix toctree list style in content */
.toctree-wrapper ul {
  list-style: none;
  padding-left: 0;
}
.toctree-wrapper li {
  margin-bottom: 0.4rem;
}
.toctree-wrapper a {
  font-weight: 500;
}

/* ---- Sphinx-Material Header Bar ---- */
.md-header-nav__button.md-logo img,
.md-header-nav__button.md-logo {
  color: white !important;
}

.md-header-nav__topic {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Material tabs */
.md-tabs__link {
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  transition: opacity var(--tk-transition);
}

.md-tabs__link:hover {
  opacity: 1 !important;
}

/* ---- Sidebar Polish ---- */
.md-sidebar__scrollwrap {
  font-family: var(--tk-font) !important;
}

.md-sidebar .md-nav__link {
  padding: 0.35rem 0.75rem !important;
  border-radius: var(--tk-radius-sm);
  transition: background var(--tk-transition), color var(--tk-transition);
}

.md-sidebar .md-nav__link:hover {
  background: var(--tk-accent-light);
}

.md-sidebar .md-nav__link--active,
.md-sidebar .md-nav__link.md-nav__link--active {
  background: var(--tk-accent-light) !important;
  color: var(--tk-accent) !important;
  font-weight: 600 !important;
}

/* ---- Content Area Refinements ---- */
.md-content {
  max-width: 920px;
  margin: 0 auto;
}

/* Section headers get a subtle bottom border */
.md-content h2,
.rst-content h2 {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--tk-border);
}

/* ---- Math Display ---- */
.MathJax_Display,
.math.notranslate {
  margin: 1.5rem 0 !important;
  padding: 1rem;
  background: #fafafa;
  border-radius: var(--tk-radius-sm);
  border: 1px solid var(--tk-border);
  overflow-x: auto;
}

/* ---- Smooth Page Transitions ---- */
.md-content__inner {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Print Styles ---- */
@media print {
  .hero-section { background: none !important; }
  .module-card { break-inside: avoid; }
}