/*
===========================================
Wander Wise Pro - Design System
This is the ONLY file that should define :root variables.
Every other stylesheet consumes them via var(--name).
===========================================
*/

:root{
	--primary:#6B2FA0;
	--primary-dark:#4A1D73;
	--primary-tint:#F4EEFB;
	--gold:#D4A24C;
	--gold-dark:#A97F32;
	--text:#14181C;
	--muted:#5B6472;
	--muted-2:#8A93A1;
	--bg:#ffffff;
	--surface:#FAF8FC;
	--line:rgba(20,24,28,.08);
	--container:1280px;
	--radius:20px;
	--radius-sm:12px;
	--radius-lg:28px;
	--shadow-sm:0 2px 8px rgba(20,24,28,.06);
	--shadow:0 20px 50px rgba(31,15,61,.10);
	--shadow-lg:0 30px 80px rgba(31,15,61,.20);
	--ease:cubic-bezier(.16,1,.3,1);
	--transition:.4s var(--ease);
	--hero-height:80vh;

	/* Brand signature: twilight-mountain gradient, lifted from the logo mark.
	   Use for hero overlays where there's no photo underneath, and for any
	   full-bleed "brand moment" section (CTAs, section dividers, newsletter). */
	--gradient-twilight: linear-gradient(180deg, #1F0F3D 0%, #5B2C8C 55%, #E8935A 100%);
}

/* ===========================
RESET
=========================== */

*,
*::before,
*::after{
	box-sizing:border-box;
	margin:0;
	padding:0;
}

body{
	font-family:var(--body-font, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif);
	color:var(--text);
	background:var(--bg);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

img{
	max-width:100%;
	display:block;
}

a{
	text-decoration:none;
	color:inherit;
}

ul, ol{
	list-style:none;
}

button, input, select, textarea{
	font:inherit;
	outline:none;
}

/* ===========================
Layout
=========================== */

.ww-container{
	max-width:var(--container);
	margin:auto;
	padding:0 20px;
}

.ww-section{
	padding:100px 0;
}

/* ===========================
Typography
=========================== */

h1, h2, h3, h4, h5{
	color:var(--text);
	font-family:var(--heading-font, inherit);
	font-weight:700;
	line-height:1.15;
}

h1{ font-size:56px; letter-spacing:0; }
h2{ font-size:38px; letter-spacing:0; }
h3{ font-size:22px; letter-spacing:0; font-family:var(--body-font, inherit); font-weight:700; }

p{
	color:var(--muted);
	font-size:16px;
}

.ww-section-heading{
	text-align:center;
	margin-bottom:50px;
}

.ww-section-tag{
	display:inline-block;
	font-size:12px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--primary);
	margin-bottom:14px;
}

.ww-section-heading h2{
	margin-bottom:12px;
}

.ww-section-heading p{
	max-width:650px;
	margin:auto;
}

/* ===========================
Buttons
=========================== */

.ww-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	white-space:nowrap;
	padding:16px 32px;
	border:none;
	border-radius:999px;
	background:var(--primary);
	color:#fff;
	font-weight:600;
	font-size:15px;
	letter-spacing:-0.005em;
	cursor:pointer;
	transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
	box-shadow:0 1px 2px rgba(20,24,28,.06);
}

.ww-button:hover{
	transform:translateY(-3px);
	background:var(--primary-dark);
	box-shadow:0 16px 32px rgba(15,118,110,.28);
}

.ww-button:active{
	transform:translateY(-1px);
}

.ww-button-secondary{
	background:rgba(255,255,255,.12);
	color:#fff;
	border:1.5px solid rgba(255,255,255,.5);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
}

.ww-button-secondary:hover{
	background:#fff;
	color:var(--primary);
	border-color:#fff;
	box-shadow:0 16px 32px rgba(0,0,0,.18);
}

/* ===========================
Card (base, shared by every CPT card)
=========================== */

.ww-card{
	position:relative;
	background:#fff;
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow-sm);
	transition:transform var(--transition), box-shadow var(--transition);
	border:1px solid var(--line);
}

.ww-card:hover{
	transform:translateY(-8px);
	box-shadow:var(--shadow-lg);
}

.ww-card-image{
	position:relative;
	display:block;
	height:220px;
	overflow:hidden;
}

.ww-card-image::after{
	content:'';
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
	opacity:0;
	transition:opacity var(--transition);
}

.ww-card:hover .ww-card-image::after{
	opacity:1;
}

.ww-card-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .6s var(--ease);
}

.ww-card:hover .ww-card-image img{
	transform:scale(1.06);
}

.ww-card-content{
	padding:24px;
}

.ww-card-content h3{
	margin-bottom:8px;
}

.ww-card-link{
	display:inline-flex;
	align-items:center;
	gap:6px;
	white-space:nowrap;
	margin-top:12px;
	color:var(--primary);
	font-weight:600;
}

.ww-rating-badge{
	position:absolute;
	top:14px;
	right:14px;
	display:inline-flex;
	align-items:center;
	gap:4px;
	background:rgba(20,24,28,.55);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	color:#fff;
	padding:6px 14px;
	border-radius:999px;
	font-size:13px;
	font-weight:600;
	z-index:2;
}

.ww-rating-badge .ww-icon{
	color:var(--gold);
	margin-right:2px;
}

.ww-badge{
	position:absolute;
	top:14px;
	left:14px;
	background:rgba(255,255,255,.9);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	color:var(--text);
	padding:6px 14px;
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.02em;
	z-index:2;
	box-shadow:var(--shadow-sm);
}

.ww-location{
	font-size:13px;
	font-weight:600;
	color:var(--muted);
}

/* Global Grid */
 
.ww-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:32px;
    align-items:stretch;
}
 
@media(max-width:768px){
    .ww-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
}

/* ==========================
   Icons (WW_Icons::render())
   Works for both output modes:
     - inline <svg class="ww-icon">   (default, recolorable via currentColor)
     - <img class="ww-icon" src="...svg">  (mode: 'img', color is baked into the file)
========================== */

.ww-icon{
    --ww-icon-size: 1em;
    width: var(--ww-icon-size);
    height: var(--ww-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: -0.15em; /* aligns optically with adjacent text baseline */
    margin-right: 8px;
    color: currentColor; /* inherits text color of whatever wraps it */
    fill: none;
    stroke: currentColor;
}

/* Only matters if an <svg> is ever nested INSIDE a separately-classed
   .ww-icon wrapper (not how WW_Icons::render() works today, but kept
   as a safe default for future markup). Deliberately a descendant
   selector (.ww-icon svg) so it can never match the .ww-icon element
   itself and re-override its own width/height with 100% - that exact
   bug is what caused icons to render at random/huge sizes earlier. */
.ww-icon > svg{
    width: 100%;
    height: 100%;
    display: block;
    fill: inherit;
    stroke: inherit;
}

/* <img> mode: SVG color is fixed inside the file, so we only control size/fit. */
img.ww-icon{
    width: var(--ww-icon-size);
    height: var(--ww-icon-size);
    object-fit: contain;
}

/* Sizing scale - apply alongside .ww-icon, e.g. class="ww-icon ww-icon-lg" */
.ww-icon-sm{ --ww-icon-size: 0.85em; }
.ww-icon-lg{ --ww-icon-size: 1.5em; }
.ww-icon-xl{ --ww-icon-size: 2em; }

/* Headings: icons scale relative to the heading's own font-size via em,
   so h1/h2/h3 icons scale automatically without extra classes. */
h1 .ww-icon, h2 .ww-icon, h3 .ww-icon,
h4 .ww-icon, h5 .ww-icon, h6 .ww-icon{
    margin-right: 0.35em;
}

/* Buttons: icon inherits the button's text color and sits inline with the label. */
.ww-button .ww-icon,
button .ww-icon,
a.ww-button .ww-icon{
    margin-right: 6px;
    vertical-align: -0.1em;
}

/* Icon-only buttons (no visible text label) - drop the trailing margin. */
.ww-button-icon-only .ww-icon{
    margin-right: 0;
}

/* Cards: icon picks up the accent color on hover via currentColor. */
.ww-card:hover .ww-icon{
    color: var(--primary);
}

/* Star rating state (used by inline 'star' icons rendered 5x with
   is-filled / is-empty toggled per position - see destination-hero.php). */
.ww-star.is-filled{ color: var(--primary, #f5a623); fill: currentColor; }
.ww-star.is-empty{ color: #d1d5db; }

/* ==========================
   Highlight cards (shared: single-experience.php, single-hidden-india.php)
========================== */

.ww-highlights-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:20px;
	margin-top:50px;
}

.ww-highlight-card{
	display:flex;
	align-items:center;
	gap:10px;
	background:#fff;
	border:1px solid var(--line);
	padding:20px 22px;
	border-radius:var(--radius-sm);
	box-shadow:var(--shadow-sm);
	font-weight:600;
	color:var(--text);
	transition:transform var(--transition), box-shadow var(--transition);
}

.ww-highlight-card:hover{
	transform:translateY(-4px);
	box-shadow:var(--shadow);
}

.ww-highlight-card .ww-icon{
	color:var(--primary);
	margin-right:0;
	flex-shrink:0;
}

/* ==========================
   Hero eyebrow pill (shared across single-experience, single-hidden-india)
========================== */

.ww-hero-eyebrow{
	display:inline-flex;
	align-items:center;
	color:#fff;
	padding:8px 18px;
	margin-bottom:18px;
	background:rgba(255,255,255,.14);
	border:1px solid rgba(255,255,255,.28);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
}