/* ═══ Accessibility: Screen-reader only utility ═══ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ═══ Performance: Content-visibility for below-fold sections ═══ */
section:not(:first-child) {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Global Font System (Self-Hosted) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/DMSans-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/DMSans-Italic-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/SpaceGrotesk-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/SpaceMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/SpaceMono-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/SpaceMono-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/SpaceMono-BoldItalic.woff2') format('woff2');
}

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --accent: #CCFF00;
  /* Electric Lime */
  --accent-dark: #b8e600;
  --dark: #000000;
  --selection: rgba(204, 255, 0, 0.3);
  /* Global Font Control Variables */
  /* --- TOGGLE PRESETS BELOW (Uncomment one block, comment others) --- */

  /* === OPTION 1: FUTURE TECH (Space Grotesk + DM Sans) === */
  /* === OPTION 1: SPACE GROTESK DOMINANT (Future Tech) === */
  /* Best for: Modern SaaS, Clean & High-Impact */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* === OPTION 2: SPACE MONO DOMINANT (Engineer Mode) === */
  /* Best for: Dev Tools, Brutalist, Terminal-like */
  /*
  --font-heading: 'Space Mono', monospace;
  --font-body: 'Space Mono', monospace;
  --font-mono: 'Space Mono', monospace;
  */

  /* === OPTION 3: DM SANS DOMINANT (Modern Minimal) === */
  /* Best for: Clean, Corporate, Neutral */
  /*
  --font-heading: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  */
  /* ------------------------------------------------------------------ */

  /* Additional color variables */
  --p-50: #6B7280;
  --p-100: #1C1917;
  --p-200: #9CA3AF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::selection {
  background-color: var(--selection);
}

/* Base Global Styles - The "Switch" works here */
html {
  font-family: var(--font-body);
}

/* Ensure buttons and inputs inherit the font family */
button,
input,
textarea,
select,
optgroup {
  font-family: inherit;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 10px;
  border: 4px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
  border: 4px solid transparent;
  background-clip: padding-box;
}

/* Utility Animations */
@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes shimmer {
  0% { transform: translateX(-150%) skewX(-12deg); }
  100% { transform: translateX(250%) skewX(-12deg); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.bento-item {
  background: white;
  border-radius: 2rem;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-item:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Bold Typography */
.text-huge {
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 800;
}

/* ─── Article Content (Quill HTML Rendering) ─── */
.article-content {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #334155;
  font-weight: 450;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Headings */
.article-content h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
  margin: 1.25rem 0 0.5rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.article-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 1rem 0 0.4rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.article-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0.85rem 0 0.35rem;
  line-height: 1.4;
}

.article-content h1:first-child,
.article-content h2:first-child,
.article-content h3:first-child {
  margin-top: 0;
}

/* Paragraphs */
.article-content p {
  margin: 0 0 0.4rem;
  line-height: 1.5;
}

.article-content p:last-child {
  margin-bottom: 0;
}

/* Collapse Quill empty lines (<p><br></p>) */
.article-content p:empty,
.article-content p>br:only-child {
  display: block;
  margin: 0;
  line-height: 0.6;
}

/* Strong / Emphasis */
.article-content strong {
  font-weight: 800;
  color: #0f172a;
}

.article-content em {
  font-style: italic;
}

.article-content u {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-content s {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Links */
.article-content a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.article-content a:hover {
  color: #1d4ed8;
  border-bottom-color: #2563eb;
}

/* Blockquotes */
.article-content blockquote {
  border-left: 3px solid #CCFF00;
  background: #f8fafc;
  margin: 0.75rem 0;
  padding: 0.6rem 1rem;
  border-radius: 0 8px 8px 0;
  color: #475569;
  font-style: italic;
}

.article-content blockquote p {
  margin: 0;
}

/* Code Blocks — matching admin Quill editor */
.article-content pre,
.article-content pre.ql-syntax {
  background-color: #1e1e1e;
  color: #d4d4d4;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  overflow-x: auto;
  margin: 0.75rem 0;
  border: 1px solid #2d2d2d;
}

.article-content pre::-webkit-scrollbar {
  height: 6px;
}

.article-content pre::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

/* Inline Code */
.article-content code {
  background: #f1f5f9;
  color: #e11d48;
  padding: 0.15em 0.45em;
  border-radius: 6px;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.875em;
  font-weight: 500;
}

.article-content pre code {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* Ordered Lists */
.article-content ol {
  list-style-type: decimal;
  padding-left: 1.75rem;
  margin: 0.75rem 0 1rem;
}

.article-content ol ol {
  list-style-type: lower-alpha;
}

/* Unordered Lists */
.article-content ul {
  list-style-type: disc;
  padding-left: 1.75rem;
  margin: 0.75rem 0 1rem;
}

.article-content ul ul {
  list-style-type: circle;
}

/* List Items */
.article-content li {
  margin: 0.35rem 0;
  padding-left: 0.25rem;
  line-height: 1.7;
}

.article-content li>p {
  margin: 0;
}

/* Quill Indentation Classes */
.article-content .ql-indent-1 {
  padding-left: 2rem;
}

.article-content .ql-indent-2 {
  padding-left: 4rem;
}

.article-content .ql-indent-3 {
  padding-left: 6rem;
}

.article-content .ql-indent-4 {
  padding-left: 8rem;
}

.article-content .ql-indent-5 {
  padding-left: 10rem;
}

.article-content .ql-indent-6 {
  padding-left: 12rem;
}

.article-content .ql-indent-7 {
  padding-left: 14rem;
}

.article-content .ql-indent-8 {
  padding-left: 16rem;
}

/* Quill Alignment Classes */
.article-content .ql-align-center {
  text-align: center;
}

.article-content .ql-align-right {
  text-align: right;
}

.article-content .ql-align-justify {
  text-align: justify;
}

/* Images */
.article-content img {
  max-width: 100%;
  border-radius: 12px;
  margin: 1.25rem 0;
  height: auto;
}

/* Horizontal Rule */
.article-content hr {
  border: none;
  border-top: 2px solid #e2e8f0;
  margin: 2rem 0;
}

/* Tables (if Quill data includes any) */
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}

.article-content th,
.article-content td {
  border: 1px solid #e2e8f0;
  padding: 0.6rem 1rem;
  text-align: left;
}

.article-content th {
  background: #f8fafc;
  font-weight: 600;
  color: #0f172a;
}

.article-content tr:nth-child(even) td {
  background: #fafafa;
}

/* ─── Certificate & Spinner Animations ─── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Disable right-click and selection on certificate content */
.certificate-frame {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.certificate-frame img {
  pointer-events: none;
}

/* Print styles — hide everything except certificate when printing */
@media print {
  .cert-verify-page nav,
  .cert-verify-page footer,
  .cert-verify-page .no-print {
    display: none !important;
  }
}

/* ─── Shepherd.js Tour Animations ─── */
.shepherd-element {
  animation: shepherd-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shepherd-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.shepherd-modal-overlay-container path {
  transition: d 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Fix to perfectly center the Intro step */
.shepherd-centered-step {
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  animation: shepherd-fade-in-centered 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes shepherd-fade-in-centered {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 20px)) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Overriding Shepherd button defaults for better Tailwind-like styling */
.shepherd-button.shepherd-btn-secondary {
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
}
.shepherd-button.shepherd-btn-secondary:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.shepherd-button.shepherd-btn-primary {
  background: #4f46e5 !important;
  color: white !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1.25rem !important;
  border: none !important;
  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2) !important;
}
.shepherd-button.shepherd-btn-primary:hover {
  background: #4338ca !important;
}

/* Add breathing room between the Shepherd modal and the target element */
.shepherd-element[data-popper-placement^="bottom"],
.shepherd-element[data-floating-placement^="bottom"],
.shepherd-element[data-placement^="bottom"] {
  margin-top: 16px !important;
}
.shepherd-element[data-popper-placement^="top"],
.shepherd-element[data-floating-placement^="top"],
.shepherd-element[data-placement^="top"] {
  margin-bottom: 16px !important;
}
.shepherd-element[data-popper-placement^="left"],
.shepherd-element[data-floating-placement^="left"],
.shepherd-element[data-placement^="left"] {
  margin-right: 16px !important;
}
.shepherd-element[data-popper-placement^="right"],
.shepherd-element[data-floating-placement^="right"],
.shepherd-element[data-placement^="right"] {
  margin-left: 16px !important;
}

/* Light mode overrides for CodingOutputPanel testcases */
.light-mode-tests .bg-\[\#05080c\] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
}
.light-mode-tests .bg-\[\#0a0e14\] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.light-mode-tests .border-\[\#1e2a3a\] {
  border-color: #e2e8f0 !important;
}
.light-mode-tests .text-slate-200,
.light-mode-tests .text-slate-300 {
  color: #334155 !important;
}
.light-mode-tests .text-slate-400 {
  color: #64748b !important;
}

/* System Input / Output highlight colors in light mode */
.light-mode-tests .text-cyan-400 {
  color: #0284c7 !important; /* sky-600 */
}
.light-mode-tests .bg-cyan-900\/30 {
  background-color: #e0f2fe !important; /* sky-100 */
}
.light-mode-tests .text-emerald-400 {
  color: #059669 !important; /* emerald-600 */
}
.light-mode-tests .bg-emerald-900\/50 {
  background-color: #d1fae5 !important; /* emerald-100 */
}
.light-mode-tests .text-red-400 {
  color: #dc2626 !important; /* red-600 */
}
.light-mode-tests .bg-red-900\/50 {
  background-color: #fee2e2 !important; /* red-100 */
}