/*
  Global Stylesheet for Tamiru Import & Export

  This file defines the colour palette, typography, layout grids and
  responsive rules used across the site.  Variables at the top make it
  straightforward to adjust the look and feel in a single place.  The
  design emphasises high contrast for readability, semantic structure and
  accessibility.  Comments are included to explain key sections.
*/

/* CSS Reset – remove default margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Theme variables */
:root {
  --primary-colour: #4caf50; /* vibrant green representing growth */
  --secondary-colour: #c49b4d; /* warm gold reflecting Ethiopian heritage */
  --accent-colour: #8d6e63; /* earthy brown for coffee tones */
  --dark-colour: #1f1f1f; /* dark background for contrast */
  --light-colour: #fafaf9; /* light background for body text */
  --font-family: 'Montserrat', Arial, sans-serif;
  --max-width: 1200px; /* maximum width for centered containers */
  --transition: 0.3s ease;
}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--dark-colour);
  background-color: var(--light-colour);
}

/* Utility container to constrain content width */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Skip link – becomes visible when focused */
.skip-link {
  position: absolute;
  left: -999px;
  top: -999px;
  background: var(--primary-colour);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100;
  text-decoration: none;
  transition: var(--transition);
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* Header styles */
header {
  background-color: var(--dark-colour);
  color: #fff;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

/* Logo styles
   The logo consists of an icon and text arranged horizontally.  The
   flexbox layout aligns the items centrally and adds a small gap.
   When visited, the colour remains consistent to avoid unexpected
   link colouring. */
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.logo-image {
  width: 2rem; /* roughly 32px */
  height: auto;
}
.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

/* Ensure the logo doesn’t inherit link colours */
.logo:visited .logo-text {
  color: #fff;
}

/* Navigation menu */
.nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0;
  outline-offset: 4px;
}
.nav a:hover,
.nav a:focus {
  color: var(--secondary-colour);
}
.nav a.active {
  color: var(--primary-colour);
}

/* Hamburger button for mobile navigation */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
}
.nav-toggle .hamburger {
  display: block;
  width: 1.5rem;
  height: 0.15rem;
  background: #fff;
  position: relative;
  transition: var(--transition);
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 1.5rem;
  height: 0.15rem;
  background: #fff;
  transition: var(--transition);
}
.nav-toggle .hamburger::before {
  top: -0.4rem;
}
.nav-toggle .hamburger::after {
  bottom: -0.4rem;
}

/* Open state for the hamburger to transform into an X */
.nav-toggle[aria-expanded='true'] .hamburger {
  background: transparent;
}
.nav-toggle[aria-expanded='true'] .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .hamburger::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* Hide the navigation menu on small screens by default */
.nav {
  display: flex;
}

@media (max-width: 768px) {
  .nav ul {
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
  }
  .nav {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--dark-colour);
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .nav.open {
    max-height: 400px; /* large enough to contain all items */
  }
  .nav-toggle {
    display: block;
  }
  .nav ul li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Hero section */
.hero {
  position: relative;
  height: 80vh;
  min-height: 25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url('../images/hero.jpg');
  background-size: cover;
  background-position: center;
}

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

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
  border: 2px solid transparent;
}
.btn-primary {
  background-color: var(--primary-colour);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #3c8b40;
}

.btn-secondary {
  background-color: var(--secondary-colour);
  color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #b3863b;
}

/* Features section */
.features {
  padding: 4rem 0;
  background: var(--light-colour);
}
.features h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--dark-colour);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.feature {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature:hover,
.feature:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.icon-wrapper {
  margin-bottom: 1rem;
  color: var(--primary-colour);
}
.feature h3 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  color: var(--accent-colour);
}
.feature p {
  font-size: 0.95rem;
  color: var(--dark-colour);
}

/* Call to action section */
.call-to-action {
  background: var(--primary-colour);
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
}
.call-to-action h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.call-to-action p {
  margin-bottom: 1.5rem;
}

/* Footer */
footer {
  background: var(--dark-colour);
  color: #ccc;
  margin-top: 3rem;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 3rem 0;
}
footer h3 {
  margin-bottom: 0.75rem;
  color: #fff;
  font-size: 1.2rem;
}
footer a {
  color: var(--secondary-colour);
  text-decoration: none;
}
footer a:hover,
footer a:focus {
  text-decoration: underline;
}
.footer-bottom {
  text-align: center;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #888;
}

/* Global typography adjustments */
h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.3;
}
p {
  margin-bottom: 1rem;
}

/* Page header for inner pages */
.page-header {
  background: var(--accent-colour);
  color: #fff;
  text-align: center;
  padding: 4rem 1rem 2rem;
}
.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.page-header p {
  font-size: 1.1rem;
}

/* Content sections on inner pages */
.content-section {
  padding: 3rem 0;
  background: var(--light-colour);
}
.content-section:nth-of-type(even) {
  background: #fff;
}

.content-section h2 {
  margin-bottom: 1rem;
  font-size: 1.75rem;
  color: var(--accent-colour);
}
.content-section p {
  max-width: 800px;
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* Product grid for products page */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.product-category h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--accent-colour);
}
.product-category ul {
  list-style: disc inside;
  padding-left: 1rem;
}
.product-category p {
  font-size: 0.95rem;
}

/* Contact page grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  align-items: start;
}
.contact-info h2 {
  margin-bottom: 1rem;
  font-size: 1.75rem;
  color: var(--accent-colour);
}
.contact-list {
  list-style: none;
  margin-top: 1rem;
  padding-left: 0;
}
.contact-list li {
  margin-bottom: 0.5rem;
}
.contact-list a {
  color: var(--primary-colour);
}

/* Contact form styling */
.contact-form-wrapper h2 {
  margin-bottom: 1rem;
  font-size: 1.75rem;
  color: var(--accent-colour);
}
.contact-form {
  width: 100%;
}
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--dark-colour);
  background-color: #fff;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary-colour);
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}
.contact-form button[type='submit'] {
  margin-top: 0.5rem;
}

/* Gallery styles */
.gallery-item {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.gallery-image-wrapper {
  flex: 1 1 300px;
}
.gallery-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.gallery-details {
  flex: 1 1 300px;
  min-width: 250px;
}
.gallery-details h2 {
  margin-bottom: 1rem;
  font-size: 1.75rem;
  color: var(--accent-colour);
}
.gallery-details h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--primary-colour);
}
.gallery-details ul {
  list-style: disc inside;
  padding-left: 1rem;
}

/*
  New responsive gallery grid for multiple images

  The gallery-grid layout uses CSS Grid to display a collection of images
  in a flexible, responsive arrangement. Each image scales to the
  available column width while preserving its aspect ratio and includes
  rounded corners and a subtle shadow. The grid automatically adjusts
  the number of columns based on screen size, ensuring that the images
  look good on phones, tablets and desktops.
*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.gallery-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: block;
}

@media (max-width: 768px) {
  .gallery-item {
    flex-direction: column;
  }
}

/* Accessibility: Focus styles */
a:focus,
button:focus {
  outline: 2px dotted var(--secondary-colour);
  outline-offset: 2px;
}