/* =====================================================================
   chanua-soft.css — soft corners, everywhere

   One rule for the whole site: nothing that reads as a card, panel,
   tile, photo frame, map, field or menu has a sharp corner.

   Full-width bands (header, footer, the page-wide hero) stay edge to
   edge on purpose — rounding a bar that touches both sides of the
   screen would just leave odd gaps — but everything INSIDE them is
   rounded.

   Radius scale:  28 big glass panels · 22-24 cards and photo frames ·
                  16-18 tiles, inputs, menus · 12 small chips and tags.
   Loaded last on every page (including the homepage, CSS only — the
   homepage template file itself is not touched).
   ===================================================================== */

:root {
	--cs-r-xl: 28px;
	--cs-r-lg: 22px;
	--cs-r-md: 16px;
	--cs-r-sm: 12px;
}

/* ---- photo frames: any image the content or a card puts on the page ---- */
html body .cs-dir-card__media,
html body .cs-dir-card__media img,
html body .cs-related-card__media,
html body .cs-related-card__media img,
html body .cs-trip-gallery__item,
html body .cs-trip-gallery__item img,
html body .cs-content-pull-img,
html body .cs-content-pull-img img,
html body .cs-founder__media,
html body .cs-founder__media img,
html body .cs-marquee__item,
html body .cs-marquee__item img,
html body .cs-pkg__img,
html body .cs-cat-card img,
html body .cs-dest-card img,
html body .cs-mag-split__media,
html body .cs-mag-split__media img,
html body .cs-story__media img,
html body .cs-about-stats__media img,
html body .cs-impact__media img,
html body .cs-related-chip__media,
html body .cs-related-chip__media img {
	border-radius: var(--cs-r-lg);
}
/* a thumbnail inside a pill is a circle, not a rounded square */
html body .cs-related-chip__media, html body .cs-related-chip__media img { border-radius: 50%; }

/* Images that sit inside an already-rounded card should simply follow it. */
html body .cs-dir-card, html body .cs-related-card, html body .cs-cat-card,
html body .cs-dest-card, html body .cs-pkg { overflow: hidden; }
html body .cs-dir-card__media, html body .cs-dir-card__media img { border-radius: 0; }

/* The hover shine/tilt overlay is drawn on top of a card — match it. */
html body .chm-tilt, html body .chm-tilt-shine { border-radius: inherit; }
html body .cs-related-card.chm-tilt { border-radius: 22px; }

/* ---- cards ---- */
html body .cs-related-card { border-radius: var(--cs-r-lg); }
html body .cs-archive-card { border-radius: var(--cs-r-lg); }
html body .cs-tiers__card,
html body .cs-dir-price-table__tier,
html body .cs-trip-callout,
html body .cs-seasonal-intel__body,
html body .cs-trip-health__item,
html body .cs-trip-climate__col,
html body .cs-story-panel,
html body .cs-wildlife-ring__tip,
html body .cs-stat-tip { border-radius: var(--cs-r-md); }
html body .cs-tiers__tab { border-radius: var(--cs-r-md); }
html body .cs-tiers__season-badge { border-radius: 999px; }

/* ---- labels, badges, notes ---- */
html body .cs-official-badge,
html body .cs-impact__note,
html body .cs-skip-link,
html body .cs-secnav__link { border-radius: var(--cs-r-sm); }
html body .cs-skip-link { border-radius: 0 0 var(--cs-r-sm) var(--cs-r-sm); }
html body .cs-dest-card__link { border-radius: 0; } /* underline link, not a box */

/* ---- maps (the box clips Leaflet's square tiles into the curve) ---- */
html body .cs-itin__map-inner,
html body #chanua-map,
html body .cs-trip-map,
html body .leaflet-container { border-radius: var(--cs-r-lg); overflow: hidden; }
html body .leaflet-popup-content-wrapper { border-radius: var(--cs-r-md); }
html body .leaflet-bar { border-radius: var(--cs-r-sm); overflow: hidden; }
html body .leaflet-bar a:first-child { border-top-left-radius: var(--cs-r-sm); border-top-right-radius: var(--cs-r-sm); }
html body .leaflet-bar a:last-child { border-bottom-left-radius: var(--cs-r-sm); border-bottom-right-radius: var(--cs-r-sm); }

/* ---- menus ---- */
html body .cs-nav__inline-submenu,
html body .cs-nav__menu,
html body .cs-nav__panel { border-radius: var(--cs-r-md); }

/* ---- form controls ---- */
html body select,
html body .cs-archive-sort select { border-radius: var(--cs-r-sm); }
html body .cs-dir-pagination .page-numbers { border-radius: var(--cs-r-sm); }
html body .cs-plan__field input[type="date"] { border-radius: 0; } /* underline fields stay underlines */

/* ---- drawers' toggle chip and quick-stat tiles follow the same family ---- */
html body .cs-drawer__cta { border-radius: 999px; }
html body .cs-quick-stat { border-radius: var(--cs-r-md); }

/* ---- the sticky section bar: full-width, but its end-links soften ---- */
html body .cs-secnav__link { border-radius: 10px 10px 0 0; }

/* ---- the edge-to-edge bands: same width, curved corners -----------------
   These touch both sides of the screen, so they keep their width — but the
   corners that meet the page are rounded, so no band ends in a hard edge. */
html body .cs-nav,
html body .cs-nav.is-scrolled { border-radius: 0 0 var(--cs-r-lg) var(--cs-r-lg); }
html body .cs-secnav { border-radius: 0 0 var(--cs-r-md) var(--cs-r-md); }
html body .cs-footer { border-radius: var(--cs-r-xl) var(--cs-r-xl) 0 0; overflow: hidden; }
html body .cs-hero__stage,
html body .cs-hero,
html body .cs-dir-single__media,
html body .cs-dir-single__media img { border-radius: 0 0 var(--cs-r-xl) var(--cs-r-xl); overflow: hidden; }
html body .cs-hero__slide, html body .cs-hero__wash { border-radius: inherit; }
/* the header's own colour/blur layer follows the curve */
html body .cs-nav.is-scrolled { overflow: visible; }
html body.has-bg-video:not(.home) .cs-footer.cs-glass--dark,
html body .cs-footer.cs-glass--dark { border-radius: var(--cs-r-xl) var(--cs-r-xl) 0 0; }

/* =====================================================================
   Homepage panels: the same clear glass as everywhere else.
   They were a milky 62%-white fill with dark type; now they share the
   see-through recipe (clear fill, heavy blur, bright rim) with light
   type, matching the "Tell me your dates" panel. CSS only — the
   homepage template is untouched.
   ===================================================================== */
body.home.has-bg-video .cs-shead,
body.home.has-bg-video .cs-destinations__intro,
body.home.has-bg-video .cs-features,
body.home.has-bg-video .cs-testimonials,
body.home.has-bg-video .cs-trust__partners,
body.home.has-bg-video .cs-impact__copy,
body.home.has-bg-video .cs-season-list,
body.home.has-bg-video .cs-why-item,
body.home.has-bg-video .cs-close__in {
	background:
		linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.02) 62%, rgba(255,255,255,.12) 100%),
		rgba(18,14,8,.16);
	-webkit-backdrop-filter: blur(30px) saturate(175%) brightness(.88);
	backdrop-filter: blur(30px) saturate(175%) brightness(.88);
	border: 1px solid rgba(255,255,255,.34);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.6),
		inset 1px 0 0 rgba(255,255,255,.24),
		0 0 0 1px rgba(0,0,0,.14),
		0 26px 60px -22px rgba(0,0,0,.55),
		0 4px 12px rgba(0,0,0,.2);
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.4);
	--cs-ink: #ffffff;
	--cs-ink-soft: rgba(255,255,255,.9);
	--cs-ink-faint: rgba(255,255,255,.74);
	--cs-hair: rgba(255,255,255,.3);
	--cs-gold: #f0d28f;
	--cs-gold-deep: #f0d28f;
	--cs-gold-soft: #f0d28f;
	--cs-green-deep: #dfe9bf;
}
body.home.has-bg-video .cs-destinations__intro a,
body.home.has-bg-video .cs-features a,
body.home.has-bg-video .cs-shead a { color: #f3d995; }
body.home.has-bg-video .cs-destinations__intro .cs-h2 em,
body.home.has-bg-video .cs-shead .cs-h2 em { color: #e6edc4; }