/* ============================================================
 * backshack.ai — Unified Custom Stylesheet
 * Theme file: wp-content/themes/aiassist/css/backshack-custom.css
 * Loaded via functions.php (after style.css + Tailwind).
 *
 * I.   Core Variables & Typography
 * II.  Global Buttons & Hover States
 * III. Layout Components (Cards, Nuclear Stats, FAQ)
 * IV.  Plugin Overrides (IdeaPush)
 *
 * DO NOT paste this into WP Customizer "Additional CSS".
 * Keep WP Additional CSS empty — this file is the single source.
 * ============================================================ */


/* ============================================================
 * I. CORE VARIABLES & TYPOGRAPHY
 * Note: Inter is already enqueued by functions.php (weights
 *       400–900). No @import needed here.
 * ============================================================ */

:root {
  /* Brand Palette */
  --bs-primary:       #4f46e5; /* Indigo-600  */
  --bs-primary-dark:  #4338ca; /* Indigo-700  */
  --bs-accent:        #818cf8; /* Indigo-400  */
  --bs-text:          #1e293b; /* Slate-900   */
  --bs-text-muted:    #64748b; /* Slate-500   */
  --bs-border:        #e2e8f0; /* Slate-200   */
  --bs-border-md:     #d1d5db; /* Gray-300    */
  --bs-border-dark:   #9ca3af; /* Gray-400    */
  --bs-surface:       #ffffff;
  --bs-surface-hover: #f9fafb; /* Gray-50     */
  --bs-surface-alt:   #f1f5f9; /* Slate-100   */

  /* Geometry */
  --bs-radius:    0.5rem;   /* 8px  */
  --bs-radius-lg: 0.75rem;  /* 12px */

  /* Elevation */
  --bs-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --bs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
  --bs-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.07);

  /* Motion */
  --bs-transition: all 0.2s ease;

  /* Font */
  --bs-font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* H1 — Marketing "Black" weight (hero sections, page titles) */
h1,
.h1 {
  font-family:    var(--bs-font);
  font-weight:    900;
  letter-spacing: -0.05em;
  line-height:    1.1;
  color:          var(--bs-text);
}

/* Accent span inside H1 (e.g. "your <span>Business</span>") */
h1 span,
.h1 span {
  color:       var(--bs-accent);
  font-weight: 900;
}

/* Restore Gutenberg list markers after Tailwind preflight resets ol/ul to none. */
main#content .wp-block-list,
.entry-content .wp-block-list,
.post-content .wp-block-list,
main#content .entry-content ul,
main#content .entry-content ol,
main#content .post-content ul,
main#content .post-content ol {
  margin:              0 0 1rem 1.25rem;
  padding-left:        1.25rem;
  list-style-position: outside;
}

main#content ol.wp-block-list,
.entry-content ol.wp-block-list,
.post-content ol.wp-block-list,
main#content .entry-content ol,
main#content .post-content ol {
  list-style-type: decimal;
}

main#content ul.wp-block-list,
.entry-content ul.wp-block-list,
.post-content ul.wp-block-list,
main#content .entry-content ul,
main#content .post-content ul {
  list-style-type: disc;
}

main#content .wp-block-list li,
.entry-content .wp-block-list li,
.post-content .wp-block-list li,
main#content .entry-content li,
main#content .post-content li {
  display:      list-item;
  margin-bottom: 0.5rem;
}

main#content .wp-block-list .wp-block-list,
.entry-content .wp-block-list .wp-block-list,
.post-content .wp-block-list .wp-block-list,
main#content .entry-content li > ul,
main#content .entry-content li > ol,
main#content .post-content li > ul,
main#content .post-content li > ol {
  margin-top:   0.5rem;
  margin-bottom: 1rem;
}

main#content ol.wp-block-list .wp-block-list,
.entry-content ol.wp-block-list .wp-block-list,
.post-content ol.wp-block-list .wp-block-list,
main#content .entry-content ol li > ol,
main#content .post-content ol li > ol,
main#content .entry-content ul li > ol,
main#content .post-content ul li > ol {
  list-style-type: lower-alpha;
}

main#content ol.wp-block-list li > ul,
.entry-content ol.wp-block-list li > ul,
.post-content ol.wp-block-list li > ul,
main#content .entry-content ol li > ul,
main#content .post-content ol li > ul,
main#content .entry-content ul li > ul,
main#content .post-content ul li > ul {
  list-style-type: disc;
}


/* ============================================================
 * II. GLOBAL BUTTONS & HOVER STATES
 *
 * Scope: main#content and .entry-content / .post-content.
 * Header, nav, footer, and sidebar buttons are intentionally
 * excluded so the Tailwind-based nav/header UI is unaffected.
 *
 * No !important needed here because the duplicate block in
 * style.css has been removed (see style.css comment).
 * Only the IdeaPush submit and the Primary variant keep
 * !important to handle inherited plugin widget styles.
 * ============================================================ */

/* Base button — white bg / gray border */
main#content .wp-block-button__link,
main#content .wp-block-buttons .wp-block-button__link,
.entry-content .wp-block-button__link,
.post-content  .wp-block-button__link,
main#content button:not(.mwai-send):not([class*="nav-"]):not([class*="header-"]),
main#content input[type="submit"],
main#content input[type="button"] {
  font-family:      var(--bs-font);
  background-color: var(--bs-surface);
  color:            var(--bs-text);
  border:           1px solid var(--bs-border-md);
  padding:          0.625rem 1.25rem;
  border-radius:    var(--bs-radius);
  font-size:        0.875rem;
  font-weight:      600;
  line-height:      1.25;
  text-decoration:  none;
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.375rem;
  box-shadow:       var(--bs-shadow-md);
  transition:       var(--bs-transition);
  cursor:           pointer;
}

/* Base hover */
main#content .wp-block-button__link:hover,
main#content .wp-block-buttons .wp-block-button__link:hover,
.entry-content .wp-block-button__link:hover,
.post-content  .wp-block-button__link:hover,
main#content button:not(.mwai-send):not([class*="nav-"]):not([class*="header-"]):hover,
main#content input[type="submit"]:hover,
main#content input[type="button"]:hover {
  background-color: var(--bs-surface-hover);
  border-color:     var(--bs-border-dark);
  transform:        translateY(-2px);
  box-shadow:       var(--bs-shadow-lg);
}

/* Primary (Indigo-filled) button — use Gutenberg's is-style-fill */
main#content   .wp-block-button.is-style-fill .wp-block-button__link,
.entry-content .wp-block-button.is-style-fill .wp-block-button__link,
.post-content  .wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--bs-primary);
  color:            var(--bs-surface);
  border-color:     transparent;
}

main#content   .wp-block-button.is-style-fill .wp-block-button__link:hover,
.entry-content .wp-block-button.is-style-fill .wp-block-button__link:hover,
.post-content  .wp-block-button.is-style-fill .wp-block-button__link:hover {
  background-color: var(--bs-primary-dark);
  transform:        translateY(-2px);
}

/* Center all wp-block-buttons groups by default */
.wp-block-buttons {
  justify-content: center;
}

/* Hero button row override (backshack-hero context) */
.backshack-hero .hero-button-grid a {
  background-color: var(--bs-surface);
  color:            var(--bs-text);
  border:           1px solid var(--bs-border);
  box-shadow:       var(--bs-shadow-sm);
  border-radius:    var(--bs-radius);
  padding:          0.75rem 1.5rem;
  font-weight:      600;
  text-decoration:  none;
  transition:       var(--bs-transition);
  display:          inline-flex;
  align-items:      center;
}

.backshack-hero .hero-button-grid a:hover {
  background-color: var(--bs-surface-hover);
  border-color:     var(--bs-border-md);
  transform:        translateY(-1px);
  box-shadow:       var(--bs-shadow-md);
}


/* ============================================================
 * III. LAYOUT COMPONENTS
 * ============================================================ */

/* —————————————————————————————
 * A. AI Card Grid
 * ————————————————————————————— */

.card-grid-container {
  max-width:  80%;
  margin:     3.75rem auto;
  padding:    0 0.625rem;
  text-align: center;
}

.grid-label {
  font-size:      0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--bs-accent);
  margin-bottom:  1.25rem;
  font-weight:    700;
}

.ai-card-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.25rem;
  align-items:           stretch;
}

.ai-card {
  background:     var(--bs-surface);
  border:         1px solid var(--bs-border);
  border-radius:  var(--bs-radius-lg);
  padding:        1.75rem;
  text-align:     left;
  display:        flex;
  flex-direction: column;
  box-shadow:     var(--bs-shadow-sm);
  transition:     var(--bs-transition);
}

.ai-card:hover {
  transform:    translateY(-5px);
  box-shadow:   var(--bs-shadow-xl);
  border-color: var(--bs-accent);
}

.card-icon {
  font-size:     2rem;
  margin-bottom: 0.875rem;
}

.ai-card h3 {
  font-size:     1.25rem;
  font-weight:   800;
  margin-bottom: 0.625rem;
  color:         var(--bs-text);
}

.ai-card p {
  font-size:     0.9375rem;
  color:         var(--bs-text-muted);
  line-height:   1.6;
  max-width:     100%;
  margin-bottom: 1.25rem;
  flex-grow:     1; /* pushes .card-link to the bottom */
}

.card-link {
  font-weight:     600;
  color:           var(--bs-primary);
  text-decoration: none;
  font-size:       0.875rem;
  margin-top:      auto;
}

.card-link:hover {
  color:           var(--bs-accent);
  text-decoration: underline;
}

/* Waitlist count callout used on the home page via [backshack_waitlist_count]. */
.backshack-waitlist-count {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0.2rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(79, 70, 229, 0.16);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(129, 140, 248, 0.16));
  box-shadow: 0 10px 22px -18px rgba(79, 70, 229, 0.65);
  color: var(--bs-primary);
  font-family: var(--bs-font);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.backshack-waitlist-count-label {
  color: var(--bs-text);
  font-weight: 800;
}

.backshack-waitlist-count-value {
  color: var(--bs-primary);
  font-size: 1.15em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.backshack-waitlist-count-noun {
  color: var(--bs-primary-dark);
  font-weight: 700;
}


/* —————————————————————————————
 * B. "Nuclear" Stat Cards (.bs-nuclear-card)
 * Selector for the stat number (the orphaned block in the
 * original Additional CSS had no selector — most likely h2).
 * ————————————————————————————— */

.bs-nuclear-card h2 {
  font-size:      3.5rem;
  font-weight:    800;
  margin:         0 0 0.5rem;
  line-height:    1;
  letter-spacing: -0.04em;
  color:          var(--bs-primary); /* Indigo accent for the big stat number */
}

.bs-nuclear-card p strong {
  display:        block;
  color:          var(--bs-text);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size:      0.875rem;
  margin-bottom:  1.25rem;
}

.bs-nuclear-card p:last-child {
  color:       #475569; /* Slate-600 */
  font-size:   0.9375rem;
  line-height: 1.6;
  margin:      0;
  font-style:  normal;
}

.bs-nuclear-card > * {
  margin-left:  0;
  margin-right: 0;
}


/* —————————————————————————————
 * C. FAQ Accordion (wp-block-details)
 * ————————————————————————————— */

details.wp-block-details {
  border-bottom: 1px solid var(--bs-border);
  padding:       2rem 0;
  margin-bottom: 0;
}

details.wp-block-details summary {
  font-weight:     700;
  color:           var(--bs-text);
  cursor:          pointer;
  font-size:       1.2rem;
  list-style:      none;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

/* Remove default browser disclosure triangle */
details.wp-block-details summary::-webkit-details-marker { display: none; }
details.wp-block-details summary::marker { display: none; }

/* Toggle indicator — closed: + */
details.wp-block-details summary::after {
  content:     "+";
  color:       var(--bs-primary);
  font-size:   1.75rem;
  font-weight: 400;
  flex-shrink: 0;
  transition:  var(--bs-transition);
}

/* Toggle indicator — open: − */
details.wp-block-details[open] summary::after {
  content:   "\2212";
  transform: none;
}

details.wp-block-details p {
  padding:     1.5rem 1rem 0.5rem 3.5rem;
  margin:      0;
  color:       #475569;
  line-height: 1.8;
  font-style:  italic;
  border-left: 4px solid var(--bs-surface-alt);
}


/* —————————————————————————————
 * Responsive
 * ————————————————————————————— */

@media (max-width: 1024px) {
  .card-grid-container { max-width: 90%; }
}

@media (max-width: 900px) {
  .ai-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .card-grid-container { max-width: 100%; padding: 0 1rem; }

  details.wp-block-details p { padding-left: 1.5rem; }
}


/* ============================================================
 * IV. PLUGIN OVERRIDES — IdeaPush
 *
 * IdeaPush injects its form into whatever column it's placed in,
 * causing it to inherit narrow sidebar widths. The rules below
 * break it out to 800px and apply the brand design system.
 * !important is intentional here to beat plugin-injected styles.
 * ============================================================ */

/* Container — break out of inherited narrow column */
.ideapush-container-form,
.create-idea-form-reveal {
  max-width:  800px !important;
  width:      100% !important;
  margin:     2.5rem auto !important;
  padding:    0 1rem !important;
  box-sizing: border-box !important;
}

/* Inner form wrapper — card treatment */
.ideapush-form-inner {
  max-width:     100% !important;
  padding:       2rem !important;
  background:    var(--bs-surface) !important;
  border:        1px solid var(--bs-border) !important;
  border-radius: var(--bs-radius-lg) !important;
  box-shadow:    var(--bs-shadow-md) !important;
}

/* Vote box — replaces the harsh plugin square with a softer neutral card. */
.ideapush-container .idea-vote-container {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-width:       3.5rem;
  padding:         0.625rem 0.5rem;
  border:          1px solid var(--bs-border) !important;
  border-radius:   var(--bs-radius) !important;
  background:      var(--bs-surface-hover);
  box-shadow:      var(--bs-shadow-sm);
}

.ideapush-container .idea-vote-number {
  color:        var(--bs-text);
  font-size:    1rem;
  font-weight:  700;
  line-height:  1.1 !important;
}

.ideapush-container .idea-vote-container i {
  color:       var(--bs-text-muted);
  font-size:   0.95rem;
  margin-top:  0.35rem;
  transition:  var(--bs-transition);
}

.ideapush-container .idea-vote-container i:hover {
  color: var(--bs-primary);
}

/* Use-case page button width control.
   This is the actual place to change the intro/action button width.
   Adjust flex-basis / max-width here, not in IdeaPush settings. */
.aiassist-use-case-list {
  max-width: 1200px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}

.aiassist-use-case-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.aiassist-use-case-sidebar {
  flex: 0 0 260px;
  background: var(--bs-surface);
  padding: 1rem;
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius-lg);
  box-shadow: var(--bs-shadow-sm);
}

.aiassist-use-case-sidebar-heading {
  margin-bottom: 0.75rem;
  color: var(--bs-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.aiassist-use-case-slot-search {
  margin-bottom: 1.25rem;
}

.aiassist-use-case-main {
  flex: 1;
  min-width: 0;
}

.aiassist-use-case-header {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 20;
  margin-bottom: 1.5rem;
  padding: 0.75rem 0 1rem;
  background: var(--bs-surface);
}

body.admin-bar .aiassist-use-case-header {
  top: calc(1rem + 32px);
}

.aiassist-use-case-title {
  margin-bottom: 0.75rem;
  color: #0f172a;
  font-size: 2rem;
  font-weight: 700;
}

.aiassist-use-case-toggle-slot {
  width: 100%;
  min-height: 3rem;
}

.aiassist-use-case-article {
  padding: 1.5rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius-lg);
  box-shadow: var(--bs-shadow-sm);
}

.aiassist-use-case-entry-content {
  color: #374151;
  line-height: 1.7;
}

.aiassist-use-case-list ol {
  padding-left: 1.5rem;
}

.aiassist-use-case-list ol li button,
.aiassist-use-case-list ol li .entry-form-button {
  flex:       0 0 25%;
  width:      25%;
  max-width:  25%;
  margin-left: 0;
}

@media (max-width: 900px) {
  .aiassist-use-case-list ol li {
    flex-wrap: wrap;
  }

  .aiassist-use-case-list ol li button,
  .aiassist-use-case-list ol li .entry-form-button {
    flex-basis: 100%;
    width:      100%;
    max-width:  100%;
  }

  .aiassist-use-case-layout {
    flex-direction: column;
  }

  .aiassist-use-case-sidebar {
    width: 100%;
    flex-basis: auto;
  }

  .aiassist-use-case-header {
    top: 0.75rem;
  }

  body.admin-bar .aiassist-use-case-header {
    top: calc(0.75rem + 46px);
  }
}

.aiassist-use-case-list .bs-ideapush-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.aiassist-use-case-list .bs-ideapush-toggle {
  min-width: 12rem;
}

.aiassist-use-case-list .bs-ideapush-toggle.is-active {
  background-color: var(--bs-surface-hover);
  border-color: var(--bs-border-dark);
  transform: translateY(-1px);
  box-shadow: var(--bs-shadow-lg);
}

.aiassist-use-case-list .bs-use-case-board {
  display: block;
}

.aiassist-use-case-list .bs-use-case-board .ideapush-container {
  display: block;
}

.aiassist-use-case-list .bs-use-case-board .ideapush-container-ideas,
.aiassist-use-case-list .bs-use-case-board .ideapush-container-form {
  width: 100%;
  display: block !important;
}

.aiassist-use-case-list .bs-use-case-board .ideapush-container-ideas[hidden],
.aiassist-use-case-list .bs-use-case-board .ideapush-container-form[hidden] {
  display: none !important;
}

.aiassist-use-case-list .bs-use-case-board .ideapush-container-form {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.aiassist-use-case-list .bs-use-case-board .ideapush-form-inner,
.aiassist-use-case-list .bs-use-case-board .ideapush-leader-board-inner,
.aiassist-use-case-list .bs-use-case-board .ideapush-comments-widget-inner {
  margin-left: 0 !important;
}

.aiassist-use-case-list .bs-use-case-board .create-idea-form-reveal,
.aiassist-use-case-list .bs-native-reveal-hidden {
  display: none !important;
}

.aiassist-use-case-list .bs-use-case-board .idea-item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--bs-border);
}

.aiassist-use-case-list .bs-use-case-board .idea-item-left,
.aiassist-use-case-list .bs-use-case-board .idea-item-right {
  float: none;
  width: auto;
}

.aiassist-use-case-list .bs-use-case-board .idea-item-left {
  display: flex;
  justify-content: center;
}

.aiassist-use-case-list .bs-use-case-board .idea-item-right-inner {
  padding-left: 0;
}

.aiassist-use-case-list .bs-use-case-board .idea-vote-container {
  width: 4.25rem;
  min-width: 4.25rem;
  min-height: 5.5rem;
  gap: 0.375rem;
}

.aiassist-use-case-list .bs-use-case-board .idea-title {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--bs-text);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}

.aiassist-use-case-list .search-match-found {
  color: #991b1b;
  background: #fee2e2;
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
}

@media (max-width: 720px) {
  .aiassist-use-case-list .bs-ideapush-toggle-bar {
    flex-direction: column;
  }

  .aiassist-use-case-list .bs-ideapush-toggle {
    width: 100%;
  }

  .aiassist-use-case-list .bs-use-case-board .idea-item {
    grid-template-columns: 1fr;
  }

  .aiassist-use-case-list .bs-use-case-board .idea-item-left {
    justify-content: flex-start;
  }
}

/* "Let's Go!" / Submit button — Primary Indigo */
.ideapush-container-form  .submit-new-idea,
.create-idea-form-reveal   .submit-new-idea,
input.submit-new-idea,
button.submit-new-idea {
  font-family:      var(--bs-font) !important;
  background-color: var(--bs-primary) !important;
  color:            var(--bs-surface) !important;
  border:           none !important;
  border-radius:    var(--bs-radius) !important;
  padding:          0.625rem 1.5rem !important;
  font-size:        0.9375rem !important;
  font-weight:      700 !important;
  cursor:           pointer !important;
  display:          inline-flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  box-shadow:       var(--bs-shadow-md) !important;
  transition:       var(--bs-transition) !important;
}

.ideapush-container-form  .submit-new-idea:hover,
.create-idea-form-reveal   .submit-new-idea:hover,
input.submit-new-idea:hover,
button.submit-new-idea:hover {
  background-color: var(--bs-primary-dark) !important;
  transform:        translateY(-2px) !important;
  box-shadow:       var(--bs-shadow-lg) !important;
}