/* ============================================================
   msx.css — [mantle_subdivision_index] (county A-Z index + town
   directory). 2.9.4: town section is transparent and takes its page
   wrapper's palette/fonts (adapters at the end of this file).
   2.9.3: enqueued by the shortcode itself wherever it renders (county hubs, city pages), defined against tokens.css.
   Does not depend on counties.css (whose .msx block stays for the
   county hubs' legacy load order; this file loads after it and wins).
   Zero JS for the county accordion; the town toggle uses the site's
   .mtl-toggle-btn (components.css, "View All Subdivisions" pattern).
   ============================================================ */

.msx {
  /* county hubs: same geometry as the counties.css block (visually unchanged) */
  margin: 48px auto;
  max-width: 1060px;
  padding: 0 20px;
  box-sizing: border-box;
}
.msx--town {
  /* This is a section of the city page, not a second floating white card.
     Page-local adapters below use only the palette within that wrapper. */
  /* 2.9.4: dark literal fallbacks. The site's dark-body text token is
     near-white and would be invisible on the white city wrappers. */
  --msx-ink: #15313f;
  --msx-muted: #526876;
  --msx-accent: #0a76b6;
  --msx-line: rgba(10, 118, 182, .16);
  --msx-width: 1180px;
  --msx-gutter: 32px;
  --msx-radius: 16px;
  margin: 0 auto;
  width: min(var(--msx-width), calc(100% - var(--msx-gutter)));
  max-width: none;
  padding: clamp(42px, 6vw, 76px) 0;
  background: transparent;
  color: var(--msx-ink);
  border: 0;
  border-radius: 0;
  font-family: inherit;
}
.msx-heading {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  color: #14293a;
  margin: 0 0 8px;
}
.msx-sub {
  color: var(--mantle-gray, #718a94);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 640px;
}
.msx .msx-toggle {
  margin: 0 auto 4px;
  /* 2.9.3 visual pass: narrow page wrappers (Asheboro, Kernersville, Mooresville, Statesville at 390px)
     clipped the nowrap "View All Subdivisions (150)" label — let it wrap. */
  max-width: 100%;
  white-space: normal;
  box-sizing: border-box;
}
.msx-wrap[hidden] {
  display: none;
}
.msx-wrap {
  margin-top: 16px;
}
.msx-group {
  border: 1px solid var(--mantle-c-border, rgba(19, 35, 45, .12));
  border-radius: var(--mantle-radius-sm, 6px);
  margin-bottom: 8px;
  background: #fff;
}
.msx-group[open] {
  box-shadow: var(--mantle-shadow, 0 4px 14px rgba(13, 34, 53, .08));
}
.msx-letter {
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  color: var(--mantle-blue, #0a76b6);
  padding: 12px 18px;
  list-style-position: inside;
  min-height: var(--mantle-tap-min, 44px);
  box-sizing: border-box;
}
.msx-letter:hover,
.msx-letter:focus-visible {
  color: var(--mantle-blue-dark, #085a8f);
}
.msx-letter:focus-visible {
  outline: var(--mantle-focus-ring, 3px solid #0a76b6);
  outline-offset: 2px;
}
.msx-count {
  font-weight: 400;
  color: var(--mantle-gray, #718a94);
  font-size: 14px;
}
.msx-list {
  columns: 3;
  column-gap: 28px;
  padding: 4px 20px 16px;
  margin: 0;
  list-style: none;
}
.msx-list li {
  break-inside: avoid;
  padding: 3px 0;
  font-size: 15px;
  line-height: 1.5;
}
.msx-list a {
  color: #1e2c33;
  text-decoration: none;
}
.msx-list a:hover,
.msx-list a:focus-visible {
  color: var(--mantle-blue, #0a76b6);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .msx-list { columns: 2; }
}
@media (max-width: 560px) {
  .msx { border-radius: var(--mantle-radius-md, 12px); }
  .msx-list { columns: 1; }
}

/* City palette adapters: never redeclare shared --mantle-* tokens on :root. */
:where(.mr-lex-homes, .mr-king, .mr-burlington, .mr-charlotte,
       .mr-lkn, .mr-mocksville, .mr-salisbury, .mr-greensboro,
       .mr-lewisville, .mr-mvl, .mr-ws) .msx--town {
  --msx-ink: var(--mr-dark, var(--mr-ink, #15313f));
  --msx-muted: var(--mr-muted, #536f7d);
  --msx-accent: var(--mr-blue, #0a76b6);
  --msx-line: var(--mr-border, var(--mr-line, rgba(10, 118, 182, .16)));
  --msx-radius: var(--mr-radius, 22px);
  --msx-display: var(--mr-font-head, Gotham Black, Montserrat, Arial, sans-serif);
}
:where(.ash-page-wrap, .stv-page-wrap) .msx--town {
  --msx-ink: var(--mantle-navy, #15313f);
  --msx-muted: var(--mantle-text-soft, #526876);
  --msx-accent: var(--mantle-blue, #0a76b6);
  --msx-line: var(--mantle-border, rgba(10, 118, 182, .12));
  --msx-radius: var(--radius, 18px);
  --msx-display: var(--font-display, Montserrat, Arial, sans-serif);
}
:where(.mcl, .mcp) .msx--town {
  --msx-ink: var(--heading, #0d2235);
  --msx-muted: var(--text-soft, #4f6d7e);
  --msx-accent: var(--blue, #0a76b6);
  --msx-line: var(--border, rgba(10, 118, 182, .13));
  --msx-width: 1280px;
  --msx-gutter: 40px;
  --msx-radius: var(--radius-md, 18px);
  --msx-display: var(--font-display, Georgia, serif);
}
.hrlp .msx--town {
  --msx-ink: var(--navy, #0d2b3a);
  --msx-muted: var(--muted, #5c7480);
  --msx-accent: var(--lake, #0b6376);
  --msx-line: var(--border, rgba(10, 118, 182, .16));
  --msx-display: inherit;
}
.mr-kville-page .msx--town {
  --msx-ink: #15313f;
  --msx-muted: #526876;
  --msx-line: rgba(10, 118, 182, .16);
  --msx-display: Gotham, Montserrat, Arial, sans-serif;
}

/* Two-class selectors deliberately beat the pages' generic h2/p/a rules. */
.msx--town .msx-heading {
  color: var(--msx-ink);
  font-family: var(--msx-display, inherit);
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 16px;
  max-width: 850px;
}
.msx--town .msx-heading::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 18px;
  border-radius: 4px;
  background: var(--mantle-orange, #f69320);
}
.msx--town .msx-sub {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--msx-muted);
  font-size: 1rem;
  line-height: 1.65;
}
.msx--town .msx-toggle {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 14px 24px;
  border: 2px solid var(--msx-accent);
  border-radius: 999px;
  background: var(--msx-accent);
  color: #fff;
  font-family: inherit;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  box-shadow: none;
  transform: none;
}
.msx--town .msx-toggle:hover,
.msx--town .msx-toggle:focus-visible {
  background: #075b8d;
  border-color: #075b8d;
  color: #fff;
  transform: none;
}
.msx--town .msx-toggle:focus-visible,
.msx--town .msx-letter:focus-visible,
.msx--town .msx-list a:focus-visible {
  outline: 3px solid var(--msx-accent);
  outline-offset: 4px;
}
.msx--town .msx-wrap { margin-top: 28px; }
.msx--town .msx-group {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--msx-line);
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}
.msx--town .msx-letter {
  padding: 18px 4px;
  color: var(--msx-ink);
  font-family: inherit;
  font-size: 1.125rem;
}
.msx--town .msx-count { color: var(--msx-muted); }
.msx--town .msx-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
  columns: auto;
  padding: 0 0 24px;
  margin: 0;
  list-style: none;
}
.msx--town .msx-list li { padding: 0; margin: 0; min-width: 0; }
.msx--town .msx-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--msx-line);
  border-radius: min(var(--msx-radius), 12px);
  color: var(--msx-ink);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.msx--town .msx-list a::after { content: "\2192"; flex: 0 0 auto; color: var(--msx-accent); }
.msx--town .msx-list a:hover,
.msx--town .msx-list a:focus-visible { border-color: var(--msx-accent); color: var(--msx-ink); text-decoration: underline; }
@media (max-width: 900px) {
  .msx--town .msx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .msx.msx--town { --msx-gutter: 32px; border-radius: 0; }
  /* 2.9.4: two tile columns on phones (one 41-tile column on Clemmons was
     too long); names wrap inside the tile, targets stay >= 44px. */
  .msx--town .msx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .msx--town .msx-list a {
    min-height: 44px;
    padding: 8px 10px;
    gap: 6px;
    font-size: .875rem;
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .msx--town .msx-toggle { width: 100%; }
}
@media (max-width: 340px) {
  .msx--town .msx-list { grid-template-columns: minmax(0, 1fr); }
}