/*
Theme Name:  Sud East Luxury Travel
Author:      Your Name
Author URI:  https://yoursite.com
Description: A premium, lightweight WordPress theme built for Moroccan desert adventure travel. Features a crisp white aesthetic, Tifinagh-inspired geometric accents, and a full Custom Post Type system for tours. Inspired by the clean, immersive layouts of leading adventure travel brands.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sahara-trails
Tags:        adventure, travel, tours, moroccan, minimalist, custom-post-type
*/

/* =============================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================= */

:root {
	/* Palette */
	--color-white:        #FFFFFF;
	--color-offwhite:     #F8F6F3;
	--color-charcoal:     #1A1A1A;
	--color-charcoal-mid: #2E2E2E;
	--color-charcoal-light: #5A5A5A;
	--color-amber:        #C8853A;
	--color-amber-light:  #E5A45C;
	--color-amber-pale:   #F5E8D8;
	--color-sand:         #D4B896;
	--color-sand-pale:    #EDE3D7;
	--color-gold:         #C8A45D;   /* champagne gold — luxury hero accent */
	--color-gold-light:   #DBBC7E;
	--color-border:       #E8E2DA;
	--color-border-dark:  #C4B8AA;

	/* Typography */
	--font-display: 'Cormorant Garamond', 'Georgia', serif;
	--font-serif:   'Playfair Display', 'Georgia', serif;   /* cinematic hero title */
	--font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
	--font-mono:    'JetBrains Mono', monospace;

	/* Type Scale */
	--text-xs:   0.75rem;     /* 12px */
	--text-sm:   0.875rem;    /* 14px */
	--text-base: 1rem;        /* 16px */
	--text-md:   1.125rem;    /* 18px */
	--text-lg:   1.375rem;    /* 22px */
	--text-xl:   1.75rem;     /* 28px */
	--text-2xl:  2.25rem;     /* 36px */
	--text-3xl:  3rem;        /* 48px */
	--text-4xl:  4rem;        /* 64px */
	--text-hero: clamp(3rem, 8vw, 6.5rem);

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-32: 8rem;

	/* Layout */
	--max-width:        1280px;
	--max-width-narrow: 760px;
	--gutter:           clamp(1.25rem, 4vw, 2.5rem);

	/* Radii */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-full: 9999px;

	/* Transitions */
	--transition-fast:   150ms ease;
	--transition-base:   250ms ease;
	--transition-slow:   400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* Shadows */
	--shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
	--shadow-lg:  0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
	--shadow-xl:  0 24px 64px rgba(0,0,0,0.12);
}

/* =============================================================================
   RESET & BASE
   ============================================================================= */

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

html {
	font-size:               16px;
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior:         smooth;
}

body {
	background-color: var(--color-white);
	color:            var(--color-charcoal);
	font-family:      var(--font-body);
	font-size:        var(--text-base);
	font-weight:      400;
	line-height:      1.7;
	overflow-x:       hidden;
}

img, video {
	display:   block;
	max-width: 100%;
	height:    auto;
}

a {
	color:           inherit;
	text-decoration: none;
	transition:      color var(--transition-base);
}

ul, ol {
	list-style: none;
}

button, input, textarea, select {
	font-family: inherit;
	font-size:   inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family:    var(--font-display);
	font-weight:    600;
	line-height:    1.2;
	letter-spacing: -0.01em;
	color:          var(--color-charcoal);
}

/* =============================================================================
   LAYOUT UTILITIES
   ============================================================================= */

.container {
	width:     100%;
	max-width: var(--max-width);
	margin:    0 auto;
	padding:   0 var(--gutter);
}

.container--narrow {
	max-width: var(--max-width-narrow);
}

.section {
	padding: var(--space-24) 0;
}

.section--lg {
	padding: var(--space-32) 0;
}

.section--sm {
	padding: var(--space-16) 0;
}

/* Grid */
.grid {
	display: grid;
	gap:     var(--space-8);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.grid--4,
	.grid--3,
	.grid--2 { grid-template-columns: 1fr; }
}

/* Flex */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { flex-direction: column; }
.gap-4       { gap: var(--space-4); }
.gap-6       { gap: var(--space-6); }
.gap-8       { gap: var(--space-8); }

/* Text Utilities */
.text-center { text-align: center; }
.text-amber  { color: var(--color-amber); }
.text-light  { color: var(--color-charcoal-light); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.uppercase   { text-transform: uppercase; letter-spacing: 0.12em; }
.sr-only     { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =============================================================================
   TIFINAGH DECORATIVE ELEMENTS
   ============================================================================= */

/* Tifinagh characters used as visual geometry:
   ⵣ (YAZ) ⵎ (YEM) ⵓ (YU) ⴰ (YA) ⵏ (YAN) ⵔ (YAR) ⴽ (YAK) ⵜ (YAT)
   These are used purely as decorative Unicode glyphs, not as language text. */

.tifinagh-watermark {
	position:       absolute;
	font-size:      clamp(6rem, 15vw, 14rem);
	font-weight:    300;
	color:          transparent;
	-webkit-text-stroke: 1px rgba(200, 133, 58, 0.08);
	pointer-events: none;
	user-select:    none;
	line-height:    1;
	z-index:        0;
	letter-spacing: 0.05em;
}

.tifinagh-divider {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--space-4);
	margin:          var(--space-8) 0;
}

.tifinagh-divider::before,
.tifinagh-divider::after {
	content:    '';
	flex:       1;
	height:     1px;
	background: linear-gradient(to right, transparent, var(--color-border-dark), transparent);
}

.tifinagh-divider__char {
	font-size:   var(--text-lg);
	color:       var(--color-amber);
	opacity:     0.7;
	line-height: 1;
	display:     flex;
	gap:         var(--space-3);
}

.tifinagh-accent {
	display:         inline-block;
	font-size:       var(--text-xs);
	color:           var(--color-amber);
	letter-spacing:  0.3em;
	opacity:         0.6;
	vertical-align:  middle;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

.btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--space-2);
	padding:         0.875rem 2rem;
	font-family:     var(--font-body);
	font-size:       var(--text-sm);
	font-weight:     500;
	letter-spacing:  0.04em;
	text-transform:  uppercase;
	border-radius:   var(--radius-sm);
	border:          2px solid transparent;
	cursor:          pointer;
	transition:      all var(--transition-slow);
	white-space:     nowrap;
	text-decoration: none;
}

.btn--primary {
	background-color: var(--color-amber);
	color:            var(--color-white);
	border-color:     var(--color-amber);
}

.btn--primary:hover {
	background-color: var(--color-charcoal);
	border-color:     var(--color-charcoal);
	color:            var(--color-white);
	transform:        translateY(-1px);
	box-shadow:       var(--shadow-md);
}

.btn--outline {
	background-color: transparent;
	color:            var(--color-charcoal);
	border-color:     var(--color-charcoal);
}

.btn--outline:hover {
	background-color: var(--color-charcoal);
	color:            var(--color-white);
	transform:        translateY(-1px);
}

.btn--outline-white {
	background-color: transparent;
	color:            var(--color-white);
	border-color:     rgba(255,255,255,0.6);
}

.btn--outline-white:hover {
	background-color: var(--color-white);
	color:            var(--color-charcoal);
	border-color:     var(--color-white);
}

.btn--ghost {
	background: transparent;
	border:     none;
	color:      var(--color-charcoal-light);
	padding:    0.5rem 0;
	text-decoration: none;
	position:   relative;
}

.btn--ghost::after {
	content:          '';
	position:         absolute;
	bottom:           0;
	left:             0;
	width:            0;
	height:           1px;
	background-color: var(--color-amber);
	transition:       width var(--transition-slow);
}

.btn--ghost:hover { color: var(--color-charcoal); }
.btn--ghost:hover::after { width: 100%; }

/* =============================================================================
   EYEBROW / LABEL
   ============================================================================= */

.eyebrow {
	display:         inline-flex;
	align-items:     center;
	gap:             var(--space-3);
	font-family:     var(--font-body);
	font-size:       var(--text-xs);
	font-weight:     600;
	text-transform:  uppercase;
	letter-spacing:  0.14em;
	color:           var(--color-amber);
	margin-bottom:   var(--space-4);
}

.eyebrow::before {
	content:    '';
	display:    block;
	width:      24px;
	height:     1px;
	background: var(--color-amber);
	flex-shrink: 0;
}

/* =============================================================================
   SITE HEADER
   ============================================================================= */

.site-header {
	position:         sticky;
	top:              0;
	z-index:          100;
	background-color: rgba(255, 255, 255, 0.96);
	backdrop-filter:  blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom:    1px solid transparent;
	transition:       border-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
	border-color: var(--color-border);
	box-shadow:   var(--shadow-sm);
}

/* Logo — compact, no oversized mark, no tagline */
.site-logo {
	display:         inline-flex;
	align-items:     center;
	gap:             0.625rem;
	flex-shrink:     0;
	text-decoration: none;
}

.site-logo__mark {
	width:            34px;
	height:           34px;
	background-color: var(--color-amber);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	border-radius:    var(--radius-sm);
	font-size:        1.05rem;
	color:            var(--color-white);
	line-height:      1;
	flex-shrink:      0;
}

.site-logo__name {
	font-family:    var(--font-display);
	font-size:      1.15rem;
	font-weight:    600;
	color:          var(--color-charcoal);
	letter-spacing: -0.01em;
	white-space:    nowrap;
}

/* Constrain a custom logo image so it never blows out header height */
.site-logo img,
.custom-logo {
	max-height: 40px;
	width:      auto;
}

/* =============================================================================
   DESKTOP PRIMARY NAVIGATION
   Clean, isolated — contains ONLY nav links and the desktop CTA.
   Mobile overlay is a completely separate element (#mobile-menu).
   ============================================================================= */

/* ── Header inner layout: logo | nav (centered) | cta ──────────────────────── */
.site-header__inner {
	display:         grid;
	grid-template-columns: 1fr auto 1fr;
	align-items:     center;
	height:          76px;
}

.site-header__logo  { grid-column: 1; }
.site-header__nav   { grid-column: 2; }
.site-header__cta   { grid-column: 3; display: flex; justify-content: flex-end; }

/* ── Desktop nav ──────────────────────────────────────────────────────────── */
/*
 * Two selectors on each rule:
 *   .primary-nav            — the class wp_nav_menu / fallback puts on the <ul>
 *   .site-header__nav > ul  — resilience: matches the <ul> even if a plugin or
 *                             WordPress changes its class, guaranteeing the menu
 *                             stays HORIZONTAL on desktop.
 */
.primary-nav,
.site-header__nav > ul {
	display:     flex;
	align-items: center;
	gap:         0.25rem;
	list-style:  none;
	margin:      0;
	padding:     0;
}

.primary-nav > li,
.site-header__nav > ul > li {
	position: relative;
}

.primary-nav > li > a,
.site-header__nav > ul > li > a {
	display:         block;
	padding:         0.5rem 0.9rem;
	font-family:     var(--font-body);
	font-size:       0.875rem;
	font-weight:     500;
	letter-spacing:  0.02em;
	color:           var(--color-charcoal);
	border-radius:   var(--radius-sm);
	transition:      color var(--transition-base), background-color var(--transition-base);
	white-space:     nowrap;
}

.primary-nav > li > a:hover,
.primary-nav > li.current-menu-item > a,
.primary-nav > li.current-menu-ancestor > a,
.site-header__nav > ul > li > a:hover {
	color:            var(--color-amber);
	background-color: var(--color-amber-pale);
}

/* ── Desktop dropdown ─────────────────────────────────────────────────────── */
.primary-nav .menu-item-has-children > a::after {
	content:        '›';
	display:        inline-block;
	margin-left:    0.3em;
	font-size:      0.8em;
	transform:      rotate(90deg);
	transition:     transform var(--transition-base);
	vertical-align: middle;
}

.primary-nav .menu-item-has-children:hover > a::after {
	transform: rotate(270deg);
}

.primary-nav .sub-menu {
	position:         absolute;
	top:              calc(100% + 8px);
	left:             50%;
	transform:        translateX(-50%) translateY(6px);
	min-width:        200px;
	background:       var(--color-white);
	border:           1px solid var(--color-border);
	border-radius:    var(--radius-md);
	box-shadow:       var(--shadow-md);
	list-style:       none;
	margin:           0;
	padding:          0.5rem 0;
	opacity:          0;
	visibility:       hidden;
	pointer-events:   none;
	transition:       opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	z-index:          200;
}

.primary-nav .menu-item-has-children:hover .sub-menu,
.primary-nav .menu-item-has-children:focus-within .sub-menu {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
	transform:      translateX(-50%) translateY(0);
	transition:     opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.primary-nav .sub-menu a {
	display:      block;
	padding:      0.55rem 1.1rem;
	font-size:    0.8125rem;
	font-weight:  400;
	color:        var(--color-charcoal);
	transition:   color var(--transition-base), background-color var(--transition-base);
	white-space:  nowrap;
}

.primary-nav .sub-menu a:hover {
	color:            var(--color-amber);
	background-color: var(--color-amber-pale);
}

/* ── Header CTA button ────────────────────────────────────────────────────── */
.header-cta-btn {
	display:         inline-flex;
	align-items:     center;
	padding:         0.6rem 1.4rem;
	background:      var(--color-amber);
	color:           var(--color-white) !important;
	font-family:     var(--font-body);
	font-size:       0.8125rem;
	font-weight:     600;
	letter-spacing:  0.06em;
	text-transform:  uppercase;
	border-radius:   var(--radius-sm);
	transition:      background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
	white-space:     nowrap;
	text-decoration: none;
}

.header-cta-btn:hover {
	background:  var(--color-amber-light);
	transform:   translateY(-1px);
	box-shadow:  0 4px 16px rgba(200, 133, 58, 0.35);
}

/* ── Hamburger button — desktop hidden ────────────────────────────────────── */
.nav-toggle {
	display:         none;   /* shown only inside @media */
	flex-direction:  column;
	justify-content: center;
	align-items:     center;
	gap:             5px;
	width:           44px;
	height:          44px;
	background:      none;
	border:          none;
	cursor:          pointer;
	padding:         10px;
	border-radius:   var(--radius-sm);
	transition:      background var(--transition-base);
	flex-shrink:     0;
}

.nav-toggle:hover { background: var(--color-offwhite); }

.nav-toggle span {
	display:          block;
	width:            22px;
	height:           2px;
	background-color: var(--color-charcoal);
	border-radius:    2px;
	transition:       transform 0.28s ease, opacity 0.2s ease, width 0.2s ease;
	transform-origin: center;
}

/* Hamburger → X morph */
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================================
   STANDARD PAGES & POSTS (page.php / single.php)
   Mirrors the .tour-content design language so editor/Gutenberg content
   renders fully and on-brand. No display:none / overflow traps here.
   ============================================================================= */

.page-article {
	/* Let content define its own height — never clip it */
	overflow: visible;
}

.page-header {
	text-align: center;
}

.page-header__title {
	font-family:    var(--font-display);
	font-size:      var(--text-3xl);
	font-weight:    600;
	line-height:    1.15;
	color:          var(--color-charcoal);
	margin:         0 auto;
}

.page-featured-image {
	margin: var(--space-8) 0 var(--space-4);
}

.page-featured-image img {
	width:         100%;
	height:        auto;          /* never crop or fix height */
	border-radius: var(--radius-md);
	display:       block;
}

/* ── Editor / Gutenberg content typography ───────────────────────────────── */
.page-content {
	font-size:   var(--text-base);
	line-height: 1.8;
	color:       var(--color-charcoal-light);
	overflow:    visible;         /* prevent any accidental clipping */
}

.page-content > *:first-child { margin-top: 0; }
.page-content > *:last-child  { margin-bottom: 0; }

.page-content p {
	margin-bottom: var(--space-4);
}

.page-content h2 {
	font-family:   var(--font-display);
	font-size:     var(--text-2xl);
	font-weight:   600;
	color:         var(--color-charcoal);
	margin:        var(--space-10) 0 var(--space-4);
	line-height:   1.25;
}

.page-content h3 {
	font-family:   var(--font-display);
	font-size:     var(--text-xl);
	font-weight:   600;
	color:         var(--color-charcoal);
	margin:        var(--space-8) 0 var(--space-3);
	line-height:   1.3;
}

.page-content h4 {
	font-size:     var(--text-lg);
	font-weight:   600;
	color:         var(--color-charcoal);
	margin:        var(--space-6) 0 var(--space-2);
}

.page-content a {
	color:           var(--color-amber);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-content a:hover { color: var(--color-charcoal); }

.page-content ul,
.page-content ol {
	margin:      0 0 var(--space-4);
	padding-left: var(--space-6);
}

.page-content ul li,
.page-content ol li {
	margin-bottom: var(--space-2);
	line-height:   1.7;
}

.page-content blockquote {
	margin:        var(--space-6) 0;
	padding:       var(--space-2) 0 var(--space-2) var(--space-6);
	border-left:   3px solid var(--color-amber);
	font-family:   var(--font-display);
	font-size:     var(--text-lg);
	font-style:    italic;
	color:         var(--color-charcoal);
}

.page-content img {
	max-width:     100%;
	height:        auto;
	border-radius: var(--radius-md);
}

.page-content figure { margin: var(--space-6) 0; }

.page-content figure figcaption {
	font-size:  var(--text-sm);
	color:      var(--color-charcoal-light);
	text-align: center;
	margin-top: var(--space-2);
}

/* ── Gutenberg full/wide alignment support (so content is not cut off) ────── */
.page-content .alignwide {
	width:      min(100%, var(--max-width));
	max-width:  none;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-inline: auto;
}

.page-content .alignfull {
	width:        100vw;
	max-width:    100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.page-content .aligncenter { margin-left: auto; margin-right: auto; }
.page-content .alignleft  { float: left;  margin: 0 var(--space-6) var(--space-4) 0; }
.page-content .alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }

/* Post navigation */
.page-article .post-navigation {
	display:        flex;
	justify-content: space-between;
	gap:            var(--space-6);
	margin-top:     var(--space-12);
	padding-top:    var(--space-8);
	border-top:     1px solid var(--color-border);
	font-size:      var(--text-sm);
}

.page-article .post-navigation a { color: var(--color-charcoal); }
.page-article .post-navigation a:hover { color: var(--color-amber); }

@media (max-width: 640px) {
	.page-header__title { font-size: var(--text-2xl); }
}

/* =============================================================================
   FULL-WIDTH LUXURY PAGE TEMPLATE (template-fullwidth.php)
   Edge-to-edge sections, 100vh hero, generous luxury spacing.
   Scoped to .fw-* so it never affects the boxed page.php or other pages.
   ============================================================================= */

/* The article spans the full viewport, breaking out of any inherited width */
.fw-page {
	width:     100%;
	max-width: 100%;
	overflow:  visible;
}

/* ── Full-screen hero ─────────────────────────────────────────────────────── */
.fw-hero {
	position:    relative;
	width:       100%;
	min-height:  100vh;
	min-height:  100dvh;
	display:     flex;
	align-items: center;
	justify-content: center;
	text-align:  center;
	overflow:    hidden;
	/* Gradient fallback when no featured image is set */
	background:  linear-gradient(155deg, #1a1209 0%, var(--color-charcoal-mid) 50%, #3a1f08 100%);
}

/* When a featured image is present, cover the hero with it */
.fw-hero--image {
	background-size:     cover;
	background-position: center center;
	background-repeat:   no-repeat;
}

/* Dark overlay for readability (≈55%) */
.fw-hero__overlay {
	position: absolute;
	inset:    0;
	background:
		radial-gradient(ellipse 90% 85% at 50% 45%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.60) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.40) 45%, rgba(0,0,0,0.66) 100%);
}

.fw-hero__inner {
	position:  relative;
	z-index:   1;
	max-width: 880px;
	padding:   var(--space-16) var(--space-6);
}

.fw-hero__eyebrow {
	display:        block;
	font-family:    var(--font-body);
	font-size:      clamp(0.7rem, 1.2vw, 0.85rem);
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: 0.34em;
	color:          rgba(255, 255, 255, 0.7);
	margin-bottom:  var(--space-6);
}

.fw-hero__title {
	font-family:    var(--font-serif, 'Playfair Display', var(--font-display));
	font-size:      clamp(2.5rem, 6vw, 5.25rem);
	font-weight:    600;
	line-height:    1.1;
	letter-spacing: -0.015em;
	color:          var(--color-white);
	margin:         0;
	text-shadow:    0 2px 40px rgba(0, 0, 0, 0.45);
}

.fw-hero__divider {
	display:    block;
	width:      64px;
	height:     2px;
	margin:     var(--space-8) auto 0;
	background: var(--color-gold, var(--color-amber));
}

/* ── Full-width content ───────────────────────────────────────────────────── */
.fw-content {
	width:      100%;
	padding:    var(--space-32) var(--gutter);   /* large luxury vertical rhythm */
	background: var(--color-white);
}

/* Readable measure kept centered inside the full-width section (luxury pattern:
   full-bleed section, comfortable text column). Wider than the old 760px box. */
.fw-content__inner {
	max-width: 920px;
	margin:    0 auto;
}

/* Larger, more breathable type for the luxury feel (upgrade, not redesign) */
.fw-content__inner.page-content {
	font-size:   var(--text-md);
	line-height: 1.9;
}

.fw-content__inner.page-content > *:first-child { margin-top: 0; }

.fw-content__inner.page-content h2 {
	font-size: var(--text-3xl);
	margin:    var(--space-16) 0 var(--space-6);
}

.fw-content__inner.page-content h3 {
	font-size: var(--text-2xl);
	margin:    var(--space-12) 0 var(--space-4);
}

.fw-content__inner.page-content p {
	margin-bottom: var(--space-6);
}

/* Full-bleed Gutenberg blocks can break out edge-to-edge inside this template */
.fw-content__inner .alignfull {
	width:        100vw;
	max-width:    100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.fw-content__inner .alignwide {
	width:        min(96vw, 1280px);
	max-width:    none;
	margin-left:  calc(50% - min(48vw, 640px));
	margin-right: calc(50% - min(48vw, 640px));
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.fw-content { padding: var(--space-24) var(--gutter); }
}

@media (max-width: 768px) {
	.fw-hero { min-height: 100vh; min-height: 100dvh; }
	.fw-hero__title { font-size: clamp(2.25rem, 9vw, 2.75rem); }
	.fw-content {
		padding: var(--space-16) var(--gutter);
	}
	.fw-content__inner.page-content { font-size: var(--text-base); }
	.fw-content__inner.page-content h2 { font-size: var(--text-2xl); margin: var(--space-10) 0 var(--space-4); }
	.fw-content__inner.page-content h3 { font-size: var(--text-xl); }
}

/* =============================================================================
   SITE FOOTER
   ============================================================================= */

.site-footer {
	background-color: var(--color-charcoal);
	color:            rgba(255,255,255,0.75);
	padding:          var(--space-20) 0 0;
	position:         relative;
	overflow:         hidden;
}

.site-footer .tifinagh-watermark {
	-webkit-text-stroke: 1px rgba(255,255,255,0.04);
	bottom: -2rem;
	right:  -2rem;
}

.footer-grid {
	display:               grid;
	grid-template-columns: 2fr 1fr 1fr 1.5fr;
	gap:                   var(--space-12);
	padding-bottom:        var(--space-16);
	border-bottom:         1px solid rgba(255,255,255,0.08);
}

@media (max-width: 1024px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.footer-grid { grid-template-columns: 1fr; }
}

.footer-col__title {
	font-family:    var(--font-body);
	font-size:      var(--text-xs);
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--color-white);
	margin-bottom:  var(--space-6);
}

.footer-col__logo .site-logo__name {
	color: var(--color-white);
}

.footer-col__logo .site-logo__tagline {
	color: rgba(255,255,255,0.4);
}

.footer-col p {
	font-size:   var(--text-sm);
	line-height: 1.8;
	color:       rgba(255,255,255,0.55);
	max-width:   280px;
	margin-top:  var(--space-4);
}

.footer-nav {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
}

.footer-nav a {
	font-size:   var(--text-sm);
	color:       rgba(255,255,255,0.55);
	transition:  color var(--transition-base);
}

.footer-nav a:hover { color: var(--color-amber-light); }

.footer-newsletter input[type="email"] {
	width:            100%;
	padding:          0.75rem 1rem;
	background-color: rgba(255,255,255,0.07);
	border:           1px solid rgba(255,255,255,0.12);
	border-radius:    var(--radius-sm);
	color:            var(--color-white);
	font-size:        var(--text-sm);
	margin-bottom:    var(--space-3);
	transition:       border-color var(--transition-base);
	outline:          none;
}

.footer-newsletter input[type="email"]::placeholder { color: rgba(255,255,255,0.3); }
.footer-newsletter input[type="email"]:focus { border-color: var(--color-amber); }

.footer-bottom {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         var(--space-6) 0;
	gap:             var(--space-4);
	flex-wrap:       wrap;
}

.footer-bottom p {
	font-size: var(--text-xs);
	color:     rgba(255,255,255,0.35);
}

.footer-bottom a {
	color: rgba(255,255,255,0.35);
	transition: color var(--transition-base);
}

.footer-bottom a:hover { color: var(--color-amber-light); }

/* =============================================================================
   HERO SECTION (FRONT PAGE)
   ============================================================================= */

.hero {
	position:    relative;
	width:       100%;
	min-height:  100vh;
	min-height:  100dvh;
	display:     flex;
	align-items: center;
	justify-content: center;
	overflow:    hidden;
	background:  var(--color-charcoal);   /* shows while image loads */
	text-align:  center;
}

/* ── Cinematic background image ──────────────────────────────────────────── */
/* Slightly oversized (vertical overscan) so the JS scroll-parallax translate
   below never reveals an edge; will-change primes the compositor for a
   smooth, GPU-friendly transform. */
.hero__bg {
	position:    absolute;
	top:         -8%;
	right:       0;
	bottom:      -8%;
	left:        0;
	height:      116%;
	z-index:     0;
	overflow:    hidden;
	transform:   translate3d(0, 0, 0);
	will-change: transform;
}

/* Real <img> (not CSS bg) so the path always resolves on WordPress.
   Slow Ken Burns zoom gives the premium parallax/cinematic feel. */
.hero__bg-img {
	position:        absolute;
	inset:           0;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center center;
	display:         block;
	transform:       scale(1.04);
	animation:       heroKenBurns 24s ease-in-out infinite alternate;
	will-change:     transform;
}

@keyframes heroKenBurns {
	from { transform: scale(1.04); }
	to   { transform: scale(1.16); }
}

/* Softened gradient overlay for readability (≈35% lighter than before) + subtle luxury vignette.
   Kept slightly stronger toward the bottom/center so the hero text stays fully legible
   while the desert, mountains and sky read through much more clearly. */
.hero__overlay {
	position: absolute;
	inset:    0;
	background:
		radial-gradient(ellipse 90% 85% at 50% 45%, rgba(0,0,0,0.21) 0%, rgba(0,0,0,0.40) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.22) 45%, rgba(0,0,0,0.46) 100%);
}

/* ── Centered content ────────────────────────────────────────────────────── */
.hero__content {
	position:  relative;
	z-index:   1;
	width:     100%;
	padding:   var(--space-16) var(--space-6);
}

.hero__inner {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Badge / tag above the headline ──────────────────────────────────────── */
.hero__badge {
	display:          inline-flex;
	align-items:      center;
	gap:              var(--space-3);
	padding:          0.55rem 1.25rem;
	margin-bottom:    var(--space-8);
	font-family:      var(--font-body);
	font-size:        clamp(0.6875rem, 1.2vw, 0.8125rem);
	font-weight:      500;
	text-transform:   uppercase;
	letter-spacing:   0.28em;
	color:            var(--color-white);
	background-color: rgba(255, 255, 255, 0.08);
	border:           1px solid rgba(255, 255, 255, 0.28);
	border-radius:    var(--radius-full);
	backdrop-filter:  blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hero__badge-dot {
	width:            6px;
	height:           6px;
	flex:             0 0 auto;
	border-radius:    50%;
	background-color: var(--color-gold-light);
	box-shadow:       0 0 0 4px rgba(219, 188, 126, 0.25);
}

/* Main title — 90px desktop → 38px mobile via clamp */
.hero__title {
	font-family:    var(--font-serif);   /* Playfair Display */
	font-size:      clamp(2.375rem, 6.2vw, 5.625rem);  /* 38px … 90px */
	font-weight:    600;
	line-height:    1.1;
	letter-spacing: -0.015em;
	color:          var(--color-white);
	margin-bottom:  var(--space-8);
	text-shadow:    0 2px 40px rgba(0, 0, 0, 0.45);
}

/* Description */
.hero__desc {
	font-family:   var(--font-body);
	font-size:     clamp(1rem, 1.6vw, 1.2rem);
	font-weight:   400;
	line-height:   1.7;
	color:         rgba(255, 255, 255, 0.85);
	max-width:     600px;
	margin:        0 auto var(--space-10);
	text-shadow:   0 1px 20px rgba(0, 0, 0, 0.4);
}

/* ── CTA buttons ─────────────────────────────────────────────────────────── */
.hero__actions {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--space-4);
	flex-wrap:       wrap;
}

.hero-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         1rem 2.5rem;
	font-family:     var(--font-body);
	font-size:       0.9375rem;
	font-weight:     600;
	letter-spacing:  0.06em;
	text-transform:  uppercase;
	border-radius:   var(--radius-full);
	border:          1.5px solid transparent;
	cursor:          pointer;
	text-decoration: none;
	transition:      transform 0.35s cubic-bezier(0.22,1,0.36,1),
	                 box-shadow 0.35s ease,
	                 background-color 0.35s ease,
	                 border-color 0.35s ease,
	                 color 0.35s ease;
	white-space:     nowrap;
}

/* Primary — champagne gold with glass sheen + hover glow + scale */
.hero-btn--gold {
	background-color: var(--color-gold);
	color:            #2A1F10;
	border-color:     rgba(255, 255, 255, 0.25);
	box-shadow:       0 4px 20px rgba(200, 164, 93, 0.25),
	                  inset 0 1px 0 rgba(255, 255, 255, 0.3);
	backdrop-filter:  blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.hero-btn--gold:hover,
.hero-btn--gold:focus-visible {
	background-color: var(--color-gold-light);
	border-color:     rgba(255, 255, 255, 0.45);
	color:            #2A1F10;
	transform:        translateY(-2px) scale(1.03);
	box-shadow:       0 8px 36px rgba(200, 164, 93, 0.55),
	                  inset 0 1px 0 rgba(255, 255, 255, 0.4);
	outline:          none;
}

/* Secondary — transparent with white border */
.hero-btn--outline {
	background-color: rgba(255, 255, 255, 0.04);
	color:            var(--color-white);
	border-color:     rgba(255, 255, 255, 0.55);
	backdrop-filter:  blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.hero-btn--outline:hover,
.hero-btn--outline:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
	border-color:     var(--color-white);
	transform:        translateY(-2px) scale(1.03);
	outline:          none;
}

/* ── Compact trust indicators (in-hero, below the CTAs) ──────────────────── */
.hero__trust {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--space-8);
	margin-top:      var(--space-12);
	flex-wrap:       wrap;
}

.hero__trust-item {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            2px;
}

.hero__trust-number {
	font-family: var(--font-display);
	font-size:   var(--text-xl);
	font-weight: 600;
	color:       var(--color-gold-light);
	line-height: 1;
}

.hero__trust-label {
	font-family:    var(--font-body);
	font-size:      0.6875rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          rgba(255, 255, 255, 0.7);
}

.hero__trust-divider {
	width:            1px;
	height:           28px;
	background-color: rgba(255, 255, 255, 0.22);
}

/* ── Staggered fade-in (plays on load, CSS-only) ─────────────────────────── */
.hero__fade {
	opacity:    0;
	transform:  translateY(24px);
	animation:  heroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: var(--fade-delay, 0s);
}

@keyframes heroFadeUp {
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__bg     { transform: none; }
	.hero__bg-img { animation: none; transform: scale(1.04); }
	.hero__fade   { animation: none; opacity: 1; transform: none; }
}

/* ── Scroll indicator (bottom center) ────────────────────────────────────── */
.hero__scroll {
	position:        absolute;
	bottom:          var(--space-8);
	left:            50%;
	transform:       translateX(-50%);
	z-index:         2;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             var(--space-3);
	text-decoration: none;
	color:           rgba(255, 255, 255, 0.7);
	transition:      color var(--transition-base);
}

.hero__scroll:hover { color: var(--color-white); }

.hero__scroll-text {
	font-family:    var(--font-body);
	font-size:      0.6875rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: 0.28em;
}

.hero__scroll-line {
	position:   relative;
	width:      1px;
	height:     54px;
	overflow:   hidden;
	background: rgba(255, 255, 255, 0.25);
}

/* Animated travelling highlight down the line */
.hero__scroll-line::after {
	content:    '';
	position:   absolute;
	top:        -54px;
	left:       0;
	width:      1px;
	height:     54px;
	background: linear-gradient(to bottom, transparent, var(--color-gold-light));
	animation:  heroScrollLine 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes heroScrollLine {
	0%   { transform: translateY(0); }
	100% { transform: translateY(108px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll-line::after { animation: none; }
}

/* =============================================================================
   TOURS GRID (HOMEPAGE + ARCHIVE)
   ============================================================================= */

.tours-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--space-6);
}

@media (max-width: 1024px) {
	.tours-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.tours-grid { grid-template-columns: 1fr; }
}

/* Tour Card */
.tour-card {
	background-color: var(--color-white);
	border:           1px solid var(--color-border);
	border-radius:    var(--radius-lg);
	overflow:         hidden;
	transition:       transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
	display:          flex;
	flex-direction:   column;
}

.tour-card:hover {
	transform:    translateY(-4px);
	box-shadow:   var(--shadow-xl);
	border-color: var(--color-sand);
}

.tour-card__image {
	position:    relative;
	overflow:    hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--color-sand-pale);
}

.tour-card__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.tour-card:hover .tour-card__image img {
	transform: scale(1.06);
}

.tour-card__badge {
	position:         absolute;
	top:              var(--space-4);
	left:             var(--space-4);
	background-color: var(--color-amber);
	color:            var(--color-white);
	font-size:        var(--text-xs);
	font-weight:      600;
	text-transform:   uppercase;
	letter-spacing:   0.1em;
	padding:          0.3rem 0.75rem;
	border-radius:    var(--radius-full);
}

.tour-card__difficulty {
	position:         absolute;
	top:              var(--space-4);
	right:            var(--space-4);
	background-color: rgba(255,255,255,0.92);
	backdrop-filter:  blur(4px);
	font-size:        var(--text-xs);
	font-weight:      600;
	text-transform:   uppercase;
	letter-spacing:   0.08em;
	padding:          0.3rem 0.75rem;
	border-radius:    var(--radius-full);
	color:            var(--color-charcoal);
}

.tour-card__body {
	padding:        var(--space-6);
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
}

.tour-card__destination {
	font-size:      var(--text-xs);
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--color-amber);
}

.tour-card__title {
	font-family:    var(--font-display);
	font-size:      var(--text-xl);
	font-weight:    600;
	line-height:    1.2;
	color:          var(--color-charcoal);
	margin:         0;
}

.tour-card__title a {
	text-decoration: none;
	color:           inherit;
	transition:      color var(--transition-base);
}

.tour-card__title a:hover { color: var(--color-amber); }

.tour-card__excerpt {
	font-size:  var(--text-sm);
	color:      var(--color-charcoal-light);
	line-height: 1.65;
	flex:       1;
	display:    -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:   hidden;
}

.tour-card__meta {
	display:     flex;
	align-items: center;
	gap:         var(--space-4);
	padding-top: var(--space-4);
	border-top:  1px solid var(--color-border);
	margin-top:  auto;
}

.tour-card__meta-item {
	display:      flex;
	align-items:  center;
	gap:          var(--space-2);
	font-size:    var(--text-xs);
	color:        var(--color-charcoal-light);
	font-weight:  500;
}

.tour-card__meta-item svg {
	color:      var(--color-amber);
	flex-shrink: 0;
}

.tour-card__footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         var(--space-4) var(--space-6);
	background-color: var(--color-offwhite);
	border-top:      1px solid var(--color-border);
}

.tour-card__price {
	font-family:    var(--font-display);
	font-size:      var(--text-xl);
	font-weight:    600;
	color:          var(--color-charcoal);
}

.tour-card__price span {
	font-family:    var(--font-body);
	font-size:      var(--text-xs);
	font-weight:    400;
	color:          var(--color-charcoal-light);
	display:        block;
	line-height:    1;
}

/* =============================================================================
   SECTION HEADINGS
   ============================================================================= */

.section-heading {
	margin-bottom: var(--space-12);
}

.section-heading--center { text-align: center; }

.section-heading__title {
	font-size:      clamp(var(--text-2xl), 4vw, var(--text-4xl));
	font-weight:    600;
	line-height:    1.1;
	letter-spacing: -0.02em;
	margin-bottom:  var(--space-4);
}

.section-heading__subtitle {
	font-family: var(--font-body);
	font-size: var(--text-md);
	color: var(--color-charcoal-light);
	line-height: 1.65;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.section-heading--center .section-heading__subtitle { margin: 0 auto; }

/* =============================================================================
   INTRO SECTION — Morocco destination + Agency (2-up card layout)
   ============================================================================= */

.intro-grid {
	align-items: start;
}

.intro-section {
	padding-bottom: 0;
}

.intro-card {
	display:          flex;
	flex-direction:   column;
	align-items:      flex-start;
	background-color: var(--color-white);
	border:           1px solid var(--color-border);
	border-radius:    var(--radius-lg);
	box-shadow:       var(--shadow-sm);
	padding:          var(--space-12) var(--space-8);
	transition:       transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
}

.intro-card:hover {
	transform:    translateY(-4px);
	box-shadow:   var(--shadow-lg);
	border-color: var(--color-sand);
}

.intro-card__title {
	font-size:      clamp(var(--text-xl), 2.6vw, var(--text-2xl));
	font-weight:    600;
	line-height:    1.2;
	letter-spacing: -0.01em;
	margin-bottom:  var(--space-6);
}

.intro-card__text {
	font-family: var(--font-body);
	font-size:   var(--text-md);
	color:       var(--color-charcoal-light);
	line-height: 1.75;
	margin-bottom: var(--space-8);
}

@media (max-width: 640px) {
	.intro-card {
		padding: var(--space-8) var(--space-6);
	}
}

/* =============================================================================
   TIFINAGH FEATURE SECTION
   ============================================================================= */

.tifinagh-section {
	background-color: var(--color-charcoal);
	color:            var(--color-white);
	position:         relative;
	overflow:         hidden;
	padding:          var(--space-24) 0;
}

.tifinagh-section__bg-chars {
	position:       absolute;
	inset:          0;
	display:        flex;
	align-items:    center;
	justify-content: center;
	pointer-events: none;
	overflow:       hidden;
}

.tifinagh-section__bg-text {
	font-size:           clamp(6rem, 20vw, 20rem);
	font-weight:         300;
	color:               transparent;
	-webkit-text-stroke: 1px rgba(200, 133, 58, 0.07);
	white-space:         nowrap;
	letter-spacing:      0.15em;
	line-height:         1;
	user-select:         none;
}

.tifinagh-section__content {
	position: relative;
	z-index:  1;
}

.tifinagh-section .section-heading__title {
	color: var(--color-white);
}

.tifinagh-section .section-heading__subtitle {
	color: rgba(255,255,255,0.6);
}

.tifinagh-section .eyebrow {
	color: var(--color-amber-light);
}

.tifinagh-section .eyebrow::before {
	background: var(--color-amber-light);
}

/* Geometric Grid */
.tifinagh-geometry-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   1px;
	background-color:      rgba(255,255,255,0.06);
	border:                1px solid rgba(255,255,255,0.06);
	border-radius:         var(--radius-lg);
	overflow:              hidden;
	margin-top:            var(--space-12);
}

@media (max-width: 768px) {
	.tifinagh-geometry-grid { grid-template-columns: repeat(2, 1fr); }
}

.tifinagh-geo-item {
	background-color: var(--color-charcoal-mid);
	padding:          var(--space-8);
	display:          flex;
	flex-direction:   column;
	align-items:      center;
	text-align:       center;
	gap:              var(--space-4);
	transition:       background-color var(--transition-base);
}

.tifinagh-geo-item:hover {
	background-color: rgba(200, 133, 58, 0.1);
}

.tifinagh-geo-item__char {
	font-size:   3.5rem;
	line-height: 1;
	color:       var(--color-amber);
	opacity:     0.85;
}

.tifinagh-geo-item__label {
	font-size:      var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          rgba(255,255,255,0.5);
	line-height:    1.4;
}

.tifinagh-geo-item__value {
	font-family:   var(--font-display);
	font-size:     var(--text-lg);
	color:         var(--color-white);
	font-weight:   500;
}

/* =============================================================================
   SINGLE TOUR
   ============================================================================= */

.tour-hero {
	position:    relative;
	height:      70vh;
	min-height:  480px;
	overflow:    hidden;
	background-color: var(--color-charcoal);
}

.tour-hero__image {
	position:   absolute;
	inset:      0;
}

.tour-hero__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	opacity:    0.65;
}

.tour-hero__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to bottom,
		rgba(26,26,26,0.1) 0%,
		rgba(26,26,26,0.5) 50%,
		rgba(26,26,26,0.85) 100%
	);
}

.tour-hero__content {
	position:    absolute;
	bottom:      0;
	left:        0;
	right:       0;
	padding:     var(--space-12) 0;
}

.tour-hero__title {
	font-size:      clamp(var(--text-2xl), 5vw, 3.5rem);
	color:          var(--color-white);
	font-weight:    600;
	letter-spacing: -0.02em;
	margin-bottom:  var(--space-4);
}

.tour-hero__badges {
	display:     flex;
	align-items: center;
	gap:         var(--space-3);
	flex-wrap:   wrap;
}

.tour-badge {
	background-color: rgba(255,255,255,0.15);
	backdrop-filter:  blur(4px);
	color:            var(--color-white);
	font-size:        var(--text-xs);
	font-weight:      600;
	text-transform:   uppercase;
	letter-spacing:   0.1em;
	padding:          0.3rem 0.875rem;
	border-radius:    var(--radius-full);
	border:           1px solid rgba(255,255,255,0.2);
}

.tour-badge--amber {
	background-color: var(--color-amber);
	border-color:     var(--color-amber);
}

/* Tour Layout */
.tour-layout {
	display:               grid;
	grid-template-columns: 1fr 360px;
	gap:                   var(--space-12);
	padding:               var(--space-16) 0;
	align-items:           start;
}

@media (max-width: 1024px) {
	.tour-layout { grid-template-columns: 1fr; }
}

/* Tour Content */
.tour-content__section {
	margin-bottom:  var(--space-12);
	padding-bottom: var(--space-12);
	border-bottom:  1px solid var(--color-border);
}

.tour-content__section:last-child {
	border-bottom:  none;
	padding-bottom: 0;
}

.tour-content__section h2 {
	font-size:     var(--text-xl);
	margin-bottom: var(--space-4);
}

.tour-content__section h3 {
	font-size:     var(--text-lg);
	margin-bottom: var(--space-3);
}

.tour-content p {
	font-size:     var(--text-base);
	line-height:   1.8;
	color:         var(--color-charcoal-light);
	margin-bottom: var(--space-4);
}

.tour-content ul li {
	position:      relative;
	padding-left:  var(--space-6);
	font-size:     var(--text-base);
	color:         var(--color-charcoal-light);
	line-height:   1.7;
	margin-bottom: var(--space-2);
}

.tour-content ul li::before {
	content:    '⵰';
	position:   absolute;
	left:       0;
	color:      var(--color-amber);
	font-size:  0.7em;
	top:        0.35em;
}

/* Highlights */
.tour-highlights {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--space-4);
	margin-top:            var(--space-6);
}

@media (max-width: 640px) {
	.tour-highlights { grid-template-columns: 1fr; }
}

.tour-highlight-item {
	display:          flex;
	align-items:      flex-start;
	gap:              var(--space-3);
	padding:          var(--space-4);
	background-color: var(--color-offwhite);
	border-radius:    var(--radius-md);
	border:           1px solid var(--color-border);
}

.tour-highlight-item__icon {
	font-size:   1.25rem;
	flex-shrink: 0;
	margin-top:  2px;
}

.tour-highlight-item__text {
	font-size:  var(--text-sm);
	color:      var(--color-charcoal-light);
	line-height: 1.5;
}

.tour-highlight-item__text strong {
	display:     block;
	font-size:   var(--text-sm);
	font-weight: 600;
	color:       var(--color-charcoal);
	margin-bottom: 2px;
}

/* Itinerary */
.itinerary {
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.itinerary-day {
	display:   grid;
	grid-template-columns: 40px 1fr;
	gap:       var(--space-4);
	position:  relative;
}

.itinerary-day::before {
	content:          '';
	position:         absolute;
	left:             19px;
	top:              40px;
	bottom:           0;
	width:            2px;
	background:       var(--color-border);
}

.itinerary-day:last-child::before { display: none; }

.itinerary-day__number {
	width:            40px;
	height:           40px;
	background-color: var(--color-amber-pale);
	border:           2px solid var(--color-amber);
	border-radius:    50%;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	font-size:        var(--text-xs);
	font-weight:      700;
	color:            var(--color-amber);
	flex-shrink:      0;
	position:         relative;
	z-index:          1;
}

.itinerary-day__body {
	padding-bottom: var(--space-8);
}

.itinerary-day__title {
	font-size:     var(--text-md);
	font-weight:   600;
	color:         var(--color-charcoal);
	margin-bottom: var(--space-2);
	padding-top:   0.5rem;
	font-family:   var(--font-body);
}

.itinerary-day__desc {
	font-size:  var(--text-sm);
	color:      var(--color-charcoal-light);
	line-height: 1.7;
}

.itinerary-day__image {
	display:       block;
	max-width:     100%;
	height:        auto;
	border-radius: var(--radius-md);
	margin-top:    var(--space-3);
}

/* Tour Sidebar */
.tour-sidebar {
	position: sticky;
	top:      calc(72px + var(--space-8));
}

.tour-sidebar__card {
	background-color: var(--color-white);
	border:           2px solid var(--color-border);
	border-radius:    var(--radius-lg);
	overflow:         hidden;
	box-shadow:       var(--shadow-md);
}

.tour-sidebar__header {
	background-color: var(--color-offwhite);
	padding:          var(--space-6);
	border-bottom:    1px solid var(--color-border);
	text-align:       center;
}

.tour-sidebar__price-label {
	font-size:      var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--color-charcoal-light);
	margin-bottom:  var(--space-2);
}

.tour-sidebar__price {
	font-family:   var(--font-display);
	font-size:     var(--text-4xl);
	font-weight:   600;
	color:         var(--color-charcoal);
	line-height:   1;
}

.tour-sidebar__price sub {
	font-size:     var(--text-md);
	font-family:   var(--font-body);
	font-weight:   400;
	color:         var(--color-charcoal-light);
}

.tour-sidebar__meta {
	padding:        var(--space-4) var(--space-6);
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
	border-bottom:  1px solid var(--color-border);
}

.tour-sidebar__meta-row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	font-size:       var(--text-sm);
}

.tour-sidebar__meta-row span:first-child {
	color:       var(--color-charcoal-light);
	font-weight: 400;
}

.tour-sidebar__meta-row span:last-child {
	color:       var(--color-charcoal);
	font-weight: 600;
}

.tour-sidebar__form {
	padding: var(--space-6);
}

/* =============================================================================
   INQUIRY / BOOKING FORM
   ============================================================================= */

.inquiry-form {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-4);
}

.form-group {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
}

.form-group label {
	font-size:   var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:       var(--color-charcoal-light);
}

.form-group input,
.form-group select,
.form-group textarea {
	width:            100%;
	padding:          0.75rem 1rem;
	border:           1px solid var(--color-border);
	border-radius:    var(--radius-sm);
	font-size:        var(--text-sm);
	color:            var(--color-charcoal);
	background-color: var(--color-white);
	transition:       border-color var(--transition-base), box-shadow var(--transition-base);
	outline:          none;
	-webkit-appearance: none;
	appearance:       none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: var(--color-amber);
	box-shadow:   0 0 0 3px var(--color-amber-pale);
}

.form-group textarea {
	resize:     vertical;
	min-height: 100px;
}

.form-note {
	font-size:  var(--text-xs);
	color:      var(--color-charcoal-light);
	text-align: center;
	line-height: 1.5;
}

/* =============================================================================
   ABOUT / WHY SECTION
   ============================================================================= */

.features-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--space-8);
}

@media (max-width: 1024px) {
	.features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.features-grid { grid-template-columns: 1fr; }
}

.feature-item {
	padding:    var(--space-8) 0;
	border-top: 2px solid var(--color-border);
	transition: border-color var(--transition-base);
}

.feature-item:hover { border-color: var(--color-amber); }

.feature-item__icon {
	font-size:     2rem;
	margin-bottom: var(--space-4);
	display:       block;
}

.feature-item__title {
	font-family:   var(--font-display);
	font-size:     var(--text-xl);
	font-weight:   600;
	margin-bottom: var(--space-3);
	color:         var(--color-charcoal);
}

.feature-item__text {
	font-size:  var(--text-sm);
	color:      var(--color-charcoal-light);
	line-height: 1.75;
}

/* =============================================================================
   ARCHIVE / FILTER BAR
   ============================================================================= */

.archive-header {
	padding:          var(--space-16) 0 var(--space-12);
	border-bottom:    1px solid var(--color-border);
	margin-bottom:    var(--space-12);
	background-color: var(--color-offwhite);
}

.filter-bar {
	display:     flex;
	align-items: center;
	gap:         var(--space-3);
	flex-wrap:   wrap;
	margin-top:  var(--space-8);
}

.filter-btn {
	padding:          0.5rem 1.25rem;
	background-color: var(--color-white);
	border:           1px solid var(--color-border);
	border-radius:    var(--radius-full);
	font-size:        var(--text-sm);
	font-weight:      500;
	color:            var(--color-charcoal-light);
	cursor:           pointer;
	transition:       all var(--transition-base);
	text-decoration:  none;
	display:          inline-block;
}

.filter-btn:hover,
.filter-btn.is-active {
	background-color: var(--color-amber);
	border-color:     var(--color-amber);
	color:            var(--color-white);
}

/* =============================================================================
   PAGINATION
   ============================================================================= */

.pagination {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--space-2);
	margin-top:      var(--space-16);
	padding-top:     var(--space-8);
	border-top:      1px solid var(--color-border);
}

.pagination a,
.pagination span {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            42px;
	height:           42px;
	border-radius:    var(--radius-sm);
	border:           1px solid var(--color-border);
	font-size:        var(--text-sm);
	font-weight:      500;
	color:            var(--color-charcoal-light);
	text-decoration:  none;
	transition:       all var(--transition-base);
}

.pagination a:hover {
	border-color:     var(--color-amber);
	color:            var(--color-amber);
}

.pagination .current {
	background-color: var(--color-amber);
	border-color:     var(--color-amber);
	color:            var(--color-white);
}

/* =============================================================================
   BREADCRUMB
   ============================================================================= */

.breadcrumb {
	display:     flex;
	align-items: center;
	gap:         var(--space-2);
	font-size:   var(--text-xs);
	color:       var(--color-charcoal-light);
	margin-bottom: var(--space-6);
}

.breadcrumb a {
	color:      var(--color-charcoal-light);
	transition: color var(--transition-base);
}

.breadcrumb a:hover { color: var(--color-amber); }

.breadcrumb__sep {
	opacity: 0.4;
	font-size: 0.6em;
}

/* =============================================================================
   NO RESULTS / EMPTY STATE
   ============================================================================= */

.empty-state {
	text-align:  center;
	padding:     var(--space-24) var(--gutter);
	grid-column: 1 / -1;
}

.empty-state__char {
	font-size:     5rem;
	display:       block;
	color:         var(--color-amber);
	opacity:       0.3;
	margin-bottom: var(--space-4);
	line-height:   1;
}

.empty-state h3 {
	font-size:     var(--text-xl);
	margin-bottom: var(--space-3);
}

.empty-state p {
	color:         var(--color-charcoal-light);
	margin-bottom: var(--space-8);
}

/* =============================================================================
   RESPONSIVE HERO
   ============================================================================= */

/* Tablet — title at ~56px per spec */
@media (max-width: 1024px) {
	.hero__title {
		font-size: clamp(2.375rem, 7vw, 3.5rem);  /* up to 56px */
	}
}

@media (max-width: 768px) {
	/* Maintain full-screen hero on mobile */
	.hero {
		min-height: 100vh;
		min-height: 100dvh;
	}

	.hero__content {
		padding: var(--space-12) var(--space-6);
	}

	.hero__title {
		font-size: clamp(2.375rem, 9vw, 2.75rem);  /* ~38px floor */
	}

	.hero__badge {
		letter-spacing: 0.18em;
		padding:        0.5rem 1rem;
	}

	/* Buttons stack vertically, full-width */
	.hero__actions {
		flex-direction: column;
		width:          100%;
		max-width:      320px;
		margin:         0 auto;
	}

	.hero-btn {
		width: 100%;
	}

	.hero__trust {
		gap: var(--space-4);
	}

	.hero__trust-divider {
		display: none;
	}

	/* Hide scroll indicator on short screens so it never overlaps buttons */
	.hero__scroll {
		display: none;
	}
}

/* =============================================================================
   SCROLL REVEAL (JS-powered)
   ============================================================================= */

/* Hidden initial state ONLY when JS is active (.js added in <head>).
   Without JS, content renders fully visible — no stuck-invisible sections. */
.js [data-reveal] {
	opacity:    0;
	transform:  translateY(24px);
	transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js [data-reveal].is-visible {
	opacity:   1;
	transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

:focus-visible {
	outline:        3px solid var(--color-amber);
	outline-offset: 3px;
	border-radius:  2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration:   0.01ms !important;
		transition-duration:  0.01ms !important;
	}
}

/* =============================================================================
   PRINT
   ============================================================================= */

@media print {
	.site-header,
	.site-footer,
	.tour-sidebar,
	.nav-toggle { display: none !important; }

	.tour-layout { grid-template-columns: 1fr; }
}
/*=============================
ABOUT HERO LUXURY
==============================*/

.about-hero{

    background:#faf8f4;

    padding:120px 20px;

    position:relative;

    overflow:hidden;

}

.about-hero__pattern{

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(circle at center,rgba(200,164,93,.08) 1px,transparent 1px);

    background-size:28px 28px;

    opacity:.35;

}

.about-hero__content{

    max-width:900px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

.about-hero__icon{

    display:block;

    font-size:34px;

    color:#C8A45D;

    margin-bottom:25px;

}

.about-hero__title{

    font-family:'Playfair Display',serif;

    font-size:clamp(48px,7vw,88px);

    line-height:1.05;

    font-weight:500;

    color:#2b2b2b;

    margin:0;

}

.about-hero__title span{

    color:#C8A45D;

}

.about-hero__divider{

    width:160px;

    height:1px;

    background:#C8A45D;

    margin:35px auto;

    position:relative;

}

.about-hero__divider:after{

    content:"◆";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:-13px;

    background:#faf8f4;

    padding:0 14px;

    color:#C8A45D;

    font-size:14px;

}

.about-hero__subtitle{

    max-width:650px;

    margin:auto;

    font-size:22px;

    color:#666;

    line-height:1.8;

    font-weight:300;

}
/* ==========================================================================
   TOUR DETAILS (HTML CONTENT)
   ========================================================================== */

.tour-section{
    margin-bottom:var(--space-12);
    padding-bottom:var(--space-10);
    border-bottom:1px solid var(--color-border);
}

.tour-section:last-child{
    border-bottom:none;
    margin-bottom:0;
}

.tour-section h2{
    font-family:var(--font-display);
    font-size:clamp(2rem,3vw,2.6rem);
    color:var(--color-charcoal);
    margin-bottom:var(--space-5);
    position:relative;
    padding-bottom:12px;
}

.tour-section h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:70px;
    height:3px;
    background:var(--color-amber);
}

.tour-section h3{
    font-size:1.35rem;
    color:var(--color-charcoal);
    margin:var(--space-8) 0 var(--space-3);
    font-weight:600;
}

.tour-section p{
    color:var(--color-charcoal-light);
    line-height:1.9;
    font-size:1rem;
    margin-bottom:var(--space-5);
}

.tour-section hr{
    border:none;
    border-top:1px solid var(--color-border);
    margin:var(--space-8) 0;
}

/* ===== Lists ===== */

.tour-section ul{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 40px;
    margin-top:var(--space-5);
}

.tour-section li{
    list-style:none;
    position:relative;
    padding-left:28px;
    line-height:1.8;
    color:var(--color-charcoal-light);
}

.tour-section li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--color-amber);
    font-weight:700;
}

/* ===== Tables ===== */

.tour-table,
.tour-section table{
    width:100%;
    border-collapse:collapse;
    margin-top:var(--space-6);
    background:#fff;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
}

.tour-table tr:nth-child(even),
.tour-section table tr:nth-child(even){
    background:var(--color-offwhite);
}

.tour-table td,
.tour-section td{
    padding:18px 24px;
    border-bottom:1px solid var(--color-border);
}

.tour-table tr:last-child td,
.tour-section tr:last-child td{
    border-bottom:none;
}

.tour-table td:first-child,
.tour-section td:first-child{
    font-weight:600;
    color:var(--color-charcoal);
    width:35%;
}

.tour-table strong{
    color:var(--color-charcoal);
}

/* ===== Remark ===== */

.tour-section p strong{
    color:var(--color-charcoal);
}

.tour-section p:last-child{
    margin-bottom:0;
}

/* ===== FAQ ===== */

.tour-section h3 + p{
    margin-bottom:30px;
}

/* ===== CTA ===== */

.tour-section:last-child{
    text-align:center;
    background:var(--color-offwhite);
    padding:70px 50px;
    border-radius:var(--radius-lg);
    border:1px solid var(--color-border);
}

.tour-section:last-child h2::after{
    left:50%;
    transform:translateX(-50%);
}

.tour-section:last-child p{
    max-width:750px;
    margin:0 auto;
}

/* ===== Responsive ===== */

@media(max-width:768px){

.tour-section ul{
    grid-template-columns:1fr;
}

.tour-table td,
.tour-section td{
    padding:14px;
    display:block;
    width:100%;
}

.tour-section{
    margin-bottom:60px;
}

.tour-section:last-child{
    padding:50px 25px;
}

}