/* =====================================================================
   NORTHBRIDGE UNIVERSITY — Canvas Catalog custom CSS  (v2)

   WHY v2:  Canvas Catalog applies this CSS to BOTH the public storefront
   AND the admin console. v1 recolored #app-header and set `a{color:navy}`
   globally, which turned the admin header navy and its top-nav links
   navy-on-navy (unreadable). See the two screenshots.

   FIX:  Every rule that touches a SHARED element (header, links, headings,
   nav text, user menu, cart, icon glyphs) is now guarded with
       body:has(#search-form.callout-region)
   which matches only public storefront pages, so the ADMIN console keeps
   its default look. Product / icon / feature rules are storefront-only
   already and need no guard.

   NOTE: the guard uses the CSS :has() selector (supported in current
   Chrome/Edge/Safari/Firefox). If you must support very old browsers, or
   you'd rather brand the admin too, see the note at the bottom.

   PALETTE
     Navy (primary):   #092639     Gold (accent):  #E2B13C
     Navy (band opt.): #123B5A     Gold (hover):   #C9922B
     Ink (body text):  #3F4A57
   ===================================================================== */
:root{
  --nb-navy:      #092639;
  --nb-navy-band: #123B5A;
  --nb-gold:      #E2B13C;
  --nb-gold-dark: #C9922B;
  --nb-ink:       #3F4A57;
  --nb-white:     #ffffff;
}

/* =====================================================================
   PUBLIC STOREFRONT ONLY  (guarded — will NOT touch the admin console)
   ===================================================================== */

/* Top header band (cobrand logo / profile name / cart) — WHITE.
   The navy logo reads cleanly on white; contents below are set to navy. */
body:has(#search-form.callout-region) #app-header{
  padding: 0;
  background-color: var(--nb-white);
}

/* Headings */
body:has(#search-form.callout-region) h1,
body:has(#search-form.callout-region) h2{
  font-weight: 600;
  color: var(--nb-navy) !important;
}
body:has(#search-form.callout-region) h3{
  color: var(--nb-navy) !important;
}

/* Body links */
body:has(#search-form.callout-region) a,
body:has(#search-form.callout-region) .Product__AssociatedProductsList--below-the-fold > li > a{
  color: var(--nb-navy);
}

/* Navigation links (if any) on the navy strip → white */
body:has(#search-form.callout-region) .header-nav li a{
  color: var(--nb-white);
}

/* Categories / Refine toggles (button.search-refine-button).
   At REST: a subtle light outline so they read as plain, AVAILABLE buttons.
   On HOVER / OPEN (aria-expanded="true"): gold fill with navy text — only the
   button you're actually using looks "selected", so the two never appear
   selected at the same time.
   Prefer gold on both at rest instead? change the resting border-color below
   to var(--nb-gold). */
body:has(#search-form.callout-region) .search-refine-button{
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: 4px;
  background: transparent !important;
  color: var(--nb-white);
  margin-left: 8px;                 /* a little gap so they read as 2 buttons */
}
body:has(#search-form.callout-region) .search-refine-button:hover,
body:has(#search-form.callout-region) .search-refine-button:focus,
body:has(#search-form.callout-region) .search-refine-button[aria-expanded="true"]{
  border: 2px solid var(--nb-gold) !important;
  background: var(--nb-gold) !important;
  color: var(--nb-navy) !important;
}
/* Button label + dropdown chevron follow the button color (white at rest,
   navy when active) — overrides the global navy icon color. */
body:has(#search-form.callout-region) .search-refine-button .search-refine-button__text,
body:has(#search-form.callout-region) .search-refine-button .search-refine-button__icon{
  color: inherit !important;
}

/* Profile-name / user menu text — navy, to read on the white header band */
body:has(#search-form.callout-region) #header-menu-container > div > span > button > span{
  color: var(--nb-navy);
}

/* Cart button — navy icon on the white header, gold on hover */
body:has(#search-form.callout-region) #cart > div > div > div > span > button{
  color: var(--nb-navy) !important;
  background: transparent !important;
  border-radius: 22px;              /* pill shape, like the site buttons */
}
body:has(#search-form.callout-region) #cart > div > div > div > span > button:hover{
  color: var(--nb-navy) !important;
  background: var(--nb-gold) !important;
}

/* Icon-font glyphs → navy (guarded so admin UI icons are untouched) */
body:has(#search-form.callout-region) [class^="icon-"],
body:has(#search-form.callout-region) [class*=" icon-"]{
  color: var(--nb-navy);
}

/* Search + Categories/Refine strip (this element only exists on the
   storefront, so it is inherently public-only). Was teal #25aecb. */
#search-form.callout-region{
  background: var(--nb-navy);       /* swap to var(--nb-navy-band) for a 2-tone header */
  padding: 0;
  text-align: left;
}

/* Search input — gold outline to match the Categories / Refine buttons.
   Targets the text input inside the search box; the magnifier button is a
   <button>/icon, not an <input>, so it isn't affected. */
body:has(#search-form.callout-region) #search-form .search-box-wrapper input,
body:has(#search-form.callout-region) #search-form input[type="text"],
body:has(#search-form.callout-region) #search-form input[type="search"]{
  border: 2px solid var(--nb-gold) !important;
  border-radius: 4px;
}
/* Keep the gold outline on focus (a touch brighter) instead of the browser's
   default blue focus ring. */
body:has(#search-form.callout-region) #search-form .search-box-wrapper input:focus,
body:has(#search-form.callout-region) #search-form input[type="text"]:focus,
body:has(#search-form.callout-region) #search-form input[type="search"]:focus{
  border-color: var(--nb-gold) !important;
  box-shadow: 0 0 0 2px rgba(226,177,60,0.35) !important;
  outline: none !important;
}

/* =====================================================================
   STOREFRONT-ONLY SELECTORS  (cannot match admin — no guard needed)
   ===================================================================== */

/* Product tile hover: gold underline accent */
.product-results .product-tile:hover{
  box-shadow: inset 0px -5px 0px var(--nb-gold);
}

/* Uniform description height */
.product-description{
  max-height: 110px;
}

/* Card footer strip (price / dates) — navy with white text */
.product-tile .product-footer{
  color: var(--nb-white) !important;
  background: var(--nb-navy) !important;
}

/* Product icon circles (course = gold, program = navy) */
.ProductIcon__LargeCircle--course{  background: var(--nb-gold); }
.ProductIcon__LargeCircle--program{ background: var(--nb-navy); }

/* Course / program tile glyphs.
   >>> Replace the URLs with your Northbridge-hosted icon images. <<< */
.icon-course{
  background-image: url("https://REPLACE-WITH-NORTHBRIDGE-ASSET/NB_Catalog_Icon-Course.png");
  background-color: var(--nb-gold);
  z-index: 1;
}
.program{
  background-image: url("https://REPLACE-WITH-NORTHBRIDGE-ASSET/NB_Catalog_Icon-Program.png");
  z-index: 1;
}

/* Gold accent band — the feature-region slot, styled as a slim gold stripe
   that sits between the navy header and the navy search strip.
   (Set display:none instead if you ever want to hide it; raise/lower
   min-height to make the stripe thicker/thinner.) */
.feature-region{
  min-height: 10px;
  background: var(--nb-gold);
  background-repeat: no-repeat;
}

/* Admin product-table link sizing (admin-only cosmetic — safe to keep) */
.admin-product-table__product-link{
  font-size: 1.3em;
  font-weight: bold;
  white-space: normal;
}

/* -------- OPTIONAL: full hero banner instead of the gold stripe ----------
   Disabled by default so it can't override the gold accent band above with
   broken placeholder images. If you later want a real Northbridge hero
   banner on the home page, remove the surrounding comment markers, replace
   the URLs with your hosted banner images, and raise the .feature-region
   min-height (e.g. 300px) so the banner has room to show.

@media (min-width: 1660px){
  #home-page #feature div{ max-width: 1660px; }
  #home-page .feature-region{
    background-image: url("https://REPLACE-WITH-NORTHBRIDGE-ASSET/NB_Banner-1660x300.jpg");
    background-position: center;
  }
}
@media (max-width: 1244px){
  #home-page #feature div{ max-width: 1244px; }
  #home-page .feature-region{
    background-image: url("https://REPLACE-WITH-NORTHBRIDGE-ASSET/NB_Banner-1244x300.jpg");
    background-position: center;
  }
}
@media (max-width: 1200px){
  #home-page #feature div{ max-width: 1200px; }
  #home-page .feature-region{
    background-image: url("https://REPLACE-WITH-NORTHBRIDGE-ASSET/NB_Banner-1244x300.jpg");
    background-position: center;
  }
}
@media (max-width: 768px){
  #home-page #feature{ text-align: center; padding: 0 2em; }
  #home-page .feature-region{
    background-image: url("https://REPLACE-WITH-NORTHBRIDGE-ASSET/NB_Banner-800x300.jpg");
    background-position: center;
  }
}
@media (max-width: 640px){
  #home-page .feature-region{
    background-image: url("https://REPLACE-WITH-NORTHBRIDGE-ASSET/NB_Banner-640x300.jpg");
    background-position: center;
  }
}
------------------------------------------------------------------------- */

/* =====================================================================
   ALTERNATIVE — if you WANT the admin console branded navy too (not just
   the storefront), keep the guards but add readable admin nav text by
   forcing the admin top-nav links white. Ask and I'll provide the exact
   admin selectors once we confirm them from the live page.
   ===================================================================== */