/* ============================================================
   HM Tour and Travels — Stylesheet
   ------------------------------------------------------------
   CSS controls how the HTML LOOKS: colours, spacing, fonts,
   layout. Selectors (the bit before the {) say "which elements"
   and the properties inside { } say "how they should look".
   ============================================================ */


/* ------------------------------------------------------------
   1. DESIGN TOKENS (CSS variables)
   ------------------------------------------------------------
   Storing colours and sizes once at the top means we can reuse
   them everywhere and change the whole site by editing one line.
   The "--name" syntax defines a variable; var(--name) uses it.
   ------------------------------------------------------------ */
:root {
  /* Warm Indian palette */
  --color-saffron:      #E67E22;   /* primary accent — saffron orange */
  --color-saffron-dark: #C0651A;   /* darker shade for hover states */
  --color-terracotta:   #B5471B;   /* deep earthy red for headings */
  --color-cream:        #FBF6EC;   /* soft cream — page background */
  --color-cream-warm:   #F4E9D3;   /* slightly deeper cream for sections */
  --color-ink:          #2A1F1A;   /* near-black with warm undertone */
  --color-text:         #4A3F36;   /* body text — softer than pure black */
  --color-muted:        #7A6B5D;   /* small/secondary text */
  --color-line:         #E6D9C2;   /* subtle borders */

  /* Spacing scale — keeps padding/margins consistent across the site */
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  /* Other reusable values */
  --radius: 10px;
  --shadow-card: 0 4px 14px rgba(42, 31, 26, 0.08);
  --max-width: 1140px;
}


/* ------------------------------------------------------------
   2. RESET + BASE STYLES
   ------------------------------------------------------------
   Different browsers add their own default margins/padding.
   We zero them out so the layout starts from a clean slate.
   ------------------------------------------------------------ */
* {
  box-sizing: border-box;   /* makes width/height include padding — far easier to reason about */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;  /* makes anchor links (#packages) glide instead of jump */
}

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;         /* generous line height = comfortable reading */
  color: var(--color-text);
  background-color: var(--color-cream);
}

img {
  max-width: 100%;          /* images never overflow their container */
  display: block;
}

a {
  color: var(--color-saffron);
  text-decoration: none;
}

a:hover {
  color: var(--color-saffron-dark);
}

ul {
  list-style: none;         /* removes default bullet points */
}


/* ------------------------------------------------------------
   3. LAYOUT HELPER: .container
   ------------------------------------------------------------
   A "container" centres content and limits its width so text
   doesn't stretch edge-to-edge on huge monitors. Reused everywhere.
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;           /* "auto" left+right = horizontal centring */
  padding: 0 var(--space-md);
}


/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------
   Two button styles: a solid primary button for the main action,
   and an outline button for secondary actions on cards.
   ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;   /* smooths the colour change on hover */
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--color-saffron);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--color-saffron-dark);
  color: #ffffff;
  transform: translateY(-2px);   /* tiny lift effect on hover */
}

.btn-outline {
  background-color: transparent;
  color: var(--color-saffron-dark);
  border-color: var(--color-saffron);
  padding: 0.55rem 1.2rem;
  font-size: 0.9rem;
}

.btn-outline:hover {
  background-color: var(--color-saffron);
  color: #ffffff;
}


/* ------------------------------------------------------------
   5. HEADER + NAVIGATION
   ------------------------------------------------------------ */
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-line);
  position: sticky;          /* sticks to top of screen as you scroll */
  top: 0;
  z-index: 100;              /* keeps it above other content */
}

/* Flexbox arranges brand + nav side-by-side and pushes them apart. */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  flex-wrap: wrap;           /* allows wrapping on small screens */
  gap: var(--space-sm);
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-terracotta);
  letter-spacing: 0.3px;
}

.brand-tagline {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 2px;
}

.main-nav ul {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.main-nav a {
  color: var(--color-ink);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.main-nav a:hover {
  color: var(--color-saffron-dark);
  border-bottom-color: var(--color-saffron);
}


/* ------------------------------------------------------------
   6. HERO SECTION
   ------------------------------------------------------------
   A warm gradient background and big, confident headline.
   ------------------------------------------------------------ */
.hero {
  /* A gentle gradient from cream into a warm peach tone. */
  background: linear-gradient(135deg, var(--color-cream-warm) 0%, #F8D3A8 100%);
  padding: var(--space-xl) 0;
  text-align: center;
}

.hero-inner {
  max-width: 780px;          /* keeps the headline from getting too wide */
}

.hero-headline {
  font-size: 2.6rem;
  line-height: 1.2;
  color: var(--color-terracotta);
  margin-bottom: var(--space-md);
  font-weight: 700;
}

.hero-subtext {
  font-size: 1.15rem;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}


/* ------------------------------------------------------------
   6b. TODAY'S FLIGHT DEALS
   ------------------------------------------------------------
   A light, centred band sitting just under the hero. Uses the
   warm cream tone so it reads as secondary to the hero, not a
   second hero. The two buttons sit side-by-side and wrap onto
   separate lines on narrow phones.
   ------------------------------------------------------------ */
.deals {
  background-color: var(--color-cream-warm);
  padding: var(--space-lg) 0;
  text-align: center;
}

.deals-inner {
  max-width: 720px;
}

.deals-text {
  color: var(--color-text);
  font-size: 1.05rem;
  margin-bottom: var(--space-md);
}

.deals-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;          /* lets the buttons stack on narrow screens */
}

/* The promotional poster image inside the deals band. */
.todays-poster {
  display: block;
  margin: 2rem auto;                          /* centred, with space above/below */
  max-width: 100%;                            /* never overflows on small screens */
  height: auto;                               /* keeps the original proportions */
  border-radius: 12px;                        /* soft rounded corners */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); /* subtle depth */
}


/* ------------------------------------------------------------
   7. SECTION TITLES (reused across sections)
   ------------------------------------------------------------ */
.section-title {
  font-size: 2rem;
  color: var(--color-terracotta);
  text-align: center;
  margin-bottom: var(--space-sm);
  font-weight: 700;
}

.section-subtitle {
  text-align: center;
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
  font-size: 1.05rem;
}


/* ------------------------------------------------------------
   8. PACKAGES (CARD GRID)
   ------------------------------------------------------------ */
.packages {
  padding: var(--space-xl) 0;
}

/* CSS Grid lays out the cards. "auto-fit + minmax" means:
   "fit as many cards per row as can be at least 260px wide,
   and split the remaining space evenly". This makes the layout
   responsive automatically — no media query needed for the grid itself. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.card {
  background-color: #ffffff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);          /* lifts on hover */
  box-shadow: 0 8px 22px rgba(42, 31, 26, 0.12);
}

.card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex-grow: 1;                         /* makes all cards same height */
}

.card-tag {
  display: inline-block;
  background-color: var(--color-cream-warm);
  color: var(--color-terracotta);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;                 /* fully rounded "pill" shape */
  margin-bottom: var(--space-sm);
  align-self: flex-start;
}

.card-title {
  font-size: 1.25rem;
  color: var(--color-ink);
  margin-bottom: 0.3rem;
}

.card-duration {
  color: var(--color-saffron-dark);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
}

.card-description {
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
  flex-grow: 1;                         /* pushes the footer to the bottom */
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-sm);
}

.card-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-terracotta);
}

.card-price small {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
}


/* ------------------------------------------------------------
   8b. ROUTES & FARES
   ------------------------------------------------------------
   The routes grid is fixed to EXACTLY 2 columns on desktop and
   tablet, so the 11 cards always line up in tidy pairs. On phones
   (handled in the responsive section at the bottom) it drops to a
   single column. This avoids the "lonely leftover card" problem.
   ------------------------------------------------------------ */
.routes {
  padding: var(--space-xl) 0;
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* exactly two equal columns */
  gap: var(--space-md);
}

/* Polished look for each route card: warm cream fill, a saffron accent
   stripe down the left edge, softer rounded corners, and a gentle lift
   on hover so the cards feel inviting rather than flat. */
.route-card {
  background-color: #FFFAF0;                    /* very light warm cream */
  border-left: 4px solid var(--color-saffron);  /* saffron accent stripe */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.route-card .card-body {
  padding: 1.75rem;                             /* a little more breathing room */
}

.route-card:hover {
  transform: translateY(-2px);                  /* slight lift */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);   /* shadow deepens */
}

.route-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.2rem;
}

.route-subtitle {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

/* Keep the button neat at the card's left edge rather than stretching. */
.route-card .btn {
  align-self: flex-start;
}

.routes-note {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.95rem;
  margin-top: var(--space-lg);
}


/* ------------------------------------------------------------
   8c. OTHER SERVICES
   ------------------------------------------------------------
   Reuses the standard .card-grid (auto-fitting columns), so the
   three cards sit side-by-side on wider screens and stack on
   phones automatically. We just add section spacing and keep the
   button anchored to the card's left edge.
   ------------------------------------------------------------ */
.services {
  padding: var(--space-xl) 0;
}

.service-card .btn {
  align-self: flex-start;
}


/* ------------------------------------------------------------
   8d. WHAT OUR CUSTOMERS SAY (REVIEWS)
   ------------------------------------------------------------
   White background to set the testimonials apart as a clean band.
   The grid uses minmax(300px, 1fr): wide enough that exactly 3
   cards fit per row on desktop, 2 on a tablet, and 1 on a phone —
   so we get the 3/2/1 layout without extra media queries.
   ------------------------------------------------------------ */
.reviews {
  background-color: #ffffff;
  padding: var(--space-xl) 0;
}

.review-rating {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-terracotta);
  margin-bottom: var(--space-lg);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}

.review-stars {
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: var(--space-sm);
}

.review-text {
  font-style: italic;
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
  flex-grow: 1;                /* pushes the attribution to the bottom */
}

.review-author {
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.85rem;
}

.reviews-cta {
  text-align: center;
  margin-top: var(--space-lg);
}


/* ------------------------------------------------------------
   9. WHY US SECTION
   ------------------------------------------------------------ */
.why-us {
  background-color: var(--color-cream-warm);
  padding: var(--space-xl) 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.feature {
  background-color: #ffffff;
  padding: var(--space-md);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-sm);
  background-color: var(--color-saffron);
  color: #ffffff;
  border-radius: 50%;                  /* perfect circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}

.feature-title {
  color: var(--color-terracotta);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.feature p {
  color: var(--color-text);
  font-size: 0.95rem;
}


/* ------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background-color: var(--color-ink);
  color: #d9cfc4;
  padding-top: var(--space-xl);
  margin-top: var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
}

.footer-heading {
  color: var(--color-saffron);
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.footer-col p {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* Make the phone/email/WhatsApp links readable on the dark footer. */
.footer-contact a {
  color: #d9cfc4;
}

.footer-contact a:hover {
  color: var(--color-saffron);
}

/* The small WhatsApp icon sitting next to the main number. */
.wa-link {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.4rem;
}

.wa-link svg {
  width: 18px;
  height: 18px;
  fill: #25D366;            /* WhatsApp's own green */
}

/* Row of social icons. Flexbox lines them up with even spacing. */
.social-row {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.social-row a {
  display: inline-flex;
  color: #d9cfc4;
}

.social-row a:hover {
  color: var(--color-saffron);
}

/* "fill: currentColor" makes each icon take its link's colour,
   so they turn saffron on hover along with the link. */
.social-row svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Outlined "Get Directions" button, recoloured to suit the dark footer.
   It reuses .btn-outline and just overrides the colours and size. */
.footer-btn {
  margin-top: var(--space-sm);
  color: #d9cfc4;               /* light text instead of saffron */
  border-color: #6b5a4c;        /* muted warm border */
  padding: 0.5rem 1rem;         /* modest size */
  font-size: 0.85rem;
}

.footer-btn:hover {
  background-color: var(--color-saffron);
  border-color: var(--color-saffron);
  color: #ffffff;
}

.footer-bottom {
  border-top: 1px solid #3d2f26;
  padding: var(--space-md) 0;
  font-size: 0.85rem;
  text-align: center;
  color: #a89788;
}


/* ============================================================
   11. RESPONSIVE / MOBILE TWEAKS
   ------------------------------------------------------------
   A "media query" applies styles only when the screen meets a
   condition. Here: "if the screen is 640px wide or less", which
   is roughly a phone in portrait orientation. We shrink fonts
   and reduce padding so the page feels right on small screens.
   The grid sections above already adapt automatically, so we
   mostly handle typography and spacing here.
   ============================================================ */
@media (max-width: 640px) {

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

  .hero-headline {
    font-size: 1.9rem;
  }

  .hero-subtext {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .packages,
  .routes,
  .services,
  .why-us {
    padding: var(--space-lg) 0;
  }

  /* On phones, show one route card per row instead of two. */
  .routes-grid {
    grid-template-columns: 1fr;
  }

  /* Stack the brand and nav vertically and centre them on phones. */
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-nav ul {
    gap: var(--space-sm);
  }
}