/* =====================================================================
   Pink City Trails - design system layer (Phase 3)
   Loaded after style.css by mu-plugins/pct-ds.php.
   Rename that mu-plugin to switch this whole layer off.
   Order: tokens > base > components > utilities > motion.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
	/* colour roles */
	--ds-ivory:#FAF7F2;      /* page */
	--ds-paper:#FFFFFF;      /* cards, fields */
	--ds-sand:#F2ECE2;       /* quiet band */
	--ds-blush:#F7E6DD;      /* pink-city band */
	--ds-line:#E3D8C8;       /* hairlines */
	--ds-line-strong:#CDBFA9;/* field borders */
	--ds-ink:#17140F;        /* headings, body */
	--ds-ink-soft:#3A322A;   /* long-form body */
	--ds-muted:#6E6357;      /* meta, captions (5.6:1 on ivory) */
	--ds-accent:#B4482E;     /* terracotta - brand, primary action */
	--ds-accent-deep:#8E3520;/* hover / pressed */
	--ds-accent-tint:#F4DED4;
	--ds-saffron:#D9982E;    /* decorative only - never body text on light */
	--ds-peacock:#0F4D52;    /* secondary band */
	--ds-night:#16120E;      /* dark band */
	--ds-on-dark:#F6F1E9;
	--ds-on-dark-muted:rgba(246,241,233,.74);

	/* type */
	--ds-serif:"Gilda Display", Georgia, "Times New Roman", serif;
	--ds-sans:Karla, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ds-fs-xs:.75rem;                                   /* 12  */
	--ds-fs-sm:.9375rem;                                 /* 15  */
	--ds-fs-base:clamp(1rem, .96rem + .2vw, 1.125rem);   /* 16-18 */
	--ds-fs-lg:clamp(1.125rem, 1.04rem + .42vw, 1.375rem);/* 18-22 */
	--ds-fs-h4:clamp(1.25rem, 1.12rem + .6vw, 1.625rem); /* 20-26 */
	--ds-fs-h3:clamp(1.5rem, 1.3rem + 1vw, 2.125rem);    /* 24-34 */
	--ds-fs-h2:clamp(2rem, 1.55rem + 2.1vw, 3.5rem);     /* 32-56 */
	--ds-fs-h1:clamp(2.5rem, 1.75rem + 3.6vw, 5.25rem);  /* 40-84 */
	--ds-fs-display:clamp(3rem, 1.9rem + 5.2vw, 7rem);   /* 48-112 */
	--ds-lh-tight:1.04;
	--ds-lh-head:1.12;
	--ds-lh-body:1.65;
	--ds-track-caps:.16em;

	/* space - 4px base, one section rhythm */
	--ds-s1:.25rem; --ds-s2:.5rem; --ds-s3:.75rem; --ds-s4:1rem;
	--ds-s5:1.5rem; --ds-s6:2rem;  --ds-s7:3rem;   --ds-s8:4.5rem;
	--ds-section:clamp(4rem, 2.6rem + 6vw, 9rem);
	--ds-gutter:clamp(20px, 2.5vw, 44px);
	--ds-measure:38em;

	/* shape, depth, motion */
	--ds-r-sm:2px; --ds-r-md:6px; --ds-r-lg:14px; --ds-r-pill:999px;
	--ds-shadow-1:0 1px 2px rgba(23,20,15,.05), 0 12px 30px -18px rgba(23,20,15,.30);
	--ds-shadow-2:0 2px 6px rgba(23,20,15,.06), 0 30px 60px -28px rgba(23,20,15,.45);
	--ds-ease:cubic-bezier(.22,.61,.36,1);
	--ds-dur:.35s;
}

/* ---------- 2. Base ---------- */
body{
	font-weight:400;
	line-height:var(--ds-lh-body);
	color:var(--ds-ink);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
	font-kerning:normal;
}
::selection{background:var(--ds-accent);color:#fff}
:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}
:where(p,li,dd){text-wrap:pretty}
:where(h1,h2,h3){font-family:var(--ds-serif);font-weight:400;letter-spacing:-.018em}
:where(b,strong){font-weight:700}
:where(hr.wp-block-separator){border:0;border-top:1px solid var(--ds-line);opacity:1}

/* Body links inside written content - underlined, brand coloured */
:where(.wp-block-post-content,.entry-content,.pct-article,.woocommerce-Tabs-panel) :where(p,li,td,dd) a:not([class*="button"]):not(.wp-element-button){
	color:var(--ds-accent);
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:.22em;
	transition:color var(--ds-dur) var(--ds-ease),text-decoration-thickness var(--ds-dur) var(--ds-ease);
}
:where(.wp-block-post-content,.entry-content,.pct-article,.woocommerce-Tabs-panel) :where(p,li,td,dd) a:not([class*="button"]):not(.wp-element-button):hover{
	color:var(--ds-accent-deep);
	text-decoration-thickness:2px;
}

/* One focus style everywhere, keyboard only */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
	outline:2px solid var(--ds-accent);
	outline-offset:3px;
	border-radius:var(--ds-r-sm);
}

/* ---------- 3. Components ---------- */

/* 3a. Eyebrow - the small capitals line above a heading */
:root .pct-eyebrow,
:root .ds-eyebrow{
	font-family:var(--ds-sans);
	font-size:var(--ds-fs-xs) !important;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	line-height:1.4;
	color:var(--ds-accent);
}

/* 3b. Buttons - primary (filled), secondary (outline), on-dark */
:root :is(.wp-element-button,.wp-block-button__link,.pct-btn,.ds-btn){
	font-family:var(--ds-sans);
	font-weight:600;
	letter-spacing:var(--ds-track-caps);
	border-radius:var(--ds-r-sm);
	transition:background-color var(--ds-dur) var(--ds-ease),color var(--ds-dur) var(--ds-ease),border-color var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur) var(--ds-ease),transform .16s var(--ds-ease);
}
:root :is(.wp-block-button:not(.is-style-outline) > .wp-block-button__link,.ds-btn--primary,.single_add_to_cart_button,#place_order):hover{
	background-color:var(--ds-accent-deep);
	box-shadow:0 14px 28px -16px rgba(142,53,32,.75);
}
:root :is(.wp-block-button.is-style-outline > .wp-block-button__link,.ds-btn--secondary){
	background:transparent;
	color:var(--ds-ink);
	border:1px solid var(--ds-ink);
}
:root :is(.wp-block-button.is-style-outline > .wp-block-button__link,.ds-btn--secondary):hover{
	background:var(--ds-ink);
	color:var(--ds-ivory);
}
.ds-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:.6em;
	min-height:50px;padding:15px 28px;
	font-size:.8125rem;line-height:1.2;text-transform:uppercase;text-decoration:none;
	border:1px solid transparent;cursor:pointer;
}
.ds-btn--primary{background:var(--ds-accent);color:#FFF6EF}
.ds-btn--light{background:var(--ds-on-dark);color:var(--ds-ink)}
.ds-btn--light:hover{background:#fff}
.ds-btn--ghost-light{background:transparent;color:var(--ds-on-dark);border-color:rgba(246,241,233,.55)}
.ds-btn--ghost-light:hover{border-color:var(--ds-on-dark);background:rgba(246,241,233,.08)}

/* 3c. Arrow text-link - for "see all" style actions */
.ds-link{
	display:inline-flex;align-items:center;gap:.5em;
	font-size:var(--ds-fs-xs);font-weight:600;letter-spacing:var(--ds-track-caps);text-transform:uppercase;
	color:var(--ds-ink);text-decoration:none;
	padding-bottom:4px;border-bottom:1px solid currentColor;
	transition:color var(--ds-dur) var(--ds-ease),gap var(--ds-dur) var(--ds-ease);
}
.ds-link::after{content:"\2192";font-size:1.1em;line-height:1}
.ds-link:hover{color:var(--ds-accent);gap:.8em}

/* 3d. Cards - existing tour / destination / related cards share one behaviour */
:root :is(.pct-tcard,.pct-dcard,.pct-rcard,.ds-card){
	transition:transform var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur) var(--ds-ease);
}
:root :is(.pct-tcard,.pct-dcard,.pct-rcard,.ds-card):hover{
	transform:translateY(-4px);
	box-shadow:var(--ds-shadow-2);
}
:root :is(.pct-tcard__media,.ds-card__media){overflow:hidden}
:root :is(.pct-tcard__img,.ds-card__media img){
	transition:transform .9s var(--ds-ease);
}
:root :is(.pct-tcard,.ds-card):hover :is(.pct-tcard__img,.ds-card__media img){transform:scale(1.045)}
:root .pct-tcard__title{font-family:var(--ds-serif);letter-spacing:-.01em}

.ds-card{
	display:flex;flex-direction:column;
	background:var(--ds-paper);
	border-radius:var(--ds-r-md);
	overflow:hidden;
	box-shadow:var(--ds-shadow-1);
	color:inherit;text-decoration:none;
}
.ds-card__media{position:relative;aspect-ratio:4/3;background:var(--ds-sand)}
.ds-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.ds-card__body{display:flex;flex-direction:column;gap:var(--ds-s2);padding:22px 24px 26px;flex:1}
.ds-card__title{font-family:var(--ds-serif);font-size:var(--ds-fs-h4);line-height:1.2;letter-spacing:-.01em;margin:0}
.ds-card__meta{font-size:var(--ds-fs-sm);color:var(--ds-muted);margin:0}
.ds-card__price{margin-top:auto;padding-top:var(--ds-s3);border-top:1px solid var(--ds-line);font-size:var(--ds-fs-sm);color:var(--ds-muted)}
.ds-card__price b{font-family:var(--ds-serif);font-size:1.35em;font-weight:400;color:var(--ds-ink)}

/* 3e. Tag / pill on an image */
.ds-tag{
	display:inline-block;
	padding:6px 10px;
	font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
	background:rgba(250,247,242,.94);color:var(--ds-ink);
	border-radius:var(--ds-r-sm);
}
.ds-card__media .ds-tag{position:absolute;left:14px;bottom:14px}

/* 3f. Form fields - booking card, checkout, contact */
:root :is(.pct-form,.pct-field,form.cart,.woocommerce-checkout,.ds-field) :is(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="date"],select,textarea){
	border:1px solid var(--ds-line-strong);
	border-radius:var(--ds-r-sm);
	background-color:var(--ds-paper);
	color:var(--ds-ink);
	transition:border-color var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur) var(--ds-ease);
}
:root :is(.pct-form,.pct-field,form.cart,.woocommerce-checkout,.ds-field) :is(input,select,textarea):focus{
	border-color:var(--ds-accent);
	box-shadow:0 0 0 3px var(--ds-accent-tint);
	outline:none;
}
.ds-field{display:flex;flex-direction:column;gap:6px}
.ds-field label{font-size:var(--ds-fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-muted)}
.ds-field :is(input,select){min-height:50px;padding:0 14px;font:inherit}

/* ---------- 4. Utilities for Phase 4-5 page builds ---------- */
.ds-section{padding-block:var(--ds-section)}
.ds-section--sand{background:var(--ds-sand)}
.ds-section--blush{background:var(--ds-blush)}
.ds-section--night,.ds-section--peacock{color:var(--ds-on-dark)}
.ds-section--night{background:var(--ds-night)}
.ds-section--peacock{background:var(--ds-peacock)}
:is(.ds-section--night,.ds-section--peacock) :is(h1,h2,h3,h4){color:var(--ds-on-dark)}
:is(.ds-section--night,.ds-section--peacock) p{color:var(--ds-on-dark-muted)}
:is(.ds-section--night,.ds-section--peacock) .ds-eyebrow{color:var(--ds-saffron)}

.ds-wrap{max-width:1680px;margin-inline:auto;padding-inline:var(--ds-gutter)}
.ds-narrow{max-width:800px;margin-inline:auto}
.ds-display{font-family:var(--ds-serif);font-size:var(--ds-fs-display);line-height:var(--ds-lh-tight);letter-spacing:-.03em;font-weight:400}
.ds-h1{font-size:var(--ds-fs-h1);line-height:var(--ds-lh-tight);letter-spacing:-.025em}
.ds-h2{font-size:var(--ds-fs-h2);line-height:1.08;letter-spacing:-.02em}
.ds-h3{font-size:var(--ds-fs-h3);line-height:1.15}
.ds-h4{font-size:var(--ds-fs-h4);line-height:1.25}
.ds-lead{font-size:var(--ds-fs-lg);line-height:1.55;color:var(--ds-ink-soft);max-width:var(--ds-measure)}
.ds-small{font-size:var(--ds-fs-sm);color:var(--ds-muted)}
.ds-italic{font-style:italic}
.ds-accent{color:var(--ds-accent)}
.ds-rule{border:0;height:1px;background:var(--ds-line);margin:0}
.ds-stack > * + *{margin-block-start:var(--ds-s5)}
.ds-stack-sm > * + *{margin-block-start:var(--ds-s3)}
.ds-row{display:flex;flex-wrap:wrap;gap:var(--ds-s4);align-items:center}
.ds-grid{display:grid;gap:clamp(16px,2vw,32px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.ds-grid--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.ds-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--ds-s5);margin-bottom:clamp(28px,3vw,48px)}
.ds-head > div{max-width:46rem}

/* ---------- 5. Motion ---------- */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
		scroll-behavior:auto !important;
	}
	:root :is(.pct-tcard,.pct-dcard,.pct-rcard,.ds-card):hover{transform:none}
}

/* centred blocks: every child centres, not just its text */
.ds-center{text-align:center}
.ds-center > *{margin-inline:auto}
.ds-center .ds-row{justify-content:center}

/* Gilda Display has one weight: never fake a bold, keep real italics/obliques allowed */
html{font-synthesis:style}
:where(h1,h2,h3,h4){letter-spacing:-.01em}

/* mobile: lighter buttons (Phase 4 feedback) */
@media (max-width: 781px){
	:root .ds-btn{min-height:42px;padding:11px 18px;font-size:.6875rem;letter-spacing:.12em}
}

/* buttons: border-box so min-height is the real height (was content-box: 50 + padding = 81px) */
:root .ds-btn{box-sizing:border-box}

/* ---------- header: cart sits beside "Browse tours" (desktop) and beside the menu button (mobile), and is bigger ---------- */
header .is-content-justification-space-between > .wp-block-navigation{margin-inline:auto}
header .is-content-justification-space-between > .wc-block-mini-cart{margin-left:auto;margin-right:-8px}
header .wc-block-mini-cart__button{
	width:48px;height:48px;padding:0 !important;
	display:inline-flex;align-items:center;justify-content:center;
	border-radius:999px;color:var(--ds-ink);
	transition:background-color var(--ds-dur) var(--ds-ease);
}
header .wc-block-mini-cart__button:hover{background:var(--ds-sand)}
header .wc-block-mini-cart__icon{width:28px !important;height:28px !important}
header .wc-block-mini-cart__badge{
	min-width:19px;height:19px;padding:0 5px;
	font-size:11px;font-weight:700;line-height:19px;
	background:var(--ds-accent) !important;color:#fff !important;border:2px solid var(--ds-ivory);
}
@media (max-width: 781px){
	header .is-content-justification-space-between > .wc-block-mini-cart{margin-right:-14px}
	header .wc-block-mini-cart__icon{width:27px !important;height:27px !important}
}