/* ==========================================================================
   Site colour theme: "warm editorial". Loaded on every page by base_hair_v2.html (after style.css).
   Presentation only: no ranking logic, order, weights or data. Colour pairs checked for WCAG AA contrast.
   Palette: ink #13294b, coral #c8431f (actions), amber #f2b24a, teal #0b6b62, cream #fbf6ee, sand #f3e9d8, sage #e3efe9, sky #e6eef8.
   ========================================================================== */
:root {
  --ink: #13294b;
  --navy: #13294b;
  --ink-soft: #4a5568;
  --paper: #fbf6ee;
  --surface: #ffffff;
  --border: #e6dccb;
  --border-soft: #efe6d6;
  --brand: #0b6b62;
  --brand-dark: #0a564f;
  --brand-soft: #dcefe9;
  --brand-tint: #eef6f3;
  --coral: #c8431f;
  --coral-dark: #a8341a;
  --coral-tint: #fbe6df;
  --amber: #f2b24a;
  --amber-tint: #fbefd5;
  --sand: #f3e9d8;
  --sage: #e3efe9;
  --sky: #e6eef8;
  --shadow-card: 0 1px 2px rgba(19,41,75,.05), 0 8px 24px rgba(19,41,75,.06);
  --shadow-raised: 0 22px 54px rgba(8,20,45,.28), 0 4px 12px rgba(8,20,45,.12);
}
body { background: var(--paper); overflow-x: clip; }

/* Header: light, with a four-colour rule across the top */
.site-header { position: relative; background: #fffdf9; box-shadow: 0 1px 0 var(--border); }
.site-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--coral) 0 25%, var(--amber) 25% 50%, var(--brand) 50% 75%, #2f5d9e 75% 100%); }
.wordmark { color: var(--ink); }
.wordmark__accent { color: var(--coral); }
.main-nav__link { color: var(--ink); font-weight: 650; }
.main-nav__link::after { background: var(--coral); }

/* Hero: full-width deep ink band */
.hero--editorial { position: relative; isolation: isolate; padding-bottom: 64px; }
.hero--editorial::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(11,107,98,.42), transparent 70%),
    radial-gradient(800px 420px at 95% 100%, rgba(200,67,31,.22), transparent 70%),
    linear-gradient(180deg, #13294b, #0e2040); }
.hero--editorial .hero__eyebrow { color: var(--amber); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); }
.hero--editorial h1 { color: #fff; }
.hero--editorial .hero__sub { color: #d3def0; }
.hero__promise { color: #fff; }
.hero__promise strong { color: var(--amber); }
.search-card--primary { border: 0; box-shadow: var(--shadow-raised); }
.search-card__step { background: var(--coral); }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--coral-dark); box-shadow: 0 10px 22px rgba(168,52,26,.28); }
.search-field select:focus, .search-field input[type="text"]:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(11,107,98,.16); }
.search-field select, .search-field input[type="text"] { background: #fffdf9; border-color: #d9ccb6; }
.use-location-link { color: var(--brand-dark); }
.search-card__assurance { gap: 8px; border-top: 0; margin-top: 14px; padding-top: 0; justify-content: center; }
.search-card__assurance span { background: var(--sage); color: var(--ink); border-radius: 999px; padding: 5px 14px; font-weight: 650; }
.search-card__assurance .assurance--lead { background: var(--brand); color: #fff; }
.hero__coverage { color: #b9c8de; }

/* Section kickers and headings */
.section-kicker { color: var(--coral-dark); }
.hero--editorial .section-kicker { color: var(--amber); }
h2 { color: var(--ink); }

/* Example ranking: warm sand panel behind the real ranking */
.example-ranking { background: var(--sand); border-radius: 24px; padding: clamp(22px, 3.5vw, 40px); margin: 56px 0; }
.example-ranking .text-link { color: var(--coral-dark); font-weight: 750; }

/* Category groups: each family has its own colour */
.family { --fam: #13294b; --fam-tint: #e3e8f0; border: 1px solid var(--border); border-left: 6px solid var(--fam); background: #fffdf9; }
.family[open] { background: var(--fam-tint); border-color: var(--fam); }
.family > summary { color: var(--ink); }
.family > summary::after { color: var(--fam); }
.family__name::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--fam); margin-right: 12px; vertical-align: -1px; }
.family__count { background: rgba(19,41,75,.07); border-radius: 999px; padding: 2px 10px; color: var(--ink); }
.family-list > .family:nth-child(1)  { --fam: #b5541f; --fam-tint: #f9e8dc; }
.family-list > .family:nth-child(2)  { --fam: #0b6b62; --fam-tint: #dcefe9; }
.family-list > .family:nth-child(3)  { --fam: #a23d6b; --fam-tint: #f6e3ec; }
.family-list > .family:nth-child(4)  { --fam: #8a6a12; --fam-tint: #f6edcf; }
.family-list > .family:nth-child(5)  { --fam: #2f5d9e; --fam-tint: #e0eaf7; }
.family-list > .family:nth-child(6)  { --fam: #2e7d3f; --fam-tint: #e1f1e3; }
.family-list > .family:nth-child(7)  { --fam: #c0392b; --fam-tint: #fbe3df; }
.family-list > .family:nth-child(8)  { --fam: #7a4fa3; --fam-tint: #ece3f6; }
.family-list > .family:nth-child(9)  { --fam: #13294b; --fam-tint: #e3e8f0; }
.family-list > .family:nth-child(10) { --fam: #b7791f; --fam-tint: #fbefd5; }
.family-list > .family:nth-child(11) { --fam: #5b6472; --fam-tint: #e9ebef; }
.category-card { background: #fff; border-color: rgba(19,41,75,.10); }
.category-card:hover { border-color: var(--fam); box-shadow: 0 6px 16px rgba(19,41,75,.10); }
.category-card__go { color: var(--fam); }
.category-card:focus-visible, .pill:focus-visible, .province-grid__item:focus-visible, .family > summary:focus-visible { outline-color: rgba(200,67,31,.45); }

/* Why Top10Easy */
.trust-grid__intro { background: linear-gradient(160deg, #13294b, #0e2040); }
.trust-grid__intro .section-kicker { color: var(--amber); }
.trust-card { border-color: var(--border); }
.trust-card__icon { background: var(--amber-tint); color: #7a4d00; }
.trust-card:nth-child(3) .trust-card__icon { background: var(--sage); color: var(--brand-dark); }
.trust-card:nth-child(4) .trust-card__icon { background: var(--coral-tint); color: var(--coral-dark); }

/* Popular places and provinces */
.section--soft { background: var(--sky); }
.pill { background: #fff; border-color: rgba(19,41,75,.14); color: var(--ink); }
.pill:hover { border-color: var(--coral); color: var(--coral-dark); }
.province-grid__item { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--amber); }
.province-grid__item:hover { border-color: var(--coral); border-top-color: var(--coral); }
.province-grid__arrow { color: var(--coral); }

/* Mobile menu: a tidy 2 x 2 grid instead of wrapped tiles */
@media (max-width: 640px) {
  .main-nav { grid-template-columns: repeat(2, 1fr); }
  .main-nav__link { border-left: 0; border-top: 1px solid var(--border-soft); font-size: .95rem; padding: 13px 8px; white-space: normal; }
  .main-nav__link:nth-child(-n+2) { border-top: 0; }
  .main-nav__link:nth-child(even) { border-left: 1px solid var(--border-soft); }
}

/* Footer: deep ink */
.site-footer { background: #0e2040; color: #cbd6ea; border-top: 0; margin-top: 56px; }
.site-footer p { color: #cbd6ea; }
.site-footer a { color: #fff; }
.site-footer__linkbtn { color: #fff; }

/* Consent banner keeps the same look */
.consent-banner .btn-secondary { border-color: var(--ink); color: var(--ink); }


/* ==========================================================================
   Inner pages: rankings, profiles, page headers
   ========================================================================== */
/* Ranking pages: full-width ink band behind the page title and the trust panel */
.ranking-header { position: relative; isolation: isolate; padding-bottom: 44px; margin-bottom: 32px; }
.ranking-header::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  background:
    radial-gradient(700px 320px at 8% 0%, rgba(11,107,98,.40), transparent 70%),
    radial-gradient(700px 360px at 100% 100%, rgba(200,67,31,.20), transparent 70%),
    linear-gradient(180deg, #13294b, #0e2040); }
.ranking-header h1 { color: #fff; }
.ranking-header .section-kicker { color: var(--amber); }
.ranking-header .page-header__lede { color: #d3def0; }
.ranking-header .breadcrumb, .ranking-header .breadcrumb a { color: #b9c8de; }
.ranking-header .breadcrumb a:hover { color: #fff; }
.ranking-header__actions a { color: #fff; }
.ranking-header__actions a:hover { color: var(--amber); }
.ranking-trust-panel { border: 0; box-shadow: var(--shadow-raised); }
.ranking-trust-panel__facts { background: linear-gradient(160deg, #0b6b62, #0a564f); }
.rank-card__score { color: var(--ink); }
.rank-card__link { color: var(--coral-dark); font-weight: 750; }
.ranking-results .rank-card:hover { border-color: var(--coral); }
.pagination__button { border-color: var(--border); color: var(--ink); }
.pagination__button:hover { border-color: var(--coral); color: var(--coral-dark); text-decoration: none; }
.empty-state { background: #fff; border-color: var(--border); }
.empty-state__mark { color: var(--coral); }
.capped-note--editorial { background: var(--amber-tint); border-color: #ecce93; color: #5c3d06; }

/* Other page headers (For businesses, Privacy and similar): warm sand band */
.page-header:has(> h1) { position: relative; isolation: isolate; padding-bottom: 36px; margin-bottom: 28px; }
.page-header:has(> h1)::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: var(--sand); border-bottom: 1px solid var(--border); }

/* Business profile */
.profile-hero--editorial { border-top: 5px solid var(--coral); background: linear-gradient(135deg, #fff 70%, var(--amber-tint)); }
.profile-hero__score { background: linear-gradient(160deg, #13294b, #0e2040); }
.profile-explainer { border-left-color: var(--brand); background: var(--sage); }
.rank-scope { border-top: 4px solid var(--brand); }
.rank-scope:nth-child(2) { border-top-color: var(--coral); }
.rank-scope:nth-child(3) { border-top-color: var(--amber); }
.details-block { background: #fff; border-color: var(--border); }
.details-block summary { color: var(--ink); }
.claim-cta--business { background: var(--sand); border-color: #e2d3b8; }

/* Methodology */
.section-kicker, .method-kicker { color: var(--coral-dark); }

@media (max-width: 640px) {
  .hero--editorial { padding-bottom: 40px; }
  .example-ranking { margin: 40px 0; border-radius: 18px; }
  .search-card__assurance { align-items: flex-start; }
}

/* Business profile: link out to the business's own website and phone */
.profile-hero__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 18px 0 0; }
.profile-hero__visit { width: auto; min-height: 48px; padding: 0 22px; }
.profile-hero__phone { font-weight: 750; color: var(--brand-dark); }
.profile-hero__sitenote { margin: 8px 0 0; font-size: .82rem; color: var(--ink-soft); max-width: 62ch; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }