/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ── Header currency UI ─────────────────────────────────────────────── */
.currency-selector-item {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.currency-header-dropdown {
  font-size: 0.9rem;
  font-weight: 500;
  background: transparent;
  border: none;
  padding: 6px 4px;
  color: #2c3e50;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%232c3e50" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px;
  padding-right: 20px;
}

.currency-header-dropdown:focus {
  outline: none;
}

/* ── Single Destination layout ─────────────────────────────────────────
   Desktop/tablet: two columns with fixed-width sidebar.
   Mobile: stack content and show sidebar inline. */

/* Desktop / tablet */
.single-destination .ct-main-content {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.single-destination .ct-main-content> :first-child {
  flex: 1 1 0;
  min-width: 0;
}

.single-destination .ct-main-content> :last-child {
  flex: 0 0 320px;
  /* tweak width here (300–360px) */
  max-width: 320px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Sidebar polish (all sizes) */
.single-destination #secondary .widget {
  background: #fff;
  border: 1px solid #e8ecf2;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(13, 38, 76, .06);
  margin: 0 0 18px;
}

.single-destination #secondary .widget-title {
  margin: 0 0 .75rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: #213547;
  border-bottom: 1px solid #eef1f6;
  padding-bottom: .5rem;
}

.single-destination #secondary .widget_text ul,
.single-destination #secondary .widget_text ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.single-destination #secondary .widget_text li,
.single-destination #secondary .widget_text p {
  margin: .5rem 0;
  line-height: 1.45;
  color: #2a3b4c;
}

.single-destination #secondary .widget_text strong {
  font-weight: 700;
}

.single-destination #secondary a {
  text-decoration: none;
  border-bottom: 1px dotted rgba(33, 53, 71, .35);
}

.single-destination #secondary a:hover {
  border-bottom-color: transparent;
  text-decoration: underline;
}

/* Mobile (single block only) */
@media (max-width: 768px) {
  .single-destination .ct-main-content {
    flex-direction: column !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
  }

  /* Ensure sidebar is visible and full-width */
  .single-destination #secondary,
  .single-destination .widget-area,
  .single-destination .ct-sidebar,
  .single-destination aside.sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    position: static !important;
    margin: 0 !important;
  }

  /* Remove desktop clamp when stacked */
  .single-destination .ct-main-content> :last-child {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  /* Mobile card tweaks */
  .single-destination #secondary .widget {
    padding: 14px 16px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(13, 38, 76, .06);
    margin-top: 12px;
  }

  .single-destination #secondary .widget-title {
    font-size: 1.02rem;
    margin-bottom: .6rem;
  }
}

/* Destinations horizontal scroller — same width as content/video */
.rs-dest-row {
  margin: 0 0 1.5rem;
}

.rs-dest-row__title {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
  font-weight: 700;
}

/* one horizontal row, ~4 visible; scroll for more */
.rs-dest-row__track {
  display: grid;
  grid-auto-flow: column;
  /* 4 visible: each item is (100% - 3*gap)/4 */
  --gap: 12px;
  grid-auto-columns: calc((100% - (3 * var(--gap))) / 4);
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: .4rem;
  /* room for scrollbar */
  -webkit-overflow-scrolling: touch;
}

.rs-dest-row__track::-webkit-scrollbar {
  height: 8px;
}

.rs-dest-row__track::-webkit-scrollbar-thumb {
  background: #e0e6ef;
  border-radius: 999px;
}

.rs-dest-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}

.rs-dest-row__thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f8fb;
  border: 1px solid #e8ecf2;
}

.rs-dest-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rs-dest-row__ph {
  width: 100%;
  height: 100%;
  background: #e9eef6;
}

.rs-dest-row__label {
  font-size: .9rem;
  font-weight: 600;
  color: #213547;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* smaller screens: show ~2 items */
@media (max-width: 700px) {
  .rs-dest-row__track {
    grid-auto-columns: calc((100% - var(--gap)) / 2);
  }
}

/* Remove border only for Vlogger Information in single destination page */
.single-destination .rs-vlogger-widget {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  /* optional */
}

/* Front-page search (below header): hide the submit button, keep form accessible */
.rs-home-search button[type="submit"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Let the input take full width now */
.rs-home-search input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
}

.rs-home-search {
  display: flex;
  align-items: center;
}

/* ================================
   RS:FT START — Featured Traveler (general)
   v2025.08.19-a
   ================================ */
.featured-traveler-card {
  display: grid;
  grid-template-columns: 96px auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 10px;
  background: #fff;
}

.widget_featured_traveler .widget-title,
.home-featured_traveler .section-title {
  margin-bottom: 10px;
}

.featured-traveler-photo img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
}

.featured-traveler-name {
  margin: 0 0 6px 0;
  font-weight: 600;
  line-height: 1.2;
}

.featured-traveler-bio {
  margin: 0;
  opacity: .9;
  font-size: .95rem;
}

/* ================================
   RS:FT END — Featured Traveler (general)
   ================================ */

/* Mobile: let the sidebar and list expand (no clamp, no scrolling) */
@media (max-width:980px) {
  .rs-hero-side {
    overflow: visible;
  }

  .rs-side-list {
    flex: initial;
    min-height: auto;
    overflow: visible;
  }
}

/* Single Destination – reduce space between video and sidebar */
.single-destination .destination-wrap {
  gap: 1rem;
  /* try 1rem (16px) or 1.5rem */
}

/* =============================
   Single Destination — STI text spacing fix
   ============================= */
body.single-destination .travel-info p,
body.single-destination .travel-info li {
  margin: 0 0 .6rem 0 !important;
  /* consistent bottom gap */
  line-height: 1.5;
  /* easy readability */
}

body.single-destination .travel-info h4 {
  margin: 0 0 .5rem 0 !important;
  font-weight: 600;
  color: #173b6c;
}

body.single-destination .travel-info ul {
  margin: 0 !important;
  padding-left: 1.2rem;
}

/* Hide scrollbar when ticker is active */
.rs-side-list.rs-no-scrollbar {
  scrollbar-width: none
}

.rs-side-list.rs-no-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0
}

/* ===================================================================
   HOME — Featured Traveler + Ad row (outside Top Destinations)
   Works with front-page.php v2025-08-17C
   =================================================================== */

/* ============================================================
   RS:FT-HOME_SPLIT START v2025.08.19-b — 2025-08-19 09:10 Asia/Manila
   Featured Traveler (left) + Other Videos (right)
   ============================================================ */

.rs-ft-wrap.rs-ft-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  /* left wider */
  gap: 16px;
  align-items: start;
}

/* Left: reuse your existing card, just remove outer margin */
.rs-ft-left .featured-traveler-card {
  margin: 0;
}

/* Right column header + list */
.rs-ft-right-head {
  font-weight: 700;
  color: #173b6c;
  margin: 0 0 .5rem;
}

.rs-ft-videos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

/* Each video row: thumbnail + title */
.rs-ft-video a {
  display: grid;
  grid-template-columns: 112px 1fr;
  /* thumbnail | title */
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(13, 38, 76, .04);
}

.rs-ft-video a:hover {
  background: #f8fafc;
}

/* 16:9 thumbnail with hard clamp */
.rs-ft-vthumb {
  display: block;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: #f2f5f8;
}

.rs-ft-vthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title: clamp to two lines to avoid overflow */
.rs-ft-vtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.25;
}

/* Tablet & below: stack columns; give thumb a bit more width */
@media (max-width:980px) {
  .rs-ft-wrap.rs-ft-split {
    grid-template-columns: 1fr;
  }

  .rs-ft-video a {
    grid-template-columns: 120px 1fr;
  }
}

/* ============================================================
   RS:FT-HOME_SPLIT END v2025.08.19-b
   ============================================================ */

/* Row below the hero: left = FT, right = Ad.
   Right column width matches home sidebar (340px / 300px / stacked). */
.rs-ft-ad-row {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  margin: 0 0 1.25rem 0;
  align-items: stretch;
  /* equal height columns */
}

@media (max-width:1200px) {
  .rs-ft-ad-row {
    grid-template-columns: 1fr 300px;
  }
}

@media (max-width:980px) {
  .rs-ft-ad-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   RS:FT-HOME START — FT styles in Home FT+Ad row
   v2025.08.19-a
   ========================================== */
#rs-home-ft .rs-ft-head {
  padding: .6rem 0;
  font-weight: 700;
  color: #173b6c;
  margin: 0;
}

#rs-home-ft .rs-ft-wrap {
  background: #fff;
  border: 1px solid #e8ecf2;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(13, 38, 76, .06);

  /* fill the column height and keep content centered */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================
   RS:FT-HOME END — FT styles in Home FT+Ad row
   ========================================== */

/* Ad column box */
.rs-ad-col .rs-aff-rotator {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8ecf2;
  border-radius: 12px;
  background: #fff;
  padding: 0;
  /* remove extra inner padding */
  box-shadow: 0 4px 16px rgba(13, 38, 76, .06);
  overflow: hidden;
  /* ensure only one card shows */
  position: relative;
}

/* Ad cards inside */
.rs-aff-card {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 1rem;
  background: #f8fafc;
  border: none;
  /* remove double border */
  border-radius: 0;
  /* flatten inside corners */
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rs-aff-card:first-child {
  position: relative;
}

/* show first one initially */

.rs-aff-card:hover {
  background: #f1f5f9
}

.rs-aff-logo img {
  height: 28px;
  width: auto;
  display: block;
  margin-right: .25rem;
}

.rs-aff-copy {
  text-align: left
}

.rs-aff-copy strong {
  display: block;
  color: #173b6c;
  font-weight: 700;
  line-height: 1.2;
}

.rs-aff-copy span {
  display: block;
  color: #334155;
  font-size: .9rem;
  opacity: .9;
}




/* Force the ads column to stack with a visible gap, no matter what the theme sets */
aside.rs-ad-col>aside.rs-ad-col>.home-ft-ads {
  display: block !important;
  /* kill any flex/grid coming from theme */
}

/* Each slot is a block row */
aside.rs-ad-col>aside.rs-ad-col>.home-ft-ads .ad-slot {
  display: block !important;
  min-height: 120px !important;
  /* equal row height */
}

/* Add the space BETWEEN row 1 and row 2 */
aside.rs-ad-col>aside.rs-ad-col>.home-ft-ads .ad-slot+.ad-slot {
  margin-top: 22px !important;
  /* the visible gap */
}

/* Make the ad card fill the slot height (works whether link or div) */
aside.rs-ad-col>aside.rs-ad-col>.home-ft-ads .ad-slot>.rs-aff-card {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  /* fills the 120px slot */
  padding: 16px !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(17, 24, 39, .06) !important;
  text-decoration: none !important;
}


.rs-aff-copy {
  text-align: left
}

.rs-aff-copy strong {
  display: block;
  color: #173b6c;
  font-weight: 700;
  line-height: 1.2
}

.rs-aff-copy span {
  display: block;
  color: #334155;
  font-size: .9rem;
  opacity: .9
}

/* Optional fade when rotating (if JS rotation enabled) */
.rs-aff-rotator .rs-aff-card {
  transition: opacity .3s ease
}

.rs-aff-rotator.rs-fading .rs-aff-card {
  opacity: 0
}