/*
  West Texas Notaries Stylesheet

  This stylesheet defines the visual language for the West Texas
  Notaries website. It uses a modern, mobile‑first layout with
  responsive design patterns. Colors and typography reflect the
  professional, friendly tone of the brand and are derived from
  the user’s selected logo palette (deep navy and teal tones).

  Author: AI assistant for user Juan
  Date: July 2025
*/

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

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

/* CSS variables for easy theme adjustment */
:root {
  --primary-color: #022c43; /* deep navy */
  --secondary-color: #006d77; /* dark teal */
  --accent-color: #2cbba7; /* lighter teal accent */
  --light-bg: #f6f9fc; /* light section backgrounds */
  --text-color: #102a43; /* dark bluish grey for readability */
  --card-bg: #ffffff; /* card backgrounds */
  --border-radius: 8px;
  --max-width: 1200px;
  --transition-speed: 0.3s;
}

/* Typography */
h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2.4rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.4rem;
}

p {
  margin-bottom: 1em;
  font-size: 1rem;
  color: var(--text-color);
}

/* Utility classes */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 0;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--accent-color);
  color: #fff;
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: background-color var(--transition-speed);
}

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

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

.section-dark {
  background-color: var(--primary-color);
  color: #fff;
}

.text-center {
  text-align: center;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.gap {
  gap: 1.5rem;
}

/* Header styles */
header {
  background-color: var(--primary-color);
  color: #fff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
}

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

nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-speed);
}

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

.nav-toggle {
  display: none;
}

/* Hero section */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  color: #fff;
  text-align: center;
  background: url('../images/hero-bg.png') center/cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(2,44,67,0.7), rgba(0,109,119,0.7));
  z-index: 0;
}

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

.hero-content h1 {
  font-size: 2.6rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #fff;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #e1ecf5;
}

/* Services section */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
}

.service-card .icon {
  font-size: 2.5rem;
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

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

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

.service-card .btn {
  margin-top: 1rem;
}

/* Testimonials */
.testimonials {
  background-color: var(--light-bg);
  padding: 4rem 0;
}

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

.testimonial {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  position: relative;
}

.testimonial::before {
  content: '“';
  font-size: 3rem;
  position: absolute;
  top: -20px;
  left: 20px;
  color: var(--accent-color);
}

.testimonial p {
  font-style: italic;
  margin-bottom: 1.5rem;
}

.testimonial span {
  font-weight: 600;
  color: var(--secondary-color);
}

/* Footer */
footer {
  background-color: var(--primary-color);
  color: #fff;
  padding: 2rem 0;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

footer h4 {
  color: #fff;
  margin-bottom: 1rem;
}

footer ul {
  list-style: none;
  padding: 0;
}

footer li {
  margin-bottom: 0.5rem;
}

footer a {
  color: #e1ecf5;
  text-decoration: none;
  transition: color var(--transition-speed);
}

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

.footer-bottom {
  text-align: center;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
  color: #cbd5e0;
}

/* Contact form styles */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  padding: 0.75rem;
  border: 1px solid #ccd6dd;
  border-radius: var(--border-radius);
  font-size: 1rem;
  width: 100%;
}

input[type="submit"],
button[type="submit"] {
  align-self: flex-start;
  cursor: pointer;
}

/* Responsive nav toggle for small screens */
@media (max-width: 768px) {
  nav ul {
    display: none;
    flex-direction: column;
    background-color: var(--primary-color);
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  nav ul.open {
    display: flex;
  }
  .nav-toggle {
    display: block;
    cursor: pointer;
    font-size: 1.5rem;
    color: #fff;
  }
}