/* ============================================================
   itstck.com — Multi-Theme extra.css for MkDocs Material
   Compatible with Slate (Dark Mode) & Default (Light Mode)
   ============================================================ */

/* ── 1. Global Invariants & Font Definitions ── */
:root {
  --itstck-font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --itstck-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  
  /* Shared Material Font Overrides */
  --md-text-font: var(--itstck-font-sans);
  --md-code-font: var(--itstck-font-mono);
}

/* Force Typography across MkDocs Layout */
body, .md-typeset, .md-nav, .md-header {
  font-family: var(--itstck-font-sans) !important;
}

code, kbd, pre, .md-typeset code, .highlight code {
  font-family: var(--itstck-font-mono) !important;
}

/* ── 2. Dark Scheme (Slate / Night) ── */
[data-md-color-scheme="slate"] {
  /* MkDocs Material Native Tokens */
  --md-primary-fg-color:           #0f172a;
  --md-primary-fg-color--light:    #1e293b;
  --md-primary-fg-color--dark:     #020617;
  --md-accent-fg-color:            #38bdf8; /* Cyan Highlight */
  --md-accent-fg-color--transparent: rgba(56, 189, 248, 0.1);
  --md-default-bg-color:           #0b0f19; /* Deep Slate Background */
  --md-default-bg-color--light:    #111827;
  --md-default-bg-color--lighter:  #1e293b;
  --md-default-bg-color--lightest: #334155;
  --md-default-fg-color:           #f8fafc;
  --md-default-fg-color--light:    #cbd5e1;
  --md-default-fg-color--lighter:  #94a3b8;
  --md-default-fg-color--lightest: #64748b;
  --md-code-bg-color:              #030712;
  --md-code-fg-color:              #38bdf8;
  --md-typeset-a-color:            #38bdf8;
  --md-footer-bg-color:            #030712;
  --md-footer-bg-color--dark:      #020617;
  --md-footer-fg-color:            #94a3b8;
  --md-footer-fg-color--light:     #64748b;

  /* ITSTCK Custom Theme Tokens */
  --itstck-accent:        #38bdf8; /* Cyan */
  --itstck-accent-hover:  #7dd3fc;
  --itstck-accent-blue:   #6366f1; /* Indigo */
  --itstck-bg:            #0b0f19;
  --itstck-bg-card:       #111827;
  --itstck-bg-deep:       #030712;
  --itstck-header-bg:     rgba(11, 15, 25, 0.85);
  --itstck-tabs-bg:       rgba(17, 24, 39, 0.9);
  --itstck-border:        #1e293b;
  --itstck-border-hover:  #334155;
  --itstck-text-main:     #f8fafc;
  --itstck-text-muted:    #94a3b8;
  --itstck-btn-text:      #030712;
  
  /* Ambient Visuals */
  --itstck-grid-line:     rgba(56, 189, 248, 0.03);
  --itstck-hero-glow:     radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.08) 0%, transparent 60%);
  --itstck-hero-title-grad: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
  --itstck-card-hover-bg: #151e30;
  --itstck-shadow:        0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.1);
}

/* ── 3. Light Scheme (Default / Day) ── */
[data-md-color-scheme="default"] {
  /* MkDocs Material Native Tokens */
  --md-primary-fg-color:           #0f172a;
  --md-primary-fg-color--light:    #334155;
  --md-primary-fg-color--dark:     #020617;
  --md-accent-fg-color:            #0284c7; /* Sky Blue */
  --md-accent-fg-color--transparent: rgba(2, 132, 199, 0.1);
  --md-default-bg-color:           #f8fafc;
  --md-default-bg-color--light:    #ffffff;
  --md-default-bg-color--lighter:  #f1f5f9;
  --md-default-bg-color--lightest: #e2e8f0;
  --md-default-fg-color:           #0f172a;
  --md-default-fg-color--light:    #334155;
  --md-default-fg-color--lighter:  #475569;
  --md-default-fg-color--lightest: #64748b;
  --md-code-bg-color:              #f1f5f9;
  --md-code-fg-color:              #0284c7;
  --md-typeset-a-color:            #0284c7;
  --md-footer-bg-color:            #f1f5f9;
  --md-footer-bg-color--dark:      #e2e8f0;
  --md-footer-fg-color:            #475569;
  --md-footer-fg-color--light:     #64748b;

  /* ITSTCK Custom Theme Tokens */
  --itstck-accent:        #0284c7;
  --itstck-accent-hover:  #0369a1;
  --itstck-accent-blue:   #4f46e5;
  --itstck-bg:            #f8fafc;
  --itstck-bg-card:       #ffffff;
  --itstck-bg-deep:       #f1f5f9;
  --itstck-header-bg:     rgba(248, 250, 252, 0.85);
  --itstck-tabs-bg:       rgba(255, 255, 255, 0.9);
  --itstck-border:        #e2e8f0;
  --itstck-border-hover:  #cbd5e1;
  --itstck-text-main:     #0f172a;
  --itstck-text-muted:    #475569;
  --itstck-btn-text:      #ffffff;

  /* Ambient Visuals */
  --itstck-grid-line:     rgba(15, 23, 42, 0.04);
  --itstck-hero-glow:     radial-gradient(circle at 50% 20%, rgba(2, 132, 199, 0.08) 0%, transparent 60%);
  --itstck-hero-title-grad: linear-gradient(180deg, #0f172a 0%, #334155 100%);
  --itstck-card-hover-bg: #f8fafc;
  --itstck-shadow:        0 12px 32px rgba(15, 23, 42, 0.08), 0 0 20px rgba(2, 132, 199, 0.08);
}

/* ── 4. Core Background & Ambient Background Grid ── */
body, .md-main, .md-content, .md-content__inner {
  background-color: var(--itstck-bg) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(var(--itstck-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--itstck-grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* ── 5. Navigation & Header Overrides ── */
.md-header {
  background-color: var(--itstck-header-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--itstck-border);
}

.md-header__title, .md-header__topic {
  font-family: var(--itstck-font-mono) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
  color: var(--itstck-text-main) !important;
}

.md-tabs {
  background-color: var(--itstck-tabs-bg) !important;
  border-bottom: 1px solid var(--itstck-border);
}

.md-tabs__link {
  font-family: var(--itstck-font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--itstck-text-muted) !important;
  transition: color 0.2s ease;
}

.md-tabs__link:hover, .md-tabs__link--active {
  color: var(--itstck-accent) !important;
  opacity: 1 !important;
}

.md-tabs__indicator {
  background-color: var(--itstck-accent) !important;
  height: 2px;
}

/* ── 6. Search Form Overrides ── */
.md-search__form {
  background-color: var(--itstck-bg-card) !important;
  border: 1px solid var(--itstck-border) !important;
  border-radius: 6px !important;
}

.md-search__input {
  font-family: var(--itstck-font-mono) !important;
  color: var(--itstck-text-main) !important;
}

/* ── 7. Content & Markdown Typography ── */
.md-typeset {
  font-family: var(--itstck-font-sans);
  color: var(--itstck-text-muted);
}

.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  color: var(--itstck-text-main);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.md-typeset code {
  background: var(--itstck-bg-deep) !important;
  color: var(--itstck-accent) !important;
  border: 1px solid var(--itstck-border);
  border-radius: 4px !important;
  font-family: var(--itstck-font-mono) !important;
  padding: 0.2em 0.4em !important;
}

.md-typeset pre > code {
  border: none;
}

/* Reset margins on pages with data-page-home attribute */
body[data-page-home] .md-content__inner {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* ============================================================
   8. HOMEPAGE COMPONENTS (ITSTCK Custom Layout)
   ============================================================ */

.itstck-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* ── Hero Section ── */
.itstck-hero {
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
  position: relative;
  overflow: hidden;
  background: var(--itstck-hero-glow);
}

.itstck-hero__body {
  text-align: center;
  max-width: 860px;
  position: relative;
  z-index: 2;
}

.itstck-pretitle {
  display: inline-block;
  font-family: var(--itstck-font-mono);
  font-size: 11px;
  color: var(--itstck-accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 6px 16px;
  background: var(--md-accent-fg-color--transparent);
  border: 1px solid var(--itstck-border);
  border-radius: 20px;
}

.itstck-hero__h1 {
  font-size: clamp(48px, 7vw, 88px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 24px !important;
  line-height: 1.05 !important;
  background: var(--itstck-hero-title-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none !important;
}

.itstck-hero__sub {
  font-family: var(--itstck-font-mono);
  font-size: 14px;
  color: var(--itstck-accent);
  margin-bottom: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.itstck-hero__tagline {
  font-size: 18px;
  color: var(--itstck-text-muted);
  font-weight: 400;
  margin-bottom: 40px;
  line-height: 1.6;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.itstck-hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.itstck-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: var(--itstck-accent);
  color: var(--itstck-btn-text) !important;
  font-family: var(--itstck-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--itstck-accent);
}

.itstck-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.25);
  background: var(--itstck-accent-hover);
}

.itstck-btn--ghost {
  background: transparent;
  color: var(--itstck-text-main) !important;
  border-color: var(--itstck-border);
}

.itstck-btn--ghost:hover {
  border-color: var(--itstck-accent);
  color: var(--itstck-accent) !important;
  box-shadow: none;
}

/* ── Stats Bar ── */
.itstck-stats-bar {
  background: var(--itstck-bg-card);
  padding: 40px 0;
  border-top: 1px solid var(--itstck-border);
  border-bottom: 1px solid var(--itstck-border);
}

.itstck-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  text-align: center;
}

.itstck-stat__num {
  display: block;
  font-family: var(--itstck-font-mono);
  font-size: 36px;
  font-weight: 700;
  color: var(--itstck-text-main);
  margin-bottom: 6px;
}

.itstck-stat__label {
  font-family: var(--itstck-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--itstck-text-muted);
}

/* ── Domains Section ── */
.itstck-domains {
  padding: 100px 0;
}

.itstck-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.itstck-label {
  font-family: var(--itstck-font-mono);
  font-size: 12px;
  color: var(--itstck-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 12px;
}

.itstck-section-header h2 {
  font-size: 40px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  border: none !important;
}

.itstck-section-header p {
  color: var(--itstck-text-muted);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Domain Cards Grid ── */
.itstck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.itstck-card {
  background: var(--itstck-bg-card);
  border: 1px solid var(--itstck-border);
  border-radius: 10px;
  padding: 32px;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.itstck-card:hover {
  border-color: var(--itstck-accent);
  transform: translateY(-4px);
  box-shadow: var(--itstck-shadow);
  background: var(--itstck-card-hover-bg);
}

.itstck-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.itstck-card__icon {
  font-size: 28px;
}

.itstck-card__tag {
  font-family: var(--itstck-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--itstck-accent);
  background: var(--md-accent-fg-color--transparent);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--itstck-border);
}

.itstck-card h3 {
  font-size: 20px !important;
  color: var(--itstck-text-main) !important;
  margin-bottom: 12px !important;
  font-weight: 600 !important;
  border: none !important;
}

.itstck-card p {
  color: var(--itstck-text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
  flex-grow: 1;
}

.itstck-card__link {
  font-family: var(--itstck-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--itstck-accent);
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.itstck-card:hover .itstck-card__link {
  transform: translateX(4px);
}

/* ── 9. Footer Section ── */
.itstck-footer {
  padding: 60px 24px;
  background: var(--itstck-bg-deep);
  border-top: 1px solid var(--itstck-border);
  text-align: center;
  position: relative;
  z-index: 2;
}

.itstck-footer__inner {
  max-width: 900px;
  margin: 0 auto;
}

.itstck-footer__note {
  font-family: var(--itstck-font-mono);
  font-size: 12px;
  color: var(--itstck-text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.itstck-footer__note code {
  color: var(--itstck-accent);
}

.itstck-footer__copy {
  font-family: var(--itstck-font-mono);
  font-size: 12px;
  color: var(--itstck-text-main);
  margin-bottom: 12px;
}

.itstck-footer__copy a {
  color: var(--itstck-accent) !important;
  text-decoration: none !important;
  font-weight: 700;
}

.itstck-footer__legal a {
  font-family: var(--itstck-font-mono);
  font-size: 11px;
  color: var(--itstck-text-muted) !important;
  text-decoration: none !important;
  margin: 0 8px;
  transition: color 0.2s ease;
}

.itstck-footer__legal a:hover {
  color: var(--itstck-accent) !important;
}

/* ── 10. MkDocs Cookie Consent Controls ── */
.md-consent__controls .md-button--primary {
  background-color: var(--itstck-accent) !important;
  color: var(--itstck-btn-text) !important;
  border-color: var(--itstck-accent) !important;
  font-family: var(--itstck-font-mono);
}

.md-consent__controls .md-button:not(.md-button--primary) {
  color: var(--itstck-text-main) !important;
  border-color: var(--itstck-border) !important;
  font-family: var(--itstck-font-mono);
}

/* ── 11. Responsive Styles ── */
@media (max-width: 768px) {
  .itstck-hero { padding: 80px 20px 40px; min-height: auto; }
  .itstck-stats { grid-template-columns: repeat(2, 1fr); }
  .itstck-grid { grid-template-columns: 1fr; }
}





/* ── Header Controls & Interactive Elements (Light/Dark Visibility Fix) ── */

/* 1. Theme Toggle & Header Buttons (.md-header__option) */
.md-header__option,
.md-header__button,
.md-header__option .md-icon,
.md-header__button .md-icon {
  color: var(--itstck-text-main) !important;
  fill: currentColor !important;
}

.md-header__button:hover {
  color: var(--itstck-accent) !important;
  opacity: 1 !important;
}

/* 2. Repository Badge (.md-header__source) */
.md-header__source {
  color: var(--itstck-text-main) !important;
}

.md-source {
  background-color: var(--itstck-bg-card) !important;
  color: var(--itstck-text-main) !important;
  border: 1px solid var(--itstck-border) !important;
  border-radius: 6px !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.md-source:hover {
  border-color: var(--itstck-accent) !important;
}

.md-source__icon .md-icon,
.md-source__repository,
.md-source__fact {
  color: var(--itstck-text-main) !important;
  fill: currentColor !important;
}

/* 3. Search Box & Icons (.md-search) */
.md-search {
  color: var(--itstck-text-main) !important;
}

.md-search__form {
  background-color: var(--itstck-bg-card) !important;
  border: 1px solid var(--itstck-border) !important;
  border-radius: 6px !important;
}

.md-search__input {
  color: var(--itstck-text-main) !important;
  background-color: transparent !important;
}

.md-search__input::placeholder {
  color: var(--itstck-text-muted) !important;
}

.md-search__icon {
  color: var(--itstck-text-muted) !important;
  fill: currentColor !important;
}

.md-search__form:hover .md-search__icon,
.md-search__input:focus ~ .md-search__icon {
  color: var(--itstck-accent) !important;
}