/* ==========================================================================
   瑞穗牧場 — 首頁樣式
   Static rebuild of the original home page layout. Loaded after site.css,
   which supplies the shared tokens, base styles and footer.
   Breakpoints follow the original layout: tablet ≤1024px, phone ≤767px.
   ========================================================================== */

:root {
  --home-accent:   #ae8762;   /* product headings and prices */
  --home-olive:    #807836;   /* 關於瑞穗牧場 */
  --home-sky:      #86cbf6;   /* social icon glyph */
  --home-hover:    #0015f3;   /* top menu hover */
  --home-active:   #003af1;   /* dropdown / icon hover */
  --home-menu:     #b0b6b6;   /* dropdown menus */
  --home-bar:      #9b805e;   /* footer address bar */
  --home-social:   #8bb0bf;   /* footer social icon */
}

body { background: #fff; }

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

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 30% 1fr;
  background: url(../images/index-bg03.webp) center top / cover no-repeat;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: url(../images/index-bg01.webp) center bottom / cover no-repeat;
  animation: fade-in-left 1.25s ease both;
}

.hero-logo {
  width: 100%;
  margin: 0;
  padding: 10% 5% 0;
}
.hero-logo img { max-width: 60%; margin: 0 auto; }

.hero-welcome { max-width: 81%; margin-top: 5%; }

.hero-text {
  margin: 0;
  padding: 0 10%;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.hero-fence { width: 100%; }

@keyframes fade-in-left {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-panel { animation: none; }
}

/* ---------- Top bar: menu + social icon --------------------------------- */

.hero-bar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 30%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(24px, 4vw, 80px);
  padding: 2.1vw 2.2vw 0 0;
}

.nav-toggle { display: none; }

.nav-list {
  display: flex;
  gap: clamp(20px, 2.5vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: block;
  padding: 10px 0;
  color: #fff;
  font-size: clamp(17px, 1.96vw - 3.1px, 22px);
  font-weight: 700;
  line-height: 24px;
  letter-spacing: .115em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-list a:hover, .nav-list a:focus-visible { color: var(--home-hover); }

.has-sub { position: relative; }
.has-sub > a::after {
  content: "";
  display: inline-block;
  margin-left: .45em;
  vertical-align: .2em;
  border: .3em solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 11em;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--home-menu);
}
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu { display: block; }

.nav-list .sub-menu a {
  padding: 13px 20px;
  color: #000;
  font-size: 15px;
  letter-spacing: .05em;
}
.nav-list .sub-menu a:hover,
.nav-list .sub-menu a:focus-visible { background: #fff; color: var(--home-active); }

.social-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--home-sky);
}
.social-icon:hover, .social-icon:focus-visible { color: var(--home-active); }
.social-icon svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Promo banner ------------------------------------------------ */

.promo img { width: 100%; }

/* ---------- Best sellers ------------------------------------------------ */

.best-sellers {
  padding: clamp(3rem, 10vw, 10rem) clamp(1rem, 2.7vw, 2.5rem) clamp(3rem, 7vw, 6.5rem);
}

.best-sellers h2 {
  margin: 0 0 clamp(1.5rem, 4.5vw, 4.25rem);
  color: var(--home-accent);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product { text-align: center; }
.product img { width: 100%; }

.product h3 {
  margin: 1.4em 0 0;
  color: var(--home-accent);
  font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
}

.product .price {
  margin: .9em 0 0;
  color: var(--home-accent);
  font-size: 1.25rem;
}

/* ---------- Ranch features ---------------------------------------------- */

.features {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 880px;
  padding: 0 10px clamp(2rem, 6vw, 5.5rem);
  background: url(../images/index-bg04.webp) center / cover no-repeat;
}

.features-box { width: 30%; color: #fff; }

.features h2 {
  margin: 0 0 20px;
  padding: 0 5% 20px 0;
  border-bottom: 2px solid #fff;
  text-align: center;
  font-size: clamp(1.5rem, 1.2rem + .9vw, 1.875rem);
  font-weight: 600;
  line-height: 1.3;
}

.features p,
.about p {
  margin: 0;
  font-size: clamp(1.05rem, .9rem + .45vw, 1.3rem);
}

.features p {
  padding: 5%;
  background: rgba(128, 120, 54, .61);
}

/* ---------- About ------------------------------------------------------- */

.about {
  display: flex;
  align-items: center;
  min-height: clamp(400px, 39vw, 580px);
  padding-block: 2.5rem;
  background: url(../images/index-bg05.webp) left center / cover no-repeat;
}

.about-text {
  width: 50%;
  padding: 0 clamp(1rem, 2.7vw, 2.5rem);
  color: var(--home-olive);
}

.about h2 {
  margin: 0 0 .75em;
  font-size: clamp(1.5rem, 1.2rem + .9vw, 1.875rem);
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- Footer ------------------------------------------------------ */

.foot-social {
  display: flex;
  justify-content: center;
  padding: 6% 10% 2%;
}
.foot-social .social-icon { background: var(--home-social); color: #fff; }
.foot-social .social-icon:hover,
.foot-social .social-icon:focus-visible { color: var(--home-active); }

.foot-bar {
  margin: 0;
  padding: 2% 5%;
  background: var(--home-bar);
  color: #fff;
  text-align: center;
  font-size: clamp(1rem, .8rem + .6vw, 1.25rem);
  letter-spacing: clamp(2px, .35vw, 5px);
  line-height: 1.5;
}

.site-foot { text-align: center; }
.site-foot .foot-links { justify-content: center; }

/* ---------- Tablet ------------------------------------------------------ */

@media (max-width: 1024px) {
  .hero { grid-template-columns: 55% 1fr; }

  /* Menu collapses behind a toggle, top right of the hero */
  .hero-bar { left: 0; gap: 6px; padding: 12px 10px; }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }
  .nav-toggle svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
  .nav-toggle .icon-close,
  .nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--home-menu);
  }
  .nav-list.is-open { display: flex; }

  .nav-list a {
    padding: 14px 20px;
    color: #000;
    font-size: 16px;
    letter-spacing: .1em;
    text-align: center;
  }
  .nav-list a:hover, .nav-list a:focus-visible { background: #fff; color: var(--home-active); }

  /* Store links are listed in full inside the open menu */
  .has-sub > a::after { display: none; }
  .sub-menu { display: block; position: static; min-width: 0; background: rgba(255, 255, 255, .35); }
  .nav-list .sub-menu a { text-align: center; }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .features { min-height: 700px; }
  .features-box { width: 70%; }

  .about { background-position: center bottom; }
}

/* ---------- Phone ------------------------------------------------------- */

@media (max-width: 767px) {
  .hero { grid-template-columns: 1fr; }

  /* Burger on the left, social icon on the right, above the logo */
  .hero-bar { justify-content: space-between; padding: 6px 10px; }
  .hero-panel { padding-top: 56px; }

  .product-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  .features { min-height: 500px; }
  .features-box { width: 100%; }

  .about { background-position: center; }
  .about-text { width: 100%; }

  .foot-social { display: none; }
}