/* ----------------------------
  Bulk Oil Source — style.css
  Use: assets/css/style.css
-----------------------------*/

/* ==== DESIGN TOKENS ==== */
:root{
  --green: #818F59;
  --soft-white: #FAF7F0;
  --text: #1B1B1B;
  --gold: #D8B46A;
  --muted: #9e9a8f;
  --white: #ffffff;
  --radius: 12px;
  --max-width: 1100px;
  --ease: cubic-bezier(.2,.9,.3,1);
}

/* ==== BASE ==== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}

/* helper containers */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1.5rem;
}

/* ==== NAV ==== */
.nav-wrapper{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
  background:transparent;
  height: 80px;
}

/* solid background when scrolled */
.nav-wrapper.scrolled{
  background: var(--soft-white);
  box-shadow: 0 6px 18px rgba(27,27,27,0.06);
}

/* Nav buttons when scrolled (solid background) */
.nav-wrapper.scrolled .nav-btn {
  color: var(--text);
  background: transparent;
  border: 2px solid rgba(27,27,27,0.06);
}

/* Optional: hover effect when scrolled */
.nav-wrapper.scrolled .nav-btn:hover {
  border-color: var(--green); /* subtle green accent on hover */
  color: var(--green);
}

.nav-wrapper.scrolled .hamburger span {
  background: var(--text); /* make hamburger lines visible */
}

/* Mobile nav hidden by default on small screens */
.nav-right.open {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: absolute;
  top: 100%;
  right: 1.5rem;
  background: var(--soft-white);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(27,27,27,0.1);
}

/* Make nav buttons visible in mobile menu */
.nav-right.open .nav-btn {
  color: var(--text);
  border: 1px solid rgba(27,27,27,0.06);
}
/* Hamburger active state - transform bars into X */

.nav-left {
  position: relative;
  width: 170px; /* or whatever width you want the logo area to be */
  height:100%;
  display: flex;
  align-items: center;  /* this centers the logo vertically within the header */
}


/* logo */
.logo{
position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: contain;   /* keeps proportions */
  object-position: left center;
  ransition: opacity .3s ease;
}
.logo-green {
  opacity: 0;
  height:110%;
  position: absolute;
  display: block;
  object-fit: contain;  
  inset: 0;
  object-position: left center;
  padding-left: 10px;
}
.logo-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;

}
.scrolled .logo-white {
  opacity: 0;
}

.scrolled .logo-green {
  opacity: 1;
}

@font-face {
  font-family: 'QuincyCF';
  src: url('../fonts/quincy-bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
h1, h2 { font-family: 'QuincyCF', 'Playfair Display', serif; }

/* nav buttons */
.nav-right{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.nav-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.15);
  color:var(--white);
  padding:.5rem .85rem;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:all .25s var(--ease);
}
.nav-btn:hover{ transform:translateY(-2px) }

/* after scroll nav button colors */
.nav.scrolled .nav-btn{
  color:var(--text);
  background:transparent;
  border:1px solid rgba(27,27,27,0.06);
}

/* hamburger (mobile) */
.hamburger{
  display:none;
  background:transparent;
  border:none;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  margin-right: 8px;
}
.hamburger span{ 
  display:block; 
  width:26px; 
  height:2px; 
  background:var(--white); 
  margin:4px 0; 
  transition:all .25s ease}
  
.nav.scrolled .hamburger span{ background:var(--text); }
/* Transform hamburger into X when active */
.hamburger.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}


/* ==== HERO ==== */
.hero{
  min-height:92vh;
  display:flex;
  align-items:center; /* change to flex-start to push top if desired */
  justify-content:center;
  text-align:center;
  padding-top:70px; /* allow nav spacing */
  background:
    linear-gradient(rgba(0,0,0,0.24), rgba(0,0,0,0.24)),
    url('../images/hero-grove.jpg') center/cover no-repeat;
  color:var(--white);
  position:relative;
}

/* hero content container */
.hero-inner{ width:100% }
.hero-content{
  max-width:780px;
  margin:0 auto;
  padding:2rem;
}

.hero-title{
  font-family: 'QuincyCF', serif;
  font-weight:600;
  font-size:clamp(2rem, 4.5vw, 3rem);
  margin-top: 0;
  margin-bottom: 20%;
  letter-spacing:.6px;
  line-height:1.05;
}
.hero-sub{
  color:rgba(255,255,255,0.95);
  font-size:1.1rem;
  margin-top:0.5rem;
}

/* subtle hero overlay gold accent line */
.hero::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:30px;
  width:60px;
  height:3px;
  background: linear-gradient(90deg, rgba(216,180,106,0.95), rgba(216,180,106,0.6));
  border-radius:3px;
  opacity:.9;
}

/* ==== ABOUT ==== */
.about{
  background:var(--soft-white);
  color:var(--text);
  padding:5em 0;
}
.about-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:2.25rem;
  align-items:center;
}
.about-text h2{ font-size:2.5rem; margin-top: 0; margin-bottom:1.5rem;}
.highlight{ font-weight:600; color:var(--green); margin-top:.6rem;}

/* images column */
.about-images{ display:flex; flex-direction:column; gap:1rem; }
.img-rounded{ width:100%; max-width: 400px; margin: 0 auto; border-radius:10px; box-shadow: 0 10px 30px rgba(27,27,27,0.06); object-fit:cover; }

/* smaller secondary image 
.img-rounded.small{ height:150px; object-fit:cover; }*/

/* ==== PRODUCTS ==== */
.products{ padding:5em 0; background:var(--white); }
h2.product-text { font-size:2.5rem; margin-top: 0; margin-bottom:1.5rem;}

.products-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
  margin-top:2.5rem;
  margin-bottom:2.5rem;
}
.product-card{
  text-align:right;
  padding:1.25rem;
  border-radius:12px;
  background-color: var(--soft-white);
  border-right: 0.2rem solid var(--gold);
  border-bottom:0.2rem solid var(--gold);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.product-card:hover{ transform:translateY(-8px); box-shadow:0 18px 40px rgba(27,27,27,0.06);}
.product-img{ 
  width:100%; height:160px; object-fit:cover; border-radius:8px; margin-bottom:.75rem;  filter: contrast(1.05) saturate(0.85) brightness(0.95);}

/* muted small */
.muted{ color:var(--muted); }
.small{ font-size:.95rem; }



#olive-icon{
  width: 80px;
  display: block;
  margin: 1.5rem auto 0;
}


/* === IMAGE BREAK (PARALLAX) === */
.image-break {
  width: 100%;
  height: 45vh;               /* nice visual height without being overwhelming */
  background-image: url('../images/parallax.jpg'); /* update path Photo by <a href="https://unsplash.com/@kmorfiris?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kostas Morfiris</a> on <a href="https://unsplash.com/photos/a-hill-covered-in-lots-of-trees-on-top-of-a-hill-v8NbNY5OSbY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
       */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Parallax effect — desktop only */
  background-attachment: fixed;

  /* slight dark overlay for contrast if you add text later */
  position: relative;
}

.image-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);  /* soft overlay; adjust as needed */
}


/* ==== CONTACT (green background) ==== */
.contact{
  background:var(--green);
  color:var(--white);
  padding:80px 0;
}
.contact-inner{ max-width:900px; margin:0 auto; text-align:left; }
.contact h2{ color:var(--white); margin-top:0; margin-bottom:1rem; font-size:2.5rem; }
.contact .muted{ color:rgba(255,255,255,0.9); margin-bottom:1rem;}

/* form */
.contact-form{ background:transparent; margin-top:1rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.form-grid label{ display:block; font-size:.95rem; color:rgba(255,255,255,0.95); }
.form-grid .full{ grid-column:1 / -1; }

input, textarea{
  width:100%;
  background-color:var(--soft-white);
  padding:.85rem .9rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background-color: var(--soft-white);
  color:var(--text);
  resize:vertical;
  font-size:1rem;
  font-family:inherit;
}
input::placeholder, textarea::placeholder{ font-family:inherit !important ; color:var(--muted); }

#form-status{color:var(--text);}

.form-actions{ margin-top:1rem; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap;justify-content: flex-end;}
.btn{
  display:inline-block;
  padding:.75rem 1.05rem;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:all .22s var(--ease);
  text-decoration:none;
  text-align:center;
}
.btn.primary{ background:var(--white); color:var(--green); border:2px solid transparent; font-size: 1rem;}
.btn.primary:hover{ background:var(--gold); color:var(--white); border-color:rgba(255,255,255,0.15); box-shadow:0 8px 20px rgba(0,0,0,0.08); }
.btn.outline{ background:transparent; color:var(--white); border:2px solid rgba(255,255,255,0.12); font-size: 1rem; }
.btn.outline:hover{ border-color:var(--gold); box-shadow:0 10px 30px rgba(216,180,106,0.08); }

/* small note */
.form-note{ text-align:right;.75rem; color:rgba(255,255,255,0.9); }
.email-address{color:var(--gold)}
/* footer */
.site-footer{ background:#fbfaf7; padding:2rem 0; text-align:center; color:var(--muted); }

/* ==== ANIMATIONS ==== */
.fade-in{ opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s ease; }
.fade-in.visible{ opacity:1; transform:translateY(0); }

/* ==== RESPONSIVE ==== */
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .products-grid{ grid-template-columns: 1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .nav-right {
    display: none;          /* hidden by default */
    flex-direction: column; 
    gap: 1rem;
    position: absolute;
    top: 100%;
    right: 1.5rem;
    background: var(--soft-white);
    padding: 1rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(27,27,27,0.1);
    
  }
 .image-break {
    background-attachment: scroll;
    height: 30vh;}
  .nav-right.open {display: flex;}
  .hamburger{display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer; }
  .logo{ width:150px; }

}

@media (max-width: 600px){
  .products-grid{ grid-template-columns: 1fr; }
  .hero{ padding-top:88px; }
  .logo{ width:140px; }
}