/*
Theme Name: CQ Help Center
Theme URI: https://support.cqnexus.com
Author: Casino Quest
Description: Lean theme for the CQ Nexus Help Center. Learning Center family: emerald bands, gold rules, black content. No page builder.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: cq-help-center
*/

:root {
  --hc-black: #070908;
  --hc-black-2: #0b100e;
  --hc-card: #0f1613;
  --hc-edge: #1f3a2d;
  --hc-emerald: #0e5a3c;
  --hc-forest: #062b1d;
  --hc-green: #34d399;
  --hc-mint: #a7f3d0;
  --hc-mist: #dcefe5;
  --hc-gold: #e2c578;
  --hc-gold-2: #efd89a;
  --hc-gold-hi: #f0d48a;
  --hc-gold-deep: #8a6e2c;
  --hc-ink: #1a1407;
  --hc-t1: #f3f7f4;
  --hc-t2: #a8b4ad;
  --hc-display: 'Oswald', 'Helvetica Neue', sans-serif;
  --hc-ui: 'Nunito', 'Helvetica Neue', sans-serif;
  --hc-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--hc-black); color: var(--hc-t1); font-family: var(--hc-ui); font-size: 17px; line-height: 1.6; }
a { color: var(--hc-gold); }
a:hover { color: var(--hc-gold-hi); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--hc-gold); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--hc-gold); color: var(--hc-ink); font-weight: 800; }

.hc-wrap { max-width: 1160px; margin-inline: auto; padding-inline: 24px; }

/* Eyebrow with the Learning Center bar */
.hc-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-family: var(--hc-mono); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hc-green); }
.hc-eyebrow::before { content: ""; width: 40px; height: 4px; background: currentColor; flex: none; }
.hc-on-green .hc-eyebrow { color: var(--hc-mint); }

.hc-h1 { margin: 0; font-family: var(--hc-display); font-weight: 600; font-size: clamp(40px, 7vw, 76px); line-height: .98; text-transform: uppercase; color: #fff; text-wrap: balance; }
.hc-h1 span { display: block; margin-top: 8px; color: var(--hc-gold-hi); font-size: .55em; line-height: 1.2; }
.hc-h2 { margin: 0 0 28px; font-family: var(--hc-display); font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.04; text-transform: uppercase; }
.hc-h2 span { display: block; color: var(--hc-gold-hi); }
.hc-lead { margin: 0; max-width: 62ch; font-size: 19px; color: var(--hc-mist); }

/* Buttons */
.hc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 4px; font-family: var(--hc-ui); font-weight: 800; font-size: 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.hc-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.hc-btn--gold { color: var(--hc-ink) !important; background: radial-gradient(120% 200% at 50% -40%, var(--hc-gold-2) 0%, var(--hc-gold-deep) 130%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px rgba(0,0,0,.35); }
.hc-btn--ghost { color: #fff !important; border-color: rgba(255,255,255,.6); }
.hc-btn--lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.hc-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Header */
.hc-bar { background: var(--hc-forest); border-bottom: 1px solid var(--hc-emerald); }
.hc-bar .hc-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 12px; }
.hc-brand { display: flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none; font-family: var(--hc-display); font-weight: 600; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; }
.hc-nav { flex: 1 1 auto; }
.hc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.hc-nav a { display: block; padding: 9px 14px; border-radius: 4px; color: var(--hc-mist); text-decoration: none; font-weight: 700; font-size: 15px; }
.hc-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.hc-nav .current-menu-item > a, .hc-nav .current_page_item > a, .hc-nav .current-menu-ancestor > a { background: var(--hc-gold); color: var(--hc-ink); }
.hc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hc-actions .hc-btn { min-height: 42px; padding: 0 16px; font-size: 15px; }
.hc-user { display: inline-flex; align-items: center; gap: 10px; color: var(--hc-mist); font-weight: 700; font-size: 15px; text-decoration: none; }
.hc-user b { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: var(--hc-emerald); border: 2px solid var(--hc-gold); color: var(--hc-gold-hi); }

/* Emerald bands */
.hc-band { background: var(--hc-emerald); border-bottom: 4px solid var(--hc-gold); }
.hc-band--framed { border-top: 4px solid var(--hc-gold); }
.hc-hero .hc-wrap { display: flex; flex-direction: column; gap: 20px; padding-block: 80px 84px; }
.hc-title .hc-wrap { display: flex; flex-direction: column; gap: 14px; padding-block: 56px 60px; }
.hc-title .hc-lead { font-size: 18px; }

/* Search */
.hc-search { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 760px; margin-top: 8px; }
.hc-search input[type="search"] { flex: 1 1 320px; min-width: 0; height: 58px; padding: 0 20px; border-radius: 4px; border: 2px solid var(--hc-forest); background: #fff; color: var(--hc-ink); font-family: var(--hc-ui); font-size: 18px; }
.hc-search .hc-btn { height: 58px; }
.hc-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hc-popular > span { margin-right: 4px; font-family: var(--hc-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-mint); }
.hc-popular a { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }
.hc-popular a:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Sections and cards */
.hc-section { padding-block: 72px 64px; }
.hc-section--alt { background: var(--hc-black-2); border-bottom: 1px solid var(--hc-edge); }
.hc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.hc-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 4px; background: var(--hc-card); border: 1px solid var(--hc-edge); border-top: 4px solid var(--hc-green); color: var(--hc-t1); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.hc-card:hover { transform: translateY(-2px); border-color: var(--hc-green); color: var(--hc-t1); }
.hc-card--gold { border-top-color: var(--hc-gold); }
.hc-card__num { font-family: var(--hc-display); font-weight: 500; font-size: 44px; line-height: 1; color: var(--hc-green); }
.hc-card--gold .hc-card__num { color: var(--hc-gold); }
.hc-card__title { font-family: var(--hc-display); font-weight: 600; font-size: 24px; text-transform: uppercase; }
.hc-card__text { font-size: 16px; line-height: 1.55; color: var(--hc-t2); }
.hc-card__more { font-weight: 700; font-size: 15px; color: var(--hc-gold); }

/* Talk to Us band */
.hc-talk .hc-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; padding-block: 64px; }
.hc-talk__copy { flex: 1 1 380px; display: flex; flex-direction: column; gap: 14px; }
.hc-talk__copy .hc-h2 { margin: 0; color: #fff; }
.hc-talk__copy p { margin: 0; font-size: 18px; color: var(--hc-mist); }
.hc-tiles { flex: 1 1 380px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hc-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 4px; background: var(--hc-forest); }
.hc-tile small { font-family: var(--hc-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-mint); }
.hc-tile strong, .hc-tile strong a { font-weight: 800; font-size: 16px; color: #fff; text-decoration: none; }
.hc-tile strong a { color: var(--hc-gold-hi); }
.hc-tile span { font-size: 14px; color: var(--hc-mist); }

/* Video cards */
.hc-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.hc-head-row .hc-h2 { margin: 0; }
.hc-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.hc-video { display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; background: var(--hc-card); border: 1px solid var(--hc-edge); color: var(--hc-t1); text-decoration: none; }
.hc-video:hover { border-color: var(--hc-green); color: var(--hc-t1); }
.hc-video__thumb { height: 168px; display: flex; align-items: center; justify-content: center; background: var(--hc-emerald); color: var(--hc-gold-hi); }
.hc-video__body { display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.hc-video__meta { font-family: var(--hc-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-green); }
.hc-video__title { font-family: var(--hc-display); font-weight: 600; font-size: 21px; text-transform: uppercase; }

/* Page content */
.hc-content { padding-block: 48px 88px; }
.hc-content > .hc-wrap > *:first-child { margin-top: 0; }
.hc-prose { max-width: 760px; }
.hc-prose h2, .hc-prose h3 { font-family: var(--hc-display); font-weight: 600; text-transform: uppercase; line-height: 1.1; }
.hc-prose p, .hc-prose li { color: var(--hc-t2); }
.hc-prose strong { color: var(--hc-t1); }

/* Search results */
.hc-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.hc-result a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 4px; background: var(--hc-card); border: 1px solid var(--hc-edge); border-left: 4px solid var(--hc-green); color: var(--hc-t1); text-decoration: none; }
.hc-result a:hover { border-color: var(--hc-green); color: var(--hc-t1); }
.hc-result small { font-family: var(--hc-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-green); }
.hc-result b { font-family: var(--hc-display); font-weight: 600; font-size: 22px; text-transform: uppercase; }
.hc-result span { color: var(--hc-t2); font-size: 16px; }

/* Footer */
.hc-footer { background: var(--hc-forest); border-top: 1px solid var(--hc-emerald); color: var(--hc-mist); font-size: 14px; }
.hc-footer .hc-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 28px; }
.hc-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.hc-footer a { color: var(--hc-mist); text-decoration: none; }
.hc-footer a:hover { color: #fff; }

@media (max-width: 700px) {
  body { font-size: 16px; }
  .hc-hero .hc-wrap { padding-block: 56px 60px; }
  .hc-tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-btn, .hc-card { transition: none; }
  .hc-btn:hover, .hc-card:hover { transform: none; }
}

/* Hero v1.2: compact popular-topic tiles under the search (bigger than chips, smaller than cards) */
.hc-hero .hc-hero__grid { display: flex; flex-direction: column; gap: 28px; padding-block: 72px 76px; }
.hc-hero__copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hc-hero__pop { width: 100%; max-width: 860px; }
.hc-pop__label { margin: 0 0 10px; font-family: var(--hc-mono); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hc-mint); }
.hc-squares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hc-square { display: flex; flex-direction: column; gap: 10px; min-height: 118px; padding: 16px; border-radius: 4px; background: var(--hc-black); border: 1px solid rgba(226,197,120,.3); border-top: 4px solid var(--hc-gold); color: #fff; text-decoration: none; box-shadow: 0 10px 22px rgba(0,0,0,.3); transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.hc-square__icon { display: flex; width: 32px; height: 32px; color: var(--hc-gold); }
.hc-square__icon svg { width: 100%; height: 100%; }
.hc-square__body { margin-top: auto; }
.hc-square__title { font-family: var(--hc-display); font-weight: 600; font-size: 19px; line-height: 1.1; text-transform: uppercase; }
.hc-square__text, .hc-square__go { display: none; }
.hc-square:hover, .hc-square:focus-visible { transform: translateY(-3px); color: var(--hc-ink); border-color: transparent; background: radial-gradient(120% 140% at 50% -20%, var(--hc-gold-2) 0%, var(--hc-gold-deep) 135%); }
.hc-square:hover .hc-square__icon, .hc-square:focus-visible .hc-square__icon { color: var(--hc-ink); }
@media (max-width: 760px) { .hc-squares { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-hero .hc-hero__grid { padding-block: 56px 60px; } }
@media (max-width: 420px) { .hc-square { min-height: 96px; padding: 14px; } .hc-square__title { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .hc-square { transition: none; } .hc-square:hover { transform: none; } }