/* Guide-specific styles layered on top of the shared docs styles.css. */

/* ── Screenshot figures ────────────────────────────────────── */
.prose figure.shot {
  margin: 1.75rem 0; /* left-aligned within the reading column */
  max-width: 720px; /* keep desktop captures a comfortable reading width */
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-code, #f8fafc);
}
/* Phone captures are ~390px native — show them phone-sized, not stretched. */
.prose figure.shot--mobile {
  max-width: 300px;
}
.prose figure.shot .shot-frame {
  position: relative;
  display: block;
  line-height: 0;
}
.prose figure.shot img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}
.prose figure.shot--placeholder img {
  cursor: default;
}

/* Hover affordance — a dim mask + magnifier icon so it reads as clickable.
   Not shown on placeholders. Pointer-events off so the click reaches the img. */
.prose figure.shot:not(.shot--placeholder) .shot-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  background:
    rgba(15, 23, 42, 0.3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
    center / 44px no-repeat;
}
.prose figure.shot:not(.shot--placeholder):hover .shot-frame::after {
  opacity: 1;
}

/* Brand logo (Glamvoo mark) in the sidebar header. */
.brand .brand-logo {
  display: inline-flex;
  align-items: center;
  color: #1f2937; /* Glamvoo wordmark is monochrome (currentColor) */
}
:root[data-theme='dark'] .brand .brand-logo {
  color: #e5e7eb;
}
.brand .brand-logo svg {
  display: block;
}

/* Lightbox — click a real screenshot to view it full width. */
.shot-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5vmin;
  background: rgba(2, 6, 23, 0.82);
  cursor: zoom-out;
}
.shot-lightbox img {
  max-width: 96vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.prose figure.shot figcaption {
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Placeholder state — clearly not a real screenshot yet. */
.prose figure.shot--placeholder {
  border-style: dashed;
}
.prose figure.shot--placeholder img {
  padding: 2.5rem 1rem;
  opacity: 0.9;
}
.shot-pending {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
:root[data-theme='dark'] .shot-pending {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
}
.prose .shot--missing {
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  border: 1px dashed #ef4444;
  border-radius: 10px;
  color: #b91c1c;
  font-size: 0.9rem;
}

/* ── Language switcher (content header) ────────────────────── */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}
.lang-switcher a,
.lang-switcher .lang-current {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.4;
}
.lang-switcher a {
  color: var(--text-muted, #6b7280);
  border: 1px solid transparent;
}
.lang-switcher a:hover {
  color: var(--text, #111827);
  background: var(--bg-hover, #f3f4f6);
}
.lang-switcher .lang-current {
  color: var(--accent, #465fff);
  font-weight: 600;
  border: 1px solid var(--accent, #465fff);
}

/* Push the switcher left, keep theme toggle on the right. */
.content-head {
  justify-content: space-between;
}