/*
  Styling for the Profit Pacer service website.
  This design uses a light and modern palette with indigo and gold accents.
  The layout is structured into clear sections: hero, features, call to action,
  address and footer. Forms and buttons are styled for a clean look.
*/

:root {
  --primary: #4a5fc1;
  --secondary: #f5b342;
  --light-bg: #f8f8f8;
  --dark: #333333;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--dark);
  background: var(--light-bg);
  line-height: 1.6;
}

a {
  text-decoration: none;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.site-header {
  background: var(--white);
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 999;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.logo {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary);
}

.main-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--dark);
  padding: 0.75rem 0;
  font-weight: 500;
  transition: color .2s;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--primary);
}

/* Hero */
.hero {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* updated hero background to use our new abstract pattern */
  background-image: url('../images/hero2.jpg');
  background-size: cover;
  background-position: center;
  color: var(--dark);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75);
}

.hero-content {
  position: relative;
  max-width: 800px;
  padding: 0 1rem;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 5px;
  font-weight: 600;
  transition: background .2s, color .2s;
}

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

.primary-btn:hover {
  background: #394aad;
}

.secondary-btn {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
}

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

/* Features */
.features {
  background: var(--white);
  padding: 4rem 0;
  text-align: center;
}

.features h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--primary);
}

.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.feature-card {
  background: var(--light-bg);
  padding: 2rem;
  flex: 1 1 250px;
  max-width: 320px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-card img {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.feature-card p {
  font-size: 1rem;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.feature-card .btn {
  margin-top: auto;
}

/* Call to action */
.cta {
  background: var(--primary);
  color: var(--white);
  text-align: center;
  padding: 3rem 1rem;
}

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

.cta p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* Address section */
.address {
  background: var(--white);
  padding: 3rem 1rem;
  text-align: center;
  border-top: 1px solid #e5e5e5;
}

.address h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.address p {
  margin: 0.3rem 0;
}

/* Generic section headings */
.page-main h1 {
  color: var(--primary);
  margin-bottom: 1rem;
}

/* Products page */
.products-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

.product-card {
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  padding: 1.5rem;
}

.product-card h3 {
  color: var(--primary);
  margin-top: 0;
}

/*
  Category images used on the products page. These images introduce colourful
  patterns that correspond to each product category (office, school and art).
  They span the full width of their container and include a subtle shadow
  and rounded corners to integrate gracefully with the card layout.
*/
.category-image {
  display: block;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Contact form */
.contact-section {
  background: var(--white);
  padding: 3rem 1rem;
}

.contact-form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Blog comments */
.comments-section {
  margin-top: 3rem;
}
.comments-section h2 {
  color: var(--primary);
  margin-top: 0;
}
.comments {
  margin-top: 1rem;
}
.comment-item {
  background: var(--white);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
}
.comment-item p {
  margin: 0.5rem 0 0;
}
.comment-form {
  max-width: 500px;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.comment-form label {
  font-weight: 600;
}
.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
.comment-form button {
  align-self: flex-start;
}

.contact-form label {
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  align-self: flex-start;
}

/* Footer */
.site-footer {
  background: #f1f1f1;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  border-top: 1px solid #e5e5e5;
}

.site-footer .policy-links a {
  color: var(--primary);
}

.site-footer .policy-links a:hover {
  text-decoration: underline;
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
}

.cookie-banner p {
  margin: 0;
}

@media (max-width: 768px) {
  .feature-grid {
    flex-direction: column;
  }
  .site-header .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .main-nav ul {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}