/*
  Basic styling for the Marrakech airport transfer blog page.
  The palette uses warm colours inspired by Moroccan architecture to
  complement the airport and vehicle photography. Feel free to adjust
  colours or spacing to match your brand guidelines.
*/

:root {
  /*
    Colour palette adapted from TakeShuttle.com.  The dark navy primary colour
    evokes trust and professionalism, while the vibrant orange accent echoes
    the call‑to‑action buttons on the client’s site.  Secondary and light
    tones provide contrast for backgrounds and cards.
  */
  --primary-color: #021f59;       /* dark blue for header and footer */
  --secondary-color: #f5f7fc;     /* light grey/blue background */
  --accent-color: #f49425;        /* warm orange for highlights */
  --light-grey: #e6e8ee;          /* light grey for borders and cards */
  --text-color: #1d1e20;          /* dark text colour for readability */
  --max-width: 860px;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  background-color: var(--secondary-color);
  color: var(--text-color);
}

/* Header styling */
.site-header {
  background-color: var(--primary-color);
  color: white;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Title styling within header */
.site-header h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
  flex: 1 1 auto;
  text-align: center;
}

/* Site logo image */
.site-logo {
  height: 50px;
  width: auto;
  display: block;
  margin-right: 1rem;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem;
}

.transfer-article {
  background-color: white;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.transfer-article .article-title {
  margin-top: 0;
  color: var(--accent-color);
  font-size: 1.5rem;
  border-bottom: 2px solid var(--light-grey);
  padding-bottom: 0.4rem;
}

.transfer-article section {
  margin-bottom: 1.2rem;
}

.transfer-article h3 {
  margin: 0.8rem 0 0.4rem;
  color: var(--primary-color);
  font-size: 1.25rem;
}

.transfer-article p,
.transfer-article ul {
  margin-top: 0;
  font-size: 1rem;
}

.transfer-article ul {
  padding-left: 1.2rem;
}

.transfer-article ul li {
  margin-bottom: 0.4rem;
  list-style-type: disc;
}

.article-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0.5rem 0 1rem;
  display: block;
}

.site-footer {
  text-align: center;
  padding: 1rem 0;
  background-color: var(--primary-color);
  color: white;
}

.site-footer p {
  margin: 0;
  font-size: 0.9rem;
}