/* =========================================================
   Space Foundation — "Launch Manifest"
   Canvas Catalog legacy storefront, canvas.discoverspace.org

   Concept: a printed programme, not a dashboard. The date is
   the organising element — set large in Prompt at the head of
   every entry, with the course title beneath it. Deliberately
   the opposite structure to the Discovery Center variant.

   Pairs with: spacefoundation.js
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&family=Roboto:wght@300;400;500;700&display=swap');

:root {
  --sf-blue:    #134263;
  --sf-deep:    #0c2c44;
  --sf-green:   #66cc00;
  --sf-green-d: #4e9c00;
  --sf-cyan:    #7ddae9;
  --sf-paper:   #ffffff;
  --sf-shell:   #eef1f4;
  --sf-ink:     #22282d;
  --sf-quiet:   #6b7c8d;
  --sf-rule:    #d9e0e7;

  --sf-display: "Prompt", "Roboto", Arial, sans-serif;
  --sf-body:    "Roboto", "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--sf-body);
  color: var(--sf-ink);
  background: var(--sf-shell);
}

/* ---------- Header ---------- */
#app-header {
  background: var(--sf-paper);
  border-bottom: 1px solid var(--sf-rule);
}
#app-header .logo-customized img { max-height: 76px; width: auto; }

#header-menu a,
#header-menu button {
  font-family: var(--sf-body);
  color: var(--sf-blue) !important;
  font-weight: 500;
}
#header-menu a:hover,
#header-menu button:hover { color: var(--sf-green-d) !important; }

/* ---------- Search band ---------- */
#search-form.callout-region,
.search-form-container {
  background-color: var(--sf-blue) !important;
}

.search-form .search-box,
input.search-box {
  font-family: var(--sf-body);
  font-size: 1rem;
  border: none;
  border-radius: 3px;
  box-shadow: none;
}
.search-form .search-box:focus,
input.search-box:focus {
  outline: 3px solid var(--sf-green);
  outline-offset: 0;
}

.search-refine-button,
.search-refine-button.btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #ffffff;
  font-family: var(--sf-body);
  font-weight: 500;
}
.search-refine-button:hover,
.search-refine-button.btn:hover,
.search-refine-button[aria-expanded="true"] {
  background: transparent;
  color: var(--sf-cyan);
  border-bottom-color: var(--sf-cyan);
}
.search-refine-button__text { color: inherit; }

/* ---------- Headings ---------- */
#main-heading h1 {
  font-family: var(--sf-display);
  font-weight: 300;
  font-size: 2.6rem;
  letter-spacing: -0.015em;
  color: var(--sf-blue);
}

#listings h2 {
  font-family: var(--sf-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--sf-quiet);
  margin: 0 0 22px;
}

/* ---------- Entries ---------- */
/* No card chrome, no shadows: entries sit on paper, divided by
   a single rule, the way a printed programme would set them. */
.product-tile {
  background: var(--sf-paper);
  border: none;
  border-top: 3px solid var(--sf-blue);
  border-radius: 0;
  overflow: hidden;
  padding-bottom: 2px;
}
.product-link:hover .product-tile,
.product-link:focus-within .product-tile {
  background: #f7fbfd;
}

/* The date, injected by JS, leads each entry */
.sf-when {
  display: flex;
  align-items: baseline;
  gap: 10px;
  /* top padding clears the course-type badge that hangs off the
     bottom edge of the image */
  padding: 36px 18px 2px;
}
.sf-when-date {
  font-family: var(--sf-display);
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--sf-blue);
  letter-spacing: -0.02em;
}
.sf-when-year {
  font-family: var(--sf-body);
  font-size: 0.8rem;
  color: var(--sf-quiet);
}
.sf-when-status {
  margin-left: auto;
  font-family: var(--sf-body);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--sf-green-d);
  white-space: nowrap;
}
.sf-when-status[data-window="scheduled"] { color: var(--sf-quiet); font-weight: 500; }
.sf-when-status[data-window="live"] { color: var(--sf-blue); }

.product-heading { padding: 6px 18px 12px; }
.product-heading h3 {
  font-family: var(--sf-display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--sf-ink);
  margin: 0;
}
.product-link:hover .product-heading h3 { color: var(--sf-blue); }

.jqFlag { display: none !important; }

.ProductIcon__LargeCircle--course {
  background-color: var(--sf-blue) !important;
}

.product-description {
  font-size: 0.9rem;
  line-height: 1.65;
  padding: 12px 18px 4px;
  color: #3e454b;
}

.product-instructor {
  padding: 8px 18px 12px;
  font-size: 0.82rem;
  color: var(--sf-quiet);
}

/* Footer keeps only the price; the date moved to the top */
.product-footer {
  border-top: 1px solid var(--sf-rule);
  padding: 10px 18px;
  background: transparent;
}
.product-footer .product-dates { display: none; }

.product-value,
.product-price {
  font-family: var(--sf-body);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--sf-green-d);
  letter-spacing: 0.02em;
}

.product-account-image-wrapper { opacity: 0.55; }

/* ---------- Grid: replace Bootstrap 3 floats with flex ----------
   The legacy grid floats .col-md-3 / .col-sm-6 columns. Uneven tile
   heights make later tiles snag on taller ones and skip columns.
   Flex gives true rows and equal-height tiles. Bootstrap's clearfix
   pseudo-elements would become stray flex items, so they're removed. */
#listings > .row[role="list"] {
  display: flex;
  flex-wrap: wrap;
}
#listings > .row[role="list"]::before,
#listings > .row[role="list"]::after {
  display: none;
}
#listings > .row[role="list"] > [role="listitem"] {
  float: none;
  display: flex;
  margin-bottom: 30px;
}
#listings .product-link {
  display: flex;
  width: 100%;
}
#listings .product-tile {
  flex: 1 1 auto;
  width: 100%;
}
/* Pin the price row to the bottom so footers line up across a row */
#listings .product-footer {
  margin-top: auto;
}

/* ---------- Footer ---------- */
#app-footer,
.app-footer {
  background: var(--sf-deep);
  color: #ffffff;
  padding: 36px 0;
  border: none;
}
#app-footer a,
.app-footer a {
  color: #ffffff;
  opacity: 0.62;
  font-weight: 300;
}
#app-footer a:hover,
.app-footer a:hover {
  opacity: 1;
  color: var(--sf-cyan);
  text-decoration: none;
}
#app-footer p.small { color: #ffffff; opacity: 0.45; }

/* ---------- Buttons ---------- */
.btn-primary,
button[type="submit"]:not(.search-submit):not(.search-refine-button) {
  background: var(--sf-green);
  border: none;
  border-radius: 3px;
  color: #ffffff;
  font-family: var(--sf-body);
  font-weight: 700;
  padding: 11px 38px;
}
.btn-primary:hover,
button[type="submit"]:not(.search-submit):not(.search-refine-button):hover {
  background: var(--sf-green-d);
}

/* ---------- Quality floor ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--sf-green);
  outline-offset: 2px;
}

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