/*********************************************************
  FIDO — Sage/Grey UI polish for APEX Universal Theme
  (place as the LAST CSS file so it wins the cascade)
**********************************************************/

/* --------- Theme Tokens (tweak here) --------- */
:root{
  --fido-text:            #374151;   /* slate */
  --fido-text-strong:     #1f2937;   /* darker slate */
  --fido-pill:            #e3f2ed;   /* pale sage */
  --fido-pill-active:     #d1e7dd;   /* muted sage */
  --fido-underline:       #6ba292;   /* sage line */
  --fido-underline-strong:#4f7c66;   /* darker sage line */
  --fido-radius:          10px;
  --fido-caret-size:      .75rem;
}

/* =======================================================
   HEADER (branding strip)
======================================================= */
.t-Header,
.t-Header-branding,
.t-Header-branding .t-Header-logo,
.t-Header-branding .t-Header-controls{
  background: #f7faf9 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.t-Header{ padding:6px 16px !important; min-height:48px !important; }
.t-Header-logo, .t-Header-logo a{
  color: var(--fido-text) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
}

/* Top-right nav buttons (Application Settings, Logout, etc.) */
.t-NavigationBar-item a, .t-NavigationBar-item .t-Icon{
  color: var(--fido-text) !important;
  font-size: .95rem !important;
  font-weight: 500;
  opacity: .9;
}
.t-NavigationBar-item a:hover,
.t-NavigationBar-item a:focus,
.t-NavigationBar-item .t-Icon:hover{
  color: var(--fido-text-strong) !important;
  opacity: 1;
}
.t-Button--header.t-Button--navBar{
  color: var(--fido-text) !important;
  background: transparent !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: none !important;
  transition: color .2s, background .2s;
}
.t-Button--header.t-Button--navBar:hover,
.t-Button--header.t-Button--navBar:focus{
  color: var(--fido-text-strong) !important;
  background: var(--fido-pill) !important;
  border-radius: 6px;
}
.t-Button--header.t-Button--navBar.is-active,
.t-Button--header.t-Button--navBar:active{
  color: #111827 !important;
  background: var(--fido-pill-active) !important;
  font-weight: 600 !important;
}

/* =======================================================
   TOP MENUBAR (Home, Children, Registration, …)
======================================================= */

/* Neutral background + no UT shadows/bands */
.t-Header-nav,
.t-Header-nav .a-MenuBar,
.t-Header-nav .a-MenuBar-items{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Override UT menubar variables so it never paints dark bands */
.t-Header-nav{
  --ut-header-menubar-item-current-background-color: transparent;
  --ut-header-menubar-item-hover-background-color:   transparent;
  --ut-header-menubar-item-current-text-color:       var(--fido-text-strong);
  --ut-header-menubar-item-hover-text-color:         var(--fido-text-strong);

  --a-menubar-item-text-color:                       var(--fido-text);
  --a-menubar-item-current-text-color:               var(--fido-text-strong);
  --a-menubar-item-hover-text-color:                 var(--fido-text-strong);
}

/* Reset the item wrapper in ALL states (kills black bars) */
.t-Header-nav .a-MenuBar .a-MenuBar-item,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-hover,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-focused,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-expanded,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-current,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-active,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-selected{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.t-Header-nav .a-MenuBar .a-MenuBar-item::before,
.t-Header-nav .a-MenuBar .a-MenuBar-item::after{ content:none !important; }

/* Label styling */
.t-Header-nav .a-MenuBar-item > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item > a.a-MenuBar-label{
  position: relative;
  color: var(--fido-text) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border-radius: var(--fido-radius);
  transition: color .2s ease, background .2s ease;
}

/* Hover/focus pill */
.t-Header-nav .a-MenuBar-item.is-hover > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-focused > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item > .a-MenuBar-label:hover{
  color: var(--fido-text-strong) !important;
  background: var(--fido-pill) !important;
}

/* Active/current pill */
.t-Header-nav .a-MenuBar-item.is-active   > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-current  > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-selected > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-expanded > .a-MenuBar-label{
  color: var(--fido-text-strong) !important;
  background: var(--fido-pill-active) !important;
  font-weight: 600 !important;
}

/* Underline animation */
.t-Header-nav .a-MenuBar-item > .a-MenuBar-label::after{
  content:"";
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:0; height:2px; background:var(--fido-underline); transition:width .25s ease;
}
.t-Header-nav .a-MenuBar-item:hover   > .a-MenuBar-label::after{ width:60%; }
.t-Header-nav .a-MenuBar-item.is-active   > .a-MenuBar-label::after,
.t-Header-nav .a-MenuBar-item.is-current  > .a-MenuBar-label::after,
.t-Header-nav .a-MenuBar-item.is-selected > .a-MenuBar-label::after{
  width:60%; background:var(--fido-underline-strong);
}

/* Keep the little caret cell transparent */
.t-Header-nav .a-Menu-subMenuCol,
.t-Header-nav .a-MenuBar-item.is-hover    .a-Menu-subMenuCol,
.t-Header-nav .a-MenuBar-item.is-expanded .a-Menu-subMenuCol{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =======================================================
   CARETS (replace UT block glyphs)
======================================================= */

/* Neutralise UT icon glyph everywhere */
.a-Icon.icon-menu-drop-down{
  font-size:0 !important;
  color:transparent !important;
  background:none !important;
  border:0 !important;
  line-height:1;
}

/* Top menubar caret: ▼ */
.t-Header-nav .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  content:"▾";
  font-size: var(--fido-caret-size);
  color: var(--fido-text);
  vertical-align: middle;
  transition: color .2s ease;
}
.t-Header-nav .a-MenuBar-item.is-hover .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before,
.t-Header-nav .a-MenuBar-item.is-focused .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  color: var(--fido-text-strong);
}

/* Dropdown menu caret: ▶ turns ▼ when expanded */
.a-Menu .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  content:"▸";
  font-size: calc(var(--fido-caret-size) - .05rem);
  color: var(--fido-text);
  vertical-align: middle;
  transition: transform .2s ease, color .2s ease;
}
.a-Menu-item[aria-expanded="true"] .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  transform: rotate(90deg);
  color: var(--fido-text-strong);
}

/* Remove any top “callout” band on the dropdown panel */
.a-Menu.a-Menu--top,
.a-Menu.a-Menu--top .a-Menu-content{ background-image:none !important; border-top:0 !important; }
.a-Menu.a-Menu--top::before,
.a-Menu.a-Menu--top::after,
.a-Menu.a-Menu--top .a-Menu-content::before,
.a-Menu.a-Menu--top .a-Menu-content::after{ content:none !important; }

/* =======================================================
   FINAL SAFETY: readable current tab in every state
======================================================= */
.t-Header-nav .a-MenuBar .a-MenuBar-item:not(.is-disabled){ opacity:1 !important; filter:none !important; }
.t-Header-nav .a-MenuBar .a-MenuBar-item > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item > a.a-MenuBar-label{
  -webkit-text-fill-color: var(--fido-text) !important;
}
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-current  > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-active   > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-selected > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-expanded > .a-MenuBar-label{
  -webkit-text-fill-color: var(--fido-text-strong) !important;
}
/* Remove vertical separators between top menu items */
.t-Header-nav{
  --a-menubar-item-border-width: 0px !important;
  --a-menubar-item-border-color: transparent !important;
  --a-menubar-item-split-border-width: 0px !important;   /* safety */
  --a-menubar-item-split-border-color: transparent !important;
}

/* Belt & braces in case a theme hard-codes borders */
.t-Header-nav .a-MenuBar .a-MenuBar-item{
  border: 0 !important;
  border-inline-start: 0 !important;
  border-inline-end: 0 !important;
  box-shadow: none !important;   /* some skins draw the separator as an inset shadow */
  margin-inline-start: 0 !important;  /* neutralise the -1px offset used when borders exist */
}
/* ================================================================
   SmartNursery — Invoicing Theme (Pastel Palette)
   ================================================================
   
   Colour palette derived from existing FIDO dashboard cards:
   
   Primary (teal/mint):   #7ecac1 / bg: #e8f6f4
   Secondary (green):     #8cc63f / bg: #edf7e1
   Accent (rose/pink):    #d4a0a0 / bg: #faf0f0
   Info (lavender):       #a8b5d6 / bg: #eef1f8
   Warning (gold):        #d4c36a / bg: #faf6e4
   Purple:                #b8a9d4 / bg: #f3eff8
   
   Text:                  #4a4a4a (dark grey, not black)
   Text secondary:        #777777
   Borders:               #e8e8e8
   Background:            #f9fafb
   White cards:           #ffffff
   
   ================================================================ */

/* ================================================================
   SHARED ACROSS ALL INVOICING PAGES
   Add to Application > Shared Components > User Interface > CSS
   or paste into each page's Inline CSS
   ================================================================ */

/* -- Selection Bar (replaces navy gradient) -- */
.sn-selection-bar {
    background: linear-gradient(135deg, #7ecac1 0%, #5bb8ad 100%);
    border-radius: 12px;
    padding: 20px 28px;
    box-shadow: 0 4px 16px rgba(126, 202, 193, 0.25);
    color: #fff;
    margin-bottom: 16px;
}
.sn-selection-bar .t-Form-label {
    color: rgba(255,255,255,0.9);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* -- Funding Info Cards -- */
.sn-funding-cards {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}
.sn-funding-card {
    flex: 1;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.25);
}
.sn-funding-card-label {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.sn-funding-card-value {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

/* -- Alternative: Cards on light background -- */
.sn-funding-card--light {
    flex: 1;
    background: #e8f6f4;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    border: 1px solid #cce8e4;
}
.sn-funding-card--light .sn-funding-card-label {
    color: #5bb8ad;
}
.sn-funding-card--light .sn-funding-card-value {
    color: #3a8a80;
}

/* -- Pattern Grid -- */
.sn-pattern-grid {
    background: #fff;
    border-radius: 12px;
    padding: 16px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e8e8e8;
}
.sn-pattern-grid .t-Form-fieldContainer {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 0;
}
.sn-pattern-grid .t-Form-label {
    font-weight: 600;
    color: #4a4a4a;
    font-size: 14px;
}
.sn-pattern-grid .apex-item-text {
    width: 90px !important;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    padding: 6px;
    transition: border-color 0.2s;
}
.sn-pattern-grid .apex-item-text:focus {
    border-color: #7ecac1;
    box-shadow: 0 0 0 3px rgba(126, 202, 193, 0.15);
}

/* -- Breakdown Table -- */
.sn-breakdown .t-Report-report {
    border-radius: 8px;
    overflow: hidden;
}
.sn-breakdown .t-Report-report thead th {
    background: #4a4a4a;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 12px;
}
.sn-breakdown .t-Report-report tbody td {
    padding: 8px 12px;
    font-size: 13px;
    color: #4a4a4a;
    border-bottom: 1px solid #f0f0f0;
}

/* -- Weekly Total Banner -- */
.sn-weekly-total {
    background: linear-gradient(135deg, #8cc63f 0%, #6ba830 100%);
    border-radius: 12px;
    padding: 16px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 16px rgba(140, 198, 63, 0.25);
}
.sn-weekly-total-label {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sn-weekly-total-amount {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    font-family: 'Courier New', monospace;
}

/* -- Save / Action Buttons -- */
.sn-save-btn .t-Button,
.sn-generate-btn .t-Button {
    background: linear-gradient(135deg, #7ecac1 0%, #5bb8ad 100%);
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(126, 202, 193, 0.3);
    transition: all 0.2s ease;
    color: #fff;
}
.sn-save-btn .t-Button:hover,
.sn-generate-btn .t-Button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(126, 202, 193, 0.4);
}

/* -- Invoice Preview -- */
.sn-invoice-preview {
    background: #fff;
    border-radius: 12px;
    padding: 32px 40px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    border: 1px solid #e8e8e8;
    max-width: 800px;
    margin-top: 16px;
    font-family: 'Georgia', serif;
}
.sn-invoice-preview-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 3px solid #8cc63f;
}
.sn-invoice-preview-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #b8ddb3 0%, #6ba830 100%);
    border-radius: 50%;
    flex-shrink: 0;
}
.sn-invoice-preview-org h2 {
    margin: 0 0 4px 0;
    color: #5bb8ad;
    font-size: 24px;
    font-weight: 700;
}
.sn-invoice-preview-org p {
    margin: 0;
    color: #777;
    font-size: 13px;
    line-height: 1.4;
}

.sn-inv-title {
    font-size: 20px;
    font-weight: 700;
    color: #4a4a4a;
    margin: 16px 0;
}
.sn-inv-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 13px;
    color: #777;
}
.sn-inv-to {
    margin-bottom: 16px;
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.6;
}
.sn-inv-child {
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 20px;
}
.sn-inv-charges-title {
    color: #5bb8ad;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    border-bottom: 2px solid #7ecac1;
    padding-bottom: 6px;
}

.sn-inv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 20px;
}
.sn-inv-table td {
    padding: 8px 4px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}
.sn-inv-table td:nth-child(2),
.sn-inv-table td:nth-child(3),
.sn-inv-table td:nth-child(4) {
    text-align: right;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}
.sn-inv-table tr.sn-inv-total td {
    border-top: 2px solid #4a4a4a;
    border-bottom: none;
    font-weight: 700;
    font-size: 16px;
    padding-top: 12px;
}
.sn-inv-footer {
    margin-top: 24px;
    font-size: 12px;
    font-style: italic;
    color: #999;
    line-height: 1.6;
}
.sn-inv-company {
    margin-top: 40px;
    font-size: 11px;
    color: #bbb;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
}

/* -- Status Badges (Invoice Listing) -- */
.sn-status-draft {
    display: inline-block;
    background: #d4c36a;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.sn-status-issued {
    display: inline-block;
    background: #7ecac1;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.sn-status-paid {
    display: inline-block;
    background: #8cc63f;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.sn-status-overdue {
    display: inline-block;
    background: #d4a0a0;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* -- Funding Type Badges -- */
.sn-badge-30hr {
    display: inline-block;
    background: #8cc63f;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}
.sn-badge-15hr {
    display: inline-block;
    background: #7ecac1;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}
.sn-badge-none {
    display: inline-block;
    background: #bbb;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

/* -- Amount Display -- */
.sn-amount {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    color: #3a8a80;
}
.sn-hrs {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    color: #5bb8ad;
}

/* -- Setup Page Header -- */
.sn-setup-header {
    background: linear-gradient(135deg, #7ecac1 0%, #5bb8ad 100%);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(126, 202, 193, 0.25);
    color: #fff;
}
.sn-setup-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

/* -- Calculated Hours Display (Child Funding form) -- */
.sn-calc-hours {
    background: linear-gradient(135deg, #7ecac1 0%, #5bb8ad 100%);
    border-radius: 10px;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    max-width: 700px;
}
.sn-calc-hours-label {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sn-calc-hours-value {
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    font-family: 'Courier New', monospace;
}

/* -- Invoice Created Banner -- */
.sn-invoice-created {
    background: linear-gradient(135deg, #8cc63f 0%, #6ba830 100%);
    border-radius: 12px;
    padding: 20px 28px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* -- General Form Styling -- */
.sn-gen-form,
.sn-cf-form {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e8e8e8;
    max-width: 700px;
}
.sn-gen-form .t-Form-label,
.sn-cf-form .t-Form-label {
    font-weight: 600;
    color: var(--fido-text); 
}

/* ===== Marquee ticker (P90 room register & reusable) ===== */
@keyframes marquee-scroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ===== Setting identity banner (which nursery am I looking at?) ==========
   Staff who work across settings kept losing track of which one was on
   screen. --sn-brand / --sn-brand-text are written inline on <html> by the
   global page from P0_BRAND_COLOUR / P0_BRAND_TEXT_COLOUR; the fallbacks here
   match constants_pkg.gc_default_brand_colour so the bar still renders if
   session state is empty.

   The colour is reinforcement only - the setting name and site code are in
   the bar as text for anyone who cannot tell the colours apart. Deliberately
   scoped to the header chrome: pages 90 and 224 use red/amber/green to mean
   ratio status, and tinting the page body would compete with that. */
:root{
  --sn-brand:      #E2E5E9;   /* = constants_pkg.gc_default_brand_colour */
  --sn-brand-text: #1a202c;   /* = constants_pkg.gc_brand_text_dark      */
}

.sn-site-banner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  background: var(--sn-brand);
  color: var(--sn-brand-text);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .02em;

}

/* Sticky, because the whole point is knowing which setting you are in at the
   moment you act - and on a long register or ratio page you act after
   scrolling.

   IMPORTANT - this goes on #navigation_bar_custom_items, NOT on the banner:

   The banner region is a sub-region of the existing search-bar region, so the
   DOM chain is
       .sn-site-banner -> R<generated> -> col -> row -> container
                       -> #navigation_bar_custom_items -> form#wwvFlowForm
   and the measured heights are 29, 29, 29, 29, 70, 70, 2381.

   A sticky element is confined to its parent's box, so it can only travel as
   far as the parent is tall. Everything up to and including the container is
   the same 29-70px as the banner itself - sticking any of those gives it
   nowhere to go and looks exactly like sticky doing nothing. The first
   ancestor with real height is the form, so its direct child
   (#navigation_bar_custom_items) is the only element that can usefully stick.

   This pins the universal search bar along with the banner - they are one
   block. That is WANTED, not a side effect: having to scroll back to the top
   to search was a long-standing annoyance. Do not "tidy" this by lifting the
   banner into its own region - that would unpin the search bar.

   --sn-banner-top MUST clear .t-Header, which is itself position:sticky at
   top:0 with z-index 800 and was measured at 108px. Pinning this block at
   top:0 puts it exactly underneath the header and completely out of sight -
   which looks identical to sticky not working, and cost a long debug once.
   The 108px here is only a pre-JS fallback; sn-banner-top is re-measured at
   runtime (see 3e in docs/deploy_brand_colour_apex.md) because the header
   changes height when the menu wraps on narrow screens. */
#navigation_bar_custom_items{
  position: sticky;
  top: var(--sn-banner-top, 108px);
  /* Above page content, deliberately below modal dialogs (~1000+) so it never
     floats over a dialog. */
  z-index: 500;
  /* Opaque, or page content scrolls visibly through the pinned block. Matches
     the .t-Header background set above. */
  background: #f7faf9;
}

.sn-site-banner-code{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 4px;
  /* Sits on the brand colour, so tint from the text colour rather than a
     fixed white - keeps contrast on both light and dark brand colours.
     Plain rgba first for browsers without color-mix. It is a dark tint because
     every colour in the current pastel palette resolves to dark text; a light
     brand colour would still work through the color-mix line below. */
  background: rgba(0,0,0,.10);
  background: color-mix(in srgb, var(--sn-brand-text) 22%, transparent);
}

/* site_code is only populated for some settings - collapse the chip rather
   than render an empty box for the rest. */
.sn-site-banner-code:empty{
  display: none;
}

.sn-site-banner-name{
  font-weight: 700;
}

/* The 4px accent under the header ties the banner to the rest of the chrome
   without recolouring the nav itself (which would fight the sage palette). */
.t-Header{
  border-bottom: 4px solid var(--sn-brand);
}

@media (max-width: 640px){
  .sn-site-banner{ padding: 3px 10px; font-size: 12px; }
  .sn-site-banner-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media print{
  .sn-site-banner{ display: none; }
}