/*
  Global Stylesheet for PLC TO GO automation landing and internal pages

  This stylesheet defines a modern, responsive layout using the
  colour palette extracted from the PLC TO GO logo. It imports
  Google Fonts for typography and establishes CSS variables
  for consistent theming across all pages. Sections such as the
  navigation bar, hero banners, content areas and footers share
  common styles to simplify maintenance and ensure visual harmony.
*/

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Montserrat:wght@600;700&display=swap');

/* Root variables for the colour palette */
:root {
  --primary-color: #2F80ED;       /* deep blue taken from the logo gradient */
  --secondary-color: #56CCF2;     /* light blue highlight */
  --dark-color: #3B4A66;          /* dark slate-blue for text */
  --light-color: #F5F9FF;         /* very light background for sections */
  --text-color: #3B4A66;          /* main body text colour */
  --accent-color: #56CCF2;        /* accent colour for buttons and links */
  --white: #ffffff;
}

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

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

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

a:hover {
  color: var(--secondary-color);
}

/* Navigation */
header {
  width: 100%;
  background: var(--white);
  border-bottom: 1px solid #e6e6e6;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: auto;
  padding: 0.8rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 40px;
  margin-right: 0.5rem;
}

.nav-logo span {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark-color);
}

nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin-left: 1.2rem;
}

nav ul li a {
  font-weight: 500;
  color: var(--dark-color);
  transition: color 0.3s ease;
}

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

/* Hamburger menu for mobile */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle span {
  height: 3px;
  width: 25px;
  background: var(--dark-color);
  margin: 4px 0;
  transition: 0.4s;
}

@media (max-width: 768px) {
  nav ul {
    position: absolute;
    top: 60px;
    right: 10px;
    background: var(--white);
    flex-direction: column;
    width: 200px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 1rem;
    display: none;
  }
  nav ul.active {
    display: flex;
  }
  nav ul li {
    margin: 0.5rem 0;
  }
  .menu-toggle {
    display: flex;
  }
}

/* Hero section */
.hero {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1rem;
  margin-top: 70px; /* account for fixed header */
  position: relative;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: var(--white);
  overflow: hidden;
}

.hero img.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.2;
}

.hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero .btn {
  display: inline-block;
  background: var(--white);
  color: var(--primary-color);
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}

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

/* Section general styles */
section {
  padding: 4rem 1rem;
  width: 100%;
}

.section-light {
  background: var(--light-color);
}

.section-title {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--dark-color);
}

.section-content {
  max-width: 1000px;
  margin: auto;
  text-align: center;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background: var(--white);
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--primary-color);
}

.card p {
  font-size: 0.95rem;
  color: var(--dark-color);
}

.card .card-btn {
  margin-top: 1.2rem;
  display: inline-block;
  background: var(--primary-color);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 500;
  transition: background 0.3s ease;
}

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

/* Content page sections */
.content-wrapper {
  max-width: 1000px;
  margin: auto;
  padding: 2rem 1rem;
}

.content-wrapper h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.content-wrapper p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Contact page */
.contact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: auto;
  padding: 2rem 1rem;
}

.contact-form {
  background: var(--light-color);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.contact-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

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

.contact-form button {
  background: var(--primary-color);
  color: var(--white);
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 30px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
}

.contact-form button:hover {
  background: var(--secondary-color);
}

.contact-info {
  padding: 2rem;
}

.contact-info h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.contact-info p {
  margin-bottom: 0.6rem;
  font-size: 1rem;
}

/* Footer */
footer {
  background: var(--dark-color);
  color: var(--white);
  text-align: center;
  padding: 1rem;
  margin-top: 3rem;
}

footer p {
  font-size: 0.9rem;
}