/* ==========================================================================
   Arabian Travel — Shared Brand Stylesheet
   ATIA-Accredited Travel Agency · Punchbowl, Sydney

   Contents:
   1.  Design Tokens (CSS Custom Properties)
   2.  Reset & Base
   3.  Typography Utilities
   4.  Layout Utilities
   5.  Logo Component
   6.  Navigation
   7.  Buttons
   8.  Section System
   9.  Photo Placeholders
   10. Geometric Background Pattern
   11. Footer
   12. Reveal Animation
   13. Responsive Breakpoints
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Gold palette ---- */
  --gold:           #C9A227;
  --gold-light:     #DEBA4A;
  --gold-shimmer:   #E4C868;
  --gold-pale:      #2A2310;
  --gold-deep:      #A98312;

  /* ---- Black palette ---- */
  --navy:           #0A0A0A;
  --navy-mid:       #1A1A1A;
  --navy-deep:      #050505;
  --charcoal:       #E8E8E8;

  /* ---- Dark neutrals ---- */
  --cream:          #111111;
  --sand:           #1C1C1C;
  --sand-light:     #161616;
  --ivory:          #141414;
  --white:          #FFFFFF;

  /* ---- Cool neutrals ---- */
  --slate:          #9A9A9A;
  --slate-light:    #6A6A6A;

  /* ---- Borders ---- */
  --border:         rgba(255, 255, 255, 0.10);
  --border-soft:    rgba(255, 255, 255, 0.06);

  /* ---- Semantic ---- */
  --emerald:        #1F7A5A;
  --emerald-soft:   #0D2E22;
  --info:           #4D8FAC;

  /* ---- Accent aliasing ---- */
  --accent:         var(--gold);
  --accent-soft:    var(--gold-pale);

  /* ---- Border radius ---- */
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-xl:      24px;

  /* ---- Typography ---- */
  --font-serif:     'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:      'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-arabic:    'Noto Sans Arabic', serif;

  /* ---- Layout ---- */
  --max:            1280px;
  --max-wide:       1440px;

  /* ---- Shadows ---- */
  --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.4),
                    0 12px 32px -12px rgba(0, 0, 0, 0.5);
  --shadow-lift:    0 20px 60px -20px rgba(0, 0, 0, 0.7);
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: #E8E8E8;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

ul, ol {
  list-style: none;
}


/* ==========================================================================
   3. TYPOGRAPHY UTILITIES
   ========================================================================== */

.serif { font-family: var(--font-serif); }
.sans  { font-family: var(--font-sans); }
.ar    { font-family: var(--font-arabic); direction: rtl; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.eyebrow-line::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}


/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

.wrap-wide {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 32px;
}

.gold-divider {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 24px auto;
}


/* ==========================================================================
   5. LOGO COMPONENT
   Wordmark layout: "ARABIAN" (gold) over "TRAVEL" (navy) with optional
   arrow/swoosh SVG icon beside the top word.
   ========================================================================== */

.logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.95;
  letter-spacing: 1px;
}

.logo .logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.logo .logo-swoosh {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.logo-word-1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 17px;
  color: var(--accent);
  letter-spacing: 1.5px;
}

.logo-word-2 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 19px;
  color: #fff;
  letter-spacing: 3px;
  margin-top: -2px;
}

/* Dark-background logo variant */
.logo.on-dark .logo-word-2 {
  color: #fff;
}


/* ==========================================================================
   6. NAVIGATION
   Sticky bar with frosted glass backdrop. Supports .on-dark variant
   for pages with dark hero sections.
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(17, 17, 17, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.site-nav.on-dark {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.site-nav.on-dark.scrolled {
  position: sticky;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.site-nav .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- Nav links ---- */

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 0;
  position: relative;
  transition: color 0.25s;
}

.site-nav.on-dark .nav-links a {
  color: rgba(255, 255, 255, 0.85);
}

/* Gold underline on hover/active */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-links a.active {
  color: var(--accent);
}

/* ---- Nav right cluster ---- */

.nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-phone {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-nav.on-dark .nav-phone {
  color: #fff;
}

/* Green pulse dot before phone number */
.nav-phone::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--emerald);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(45, 139, 111, 0.18);
  animation: navPulse 2.4s ease-in-out infinite;
}

@keyframes navPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(45, 139, 111, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(45, 139, 111, 0.00); }
}

/* ---- Mobile hamburger (hidden on desktop) ---- */

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}

.site-nav.on-dark .nav-hamburger span {
  background: #fff;
}

/* ---- Mobile nav overlay ---- */

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--navy-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mobile-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-overlay__close {
  position: absolute;
  top: 22px;
  right: 24px;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}

.mobile-overlay__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.mobile-overlay__links a {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.04em;
  transition: color 0.3s;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s;
}

.mobile-overlay.open .mobile-overlay__links a {
  opacity: 1;
  transform: translateY(0);
}

.mobile-overlay.open .mobile-overlay__links li:nth-child(1) a { transition-delay: 0.08s; }
.mobile-overlay.open .mobile-overlay__links li:nth-child(2) a { transition-delay: 0.13s; }
.mobile-overlay.open .mobile-overlay__links li:nth-child(3) a { transition-delay: 0.18s; }
.mobile-overlay.open .mobile-overlay__links li:nth-child(4) a { transition-delay: 0.23s; }
.mobile-overlay.open .mobile-overlay__links li:nth-child(5) a { transition-delay: 0.28s; }

.mobile-overlay__links a:hover {
  color: var(--gold-shimmer);
}

.mobile-overlay__phone {
  margin-top: 2rem;
  font-size: 1rem;
  color: var(--gold-shimmer);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s 0.33s ease, transform 0.4s 0.33s ease;
}

.mobile-overlay.open .mobile-overlay__phone {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   7. BUTTONS
   Pill-shaped, uppercase Montserrat labels. Multiple semantic variants.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1.5px solid transparent;
  transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
}

.btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Primary: navy background */
.btn-primary {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px rgba(201, 162, 39, 0.5);
}

/* Gold: accent background */
.btn-gold {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-gold:hover {
  background: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px rgba(201, 162, 39, 0.45);
}

/* Outline: transparent with navy border */
.btn-outline {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Ghost gold: transparent with gold border */
.btn-ghost-gold {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn-ghost-gold:hover {
  background: var(--accent);
  color: #fff;
}

/* Ghost light: for dark backgrounds */
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-ghost-light:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

/* Small size modifier */
.btn-sm {
  padding: 10px 20px;
  font-size: 11px;
}


/* ==========================================================================
   8. SECTION SYSTEM
   Vertical rhythm, titles with accent <em>, and lead text.
   ========================================================================== */

.section {
  padding: 120px 0;
}

.section-sm {
  padding: 80px 0;
}

.section-header {
  max-width: 720px;
  margin-bottom: 64px;
}

.section-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin-top: 18px;
  text-wrap: balance;
}

.section-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.section-lede {
  font-size: 17px;
  color: var(--slate);
  line-height: 1.7;
  margin-top: 22px;
  max-width: 580px;
  text-wrap: pretty;
}

.section-header.center .section-lede {
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   9. PHOTO PLACEHOLDERS
   Warm-toned striped rectangles with monospace labels. Swap in real
   imagery by adding .has-img and an <img> child.
   ========================================================================== */

.photo {
  position: relative;
  overflow: hidden;
  background: var(--sand);
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(201, 162, 39, 0.06) 0 14px,
      rgba(201, 162, 39, 0.00) 14px 28px
    );
  isolation: isolate;
}

/* Monospace label (set via data-label attribute) */
.photo::after {
  content: attr(data-label);
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(10, 10, 10, 0.78);
  padding: 4px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Dark variant: navy background */
.photo.dark {
  background: var(--navy);
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(201, 162, 39, 0.12) 0 14px,
      rgba(201, 162, 39, 0.00) 14px 28px
    );
}

.photo.dark::after {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(5, 5, 5, 0.7);
}

/* Gold variant */
.photo.gold {
  background: linear-gradient(135deg, var(--gold-shimmer), var(--gold));
  background-image:
    linear-gradient(135deg, rgba(201, 162, 39, 0.9), rgba(218, 184, 106, 0.9)),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08) 0 14px,
      rgba(255, 255, 255, 0.00) 14px 28px
    );
  background-blend-mode: normal, overlay;
}

.photo.gold::after {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(5, 5, 5, 0.3);
}

/* Real image support: absolute cover <img> inside .photo */
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide label when real image is present */
.photo.has-img::after {
  display: none;
}


/* ==========================================================================
   10. GEOMETRIC BACKGROUND PATTERN
   Cross-hatch overlay for dark feature sections.
   Control density with --pattern-opacity (defaults to 1).
   ========================================================================== */

.geo-bg {
  background-color: var(--navy);
  position: relative;
}

.geo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent 0 58px, rgba(201, 162, 39, 0.10) 58px 60px),
    repeating-linear-gradient(90deg,  transparent 0 58px, rgba(201, 162, 39, 0.10) 58px 60px),
    repeating-linear-gradient(45deg,  transparent 0 39px, rgba(201, 162, 39, 0.05) 39px 41px),
    repeating-linear-gradient(-45deg, transparent 0 39px, rgba(201, 162, 39, 0.05) 39px 41px);
  opacity: var(--pattern-opacity, 1);
  pointer-events: none;
}


/* ==========================================================================
   11. FOOTER
   Navy background with diagonal gold line pattern overlay.
   4-column grid: brand, explore, company, contact.
   Bottom bar with copyright and Arabic bismillah.
   ========================================================================== */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 32px;
  position: relative;
  overflow: hidden;
}

/* Diagonal gold line pattern overlay */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(201, 162, 39, 0.05) 40px,
      rgba(201, 162, 39, 0.05) 42px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(201, 162, 39, 0.05) 40px,
      rgba(201, 162, 39, 0.05) 42px
    );
  opacity: 0.5;
  pointer-events: none;
}

/* 4-column grid */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 56px;
  position: relative;
}

/* Column headings */
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

/* Column link lists */
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.25s;
}

.footer-col a:hover {
  color: var(--accent);
}

/* Brand column */
.footer-about p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 16px;
  max-width: 320px;
}

/* Bottom bar: copyright left, bismillah right */
.footer-bottom {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  position: relative;
}

.footer-bottom .ar {
  color: rgba(218, 184, 106, 0.55);
  font-size: 14px;
}

.footer-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff !important;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}
.footer-map-btn:hover {
  background: var(--gold-light);
  color: #fff !important;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.65) !important;
  transition: color 0.25s;
}
.footer-social-link:hover {
  color: var(--accent) !important;
}


/* ==========================================================================
   12. REVEAL ANIMATION
   Elements start invisible and shifted down, then animate in
   when .in class is added (typically via IntersectionObserver).
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   13. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ---- Tablet / small desktop (960px) ---- */

@media (max-width: 960px) {
  .section {
    padding: 80px 0;
  }

  .wrap,
  .wrap-wide {
    padding: 0 22px;
  }

  /* Collapse nav links, show hamburger */
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  /* Footer: 2-column layout */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* ---- Mobile (560px) ---- */

@media (max-width: 560px) {
  .section {
    padding: 60px 0;
  }

  .section-sm {
    padding: 48px 0;
  }

  .section-title {
    font-size: 34px;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .wrap,
  .wrap-wide {
    padding: 0 18px;
  }

  /* Footer: single column */
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Slightly smaller buttons on mobile */
  .btn {
    padding: 12px 22px;
    font-size: 11px;
  }
}


/* ==========================================================================
   14. ACCESSIBILITY
   ========================================================================== */

/* Visible focus indicators for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.25);
}

/* Skip to content link (hidden until focused) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}


/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}