:root{ color-scheme: light; }
*{ box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body{ background: #E6E6FA; color: #301934; font-family: Arial, Helvetica Neue, Helvetica, system-ui, sans-serif; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
/* font-weight:700 is NOT redundant. Builder ships Tailwind's preflight
   (assets/builder/reset.css), which sets h1-h6 { font-weight: inherit } —
   so headings silently inherit the body's 400 and render thin. The wireframe
   declares no weight on its headings either, but there the browser default
   (bold) applies, so it looks correct. Restoring it here is what makes the
   two match. A block that sets its own fontWeight still wins: Builder emits
   per-block class selectors, which outrank this element selector. */
h1, h2, h3, h4 { font-family: Roboto Slab, Georgia, Times New Roman, serif; font-weight: 700; margin: 0; text-wrap: balance; }
a { color: #AA0061; }
/* text-decoration only, deliberately NOT color here — "a p"/"a span" with a
   color would beat any button/link's own inline color (e.g. white text on a
   dark ghost button) by specificity, since a bare child <p>/<span> usually
   carries no color rule of its own to out-rank it. Regression found and
   fixed during QA: ghost-button and footer link text were forced pink. */
a, a p, a span, a b { text-decoration: none !important; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 3px solid #84329B; outline-offset: 2px; border-radius: 3px; }

/* Header mobile nav — pure-CSS checkbox toggle (no client script needed).
   Builder's own responsive system only has one breakpoint (max-width:576px,
   confirmed by inspecting its rendered output) and no notion of client-side
   state, so below that width the nav/CTA can't just be hidden — they need a
   real disclosure control.

   Breakpoint is 1120px, not 576px. Measured: logo 252 + six nav items 493 +
   CTA 185 + padding/gap 66 = ~996px before the row wraps. At 576px the header
   overflowed for 420px of viewport width — which is exactly what IPE reported
   on 28 Aug ("we see a hamburger", a 1440px laptop at 100% zoom lands under
   the old wireframe's 1300px rule). 1120 keeps the full row on a 1280px window
   with headroom, and collapses before anything can wrap. #gkh-nav-toggle/#gkh-burger/#gkh-nav-wrap are
   siblings inside header.py's `inner` block; ID selectors so this survives
   regardless of whatever class Builder itself generates for each block. */
#gkh-nav-toggle { display: none; }
#gkh-burger { display: none; }
@media only screen and (max-width: 1120px) {
  #gkh-header-inner { position: relative; flex-wrap: nowrap; }
  #gkh-burger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-left: auto; border-radius: 7px; cursor: pointer;
    flex-shrink: 0;
  }
  #gkh-burger:hover { background: #DEDCEA; }
  #gkh-nav-wrap {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid #BDBED2; box-shadow: 0 1px 2px rgba(48,25,52,.05), 0 8px 28px rgba(48,25,52,.08);
    padding: 6px 20px 18px; z-index: 5;
  }
  #gkh-nav-toggle:checked ~ #gkh-nav-wrap { display: flex !important; }
  #gkh-nav-wrap #gkh-nav {
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    margin-left: 0 !important; width: 100%;
  }
  #gkh-nav-wrap #gkh-nav > a, #gkh-nav-wrap #gkh-nav > span {
    width: 100%; padding: 13px 4px !important; border-bottom: 1px solid #DEDCEA;
  }
  #gkh-nav-wrap #gkh-auth { margin-left: 0 !important; margin-top: 14px !important; width: 100%; }
  #gkh-nav-wrap #gkh-auth a { display: block; text-align: center; }
}

/* Shared section "kicker" label (small uppercase caption above a heading) —
   identical style dict was previously repeated inline on 5+ blocks across
   home.py/about.py. One real CSS class here, referenced via classes=["gkh-kicker"]
   (see kicker_label() below), instead of Builder auto-generating a separate
   fb-<hash> style class per block for the same rules. */
.gkh-kicker {
  /* 13px, matching the wireframe's .k. The build had 11.5px, which made every
     kicker on the site a size small. */
  font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
  color: #AA0061; font-weight: 700; margin-bottom: 11px;
}

/* Resource detail page — video click-to-play thumbnail. Same checkbox-hack
   pattern as the mobile nav (Builder has no native disclosure block — see
   frappe-builder-development skill's global-css-and-reuse.md). Shows a
   static cover-image thumbnail with a play button until clicked, then swaps
   to the real embed — avoids ever rendering a live iframe at a size it can
   overflow, and gives a genuine click event to count a real video play. */
#gkh-preview-toggle { display: none; }
#gkh-preview-iframe-wrap { display: none; }
#gkh-preview-toggle:checked ~ #gkh-preview-iframe-wrap { display: block; }
#gkh-preview-toggle:checked ~ #gkh-preview-thumb { display: none; }
#gkh-preview-toggle:checked ~ #gkh-preview-playbtn { display: none; }

/* ── Full-screen document viewer ──────────────────────────────────────────
   IPE asked for the PDF to open across the whole screen rather than in a
   small panel, with the download and print controls in the viewer itself.
   Builder has no scripting block, so this is the same checkbox-hack the video
   preview uses: the label is the whole sidebar thumbnail, and the overlay is
   a sibling that appears when the box is checked. Escape and the close button
   both clear it (the close button is a <label> for the same input). */
#gkh-pdf-toggle { display: none; }
#gkh-pdf-overlay {
  display: none; position: fixed; inset: 0; z-index: 140;
  background: rgba(26,14,30,.88); flex-direction: column;
}
#gkh-pdf-toggle:checked ~ #gkh-pdf-overlay { display: flex; }
/* The overlay is fixed and covers the viewport, so what is behind it cannot be
   clicked. The page behind can still be scrolled with the wheel -- locking
   that needs a class on <body>, which means scripting Builder does not have.
   Noted rather than silently left as an unmet intention. */
#gkh-pdf-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; background: #301934; color: #ffffff; flex: 0 0 auto;
}
#gkh-pdf-bar .gkh-pdf-title {
  font-weight: 700; font-size: 14.5px; margin-right: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw;
}
.gkh-pdf-act {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.45); border-radius: 7px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 700; color: #ffffff;
  background: transparent; text-decoration: none; transition: background-color .16s ease;
}
.gkh-pdf-act:hover { background: rgba(255,255,255,.16); }
.gkh-pdf-act.is-primary { background: #AA0061; border-color: #AA0061; }
.gkh-pdf-act.is-primary:hover { background: #66023C; border-color: #66023C; }
#gkh-pdf-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; background: #ffffff; }
/* The sidebar thumbnail reads as a button. */
#gkh-pdf-open { display: block; cursor: pointer; position: relative; }
#gkh-pdf-open .gkh-pdf-cue {
  position: absolute; inset: auto 0 0 0; padding: 9px 12px; font-size: 12.5px;
  font-weight: 700; color: #ffffff; background: linear-gradient(0deg, rgba(30,16,34,.88), rgba(30,16,34,0));
  display: flex; align-items: center; gap: 7px;
}
@media only screen and (max-width: 640px) {
  #gkh-pdf-bar .gkh-pdf-title { display: none; }
}

/* ── Select chevron ───────────────────────────────────────────────────────
   Builder's reset.css sets appearance:none on <select> and supplies its own
   grey arrow. Any block that sets the `background` SHORTHAND resets
   background-image to none and wipes it, which is why the type and sort
   controls had no chevron at all. Those blocks now set background-COLOR, and
   the arrow is drawn here so it matches the wireframe: brand ink #301934,
   14px in from the right edge, in place of the browser's own. */
select {
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23301934' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-size: 12px 8px;
  /* The right padding that keeps a long label off the chevron lives on each
     select's own block styles, not here: a Builder class rule outranks this
     element selector, so a padding shorthand there would silently win. */
}

/* ── Hover and focus states ───────────────────────────────────────────────
   A Builder block's styles compile to one flat class rule, so :hover cannot
   be expressed there at all — the build had zero hover rules while the
   wireframe has thirty. These carry the wireframe's states across, keyed on
   the literal classes set via blk(classes=[...]). */
.gkh-cta { transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.gkh-cta:hover { background-color: #AA0061; color: #ffffff; border-color: #AA0061; }

/* Button variants, mapped one-for-one onto the wireframe's .btn rules:
   .btn (solid brand) -> --hover  ·  .btn.lt (white on the dark hero) -> #F3E8F1
   .btn.gh (ghost on dark) -> white 14%  ·  .btn.out (brand outline) -> filled. */
.gkh-btn { transition: background-color .16s ease, color .16s ease, border-color .16s ease,
                       transform .16s ease, box-shadow .16s ease; cursor: pointer; }
.gkh-btn-solid:hover  { background-color: #66023C; }
.gkh-btn-light:hover  { background-color: #F3E8F1; }
.gkh-btn-out:hover    { background-color: #AA0061; color: #ffffff; }
.gkh-btn-ghost:hover  { background-color: rgba(255,255,255,.14); }

/* Spotlight carousel arrows — wireframe .sparrow:hover */
.gkh-arrow { transition: border-color .16s ease, color .16s ease; cursor: pointer; }
.gkh-arrow:hover { border-color: #AA0061; color: #AA0061; }

/* Filter facet rows — wireframe .fo:hover darkens the label only */
.gkh-facet { transition: color .14s ease; }
.gkh-facet:hover { color: #301934; }

/* Pagination — wireframe .pg picks up the action colour on hover */
.gkh-page { transition: border-color .16s ease, color .16s ease; }
.gkh-page:hover { border-color: #AA0061; color: #AA0061; }

/* Resource and spotlight cards — wireframe .card:hover */
.gkh-card-lift { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gkh-card-lift:hover { border-color: #AA0061; transform: translateY(-2px);
                       box-shadow: 0 10px 26px rgba(48,25,52,.14); }

/* The two select controls get the same border cue as every other control */
.gkh-select { transition: border-color .16s ease, box-shadow .16s ease; cursor: pointer; }
.gkh-select:hover { border-color: #AA0061; }

/* Text inputs, so the search box behaves like its neighbouring button */
input[type="text"], input[type="search"], input[type="email"], input[type="password"] {
  transition: border-color .16s ease, box-shadow .16s ease;
}
input[type="text"]:hover, input[type="search"]:hover,
input[type="email"]:hover, input[type="password"]:hover { border-color: #AA0061; }

.gkh-navlink { transition: background-color .16s ease, color .16s ease; }
.gkh-navlink:hover { background-color: #E6E6FA; color: #301934; }

.gkh-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gkh-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(48,25,52,.22); }

.gkh-chip { transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.gkh-chip:hover { border-color: #AA0061; color: #AA0061; }

footer a { transition: color .16s ease; }
footer a:hover { color: #ffffff; }

/* ── Justified body copy ──────────────────────────────────────────────────
   IPE, 29 Aug 2026: justify the body text across the build. Applied through a
   class rather than a bare `p` rule because Builder wraps EVERY text block in
   a <p> -- button labels, nav items, chips, counters and table values
   included -- and justifying those would stretch two-word labels across their
   container.

   hyphens/-webkit-hyphens are not decoration here: justified text without
   hyphenation opens "rivers" of white space in narrow columns, which is the
   usual reason justification looks wrong on the web. lang="en" is set on the
   document, so the browser can hyphenate.

   Justification is suppressed below 640px: at phone widths a measure is short
   enough that inter-word gaps become severe even with hyphenation. */
.gkh-prose {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media only screen and (max-width: 640px) {
  .gkh-prose { text-align: left; hyphens: manual; }
}

/* Publisher logo. The mark is the whole affordance -- there is no arrow and no
   link text -- so it needs a hover cue of its own to read as clickable. */
.gkh-publogo { transition: opacity .16s ease, transform .16s ease; }
.gkh-publogo:hover { opacity: .78; transform: translateY(-1px); }

/* Inline links inside body copy (e.g. "Explore the Library" on the coming-soon
   pages) are text, not buttons, so they take an underline rather than a fill.
   Scoped to <p> so it cannot reach nav items, cards or buttons. */
/* Builder renders most copy as a text block rather than a real <p>, so the
   class is the reliable hook; the p rule stays for genuine paragraphs. */
p a, .gkh-textlink { transition: color .14s ease; }
p a:hover, .gkh-textlink:hover { text-decoration: underline; }

/* Keyboard users get the same affordance, per BRAND.md 3.4's focus ring. */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid #84329B; outline-offset: 2px;
}