/*
 * KS17 Theme Custom CSS
 * Layered on top of Quark 2/Blades CSS to match ks17.tech visual design.
 * Brand Colors: Blue (#195090) & Logo Grey (#a2a2a0)
 */

:root,
:root[data-theme="light"] {
  /* Logo Blue (Primary Accent) */
  --q2-accent: #195090;
  --q2-accent-contrast: #ffffff;
  --q2-link: #195090;
  
  /* Logo Grey (Secondary Accent / Muted elements) */
  --logo-grey: #a2a2a0;
  --q2-text-muted: var(--logo-grey);
  --pico-muted-color: var(--logo-grey);
  --q2-divider: rgba(162, 162, 160, 0.25);
  
  /* Blades/Pico override variables */
  --pico-primary: #195090;
  --pico-primary-hover: #123e70;
  --pico-primary-background: #195090;
  --pico-primary-border: #195090;
  --pico-primary-focus: rgba(25, 80, 144, 0.3);
  
  /* Backgrounds */
  --q2-bg: #ffffff;
  --q2-bg-elev: #ffffff;
  --q2-bg-muted: #fbfbfc;
  --pico-background-color: #ffffff;
}

/* Dark theme adaptions with KS17 blue accent and grey */
:root[data-theme="dark"] {
  /* Slightly brighter blue for dark mode readability */
  --q2-accent: #3078cc;
  --q2-accent-contrast: #ffffff;
  --q2-link: #3078cc;
  
  /* Logo Grey remains the same for contrast */
  --logo-grey: #a2a2a0;
  --q2-text-muted: var(--logo-grey);
  --pico-muted-color: var(--logo-grey);
  --q2-divider: rgba(162, 162, 160, 0.2);
  
  --pico-primary: #3078cc;
  --pico-primary-hover: #4d90df;
  --pico-primary-background: #3078cc;
  --pico-primary-border: #3078cc;
  --pico-primary-focus: rgba(48, 120, 204, 0.4);
}

/* --- Typography & Headings --- */
h1, h2, h3, h4, h5,
.navbar-section.logo a {
  color: #195090;
  font-family: "Cal Sans", "Inter", -apple-system, sans-serif;
}

/* H6 eyebrow labels in logo grey to match subtitle tagline */
h6, .eyebrow {
  color: var(--logo-grey) !important;
  font-family: "Inter", sans-serif;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5 {
  color: #60a5fa;
}

/* KS17 Heading Section Accent Line in Logo Blue */
h2::before {
  background: var(--q2-accent) !important;
  width: 32px !important;
  height: 4px !important;
  border-radius: 4px !important;
}

/* Body Text */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #333333;
}

/* --- Layout & Components --- */

/* Header / Navbar Styling */
#header {
  border-bottom: 1px solid var(--q2-divider);
  background-color: var(--q2-bg-elev) !important;
}

.navbar a.active {
  color: var(--q2-accent) !important;
  font-weight: 700;
}

/* Buttons style from ks17.tech */
.button, button, input[type="submit"], input[type="button"], .btn-primary {
  background-color: #195090 !important;
  border-color: #195090 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.6rem 1.4rem !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
}

.button:hover, button:hover, .btn-primary:hover {
  background-color: #123e70 !important;
  border-color: #123e70 !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.08) !important;
}

/* Secondary/Outline Button uses Logo Grey */
.button.outline, .button.secondary {
  background-color: transparent !important;
  color: var(--logo-grey) !important;
  border-color: var(--logo-grey) !important;
}

.button.outline:hover, .button.secondary:hover {
  background-color: var(--logo-grey) !important;
  color: #ffffff !important;
}

/* Cards style to match the clean shadow cards on ks17.tech */
.card, article.card {
  border-radius: 12px !important;
  border: 1px solid var(--q2-divider) !important;
  background-color: var(--q2-bg-elev) !important;
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.01) !important;
  padding: 1.5rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -3px rgba(162, 162, 160, 0.15), 0 4px 6px -2px rgba(162, 162, 160, 0.08) !important;
  border-color: rgba(162, 162, 160, 0.4) !important;
}

/* Alert Boxes custom stylings */
.markdown-alert, .md-alert {
  border-radius: 8px !important;
}

.markdown-alert-important,
.md-alert--important {
  --alert-accent: #195090 !important;
  --gh-alert-important-border-color: #195090 !important;
  --gh-alert-important-title-color: #195090 !important;
  border-color: #195090 !important;
}

.markdown-alert-important .markdown-alert-title,
.md-alert--important > .md-alert-title,
.markdown-alert-important .markdown-alert-title svg,
.md-alert--important > .md-alert-title svg {
  color: #195090 !important;
  fill: #195090 !important;
}

:root[data-theme="dark"] .markdown-alert-important,
:root[data-theme="dark"] .md-alert--important {
  --alert-accent: #3078cc !important;
  --gh-alert-important-border-color: #3078cc !important;
  --gh-alert-important-title-color: #3078cc !important;
  border-color: #3078cc !important;
}

:root[data-theme="dark"] .markdown-alert-important .markdown-alert-title,
:root[data-theme="dark"] .md-alert--important > .md-alert-title,
:root[data-theme="dark"] .markdown-alert-important .markdown-alert-title svg,
:root[data-theme="dark"] .md-alert--important > .md-alert-title svg {
  color: #3078cc !important;
  fill: #3078cc !important;
}



/* --- Footer --- */
#footer {
  border-top: 1px solid var(--q2-divider);
  background-color: var(--q2-bg-muted) !important;
  padding: 3rem 0;
}

/* Custom page layout: stretch content wider to the left and right */
.container {
  max-width: 1800px !important;
}
.container-narrow {
  max-width: 1280px !important;
}
#body-wrapper > .container > .content-item {
  max-width: 1600px !important;
}

/* Override third-level dropdown menus under Maximus to open to the left instead of right.
   This prevents them from going off-screen on laptop/narrow desktop viewports. */
.dropmenu li li > ul {
  top: 0 !important;
  left: auto !important;
  right: calc(100% + 6px) !important;
}
.dropmenu li li.has-children > a::after {
  transform: rotate(135deg) translateY(-2px) !important;
}