/*
Theme Name: The Eternal Journeys
Theme URI: https://theeternaljourneys.com
Author: The Eternal Journeys DMC
Author URI: https://theeternaljourneys.com
Description: Luxury India Destination Management & Experiential Travel WordPress Theme. Fully compatible with Elementor Page Builder, featuring a customizable Royal Heritage Canvas background system configurable via WordPress Appearance > Customize.
Version: 1.0.0
Tested up to: 6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eternal-journeys
Tags: elementor, custom-background, theme-options, translation-ready, full-width-template, holiday, travel, luxury, blog

(C) 2026 The Eternal Journeys. All rights reserved.
*/

/* Reset & Base Typography */
:root {
  --color-sand-50: #fcfbf9;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-color: #fcfbf9;
  color: #1c1917;
  font-family: var(--font-sans);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
  background-color: #fcfbf9;
  overflow-x: hidden;
}

/* Heritage Canvas Fixed Layer (Configured via WP Customizer) */
#eternal-heritage-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.3s ease;
}

/* Content Container relative layer above Canvas */
#page, .site-wrapper {
  position: relative;
  z-index: 10;
}

/* Elementor Full Width Compatibility */
.elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1280px;
}

/* Headings font */
h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: var(--font-serif);
}

/* Focus and Accessibility */
:focus-visible {
  outline: 2px solid var(--color-amber-500);
  outline-offset: 2px;
}