/* ============================================
   PROPHET GUESTS - MAIN STYLESHEET
   ============================================
   Brand: Prophet Guests
   Description: Hajj & Umrah Travel Agency Website
   Version: 1.0.0
   ============================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

/* Design Tokens */
@import 'variables.css';

/* Reset & Base */
@import 'reset.css';

/* Typography */
@import 'typography.css';

/* Layout */
@import 'layout.css';

/* Components */
@import 'components.css';

/* Header & Navigation */
@import 'header.css';

/* Footer */
@import 'footer.css';

/* Hero Sections */
@import 'hero.css';

/* Packages */
@import 'packages.css';

/* Package Detail Page */
@import 'package-single.css';

/* Forms */
@import 'forms.css';

/* Blog */
@import 'blog.css';

/* Animations */
@import 'animations.css';

/* Responsive */
@import 'responsive.css';

/* ============================================
   ADDITIONAL GLOBAL STYLES
   ============================================ */

/* Smooth scroll offset for fixed header + topbar */
html {
  scroll-padding-top: calc(var(--topbar-height) + var(--header-height) + var(--space-8));
}

/* Selection color */
::selection {
  background: var(--color-gold);
  color: var(--color-deep);
}

/* Focus visible styles */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Image placeholder */
img[src=""] {
  background: linear-gradient(135deg, var(--color-grey-light), var(--color-cream));
}

/* Video responsive container */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Utility: visually hidden but accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Loading state */
.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* No scroll class for body when modal is open */
.no-scroll {
  overflow: hidden;
}