/* =====================================================================
   GCITC Catalog Filter Bar — Custom CSS
   Paste this into Catalog Admin → Customization → Custom CSS (or the
   Storefront Theme Editor's CSS panel, wherever your existing header
   styling already lives).

   Everything is namespaced under .gcfb- (GC Filter Bar) so it can't
   collide with Catalog's own classes. Colors match the University Blue
   already used in your hero banner — adjust the two hex values below if
   your banner blue differs.
   ===================================================================== */

.gcfb-bar {
  --gcfb-navy: #003359;
  --gcfb-navy-2: #012a49;
  --gcfb-accent: #64a0c8;
  --gcfb-border: #d9dde1;
  --gcfb-text: #1c2733;
  --gcfb-text-muted: #55606b;

  font-family: Lato, "Segoe UI", system-ui, sans-serif;
  background: #f4f6f8;
  border: 1px solid var(--gcfb-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 auto 18px;
  max-width: 900px;
  text-align: center;
}

.gcfb-search {
  margin-bottom: 10px;
}

.gcfb-search input {
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--gcfb-border);
  border-radius: 8px;
  background: #fff;
  color: var(--gcfb-text);
  outline: none;
  text-align: left;
}

.gcfb-search input:focus {
  border-color: var(--gcfb-navy-2);
  box-shadow: 0 0 0 3px rgba(100, 160, 200, 0.28);
}

.gcfb-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.gcfb-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.gcfb-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gcfb-text-muted);
  margin-right: 2px;
}

.gcfb-chip {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--gcfb-border);
  background: #fff;
  color: var(--gcfb-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.gcfb-chip:hover {
  border-color: var(--gcfb-navy-2);
  color: var(--gcfb-text);
}

.gcfb-chip[aria-pressed="true"] {
  background: var(--gcfb-navy);
  border-color: var(--gcfb-navy);
  color: #fff;
}

/* per-level chip colors when active, matching the directory tool */
.gcfb-chip.gcfb-lvl-foundations[aria-pressed="true"] { background: var(--gcfb-accent); border-color: var(--gcfb-accent); }
.gcfb-chip.gcfb-lvl-entry[aria-pressed="true"]       { background: #1e8f74; border-color: #1e8f74; }
.gcfb-chip.gcfb-lvl-mid[aria-pressed="true"]         { background: #b8862c; border-color: #b8862c; }
.gcfb-chip.gcfb-lvl-senior[aria-pressed="true"]      { background: #c9622f; border-color: #c9622f; }
.gcfb-chip.gcfb-lvl-expert[aria-pressed="true"]      { background: #a13446; border-color: #a13446; }

.gcfb-count {
  font-size: 12.5px;
  color: var(--gcfb-text-muted);
  margin: 10px 2px 0;
}

.gcfb-count strong {
  color: var(--gcfb-text);
}

.gcfb-empty {
  text-align: center;
  padding: 30px 16px;
  color: var(--gcfb-text-muted);
  font-size: 13.5px;
  background: #fff;
  border: 1px dashed var(--gcfb-border);
  border-radius: 10px;
  margin-top: 12px;
}

/* Filtered-out cards get hidden via this class rather than inline
   styles, so it's easy to find/undo in DevTools if needed. */
.gcfb-hidden {
  display: none !important;
}

/* Catalog's native grid (headings, rows, pagination inside
   .product-results) and its native search/refine bar (.callout-region)
   get this class from the JS once — and only once — the custom grid has
   rendered successfully. If the JS ever fails, this class is never
   applied and stock Catalog shows normally. */
.gcfb-native-hidden {
  display: none !important;
}

/* =====================================================================
   Custom listing grid (replaces Catalog's rendered grid)
   The JS fetches all listings from Catalog's public /products.json and
   renders these cards itself, pre-sorted by tier. Because this DOM
   belongs to our script (not Catalog's React app), filtering and
   sorting are always consistent and nothing can re-render it out from
   under us. Flex layout means hidden cards just reflow — no float gaps.
   ===================================================================== */

.gcfb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  /* modest side margins so cards never sit against the browser edge */
  margin: 0 24px 28px;
}

/* keep the "no matches" box aligned with the grid's side margins */
.gcfb-empty {
  margin-left: 24px;
  margin-right: 24px;
}

.gcfb-card {
  --gcfb-border: #d9dde1;
  position: relative;               /* anchors the corner tier chip */
  display: flex;
  flex-direction: column;
  width: calc(25% - 18px);          /* 4 per row incl. 24px gaps */
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--gcfb-border);
  border-left: 5px solid transparent;
  border-radius: 8px;
  padding: 14px 16px 16px;
  text-decoration: none !important;
  color: #1c2733;
  font-family: Lato, "Segoe UI", system-ui, sans-serif;
  transition: box-shadow 0.15s ease;
}

.gcfb-card:hover,
.gcfb-card:focus {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  color: #1c2733;
  text-decoration: none;
}

/* tier accent on the card's left edge, same palette as the chips */
.gcfb-card.gcc-tier-foundations { border-left-color: var(--tier-foundations); }
.gcfb-card.gcc-tier-entry       { border-left-color: var(--tier-entry); }
.gcfb-card.gcc-tier-mid         { border-left-color: var(--tier-mid); }
.gcfb-card.gcc-tier-senior      { border-left-color: var(--tier-senior); }
.gcfb-card.gcc-tier-expert      { border-left-color: var(--tier-expert); }

.gcfb-card-img {
  height: 100px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gcfb-card-img img {
  max-height: 100px;
  max-width: 100%;
  object-fit: contain;
}

.gcfb-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 6px;
  min-height: 38px;
}

.gcfb-card-teaser {
  font-size: 11.5px;
  line-height: 1.45;
  color: #55606b;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;                     /* pushes the footer to the bottom */
}

.gcfb-card-footer {
  border-top: 1px solid #edf0f2;
  padding-top: 6px;
  font-size: 12.5px;
}

.gcfb-card-price {
  font-weight: 700;
  color: #003359;
}

/* responsive column counts */
@media (max-width: 991px) {
  .gcfb-card { width: calc(33.333% - 16px); }  /* 3 per row */
}
@media (max-width: 767px) {
  .gcfb-card { width: calc(50% - 12px); }      /* 2 per row */
}
@media (max-width: 479px) {
  .gcfb-card { width: 100%; }                  /* 1 per row */
}

@media (max-width: 640px) {
  .gcfb-rows { gap: 10px; }
}

/* =====================================================================
   Storefront card resizing — FALLBACK ONLY as of the custom-grid rewrite.
   The JS now renders its own .gcfb-card grid and hides Catalog's native
   cards entirely, so the rules in this section normally never paint.
   They're kept so that if the /products.json fetch ever fails and the
   native grid is left visible, it still gets the compact 5-per-row
   treatment instead of Catalog's giant default cards.

   Original notes: Catalog's default listing cards run ~660px tall at
   ~262px wide (4 per row). This section shrinks them to ~340px tall at
   ~204px wide (5 per row) — tested live against the real page, not
   guessed. Breakdown of where the height comes from and what each rule
   below does:

     - Grid: 4/row → 5/row (width: 20%)
     - Image/badge: 200px → 110px tall (object-fit: contain keeps your
       real cert badge images from distorting)
     - Description: was a fixed 188px regardless of text length →
       clamped to 2 lines instead
     - Instructor line: was a fixed ~53px even when blank on almost
       every CompTIA listing → collapses to fit actual content
     - A ~50px screen-reader-only spacer with no visible text → hidden
       entirely (safe: confirmed it carries no visible content)

   Mobile (col-sm-6, 2 per row) is left untouched — already reasonably
   compact on small screens.

   FRAGILE PART: the "screen-reader-only spacer" rule targets the 4th
   child of .product-tile by position, since that element has no stable
   class name of its own (it's auto-generated by Catalog's internal
   styling library and could change on any Catalog update). If a future
   Catalog update reorders that markup, this one rule may stop doing
   anything — everything else here still works fine either way.
   ===================================================================== */

/* Flex grid — replaces Catalog's floated-column layout for listing rows.
   Two problems this solves at once:
   1. "Random spacing": our card-shrinking rules below make card heights
      content-dependent (357px vs 371px for two-line titles). Floated
      columns snag on taller neighbors and leave holes in the grid; flex
      rows wrap cleanly regardless of height differences.
   2. It lets the tier-sort JS position cards with the CSS `order`
      property instead of physically moving DOM nodes — Catalog's grid is
      React-rendered, and reordering React's child nodes is what caused
      the filter+pagination crash (React reconciles against a child order
      it thinks it owns; `order` is invisible to it). */
.product-results .row {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Bootstrap's .row clearfix pseudo-elements (display:table) would become
   phantom flex items in a flex container — remove them. Safe because a
   flex container doesn't need clearing. */
.product-results .row::before,
.product-results .row::after {
  display: none !important;
}

.product-results .row > [class*="col-md-"] {
  width: 20% !important;
}

.product-tile {
  margin-bottom: 16px !important;
}

.product-heading {
  height: auto !important;
  min-height: 40px !important;
  margin-bottom: 6px !important;
}

.product-heading h3 {
  font-size: 15px !important;
}

.product-image {
  height: 110px !important;
}

.product-image .image-container {
  height: 100px !important;
  margin-bottom: 4px !important;
}

.product-image img {
  max-height: 100px !important;
  object-fit: contain !important;
}

.product-description {
  height: auto !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 11.5px !important;
}

.product-instructor {
  min-height: 0 !important;
  height: auto !important;
  padding: 2px 0 !important;
}

/* fragile — see note above */
.product-tile > div:nth-child(4) {
  display: none !important;
}

.product-footer {
  padding-top: 6px !important;
  font-size: 12px !important;
}

/* =====================================================================
   Header nav (Training / Contact) + footer sitemap
   ===================================================================== */

.gcfb-header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}

.gcfb-header-nav a {
  font-family: Lato, "Segoe UI", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #003359;
  text-decoration: none;
}

.gcfb-header-nav a:hover {
  text-decoration: underline;
}

.gcfb-footer-main {
  background: #003359;
  color: #cbd6e6;
  padding: 32px 20px 20px;
  margin: -10px -15px 20px;
  font-family: Lato, "Segoe UI", system-ui, sans-serif;
}

.gcfb-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  max-width: 1140px;
  margin: 0 auto;
  text-align: left;
}

.gcfb-footer-brand {
  flex: 1 1 220px;
  min-width: 200px;
}

.gcfb-footer-brand img {
  max-height: 70px;
  margin-bottom: 12px;
  /* the source logo is dark-on-transparent; a light backing keeps it
     legible against the navy footer without needing a separate asset */
  background: #fff;
  padding: 6px 10px;
  border-radius: 6px;
}

.gcfb-footer-address,
.gcfb-footer-contact {
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0 0 10px;
  color: #cbd6e6;
}

.gcfb-footer-contact a {
  color: #fff;
  text-decoration: none;
}

.gcfb-footer-contact a:hover {
  text-decoration: underline;
}

.gcfb-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.gcfb-footer-social a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gcfb-footer-social svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

.gcfb-footer-social a:hover {
  background: #64a0c8;
}

.gcfb-footer-col {
  flex: 1 1 160px;
  min-width: 150px;
}

.gcfb-footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 0 0 12px;
}

.gcfb-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gcfb-footer-col li {
  margin-bottom: 8px;
}

.gcfb-footer-col a {
  font-size: 12.5px;
  color: #cbd6e6;
  text-decoration: none;
  white-space: pre;
}

.gcfb-footer-col a:hover {
  color: #fff;
  text-decoration: underline;
}

.gcfb-footer-au {
  max-width: 1140px;
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
}

.gcfb-footer-au a {
  font-size: 12px;
  color: #9fb3cf;
  text-decoration: none;
}

.gcfb-footer-au a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .gcfb-header-nav {
    justify-content: center;
  }
  .gcfb-footer-top {
    text-align: center;
  }
  .gcfb-footer-au {
    text-align: center;
  }
}

/* =====================================================================
   GCITC Tier Chips CSS — the corner badges on each card. Used by the
   custom .gcfb-card grid above (chips are baked into each card by the
   JS at render time). The .product-tile.gcc-tier-* variants below are
   fallback-only leftovers and normally never paint.
   ===================================================================== */

:root {
  --tier-foundations: #A5ACAF;
  --tier-entry: #64A0C8;
  --tier-mid: #003359;
  --tier-senior: #DA8A2B;
  --tier-expert: #44D62C;
}

.product-tile.gcc-tier {
  border-left: 5px solid transparent;
}
.product-tile.gcc-tier-foundations { border-left-color: var(--tier-foundations); }
.product-tile.gcc-tier-entry       { border-left-color: var(--tier-entry); }
.product-tile.gcc-tier-mid         { border-left-color: var(--tier-mid); }
.product-tile.gcc-tier-senior      { border-left-color: var(--tier-senior); }
.product-tile.gcc-tier-expert      { border-left-color: var(--tier-expert); }

.gcc-tier-chip {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  font-family: "Nunito Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  color: #fff;
  pointer-events: none;
}
.gcc-tier-chip.gcc-tier-foundations { background: var(--tier-foundations); color: #1c1f20; }
.gcc-tier-chip.gcc-tier-entry       { background: var(--tier-entry);       color: #00263f; }
.gcc-tier-chip.gcc-tier-mid         { background: var(--tier-mid); }
.gcc-tier-chip.gcc-tier-senior      { background: var(--tier-senior); }
.gcc-tier-chip.gcc-tier-expert      { background: var(--tier-expert);      color: #00230a; }