: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; }
h1, h2, h3, h4 { font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif; 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. #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: 576px) {
  #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 {
  font-size: 11.5px; 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; }