/*
 * Global styles for Trimly website
 * Define CSS variables for easy colour management and consistent spacing.
 */
:root {
  /* Primary brand colour used throughout the site. This has been updated to match the
     original Trimly branding – a deep purple with blue undertones. */
  --primary-color: #4b2e83;
  /* Secondary colour for light panels and cards */
  --secondary-color: #f6f4fb;
  /* Accent colour for highlights and hover states */
  --accent-color: #8367c7;
  /* Base text colour */
  --text-color: #333333;
  /* Page background */
  --background-color: #ffffff;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--background-color);
  color: var(--text-color);
}
header {
  background: var(--primary-color);
  color: #fff;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
/* When using an image logo we set a consistent height so it scales nicely on mobile.
   The .logo class is used on <img> elements inside the header. */
.logo {
  height: 40px;
  width: auto;
  display: block;
}
nav a {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.2s ease-in-out;
}
nav a:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.hero {
  position: relative;
  text-align: center;
  color: #fff;
}
.hero img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  /* Darken the image slightly so white text is readable */
  filter: brightness(0.55);
}
.hero .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: bold;
}
.section {
  padding: 40px;
  background: white;
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.section h2 {
  margin-top: 0;
  color: var(--primary-color);
}
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.feature-card {
  flex: 1;
  min-width: 250px;
  background: var(--secondary-color);
  border-radius: 8px;
  padding: 20px;
}
.feature-card h3 {
  margin-top: 0;
  color: var(--primary-color);
}
.calendar-comparison {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.calendar-comparison img {
  width: 100%;
  border-radius: 8px;
  max-width: 400px;
}

/* Limit the width of large illustrative images (such as the menu guidance table) to improve readability on desktop */
.section img {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}
.call-to-action {
  text-align: center;
  margin: 40px 0;
}
.call-to-action a {
  background: var(--primary-color);
  color: #fff;
  padding: 15px 30px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 18px;
  transition: background 0.2s ease-in-out;
}

.call-to-action a:hover {
  background: #4b2375;
}
footer {
  background: #5d2d91;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 14px;
}
footer a {
  color: #e5d3f5;
  text-decoration: none;
  margin: 0 10px;
}