/* UI Enhancements for Falcon Travel UK
   Improves spacing, typography, buttons, nav responsiveness, and focus states.
*/
:root{
  --brand-font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius:12px;
  --transition: 0.22s ease;
}

/* Typography */
body { font-family: var(--brand-font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1,h2,h3{ color: var(--ink); margin:0 0 12px }
h1{ font-size: clamp(1.6rem, 3vw, 2.6rem); line-height:1.05 }
p{ color: var(--muted); margin:0 0 14px }

/* Header improvements */
.site-header{ padding:14px 6vw; align-items:center }
.brand{ font-weight:800; display:flex; gap:12px; align-items:center }
.brand-mark{ width:44px; height:44px; border-radius:10px; font-weight:900; display:grid; place-items:center }

.nav{ gap:20px }
.nav a{ padding:8px 6px; border-radius:8px; transition: var(--transition); }
.nav a:hover, .nav a:focus{ background: rgba(0,0,0,0.03); color: var(--gold-dark); transform:none }

.nav-toggle{ display:none }
@media (max-width: 900px){
  .nav{ position:fixed; inset:72px 14px auto 14px; background:var(--paper); padding:12px; border-radius:12px; box-shadow:0 12px 40px rgba(2,6,23,0.08); display:flex; flex-direction:column; gap:10px; transform:translateY(-8px); max-height:70vh; overflow:auto }
  .nav.open{ transform:none }
  .nav-toggle{ display:inline-block; background:none; border:0; font-size:22px }
}

/* Buttons */
.btn{ font-weight:800; border-radius:999px; padding:12px 18px; transition: transform var(--transition), box-shadow var(--transition); }
.btn:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.08) }
.btn-outline{ background:transparent; border:1px solid rgba(0,0,0,0.06); }

/* Cards & sections */
.hero, .card, .hotel-hero, .content-section, .section-card{ border-radius: var(--radius); padding:18px }
.hero { box-shadow: 0 24px 60px rgba(20,30,60,0.06) }

/* Footer */
.footer-content{ display:flex; gap:28px; flex-wrap:wrap; justify-content:space-between; padding:28px 6vw }
.footer-section{ min-width:180px }
.footer-bottom{ text-align:center; padding:16px; font-size:0.95rem; color:var(--muted) }

/* Accessibility */
a:focus, button:focus, input:focus { outline: 3px solid rgba(200,156,66,0.18); outline-offset:3px }

/* Make images crisper and lazy-loading friendly */
img{ display:block; max-width:100%; height:auto }

/* Utilities */
.container{ max-width:1200px; margin:0 auto; }

/* Slight polish for listing grids */
.hotel-grid, .service-grid, .transfer-grid { gap:20px }

/* Back to top styling (improve visibility) */
#backToTop{ border-radius:50%; box-shadow: 0 6px 18px rgba(0,0,0,0.14); }

/* reduce motion */
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important } }

/* ===== SITE-WIDE ANIMATIONS & TITLE CENTERING ===== */
@keyframes ft-fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ft-slideInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.animate{animation:ft-fadeInUp 0.6s ease both}
h1{ text-align:center; animation:ft-fadeInUp 0.6s ease both }
.card, .hotel-card, .transfer-card, .content-section, .hero{animation:ft-slideInUp 0.65s ease both}
.img-placeholder{display:inline-block;width:44px;height:44px;border-radius:8px;background:rgba(0,0,0,0.04);color:var(--muted);font-size:0.8rem;align-items:center;justify-content:center;display:flex;text-decoration:none}

/* Button scroll-triggered animation */
@keyframes ft-popIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.btn.animate, .btn.animate-on-scroll { animation: ft-popIn 0.45s cubic-bezier(.2,.9,.2,1) both; }
@media (prefers-reduced-motion: reduce){ .btn.animate, .btn.animate-on-scroll { animation:none!important } }

/* Keep animations off when user prefers reduced motion */
@media (prefers-reduced-motion: reduce){ .animate, h1, .card, .hotel-card, .transfer-card, .content-section, .hero{ animation:none!important } }