/* ==========================================================================
   brands.css — page layer for the /brands directory, brand and brand-category
   pages. Loads AFTER tokens.css and bundle.css (Simply C2 Design System).

   Rules for this file:
   - Only layout and the few patterns bundle.css does not have. Colours, type,
     spacing and radii come from tokens (var(--…)), never raw values.
   - Every class is prefixed .bd- (brands directory) so nothing collides with
     the WordPress header/footer the layout wraps around the page.
   - No inline styles in the views. If a view needs a new look, add a class here.
   ========================================================================== */

/* ---------- Page shell -------------------------------------------------- */
.bd-page { padding-block: var(--space-8) var(--space-12); }
.bd-page > .sc-container { display: flex; flex-direction: column; gap: var(--space-10); }
.bd-divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ---------- Page head: breadcrumb, eyebrow, H1, category chips ---------- */
.bd-head { display: flex; flex-direction: column; gap: var(--space-3); }
.bd-head .sc-h1 { max-width: 30ch; }
.bd-head .sc-cluster { margin-top: var(--space-2); }
.bd-page ul.sc-cluster { list-style: none; margin: 0; padding: 0; }
@media (max-width: 639px) { .bd-head ul.sc-cluster { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); } .bd-head .sc-chip { white-space: nowrap; } .bd-page .sc-h1 { font-size: 28px; line-height: 34px; } .bd-page .sc-h2 { font-size: 21px; line-height: 27px; } }
.bd-chip-current { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* ---------- Support grid --------------------------------------------------
   DOM order = mobile order: contacts, resolve, reminder, correction.
   Desktop puts contacts/reminder/correction in the left column and the
   "Get this resolved" card in the right column, spanning all three rows. */
.bd-support { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.bd-area-contacts   { grid-area: contacts; }
.bd-area-resolve    { grid-area: resolve; }
.bd-area-reminder   { grid-area: reminder; }
.bd-area-correction { grid-area: correction; }
.bd-support { grid-template-areas: "contacts" "resolve" "reminder" "correction"; }
@media (min-width: 900px) {
  .bd-support {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    grid-template-areas:
      "contacts   resolve"
      "reminder   resolve"
      "correction resolve";
    column-gap: var(--space-10);
  }
  .bd-area-resolve { position: sticky; top: var(--space-6); }
}

/* ---------- Contact list (inside an .sc-card) --------------------------- */
.bd-contacts { list-style: none; margin: 0; padding: 0; }
.bd-contact { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: 14px; border-bottom: 1px solid var(--border); }
.bd-contact:first-child { padding-top: 0; }
.bd-contact:last-child { border-bottom: 0; padding-bottom: 0; }
.bd-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink); }
.bd-icon svg { width: 18px; height: 18px; }
.bd-icon--warm { background: var(--orange-tint); color: var(--orange-text); }
.bd-contact__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-contact__label { font: 500 12px/16px var(--font-sans); color: var(--text-muted); }
.bd-contact__value { font: 700 16px/22px var(--font-sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.bd-contact__value:hover { color: var(--green-link); text-decoration: underline; }
a.bd-contact__value:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.bd-contact__note { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.bd-verified { margin: 0; font: 400 12px/16px var(--font-sans); color: var(--text-muted); }

/* ---------- "Get this resolved" card ------------------------------------ */
.bd-resolve { gap: var(--space-6); }
.bd-option { display: flex; flex-direction: column; gap: 6px; }
.bd-option__title { font: 500 14px/20px var(--font-sans); color: var(--ink); margin: 0; }
.bd-or { display: flex; align-items: center; gap: var(--space-3); font: 500 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.bd-or::before, .bd-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* App journey: three numbered steps joined by a line */
.bd-journey { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); counter-reset: bd-step; }
.bd-journey li { counter-increment: bd-step; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.bd-journey li::before { content: counter(bd-step); position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); border: 2px solid var(--orange); background: var(--surface-card); color: var(--orange-text); font: 700 14px/1 var(--font-sans); }
.bd-journey li + li::after { content: ""; position: absolute; top: 15px; right: calc(50% + 22px); width: calc(100% - 44px + var(--space-3)); height: 2px; background: var(--border); }
.bd-journey strong { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.bd-journey span { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }

.bd-also { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); list-style: none; margin: 0; padding: 0; }
.bd-also li { display: flex; align-items: center; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--ink); }
.bd-also .bd-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.bd-also .bd-icon svg { width: 16px; height: 16px; }

/* ---------- 48-hour reminder card (form) -------------------------------- */
.bd-reminder { gap: 14px; }
.bd-reminder__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.bd-reminder__title { font: 700 16px/22px var(--font-sans); color: var(--ink); margin: 0; }
.bd-reminder__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 480px) { .bd-reminder__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bd-consent { display: flex; align-items: flex-start; gap: var(--space-2); font: 400 12px/17px var(--font-sans); color: var(--text-info); }
.bd-consent input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.bd-field-error { margin: 0; font: 400 12px/16px var(--font-sans); color: var(--error-ink); }
.sc-input[aria-invalid="true"] { border-color: var(--error-line); }
.bd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot, hidden from people */

/* ---------- Brand-side correction panel uses .sc-notice ----------------- */
.bd-correction { display: flex; flex-direction: column; gap: 6px; }
.bd-correction strong { font-weight: 500; color: var(--ink); font-size: 14px; }
.bd-correction .sc-cluster { gap: var(--space-1) var(--space-5); }

/* ---------- Troubleshooting + FAQ --------------------------------------- */
.bd-section { display: flex; flex-direction: column; gap: var(--space-6); }
.bd-section__head { display: flex; flex-direction: column; gap: var(--space-2); }
.bd-two-col { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .bd-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bd-list li { position: relative; padding-left: 18px; font: 400 15px/1.6 var(--font-sans); color: var(--text-lead); }
.bd-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--orange); }

/* ---------- Escalation ladder ------------------------------------------- */
.bd-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .bd-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bd-step { counter-increment: bd-ladder; }
.bd-ladder { counter-reset: bd-ladder; }
.bd-step__head { display: flex; align-items: center; gap: var(--space-3); }
.bd-step__head::before { content: counter(bd-ladder); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--orange-tint); border: 1px solid var(--orange-line); color: var(--orange-text); font: 700 14px/1 var(--font-sans); }
.bd-facts { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-sm); }
.bd-facts div { display: flex; flex-direction: column; gap: 2px; }
.bd-facts dt { font: 500 12px/16px var(--font-sans); color: var(--text-muted); }
.bd-facts dd { margin: 0; font: 700 15px/21px var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.bd-facts dd a { color: var(--ink); text-decoration: none; }
.bd-facts dd a:hover { color: var(--green-link); text-decoration: underline; }
.bd-facts small { display: block; font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.bd-step .bd-list li { font-size: 14px; }
.bd-step__cta { margin-top: auto; }

.bd-tips { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .bd-tips { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* ---------- Directory ---------------------------------------------------- */
.bd-dir-hero { display: flex; flex-direction: column; gap: var(--space-4); }
.bd-dir-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.bd-country { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.bd-country .sc-select { width: auto; min-width: 160px; height: 40px; padding-right: 32px; }
.bd-search { display: flex; gap: var(--space-3); max-width: 640px; }
.bd-search .sc-input { font-family: var(--font-sans); font-size: 15px; }
.bd-search .sc-btn { flex: none; height: var(--control-height); }
.bd-search-status { margin: 0; min-height: 20px; }

.bd-dir { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .bd-dir { grid-template-columns: 240px minmax(0, 1fr); } }

.bd-dir-nav { display: flex; flex-direction: column; gap: var(--space-2); }
.bd-dir-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); }
.bd-dir-nav a { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-card); color: var(--ink); text-decoration: none; font: 500 14px/20px var(--font-sans); }
.bd-dir-nav a:hover { border-color: var(--orange); background: var(--orange-tint); }
.bd-dir-nav a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.bd-dir-nav a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bd-dir-nav iconify-icon { font-size: 16px; }
@media (min-width: 900px) {
  .bd-dir-nav { position: sticky; top: var(--space-6); max-height: calc(100vh - var(--space-12)); overflow-y: auto; }
  .bd-dir-nav ul { flex-direction: column; overflow-x: visible; padding-bottom: 0; }
  .bd-dir-nav a { border-color: transparent; background: transparent; white-space: normal; }
}

.bd-groups { display: flex; flex-direction: column; gap: var(--space-8); }
.bd-group { scroll-margin-top: var(--space-6); }
.bd-group__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.bd-group__head iconify-icon { font-size: 18px; }
.bd-group__count { margin-left: auto; }
.bd-subcats { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .bd-subcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bd-subcat { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.bd-subcat h3 { margin: 0 0 4px; font: 500 13px/18px var(--font-sans); color: var(--text-muted); }
.bd-brands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; }
.bd-brands li { font: 400 15px/24px var(--font-sans); }
.bd-brands li:not(:last-child)::after { content: "\00B7"; margin: 0 8px; color: var(--text-muted); }
.bd-brands a { color: var(--green-link); font-weight: 500; text-decoration: none; }
.bd-brands a:hover { text-decoration: underline; }
.bd-brands a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.bd-empty { display: none; }
.bd-empty.is-visible { display: flex; }

.bd-crosslinks { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .bd-crosslinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

[hidden] { display: none !important; }

/* ---------- Preview-only stand-ins (not used in the Razor views) -------- */
.pv-layout { padding: 14px var(--gutter); background: var(--ink); color: var(--on-ink-muted); font: 500 13px/18px var(--font-sans); text-align: center; }