/**
 * FAQ page styles.
 *
 * Extracted from inline <style> blocks. The original head <style> block also
 * contained a large amount of boilerplate (.about-section, .cta-container,
 * .cta-icon, .about-images, .img-main/.img-overlay, .about-heading-strip,
 * .feature-list, .text-success-bright, etc.) copy-pasted from another page's
 * template -- none of those selectors are used anywhere on this page's
 * markup or in the JS loaded here (main.js, auth.js, back-to-top.js), so
 * they were dropped rather than migrated. Only the rules actually applied
 * on this page are kept below.
 */

/* ==========================================================================
   Content
   ========================================================================== */
.faq-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--dark);
  margin: var(--space-5) 0 var(--space-3);
}

.container-xxl > .container h3 {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-bold);
  color: var(--primary-dark);
}

.container-xxl > .container p,
.container-xxl > .container li {
  color: var(--text-body);
  line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   "Check the Cowboy Builders NI Facebook group" panel -- Facebook's own
   brand blue is deliberate here (the button links out to Facebook), not
   tokenized.
   ========================================================================== */
.faq-cowboy-panel {
  background: var(--surface-alt);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border-left: 5px solid #0866ff;
  margin: var(--space-4) -10px;
}

.faq-cowboy-btn {
  border-radius: var(--radius-sm);
  background: #0866ff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.faq-cowboy-btn:hover {
  background: #0656d6;
  color: #fff;
}

.faq-cowboy-btn__icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   Mobile home button (nav)
   ========================================================================== */
.home-btn {
  width: 56px;
  height: 56px;
  background: #dedfe0;
  border-radius: var(--radius-full);
  color: #000;
  text-decoration: none;
  margin-left: -5px;
  transition: all 0.2s ease;
}

.home-btn:hover {
  background-color: #e9ecef;
  color: #000;
  transform: scale(1.05);
}

.home-btn:active {
  transform: scale(0.95);
}

.home-btn i {
  font-size: 1.5rem;
  line-height: 1;
}

.home-text {
  font-size: 10px;
  line-height: 1;
  margin-top: 2px;
  color: #1f2937;
}

/* ==========================================================================
   "Cowboy Builders NI" Facebook group search widget
   ========================================================================== */
.cowboy-query-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
}

#cowboy-query {
  width: 100%;
  padding-right: 38px;
}

#cowboy-query::placeholder {
  color: #6c757d;
  opacity: 0.6;
}

.cowboy-query-clear {
  position: absolute;
  top: 44%;
  right: 5px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6c757d;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 768px) {
  .cowboy-query-clear {
    top: 48%;
  }
}

#cowboy-query:placeholder-shown + .cowboy-query-clear {
  display: none;
}