/* ========================================
   Hello Fresh — Homepage Stylesheet
   Discover fresh, high-quality food delivered fast to your door.
   ======================================== */

 /* ---------- Fonts ---------- */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inria+Serif:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap');

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

 /* ---------- Theme Variables ---------- */
 :root {
     --primary: #245C3A;
     --primary-light: #ffff;
     --bg: #FAF9F3;
     --surface: #FFFFFF;
     --text: #333B33;
     --text-muted: #6B746B;
     --accent: #E8B65A;
 }

 /* ---------- Reset and Base ---------- */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
     scroll-padding-top: 85px;
 }

 body {
     margin: 0;
     font-family: 'Inter', Helvetica, Arial, sans-serif;
     font-size: 15px;
     line-height: 1.6;
     color: var(--text);
     background: var(--primary-light);
 }

 img {
     display: block;
     max-width: 100%;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 button,
 input,
 select {
     font: inherit;
     -webkit-tap-highlight-color: transparent;
 }

 button:focus-visible,
 a:focus-visible,
 input:focus-visible,
 select:focus-visible {
     outline: 3px solid var(--ring);
     outline-offset: 3px;
 }

 h1,
 h2,
 h3,
 p {
     margin-top: 0;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Roboto', sans-serif;
     color: var(--primary);
 }

 h1 {
     font-size: clamp(2.25rem, 4vw, 3rem);
     font-weight: 500;
     line-height: 1.12;
 }

 h2 {
     font-size: clamp(1.4rem, 2.5vw, 2rem);
     font-weight: 600;
     line-height: 1.25;
     margin-bottom: 0.5rem;
 }

 h3 {
     font-size: clamp(1.4rem, 2.5vw, 2rem);
     font-weight: 600;
     line-height: 1.25;
     margin-bottom: 2.5rem;
 }

 h4 {
     font-size: clamp(1.4rem, 2.5vw, 2rem);
     font-weight: 600;
     line-height: 1.25;
     margin-bottom: 2.0rem;
 }

 p {
     color: var(--muted);
     margin-bottom: 0.75rem;
     font-weight: 500;
     margin-top: 0.75rem;
     font-size: 0.95rem;
 }

 span {
     font-family: 'Roboto', sans-serif;
 }

 /* ---------- Header ---------- */
 header {
     position: sticky;
     top: 0;
     z-index: 100;
     background: #245C3A;
     border-bottom: 1px solid var(--border);
     box-shadow: 0 2px 12px rgba(48, 35, 30, 0.04);
     color: var(--primary-light);
 }

 .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     min-height: 68px;
     color: var(--primary-light);
 }

 .brand {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
     font-family: "Inria Serif", Georgia, serif;
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--primary-light);
 }

 .brand:hover {
     color: var(--primary-dark);
 }

 .brand .logo {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     overflow: hidden;
 }

 .brand .logo img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }


 /* ---------- Desktop Navigation ---------- */
 #desktopNav {
     display: block;
 }

 #desktopNav ul {
     display: flex;
     align-items: center;
     gap: 12px;
     list-style: none;
     padding: 0;
     margin: 0;
 }

 #desktopNav a {
     display: block;
     padding: 10px 12px;
     border-radius: 8px;
     font-size: 1rem;
     color: var(--primary-light);
     transition: color 0.2s ease,
         background 0.2s ease;
 }

 #desktopNav a:hover,
 #desktopNav a:focus-visible {
     color: var(--primary-light);
     padding-top: 6px;
 }

 .nav-actions {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 /* ---------- Find Us Button ---------- */
 .find_us-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 42px;
     padding: 10px 20px;
     border: 1px solid var(--primary);
     border-radius: 24px;
     background: var(--primary);
     color: #FFFFFF;
     font-weight: 700;
     transition: background 0.2s ease,
         transform 0.2s ease;
 }

 .find_us-button:hover {
     background: var(--primary-dark);
     color: #FFFFFF;
     transform: translateY(-1px);
 }


 /* ---------- Mobile Menu Button ---------- */
 .hamburger {
     display: none;
     align-items: center;
     justify-content: center;
     width: 42px;
     height: 42px;
     border: 1px solid var(--border);
     border-radius: 8px;
     background: var(--surface);
     color: var(--primary);
     cursor: pointer;
     font-size: 21px;
 }


 /* ---------- Mobile Navigation ---------- */
 .mobile-menu {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     z-index: 100;
     flex-direction: column;
     padding: 10px 24px;
     background: var(--surface);
     border-bottom: 1px solid var(--border);
     box-shadow: var(--shadow);
 }

 .mobile-menu[hidden] {
     display: none !important;
 }

 .mobile-menu:not([hidden]) {
     display: flex;
 }

 .mobile-menu a {
     display: block;
     padding: 13px 8px;
     color: var(--text);
     border-bottom: 1px solid var(--border);
 }

 .mobile-menu a:last-child {
     border-bottom: 0;
 }

 .mobile-menu a:hover {
     color: var(--primary);
     background: rgba(76, 48, 40, 0.05);
 }

 /*-------- Hero Container ------*/

 .hero-content {
     position: relative;
     display: flex;
     align-items: center;
     min-height: 600px;
     padding: 60px 0;
     overflow: hidden;
     background-image: url("../img/hero_background.webp");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     color: #FFFFFF;
 }

 .hero-content h1 {
     font-size: clamp(2.5rem, 5vw, 4rem);
     font-weight: 700;
     color: #FFFFFF;
 }

 .hero-content p {
     font-size: 1.15rem;
     max-width: 600px;
 }


 /*------- About Us Section -----*/

 .grid {
     display: grid;
     gap: 10px;
     align-items: center;
     grid-template-columns: 2.0fr 1.0fr;
 }

 .card-portrait {
     width: 100%;
     height: 480px;
     background-image: url(../img/portrait.webp);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     border-radius: 20px;
 }

 .card {
     border: none !important;
 }

 /*------- Farm Section -----*/

 .farm-content {
     position: relative;
     display: flex;
     align-items: center;
     min-height: 600px;
     padding: 60px 0;
     overflow: hidden;
     background-image: url("../img/portrait_farm.webp");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     color: #FFFFFF;
 }

 .farm-content h1 {
     font-size: clamp(2.5rem, 5vw, 4rem);
     font-weight: 700;
     color: #FFFFFF;
 }

 .farm-content p {
     font-size: 1.15rem;
     max-width: 600px;
 }

 /* ==========================================
   LOCATION MAP 
   ========================================== */


 .map-container {
     overflow: hidden;
     border-radius: 12px;
 }

 .map-container iframe {
     display: block;
     width: 100%;
 }



 /* FOOTER */
 .site-footer {
     background-color: #245C3A;
     color: #f5eee4;
     padding: 32px 0 20px;
     font-family: 'Inter', sans-serif;
 }

 .footer-container {
     max-width: 1200px;
 }

 /* Top section */
 .footer-top {
     display: grid;
     grid-template-columns: 1.5fr 0.7fr 1fr;
     gap: 40px;
     padding-bottom: 28px;
     align-items: start;
 }

 /* Brand */
 .footer-logo {
     display: inline-block;
     color: #f5eee4;
     font-family: Georgia, serif;
     font-size: 25px;
     line-height: 0.95;
     text-decoration: none;
     letter-spacing: 1px;
     margin-bottom: 12px;
 }

 .footer-brand p {
     color: #d2c5b5;
     font-size: 13px;
     line-height: 1.6;
     margin: 0;
 }

 /* Navigation */
 .footer-nav {
     display: flex;
     flex-direction: column;
     gap: 7px;
 }

 .footer-nav a {
     color: #e7ddd0;
     font-size: 12px;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .footer-nav a:hover {
     color: #d9a66f;
 }

 /* Social media */
 .footer-social {
     border-left: 1px solid #FFFFFF;
     padding-left: 40px;
     min-height: 100px;
 }

 .footer-social h3 {
     font-size: 12px;
     font-weight: 500;
     margin: 0 0 18px;
 }

 .social-links {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .social-links a {
     display: inline-flex;
     color: #f5eee4;
     transition: color 0.2s ease,
         transform 0.2s ease;
 }

 .social-links a:hover {
     color: #d9a66f;
     transform: translateY(-2px);
 }

 /* Bottom section */
 .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     border-top: 1px solid #FFFFFF;
     padding-top: 18px;
 }

 .footer-bottom p {
     color: #b9aa99;
     font-size: 11px;
     margin: 0;
 }

 /* Responsive layout */
 @media (max-width: 601px) {
     .site-footer {
         padding: 28px 0 18px;
     }

     .footer-top {
         grid-template-columns: 1fr 1fr;
         gap: 28px 20px;
     }

     .footer-brand {
         grid-column: 1 / -1;
     }

     .footer-social {
         padding-left: 20px;
     }

     .footer-bottom {
         flex-direction: column;
         align-items: flex-start;
         gap: 10px;
     }
 }

 /* ---------- Tablet Layout ---------- */
 @media (max-width: 1020px) {
     :root {
         --container: 960px;
     }

     .hero-content {
         padding-inline: 64px;
     }

     .projects-grid {
         gap: 18px;
     }
 }


 /* ---------- Mobile Navigation and Layout ---------- */
 @media (max-width: 900px) {
     .nav {
         min-height: 64px;
     }

     #desktopNav {
         display: none;
     }

     .hamburger {
         display: inline-flex;
     }

     .nav-actions {
         gap: 8px;
     }

     .section_1 {
         min-height: 480px;
         background-position: center;
     }

     .hero-content {
         padding: 48px 32px;
     }

     .projects-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }


 /* ---------- Small Mobile Screens ---------- */
 @media (max-width: 601px) {

     .custom-width {
         width: 100% !important;
         margin: 10px !important;
     }

     .custom-margin {
         margin: 10px !important;
     }

     .card-portrait {
         margin-top: 20px !important;
     }

     .container {
         padding-inline: 18px;
     }

     .brand {
         gap: 7px;
         font-size: 1.1rem;
     }

     .brand .logo {
         width: 31px;
         height: 31px;
     }

     .find_us-button {
         display: none;
     }

     .hero-content {
         padding: 40px 18px;
     }

     .card-body {
         padding: 12px 2px 4px;
     }

     .card-body h2,
     .card-body h3 {
         font-size: 1.35rem;
     }

     .card-footer {
         font-size: 0.9rem;
     }
 }


 /* ---------- Reduced Motion Accessibility ---------- */
 @media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
         scroll-behavior: auto !important;
         transition-duration: 0.01ms !important;
         animation-duration: 0.01ms !important;
     }
 }