/* Home page discovery sections (inc/home.php; owner mock-ups and feedback 10 Oct 2026): search band, Featured (photo
   cards + "Advertise with us"), top vendor categories, vendor cards. Headings and "All …" links are
   Bricks elements; these style the card markup from the {sv_home_*} tags. Front page only. */

.home-sr {
  position: absolute;
  overflow: hidden;
  inline-size: 1px;
  block-size: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Search band: under the hero, full width with a line below, the bar one pill ---- */
.home-search-band {
  padding-block: var(--space-s);
  border-block-end: 1px solid var(--neutral-light);
}
.home-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  /* Owner reference: separate pieces on the band (grey switch, bordered keywords box, location, Search), no outer pill. */
}
.home-search__type {
  display: inline-grid;
  grid-template-columns: 1fr 1fr; /* both halves the same width */
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-circle);
  background: var(--neutral-ultra-light);
}
.home-search__type label {
  position: relative;
  margin-block-end: 0; /* theme labels carry a bottom margin that pushes the pills off-centre in the track */
}
.home-search__type input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.home-search__type span {
  display: grid;
  place-items: center;
  min-block-size: calc(2.75rem - 8px); /* the 4px track padding brings the switch to the 2.75rem of the keywords box */
  padding: 0 var(--space-s);
  border-radius: var(--radius-circle);
  color: var(--text-dark, var(--neutral-ultra-dark));
  font-size: var(--text-s);
  font-weight: 600;
}
.home-search__type input:checked + span {
  background: var(--primary-dark);
  color: var(--white);
}
.home-search__type input:focus-visible + span {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.home-search .home-search__input { /* (doubled class: beats the theme input border at every width) */
  flex: 1 1 12rem;
  min-inline-size: 0;
  min-block-size: 2.75rem;
  padding: 0 var(--space-s);
  border: 2px solid var(--neutral-light); /* owner choice (2px) */
  border-radius: var(--radius-m);
  background: var(--white);
  color: var(--text-dark, var(--neutral-ultra-dark));
  font: inherit;
}
.home-search__place {
  display: flex;
  align-items: center;
}
.home-search__locate,
.home-search__tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-xs) / 1.5);
  min-block-size: 2.75rem;
  padding: 0 var(--space-s);
  border: 0;
  border-radius: var(--radius-circle);
  background: none;
  color: var(--primary-dark);
  font: inherit;
  font-size: var(--text-s);
  font-weight: 600;
}
.home-search__locate {
  cursor: pointer;
}
.home-search__locate[disabled] {
  cursor: progress;
  opacity: .6;
}
.home-search__locate[hidden],
.home-search__tag[hidden] {
  display: none;
}
.home-search__tag {
  padding-inline-end: 4px;
  background: var(--primary-ultra-light, var(--neutral-ultra-light));
}
.home-search__clear {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--text-dark, var(--neutral-ultra-dark));
  font: inherit;
  cursor: pointer;
}
.home-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* text centred when the button stretches (phones) */
  min-block-size: 2.75rem;
  padding: 0 var(--space-l);
  border: 0;
  border-radius: var(--radius-circle);
  background: var(--accent);
  color: var(--bg-dark, var(--neutral-ultra-dark));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.home-search :is(.home-search__input, .home-search__locate, .home-search__clear, .home-search__submit):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
/* Phones: the switch and the keywords on their own rows; location and Search share the last. */
@media (max-width: 599px) {
  .home-search__type,
  .home-search .home-search__input {
    flex-basis: 100%;
  }
  .home-search__type label {
    flex: 1;
  }
  .home-search__submit {
    flex: 1;
  }
}

/* "Near Markham, ON" pill beside the Featured heading once located (home.js). */
.home-near {
  margin: 0 auto 0 0;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-circle);
  background: var(--primary-ultra-light, var(--neutral-ultra-light));
  color: var(--primary-dark);
  font-size: var(--text-s);
  font-weight: 600;
}
.home-near:empty {
  display: none;
}

/* ---- Card grids: the site's market / vendor cards (Bricks loops), 4 to a row ---- */
.home-grid {
  display: grid;
  align-items: stretch; /* (Bricks blocks default to flex-start): equal-height cards */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .home-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .home-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 479px) {
  .home-grid--featured {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Equal-height cards, date bands lined up (as in Related Markets): each loop item is a Bricks block (a flex column),
   so the card shell grows to fill it rather than relying on height: 100%. */
.home-grid > li {
  display: flex;
  flex-direction: column;
}
.home-grid > li > .market-card-shell,
.home-grid > li > .vendor-card-shell {
  flex: 1;
}
.home-grid .market-card__city {
  margin-block-end: var(--space-s); /* room above the date band, as in Related Markets */
}

/* Locate me: the cards on the page shimmer until the area's cards replace them. The market card has this built in
   (.is-loading .market-card, market-card.css); the vendor card's is scoped to its archive, so the same here. */
.home-grid.is-loading .vendor-card {
  pointer-events: none;
  opacity: .7;
}
@media (prefers-reduced-motion: no-preference) {
  .home-grid.is-loading .vendor-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(100deg, transparent 20%, var(--white-trans-60) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: home-shimmer 1.2s linear infinite;
  }
}
@keyframes home-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* "Advertise with us" tile (Bricks elements): dark, icon, text, one link covering the tile. */
.home-advertise {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
  min-block-size: 12rem;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--card-radius, var(--radius-l));
  background: var(--bg-dark, var(--neutral-ultra-dark));
  color: var(--white);
}
/* Icon in a light-teal tile, like the "Looking for vendors?" card's store icon. */
.home-advertise__icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: calc(var(--space-xs) / 2);
  border-radius: var(--radius-m);
  background: var(--primary-ultra-light, var(--neutral-ultra-light));
  color: var(--primary-dark);
  line-height: 0;
}
.home-advertise__icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}
.home-advertise__title {
  margin: 0;
  color: inherit;
  font-size: var(--text-m);
  line-height: 1.25;
}
.home-advertise__text {
  margin: 0;
  font-size: var(--text-s);
  line-height: 1.45;
}
.home-advertise__link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
/* (Doubled class: the site's link hover colour turned it dark on the dark tile.) */
.home-advertise .home-advertise__link:hover,
.home-advertise .home-advertise__link:focus-visible {
  color: var(--accent-hover, var(--accent));
  text-decoration: none;
}
.home-advertise__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.home-advertise:has(a:focus-visible) {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.home-advertise__link:focus-visible {
  outline: none;
}

/* ---- Top vendor categories (compact) ---- */
.home-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-categories__tile {
  display: grid;
  block-size: 100%;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-m);
  background: var(--secondary-ultra-light, var(--neutral-ultra-light));
  color: var(--text-dark, var(--neutral-ultra-dark));
  text-decoration: none;
}
.home-categories__tile:hover {
  outline: 1px solid var(--primary-dark);
}
.home-categories__tile:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.home-categories__name {
  font-weight: 600;
}
.home-categories__count {
  color: var(--text-dark-muted);
  font-size: var(--text-s);
}

/* ---- Bricks section layout (classes set by staging-scripts/apply-home-sections-staging.php) ---- */
/* Bricks containers don't stretch their children: the bar, grids and lists take the full width. */
:is(.home-search-band, .home-featured-section, .home-categories-section, .home-vendors-section) > .brxe-container > * {
  inline-size: 100%;
}
/* Headings sit close to their cards (Bricks' container gap was wide). */
:is(.home-featured-section, .home-categories-section, .home-vendors-section) > .brxe-container {
  row-gap: var(--space-s);
}
.home-featured-section {
  padding-block: var(--space-xl) var(--space-xxl);
}
/* Categories on a subtle full-width band, for separation. */
.home-categories-section {
  padding-block: var(--space-l) var(--space-xl);
  background: var(--secondary-ultra-light, var(--neutral-ultra-light));
}
.home-categories-section .home-categories__tile {
  background: var(--white);
}
.home-vendors-section {
  padding-block: var(--space-xl) var(--space-xl);
}
.home-section__head {
  display: flex;
  flex-direction: row; /* (Bricks blocks are columns by default) */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-s);
  margin: 0;
}
.home-section__head h2 {
  margin: 0;
  font-size: var(--h3);
}

/* ---- Why choose Sidville (Bricks section hwhy; owner mock-up + revision 11 Oct 2026) ----
   Three columns: the text (eyebrow, heading, lead, "New to Sidville?"), then the vendors and organizers cards.
   Buttons are ACSS's (btn--primary, btn--outline); only their place in the card is set here. */
.why-choose {
  padding-block: var(--space-xxl);
}
.why-choose > .brxe-container > * {
  inline-size: 100%;
}
.why-choose__body {
  display: grid;
  align-items: stretch; /* (Bricks blocks default to flex-start): equal-height cards */
  gap: var(--space-m);
}
@media (min-width: 768px) {
  .why-choose__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .why-choose__intro {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1100px) {
  .why-choose__body {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-l);
  }
  .why-choose__intro {
    grid-column: auto;
  }
}
.why-choose__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-s);
}
.why-choose__eyebrow {
  margin: 0;
  color: var(--primary-dark);
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.why-choose__title {
  margin: 0;
  font-size: var(--h2);
  line-height: 1.12;
}
.why-choose__lead {
  margin: 0;
  color: var(--text-dark-muted);
  font-size: var(--text-m);
}
.why-choose__foot {
  margin: var(--space-xs) 0 0;
  color: var(--text-dark-muted);
}
.why-choose__foot a {
  color: var(--primary-dark);
  font-weight: 700;
  text-underline-offset: .2em;
}
/* Audience cards: light teal (vendors) and neutral (organizers), check lists, the button at the bottom. */
.why-choose__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-l);
}
.why-choose__card--vendors {
  background: var(--primary-ultra-light, var(--neutral-ultra-light));
}
.why-choose__card--organizers {
  background: var(--neutral-ultra-light);
}
.why-choose__card-title {
  margin: 0;
  font-size: var(--h4);
  line-height: 1.2;
}
.why-choose__list {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.why-choose__list li {
  position: relative;
  padding-inline-start: 1.75em;
}
.why-choose__list li::before {
  content: "";
  position: absolute;
  inset-block-start: .3em;
  inset-inline-start: 0;
  inline-size: 1.1em;
  block-size: 1.1em;
  background: var(--primary-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.why-choose__cta {
  align-self: flex-start;
  margin-block-start: auto; /* the button sits at the bottom, so both cards' buttons line up */
  white-space: nowrap;
}