/*
 * Global styles for the World Demolition Ventures site.
 * The palette uses dark, neutral tones with a steel‑blue accent for a
 * professional and trustworthy feel suitable for commercial and
 * government clientele.  All typography scales responsively for
 * readability on small screens.
 */

:root {
  --color-bg: #101820; /* rich charcoal background */
  --color-surface: #1c2a38; /* dark slate panels */
  --color-card: #243b53; /* slightly lighter panels */
  --color-primary: #2b5c9a; /* steel‑blue accent */
  --color-accent: #b4c9e5; /* pale slate for subtle highlights */
  --color-text: #f5f5f5; /* near white text */
  --color-muted: #9aa5b1; /* muted grey for secondary text */
  --radius: 0.5rem;
  /* Allow the content container to stretch wider on large screens so
     that five service cards can comfortably appear side by side. */
  --max-width: 1400px;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  margin-bottom: 0.75rem;
}

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

p {
  margin-bottom: 1rem;
  color: var(--color-muted);
  line-height: 1.7;
}

/* Utility container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 1000;
}

.header.scrolled {
  background-color: rgba(16, 24, 32, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
}

.brand {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

/* Logo styling combines an icon with the company name.  Use flex to
   horizontally align the icon and text and maintain spacing.  The icon
   inherits our primary colour, while the text remains white for
   contrast. */
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--color-primary);
}

.logo-text {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-text);
}

/* Image‑based logo symbol.  Constrain the width so the icon remains
   proportionate in the header; the height adjusts automatically to
   preserve aspect ratio. */
.logo-image {
  /* Increase the logo symbol size for better visibility on desktop screens.
     A wider logo helps the demolition symbol read clearly without
     overpowering the company name. */
  width: 4rem;
  height: auto;
  display: block;
}

/* Navigation */
.nav {
  display: flex;
}

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

.nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  transition: color 0.2s ease;
}

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

.nav a:hover,
.nav a:focus {
  color: var(--color-accent);
}

/* Hamburger button */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  cursor: pointer;
  gap: 0.35rem;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile navigation styles */
@media (max-width: 768px) {
  .nav {
    position: absolute;
    top: 4rem;
    right: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: rgba(16, 24, 32, 0.98);
    flex-direction: column;
    transition: max-height 0.4s ease;
  }
  .nav.open {
    max-height: 15rem;
  }
  .nav ul {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }
  .nav-toggle {
    display: flex;
  }
}

/* Hero section */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: 4rem; /* account for fixed header */
  background-image: url('images/skyline.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-align: center;
  overflow: hidden;
  /* Apply a slow cinematic zoom effect to the hero’s background.  On wide screens
     the image gradually scales up and down to create visual interest without
     distracting from the headline.  On mobile the effect remains subtle
     because background-attachment switches to scroll. */
  animation: heroZoom 40s ease-in-out infinite alternate;
}

@media (max-width: 768px) {
  .hero {
    background-attachment: scroll;
    /* Reduce the impact of the zoom effect on mobile by shortening the duration */
    animation-duration: 60s;
  }
}

/* When the viewport is medium sized (tablet & small laptops), the hero’s
   background zoom effect can cause the image to shrink awkwardly.  Disable
   the animation and enlarge the background on mid‑sized screens so the
   skyline remains immersive and fills the header nicely. */
@media (max-width: 1024px) {
  .hero {
    /* Disable the zoom animation on mid‑sized and small screens. */
    animation: none;
    /* Restore the default background sizing so the image covers the hero
       area naturally and doesn’t appear shrunken. */
    background-size: cover;
    background-position: center;
  }
}

/* Keyframes for the hero section’s cinematic zoom effect.  The background
   gradually scales from its original size to a larger zoom and then back. */
@keyframes heroZoom {
  0% {
    background-size: 100% auto;
  }
  100% {
    background-size: 120% auto;
  }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 2rem 1rem;
}

.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

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

.btn-primary:hover,
.btn-primary:focus {
  background-color: #214774;
  transform: translateY(-2px);
}

/* Section generic styling */
.section {
  padding: 5rem 0;
  /* Reserve space when navigating via anchors so headings are not hidden
     behind the fixed header. */
  scroll-margin-top: 5rem;

  /* Fade sections in from below on scroll for a more dynamic
     presentation. Sections start invisible and translate down
     slightly until they enter the viewport. */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section-intro {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  text-align: center;
}

/* When a section is scrolled into view the JavaScript adds
   the .in-view class to trigger the fade‑up animation defined
   on the base .section rules. */
.section.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Services grid */
/* Services grid as a responsive flexbox. Cards wrap to new rows as
   needed and are centered within the container to avoid awkward
   alignment when the number of cards doesn’t divide evenly into
   the number of columns. */
.services-grid {
  display: grid;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  /* The specific column counts are defined in responsive breakpoints below. */
  grid-auto-rows: auto;

  /* Default to a single column on very small screens so cards stack
     vertically. This will be overridden by media queries for larger
     breakpoints. */
  grid-template-columns: 1fr;
}

/* Ensure cards fill the height of their grid row and do not exceed
   the available column width. Height and flex properties are defined
   earlier in the stylesheet. */
.service-card {
  max-width: 100%;
}

/* On very wide screens (desktop), display all five services in a single
   row for a modern, streamlined layout. Adjust the breakpoint to
   accommodate five cards at approximately 280px each plus gaps. */
/* The auto‑fit layout in .services-grid handles the number of columns based on
   available space, so explicit breakpoints are no longer necessary. Cards will
   naturally wrap to fewer columns on smaller screens and expand to more
   columns on larger screens without becoming too narrow. */

/* Override the auto-fit layout at desktop breakpoints to ensure cards are
   comfortably wide. Using explicit column counts prevents the cards from
   becoming too narrow on typical PC screens. */
/* Desktop breakpoints: widen the card grid on progressively larger screens. */
@media (min-width: 768px) and (max-width: 899px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Removed minimum height for cards on larger screens to prevent them from
   appearing overly long and narrow. Cards will now adapt to the height
   of their content, with rows naturally adjusting based on the tallest
   card. */

/* Center the heading and introduction within the Services section. */
#services h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.service-card {
  background-color: var(--color-card);
  padding: 2rem;
  border-radius: var(--radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /*
   * Lay out each service card as a vertical flex container.  On
   * desktop, align the icon, heading and copy centrally so that the
   * icon and title are centred relative to the card.  This provides
   * a more balanced composition when multiple cards appear side by
   * side.  The paragraphs will also centre to avoid awkward left‑
   * aligned copy within a centred card.
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Ensure each card always expands to fill its grid cell width */
  width: 100%;
  height: 100%;
}

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

.icon-wrapper {
  width: 3rem;
  height: 3rem;
  background-color: var(--color-surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--color-primary);
}

.service-card h3 {
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}

.service-card p {
  flex-grow: 1;
  color: var(--color-muted);
}

/* Government section */
.government {
  position: relative;
  background-image: url('images/construction.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-text);
  text-align: left;
}

@media (max-width: 768px) {
  .government {
    background-attachment: scroll;
  }
}

.gov-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Dark overlay to improve legibility over the construction
     background. Lowered the alpha so the photo shows through more
     clearly on desktop while still providing sufficient contrast for
     text. */
  /* Semi-transparent overlay to ensure text remains legible over
     the construction background. Using a dark charcoal with moderate
     alpha lets the structure show through without overwhelming the
     content. */
  background: rgba(16, 24, 32, 0.55);
  z-index: 0;
}

.government-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: 2rem 1rem;
}

/* Centre the heading in the Government section for a more balanced
   presentation.  The text remains left‑aligned for paragraphs to
   maintain readability. */
.government-content h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.government p {
  color: var(--color-accent);
}

/* About section */
.about-inner {
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}

.about-text {
  flex: 1 1 350px;
}

/* Centre the About section heading above its copy. */
.about-text h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.about-image-wrapper {
  flex: 1 1 350px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.about-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contact section */
.contact {
  background-color: var(--color-surface);
}

.contact-inner {
  /*
   * Centre the contact section contents regardless of screen size.  By
   * stacking the contact details and the decorative icon vertically
   * and aligning them centrally, the entire contact area feels more
   * cohesive and balanced.  Flexbox allows the section to adapt
   * gracefully on small screens without additional media queries.
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2rem;
}
  
.contact-content {
  /* Do not let the content stretch; centre all text within the contact
     section.  The width will shrink to fit the content, allowing the
     section to remain centred. */
  flex: 0 1 auto;
  text-align: center;
}

.contact-list {
  list-style: none;
  padding-left: 0;
  /* Centre the list within the contact content */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.contact-list li {
  margin-bottom: 0.75rem;
}

.contact-link {
  /* Display each contact line as a centred row with the icon and
     text aligned horizontally.  Inline‑flex allows the link to size
     itself based on its content rather than stretching the full
     width of the container. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-accent);
  transition: color 0.2s ease;
  font-weight: 500;
}

.contact-link:hover,
.contact-link:focus {
  color: var(--color-primary);
}

.contact-icon svg {
  width: 1rem;
  height: 1rem;
  fill: var(--color-primary);
}

.contact-text {
  white-space: nowrap;
}

/* Style the anchor within the contact text to match the muted tone and
   gently highlight on hover/focus. */
.contact-text a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.contact-text a:hover,
.contact-text a:focus {
  color: var(--color-accent);
  text-decoration: underline;
}

.contact-icon-graphic {
  /* Do not grow or shrink the graphic; centre it below the contact
     details when stacked. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-icon-graphic svg {
  width: 6rem;
  height: 6rem;
  fill: var(--color-primary);
  opacity: 0.15;
}

/* Social media links below the contact details */
.social-links {
  margin-top: 1.5rem;
  display: flex;
  gap: 1.5rem;
  /* Centre the social media icons horizontally within the contact
     section.  This pairs with the centred contact layout to create
     a cohesive and balanced footer. */
  justify-content: center;
  align-items: center;
}

.social-links a svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--color-primary);
  transition: transform 0.3s ease, fill 0.3s ease;
}

.social-links a:hover svg,
.social-links a:focus svg {
  fill: var(--color-accent);
  transform: translateY(-4px);
}

@media (max-width: 768px) {
  .contact-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact-icon-graphic {
    display: none;
  }
}

/* Scroll to top button */
.scroll-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
}

.scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top svg {
  width: 1rem;
  height: 1rem;
  fill: #ffffff;
}

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