/*
 * Concept Commercial Flooring website stylesheet
 *
 * This stylesheet defines the visual language for the Concept Commercial
 * Flooring website. A dark theme with gold accent colours reflects
 * the business card branding and conveys a premium feel. The layout
 * is responsive and uses CSS grid and flexbox for simple structure.
 */

/* Colour palette */
:root {
  --primary-color: #000000;        /* Black background */
  --accent-color: #d4af37;         /* Gold accent */
  --text-color: #f5f5f5;           /* Light grey text */
  --secondary-text-color: #b5b5b5; /* Muted grey for secondary text */
  --card-bg: #111111;              /* Dark card backgrounds */
  --border-color: #444444;         /* Subtle borders */
}

body {
  margin: 0;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--primary-color);
  color: var(--text-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #b7942e;
}

/* Header and navigation */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

nav {
  display: flex;
  align-items: center;
  /* spread the logo, tagline and menu evenly across the header */
  justify-content: space-between;
  /* use a small amount of vertical padding rather than a fixed height.
     The navigation bar will automatically expand to fit the logo plus
     this padding, keeping the header proportional across devices. */
  /* Increase the vertical padding to give the header a little more breathing room.
     The navigation bar height will now be equal to the logo height plus this
     padding, so the logo fills most of the header while leaving a small
     space above and below. */
  padding: 15px 30px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Scale the logo relative to the nav height.  By setting the height to
   fill 95% of the header and using auto width, the logo remains
   proportional on different screen sizes. */
.logo img {
  /* Constrain the logo height so that it does not dominate the header.
     Setting an explicit pixel height keeps the proportions consistent
     across devices. The navigation bar will wrap snugly around the logo
     thanks to auto height on the nav element. */
  height: 70px;
  width: auto;
  max-height: 70px;
  object-fit: contain;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  /* When a tagline is present within the navigation bar this pushes the list
     of links to the far right */
  margin-left: auto;
}

nav ul li a {
  color: var(--text-color);
  font-weight: 500;
}

nav ul li a:hover {
  color: var(--accent-color);
}

/* Hero section */
.hero {
  /* Position the hero relative so absolutely positioned slides inside can
     be anchored relative to this container */
  position: relative;
  height: 70vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 10%;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/*
 * Slideshow styling inside the hero section.  Each slide is stacked on top
 * of one another with absolute positioning and fades in and out via
 * opacity transitions.  The z-index places the slides behind the hero
 * content so the heading and description remain readable.
 */
.hero .slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.hero .slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
}

.hero .slideshow img.active {
  opacity: 1;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 15px;
}

.hero p {
  font-size: 1.2rem;
  max-width: 600px;
  margin-bottom: 25px;
  color: var(--secondary-text-color);
}

.btn {
  background-color: var(--accent-color);
  color: #000000;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  display: inline-block;
}

.btn:hover {
  background-color: #b7942e;
}

/* Generic section styling */
.section {
  padding: 60px 10%;
  max-width: 1400px;
  margin: 0 auto;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: var(--accent-color);
}

/* Service cards layout */
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

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

.card p {
  color: var(--secondary-text-color);
}

/* Projects grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.project-grid img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Contact page */
.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.contact-info {
  flex: 1 1 300px;
}

.contact-info div {
  margin-bottom: 10px;
}

form {
  flex: 1 1 300px;
}

form input,
form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 4px;
  font-size: 1rem;
  resize: vertical;
}

form button {
  background-color: var(--accent-color);
  color: #000000;
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

form button:hover {
  background-color: #b7942e;
}

/* Footer */
.footer {
  background-color: #0c0c0c;
  padding: 20px 10%;
  text-align: center;
  color: var(--secondary-text-color);
  font-size: 0.9rem;
}

.footer a {
  color: var(--accent-color);
}

/* Tagline styling */
.tagline {
  font-family: var(--font-family);
  /* Keep the tagline the same size as the navigation menu for a cohesive look */
  font-size: 1rem;
  font-weight: 700;
  /* Use the site's standard text colour so the tagline matches other headings */
  color: var(--text-color);
  /* Allow the tagline to expand to fill the available space between the logo and menu */
  flex: 1;
  text-align: center;
  /* Remove margins so the tagline does not increase header height */
  margin-top: 0;
  /* Reset margin-left to 0 so the tagline sits centred between the logo and the menu */
  margin-left: 0;
  letter-spacing: 1px;
  /* Remove the glow effect for a consistent heading style */
  text-shadow: none;
}

/* Header shrink effect */
header.shrink {
  padding: 0.5rem 0;
}

header.shrink .logo img {
  height: 50px;
}

header.shrink .tagline {
  font-size: 0.9rem;
}

/* Reduce navigation padding when header shrinks */
header.shrink nav {
  padding: 0.5rem 0;
}