/* Runtime site-chrome styles (sc-* prefixed) for the unified cross-site design.
   Implements the "Studio Home / Worksheet Page" surfaces of cross-site-mockup.html.
   These selectors override catalog.css's generic header{}, nav{}, .brand{}, footer{}
   via higher specificity ([data-site-chrome] / .sc-* classes). catalog.css is NOT
   touched. The leaderboard ad slot is filled by house-ads.js. */

:root {
  --sc-green: #177a4f;
  --sc-green-700: #12643f;
  --sc-green-800: #0e4e31;
  --sc-green-050: #e9f6ef;
  --sc-green-100: #d4ebe0;
  --sc-orange: #e8743b;
  --sc-orange-050: #fdeee3;
  --sc-ink: #13241c;
  --sc-muted: #5d6f66;
  --sc-line: #e4ece8;
  --sc-font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* Hide a chrome placeholder that is still truly empty (builder emitted no static
   fallback and JS has not filled it yet) so no blank bar flashes. A placeholder
   carrying fallback links is NOT :empty, so it still shows if JS fails. */
header[data-site-chrome]:empty,
footer[data-site-chrome]:empty,
[data-site-chrome="xsite"]:empty { display: none; }

/* ===== HEADER shell — neutralize catalog.css header{} ===== */
header[data-site-chrome] {
  display: block;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 20;
  font-family: var(--sc-font);
  -webkit-font-smoothing: antialiased;
}

/* ---- utility bar ---- */
.sc-util { background: var(--sc-green-800); color: #d4efe2; font-size: 12.5px; font-weight: 600; }
.sc-util-in {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 16px; min-height: 36px; flex-wrap: wrap;
}
.sc-util .sc-chip { white-space: nowrap; }
.sc-util-right { margin-left: auto; display: flex; gap: 18px; }
.sc-util a { text-decoration: none; color: #eafaf2; opacity: .92; }
.sc-util a:hover { opacity: 1; text-decoration: underline; }

/* ---- header row ---- */
.sc-headband { background: #fff; border-bottom: 1px solid var(--sc-line); }
.sc-head {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 14px; min-height: 76px; flex-wrap: nowrap;
}
.sc-brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; gap: 11px; }
.sc-brand img { height: 40px; width: auto; display: block; }
.sc-bmark {
  width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(145deg, var(--sc-green), var(--sc-green-700));
  color: #fff; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(18, 100, 63, .25); flex: 0 0 auto;
}
.sc-bword { font-size: 23px; font-weight: 800; letter-spacing: -.4px; color: var(--sc-green); }
.sc-bword span { color: var(--sc-orange); }

/* ---- subject nav ---- */
.sc-nav { display: flex; align-items: center; gap: 1px; flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
.sc-navlink {
  text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--sc-ink);
  padding: 9px 10px; border-radius: 9px; white-space: nowrap; cursor: pointer;
}
.sc-navlink:hover { background: var(--sc-green-050); color: var(--sc-green-700); }
.sc-navlink.current { background: var(--sc-green-050); color: var(--sc-green-700); font-weight: 800; }
/* Active subject on the creator: the app's setSection() toggles .active on the matching
   header nav link (it carries data-section), so mirror the .current highlight. */
.sc-navlink.active { background: var(--sc-green-050); color: var(--sc-green-700); font-weight: 800; }

/* ---- "More" dropdown (native <details>) ---- */
.sc-more { position: relative; }
.sc-more > summary { list-style: none; display: inline-flex; align-items: center; }
.sc-more > summary::-webkit-details-marker { display: none; }
.sc-more-sum::after { content: " \25BE"; color: #9fb3aa; font-size: 10px; margin-left: 3px; }
.sc-more[open] > summary { background: var(--sc-green-050); color: var(--sc-green-700); }
.sc-more-panel {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 214px;
  background: #fff; border: 1px solid var(--sc-line); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(14, 78, 49, .16); padding: 8px;
  display: flex; flex-direction: column; gap: 2px; z-index: 40;
}
.sc-more-panel .sc-navlink { display: block; }

/* ---- divider + Printables cross-link ---- */
.sc-nav-div { align-self: stretch; width: 1px; background: var(--sc-line); margin: 10px 7px; }
.sc-printables {
  text-decoration: none; color: #b4521f; background: var(--sc-orange-050);
  font-weight: 700; font-size: 14.5px; padding: 9px 13px; border-radius: 999px;
  border: 1px solid #f6d6c3; white-space: nowrap;
}
.sc-printables:hover { background: #fbe0d1; color: #9a4417; }

/* ---- search + CTA ---- */
.sc-search {
  margin-left: auto; width: 42px; height: 42px; border-radius: 50%;
  background: #f3f7f5; border: 1px solid var(--sc-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; text-decoration: none; color: var(--sc-muted); flex: 0 0 auto;
}
.sc-search:hover { background: var(--sc-green-050); border-color: var(--sc-green-100); }
.sc-cta {
  background: var(--sc-green); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 15px; padding: 12px 18px; border-radius: 11px;
  white-space: nowrap; box-shadow: 0 6px 16px rgba(23, 122, 79, .28); flex: 0 0 auto;
}
.sc-cta:hover { background: var(--sc-green-700); }

/* ===== cross-site leaderboard house-ad ===== */
[data-site-chrome="xsite"] { display: block; margin: 0; padding: 0; border: 0; }
.sc-adwrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; font-family: var(--sc-font); width: 100%; }
.sc-adlabel {
  font-size: 9.5px; letter-spacing: 1.6px; color: #a9b8b1; font-weight: 800;
  text-align: center; margin-bottom: 6px;
}
/* the .houad leaderboard brings its own max-width:1200/margin:auto from house-ads.css */

/* ===== FOOTER — override catalog.css footer{} ===== */
footer[data-site-chrome] {
  background: #0d1b14; color: #9fc3b2; border: 0;
  margin-top: 26px; padding: 0; text-align: left;
  font-family: var(--sc-font); -webkit-font-smoothing: antialiased;
}
.sc-foot { max-width: 1200px; margin: 0 auto; padding: 46px 24px 0; }
.sc-footgrid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.15fr; gap: 36px; padding-bottom: 32px;
}
.sc-footbrand .sc-fb { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sc-mk {
  width: 40px; height: 40px; border-radius: 11px; font-size: 15px;
  background: linear-gradient(145deg, var(--sc-green), var(--sc-green-700));
  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.sc-wd { font-size: 20px; font-weight: 800; color: #fff; }
.sc-wd span { color: var(--sc-orange); }
.sc-footbrand p { font-size: 14px; max-width: 300px; line-height: 1.65; color: #8bb3a1; margin: 0; }
.sc-footchips { display: flex; gap: 14px; margin-top: 14px; font-size: 12.5px; color: #7fa893; flex-wrap: wrap; font-weight: 600; }
.sc-footcol b { color: #fff; display: block; margin-bottom: 12px; font-size: 14px; letter-spacing: .3px; }
.sc-footcol a { color: #9fc3b2; text-decoration: none; display: block; font-size: 14px; padding: 4px 0; }
.sc-footcol a:hover { color: #fff; }
.sc-footbar {
  border-top: 1px solid #1d3327; padding: 17px 0; margin-top: 0;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: #6f9583;
}
.sc-footbar a { color: #6f9583; text-decoration: none; }
.sc-footbar a:hover { color: #9fc3b2; }
.sc-attr { margin-left: auto; }

/* ===== responsive ===== */
/* Below ~1180px the full subject row no longer fits beside brand + search + CTA,
   so collapse it (matches the mockup, which hides the nav on narrow screens). */
@media (max-width: 1180px) {
  .sc-nav, .sc-search { display: none; }
}
@media (max-width: 860px) {
  .sc-footgrid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .sc-util-right { display: none; }
  .sc-head { gap: 10px; }
  .sc-footgrid { grid-template-columns: 1fr; }
  .sc-attr { margin-left: 0; width: 100%; }
}

/* ===== expanded nav: Printables pinned to the far right of the header row ===== */
.sc-nav { flex: 1 1 auto; }
.sc-printables { margin-left: auto; }

/* ===== anti-flicker =====
   The chrome is injected by site-chrome.js after the HTML parses. Without this, the SEO
   fallback inside the placeholder flashes (old logo + button) on every full page load
   before the script swaps in the real chrome. Reserve the header height and hide the
   fallback until the script marks the header ready (data-chrome-ready). The creator ships
   an empty header (no fallback), so it just reserves space and fills in one paint. */
header[data-site-chrome] { min-height: 113px; }
header[data-site-chrome]:not([data-chrome-ready]) .header-inner { visibility: hidden; }
/* Reserve the leaderboard cross-ad slot too (filled async by house-ads.js), so the content
   below does not jump down when the header and the ad appear a beat after load. */
[data-site-chrome="xsite"] { min-height: 128px; display: flex; flex-direction: column; justify-content: center; }

/* ===== print — hide all injected chrome (catalog.css also hides header/footer) ===== */
@media print {
  header[data-site-chrome],
  footer[data-site-chrome],
  [data-site-chrome="xsite"],
  .sc-adwrap { display: none !important; }
}