/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 21 2025 | 01:52:00 */
/* ---------- Tokens ---------- */
:root{
  --bg:#0f172a;
  --text:#0b1220;
  --muted:#64748b;
  --brand:#2563eb;
  --accent:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;

  --code-bg:#2d2d2d;      /* fallback block bg when Prism theme is transparent */
  --code-border:#2a2a2a;
  --radius:8px;
}

/* ---------- Code blocks (work with Prism) ---------- */
/* Apply our "box" look to any code block; Prism keeps syntax colors */
pre.lp-code,
pre[class*="language-"].lp-code {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--code-border);
  background: var(--code-bg);      /* Prism theme may override colors; fine */
  overflow-x: auto;
  line-height: 1.45;
  tab-size: 2;
  -webkit-font-smoothing: antialiased;
}

.lp-code code[class*="language-"]{
  background: transparent !important;
  color: inherit; /* let Prism colorize tokens */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
}

/* Optional: also prettify Prism blocks even if you forget .lp-code */
pre[class*="language-"]:not(.lp-code){
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--code-border);
  background: var(--code-bg);
  overflow-x: auto;
}

/* Inline code chips (not Prism) */
code.inline{
  background:#f8fafc;
  color:#111827;
  padding: 2px 6px;
  border-radius: 6px;
  border:1px solid #e5e7eb;
  font: 500 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ---------- Callouts ---------- */
.callout{
  margin:14px 0;
  padding:12px 14px;
  border-left:4px solid var(--brand);
  background:#f0f7ff;
  border-radius:6px;
}
.callout .title{ font-weight:700; margin-bottom:6px; }
.callout.tip{    border-color:var(--accent); background:#f0fff7; }
.callout.warn{   border-color:var(--warn);   background:#fff8e6; }
.callout.danger{ border-color:var(--danger); background:#ffefef; }

/* ---------- <details> dropdowns ---------- */
.lp-details{
  margin:12px 0;
  border:1px solid #cfe0ff;
  border-radius:6px;
  overflow:hidden;
}
.lp-details > summary{
  cursor:pointer;
  font-weight:600;
  padding:10px 12px;
  list-style:none;
  position:relative;
  background:#f0f7ff;
}
.lp-details > summary::marker{ display:none; }
.lp-details > summary::after{
  content:"▸";
  position:absolute;
  right:12px;
  transition: transform .15s ease;
}
.lp-details[open] > summary::after{
  transform: rotate(90deg);
}
.lp-details--solutions > summary{ background:#eef5ff; }
.lp-details--answers   > summary{ background:#e9ffef; border-bottom:1px solid #c9f5d6; }

.lp-details__body{ padding:10px 12px 12px; background:#ffffff; }

/* ---------- Tables ---------- */
.table-clean{
  width:100%;
  border-collapse:collapse;
  margin:12px 0;
  border:1px solid #e5e7eb;
  border-radius: var(--radius);
  overflow:hidden;
}
.table-clean th, .table-clean td{
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
}
.table-clean thead th{ background:#f8fafc; font-weight:700; }
.table-clean tr:nth-child(even) td{ background:#fafafa; }

/* ---------- Helpful scope (WP Gutenberg) ---------- */
.wp-block-code.lp-code,
.wp-block-preformatted.lp-code{
  border:1px solid var(--code-border);
  border-radius: var(--radius);
  background: var(--code-bg);
  padding:12px 14px;
}

/* ---------- Media & Layout helpers ---------- */
img, video, canvas, svg { max-width: 100%; height: auto; }
.figure { margin: 12px 0; }
.figure figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 6px; }

.lp-grid { display: grid; gap: 12px; }
.lp-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .lp-grid.cols-2, .lp-grid.cols-3 { grid-template-columns: 1fr; }
}


/* ---------- Badges & keyboard chips ---------- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid #e5e7eb; font-size: 12px; }
.kbd { font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
       padding: 2px 6px; border: 1px solid #e5e7eb; border-bottom-width: 2px; border-radius: 6px; background: #f8fafc; }

/* ---------- Accessibility & details marker fix ---------- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lp-details > summary::-webkit-details-marker { display: none; }

/* ---------- Tables: better zebra within tbody ---------- */
.table-clean tbody tr:nth-child(even) td { background: #fafafa; }



/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .callout, .lp-details, .lp-quiz { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; }
}

  table {
    width: 100%;
    border-collapse: collapse;       /* keep borders crisp */
    margin: 1em 0;
    font-size: 0.95rem;
  }

  th, td {
    border: 1px solid #d1d5db;       /* light gray border (Tailwind slate-300) */
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
  }

  thead th {
    background: #f1f5f9;             /* light slate bg for header */
    font-weight: 600;
    color: #0f172a;
  }

  tbody tr:nth-child(even) {
    background: #f9fafb;             /* zebra striping for rows */
  }

  tbody tr:hover {
    background: #f3f4f6;             /* subtle hover highlight */
  }

  table caption {
    caption-side: bottom;
    font-size: 0.85rem;
    color: #6b7280;
    padding: 6px;
  }

  /* Keep all lesson images responsive and never overflow */
  .lesson-content img,
  .wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Reusable image wrapper with optional size modifiers */
  .lp-image {
    margin: 1.25rem auto;
    text-align: center;
  }
  .lp-image img {
    width: 100%;
    max-width: 900px;   /* hard cap for giant uploads */
    border-radius: 8px;
  }
  .lp-image .caption {
    font-size: .9rem;
    color: #64748b;     /* muted slate */
    margin-top: .5rem;
  }

  /* Quick size presets you can apply per image */
  .lp-image--sm img { max-width: 420px; }
  .lp-image--md img { max-width: 680px; }
  .lp-image--lg img { max-width: 900px; }

  /* Optional: keep tall images from dominating */
  .lp-image--bounded img {
    max-height: 60vh;           /* never taller than 60% of viewport */
    object-fit: contain;        /* don’t crop; shrink to fit */
  }

  /* If you embed iframes (simulations), make them responsive too */
  .lp-iframe {
    width: 100%;
    max-width: 900px;
    height: min(70vh, 680px);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: block;
    margin: 1.25rem auto;
  }