/*
  Scholarly Routes Website Stylesheet

  This stylesheet defines the global styles and component-level rules
  for the Scholarly Routes website. The design draws inspiration
  from modern Bootstrap‑based education templates, using a bold
  primary colour, generous white space, and clear typographic hierarchy.

  Colours are defined as CSS variables at the top of the file for
  easy customisation. The site is responsive and includes
  breakpoints for tablets and mobile screens.
*/

:root {
  /* Brand colours */
  --primary: #004f9f;        /* deep blue for headings and buttons */
  --primary-light: #e8f0fe; /* subtle light blue backgrounds */
  --secondary: #f5f8fd;     /* off‑white background */
  --accent: #0c9;           /* teal accent used for highlights */
  --text-dark: #203864;     /* dark blue for body text */
  --text-light: #6b7b95;    /* muted text */
  --white: #ffffff;
  --shadow: rgba(0, 0, 0, 0.08);
  --radius: 0.5rem;
}

/* Global resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--secondary);
}

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

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

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white);
  box-shadow: 0 2px 4px var(--shadow);
  z-index: 1000;
}

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

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

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

.menu li {
  position: relative;
}

.menu a {
  font-weight: 500;
  padding: 0.5rem;
}

/* Mobile menu button */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--primary);
  cursor: pointer;
}

/* Hero section */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding-top: 4rem; /* account for fixed nav */
  background-size: cover;
  background-position: center;
  color: var(--white);
  text-align: center;
  position: relative;
}

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

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

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  color: var(--white);
}

.hero p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  color: var(--white);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  background-color: var(--primary);
  color: var(--white);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

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

/* Sections */
.section {
  padding: 4rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

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

.section p.lead {
  font-size: 1.125rem;
  margin-bottom: 3rem;
  color: var(--text-light);
}

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

.card {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 4px 8px var(--shadow);
  padding: 2rem 1.5rem;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 12px var(--shadow);
}

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

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

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

/* About section */
.about {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.about img {
  flex: 1 1 350px;
  max-width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 4px 8px var(--shadow);
}

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

.about-content h2 {
  margin-top: 0;
}

/* Contact form */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-dark);
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1dce5;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 1rem;
  font-family: inherit;
}

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

.contact-info {
  margin-top: 2rem;
  text-align: center;
  color: var(--text-light);
}

/* Footer */
footer {
  background-color: var(--primary);
  color: var(--white);
  padding: 2rem 1rem;
  text-align: center;
}

footer p {
  margin: 0.5rem 0;
  font-size: 0.875rem;
}

/* Responsive styles */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .about {
    flex-direction: column;
  }
  .menu {
    position: absolute;
    top: 64px;
    right: 0;
    background-color: var(--white);
    flex-direction: column;
    align-items: flex-start;
    width: 200px;
    padding: 1rem;
    border-radius: 0 0 0 var(--radius);
    box-shadow: 0 4px 8px var(--shadow);
    transform: translateX(110%);
    transition: transform 0.3s ease;
  }
  .menu.open {
    transform: translateX(0);
  }
  .menu-toggle {
    display: block;
  }
}