/*
  Applied JustCodeIt main stylesheet by importing the remote bundle.
  This file replaces the previous local rules and defers styling
  to https://justcodeit.fr/css/styles.css.

  If you prefer a fully local copy instead of importing remotely,
  I can expand and inline the needed module files into this file.
*/

/* Load remote JustCodeIt stylesheet */
@import url("https://justcodeit.fr/css/styles.css");

/* Force JustCodeIt-like palette and key visuals locally so the page
   looks like the original even when fonts/assets are blocked or CORS
   prevents loading remote fonts. These mirror the variables and
   major UI treatments used by justcodeit.fr. */
:root {
  --color-primary: #00ffaa;
  --color-primary-dark: #00cc88;
  --color-bg-dark: #0a0a0a;
  --color-bg-medium: #111111;
  --color-text-light: #ffffff;
  --color-text-dim: rgba(255,255,255,0.75);

  /* Map to the variables used by the rest of this file */
  --bg: var(--color-bg-dark);
  --text: var(--color-text-light);
  --muted: var(--color-text-dim);
  --card: var(--color-bg-medium);
  --border: rgba(255,255,255,0.03);
  --hr: rgba(255,255,255,0.04);
  --accent: var(--color-primary);
  --accent-2: var(--color-primary-dark);
}

/* Make header visually match the original theme (dark, translucent) */
header {
  background: linear-gradient(180deg, rgba(10,10,10,0.8), rgba(10,10,10,0.6));
  backdrop-filter: blur(6px);
}

/* Cards / features should look like dark panels */
.card, .feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  color: var(--text);
}

/* Headings and text accents */
h1, h2, h3 { color: var(--text); }
h1 { color: var(--accent); }
a { color: var(--accent); text-decoration: none; }

/* CTA button style to match gradient in source theme */
.cta a {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #00110a;
  font-weight: 700;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}

/* Ensure Font Awesome icons use the accent */
.feature i.fa, .feature i.fas, .feature .fa {
  color: var(--accent);
  font-size: 1.05rem;
}

/* Force dark background and foreground to avoid light-mode leaks */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Subtle horizontal rule matching source theme */
hr {
  border-top-color: var(--hr);
}

/* Local overrides for the Panda PWR pages (kept small and specific)
   - Use these only to adapt layout/content that the remote stylesheet
     doesn't cover or to ensure consistent display inside the docs folder.
*/
:root {
  --panda-container-w: 900px;

  /* Map local variables to the imported JustCodeIt theme variables so the
     rest of the overrides can reuse the theme palette regardless of loading order. */
  --bg: var(--color-bg-dark);
  --text: var(--color-text-light);
  --muted: var(--color-text-dim);
  --card: var(--color-bg-medium);
  --border: rgba(255,255,255,0.03);
  --hr: rgba(255,255,255,0.04);
  --accent: var(--color-primary);
  --accent-2: var(--color-primary-dark);
  --shadow: 0 8px 24px rgba(0,0,0,0.6);
  --footer-height: 72px; /* height reserved for the footer when fixed */

  --container-w: var(--panda-container-w);
  --radius: 12px;
  --pad: 1.5rem;

  --font: var(--font-ethernal), var(--font-bernhardt), var(--font-madani), "Segoe UI", Roboto, Arial, sans-serif;
  --h1: 3rem;
  --h2: 2rem;
  --base: var(--font-size-base);
  --lh: 1.5;
}

/* Ensure the page container uses a reasonable max width if remote
   stylesheet doesn't provide one for this content. This mirrors the
   original local layout intent.
*/
main, .container {
  max-width: var(--panda-container-w);
  margin: 0 auto;
  padding: 1rem;
}

/* Use flex layout: main will grow to fill available space so footer is pushed to page bottom
   without using position:fixed (footer stays in-flow and won't move with scroll). */
main {
  flex: 1 0 auto;
  max-width: var(--panda-container-w);
  margin: 0 auto;
  padding: 1rem;
}

/* fixed-footer mode reverted to in-flow footer: no reserved bottom padding */
body.fixed-footer main {
  padding-bottom: 0;
}

/* Push footer to the end of the main column by default */
footer {
  margin-top: auto;
  width: 100%;
  max-width: var(--panda-container-w);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Keep the CTA button styling consistent if remote classes are absent */
.cta a {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  text-decoration: none;
}

/* Provide fallback visuals for screenshots if not styled remotely */
.screenshots img {
  border-radius: 12px;
  width: 280px;
  object-fit: cover;
  display: inline-block;

  /* Touch / mobile improvements: ensure images receive touch events and avoid ghost clicks */
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Minor accessibility improvements */
a:focus { outline: 3px solid rgba(0,200,80,0.25); outline-offset: 3px; }

/* Centering and layout fixes specific to the Panda PWR docs pages.
   These overrides restore centered layout and ensure icons/images
   are visually centered while keeping feature text readable.
   Important: keep these overrides small so the imported theme still
   controls most visuals.
*/

/* Use flex layout so footer stays at the bottom of the page without being fixed */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override remote fixed header so our simple docs header stays in-flow */
header {
  position: static !important;
  width: 100%;
  max-width: var(--panda-container-w);
  margin: 0 auto;
  text-align: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
  background: transparent;
}

header img {
  display: block;
  margin: 0 auto 1rem;
  width: 100px;
  height: auto;
}

/* container stays centered and constrained */
.container {
  width: 100%;
  max-width: var(--panda-container-w);
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  text-align: center; /* center headings/cta while inner feature text remains left */
}

/* Features: prefer a responsive flex layout here so cards are centered */
.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.feature {
  text-align: left;
  max-width: 420px;
  flex: 1 1 320px;
  min-width: 260px;
}

/* Font Awesome icon styles used in feature headings */
.feature i.fa-solid,
.feature i.fas,
.feature .fa {
  color: var(--accent);
  margin-right: 0.6rem;
  width: 1.2em;
  text-align: center;
  font-size: 1.05rem;
  vertical-align: middle;
}

/* Ensure screenshots are centered inside their container */
.screenshots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.screenshots img {
  display: inline-block;
  margin: 0.25rem;
  border-radius: 12px;
  width: 280px;
  object-fit: cover;
}

/* CTA centered */
.cta { text-align: center; margin: 2.5rem 0; }
.cta a { display: inline-block; }

/* fixed-footer mode reverted: footer remains in-flow and appears at end of page */
body.fixed-footer footer {
  position: static;
  background: rgba(3,3,3,0.86);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.06);
  padding: 0.6rem 0;
}

/* Keep the inner content centered and limited to container width */
body.fixed-footer footer .footer-wrap {
  max-width: var(--panda-container-w);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  background: transparent;
}

/* Default footer layout (in-flow block) */
footer {
  position: static;
  width: 100%;
  max-width: var(--panda-container-w);
  margin: 0 auto;
  text-align: center;
}

/* Local fallbacks and visual tweaks to avoid relying on external fonts
   (useful when working from file:// or blocked CORS). These keep the
   layout centered and restore the intended weight/spacing of headings. */
:root {
  --font-fallback: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
}

/* Force a safe, consistent font stack when remote fonts are blocked */
html, body {
  height: 100%;
  font-family: var(--font-fallback);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings centered and tuned for this simple docs page */
h1 {
  font-size: var(--h1);
  margin: 0.25rem 0 0.5rem;
  line-height: 1.02;
  text-align: center;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-family: var(--font);
  text-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

h2 {
  font-size: var(--h2);
  margin: 2.5rem 0 0.75rem;
  text-align: center;
  color: var(--text);
  font-weight: 700;
  text-transform: none;
}

.feature h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  color: var(--text);
  font-weight: 700;
}

/* Make sure Font Awesome icons (from CDN) look correct and are aligned */
.feature i.fa-solid,
.feature i.fas,
.feature .fa {
  color: var(--accent);
  margin-right: 0.6rem;
  width: 1.2em;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1;
}

/* CTA icon spacing if we add an icon inside the CTA link */
.cta a i.fa {
  margin-right: 0.6rem;
}

/* Small screens: keep headings responsive */
@media (max-width: 480px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.4rem; }
  .screenshots img { width: 100%; max-width: 520px; }
}

/* Additional JustCodeIt-like visual refinements to make the page
   resemble the source site more closely:
   - stronger dark background and subtle radial vignette
   - larger, condensed hero heading
   - section title underline and uppercase treatment
   - feature cards with accented left border and dimmed body copy
   - deeper screenshot shadows
   - tuned spacing to match original rhythm
*/

body {
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.02), transparent 10%),
              radial-gradient(900px 400px at 90% 90%, rgba(0,0,0,0.15), transparent 8%),
              var(--bg) !important;
  color: var(--text) !important;
}

/* Hero / title tuning */
header h1 {
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
  line-height: 1;
  font-family: var(--font);
}

/* Section title style similar to justcodeit */
.section-title {
  display: inline-block;
  position: relative;
  text-transform: none;
  font-weight: 800;
  font-family: var(--font);
  color: var(--text);
  margin-bottom: 1.25rem;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}
.section-title:after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -14px;
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* Feature card visual: accent stripe + dimmed copy */
.feature {
  position: relative;
  overflow: visible;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.03));
  border-left: 6px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature:nth-child(odd) { border-left-color: rgba(0,255,170,0.06); }
.feature:nth-child(even) { border-left-color: rgba(88,166,255,0.06); }

.feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

.feature p {
  color: var(--muted);
  margin-top: 0.4rem;
}

/* Larger feature icons and tighter spacing */
.feature h3 i.fa, .feature h3 i.fas, .feature h3 .fa {
  font-size: 1.25rem;
  margin-right: 0.75rem;
  color: var(--accent);
}

/* Stronger screenshot presentation */
.screenshots img {
  box-shadow: 0 30px 60px rgba(0,0,0,0.7);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  transform-origin: center;
}

/* Fine tune CTA to match weight and spacing */
.cta a {
  font-weight: 800;
  padding: 0.9rem 1.6rem;
  font-size: 1.05rem;
  color: #00120a;
}

/* Footer dim text */
footer { color: var(--muted); }

/* Small screens adjustments to maintain rhythm */
@media (max-width: 480px) {
  .feature { padding-left: 1rem; }
  .section-title { font-size: 1.2rem; }
}

.new-feature {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 255, 170, 0.3), 0 0 30px rgba(0, 255, 170, 0.2);
}

.new-feature::before {
  content: 'NEW';
  position: absolute;
  top: 18px;
  right: -28px;
  width: 120px;
  text-align: center;
  background: var(--accent);
  color: #00120a;
  padding: 5px 0;
  font-size: 0.8rem;
  font-weight: 800;
  transform: rotate(45deg);
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* Footer layout and refined visuals (less box-like)
   Updated for a compact, modern footer:
   - single-line flex layout with subtle separators
   - aligned inline icons
   - responsive: gracefully stacks on narrow screens
   - dark rounded background with subtle glow
   - hover/underline transitions
*/
:root {
  --footer-accent: #00FF9C;     /* user-requested neon green */
  --footer-accent-2: #00e68a;
  --footer-muted: rgba(255,255,255,0.68);
  --footer-bg: rgba(5,5,5,0.52);
  --footer-radius: 12px;
  --footer-padding: 0.6rem 0.9rem;
  --footer-gap: 0.6rem;
}

/* Container that visually separates footer from page content while staying in-flow */
.footer-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--panda-container-w);
  margin: 0 auto;
  padding: var(--footer-padding);
  box-sizing: border-box;
}

/* Modern pill-like footer bar centered on the page */
.site-footer .footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--footer-gap);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), var(--footer-bg));
  border: 1px solid rgba(255,255,255,0.04);
  padding: 0.5rem 0.85rem;
  border-radius: calc(var(--footer-radius) + 6px);
  box-shadow: 0 6px 30px rgba(0,255,170,0.03), 0 4px 18px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  color: var(--footer-muted);
  font-size: 0.95rem;
  line-height: 1;
  gap: 0.75rem;
  flex-wrap: nowrap;
  align-items: center;
}

/* The inline items group (flex row). It will wrap to column on small widths */
.footer-items {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Made text and brand */
.footer-items .made {
  color: var(--footer-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Heart icon inline sizing */
.footer-items .heart-outline {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.08rem;
}

/* Brand link slightly brighter and distinct */
.footer-items .brand {
  color: var(--footer-accent);
  font-weight: 700;
  text-decoration: none;
  margin-left: 0.15rem;
  padding-right: 0.05rem;
}

/* Generic footer links */
.footer-link {
  color: var(--footer-muted);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Separator — subtle and compact */
.footer-sep {
  color: rgba(255,255,255,0.12);
  font-weight: 700;
  padding: 0 0.3rem;
  line-height: 1;
  font-size: 1rem;
  display: inline-block;
}

/* Accent certain links (e.g., support / CTA) */
.footer-link.support {
  color: var(--footer-accent);
}

/* Hover interactions: gentle color shift + animated underline */
.footer-link:hover,
.footer-items .brand:hover,
.footer-items .made:hover {
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  cursor: pointer;
}

/* Animated underline using a pseudo-element for smooth effect */
.footer-link::after,
.footer-items .brand::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--footer-accent), var(--footer-accent-2));
  width: 0%;
  transition: width .24s cubic-bezier(.2,.9,.3,1);
  margin-top: 3px;
  border-radius: 2px;
  opacity: 0.95;
}
.footer-link:hover::after,
.footer-items .brand:hover::after {
  width: 100%;
}

/* Keep icons vertically centered with text */
.footer-items i.fa,
.footer-items svg {
  vertical-align: middle;
  display: inline-block;
}

/* Subtle focus ring for accessibility */
.footer-link:focus,
.footer-items .brand:focus {
  outline: 3px solid rgba(0,255,150,0.12);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Minimal mobile behavior: switch to stacked column with breathing room */
@media (max-width: 520px) {
  .site-footer .footer-bar {
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem 0.6rem;
    border-radius: 10px;
    text-align: center;
  }
  .footer-items {
    flex-direction: column;
    gap: 0.32rem;
    white-space: normal;
  }
  .footer-sep {
    display: none; /* remove separators in stacked layout for clarity */
  }
  .footer-items .made { font-size: 0.95rem; }
  .footer-link { font-size: 0.95rem; }
}

/* Very small screens: allow wrapping but keep spacing */
@media (max-width: 360px) {
  .site-footer .footer-bar {
    padding: 0.45rem 0.45rem;
    gap: 0.4rem;
  }
  .footer-items { gap: 0.25rem; }
}

/* Accessibility: ensure color contrast for the main accent link (support) */
.footer-link.support:focus,
.footer-link.support:hover { color: #c8ffea; }

/* Heart outline pulse (ensure visible and animated in footer) */
.site-footer .heart-outline path {
  fill: none;
  stroke: #ff3b6b;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: center;
  transform-box: fill-box;
  animation: heart-pulse 1.6s ease-in-out infinite;
  stroke-opacity: 0.95;
}
@keyframes heart-pulse {
  0%   { transform: scale(1);    stroke-opacity: 0.95; }
  40%  { transform: scale(1.12); stroke-opacity: 0.6;  }
  80%  { transform: scale(1);    stroke-opacity: 0.95; }
  100% { transform: scale(1);    stroke-opacity: 0.95; }
}

/* Make privacy policy link use footer accent (green) */
.footer-link.policy,
.footer-link[href*="privacy"] {
  color: var(--footer-accent);
}
.footer-link.policy:hover,
.footer-link[href*="privacy"]:hover {
  color: #c8ffea;
}

/* hide legacy elements if still present */
.footer-wrap .credit,
.footer-badge,
.meta-info { display: none !important; }

.screenshot {
  cursor: pointer;
  transition: 0.3s;
}

.screenshot:hover {
  opacity: 0.7;
}

.lightbox {
  position: fixed;
  z-index: 2147483647 !important; /* ensure overlay sits above all page content */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* prevent page scroll while lightbox open */
  display: flex;
  align-items: center;       /* vertical centering */
  justify-content: center;   /* horizontal centering */
  background-color: rgba(0, 0, 0, 0.9);
  padding: 1rem; /* breathing room on small screens */
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

/* Ensure inner wrapper accepts pointer events and is above thumbnails */
.lightbox-inner {
  pointer-events: auto;
  z-index: 2147483648;
  position: relative;
}

.lightbox-content {
  margin: 0 auto;
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7);
}

/* Close button: keep positioned in corner with accessible hit area */
.close-lightbox {
  position: absolute;
  top: 16px;
  right: 18px;
  color: #f1f1f1;
  font-size: 36px;
  font-weight: 700;
  padding: 6px;
  line-height: 1;
  background: rgba(0,0,0,0.35);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;

  /* Ensure the close button sits above the image and is touchable on mobile */
  z-index: 2150000002 !important;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, transform .08s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}

.close-lightbox:hover,
.close-lightbox:focus {
  color: #fff;
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transform: scale(1.02);
}

/* Prev/Next: vertically centered using transform; larger hit area and clearer visuals */
.prev-lightbox,
.next-lightbox {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-weight: 700;
  font-size: 28px;          /* larger icons on desktop */
  padding: 14px 18px;       /* larger clickable area */
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  transition: background-color 0.12s ease, transform 0.12s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Raise above .lightbox-inner which uses a very large z-index */
  z-index: 2150000005 !important;
}

/* Place them near left/right edges with slight inset */
.prev-lightbox { left: 18px; border-radius: 8px; }
.next-lightbox { right: 18px; border-radius: 8px; }

.prev-lightbox:hover,
.next-lightbox:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-50%) scale(1.03);
}

/* Hide Prev/Next on desktop as requested (keep swipe navigation on mobile).
   This rule intentionally targets larger viewports so arrows remain available
   for other contexts only if needed. */
@media (min-width: 900px) {
  .prev-lightbox,
  .next-lightbox {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .lightbox {
    padding: 0.5rem;
  }
  .lightbox-content {
    max-width: 98vw;
    max-height: 82vh;
    border-radius: 8px;
  }
  .prev-lightbox, .next-lightbox {
    font-size: 22px;
    padding: 10px 12px;
  }
  .prev-lightbox { left: 8px; right: auto; }
  .next-lightbox { right: 8px; left: auto; }

  .close-lightbox {
    font-size: 32px;
    top: 10px;
    right: 12px;
    /* increase hit area on mobile */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
}

@media (min-width: 1200px) {
  .lightbox-content {
    max-width: min(1200px, 92vw);
    max-height: 92vh;
  }
  .prev-lightbox, .next-lightbox {
    font-size: 34px;
    padding: 16px 20px;
  }
}

/* Ensure the displayed image is perfectly centered both horizontally and vertically
   on larger screens by reserving horizontal padding for navigation controls and
   constraining the image size to the available center area. */
.lightbox-content {
  /* force centering inside the flex container */
  margin: 0 auto;
  align-self: center;
}

/* Desktop: ensure the image is centered in the viewport. Prev/Next are positioned
   absolutely so they don't shift the flex centering. Avoid adding horizontal
   padding on the container which would move the visual center. */
@media (min-width: 900px) {
  .lightbox {
    padding: 0; /* do not inset the flex container; keep true viewport center */
  }

  .lightbox-inner {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* so inner controls can be positioned if needed */
    box-sizing: border-box;
    pointer-events: none; /* allow clicks to fall through except on controls/image */
  }

  .lightbox-content {
    max-width: calc(100vw - 240px); /* visually reserve room, but the image stays centered in viewport */
    max-height: calc(100vh - 120px);
    pointer-events: auto;
  }

  /* Ensure controls are placed absolutely relative to page (via .lightbox) and remain interactive */
  .prev-lightbox, .next-lightbox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
  }
  .prev-lightbox { left: 24px; }
  .next-lightbox { right: 24px; }
}

/* Extra-large screens: slightly increase the reserved gutters */
@media (min-width: 1600px) {
  .lightbox {
    padding-left: 160px;
    padding-right: 160px;
  }
  .lightbox-content {
    max-width: calc(100vw - 320px);
    max-height: calc(100vh - 120px);
  }
}

/* Mobile / full-viewport fixes
   - Ensure lightbox fills the mobile viewport (use 100dvh when available)
   - Force inner wrapper to center the image vertically on mobile
   - Hide accidental duplicate controls that may be rendered inside the inner wrapper
*/
.lightbox {
  min-height: 100dvh;
  min-height: 100vh; /* fallback for browsers without dvh support */
}

.lightbox-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: auto;
}

  /* Make sure the visible controls are the ones positioned as direct children of .lightbox
   * and hide any duplicates nested inside .lightbox-inner */
  @media (max-width: 520px) {
    .lightbox {
      min-height: 100dvh;
    }

    .lightbox-inner {
      height: 100dvh;
    }

    /* Hide prev/next if they exist inside the inner wrapper (protect against duplicates) */
    .lightbox .lightbox-inner .prev-lightbox,
    .lightbox .lightbox-inner .next-lightbox {
      display: none !important;
    }

    /* Ensure the primary controls (direct children of .lightbox) are hidden on mobile to rely on swipe */
    .lightbox > .prev-lightbox,
    .lightbox > .next-lightbox {
      display: none !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }

    /* Slightly reduce the image max height on small screens to account for browser UI */
    .lightbox-content {
      max-height: calc(100vh - 96px);
      max-width: calc(100vw - 72px);

      /* Ensure controls on mobile aren't blocked by the image */
      pointer-events: none; /* image itself doesn't intercept touches on mobile; controls remain interactive */
    }
  }

/* Extra safeguard for any odd stacking contexts */
.lightbox,
.lightbox-inner,
.lightbox-content,
.lightbox > .prev-lightbox,
.lightbox > .next-lightbox {
  -webkit-transform: none !important;
  transform: none !important;
}

/* Play/Pause control styling */
.play-lightbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2150000003;
  background: rgba(0,0,0,0.55);
  border: none;
  color: #fff;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.play-lightbox:hover,
.play-lightbox:focus {
  background: rgba(255,255,255,0.06);
  transform: translate(-50%, -50%) scale(1.03);
  outline: none;
}

/* Indicators (dots) container placed at bottom-center of the lightbox-inner */
.lightbox-indicators {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2150000001;
  pointer-events: auto;
}

/* Active dot visual */
.lightbox-dot.active {
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* Ensure dots are keyboard-focusable and visible */
.lightbox-dot:focus {
  outline: 3px solid rgba(0,255,170,0.12);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Responsive adjustments: move Play to bottom on small screens so it doesn't obscure content */
@media (max-width: 520px) {
  /* Remove Play button entirely on mobile as requested */
  .play-lightbox {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Place indicators where the Play button used to be */
  .lightbox-indicators {
    bottom: 18px;
  }

  .lightbox-indicators .lightbox-dot {
    width: 10px !important;
    height: 10px !important;
  }
}

/* Local fix: force footer to remain in-flow and visible
   This overrides remote/third-party rules that may set fixed/absolute positioning
   or transforms that push the footer out of the viewport. This is intentionally
   specific and non-destructive; if it isn't needed we can roll it back easily.
*/
:root {
  --panda-footer-override: 1;
}

html, body {
  height: 100%;
}

body {
  /* reinforce sticky-footer flex layout in case an imported stylesheet changed it */
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

main {
  flex: 1 0 auto !important;
}

/* Ensure footer is in-flow and not removed by fixed/absolute rules */
footer,
.site-footer {
  position: relative !important;
  z-index: 6 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* Allow footer-bar to wrap on narrow widths to avoid overflow pushing the footer */
.site-footer .footer-bar {
  flex-wrap: wrap !important;
}

/* Mobile-specific safety */
@media (max-width: 520px) {
  .site-footer .footer-bar {
    flex-direction: column !important;
  }
  .footer-items {
    white-space: normal !important;
  }
}