/**
 * Design System — Content pages, search, 404, FAQ (Phase G)
 *
 * Retokens the static content templates and the search / 404 / FAQ surfaces.
 * Where the legacy CSS uses var(--lbc-*), we remap those within these scopes;
 * hardcoded values are overridden explicitly. Loads after pages.css.
 *
 * @package Longboardcenter
 */

/* Remap legacy palette/type within content scopes */
.service-content,
.entry-content,
.page-content,
.faq-page,
.search-results,
.no-results,
.error-404,
.search-header{
  --lbc-orange:#FF4A1C;       /* = var(--c-accent) */
  --lbc-orange-dark:#D63A10;  /* = var(--c-accent-deep) */
  --lbc-font-heading:var(--font-display);
}

/* Reading layout: constrained line length + heading hierarchy */
.entry-content,
.page-content,
.service-content{color:var(--c-ink)}
.entry-content p,
.page-content p,
.service-content p{max-width:72ch}
.entry-content h1,.entry-content h2,.entry-content h3,
.page-content h1,.page-content h2,.page-content h3,
.service-content h2,.service-content h3{font-family:var(--font-display);color:var(--c-ink);letter-spacing:-.01em}
.entry-content a,
.page-content a,
.service-content a{color:var(--c-accent-deep)}

/* Content accordion (FAQ blocks in pages) -> shared look */
.entry-content details,
.page-content details,
.faq-page details{border-bottom:1px solid var(--c-line)}
.entry-content details summary,
.page-content details summary,
.faq-page summary{font-family:var(--font-display);color:var(--c-ink)}

/* FAQ page */
.faq-hero__title{font-family:var(--font-display);color:var(--c-ink)}
.faq-hero__subtitle{color:var(--c-ink-soft)}
.faq-quicklink{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-lg);color:var(--c-ink)}
.faq-quicklink:hover{border-color:var(--c-ink)}
.faq-quicklink__icon{color:var(--c-accent)}
.faq-section__title,
.faq-category__title{font-family:var(--font-display);color:var(--c-ink)}
.faq-item__question{color:var(--c-ink);font-family:var(--font-body);font-weight:600}
.faq-item__icon{color:var(--c-accent)}
.faq-item__answer{color:var(--c-ink-soft)}

/* Contact details / form */
.contact-form .input,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;font-family:var(--font-body);font-size:var(--fs-base);color:var(--c-ink);
  background:var(--c-paper);border:1.5px solid var(--c-line-strong);border-radius:var(--r-md);padding:12px 14px;
}
.contact-form input:focus,
.contact-form textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-wash)}

/* ==========================================================================
   SEARCH RESULTS
   ========================================================================== */
.search-title{font-family:var(--font-display);color:var(--c-ink);letter-spacing:-.01em}
.search-title .text-orange{color:var(--c-accent)}
.search-count{color:var(--c-ink-soft);font-size:var(--fs-sm)}
.search-results{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media(max-width:1024px){.search-results{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.search-results{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}}

/* Post (non-product) result card on tokens */
.search-results .card{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden}
.search-results .card-title a{color:var(--c-ink);text-decoration:none}
.search-results .card-title a:hover{color:var(--c-accent-deep)}
.search-results .card-excerpt{color:var(--c-ink-soft)}
.search-results .badge-outline{border:1px solid var(--c-line-strong);color:var(--c-ink-faint);border-radius:var(--r-pill)}

/* No-results / 404 empty states */
.no-results,
.error-404{color:var(--c-ink-soft)}
.no-results h2,
.error-404__title{font-family:var(--font-display);color:var(--c-ink)}
.no-results__icon svg,
.error-404__icon svg{color:var(--c-ink-faint)}
.error-404__cats{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-4)}
.error-404__cat{
  display:inline-flex;padding:8px 16px;border:1.5px solid var(--c-line-strong);border-radius:var(--r-pill);
  background:var(--c-paper);color:var(--c-ink);font-size:var(--fs-sm);font-weight:600;text-decoration:none;
}
.error-404__cat:hover{border-color:var(--c-ink);color:var(--c-accent-deep)}
.error-404 .form-input,
.no-results .form-input{
  width:100%;max-width:400px;font-family:var(--font-body);font-size:var(--fs-base);color:var(--c-ink);
  background:var(--c-paper);border:1.5px solid var(--c-line-strong);border-radius:var(--r-md);padding:12px 14px;
}
.error-404 .form-input:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-wash)}