/* ================================
   2026 UI TOKENS
================================ */
:root{
  color-scheme: light; /* match default light */
  --bg: #f6f8fc;
  --surface: rgba(255,255,255,.92);
  --surface2: rgba(255,255,255,.70);
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15,23,42,.10);
  --shadow: 0 18px 45px rgba(2,6,23,.12);
  --radius: 18px;

 
  --accent2:#60a5fa;   /* sky blue */
  --accent3:#2563eb;   /* wp blue */
  --cta: #f97316;      /* orange (like your screenshot button) */

  --stickyTop: 120px;  /* your fixed header height */
}

:root[data-theme="dark"]{
  color-scheme: dark;  /* force dark native controls when you force dark theme */
  --bg: #0b1220;
  --surface: rgba(15,23,42,.82);
  --surface2: rgba(15,23,42,.60);
  --text: #e5e7eb;
  --muted: #a1a1aa;
  --border: rgba(226,232,240,.10);
  --shadow: 0 18px 55px rgba(0,0,0,.48);
  --accent2:#60a5fa;
  --cta: #fb923c;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl
 {
    padding-right: 0px;
    padding-left: 0px;
}

.cq-page{
  background: var(--bg);
  color: var(--text);
  padding: 60px 0 90px;
}

.cq-container{
  max-width: none;
  width: 100%;
  padding-left: clamp(16px, 2vw, 40px);
  padding-right: clamp(16px, 2vw, 40px);
}


/* ================================
   HERO (LEFT) like your screenshot
================================ */
.cq-hero{
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
  margin-bottom: 28px;
}

.cq-hero-media{
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center;
}

.cq-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;


    /* gradient overlay + background image */
    background-image:
        linear-gradient(180deg, rgba(2, 6, 23, .15), rgba(2, 6, 23, .55)),
        url("/wp-content/uploads/west-virginia-recruiters-advising-an-employer.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Headline: 10% smaller and closer to top */
.cq-hero h1{
  font-size: 2.7rem !important;   /* 10% smaller than 3.0rem */
  margin: 8px 0 6px;
}

/* Blurb: closer + 25% smaller */
.cq-hero h2{
  font-size: 1.2rem;             /* smaller on desktop */
  margin: 0;
}

/* Mobile tweaks */
@media (max-width: 767.98px) {

  /* 1) Use the smaller image on mobile */
  .cq-hero-overlay{
    background-image:
      linear-gradient(180deg, rgba(2, 6, 23, .15), rgba(2, 6, 23, .55)),
      url("/wp-content/uploads/west-virginia-recruiters-advising-an-employer-small.png");

    /* 2) ensure we're not centering (optional but explicit) */
    background-position: initial; /* resets to default value */ 
    padding: 16px;
  }

  /* 3) Reduce hero text to ~50% */
  .cq-hero h1{
    font-size: 1.5rem !important;   /* was ~3.0rem */
    line-height: 1.1;
    margin-bottom: 8px;
  }

  .cq-hero h2{
    font-size: 1.0rem;             /* approx half-ish feel */
    line-height: 1.25;
    margin-bottom: 12px;
  }

  .cq-hero-cta{
    font-size: 0.95rem;            /* smaller button text */
    padding: 10px 14px;
    border-radius: 12px;
  }
}

.cq-hero h1{
  color:#fff;
  font-weight:900;
  letter-spacing:-0.02em;
  margin: 0 0 10px;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.cq-hero h2{
  color: rgba(255,255,255,.90);
  font-weight:600;
  margin: 0 0 8px;
}
@media (max-width: 767.98px){
  .cq-hero h2{
    display: none !important;
  }
}

.cq-hero-cta{
  position: absolute;
  bottom: 15px;
  right: 5%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--cta);
  color:#fff !important;
  text-decoration:none !important;
  font-weight:800;
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
  transform: translateY(0);
  transition: transform .12s ease;
}


.cq-hero-cta:hover{ transform: translateY(-1px); }

/* Intro under hero (your Section 2 content) */
.cq-intro{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px 18px;
  margin-bottom: 26px;
}

/* ================================
   Bootstrap card/button “upgrade”
================================ */
.cq-page .card{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cq-page .card-header,
.cq-page .card-footer{
  background: transparent !important;
  border-color: var(--border) !important;
}

/* Make your existing .btn-secondary look modern */
.cq-page .btn.btn-secondary{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.22);
  color: var(--text);
  font-weight: 700;
}
:root[data-theme="dark"] .cq-page .btn.btn-secondary{
  background: rgba(96,165,250,.16);
  border-color: rgba(96,165,250,.24);
}

/* FAQ accordion buttons (Bootstrap 4 markup) */
.cq-page .accordion .btn.btn-link{
  text-decoration:none !important;
  color: var(--text) !important;
  width:100%;
  text-align:left;
}
.cq-page .accordion .btn.btn-link h3{
  font-size: 1.05rem;
  margin: 0;
}

/* ================================
   FAQ (Accordion) – fix dark mode contrast
================================ */
.cq-page .accordion .card{
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.cq-page .accordion .card-header{
  background: var(--surface2) !important; /* override your "transparent" rule */
  border-color: var(--border) !important;
}

.cq-page .accordion .card-header .btn{
  color: var(--text) !important;
}

.cq-page .accordion .collapse,
.cq-page .accordion .collapsing{
  background: var(--surface) !important; /* covers collapse + animating state */
}

.cq-page .accordion .card-body{
  background: var(--surface) !important; /* forces dark surface in dark mode */
  color: var(--text) !important;
  border-top: 1px solid var(--border);
}

/* ================================
   Sticky Sidebar (RIGHT)
================================ */
/* Bootstrap’s .sticky-top is top:0; we need 120px */
.cq-sticky{
  position: sticky;
  top: var(--stickyTop);
}

/* Admin bar safety (optional) */
body.admin-bar .cq-sticky{
  top: calc(var(--stickyTop) + 32px);
}

.cq-side{
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
}

.cq-side h3{
  font-size: 1.35rem;
  font-weight: 900;
  margin: 4px 0 14px;
}

.cq-muted{ color: var(--muted); }

.cq-side-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.cq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text) !important;
  text-decoration:none !important;
  font-weight: 800;
}
.cq-btn:hover{
  box-shadow: var(--shadow);
  border-color: rgba(37,99,235,.30);
}
.cq-btn-primary{
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  border: none;
  color:#fff !important;
}

.wpforms-submit {
  background-color: #2563eb!important;
}

.cq-divider{
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* ================================
   WPForms styling (light touch)
================================ */
.cq-side .wpforms-container{
  margin-top: 0 !important;
}
.cq-side .wpforms-field-label{
  font-weight: 800 !important;
  color: var(--text) !important;
}
.cq-side input[type="text"],
.cq-side input[type="email"],
.cq-side input[type="tel"],
.cq-side textarea,
.cq-side select{
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,.92) !important;
}
:root[data-theme="dark"] .cq-side input[type="text"],
:root[data-theme="dark"] .cq-side input[type="email"],
:root[data-theme="dark"] .cq-side input[type="tel"],
:root[data-theme="dark"] .cq-side textarea,
:root[data-theme="dark"] .cq-side select{
  background: rgba(2,6,23,.35) !important;
  color: var(--text) !important;
}

.cq-side button[type="submit"],
.cq-side input[type="submit"]{
  width: 100% !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-weight: 900 !important;
  /* background: var(--accent)!important; */
  border: none !important;
}

/* ================================
   Floating CTA button (always /contact)
================================ */
/* Floating CTA (only /contact) - hidden until we hit the trigger */
.cq-float-cta{
  position: fixed;
  left: 28px;
  bottom: 100px;
  z-index: 9999;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--cta);
  color:#fff !important;
  text-decoration:none !important;
  font-weight: 900;
  box-shadow: 0 18px 55px rgba(0,0,0,.25);

  /* hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.cq-float-cta.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
/* ================================
   Responsive
================================ */
@media (max-width: 991.98px){
  .cq-sticky{ position: static; top:auto; }
  .cq-hero-media{ min-height: 320px; }
}

/* ================================
   FAQ (Accordion) – bulletproof dark mode
   Targets ONLY this accordion by ID
================================ */
:root{
  --faqHover: rgba(2,6,23,.05);
  --faqActive: rgba(2,6,23,.08);
}
:root[data-theme="dark"]{
  --faqHover: rgba(226,232,240,.06);
  --faqActive: rgba(226,232,240,.10);
}

#pages-FaqAccordion .card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}

#pages-FaqAccordion .card-header{
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important; /* let the button own padding */
}

/* The clickable question row */
#pages-FaqAccordion .card-header .btn.btn-link{
  width: 100%;
  text-align: left;
  display: block;

  padding: 16px 18px !important;
  color: var(--text) !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}

/* Ensure your H3 can't inherit weird theme colors */
#pages-FaqAccordion .card-header .btn.btn-link h3{
  margin: 0;
  color: inherit !important;
}

/* Hover/focus */
#pages-FaqAccordion .card-header .btn.btn-link:hover,
#pages-FaqAccordion .card-header .btn.btn-link:focus{
  background: var(--faqHover) !important;
}

/* OPEN state (Bootstrap removes .collapsed when expanded) */
#pages-FaqAccordion .card-header .btn.btn-link:not(.collapsed){
  background: var(--faqActive) !important;
}

/* The expanding panel */
#pages-FaqAccordion .collapse,
#pages-FaqAccordion .collapsing{
  background: var(--surface) !important;
}

#pages-FaqAccordion .card-body{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border) !important;
}

.cq-faq-header{
  font-size: 1.25rem!important;
  font-weight: 600;
}

.card-body {
  font-size: 1.25rem!important;
}

a {
  color: #cf2e2e;
}
a:hover {
  color: #406080;
}