/* Redshift primer pages - layout around the Attribute Manager recreation.
   Dark, like C4D and like infernocreativestudio.com; Poppins from the site's /fonts/. */

@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Regular.ttf"); font-display: swap; }
@font-face { font-family: "PoppinsExtraBold"; src: url("/fonts/Poppins-ExtraBold.ttf"); font-display: swap; }

:root {
  --pg-bg: #111111;
  --pg-panel: #1b1b1b;
  --pg-line: #2c2c2c;
  --pg-text: #d8d8d8;
  --pg-muted: #9a9a9a;
  --pg-red: #de2222;
  --pg-red-dark: #8f110d;
  --pg-blue: #545a99;
  --pg-sans: "Poppins", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--pg-bg); color: var(--pg-text); font: 15px/1.6 var(--pg-sans); }
a { color: #fff; text-decoration: none; }
a:hover { color: var(--pg-red); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* splash */
.pg-hero { margin: 0; line-height: 0; background: #000; }
.pg-hero img { display: block; width: 100%; max-width: 1600px; height: auto; margin: 0 auto; aspect-ratio: 2172 / 724; }

/* primer nav under the splash */
.pg-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; padding: 12px 24px; border-bottom: 2px solid var(--pg-red-dark); background: #0b0b0b; }
.pg-nav a { font-size: 14px; color: var(--pg-muted); padding: 4px 0; border-bottom: 2px solid transparent; }
.pg-nav a:hover { color: #fff; }
.pg-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--pg-red); }
.pg-nav .soon { font-size: 14px; color: #555; }
.pg-nav .home { margin-left: auto; }

/* heading + search */
.pg-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; max-width: 1400px; margin: 0 auto; padding: 28px 24px 18px; }
.pg-top h1 { margin: 0; font: 32px/1.1 "PoppinsExtraBold", var(--pg-sans); color: #fff; }
.pg-top p { margin: 6px 0 0; color: var(--pg-muted); max-width: 60ch; }
.pg-search { position: relative; flex: 0 1 380px; }
.pg-search input { width: 100%; height: 42px; padding: 0 14px 0 38px; border-radius: 8px; border: 1px solid #3a3a3a; background: #1c1c1c; color: #fff; font: 15px var(--pg-sans); }
.pg-search input:focus { outline: none; border-color: var(--pg-blue); box-shadow: 0 0 0 3px rgba(84, 90, 153, 0.35); }
.pg-search svg { position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; stroke: #888; fill: none; stroke-width: 2; }
.pg-search kbd { position: absolute; right: 10px; top: 11px; padding: 0 6px; border: 1px solid #444; border-radius: 4px; color: #777; font: 12px/18px var(--pg-sans); }
.pg-results { position: absolute; z-index: 20; left: 0; right: 0; top: 46px; max-height: 60vh; overflow: auto; margin: 0; padding: 6px; list-style: none; border-radius: 8px; border: 1px solid #3a3a3a; background: #1c1c1c; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); }
.pg-results li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.pg-results li[aria-selected="true"], .pg-results li:hover { background: #3a4170; }
.pg-results .sr-label { color: #fff; }
.pg-results .sr-path { font-size: 12px; color: var(--pg-muted); }
.pg-results .sr-summary { font-size: 13px; color: #bbb; }
.pg-results mark { background: none; color: #ff6b6b; }
.pg-results .sr-none { color: var(--pg-muted); cursor: default; }

/* panel + description */
.pg-main { display: grid; grid-template-columns: 465px minmax(0, 1fr); gap: 24px; max-width: 1400px; margin: 0 auto; padding: 0 24px 40px; align-items: start; }
.pg-panel { position: sticky; top: 12px; border: 1px solid #000; border-radius: 6px; overflow: hidden; }
.pg-panel .am { width: 100%; }
.pg-panel .am-body { max-height: calc(100vh - 90px); }
.pg-desc { position: sticky; top: 12px; min-height: 300px; padding: 22px 26px; border-radius: 10px; border: 1px solid var(--pg-line); background: var(--pg-panel); }
.pg-desc .where { margin: 0 0 4px; font-size: 13px; color: var(--pg-muted); }
.pg-desc h2 { margin: 0 0 10px; font: 26px/1.2 "PoppinsExtraBold", var(--pg-sans); color: #fff; }
.pg-desc .lead { margin: 0 0 12px; font-size: 18px; color: #fff; }
.pg-desc h3 { margin: 18px 0 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-muted); }
.pg-desc dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.pg-desc dt { color: #fff; }
.pg-desc dd { margin: 0; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.pg-chips li { padding: 2px 10px; border-radius: 999px; background: #262626; font-size: 12px; color: #bbb; }
.pg-chips li.on { background: var(--pg-blue); color: #fff; }
.pg-default { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 6px; background: #262626; font-size: 13px; }
.pg-tip, .pg-wall { margin: 16px 0 0; padding: 10px 14px; border-radius: 6px; font-size: 14px; }
.pg-tip { border-left: 3px solid #777; background: #202020; }
.pg-wall { border-left: 3px solid var(--pg-red); background: #231616; }
.pg-tip strong, .pg-wall strong { color: #fff; }
.pg-empty { color: var(--pg-muted); }
.pg-empty strong { color: #fff; }

/* Basic | Advanced switch in the Render Settings panel header */
.am-head .pg-mode { flex: none; width: 150px; margin-left: auto; cursor: pointer; }
.am-head .pg-mode span { outline: none; }
.am-head .pg-mode span:focus-visible { box-shadow: inset 0 0 0 1px var(--am-accent); }

footer { max-width: 1400px; margin: 0 auto; padding: 18px 24px 40px; border-top: 1px solid var(--pg-line); font-size: 13px; color: #777; }
footer p { margin: 4px 0; }

@media (max-width: 960px) {
  .pg-main { grid-template-columns: minmax(0, 1fr); }
  .pg-panel, .pg-desc { position: static; }
  .pg-panel .am-body { max-height: 70vh; }
  .pg-nav .home { margin-left: 0; }
}

/* Narrower than the panel itself: C4D's layout is fixed-width, so let the panel scroll
   sideways inside its own box. Without this it pushes the whole page wider and the
   description text runs off the screen. */
@media (max-width: 520px) {
  /* Block flow, not grid: a grid track sizes to its widest content, so the 465px panel
     stretched the row and pushed the description off the screen. In block flow each
     child is the container's width and only the panel scrolls sideways. */
  /* The panel is fixed-width by nature, so keep its overflow off the page box entirely:
     without this the page becomes horizontally scrollable and every card sizes to that
     wider box, which cut the description text off at the screen edge. */
  html, body { overflow-x: hidden; }
  .pg-main { display: block; padding: 0 12px 32px; }
  .pg-main > * + * { margin-top: 20px; }
  .pg-panel { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pg-panel .am { width: 465px; }
  .pg-desc { padding: 18px; }
  .pg-top { padding: 20px 12px 14px; }
  .pg-top h1 { font-size: 26px; }
  .pg-nav { padding: 10px 12px; gap: 4px 16px; }
}

/* ---------------------------------------------------------------------------
   "In Redshift" callout.
   For the Photorealism guide pages: a passage discusses an effect, the callout
   says where that effect lives in Redshift and links straight to it. The primer
   pages take deep links (lights.html#Area:PARAM_ID, cameras.html#Fisheye:PARAM_ID,
   render.html#Advanced:PARAM_ID), so the link opens the panel with that exact row
   revealed and its description already showing - one click, not a treasure hunt.
   Defined here so both the primer and the mirrored guide pages share one component.
   --------------------------------------------------------------------------- */
.rs-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 22px 0;
  padding: 14px 16px 14px 14px;
  background: #3a2024;                 /* light shade of red against the dark page */
  border: 1px solid #6e2f36;
  border-left: 3px solid #e0424f;
  border-radius: 6px;
}
.rs-callout img { flex: none; width: 52px; height: auto; margin-top: 1px; }
.rs-callout .rs-callout-body { flex: 1; min-width: 0; }
.rs-callout h4 {
  margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #ff8d97;
}
.rs-callout p { margin: 0 0 6px; }
.rs-callout p:last-child { margin-bottom: 0; }
.rs-callout .rs-where { font-family: inherit; color: #ffb3ba; font-weight: 600; }
.rs-callout a { color: #ff8d97; text-decoration: underline; text-underline-offset: 2px; }
.rs-callout a:hover { color: #fff; }

@media (prefers-color-scheme: light) {
  /* The guide pages may end up on a light ground; keep the callout legible either way. */
  .rs-callout { background: #fdeced; border-color: #f0b7bc; }
  .rs-callout h4 { color: #a8202e; }
  .rs-callout .rs-where { color: #8d1b27; }
  .rs-callout a { color: #a8202e; }
  .rs-callout a:hover { color: #000; }
}

@media (max-width: 520px) {
  .rs-callout { gap: 10px; padding: 12px; }
  .rs-callout img { width: 40px; }
}

/* Collapsible "Which camera is this?" note above the panel. <details>, so it works with
   no JavaScript and the browser remembers nothing - it reopens closed on every visit,
   which is right for a note you read once. */
.pg-note {
  max-width: 1400px;
  margin: 0 auto 18px;
  padding: 0 24px;
}
.pg-note > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 12px 16px;
  border: 1px solid var(--pg-line);
  border-left: 3px solid var(--pg-red);
  border-radius: 8px;
  background: var(--pg-panel);
  cursor: pointer;
  list-style: none;
}
.pg-note > summary::-webkit-details-marker { display: none; }
.pg-note > summary::before {
  content: "";
  flex: none;
  width: 0; height: 0;
  margin-right: 2px;
  border: 5px solid transparent;
  border-left-color: var(--pg-muted);
  transform: translateY(1px);
  transition: transform 0.12s;
}
.pg-note[open] > summary::before { transform: translateY(1px) rotate(90deg); }
.pg-note > summary:hover { border-color: #555; }
.pg-note > summary:focus-visible { outline: 2px solid var(--pg-blue); outline-offset: 2px; }
.pg-note > summary h2 {
  display: inline;
  margin: 0;
  font: 20px/1.2 "PoppinsExtraBold", var(--pg-sans);
  color: #fff;
}
.pg-note-hint { font-size: 14px; color: var(--pg-muted); }
.pg-note[open] .pg-note-hint { display: none; }
.pg-note > p, .pg-note > ul {
  max-width: 90ch;
  margin: 14px 0 0;
  padding-left: 16px;
  color: var(--pg-text);
}
.pg-note > ul { padding-left: 36px; }
.pg-note > ul li { margin-bottom: 8px; }
.pg-note > :last-child { margin-bottom: 6px; }

@media (max-width: 520px) {
  .pg-note { padding: 0 12px; }
  .pg-note > summary h2 { font-size: 17px; }
}