/*
  Base styles for The Painting Gals website
  -----------------------------------------------------------------------------
  This stylesheet defines the color palette, typography, layout and responsive
  behaviour for the website. Custom properties (CSS variables) are used to
  define the main colours so they can be tweaked easily to match the brand.

  The layout employs flexbox and CSS grid to arrange content elegantly across
  different screen sizes. Media queries toward the bottom adjust spacing and
  stacking order for smaller devices.
*/

:root {
  --primary: #087e8b; /* deep teal reminiscent of the logo */
  --secondary: #018786; /* secondary accent colour */
  --background-light: #f7fafc; /* very light background */
  --background-white: #ffffff;
  --text-dark: #033f47;
  --text-light: #ffffff;
  --muted: #5b777b;
}

/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Lato', Arial, sans-serif;
  color: var(--text-dark);
  background-color: var(--background-white);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--primary);
  line-height: 1.2;
}

h1 {
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1rem;
  max-width: 60ch;
}

ul {
  list-style: none;
}

/* Navigation */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Reduce vertical padding since the logo is now larger. */
  padding: 0.5rem 2rem;
  background-color: rgba(255, 255, 255, 0.8);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/*
 * Make the logo more prominent by increasing its height. The width will scale
 * automatically to maintain the aspect ratio. We also allow the container to
 * adjust its height to accommodate the larger logo.
 */
.logo-img {
  height: 100px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 600;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--primary);
}

/* Hero section */
.hero {
  position: relative;
  height: 70vh;
  background-image: url('assets/hero.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 64, 80, 0.4);
}

.hero-content {
  position: relative;
  z-index: 1;
  color: var(--text-light);
}

.hero-content h1 {
  font-size: 3rem;
  color: var(--text-light);
}

.hero-content .tagline {
  font-size: 1.2rem;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  color: var(--background-light);
}

.btn-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--primary);
  color: var(--text-light);
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--secondary);
}

/* Sections */
.section {
  padding: 4rem 2rem;
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
}

/* About */
.about-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.about-text {
  flex: 1 1 50%;
}

.about-text p {
  margin-bottom: 1.2rem;
}

.about-list li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.about-list li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--primary);
}

.about-image {
  flex: 1 1 45%;
  text-align: right;
}

.about-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Services */
.cards-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background-color: var(--background-light);
  padding: 2rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card .icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  border-radius: 50%;
}

.card .icon img {
  width: 32px;
  height: 32px;
  filter: invert(1);
}

.card h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.8rem;
  font-size: 1.5rem;
  color: var(--primary);
}

.card p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-item {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* Contact */
.contact-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.contact-details {
  flex: 1 1 300px;
  font-size: 1rem;
}

.contact-details p {
  margin-bottom: 0.8rem;
}

.contact-details a {
  color: var(--primary);
  text-decoration: none;
}

.contact-details a:hover {
  text-decoration: underline;
}

.contact-form {
  flex: 1 1 350px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.form-group input,
.form-group textarea {
  padding: 0.7rem;
  border: 1px solid #dce4e6;
  border-radius: 4px;
  font-size: 1rem;
  resize: vertical;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(8, 126, 139, 0.2);
}

.contact-form .btn-primary {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Footer */
.footer {
  background-color: var(--background-light);
  text-align: center;
  padding: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-links {
    margin-top: 0.5rem;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .hero {
    height: 60vh;
  }
  h1 {
    font-size: 2.5rem;
  }
  .about-container,
  .contact-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .about-image {
    order: -1;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content .tagline {
    font-size: 1rem;
  }
}