/* Help Save Craigslist — design layer.
 *
 * Sits on top of Bootstrap 5.3. Bootstrap supplies the layout plumbing we do
 * not want to maintain (grid, collapse, dropdown, form controls); this file
 * supplies the identity: color, type, density.
 *
 * Section 6 holds the browse page: results bar, listing grid, cards.
 *
 * Rules for the team:
 *   - Colors, type and spacing are declared ONCE here as custom properties.
 *     Use the tokens; never hard-code a hex in a template.
 */

/* ------------------------------------------------------------------ *
 *  1. Tokens
 * ------------------------------------------------------------------ */

:root {
  /* Craigslist's own purple, darkened for text contrast. Keeping the heritage
     hue is deliberate: we are improving the site, not rebranding it. */
  --hsc-purple: #52247a;
  --hsc-purple-bright: #6b31a0;
  --hsc-purple-wash: #f4effa;

  /* Neutrals biased very slightly warm/purple so they read as chosen. */
  --hsc-ink: #1a1620;
  --hsc-ink-soft: #413a4a;
  --hsc-muted: #6e6677;
  --hsc-line: #e4e0ea;
  --hsc-line-strong: #cdc6d6;
  --hsc-surface: #faf9fc;

  /* Trust signal, kept separate from the brand accent. Add a --hsc-flag
     here when listing reports land (issue for moderation). */
  --hsc-verified: #1d6b4f;

  /* Franklin Gothic is the historical newspaper classified-ads face. */
  --hsc-font-sans: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Tight radii read as a tool; soft ones read as a template. */
  --hsc-radius: 4px;
  --hsc-radius-lg: 6px;

  /* Widest the page content gets; past this, extra screen becomes side space. */
  --hsc-page-max: 1440px;
}

/* ------------------------------------------------------------------ *
 *  2. Bootstrap variable overrides
 * ------------------------------------------------------------------ */

:root {
  --bs-primary: var(--hsc-purple);
  --bs-primary-rgb: 82, 36, 122;
  --bs-link-color: var(--hsc-purple);
  --bs-link-hover-color: var(--hsc-purple-bright);
  --bs-body-color: var(--hsc-ink);
  --bs-body-font-family: var(--hsc-font-sans);
  --bs-body-font-size: 0.9375rem;
  --bs-border-color: var(--hsc-line);
  --bs-border-radius: var(--hsc-radius);
  --bs-border-radius-sm: var(--hsc-radius);
  --bs-border-radius-lg: var(--hsc-radius-lg);
  --bs-secondary-color: var(--hsc-muted);
}

.btn-primary {
  --bs-btn-bg: var(--hsc-purple);
  --bs-btn-border-color: var(--hsc-purple);
  --bs-btn-hover-bg: var(--hsc-purple-bright);
  --bs-btn-hover-border-color: var(--hsc-purple-bright);
  --bs-btn-active-bg: var(--hsc-purple-bright);
  --bs-btn-active-border-color: var(--hsc-purple-bright);
  --bs-btn-font-weight: 600;
}

.btn {
  --bs-btn-padding-y: 0.5rem;
  letter-spacing: -0.005em;
}

/* ------------------------------------------------------------------ *
 *  3. Shell + shared type
 * ------------------------------------------------------------------ */

/* base.html puts .layout-shell on <body> so the footer sits at the bottom
   even on a short page. 100dvh rather than 100vh: on mobile Safari
   100vh includes the browser chrome and pushes content below the fold. */
.layout-shell {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
}

.layout-shell > main {
  flex: 1 0 auto;
}

/* Bootstrap caps .container at 1140px (xl) and 1320px (xxl), which leaves
   60–70px of empty space per side on common laptop widths. From xl up, fill
   the window (Bootstrap's 12px padding still applies), capped at
   --hsc-page-max. */
@media (min-width: 1200px) {
  .container {
    max-width: var(--hsc-page-max);
  }
}

/* Every price, count, and timestamp lines up in columns. */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* Caps a text column near 45 characters, the comfortable reading measure. */
.measure {
  max-width: 44ch;
  margin-inline: auto;
}

/* Small uppercase label used for section headings and footer columns. */
.label-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hsc-muted);
}

/* Bootstrap's default focus ring is easy to lose against the brand purple. */
:focus-visible {
  outline: 2px solid var(--hsc-purple-bright);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 *  4. Masthead + header
 * ------------------------------------------------------------------ */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--hsc-line-strong);
}

/* Desktop category strip under the navbar. Quieter than the nav above it:
   smaller type in ink-soft, so the search bar and Post button stay the
   loudest things in the header. Set through Bootstrap's --bs-nav-link-*
   variables so .nav keeps handling padding and focus. */
.category-bar {
  border-top: 1px solid var(--hsc-line);
}

.category-bar .nav {
  --bs-nav-link-padding-y: 0.45rem;
  --bs-nav-link-font-size: 0.8125rem;
  --bs-nav-link-font-weight: 500;
  --bs-nav-link-color: var(--hsc-ink-soft);
  --bs-nav-link-hover-color: var(--hsc-purple);
}

/* Current category; underlined so it doesn't rely on color alone. */
.category-bar .nav-link.active,
#primaryNav .nav-link.active {
  color: var(--hsc-purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Two-line lockup: a letterspaced kicker over the heavy wordmark.
   Mirrors craigslist's own lowercase wordmark. */
.masthead {
  display: block;
  text-decoration: none;
  line-height: 1;
  padding-block: 2px;
}

.masthead__kicker {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hsc-muted);
}

.masthead__word {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--hsc-purple);
  margin-top: 1px;
}

.masthead:hover .masthead__word {
  color: var(--hsc-purple-bright);
}

/* Trust signal — used in the nav beside a verified user's name, and on
   listing rows once browse lands. The reason a verified-accounts MVP is
   worth building. */
.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--hsc-verified);
}

/* Search is the primary action: full-width row on small screens,
   inline and generous from lg up. */
.search-form {
  flex: 1 1 100%;
  order: 3;
}

@media (min-width: 992px) {
  .search-form {
    flex: 1 1 auto;
    order: 0;
    max-width: 38rem;
  }
}

/* Search field.
   Built from Bootstrap's own .input-group / .form-select / .form-control so the
   markup stays familiar — we only move the border from the children onto the
   wrapper, which turns three controls into one drawn instrument. */
.search-form .input-group {
  background: #fff;
  border: 1.5px solid var(--hsc-ink);
  border-radius: 2px;
  overflow: hidden;
}

.search-form .input-group:focus-within {
  border-color: var(--hsc-purple);
  box-shadow: 0 0 0 3px var(--hsc-purple-wash);
}

/* Children are borderless; hairline dividers separate them instead.
   ORDER MATTERS: the grouped rule below zeroes every border, then the two
   rules after it add single dividers back at the same specificity. Moving
   those later rules above this one makes the dividers disappear. */
.search-form .form-select,
.search-form .form-control,
.search-form .btn {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.search-form .form-select {
  border-right: 1px solid var(--hsc-line-strong);
  color: var(--hsc-ink-soft);
  font-size: 0.875rem;
}

.search-form .btn {
  border-left: 1px solid var(--hsc-line-strong);
}

.search-form .form-control::placeholder {
  color: var(--hsc-muted);
}

/* Icon-only submit. A Bootstrap button variant, defined the 5.3 way:
   set the --bs-btn-* variables and let .btn supply the rest. */
.btn-search {
  --bs-btn-color: var(--hsc-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--hsc-purple);
  --bs-btn-hover-bg: var(--hsc-purple-wash);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--hsc-purple);
  --bs-btn-active-bg: var(--hsc-purple-wash);
  --bs-btn-active-border-color: transparent;
  --bs-btn-padding-x: 0.85rem;
  display: grid;
  place-items: center;
}

/* ---- The one loud element on the page ----
   Also a Bootstrap variant, so it inherits .btn's padding, focus handling and
   disabled states. The extra three properties are what make it a letterpress
   stamp instead of a rounded pill: squared corners, tracked uppercase type,
   and a hard 2px ledge that collapses when pressed. */
.btn-post {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hsc-purple);
  --bs-btn-border-color: var(--hsc-purple);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hsc-purple-bright);
  --bs-btn-hover-border-color: var(--hsc-purple-bright);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hsc-purple-bright);
  --bs-btn-active-border-color: var(--hsc-purple-bright);
  --bs-btn-border-radius: 2px;
  --bs-btn-font-size: 0.78rem;
  --bs-btn-font-weight: 700;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-padding-y: 0.62rem;
  /* Keep the ledge through focus and press, rather than letting Bootstrap's
     focus shadow replace it. */
  --bs-btn-focus-box-shadow: 0 2px 0 0 #371552, 0 0 0 3px var(--hsc-purple-wash);
  --bs-btn-active-shadow: 0 1px 0 0 #371552;
  box-shadow: 0 2px 0 0 #371552;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.btn-post:active {
  transform: translateY(1px);
}

/* ------------------------------------------------------------------ *
 *  5. Footer
 * ------------------------------------------------------------------ */

.site-footer {
  background: var(--hsc-surface);
  border-top: 1px solid var(--hsc-line-strong);
  color: var(--hsc-muted);
  font-size: 0.875rem;
}

.site-footer a {
  color: var(--hsc-ink-soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--hsc-purple);
  text-decoration: underline;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.3rem;
}

/* ------------------------------------------------------------------ *
 *  6. Browse page
 * ------------------------------------------------------------------ */

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--hsc-line);
}

.results-bar__count {
  color: var(--hsc-muted);
  font-size: 0.875rem;
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 1.25rem 1rem;
}

@media (max-width: 575.98px) {
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.75rem;
  }
}

.listing-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Fixed frame so rows line up whatever shape the photos are. */
.listing-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--hsc-radius);
  background: var(--hsc-purple-wash);
}

.listing-card__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hsc-muted);
  font-size: 0.8125rem;
}

.listing-card__body {
  padding-top: 0.5rem;
}

.listing-card__price {
  min-height: 1.4em;
  font-weight: 700;
  color: var(--hsc-ink);
}

.listing-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
}

.listing-card__meta {
  color: var(--hsc-muted);
  font-size: 0.8125rem;
}

.pagination {
  --bs-pagination-color: var(--hsc-purple);
  --bs-pagination-hover-color: var(--hsc-purple-bright);
  --bs-pagination-focus-color: var(--hsc-purple-bright);
  --bs-pagination-disabled-color: var(--hsc-muted);
}

.filter-price {
  width: 7.5rem;
}