/*
  Stylesheet for Daily Foodzz static website
  This file defines the typography, layout and colour palette used across
  all pages. The design is inspired by the original Daily Foodzz site but
  implemented from scratch.
*/

/* CSS Reset and global variables */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background-color: var(--light-gray);
  color: var(--text-dark);
  line-height: 1.6;
}

:root {
  --primary-red: #d0272c;
  --secondary-dark: #062e51;
  --accent-green: #0ead69;
  --light-gray: #f9f9f9;
  --text-dark: #333;
  --card-bg: #ffffff;
  --border-radius: 8px;
}

/* Top bar */
.top-bar {
  background-color: var(--primary-red);
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 1rem;
}

.top-bar .contact-info span + span {
  margin-left: 1rem;
}

.top-bar .descriptor {
  font-weight: 500;
}

/* Navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Style for the logo image in the navbar */
.navbar .logo img {
  height: 48px;
  width: auto;
  display: block;
}

.navbar .logo h1 {
  font-size: 1.6rem;
  color: var(--primary-red);
  font-weight: 700;
}

.navbar nav ul {
  list-style: none;
  display: flex;
  align-items: center;
}

.navbar nav ul li {
  margin: 0 1rem;
}

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

.navbar nav ul li a:hover,
.navbar nav ul li a.active {
  color: var(--primary-red);
}

.navbar .get-quote {
  background-color: var(--primary-red);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.navbar .get-quote:hover {
  background-color: #b71c1c;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  margin-right: 0.5rem;
}

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

.btn-red:hover {
  background-color: #b71c1c;
}

.btn-green {
  background-color: var(--accent-green);
  color: #fff;
}

.btn-green:hover {
  background-color: #0a8a54;
}

/* Hero */
.hero {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 0 2rem;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-content h1 .accent {
  color: var(--accent-green);
}

.hero-content p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

/* Categories */
.categories {
  padding: 4rem 2rem;
  background-color: #fff;
  text-align: center;
}

.section-title {
  font-size: 2rem;
  color: var(--secondary-dark);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 2rem;
}

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

.category-card {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius);
  overflow: hidden;
  color: #fff;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.category-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.category-card h3 {
  position: relative;
  z-index: 1;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  text-align: left;
}

.category-card p {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
  text-align: left;
}

.category-card .view-link {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.category-card .view-link:hover {
  text-decoration: underline;
}

/* Colourful gradients for cards without images */
.gradient-snacks {
  background-image: linear-gradient(135deg, #ffe082, #ff7043);
}
.gradient-vegetables {
  background-image: linear-gradient(135deg, #a5d6a7, #66bb6a);
}
.gradient-canned {
  background-image: linear-gradient(135deg, #80deea, #26c6da);
}
.gradient-gravies {
  background-image: linear-gradient(135deg, #ffab91, #ff7043);
}

/* Additional gradients for new categories */
.gradient-wraps {
  /* warm orange palette for wraps */
  background-image: linear-gradient(135deg, #ffcc80, #fb8c00);
}
.gradient-canned-rte {
  /* soft purple palette for canned ready‑to‑eat meals */
  background-image: linear-gradient(135deg, #b39ddb, #9575cd);
}

/* Features */
.features {
  padding: 4rem 2rem;
  background-color: var(--light-gray);
}

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

.feature-card {
  background-color: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  text-align: left;
}

.feature-card .icon {
  font-size: 1.6rem;
  color: var(--primary-red);
  margin-bottom: 0.8rem;
}

.feature-card h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-dark);
}

.feature-card p {
  font-size: 0.9rem;
  color: #666;
}

/* Call to Action */
.cta {
  background-color: var(--primary-red);
  color: #fff;
  padding: 4rem 2rem;
  text-align: center;
}

.cta h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.cta p {
  font-size: 1rem;
  margin-bottom: 2rem;
}

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

.cta-card {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem 1.5rem;
  border-radius: var(--border-radius);
  text-align: center;
}

.cta-card i {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  color: #fff;
}

.cta-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.cta-card p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.cta-card .response {
  font-size: 0.8rem;
  color: #ffe082;
}

.contact-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: var(--border-radius);
  max-width: 700px;
  margin: 0 auto;
}

.contact-bar .contact-item {
  font-size: 1rem;
}

.contact-bar .contact-text {
  font-size: 0.9rem;
  color: #ffe082;
}

/* Footer */
footer {
  background-color: var(--secondary-dark);
  color: #fff;
  padding: 3rem 2rem 1.5rem;
}

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

.footer-col h3,
.footer-col h4 {
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col ul li a {
  color: #b0c4de;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-col ul li a:hover {
  color: #fff;
}

.footer-col .social-links a {
  margin-right: 0.5rem;
  font-size: 1.2rem;
  color: #b0c4de;
  transition: color 0.3s ease;
}

.footer-col .social-links a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.footer-bottom .certs span {
  margin-left: 1rem;
}

/* Page banner for secondary pages */
.page-banner {
  position: relative;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}

.page-banner .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.6)
  );
  z-index: 1;
}

.page-banner .banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-banner .banner-content {
  position: relative;
  z-index: 2;
  padding: 0 2rem;
}

.page-banner .banner-content h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.page-banner .banner-content p {
  font-size: 1rem;
  max-width: 700px;
  margin: 0 auto;
}

/* Generic container wrapper for page content */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.container h2 {
  font-size: 1.8rem;
  color: var(--secondary-dark);
  margin-bottom: 1rem;
}

.container p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1.2rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   Product card enhancements

   To make the product listings more engaging, each feature card can
   optionally display an image at the top.  When images are present
   they will span the full width of the card, maintain a consistent
   height and crop via object-fit: cover to preserve their aspect
   ratio.  Cards gently float up on hover and cast a deeper shadow
   for a tactile feel.  All cards animate into view on page load
   using a simple fade‑in/translate animation.
   ------------------------------------------------------------------ */

.feature-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--border-radius);
  margin-bottom: 0.8rem;
}

.feature-card {
  /* preserve existing styling */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 0.6s ease forwards;
}

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

/* Keyframes for fade/slide in on load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply the animation to hero and page banners */
.hero-content, .page-banner .banner-content {
  animation: fadeInUp 1s ease forwards;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .navbar nav ul {
    display: none; /* hide nav list on mobile */
  }
  .navbar .get-quote {
    display: none;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
}