/* ClubRight Help centre, styled as part of clubright.co.uk: the same tokens (Fire Orange, Charcoal,
   the grey scale, 12px and 20px radii), Poppins up to 900, the white sticky nav, pill search,
   eyebrow labels, bordered cards that lift on hover and the charcoal footer. One page column for
   every page; an article sits beside the rest of its category on wide screens and above it on
   tablets and phones. */
:root {
    --o: #F06726;
    --od: #C94F15;
    --ol: #FFF3EC;
    --o-tint: rgba(240, 103, 38, .1);
    --c: #494B4F;
    --cl: #6B6D72;
    --w: #FFFFFF;
    --g0: #FAFAFA;
    --g1: #F4F4F5;
    --g2: #E4E4E7;
    --g3: #D0D0D4;
    /* Text links and buttons are Dark Orange: Fire Orange on white is 3.15:1, under the 4.5:1
       that body text needs. Fire Orange stays for large headings, icons and borders. */
    --link: #C94F15;
    --r: 12px;
    --rl: 20px;
    --sh: 0 4px 24px rgba(73, 75, 79, .1);
    --shl: 0 12px 48px rgba(73, 75, 79, .16);
    --column: 1160px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--w); color: var(--c);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased;
    display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--c); }
h1, h2, h3 { color: var(--c); }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.hc-nav {
    position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--g2);
}
.hc-nav__inner {
    max-width: calc(var(--column) + 96px); margin: 0 auto; padding: 0 48px; height: 68px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hc-nav__brand { display: inline-flex; align-items: center; gap: 14px; color: var(--c); }
.hc-nav__brand img { height: 33px; width: auto; display: block; }
.hc-nav__label {
    font-size: 15px; font-weight: 700; color: var(--c); letter-spacing: -.01em;
    padding-left: 14px; border-left: 1px solid var(--g3); line-height: 1.4;
}
.hc-nav__brand:hover .hc-nav__label { color: var(--link); }
.hc-btn {
    display: inline-block; font-size: 14px; font-weight: 700; color: var(--w); background: var(--od);
    padding: 10px 22px; border-radius: 8px; white-space: nowrap; transition: background .2s, transform .15s;
}
.hc-btn:hover { color: var(--w); background: #A8410F; transform: translateY(-1px); }

/* ── Hero and search ────────────────────────────────────────────────────── */
.hc-hero { background: var(--g0); border-bottom: 1px solid var(--g2); padding: 20px 24px; }
.hc-hero--home { background: var(--w); border-bottom: 0; padding: 72px 24px 40px; }
.hc-hero__inner { max-width: var(--column); margin: 0 auto; }
.hc-hero__title {
    font-size: clamp(32px, 4.4vw, 52px); font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
    margin: 0 0 26px;
}
.hc-hero__title em { color: var(--o); font-style: normal; }

.hc-search { position: relative; max-width: 560px; }
.hc-hero--home .hc-search { max-width: 640px; }
.hc-search input {
    width: 100%; border: 2px solid var(--g2); border-radius: 100px; background: var(--w); color: var(--c);
    padding: 12px 22px 12px 50px; font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none; appearance: none;
}
.hc-hero--home .hc-search input { padding: 16px 24px 16px 56px; font-size: 16px; }
.hc-search input::placeholder { color: var(--cl); }
.hc-search input:focus { outline: none; border-color: var(--o); box-shadow: 0 0 0 4px var(--o-tint); }
.hc-search button {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    border: 0; background: none; color: var(--cl); cursor: pointer; display: flex; padding: 4px;
}
.hc-search button svg { width: 20px; height: 20px; }
.hc-hero--home .hc-search button { left: 20px; }

.hc-main { flex: 1; }

/* ── Category grid (home) ──────────────────────────────────────────────── */
.hc-grid {
    max-width: calc(var(--column) + 48px); margin: 0 auto 80px; padding: 0 24px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.hc-card {
    position: relative; overflow: hidden; background: var(--w); border: 1px solid var(--g2);
    border-radius: var(--rl); padding: 26px 24px 22px; color: var(--c);
    display: flex; flex-direction: column; gap: 4px; transition: transform .25s, box-shadow .25s;
}
.hc-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--o);
    transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.hc-card:hover { color: var(--c); transform: translateY(-4px); box-shadow: var(--shl); }
.hc-card:hover::after { transform: scaleX(1); }
.hc-card__icon {
    color: var(--o); background: var(--o-tint); border-radius: var(--r); width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center; flex: none; margin-bottom: 16px;
}
.hc-card__icon svg { width: 26px; height: 26px; }
.hc-card h2 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; line-height: 1.35; margin: 0; }
.hc-card p { font-size: 14px; color: var(--cl); line-height: 1.6; margin: 4px 0 0; flex: 1; }
.hc-card__count { font-size: 13px; font-weight: 700; color: var(--link); margin-top: 18px; display: inline-flex; gap: 5px; transition: gap .2s; }
.hc-card__count::after { content: '\2192' / ''; }
.hc-card:hover .hc-card__count { gap: 9px; }

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.hc-breadcrumbs {
    max-width: calc(var(--column) + 48px); margin: 36px auto 0; padding: 0 24px;
    font-size: 14px; font-weight: 600; color: var(--cl); display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.hc-breadcrumbs a { color: var(--cl); }
.hc-breadcrumbs a:hover { color: var(--link); }
.hc-breadcrumbs > span:last-child { color: var(--c); }
.hc-breadcrumbs__sep { color: var(--g3); }

/* ── Category page ──────────────────────────────────────────────────────── */
.hc-category, .hc-search-results { max-width: calc(var(--column) + 48px); margin: 0 auto; padding: 24px 24px 80px; }
.hc-category__head { display: flex; gap: 20px; align-items: flex-start; margin: 10px 0 30px; }
.hc-category__head .hc-card__icon { width: 60px; height: 60px; margin: 0; border-radius: 16px; }
.hc-category__head .hc-card__icon svg { width: 30px; height: 30px; }
.hc-category h1, .hc-search-results h1 {
    font-size: clamp(28px, 3.4vw, 42px); font-weight: 900; letter-spacing: -.03em; margin: 0 0 6px; line-height: 1.12;
}
.hc-category__desc { color: var(--cl); font-size: 16px; margin: 6px 0 0; max-width: 640px; }
.hc-category__count { color: var(--cl); font-size: 13.5px; margin: 8px 0 0; }
.hc-search-results__count { color: var(--cl); font-size: 13.5px; margin: 8px 0 26px; }

.hc-article-list, .hc-search-results__list {
    list-style: none; margin: 0; padding: 0; background: var(--w);
    border: 1px solid var(--g2); border-radius: var(--rl); overflow: hidden;
}
.hc-article-list li + li, .hc-search-results__list li + li { border-top: 1px solid var(--g2); }
.hc-article-list a, .hc-search-results__list a {
    display: flex; align-items: center; gap: 16px; padding: 18px 24px; color: var(--c); transition: background .15s;
}
.hc-article-list a:hover, .hc-search-results__list a:hover { background: var(--g0); color: var(--c); }
.hc-article-list a:hover h3, .hc-search-results__list a:hover h3 { color: var(--link); }
.hc-article-list__text { flex: 1; min-width: 0; }
.hc-article-list h3, .hc-search-results__list h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; transition: color .15s; }
.hc-article-list p, .hc-search-results__list p { margin: 4px 0 0; font-size: 14px; color: var(--cl); }
.hc-article-list__chevron { color: var(--o); flex: none; transition: transform .2s; }
.hc-article-list a:hover .hc-article-list__chevron, .hc-search-results__list a:hover .hc-article-list__chevron { transform: translateX(3px); }
.hc-empty {
    color: var(--c); background: var(--g0); border: 1px solid var(--g2); border-radius: var(--rl); padding: 22px 26px;
}

/* ── Article ────────────────────────────────────────────────────────────── */
/* The article column stays near 760px on a wide screen so lines stay readable, as the blog's
   posts do; the category's other articles fill the space beside it. */
.hc-article-layout {
    max-width: calc(var(--column) + 48px); margin: 0 auto; padding: 24px 24px 64px;
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 60px; align-items: start;
}
.hc-article { min-width: 0; }
.hc-article__header { margin-bottom: 32px; }
/* Fire Orange headings pass at this size (3:1 for large text), as the blog's post titles do. */
.hc-article__header h1 {
    font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
    color: var(--o); margin: 6px 0 0;
}
.hc-article__summary { font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--c); margin: 14px 0 0; }
.hc-article__meta { font-size: 14px; font-weight: 600; color: var(--cl); margin: 14px 0 0; }
.hc-article__body { font-size: 17px; line-height: 1.75; color: var(--c); overflow-wrap: break-word; }
.hc-article__body > :first-child { margin-top: 0; }
.hc-article__body h1, .hc-article__body h2 {
    font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; margin: 42px 0 14px;
}
.hc-article__body h3 { font-size: 19px; font-weight: 700; line-height: 1.35; margin: 30px 0 10px; }
.hc-article__body p { margin: 0 0 18px; }
.hc-article__body ul, .hc-article__body ol { margin: 0 0 20px; padding-left: 26px; }
.hc-article__body li { margin: 0 0 9px; padding-left: 4px; }
.hc-article__body li::marker { color: var(--o); }
.hc-article__body ol li::marker { font-weight: 700; }
.hc-article__body li > p { margin: 0; }
.hc-article__body hr { border: 0; border-top: 1px solid var(--g2); margin: 36px 0; }
.hc-article__body strong { color: var(--c); font-weight: 700; }
.hc-article__body a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hc-article__body a:hover { color: var(--c); }
.hc-article__body img {
    max-width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--g2);
    margin: 12px 0; display: block; box-shadow: var(--sh);
}
.hc-article__body iframe, .hc-article__body video {
    max-width: 100%; width: 100%; border-radius: var(--r); border: 0; margin: 12px 0;
    aspect-ratio: 16 / 9;
}
.hc-article__body code {
    background: var(--g1); padding: 2px 6px; border-radius: 5px; font-size: .88em;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.hc-article__body pre {
    background: var(--c); color: var(--g1); padding: 16px 18px; border-radius: var(--r);
    overflow: auto; margin: 0 0 20px; font-size: 15px; line-height: 1.6;
}
.hc-article__body pre code { background: none; padding: 0; color: inherit; }
.hc-article__body blockquote {
    border-left: 3px solid var(--o); background: var(--ol);
    margin: 0 0 20px; padding: 14px 20px; border-radius: 0 var(--r) var(--r) 0;
}
.hc-article__body blockquote > :last-child { margin-bottom: 0; }
.hc-article__body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; line-height: 1.55; }
.hc-article__body th, .hc-article__body td { border: 1px solid var(--g2); padding: 10px 12px; text-align: left; }
.hc-article__body th { background: var(--g1); font-weight: 700; }
/* #46951 Callouts (:::callout-<kind> in the article markdown) and buttons ([text](url){.button}), as Intercom had them. */
.hc-article__body [class^="callout-"] {
    margin: 0 0 20px; padding: 14px 20px; border-radius: var(--r); border: 1px solid #C9D7F5; background: #E9EFFC;
}
.hc-article__body [class^="callout-"] > :last-child { margin-bottom: 0; }
.hc-article__body .callout-tip { background: #E8F8ED; border-color: #BFE3CA; }
.hc-article__body .callout-warning { background: #FFF4D6; border-color: #F5DC9A; }
.hc-article__body .callout-danger { background: #FEF2F2; border-color: #F6C2C5; }
.hc-article__body .callout-neutral { background: var(--g0); border-color: var(--g2); }
/* Dark Orange is only 3.8 to 4.2:1 on the tinted callout, quote, table-header and empty-box backgrounds. */
.hc-article__body [class^="callout-"] a:not(.button), .hc-article__body blockquote a, .hc-article__body th a, .hc-empty a { color: #B04410; }
.hc-article__body [class^="callout-"] a:not(.button):hover, .hc-article__body blockquote a:hover, .hc-article__body th a:hover, .hc-empty a:hover { color: var(--c); }
.hc-article__body a.button {
    display: inline-block; padding: 11px 22px; border-radius: 8px; background: var(--od); font-size: 15px;
    color: var(--w); font-weight: 700; text-decoration: none; transition: background .2s, transform .15s;
}
.hc-article__body a.button:hover { background: #A8410F; color: var(--w); transform: translateY(-1px); }

.hc-related { padding-top: 6px; }
.hc-related > h2 {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    padding: 0 0 7px; border-bottom: 2px solid var(--o); margin: 0 0 16px;
}
.hc-related .hc-article-list a { padding: 13px 18px; gap: 12px; }
.hc-related .hc-article-list h3 { font-size: 14px; font-weight: 600; line-height: 1.45; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.hc-footer { background: var(--c); color: rgba(255, 255, 255, .72); font-size: 14px; }
.hc-footer a { color: var(--w); text-decoration: underline; text-underline-offset: 2px; }
.hc-footer a:hover { color: #FFA877; }
.hc-footer__inner { max-width: calc(var(--column) + 96px); margin: 0 auto; padding: 40px 48px 24px; }
.hc-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-bottom: 28px; }
.hc-footer__logo { height: 30px; width: auto; display: block; }
.hc-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px;
    display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: rgba(255, 255, 255, .68);
}
.hc-footer__bottom a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.hc-footer__bottom a:hover { color: var(--w); }
.hc-empty a { text-decoration: underline; text-underline-offset: 2px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (min-width: 1700px) {
    :root { --column: 1280px; }
}
/* A 4K screen at 100% scaling: scale the whole page up rather than stretch the lines. */
@media (min-width: 3000px) {
    body { zoom: 1.25; }
}
@media (max-width: 1080px) {
    .hc-nav__inner, .hc-footer__inner { padding-left: 24px; padding-right: 24px; }
    .hc-article-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .hc-related { padding-top: 0; }
    .hc-related .hc-article-list a { padding: 16px 22px; gap: 16px; }
    .hc-related .hc-article-list h3 { font-size: 16px; font-weight: 700; }
}
@media (max-width: 900px) {
    .hc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .hc-nav__inner { padding: 0 16px; height: 60px; }
    .hc-nav__brand { gap: 10px; }
    .hc-nav__brand img { height: 28px; }
    .hc-nav__label { font-size: 13px; padding-left: 10px; }
    .hc-btn { font-size: 13px; padding: 9px 14px; }
    .hc-hero { padding: 16px 18px; }
    .hc-hero--home { padding: 44px 18px 28px; }
    .hc-hero__title { margin-bottom: 20px; }
    .hc-grid { grid-template-columns: 1fr; padding: 0 18px; gap: 14px; }
    .hc-breadcrumbs { padding: 0 18px; margin-top: 28px; }
    .hc-category, .hc-search-results, .hc-article-layout { padding-left: 18px; padding-right: 18px; }
    .hc-category__head { gap: 16px; }
    .hc-category__head .hc-card__icon { width: 48px; height: 48px; border-radius: var(--r); }
    .hc-article-list a, .hc-search-results__list a { padding: 16px 18px; }
    .hc-article__summary { font-size: 16px; }
    .hc-article__body { font-size: 16px; }
    .hc-article__body h1, .hc-article__body h2 { font-size: 21px; }
    .hc-article__body table { display: block; overflow-x: auto; max-width: 100%; }
    .hc-footer__inner { padding: 36px 18px 20px; }
}
/* A narrow phone: the label would push "Open ClubRight" off the bar. */
@media (max-width: 380px) {
    .hc-nav__label { display: none; }
}