/* hc-world.css — loaded last via document_head.hbs (after style.css).
   Brand alignment, alert/tooltip/footer/article overrides, and home page elements.
   The landing page has its own hc-landing.css. */

/* ── 1. World brand alignment ───────────────────────────── */
/* No deep black: off-black #33312E */
.header-cta { background: #33312E; }
.header-cta:hover { background: #45423E; }
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="1"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="4"] .apl-feat-banner { background: #33312E; }
/* World Blue instead of teal for the cycling accent tile */
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="0"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="3"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="6"] .apl-feat-banner { background: linear-gradient(135deg, #3FDBED 0%, #BDEFF4 100%); }
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="0"] .apl-feat-banner-fallback img,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="3"] .apl-feat-banner-fallback img,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="6"] .apl-feat-banner-fallback img { filter: brightness(0) opacity(0.8); }

/* ── 2. Alert banner scrolls away (was sticky and obstructed the header) ── */
.apl-alert-banner[data-active="1"] { position: relative !important; top: auto !important; }

/* Glossary tooltip: fully opaque */
.hc-glossary-tooltip {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 20px 48px rgba(0,0,0,0.18) !important;
  isolation: isolate; z-index: 60;
}
.hc-glossary-tooltip::after { border-top-color: #FFFFFF !important; }

/* Footer legal row */
.hc-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 20px 0 8px; margin-top: 16px; border-top: 0.5px solid rgba(0,0,0,0.08);
  font-size: 12px; color: #6B6A68;
}
.hc-legal-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.hc-legal-links a { color: #6B6A68; text-decoration: none; }
.hc-legal-links a:hover { color: #33312E; }

/* End-of-article contact strip */
.article-contact {
  margin: 32px 0; padding: 24px 28px; border-radius: 14px; background: #33312E; color: #F9F9F8;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.article-contact__title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 4px; color: inherit; }
.article-contact__desc { font-size: 14px; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.45; }
.article-contact__btn {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  background: #F9F9F8; color: #33312E; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.article-contact__btn:hover { color: #33312E; text-decoration: none; transform: translateY(-1px); }

/* ── 3. Home page elements ───────────────
   Tokens follow the handoff: bg #F9F9F8, surface #FFF, text #33312E, muted #575654,
   subtle #6B6A68 (darkened from #848382 for 4.5:1 text contrast), hairline rgba(0,0,0,.06), accent #007CFB. */
.hc-hero-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #6B6A68; margin: 0 0 16px; }
.hc-hero-eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hc-hero-eyebrow a:hover { color: #33312E; }

.apl-section-title--with-sub { margin-bottom: 4px; }
.hc-section-sub { font-size: 14px; color: #575654; margin: 0 0 24px; }

/* Popular chips (built from the popular_keywords setting) */
.hc-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 16px auto 0; max-width: 560px; }
.hc-chips-label { font-size: 13px; color: #575654; }
.hc-chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: #FFFFFF; border: 0.5px solid rgba(0,0,0,0.06); font-size: 13px; color: #575654; text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}
.hc-chip:hover { border-color: #33312E; color: #33312E; text-decoration: none; }

/* Topic cards: "Browse →" affordance pinned to the card bottom */
.hc-card-more { margin-top: auto; padding-top: 4px; font-size: 12px; color: #6B6A68; display: inline-flex; align-items: center; gap: 4px; }

/* Featured band: hairlines top and bottom, as in the prototype */
.apl-featured { border-top: 0.5px solid rgba(0,0,0,0.06); border-bottom: 0.5px solid rgba(0,0,0,0.06); }

/* Most asked: two-column numbered list */
.hc-qsection { background: #F9F9F8; padding: 32px 0 24px; }
.hc-qsection[hidden] { display: none; }
.hc-qlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 0.5px solid rgba(0,0,0,0.06); }
.hc-qlist li { margin: 0; }
.hc-qitem {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 16px 4px;
  border-bottom: 0.5px solid rgba(0,0,0,0.06); font-size: 15px; color: #33312E; text-decoration: none;
  transition: padding 160ms cubic-bezier(.2,.7,.25,1);
}
.hc-qitem:hover { padding-left: 10px; color: #33312E; text-decoration: none; }
.hc-qnum { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: #6B6A68; min-width: 22px; }
.hc-qtitle { flex: 1; line-height: 1.3; }
.hc-qtag { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(0,124,251,0.08); color: #0060C8; font-weight: 500; white-space: nowrap; }
@media (max-width: 720px) { .hc-qlist { grid-template-columns: 1fr; } }

/* Help strip / "New to World?" strip */
.hc-strip-wrap { background: #F9F9F8; padding: 0 0 32px; }
.hc-strip-wrap--end { padding: 24px 0 64px; }
.hc-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 20px 22px; border-radius: 14px; background: #FFFFFF; border: 0.5px solid rgba(0,0,0,0.06);
}
.hc-strip--dark { background: #33312E; border-color: #33312E; color: #F9F9F8; }
.hc-strip-title { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 4px; color: inherit; }
.hc-strip-desc { font-size: 13px; line-height: 1.4; margin: 0; color: #575654; }
.hc-strip--dark .hc-strip-desc { color: rgba(255,255,255,0.7); }
.hc-strip-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  background: #33312E; color: #F9F9F8; font-size: 13px; font-weight: 500; text-decoration: none; transition: opacity 160ms ease;
}
.hc-strip-btn:hover { opacity: 0.85; color: #F9F9F8; text-decoration: none; }
.hc-strip--dark .hc-strip-btn { background: #F9F9F8; color: #33312E; }
.hc-strip--dark .hc-strip-btn:hover { color: #33312E; }


/* v125: help center root has two views (landing / topics); document_head.hbs picks one before paint. */
#hc-topics-view { display: none; }
html.hc-view-topics #hc-topics-view { display: block; }
html.hc-view-topics #hc-landing-view { display: none; }


/* v127: landing view has no search and no header button; those belong to a help center, not the gateway */
html.hc-landing .header-cta { display: none !important; }
html.hc-landing .navbar .search { display: none !important; }

/* v128: landing shows "World Help Center" in the header; the HC's own name returns on every other page */
.navbar-tagline-landing { display: none; }
html.hc-landing .navbar-tagline { display: none; }
html.hc-landing .navbar-tagline-landing { display: inline; }

/* v130: header on the landing = World icon + "World Help Center"; elsewhere = the help center's own icon and name */
.navbar-logo-landing { display: none; width: 32px; height: 32px; flex-shrink: 0; color: #1F1F1F; }
html.hc-landing #logo { display: none !important; }
html.hc-landing .navbar-logo-landing { display: block; }