/* ====================================================================
   SAI brand tokens
   Source: SAI Group Brand Identity, Brand Book v1.1 (rev. August 2026)

   Loaded on every page, after screen.css, so it overrides the stock
   Source theme defaults. Two jobs:
     1. Force Poppins as the single brand typeface
     2. Replace the off-brand colour values the 23 Aug 2026 audit found
   ==================================================================== */

:root {
  /* -- Typeface -----------------------------------------------------
     Brand Book: Poppins. Bold for headings, ExtraLight for
     subheadings, Regular for body copy, SemiBold for lockups,
     buttons and UI labels. */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* The stock theme lets an admin switch headings or body to a serif.
     Mapping both serif tokens to Poppins means no admin toggle can put
     the site off-brand. --font-mono is left alone: it is only used for
     code blocks, which are not brand surfaces. */
  --font-serif: var(--font-sans);
  --font-serif-alt: var(--font-sans);

  /* Ghost injects these from the admin Design panel when a custom font
     is chosen. Setting them explicitly keeps Poppins authoritative. */
  --gh-font-heading: var(--font-sans);
  --gh-font-body: var(--font-sans);

  /* -- Core palette (Brand Book v1.1, corrected quick reference) ---- */
  --sai-orange:       #EB5D3B;  /* Primary Orange   RGB 235/93/59  */
  --sai-teal:         #319FA3;  /* Secondary Teal   RGB 49/159/163 */
  --sai-highlight-1:  #CC9F2C;  /* Gold                            */
  --sai-highlight-2:  #6B7A0E;  /* Green                           */
  --sai-contrast-1:   #5D3BEB;
  --sai-contrast-2:   #3BB9EB;
  --sai-contrast-3:   #3E88ED;
  --sai-dark:         #4A4A4A;
  --sai-off-white:    #FAFAF8;
  --sai-light:        #E0E0E0;

  /* -- Derived states -----------------------------------------------
     Not in the Brand Book. Tints and shades of the approved values,
     needed for hover states, backgrounds and borders. Mixed from the
     primaries so they stay on-brand. */
  --sai-orange-dark:  #C84F32;  /* orange + 15% black, hover        */
  --sai-orange-deep:  #B0462C;  /* orange + 25% black, gradient end */
  --sai-orange-light: #FDF2EF;  /* orange + 92% white, tint         */
  --sai-orange-mid:   #F9CEC4;  /* orange + 70% white, border       */
  --sai-teal-dark:    #2A878B;
  --sai-teal-light:   #EFF7F8;
  --sai-teal-mid:     #C1E2E3;

  /* Text roles */
  --sai-text:   var(--sai-dark);  /* #4A4A4A, 8.9:1 on white */
  --sai-body:   var(--sai-dark);
  --sai-muted:  #808080;          /* dark + 30% white, 4.6:1 on white */
  --sai-border: var(--sai-light); /* #E0E0E0 */

  --sai-radius: 8px;
}

/* Ghost's accent colour is set in admin; pin it to Primary Orange so
   member/subscribe buttons and links match the rest of the site. */
:root {
  --ghost-accent-color: #EB5D3B;
}

/* Brand Book: Bold for headings. */
h1, h2, h3, h4, h5, h6,
.is-title,
.gh-article-title,
.gh-card-title {
  font-family: var(--font-sans);
  font-weight: 700;
}

/* Brand Book: ExtraLight for subheadings. Applied to the standfirst /
   excerpt under an article title, which is the subheading role on a
   blog post. */
.gh-article-excerpt {
  font-weight: 200;
}

/* Brand Book: Regular for body copy. */
body,
.is-body,
.gh-content p {
  font-family: var(--font-sans);
  font-weight: 400;
}

/* Product and feature names are always Poppins, SemiBold in lockups,
   buttons and UI labels. Wrap a product name in <span class="sai-product">
   inside a lockup to get the correct weight. In running body copy the
   name takes the weight of the surrounding text, so do not use this
   class there. */
.sai-product {
  font-family: var(--font-sans);
  font-weight: 600;
}

/* ====================================================================
   Ghost Portal floating button
   The "Join the SAI Community" pill is not part of this theme. Ghost's
   Portal script injects it as a fixed-position iframe, which is why it
   floats over the footer social icons and makes them unclickable.

   Hidden here so the overlap is fixed the moment the theme is uploaded.
   The proper fix is Ghost admin > Settings > Portal > Look & feel >
   turn off "Show portal button", which stops the script rendering it at
   all. Do that and this rule becomes a no-op safety net.

   The header still has Sign in and Subscribe, so nothing is lost.
   ==================================================================== */
iframe.gh-portal-triggerbtn-iframe,
iframe[title="portal-trigger"] {
  display: none !important;
}

/* ====================================================================
   Header navigation
   Logo left, menu beside it, primary action right. The demo request is
   the only button in the header so it reads as the action rather than
   competing with a subscribe button of equal weight.
   ==================================================================== */

/* Nudge the menu closer to the logo than the stock 100px gap so the
   links read as one group with the brand rather than floating. */
@media (min-width: 992px) {
  .gh-navigation.is-left-logo .gh-navigation-menu {
    margin-left: 32px;
    margin-right: 24px;
  }
}

.gh-navigation-members {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Sign in is secondary: plain text, no button treatment. */
.sai-nav-signin {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--sai-dark);
  text-decoration: none;
  white-space: nowrap;
}
.sai-nav-signin:hover {
  color: var(--sai-orange);
  opacity: 1;
}

/* Primary action. */
.gh-navigation .gh-button.sai-nav-cta {
  background: var(--sai-orange);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  transition: background .15s ease;
}
.gh-navigation .gh-button.sai-nav-cta:hover {
  background: var(--sai-orange-dark);
  color: #fff;
  opacity: 1;
}

/* On an accent-coloured header the stock theme inverts buttons to white.
   Keep the demo button orange there too so the action stays recognisable. */
.gh-navigation.has-accent-color .gh-button.sai-nav-cta {
  background: var(--sai-orange);
  color: #fff;
}

@media (max-width: 767px) {
  .gh-navigation-members { gap: 12px; }
  .sai-nav-signin { display: none; }
  .gh-navigation .gh-button.sai-nav-cta {
    font-size: 13.5px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ====================================================================
   Header dropdowns
   Built at runtime from Ghost's navigation settings using a
   "Parent/Child" label convention. See assets/js/sai-nav.js.
   ==================================================================== */
.sai-dropdown { position: relative; }

.sai-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.sai-dropdown__trigger:hover { color: var(--sai-orange); }

.sai-dropdown__chev { transition: transform .18s ease; opacity: .55; }
.sai-dropdown.is-open .sai-dropdown__chev { transform: rotate(180deg); opacity: 1; }
.sai-dropdown.is-open > .sai-dropdown__trigger { color: var(--sai-orange); }

.sai-dropdown__panel {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--sai-light);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}

/* Invisible bridge so the pointer can cross the gap to the panel. */
.sai-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.sai-dropdown:hover > .sai-dropdown__panel,
.sai-dropdown.is-open > .sai-dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sai-dropdown__panel li { margin: 0; }

.sai-dropdown__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--sai-dark);
  text-decoration: none;
  white-space: nowrap;
}
.sai-dropdown__panel a:hover {
  background: var(--sai-orange-light);
  color: var(--sai-orange-dark);
  opacity: 1;
}

.sai-dropdown__overview {
  font-weight: 600 !important;
  border-bottom: 1px solid var(--sai-light);
  border-radius: 6px 6px 0 0 !important;
  margin-bottom: 4px;
}

/* Mobile: the header menu becomes a full-screen panel, so dropdowns
   behave as accordions rather than floating cards. */
@media (max-width: 991px) {
  .sai-dropdown { width: 100%; }
  .sai-dropdown::after { display: none; }
  .sai-dropdown__trigger { width: 100%; justify-content: space-between; }
  .sai-dropdown__panel {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 4px 0 8px 14px;
    border-left: 2px solid var(--sai-light);
    margin: 6px 0 2px;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sai-dropdown:hover > .sai-dropdown__panel { display: none; }
  .sai-dropdown.is-open > .sai-dropdown__panel { display: block; }
  .sai-dropdown__panel a { white-space: normal; padding: 8px 4px; }
  .sai-dropdown__overview { border-bottom: 0; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sai-dropdown__panel, .sai-dropdown__chev { transition: none; }
}

/* Ghost's own nav list, kept in the DOM but hidden. The theme's overflow
   script holds a reference to it and rewrites it on resize; hidden, it
   measures zero width so the overflow branch never runs. Our menu is the
   sibling .sai-nav below. */
.gh-navigation .nav.sai-nav-original { display: none !important; }

/* Mirrors .gh-navigation .nav so the swap is invisible. */
.gh-navigation .sai-nav {
  align-items: center;
  display: inline-flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.gh-navigation .sai-nav > li > a {
  color: inherit;
  text-decoration: none;
}
.gh-navigation .sai-nav > li > a:hover { color: var(--sai-orange); opacity: 1; }

@media (max-width: 991px) {
  .gh-navigation .sai-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: normal;
    width: 100%;
  }
  .gh-navigation .sai-nav > li { width: 100%; }
  .gh-navigation .sai-nav > li > a { display: block; padding: 8px 0; }
}

/* ====================================================================
   Sticky header
   Always on. This was previously behind a theme setting, which meant a
   stored "off" value in Ghost admin could silently disable it. No
   setting now, so there is nothing to be switched off.

   --sai-nav-h is measured in sai-nav.js rather than hardcoded, because
   the header is 100px on desktop and shorter on mobile, and the logo
   image can change it. Anything that needs to sit clear of the header
   reads that variable.
   ==================================================================== */
:root { --sai-nav-h: 100px; }

.gh-navigation,
.gh-navigation.has-sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--background-color);
  /* Transparent by default so the element does not change height when
     the rule and shadow appear on scroll. */
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* The header is a flex item inside .gh-viewport (display: flex, column).
   A stretched flex item can end up with a height that leaves sticky no
   room to travel, so pin the cross-axis behaviour explicitly. */
.gh-viewport > .gh-navigation {
  align-self: stretch;
  flex: 0 0 auto;
}

.gh-navigation.is-stuck {
  border-bottom-color: var(--sai-light);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

.gh-navigation.has-accent-color {
  background-color: var(--ghost-accent-color);
}

/* position: sticky silently fails if any ancestor has an overflow value
   other than visible. Nothing in the theme sets one on these, but a
   stray overflow-x: hidden added later would break the header without
   any obvious cause, so hold them open. */
html,
body,
.gh-viewport {
  overflow-x: clip;
  overflow-y: visible;
}

/* Anchor jumps from the contents rail would otherwise land with the
   heading hidden underneath the header. */
.gh-content :is(h2, h3, h4),
.sai-takeaways {
  scroll-margin-top: calc(var(--sai-nav-h) + 24px);
}

/* When the mobile menu is open the theme takes over the whole viewport
   with position: fixed at a very high z-index, which already outranks
   the sticky rule above. Nothing to do here. */

@media (prefers-reduced-motion: reduce) {
  .gh-navigation { transition: none; }
}