/* pfAdmin subsite overrides.
   Loaded after the shared system.css. Only the accent and a couple of
   app-specific touches differ from the studio default. British English. */
:root {
  --accent: #2f6bff;         /* pfAdmin blue */
  --accent-hover: #1f5cf0;
}
@media (prefers-color-scheme: dark) {
  :root { --accent: #5a8bff; --accent-hover: #6f9bff; }
}

/* Manual theme override support */
:root[data-theme="dark"] { --accent: #5a8bff; --accent-hover: #6f9bff; }
:root[data-theme="light"] { --accent: #2f6bff; --accent-hover: #1f5cf0; }


/* Hero screenshot (replaces the old terminal mock) */
.hero-shot { display: flex; justify-content: center; align-items: center; }
.hero-shot img {
  width: min(230px, 62%);
  height: auto;
  align-self: center;   /* never let flex stretch distort the aspect ratio */
  border-radius: 28px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.20);
}
@media (prefers-color-scheme: dark) {
  .hero-shot img { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); }
}
:root[data-theme="dark"] .hero-shot img { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); }
:root[data-theme="light"] .hero-shot img { border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.20); }
/* Screenshots woven through the page (index) */
.showcase { margin: 48px auto 10px; max-width: 480px; text-align: center; }
.showcase img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.14);
}
.showcase figcaption { margin-top: 14px; font-size: 14px; opacity: 0.6; }

.feature-split {
  display: grid;
  grid-template-columns: 1fr minmax(170px, 220px);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin: 54px 0;
}
.feature-split img {
  width: 100%;
  max-width: 220px;
  height: auto;
  justify-self: center;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.14);
}
.feature-split.flip { grid-template-columns: minmax(170px, 220px) 1fr; }
.feature-split.flip img { order: -1; }
.fs-copy h3 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 10px; }
.fs-copy p { margin: 0; max-width: 44ch; }
@media (max-width: 760px) {
  .feature-split, .feature-split.flip { grid-template-columns: 1fr; gap: 22px; margin: 44px 0; }
  .feature-split img, .feature-split.flip img { order: 2; max-width: 190px; }
  .fs-copy { order: 1; }
}
@media (prefers-color-scheme: dark) {
  .showcase img, .feature-split img { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.5); }
}
:root[data-theme="dark"] .showcase img, :root[data-theme="dark"] .feature-split img { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.5); }
:root[data-theme="light"] .showcase img, :root[data-theme="light"] .feature-split img { border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.14); }