/* Expandable catalogs */
details.catalog {
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  background: rgba(255,255,255,0.02);
}

details.catalog > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  cursor: pointer;
  list-style: none; /* hide default marker in some browsers */
}

details.catalog > summary::-webkit-details-marker { display: none; }

details.catalog > summary::after {
  content: "▸";
  transition: transform 0.2s ease;
  opacity: 0.75;
}

details.catalog[open] > summary::after {
  transform: rotate(90deg);
}

details.catalog .name {
  font-weight: 700;
}

details.catalog .name .ext {
  margin-left: 0.4rem;
  text-decoration: none;
}

details.catalog .meta {
  opacity: 0.8;
  font-size: 0.95em;
  white-space: nowrap;
}

details.catalog .catalog-details {
  margin-top: 0.75rem;
  border-top: 1px dashed rgba(255,255,255,0.15);
  padding-top: 0.75rem;
}

details.catalog .cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0.75rem 1rem;
}

@media (max-width: 900px) {
  details.catalog .cols {
    grid-template-columns: 1fr;
  }
}

details.catalog h5 {
  margin: 0 0 0.25rem 0;
  font-size: 0.95em;
  opacity: 0.9;
}

details.catalog .links {
  margin-top: 0.35rem;
  font-size: 0.95em;
}

/* Filters UI */
.catalog-filters .cf-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin:.5rem 0; }
.catalog-filters input[type="search"] { flex:1 1 240px; padding:.5rem .6rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.2); }
.catalog-filters .button.small { padding:.35rem .6rem; border-radius:.5rem; }

.catalog-filters .cf-group { min-width: 220px; }
.catalog-filters .cf-label { display:block; font-size:.9em; opacity:.85; margin-bottom:.25rem; }
.catalog-filters .cf-chips { display:flex; gap:.6rem .9rem; flex-wrap:wrap; }
.catalog-filters .cf-chips label { display:flex; gap:.35rem; align-items:center; cursor:pointer; }
.catalog-filters .cf-range { display:flex; align-items:center; gap:.4rem; }
.catalog-filters .cf-range input[type="number"] { width:6rem; padding:.35rem .5rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.2); }

/* --- Catalogs banner: make all text white --- */

/* Option A (recommended): darker translucent card + white text */
#banner .inner {
  background: rgba(0, 0, 0, 0.35) !important;  /* tint; tweak 0.25–0.50 */
  color: #fff !important;
}

/* Inherit white for everything inside */
#banner .inner h2,
#banner .inner p,
#banner .inner .byline,
#banner .inner a,
#banner .inner strong,
#banner .inner em,
#banner .inner li,
#banner .inner span {
  color: #fff !important;
}

/* Borders/buttons to match */
#banner .inner header,
#banner .inner header h2 { border-color: rgba(255,255,255,0.6) !important; }
#banner .inner .button { color:#fff !important; border-color: rgba(255,255,255,0.6) !important; }
#banner .inner .button:hover { background: rgba(255,255,255,0.12) !important; }

/* If you really want to keep a white card, use this instead of the block above:
#banner .inner { background: rgba(255,255,255,0.35) !important; color:#fff !important; }
*/

/* ==== Brand color overrides (#322234) ==== */

/* Links */
a {
  color: #322234 !important;
  border-bottom-color: currentColor;
}
a:hover { background: rgba(50,34,52,0.06); }

/* Primary buttons */
.button.primary,
input[type="button"].primary,
input[type="submit"].primary,
input[type="reset"].primary,
button.primary {
  background: #322234 !important;
  border-color: #322234 !important;
  color: #fff !important;
}
.button.primary:hover,
input[type="button"].primary:hover,
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
button.primary:hover {
  background: #3f2a56 !important;   /* subtle hover */
  border-color: #3f2a56 !important;
}

/* Default button hover tint */
.button:hover { background: rgba(50,34,52,0.12) !important; }

/* Inputs (focus ring) */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: #322234 !important;
}

/* Dropdown (nav) hover */
.dropotron > li:hover > a {
  background: #322234 !important;
  color: #fff !important;
}

/* Header nav hover (desktop) */
#header nav ul li.active > a,
#header nav ul li:hover > a {
  background: rgba(50,34,52,0.12) !important;
}

/* Teal section replacement (optional): use brand instead of teal */
.wrapper.style2 {
  background-color: #322234 !important;
  color: #fff !important;
}
/* Keep the inverted primary button inside style2 */
.wrapper.style2 .button.primary {
  background: #fff !important;
  border-color: #fff !important;
  color: #322234 !important;
}
/* Links inside style2 should stay readable (white) */
.wrapper.style2 a {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.6) !important;
}

#banner { background-color: #322234 !important; }

/* override HTML5 UP */
.buttons.stacked .button,
.button.fit { width: auto; }