/*
 * search-page.css — Search results page (/?s=keyword)
 * Generated by Claude Code Phase 2B — Developer review required
 *
 * Compiled from:
 *   frontend-nextjs/src/components/SearchPage/_search-page.scss
 *
 * Variable values resolved from _variables.scss:
 *   $color_fantasy     = #f9f5f2
 *   $color_raven       = #7b7c7e
 *   $color_trendy_pink = #836093
 *   $color_shark       = #232528
 *   $color_gun_powder  = #464566
 *   $primary           = #e78125
 *   $secondary         = #19263a
 *   $white             = #ffffff
 *
 * Load order (must come after):
 *   blog.css         — provides .blog-item, .blog-item__img, .blog-item__info,
 *                      .blog-item__tag, .blog-item__title, .blog-item__by,
 *                      .section-title, .btn-link--primary, .h2, .h4, .h5, .h6
 *   infographics.css — provides .row.gap-24 gutter utility
 */

/* ============================================================
   SEARCH PAGE OUTER LAYOUT
   Source: SearchPage.js — .search-page-wrap flex container
   React: <div className="search-page-wrap">
   ============================================================ */

.search-page-wrap {
  position: relative;
  display: flex;
  min-height: 100%;
}

@media (max-width: 767px) {
  .search-page-wrap {
    flex-wrap: wrap;
  }
}

/* ── Left sidebar ─────────────────────────────────────────── */
/* Source: SearchPage.js — <div className="left"> */

.search-page-wrap .left {
  width: 275px;
  flex-shrink: 0;
  background: #f9f5f2;
  padding: 52px 20px 52px 54px;
}

@media (max-width: 767px) {
  .search-page-wrap .left {
    width: 100%;
    padding: 20px;
    background: transparent;
  }
}

/* ── Right content area ───────────────────────────────────── */
/* Source: SearchPage.js — <div className="right"> */

.search-page-wrap .right {
  width: 100%;
  padding: 52px 0;
}

@media (max-width: 767px) {
  .search-page-wrap .right {
    padding-top: 0;
  }
}

/* ── Result title + count bar ─────────────────────────────── */
/* Source: SearchPage.js — .result-title-no */

.search-page-wrap .right .result-title-no {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 50px;
}

@media (max-width: 767px) {
  .search-page-wrap .right .result-title-no {
    display: block;
    padding-bottom: 30px;
  }
}

.search-page-wrap .right .result-title-no .search-title {
  font-size: 18px;
  line-height: 145%;
  color: #7b7c7e;
}

/* Source: SearchPage.js — <span>{searchKeyword}</span> inside .search-title */
.search-page-wrap .right .result-title-no .search-title span {
  font-weight: 600;
  color: #836093;
}

.search-page-wrap .right .result-title-no .search-result {
  font-size: 14px;
  line-height: 145%;
  color: #7b7c7e;
}

/* Source: SearchPage.js — <span>{total}</span> inside .search-result */
.search-page-wrap .right .result-title-no .search-result span {
  font-weight: 600;
  color: #232528;
}

/* Source: SearchPage.js — .surveys-list (commented out SearchSurveys) */
.search-page-wrap .right .surveys-list {
  padding-bottom: 74px;
}

@media (max-width: 767px) {
  .search-page-wrap .right .surveys-list {
    padding-bottom: 20px;
  }
}

/* ── Mobile filter open/close button ─────────────────────── */
/* Source: SearchPage.js — .filter-btn */

.search-page-wrap .filter-btn.btn {
  font-size: 16px;
}

/* ============================================================
   MOBILE FILTER SLIDE-IN PANEL
   Source: SearchPage.js — .search-filter-box / .search-filter-box.active
   React: useState(open) toggled by Filter / Close buttons
   WP equivalent: JS class toggle via search-page.js
   ============================================================ */

@media (max-width: 767px) {
  .search-filter-box {
    padding: 20px;
    position: fixed;
    right: -300px;
    top: 0;
    z-index: 12345;
    width: 300px;
    height: 100%;
    background: #f9f5f2;
    overflow: auto;
    transition: all 0.3s ease-in-out;
  }

  .search-filter-box.active {
    right: 0;
  }
}

/* ============================================================
   FILTER BLOCK (shared by Categories + Content Type)
   Source: FilterCategories.js + FilterContentType.js — .filter-block
   ============================================================ */

.filter-block {
  padding-bottom: 40px;
}

.filter-block h5 {
  font-size: 18px;
  font-weight: 600;
  line-height: 145%;
  color: #232528;
  font-family: "Inter";
}

/* ============================================================
   CHECK LIST — category & content-type checkbox rows
   Source: FilterCategories.js + FilterContentType.js — .check-list
   React icons: BsSquare (.normal-icon) / BsCheckSquareFill (.fill-icon)
   ============================================================ */

.check-list ul li {
  padding-bottom: 6px;
}

/* Unchecked state — label looks like plain text */
.check-list .btn-check ~ .btn {
  padding: 0;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
  display: inline-flex;
  align-items: flex-start;
  font-size: 16px;
  color: #232528;
  line-height: 150%;
  text-align: left;
  font-weight: 500;
}

.check-list .btn-check:focus ~ .btn,
.check-list .btn-check:focus-visible ~ .btn,
.check-list .btn:focus,
.check-list .btn:focus-visible,
.check-list .btn:active,
.check-list .btn-check:checked ~ .btn {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
}

.check-list .btn-check ~ .btn .check-icon {
  position: relative;
  font-size: 16px;
  margin-right: 12px;
  margin-top: 5px;
}

.check-list .btn-check ~ .btn .check-icon svg {
  display: block;
  transition: all 0.3s ease-in-out;
}

/* Fill icon (orange checked square) hidden by default */
.check-list .btn-check ~ .btn .check-icon .fill-icon {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  color: #e78125;
}

/* Checked state — swap icons */
.check-list .btn-check:checked ~ .btn .check-icon .normal-icon {
  opacity: 0;
}

.check-list .btn-check:checked ~ .btn .check-icon .fill-icon {
  opacity: 1;
}

/* ============================================================
   SEARCH SECTION WRAPPERS
   Source: SearchBlog.js + SearchInfographics.js + SearchVideo.js
   React: <div className="search-blog-wrap">
   ============================================================ */

.search-blog-wrap {
  padding-bottom: 60px;
}

/* ============================================================
   VIDEO PLAY BUTTON OVERLAY
   Source: SearchVideo.js — .video-btn.video-btn--md
   React: <div className="video-btn video-btn--md"><MdPlayArrow /></div>
   NOTE: Fancybox lightbox (data-fancybox) is not yet loaded globally.
         TODO: confirm Fancybox vendor JS is enqueued before videos go live.
   ============================================================ */

.blog-item__img {
  position: relative;
}

.video-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.video-btn--md svg {
  width: 48px;
  height: 48px;
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

/* ============================================================
   SEARCH FOR — "People also search for" pill tags
   Source: SearchFor.js — .search-for-wrap
   ============================================================ */

.search-for-wrap {
  background: #f9f5f2;
  padding: 40px 40px 24px;
}

@media (max-width: 767px) {
  .search-for-wrap {
    padding: 20px 20px 10px;
  }

}

.search-for-wrap h2 {
  padding-bottom: 24px;
  color: #232528;
  font-size: 38px;
}

.search-for-wrap ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  margin: 0;
}

.search-for-wrap ul li {
  padding-right: 16px;
  padding-bottom: 16px;
}

@media (max-width: 767px) {
  .search-for-wrap ul li {
    padding-bottom: 10px;
  }
    .search-for-wrap h2{
    font-size: 30px;
  }
}

/* Source: SearchFor.js — <button className="search-tag"> */
.search-for-wrap ul li .search-tag {
  display: block;
  background: #ffffff;
  padding: 12px 20px;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 19px;
  color: #464566;
  box-shadow: 0px 5px 14px #eee7e2;
  border-radius: 48px;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

@media (max-width: 767px) {
  .search-for-wrap ul li .search-tag {
    font-size: 14px;
    line-height: 17px;
    padding: 8px 16px;
  }
}

.search-for-wrap ul li .search-tag:hover,
.search-for-wrap ul li .search-tag:focus {
  background: #19263a;
  color: #ffffff;
}

/* ============================================================
   NO RESULTS STATE
   Source: SearchPage.js — no explicit "no results" UI, using gp- prefix
   ============================================================ */

.gp-search-no-results {
  padding: 40px 0;
  text-align: center;
  color: #7b7c7e;
  font-size: 16px;
}