/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Capstone Communities child theme for Hello Elementor. Custom styles, scripts, and functionality by Burder Creative.
Author: Burder Creative
Author URI: https://burdercreative.com/
Template: hello-elementor
Version: 2.1.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
 * Contents
 *  1. Tokens
 *  2. Global
 *  3. Carousels: shared gutter
 *  4. Carousel header row + arrows
 *  5. Community cards
 *  6. Communities map popup (JetEngine Maps)
 *  7. Team bio overlay
 *  8. JetSmartFilters selects
 *  9. Gallery carousel
 * 10. Community view toggle: Map / Card
 * 11. Spotlight Instagram feed
 * 12. Responsive
 */

/* =============================================
   1. Tokens
   ============================================= */

:root {
  --cap-copper: #b98b5e;        /* Content carousel arrows */
  --cap-terracotta: #C17F60;    /* Map / Card view toggle */
  --cap-cream: #EEE9E4;         /* Arrows on dark sections */
  --cap-charcoal: #2C2C2C;      /* Filter option text */
  --cap-close-red: #b23a3a;     /* Team bio close button */
  --cap-icon-font: "Font Awesome 6 Pro";
}

/* =============================================
   2. Global
   ============================================= */

ol li,
ul li {
  margin: 8px 0;
}

html,
body {
  overflow-x: hidden;
}

.sub-arrow {
  font-size: 1.75rem !important;
  margin-left: 1.5rem;
}

/* =============================================
   3. Carousels: shared gutter
   ============================================= */

.content-carousel,
.gallery-carousel {
  --gutter: max(24px, calc((100vw - 1600px) / 2));
  position: relative;
}

.content-carousel {
  overflow: clip;
}

.content-carousel .elementor-widget-jet-listing-grid {
  padding-left: var(--gutter) !important;
  flex-shrink: 0 !important;
}

/* Swiper container (team + work): allow the next card to peek past the edge.
   Width ends exactly at the viewport's right edge, so the last slide can
   always scroll fully into view. Don't set it to 100vw: the track starts
   after the left gutter, so 100vw pushes the last slide off-screen. */
.content-carousel .jet-listing-grid__slider.swiper {
  width: calc(100vw - var(--gutter)) !important;
  overflow: visible !important;
}

/* Team slider: 5 across + peek of the 6th */
.content-carousel:not(.content-carousel--work) .swiper-slide {
  width: 18vw !important;
}

/* Our Work slider: 3 across + peek of the 4th */
.content-carousel--work .swiper-slide {
  width: 27vw !important;
}

.content-carousel .jet-listing-grid__item {
  cursor: pointer;
}

/* Kill focus ring on team cards */
.content-carousel .jet-popup-target:focus,
.content-carousel .jet-listing-grid__item:focus,
.content-carousel .jet-listing-grid__item :focus {
  outline: none !important;
  box-shadow: none !important;
}

/* =============================================
   4. Carousel header row + arrows
   ============================================= */

/* Heading left, arrows + button right */
.content-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.content-header > .content-arrows {
  margin-left: auto;
  order: 2;
}

.content-header > a {
  order: 3;
}

.content-arrows {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-right: 24px;
}

/* Strip plugin positioning, let flex place them */
.content-carousel .prev-arrow,
.content-carousel .next-arrow,
.content-arrows .prev-arrow,
.content-arrows .next-arrow {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer;
}

/* Hide the native SVG, show the icon glyph */
.content-arrows svg,
.content-carousel .prev-arrow svg,
.content-carousel .next-arrow svg {
  display: none !important;
}

.content-arrows .prev-arrow::before,
.content-arrows .next-arrow::before {
  font-family: var(--cap-icon-font) !important;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  color: var(--cap-copper);
  display: inline-block;
}

.content-arrows .prev-arrow::before {
  content: "\f177";
}

.content-arrows .next-arrow::before {
  content: "\f178";
}

/* Work slider arrows: lighter color */
.content-header--work .content-arrows .prev-arrow::before,
.content-header--work .content-arrows .next-arrow::before {
  color: var(--cap-cream) !important;
}

.content-arrows .swiper-button-disabled {
  opacity: 0.35 !important;
  pointer-events: none;
}

/* =============================================
   5. Community cards
   ============================================= */

.community-card-img img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* =============================================
   6. Communities map popup (JetEngine Maps)
   ============================================= */

/* The visible white card is the positioning context.
   Note: 639 is a hardcoded listing ID. The map widget currently uses
   listing 1087, so the attribute selector below is what actually applies. */
.jet-map-box .jet-listing-dynamic-post-639,
.jet-map-box [data-render-type="jet-engine-maps"] {
  position: relative;
}

/* Real close target: the GIF, invisible but clickable, pinned top-right */
.jet-map-box .jet-map-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  opacity: 0 !important;
  z-index: 5 !important;
  cursor: pointer !important;
}

/* Visible X, drawn under the GIF at the same spot */
.jet-map-box [data-render-type="jet-engine-maps"]::before {
  content: "\f00d";
  font-family: var(--cap-icon-font);
  font-weight: 500;
  font-size: 20px;
  color: #000;
  position: absolute;
  top: 15px;
  right: 15px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}

/* =============================================
   7. Team bio overlay (replaces JetPopup)
   ============================================= */

.team-bio-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
}

.team-bio-overlay.is-open {
  display: block;
}

/* Neutralize JetEngine wrappers so they don't affect positioning */
.team-bio-overlay .jet-listing-grid,
.team-bio-overlay .jet-listing-grid__items {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.team-bio-overlay .jet-listing-grid__item {
  display: none !important;
}

/* Active card: centered in the viewport */
.team-bio-overlay .jet-listing-grid__item.is-active-bio {
  display: block !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 1080px;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  padding: 48px;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.team-bio-close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 2;
  font-size: 24px;
  line-height: 1;
  color: var(--cap-close-red);
}

/* =============================================
   8. JetSmartFilters selects
   ============================================= */

/* Hide native chevron */
.jet-select__control {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: none !important;
}

.jet-select::after,
.jet-select::before {
  display: none !important;
}

/* Darken option text (Card View + Map View) */
#grid .jet-select__list-item,
#grid select option,
#map .jet-select__list-item,
#map select option {
  color: var(--cap-charcoal) !important;
}

/* =============================================
   9. Gallery carousel: 2 + peek
   ============================================= */

.gallery-carousel {
  padding-left: var(--gutter);
  overflow: hidden;
}

.gallery-swiper {
  overflow: visible !important;
}

.gallery-swiper .swiper-slide {
  width: 45% !important;
}

.gallery-swiper .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
}

/* Arrows: right-aligned above slides */
.gallery-arrows {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding-right: 40px;
  margin-bottom: 16px;
}

.gallery-prev,
.gallery-next {
  cursor: pointer;
}

.gallery-prev::before,
.gallery-next::before {
  font-family: var(--cap-icon-font) !important;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  color: var(--cap-cream);
}

.gallery-prev::before {
  content: "\f177";
}

.gallery-next::before {
  content: "\f178";
}

.gallery-prev.swiper-button-disabled,
.gallery-next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* =============================================
   10. Community view toggle: Map / Card
   ============================================= */

.community-view-toggle {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
}

.community-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 2px solid var(--cap-terracotta);
  border-radius: 50px;
  background: transparent;
  color: var(--cap-terracotta);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.community-toggle-btn:hover,
.community-toggle-btn.active {
  background: var(--cap-terracotta);
  color: #ffffff;
  border-color: var(--cap-terracotta);
}

.community-toggle-btn svg {
  flex-shrink: 0;
}

/* Card view is default */
#grid {
  display: block;
}

#map {
  display: none;
}

body.view-map #grid {
  display: none;
}

body.view-map #map {
  display: block;
}

/* =============================================
   11. Spotlight Instagram feed
   ============================================= */

/* Phone: equal-width columns instead of auto */
.spotlight-instagram-feed .sli__phone .FeedGridLayout__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Drop the padding-bottom square trick on the cell */
.spotlight-instagram-feed .FeedGridLayout__cell {
  padding-bottom: 0 !important;
  aspect-ratio: auto !important;
  height: auto !important;
}

/* Keep tile content in normal flow so Elementor's flex container can measure it */
.spotlight-instagram-feed .FeedGridLayout__cell-content {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.spotlight-instagram-feed .FeedGridLayout__media-container,
.spotlight-instagram-feed .MediaTile__root,
.spotlight-instagram-feed .MediaThumbnail__root {
  width: 100%;
  height: 100%;
}

.spotlight-instagram-feed .MediaThumbnail__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================
   12. Responsive
   ============================================= */

/* Laptop + tablet landscape */
@media (max-width: 1366px) {
  .content-carousel,
  .gallery-carousel {
    --gutter: 40px;
  }
}

/* Tablet landscape: team 4 + peek */
@media (max-width: 1200px) {
  .content-carousel:not(.content-carousel--work) .swiper-slide {
    width: 22vw !important;
  }
}

/* Tablet portrait: work 2 + peek */
@media (max-width: 1024px) {
  .content-carousel,
  .gallery-carousel {
    --gutter: 32px;
  }

  .content-carousel--work .swiper-slide {
    width: 40vw !important;
  }
}

/* Phone landscape: team 2 + peek */
@media (max-width: 880px) {
  .content-carousel,
  .gallery-carousel {
    --gutter: 24px;
  }

  .content-carousel:not(.content-carousel--work) .swiper-slide {
    width: 40vw !important;
  }
}

/* Phone portrait: team + work both 1 + peek of 2nd */
@media (max-width: 767px) {
  .content-carousel,
  .gallery-carousel {
    --gutter: 20px;
  }

  .content-carousel:not(.content-carousel--work) .swiper-slide,
  .content-carousel--work .swiper-slide {
    width: 80vw !important;
  }

  .content-arrows {
    display: none !important;
  }

  .team-bio-overlay .jet-listing-grid__item.is-active-bio {
    padding: 24px;
  }

  .gallery-swiper .swiper-slide {
    width: 85% !important;
  }

  .gallery-arrows {
    display: none;
  }

  .community-view-toggle {
    justify-content: center;
  }

  .community-toggle-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}