/* ==========================================================================
   BHSSC / Compass Canvas Catalog - Custom CSS
   Matched to compass.bhssc.org
   Paste into: Catalogs > Customizations > Branding > Custom CSS

   Fonts are loaded by the companion Custom JS file, not by @import here.
   Both files must be in place for this to render correctly.

   Design note: the Compass site is flat. No gradients, no drop shadows.
   Depth comes from color and radius only. Keep it that way when editing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --main-color: #2a4169;      /* Sylvan Lake navy - primary */
  --navy: #2a4169;
  --midnight: #061528;        /* deep navy, footer */
  --harbor: #2e80a7;          /* secondary blue, links, eyebrows, programs */
  --sky: #bbe5ee;             /* light tint, utility strip */
  --grass: #708d00;           /* Buffalo Grass green, accents and icons */
  --gold: #f9cd61;            /* Meadowlark gold, focus rings */
  --flare: #e44131;           /* Signal Flare red, use sparingly */

  /* Neutrals */
  --surface: #f4f3f0;         /* page background, warm bone */
  --card: #ffffff;
  --ink: #242424;
  --ink-soft: #5c6470;
  --line: #e3e1dc;

  /* Type */
  --font-head: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;

  /* Shape */
  --radius: 16px;
  --radius-pill: 999px;
  --ease: 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. FOUNDATION
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.15rem; }

a { color: var(--harbor); }
a:hover, a:focus { color: var(--navy); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.btn:focus-visible,
.product-tile:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */

#app-header {
  background-color: #fff;
  border-bottom: 1px solid var(--line);
}

#user-nav { padding-top: 25px; }

#user-nav a,
#user-nav a:link,
#user-nav a:visited {
  color: var(--ink);
  text-decoration: none;
}

#user-nav a:hover,
#user-nav a:focus {
  color: var(--navy);
  text-decoration: none;
}

#header-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding-top: 10px;
}

#header-menu-container,
#cart {
  display: flex;
  align-items: center;
}

#page-links {
  display: flex;
  align-items: center;
  margin-right: 15px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

#page-links .piped-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

#page-links .piped-list li { margin-left: 4px; }

#page-links .piped-list li::before,
#page-links .piped-list li::after { content: none; }

#page-links a {
  display: inline-block;
  padding: 6px 14px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background-color var(--ease), color var(--ease);
}

#page-links a:hover,
#page-links a:focus {
  color: var(--navy);
  background-color: rgba(42, 65, 105, 0.07);
  text-decoration: none;
}

ul.nav { color: var(--ink); }
span.Dropdown__ToggleText,
span.Dropdown__ToggleIcon--header.icon-right { color: var(--ink); }

button#accountDropdown {
  padding: 6px 12px;
  font-family: var(--font-head);
  font-weight: 500;
  border-radius: var(--radius-pill);
  transition: background-color var(--ease);
}

button#accountDropdown:hover { background-color: rgba(42, 65, 105, 0.07); }


/* ==========================================================================
   3b. OPTIONAL NAVY HEADER
   Matches the Compass site, which runs a navy bar with a white logo.

   BEFORE UNCOMMENTING: upload a white or reversed BHSSC logo under
   Customizations > Branding > Logo. The current navy logo will disappear
   against this background.

   Uncomment the companion block in the Custom JS file at the same time to
   get the sky-blue utility strip above the header.
   ========================================================================== */

/*
#app-header {
  background-color: var(--navy);
  border-bottom: none;
}

#page-links a,
#user-nav a,
#user-nav a:link,
#user-nav a:visited,
button#accountDropdown,
span.Dropdown__ToggleText,
span.Dropdown__ToggleIcon--header.icon-right,
ul.nav {
  color: #fff;
}

#page-links a:hover,
#page-links a:focus,
#user-nav a:hover,
#user-nav a:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.14);
}

button#accountDropdown:hover { background-color: rgba(255, 255, 255, 0.14); }

#cart,
#cart a,
#cart .btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
*/


/* --------------------------------------------------------------------------
   4. SEARCH BAND
   Flat navy. The site uses no gradients.
   -------------------------------------------------------------------------- */

/* Navy here too, so any residual gap between the header and the search band
   fills with navy instead of showing the bone page background as a grey bar. */
.feature-region {
  background-image: none;
  background-color: var(--navy);
  margin-top: 0;
  padding-top: 0;
}

#search-form .search-form-container {
  background-color: var(--navy);
  background-image: none;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Left padding leaves room for the search icon so the placeholder and typed
   text do not run underneath it. */
/* The search field uses a small radius rather than a pill. Catalog positions
   the magnifying glass at a fixed inset of roughly 13px, tuned for a square
   field, and it does not respond to overrides here. At pill radius that inset
   reads as crowded against the curve. At 10px it reads correctly. If you ever
   get the icon repositioned, this can go back to var(--radius-pill). */
#search-form .search-form-container input[type="text"],
#search-form .search-form-container input[type="search"],
#search-form .search-form-container .form-control {
  height: auto;
  padding: 10px 18px 10px 40px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  transition: border-color var(--ease);
}

/* Vertical centring does take, so this stays. Horizontal is left alone. */
#search-form .search-form-container .icon-search,
#search-form .search-form-container [class*="icon-search"],
#search-form .search-form-container .search-form-icon {
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  font-size: 16px;
  color: var(--ink-soft);
  pointer-events: none;
  z-index: 2;
}

#search-form .search-form-container input[type="text"]:focus,
#search-form .search-form-container input[type="search"]:focus,
#search-form .search-form-container .form-control:focus {
  border-color: var(--sky);
}

.search-refine-button__contents {
  color: #fff;
  font-family: var(--font-head);
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: background-color var(--ease);
}

.search-refine-button__contents:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.search-refine-button__text,
.icon.search-refine-button__icon.icon-circle-down,
.icon.search-refine-button__icon.icon-circle-up {
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. FILTER AND SORT PANEL
   -------------------------------------------------------------------------- */

.search-refine-panel,
.search-refine-region,
#search-refine,
.refine-region {
  background-color: #fff;
  border: 1px solid var(--line);
  border-top: none;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  overflow: hidden;
}

.search-refine-panel label,
.search-refine-region label,
#search-refine label {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   6. SECTION HEADINGS
   Short green rule under each section title. The site's own device is an
   uppercase harbor-blue eyebrow above the heading, which CSS cannot supply
   text for, so this is the nearest equivalent.
   -------------------------------------------------------------------------- */

.product-group h2,
.product-results h2,
.product-results-header h2,
.listings h2,
#listings h2,
.trending-listings h2 {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 24px;
}

.product-group h2:after,
.product-results h2:after,
.product-results-header h2:after,
.listings h2:after,
#listings h2:after,
.trending-listings h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--grass);
}

/* --------------------------------------------------------------------------
   7. COURSE TILES
   Flat cards. A hairline at rest, a green top bar and a small lift on hover.
   -------------------------------------------------------------------------- */

.product-results .product-tile {
  position: relative;
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
  transition: transform var(--ease), border-color var(--ease);
}

.product-results .product-tile:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--grass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
  z-index: 2;
}

.product-results .product-tile:hover,
.product-results .product-tile:focus-within {
  transform: translateY(-3px);
  border-color: var(--navy);
}

.product-results .product-tile:hover:before,
.product-results .product-tile:focus-within:before {
  transform: scaleX(1);
}

/* Thumbnails render at their natural ratio. An earlier version of this file
   forced 16:9 with object-fit: cover, which cropped the bottom off the
   designed thumbnails and cut the baked-in CECH and course-type badges. */
.product-results .product-tile img {
  width: 100%;
  height: auto;
  display: block;
}

.product-results .product-tile h3,
.product-results .product-tile .product-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

/* Description clamped to three lines. Selector list is wide because course
   tiles and program tiles do not always use the same element. */
.product-results .product-tile .product-description,
.product-results .product-tile .product-tile-description,
.product-results .product-tile .product-details p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-results .product-tile .product-dates,
.product-results .product-tile .product-time-limit {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   8. BADGES AND ICONS
   Courses navy, programs harbor blue. Both in palette, still distinguishable.
   -------------------------------------------------------------------------- */

.product-flag {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
}

.product-flag.product-flag-free {
  background-color: var(--grass);
  color: #fff;
}

.Icon__CircleWrap--info,
.ProductIcon__LargeCircle--course,
.ProductIcon__SmallCircle--course {
  background-color: var(--main-color);
}

.Icon__CircleWrap--program,
.ProductIcon__LargeCircle--program,
.ProductIcon__SmallCircle--program {
  background-color: var(--harbor);
}

/* --------------------------------------------------------------------------
   9. BUTTONS
   Pill shape and Poppins, matching the site. Navy is the default action.
   Signal Flare stays free for the enroll or checkout step.
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  padding: 9px 22px;
  box-shadow: none;
  transition: background-color var(--ease), filter var(--ease);
}

.btn-info,
.btn-primary {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-primary:hover,
.btn-primary:focus,
.ProductIcon__LargeCircle--course:focus {
  background-color: var(--main-color);
  border-color: var(--main-color);
  filter: brightness(88%);
  box-shadow: none;
}

.btn-default {
  background-color: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
}

.btn-default:hover,
.btn-default:focus {
  background-color: var(--navy);
  color: #fff;
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */

#app-footer,
.app-footer {
  background-color: var(--navy);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
}

#app-footer a,
.app-footer a { color: var(--sky); }

#app-footer a:hover,
.app-footer a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   11. CAROUSEL
   -------------------------------------------------------------------------- */

.carousel-inner .item img { width: 100%; }

.carousel-inner .item {
  border-radius: var(--radius);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   12. UTILITY STRIP
   Styles the sky-blue bar injected by the Custom JS. Harmless if that
   block stays commented out.
   -------------------------------------------------------------------------- */

#compass-utility-strip {
  background-color: var(--sky);
  padding: 6px 20px;
  text-align: right;
  font-family: var(--font-body);
  font-size: 14px;
}

#compass-utility-strip a {
  color: var(--navy);
  text-decoration: underline;
  margin-left: 22px;
  font-weight: 600;
}

#compass-utility-strip a:hover { color: var(--midnight); }

/* --------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */

/* The breakpoint is 991px, not 768px, because that is where Bootstrap's md
   tier starts. The col-md-4 / col-md-8 split the Custom JS applies only
   takes effect at 992px and up. Below that the header is already stacked
   full width, so it needs the stacked rules too. */
@media (max-width: 991px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.4rem; }

  /* Header nav wraps as a horizontal row rather than stacking one link
     per line, and aligns left to match the logo. */
  #user-nav { padding-top: 0; }

  #header-menu {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  #header-menu > * { flex: 0 0 auto; }

  #page-links {
    width: auto;
    margin: 0;
    justify-content: flex-start;
  }

  #page-links .piped-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #page-links .piped-list li { margin: 2px; }

  #page-links a {
    padding: 5px 10px;
    font-size: 13px;
  }

  #header-menu-container,
  #cart {
    width: auto;
    justify-content: flex-start;
  }

  /* Search band and its controls, tightened so they share one row */
  #search-form .search-form-container {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .search-refine-button__contents {
    padding: 6px 12px;
    font-size: 14px;
  }

  /* Controls shrink so the filter and sort groups stop clipping */
  .btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  .btn-group,
  .search-refine-panel .btn-group,
  .search-refine-region .btn-group {
    display: flex;
    flex-wrap: wrap;
  }

  .product-results .product-tile { margin-bottom: 18px; }

  .product-results .product-tile:hover { transform: none; }

  #compass-utility-strip { text-align: center; }
  #compass-utility-strip a { margin: 0 10px; }
}

/* Narrow phones. Links take a full row so the account and cart icons stay
   together on the row beneath instead of the cart dropping alone. The
   Compie tooltip is fixed-position and was covering the filter controls,
   so it is suppressed here. The chat button remains. */
@media (max-width: 600px) {
  #page-links {
    flex: 1 0 100%;
    margin-bottom: 4px;
  }

  #compie-tooltip { display: none !important; }
}

/* --------------------------------------------------------------------------
   14. MOTION PREFERENCES
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .product-results .product-tile:hover { transform: none; }
  .product-results .product-tile:before { transition: none; }
}