/* ── Layout ─────────────────────────────────────────────────── */

/* Top nav tabs replace the sidebar on desktop — hide it on large screens.
   Must match MkDocs Material's hamburger threshold (76.25em) so the drawer
   remains reachable when the hamburger is visible (60–76.25em range). */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary { display: none; }
}

/* ── Header & Navigation Bar Styling ─────────────────────────── */

.md-header {
  position: relative;
  overflow: visible;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.md-header__inner {
  position: relative;
  z-index: 1;
}

/* PCB Trace Lines & Via Solder Pads */
.md-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.25s ease;
}

/* Shifting Glowing Signal Pulse Sweep */
.md-header::after {
  content: "";
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  pointer-events: none;
  z-index: 0;
  transform: skewX(-25deg);
  animation: pcb-signal-sweep 8s infinite ease-in-out;
}

@keyframes pcb-signal-sweep {
  0% { left: -100%; }
  35% { left: 200%; }
  100% { left: 200%; }
}

[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 242, 254, 0.2);
}

[data-md-color-scheme="slate"] .md-header::before {
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cpath d='M0 16h80l16 16h124l16-16h64M0 22h77.5l16 16h124l16-16h66.5M0 28h75l16 16h124l16-16h69M0 122h100l20-20h110l20 20h50M0 128h97.5l20-20h110l20 20h52.5M60 0v8l-8 8M60 150v-36M230 0v10M230 150v-16M136 54h-16M177 54h15' fill='none' stroke='%2300f2fe' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='145' y='50' width='30' height='30' rx='2' fill='none' stroke='%2300f2fe' stroke-width='1.2' stroke-dasharray='3 2'/%3E%3Cg fill='%2300f2fe'%3E%3Crect x='136' y='53' width='7' height='2'/%3E%3Crect x='136' y='59' width='7' height='2'/%3E%3Crect x='136' y='65' width='7' height='2'/%3E%3Crect x='136' y='71' width='7' height='2'/%3E%3Crect x='177' y='53' width='7' height='2'/%3E%3Crect x='177' y='59' width='7' height='2'/%3E%3Crect x='177' y='65' width='7' height='2'/%3E%3Crect x='177' y='71' width='7' height='2'/%3E%3C/g%3E%3Ccircle cx='52' cy='16' r='3' fill='none' stroke='%2300f2fe' stroke-width='1.2'/%3E%3Ccircle cx='52' cy='16' r='1' fill='%2300f2fe'/%3E%3Ccircle cx='60' cy='114' r='3' fill='none' stroke='%2300f2fe' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='114' r='1' fill='%2300f2fe'/%3E%3Ccircle cx='230' cy='10' r='3' fill='none' stroke='%2300f2fe' stroke-width='1.2'/%3E%3Ccircle cx='230' cy='10' r='1' fill='%2300f2fe'/%3E%3Ccircle cx='230' cy='134' r='3' fill='none' stroke='%2300f2fe' stroke-width='1.2'/%3E%3Ccircle cx='230' cy='134' r='1' fill='%2300f2fe'/%3E%3Ccircle cx='120' cy='54' r='3' fill='none' stroke='%2300f2fe' stroke-width='1.2'/%3E%3Ccircle cx='120' cy='54' r='1' fill='%2300f2fe'/%3E%3Ccircle cx='192' cy='54' r='3' fill='none' stroke='%2300f2fe' stroke-width='1.2'/%3E%3Ccircle cx='192' cy='54' r='1' fill='%2300f2fe'/%3E%3C/svg%3E");
  background-size: 300px 150px;
}

[data-md-color-scheme="slate"] .md-header::after {
  background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.08), transparent);
}

[data-md-color-scheme="default"] .md-header {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

[data-md-color-scheme="default"] .md-header::before {
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cpath d='M0 16h80l16 16h124l16-16h64M0 22h77.5l16 16h124l16-16h66.5M0 28h75l16 16h124l16-16h69M0 122h100l20-20h110l20 20h50M0 128h97.5l20-20h110l20 20h52.5M60 0v8l-8 8M60 150v-36M230 0v10M230 150v-16M136 54h-16M177 54h15' fill='none' stroke='%230f172a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='145' y='50' width='30' height='30' rx='2' fill='none' stroke='%230f172a' stroke-width='1.2' stroke-dasharray='3 2'/%3E%3Cg fill='%23009688'%3E%3Crect x='136' y='53' width='7' height='2'/%3E%3Crect x='136' y='59' width='7' height='2'/%3E%3Crect x='136' y='65' width='7' height='2'/%3E%3Crect x='136' y='71' width='7' height='2'/%3E%3Crect x='177' y='53' width='7' height='2'/%3E%3Crect x='177' y='59' width='7' height='2'/%3E%3Crect x='177' y='65' width='7' height='2'/%3E%3Crect x='177' y='71' width='7' height='2'/%3E%3C/g%3E%3Ccircle cx='52' cy='16' r='3' fill='none' stroke='%230f172a' stroke-width='1.2'/%3E%3Ccircle cx='52' cy='16' r='1' fill='%23009688'/%3E%3Ccircle cx='60' cy='114' r='3' fill='none' stroke='%230f172a' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='114' r='1' fill='%23009688'/%3E%3Ccircle cx='230' cy='10' r='3' fill='none' stroke='%230f172a' stroke-width='1.2'/%3E%3Ccircle cx='230' cy='10' r='1' fill='%23009688'/%3E%3Ccircle cx='230' cy='134' r='3' fill='none' stroke='%230f172a' stroke-width='1.2'/%3E%3Ccircle cx='230' cy='134' r='1' fill='%23009688'/%3E%3Ccircle cx='120' cy='54' r='3' fill='none' stroke='%230f172a' stroke-width='1.2'/%3E%3Ccircle cx='120' cy='54' r='1' fill='%23009688'/%3E%3Ccircle cx='192' cy='54' r='3' fill='none' stroke='%230f172a' stroke-width='1.2'/%3E%3Ccircle cx='192' cy='54' r='1' fill='%23009688'/%3E%3C/svg%3E");
  background-size: 300px 150px;
}

[data-md-color-scheme="default"] .md-header::after {
  background: linear-gradient(90deg, transparent, rgba(0, 150, 136, 0.08), transparent);
}

[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-header__topic,
[data-md-color-scheme="default"] .hg-auth-signin,
[data-md-color-scheme="default"] .hg-auth-trigger {
  color: #0f172a !important;
}

/* Header Title & Integrated Animated Circuit Logo */
:root {
  --hg-logo-text-color: #0f172a;
  --hg-logo-chip-color: #059669;        /* Medium Hardware PCB Emerald Green for Microchip package in Light Mode */
  --hg-logo-h-color: #0f766e;           /* Deep High-Contrast Cyber Teal for 'h' trace in Light Mode */
  --hg-logo-trace-base: #94a3b8;
  --hg-logo-transition-speed: 0.4s;
}

[data-md-color-scheme="slate"] {
  --hg-logo-text-color: #f0f6fc;
  --hg-logo-chip-color: #f59e0b;        /* Neon Amber/Gold for Microchip package in Dark Mode */
  --hg-logo-h-color: #00f2fe;           /* Electric Cyan for internal 'h' trace in Dark Mode */
  --hg-logo-trace-base: #30363d;
}

.md-header__inner {
  display: flex !important;
  align-items: center !important;
  min-height: 4.5rem !important;
}

.md-header__button.md-logo {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  padding: 0 !important;
  margin-right: 0.4rem !important;
  text-decoration: none !important;
  opacity: 1 !important;
  height: auto !important;
}

.logo-container {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 3.3rem !important;
  overflow: visible !important;
}

/* Right-side stacked container for Top Row (Palette + Search) & Bottom Row (Auth) */
.hg-header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  gap: 0.2rem;
}

.hg-header-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  width: 100%;
}

/* SVG Circuit IC Microchip Badge Styling - explicitly override MkDocs SVG limits */
.md-header__button.md-logo svg,
.circuit-logo {
  height: 3.3rem !important;
  width: 3.3rem !important;
  max-height: none !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  transform: translateY(-0.02rem);
}

.chip-pins line {
  stroke: var(--hg-logo-trace-base);
  stroke-width: 3.5;
  stroke-linecap: butt;
  transition: stroke var(--hg-logo-transition-speed);
}

.chip-body {
  fill: rgba(15, 23, 42, 0.4);
  stroke: var(--hg-logo-trace-base);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: stroke var(--hg-logo-transition-speed), fill var(--hg-logo-transition-speed);
}

[data-md-color-scheme="slate"] .chip-body {
  fill: rgba(11, 15, 25, 0.7);
}

.chip-bus line,
.chip-bus path {
  stroke: var(--hg-logo-trace-base);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.6;
  transition: stroke var(--hg-logo-transition-speed), opacity var(--hg-logo-transition-speed);
}

.chip-via circle {
  fill: var(--hg-logo-trace-base);
  opacity: 0.85;
  transition: fill var(--hg-logo-transition-speed), opacity var(--hg-logo-transition-speed);
}

.chip-via-hole circle {
  fill: var(--md-default-bg-color, #ffffff);
  transition: fill var(--hg-logo-transition-speed);
}

[data-md-color-scheme="slate"] .chip-via-hole circle {
  fill: rgba(11, 15, 25, 0.95);
}

.chip-dot {
  fill: #000000 !important;
  transition: fill var(--hg-logo-transition-speed);
}

[data-md-color-scheme="slate"] .chip-dot {
  fill: #ffffff !important;
}

.trace-line {
  fill: none;
  stroke: var(--hg-logo-trace-base);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--hg-logo-transition-speed);
}

.trace-line-core {
  fill: none;
  stroke: transparent;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--hg-logo-transition-speed);
}

.node {
  fill: var(--hg-logo-trace-base);
  transition: fill var(--hg-logo-transition-speed);
}

.node-core {
  fill: transparent;
  transition: fill var(--hg-logo-transition-speed);
}

/* Animation Sequencer Fired via is-energized Class */
.logo-container.is-energized .chip-pins line,
.logo-container.is-energized .chip-bus line,
.logo-container.is-energized .chip-bus path,
.logo-container.is-energized .chip-body {
  stroke: var(--hg-logo-chip-color);
}

.logo-container.is-energized .chip-via circle {
  fill: var(--hg-logo-chip-color);
  opacity: 1;
}

.logo-container.is-energized .chip-dot {
  fill: #000000 !important;
}

[data-md-color-scheme="slate"] .logo-container.is-energized .chip-dot {
  fill: #ffffff !important;
}

.logo-container.is-energized .trace-line {
  stroke: var(--hg-logo-h-color);
  filter: url(#neon-glow);
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: energize 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.logo-container.is-energized .trace-line-core {
  stroke: #ffffff;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: energize 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

[data-md-color-scheme="default"] .logo-container.is-energized .trace-line-core {
  stroke: #ffffff;
}

.logo-container.is-energized .node {
  fill: var(--hg-logo-h-color);
  filter: url(#neon-glow);
  transition-delay: 0.6s;
}

.logo-container.is-energized .node-core {
  fill: #ffffff;
  transition-delay: 0.6s;
}

@keyframes energize {
  to { stroke-dashoffset: 0; }
}

/* Terminal Typewriter & Neon Color Settlement Effect for ackagadget.net */
.logo-text {
  display: inline-flex;
  align-items: center;
  font-family: var(--md-font-code-family, monospace);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.35;
  padding-bottom: 0.2rem;
  padding-top: 0.1rem;
  color: var(--hg-logo-h-color);
  margin-left: 0.1rem;
}

.typed-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  opacity: 0;
  color: var(--hg-logo-h-color);
}

.brand-name {
  color: var(--hg-logo-h-color);
  transition: color 0.8s ease;
}

.domain {
  color: var(--hg-logo-h-color);
  opacity: 0.9;
}

.logo-cursor {
  display: inline-block;
  width: 0.16em;
  height: 1.05em;
  background-color: var(--hg-logo-h-color);
  margin-left: 0.08em;
  opacity: 0;
  border-radius: 1px;
  box-shadow: 0 0 10px var(--hg-logo-h-color);
  flex-shrink: 0;
}

.logo-container.is-energized .typed-text {
  opacity: 1;
  animation: hg-typewriter 0.85s steps(14, end) forwards, hg-neon-settle 2.0s ease-out forwards;
  animation-delay: 0.5s, 0.5s;
}

.logo-container.is-energized .brand-name {
  animation: hg-brand-color-settle 2.0s ease-out forwards;
  animation-delay: 0.5s;
}

.logo-container.is-energized .logo-cursor {
  animation: hg-cursor-lifecycle 2.8s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes hg-typewriter {
  from { width: 0; }
  to { width: 14ch; }
}

@keyframes hg-neon-settle {
  0% {
    text-shadow: 0 0 12px var(--hg-logo-h-color), 0 0 20px var(--hg-logo-h-color);
    filter: brightness(1.25);
  }
  45% {
    text-shadow: 0 0 10px var(--hg-logo-h-color), 0 0 16px var(--hg-logo-h-color);
    filter: brightness(1.15);
  }
  100% {
    text-shadow: none;
    filter: brightness(1);
  }
}

@keyframes hg-brand-color-settle {
  0%, 45% {
    color: var(--hg-logo-h-color);
  }
  100% {
    color: var(--hg-logo-text-color);
  }
}

@keyframes hg-cursor-lifecycle {
  0%, 32% { opacity: 1; }
  40% { opacity: 0; }
  48% { opacity: 1; }
  56% { opacity: 0; }
  64% { opacity: 1; }
  72% { opacity: 0; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.md-header__title,
.md-header__title .md-header__ellipsis,
.md-header__title .md-header__topic {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.md-header__title {
  font-family: var(--md-font-text-family);
  font-weight: 800;
  font-size: 1.25rem !important;
  letter-spacing: -0.02em;
}

/* Hide static site title topic in header since animated logo includes ackagadget.net */
.md-header__title .md-header__topic:not([data-md-component="header-topic"]) {
  display: none !important;
}

/* Hide redundant site-name text in mobile drawer title; logo already shows it.
   Drawer logo is fixed at 2.4rem regardless of header breakpoints.
   Label height: top(0.2)+margin(0.2)+pad(0.4)+logo(2.4)+pad(0.4)+margin(0.2) = 3.8rem → 4.0rem. */
label.md-nav__title[for="__drawer"] {
  font-size: 0;
  height: 4.0rem !important;
}

.md-nav--primary .md-nav__title .logo-container {
  height: 2.4rem !important;
}
.md-nav--primary .md-nav__title .circuit-logo {
  height: 2.4rem !important;
  width: 2.4rem !important;
}
.md-nav--primary .md-nav__title .logo-text {
  font-size: 0.85rem !important;
}


.hg-auth-links {
  position: relative;
  z-index: 20;
  pointer-events: auto;
  padding-bottom: 0.2rem;
}

/* Search Box Polish */
.md-search__form {
  border-radius: 20px;
  transition: box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

[data-md-color-scheme="slate"] .md-search__form:focus-within {
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
}

[data-md-color-scheme="default"] .md-search__form {
  background-color: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.12);
}

[data-md-color-scheme="default"] .md-search__form:hover {
  background-color: rgba(15, 23, 42, 0.1);
}

[data-md-color-scheme="default"] .md-search__form:focus-within {
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.4);
  border-color: rgba(0, 150, 136, 0.4);
}

[data-md-color-scheme="default"] .md-search__input,
[data-md-color-scheme="default"] .md-search__icon {
  color: #0f172a !important;
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: rgba(15, 23, 42, 0.6) !important;
}

/* Top Nav Tabs (.md-tabs) Styling */
.md-tabs {
  transition: background-color 0.25s ease;
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-md-color-scheme="default"] .md-tabs {
  background-color: rgba(248, 250, 252, 0.85);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.md-tabs__link {
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.65;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: rgba(15, 23, 42, 0.7);
}

/* Hover State — High contrast glowing accent */
.md-tabs__link:hover {
  opacity: 1;
  color: var(--md-accent-fg-color) !important;
  text-shadow: 0 0 8px var(--hg-color-glow);
}

[data-md-color-scheme="default"] .md-tabs__link:hover {
  text-shadow: none;
}

/* Active State — Currently selected page */
.md-tabs__link--active {
  opacity: 1;
  color: var(--md-default-fg-color) !important;
  border-bottom-color: var(--md-accent-fg-color);
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  color: #0f172a !important;
}

/* ── Theme variables & Custom Accents ────────────────────────── */
:root {
  --hg-color-security: #7c3aed;
  --hg-color-hardware: #d97706;
  --hg-color-courses: #0d9488;
  --hg-color-contributions: #2563eb;
  --hg-color-kernel: #2563eb;
  --hg-color-blog: #16a34a;
  --hg-color-software: #e11d48;
  --hg-color-glow: rgba(0, 150, 136, 0.15);
}

[data-md-color-scheme="slate"] {
  --hg-color-security: #c084fc;
  --hg-color-hardware: #fbbf24;
  --hg-color-courses: #00f2fe;
  --hg-color-contributions: #3b82f6;
  --hg-color-kernel: #3b82f6;
  --hg-color-blog: #34d399;
  --hg-color-software: #fb7185;
  --hg-color-glow: rgba(0, 242, 254, 0.15);
}

/* Oscilloscope / Engineering Grid Background in Dark Mode */
[data-md-color-scheme="slate"] body,
[data-md-color-scheme="slate"] .md-container,
[data-md-color-scheme="slate"] .md-main {
  background-image: radial-gradient(rgba(0, 242, 254, 0.05) 1.2px, transparent 1.2px) !important;
  background-size: 24px 24px !important;
  background-attachment: fixed !important;
}

/* CAD Graph Paper / Lab Grid Background in Light Mode */
[data-md-color-scheme="default"] body,
[data-md-color-scheme="default"] .md-container,
[data-md-color-scheme="default"] .md-main {
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1.2px, transparent 1.2px) !important;
  background-size: 24px 24px !important;
  background-attachment: fixed !important;
}

/* ── Grid cards ─────────────────────────────────────────────── */

/* Elevated base — stands out from the page background with dynamic borders */
.md-typeset .grid.cards > ul > li {
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-top: 3px solid var(--md-default-fg-color--lighter);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s ease,
              opacity 0.25s ease,
              border-top-color 0.25s ease,
              filter 0.25s ease;
}

/* Category-specific card top borders at rest */
.md-typeset .grid.cards > ul > li:has(a[href*="security"]) { border-top-color: var(--hg-color-security); }
.md-typeset .grid.cards > ul > li:has(a[href*="hardware"]) { border-top-color: var(--hg-color-hardware); }
.md-typeset .grid.cards > ul > li:has(a[href*="courses"]) { border-top-color: var(--hg-color-courses); }
.md-typeset .grid.cards > ul > li:has(a[href*="contributions"]) { border-top-color: var(--hg-color-contributions); }
.md-typeset .grid.cards > ul > li:has(a[href*="blog"]) { border-top-color: var(--hg-color-blog); }
.md-typeset .grid.cards > ul > li:has(a[href*="software"]) { border-top-color: var(--hg-color-software); }

/* Category-specific icon accent colors */
.md-typeset .grid.cards > ul > li:has(a[href*="security"]) h3 .twemoji { color: var(--hg-color-security); fill: var(--hg-color-security); }
.md-typeset .grid.cards > ul > li:has(a[href*="hardware"]) h3 .twemoji { color: var(--hg-color-hardware); fill: var(--hg-color-hardware); }
.md-typeset .grid.cards > ul > li:has(a[href*="courses"]) h3 .twemoji { color: var(--hg-color-courses); fill: var(--hg-color-courses); }
.md-typeset .grid.cards > ul > li:has(a[href*="contributions"]) h3 .twemoji { color: var(--hg-color-contributions); fill: var(--hg-color-contributions); }
.md-typeset .grid.cards > ul > li:has(a[href*="blog"]) h3 .twemoji { color: var(--hg-color-blog); fill: var(--hg-color-blog); }
.md-typeset .grid.cards > ul > li:has(a[href*="software"]) h3 .twemoji { color: var(--hg-color-software); fill: var(--hg-color-software); }

/* Card title */
.md-typeset .grid.cards > ul > li h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

/* Hovered card — lift and accent with a glow effect */
.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 15px var(--hg-color-glow);
}

/* Siblings recede when one card is hovered */
.md-typeset .grid.cards > ul:has(li:hover) > li:not(:hover) {
  opacity: 0.6;
  filter: brightness(0.9);
  box-shadow: none;
}

/* Category-specific card hover borders & glow effects based on internal link targets */
.md-typeset .grid.cards > ul > li:has(a[href*="security"]):hover { border-top-color: var(--hg-color-security); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 18px var(--hg-color-security); }
.md-typeset .grid.cards > ul > li:has(a[href*="hardware"]):hover { border-top-color: var(--hg-color-hardware); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 18px var(--hg-color-hardware); }
.md-typeset .grid.cards > ul > li:has(a[href*="courses"]):hover { border-top-color: var(--hg-color-courses); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 18px var(--hg-color-courses); }
.md-typeset .grid.cards > ul > li:has(a[href*="contributions"]):hover { border-top-color: var(--hg-color-contributions); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 18px var(--hg-color-contributions); }
.md-typeset .grid.cards > ul > li:has(a[href*="blog"]):hover { border-top-color: var(--hg-color-blog); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 18px var(--hg-color-blog); }
.md-typeset .grid.cards > ul > li:has(a[href*="software"]):hover { border-top-color: var(--hg-color-software); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 18px var(--hg-color-software); }

/* ── Logo ────────────────────────────────────────────────────── */

/* Nav logo and hero logo use fill="currentColor", but <img> tags don't
   inherit CSS color — invert to white in dark mode so the logo pops. */
[data-md-color-scheme="slate"] .md-logo img,
[data-md-color-scheme="slate"] .hero-logo {
  filter: invert(1);
}

/* ── Header Auth Links ───────────────────────────────────────── */

.hg-auth-links {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.72rem;
  white-space: nowrap;
  padding: 0;
  margin: 0 auto;
  width: 100%;
}

.hg-auth-links.hg-auth--signed-out {
  justify-content: center;
}

.hg-auth-signin {
  color: var(--md-primary-bg-color);
  opacity: 0.9;
  text-decoration: none;
}
.hg-auth-signin:hover { opacity: 1; }

.hg-auth-menu {
  position: relative;
  z-index: 100;
}

.hg-auth-trigger {
  display: flex;
  align-items: center;
  gap: 0;
  background: none;
  border: none;
  padding: 0.2rem 0.4rem;
  margin: 0;
  cursor: pointer;
  color: var(--md-primary-bg-color);
  font-size: 0.68rem;
  font-family: inherit;
  line-height: inherit;
  pointer-events: auto;
}
.hg-auth-trigger:hover { opacity: 0.85; }

.hg-auth-trigger::after {
  content: '▾';
  margin-left: 0.25rem;
  opacity: 0.6;
  font-size: 0.8em;
}

.hg-auth-identity {
  color: inherit;
  opacity: 0.8;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hg-auth-flyout {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  width: auto;
  min-width: fit-content;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  overflow: hidden;
}

.hg-auth-flyout[hidden] { display: none; }

.hg-auth-flyout a {
  display: block;
  padding: 0.4rem 0.8rem;
  color: var(--md-default-fg-color);
  font-size: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}
.hg-auth-flyout a:hover {
  background: var(--md-default-fg-color--lightest);
}

/* Flex order for the full range where the hamburger is visible.
   MkDocs Material hides .md-header__button[for=__drawer] at min-width:76.25em,
   but our CSS forces the logo visible at all widths, so we must set order
   across the entire visible range — not just the narrow mobile breakpoint. */
@media screen and (max-width: 76.2343em) {
  label.md-header__button[for="__drawer"],
  .md-header__button[data-md-component="drawer"] {
    order: 1 !important;
    margin-right: 0.2rem !important;
  }

  .md-header__button.md-logo {
    order: 2 !important;
  }

  .md-header__title {
    order: 3 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .hg-header-right {
    order: 4 !important;
    flex-shrink: 0 !important;
    max-width: 50vw !important;
    margin-left: auto !important;
  }

  .hg-header-top-row {
    justify-content: flex-end !important;
    gap: 0.2rem !important;
  }

  .md-search {
    padding: 0 !important;
  }
}

@media screen and (max-width: 59.9375em) {
  .md-header__button.md-logo {
    display: flex !important;
    padding: 0.1rem 0.3rem !important;
    margin-right: 0.2rem !important;
  }

  .circuit-logo {
    height: 2.2rem !important;
    width: 2.2rem !important;
  }

  .logo-text {
    font-size: 1.1rem !important;
  }

  .hg-auth-identity {
    max-width: 8rem !important;
  }
  .hero-cyber h1 {
    font-size: 2.1rem !important;
  }
}

@media screen and (max-width: 44.9375em) {
  .circuit-logo {
    height: 1.7rem !important;
    width: 1.7rem !important;
  }

  .logo-text {
    font-size: 0.85rem !important;
  }

  .hg-header-right {
    max-width: 45vw !important;
  }

  .hg-auth-links {
    padding-bottom: 0.2rem !important;
    font-size: 0.62rem !important;
  }

  .hg-auth-identity {
    max-width: 5.5rem !important;
  }

  .hero-header {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .hero-logo {
    width: 52px !important;
    height: 52px !important;
  }

  .hero-cyber h1 {
    font-size: 1.7rem !important;
    word-break: break-word !important;
  }
}

/* Portrait phones (≤430px): hide logo text in the header — the SVG icon is
   enough at this width and the full name is still visible in the drawer title.
   This eliminates the typewriter animation reflow that was pushing the auth
   column off-screen. Tighten remaining spacing while we're here. */
@media screen and (max-width: 26.875em) {
  .md-header__button.md-logo .logo-text {
    display: none !important;
  }
  .md-header__button.md-logo {
    padding: 0.05rem 0.1rem !important;
    margin-right: 0.1rem !important;
  }
  .hg-header-right {
    margin-left: 0.2rem !important;
  }
}

/* ── Hero section (home page cyber lab aesthetic) ───────────── */

.hero-cyber {
  text-align: center;
  padding: 3.5rem 1.5rem 2.5rem;
  margin-bottom: 2rem;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 20%, rgba(0, 242, 254, 0.06), transparent 70%),
              var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* Dark mode vector CRT / Oscilloscope border for Hero */
[data-md-color-scheme="slate"] .hero-cyber {
  border: 1px solid rgba(0, 242, 254, 0.4);
  box-shadow: 0 0 18px rgba(0, 242, 254, 0.15), inset 0 0 25px rgba(0, 242, 254, 0.04);
}

/* Decorative corner reticles on hero container */
.reticle {
  position: absolute;
  font-family: var(--md-font-code-family, monospace);
  font-size: 1.1rem;
  color: var(--md-accent-fg-color);
  opacity: 0.4;
  line-height: 1;
  pointer-events: none;
}
.reticle-tl { top: 10px; left: 14px; }
.reticle-tr { top: 10px; right: 14px; }
.reticle-bl { bottom: 10px; left: 14px; }
.reticle-br { bottom: 10px; right: 14px; }

[data-md-color-scheme="slate"] .reticle {
  opacity: 0.75;
  text-shadow: 0 0 6px var(--md-accent-fg-color);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.25);
  color: var(--md-accent-fg-color);
  font-family: var(--md-font-code-family, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--md-accent-fg-color);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--md-accent-fg-color);
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0, 242, 254, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0); }
}

.hero-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.hero-logo {
  width: 64px;
  height: 64px;
  color: var(--md-accent-fg-color);
  flex-shrink: 0;
}

.hero-cyber h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--md-default-fg-color--light);
  max-width: 620px;
  margin: 0.75rem auto 1.75rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.hero-actions .md-button {
  border-radius: 6px;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-actions .md-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* ── Terminal Window Code Blocks ─────────────────────────────── */
.md-typeset .highlight,
.md-typeset pre:not(.highlight pre) {
  position: relative;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 242, 254, 0.25) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

[data-md-color-scheme="default"] .md-typeset .highlight,
[data-md-color-scheme="default"] .md-typeset pre:not(.highlight pre) {
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

.md-typeset .highlight:hover,
.md-typeset pre:not(.highlight pre):hover {
  border-color: rgba(0, 242, 254, 0.45) !important;
  box-shadow: 0 10px 30px var(--hg-color-glow) !important;
}

/* Terminal Window Header Bar with Red, Yellow, Green Window Controls */
.md-typeset .highlight::before,
.md-typeset pre:not(.highlight pre)::before {
  content: "";
  display: block;
  height: 28px;
  background-color: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-image: 
    radial-gradient(circle, #ff5f56 5px, transparent 5.5px),
    radial-gradient(circle, #ffbd2e 5px, transparent 5.5px),
    radial-gradient(circle, #27c93f 5px, transparent 5.5px);
  background-size: 14px 14px, 14px 14px, 14px 14px;
  background-position: calc(100% - 48px) 7px, calc(100% - 30px) 7px, calc(100% - 12px) 7px;
  background-repeat: no-repeat;
}

.md-typeset pre {
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
}

.md-typeset .highlight pre > code,
.md-typeset pre:not(.highlight pre) > code {
  font-family: var(--md-font-code-family) !important;
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
  padding: 0.85rem 1.15rem !important;
  display: block;
  overflow-x: auto;
}

/* ── Hardware Pinout Tables & Tags ──────────────────────────── */
.md-typeset table:not([class]) {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--md-default-fg-color--lighter);
}

.md-typeset table:not([class]) th {
  background-color: var(--md-code-bg-color);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.md-typeset .md-tag {
  border-radius: 12px;
  padding: 0.2em 0.65em;
  background: var(--hg-color-glow);
  border: 1px solid rgba(0, 242, 254, 0.2);
  color: var(--md-accent-fg-color);
  font-weight: 500;
  transition: all 0.2s ease;
}

.md-typeset .md-tag:hover {
  background: rgba(0, 242, 254, 0.25);
  transform: translateY(-1px);
}

/* ── Typography & Details Polish ─────────────────────────────── */
.md-typeset code {
  border-radius: 4px;
  padding: 0.15em 0.35em;
}

.md-typeset .admonition {
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ── Footer Navigation Links & System ───────────────────────── */
.md-footer {
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

[data-md-color-scheme="slate"] .md-footer {
  background-color: rgba(11, 15, 25, 0.9);
  border-top: 1px solid rgba(0, 242, 254, 0.2);
  box-shadow: 0 -4px 20px rgba(0, 242, 254, 0.04);
}

[data-md-color-scheme="default"] .md-footer {
  background-color: rgba(248, 250, 252, 0.95);
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  color: #475569 !important;
}

[data-md-color-scheme="default"] .md-footer-meta,
[data-md-color-scheme="default"] .md-copyright,
[data-md-color-scheme="default"] .md-copyright__highlight {
  color: #475569 !important;
}

[data-md-color-scheme="default"] .hg-footer-nav-inline a,
[data-md-color-scheme="default"] .hg-footer-nav-inline span {
  color: #0f172a !important;
}

[data-md-color-scheme="default"] .md-footer__title,
[data-md-color-scheme="default"] .md-footer__direction {
  color: #0f172a !important;
}

/* Footer Pagination Links (Previous / Next Article Buttons) */
.md-footer__link {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition: background-color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

[data-md-color-scheme="slate"] .md-footer__link {
  background-color: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-md-color-scheme="slate"] .md-footer__link:hover {
  background-color: rgba(0, 242, 254, 0.08);
  border-color: rgba(0, 242, 254, 0.3);
  transform: translateY(-2px);
}

[data-md-color-scheme="default"] .md-footer__link {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-md-color-scheme="default"] .md-footer__link:hover {
  background-color: rgba(0, 150, 136, 0.06);
  border-color: rgba(0, 150, 136, 0.3);
  transform: translateY(-2px);
}

.md-footer-meta {
  background-color: transparent !important;
}

.hg-footer-nav-inline a {
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}

.hg-footer-nav-inline a:hover {
  color: var(--md-accent-fg-color) !important;
  opacity: 1;
}

/* ── Keyboard Accessibility & High-Contrast Focus Rings ───────── */
:focus-visible {
  outline: 2px solid var(--md-accent-fg-color) !important;
  outline-offset: 3px !important;
  transition: outline-offset 0.15s ease;
}

[data-md-color-scheme="slate"] :focus-visible {
  outline-color: #00f2fe !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

[data-md-color-scheme="default"] :focus-visible {
  outline-color: #009688 !important;
  box-shadow: 0 0 8px rgba(0, 150, 136, 0.3);
}

/* Focus elevation for cards when navigating via keyboard */
.md-typeset .grid.cards > ul > li:has(:focus-visible) {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 16px var(--hg-color-glow) !important;
}