/* =========================================================
   まえばら農園 共通CSS
   用途：
   - サイト全体のヘッダー
   - サイト全体の共通ボタン
   - サイト全体のフッター
   - サイト全体の季節演出
   ※ 既存カスタマイザーCSSは削除しない
========================================================= */

/* ======================================
  どこで何をするCSSか
  サイト全体：ヘッダーの重なり順調整
====================================== */
#header.ct-header {
  z-index: 10000 !important;
  position: relative;
}

/* ---------------------------------------------------------
  どこで何をするCSSか
  サイト全体：ヘッダー共通デザイン
--------------------------------------------------------- */
#header.ct-header,
.ct-sticky-container,
[data-sticky],
[data-row],
.ct-container-fluid,
[data-column],
.ct-header [data-device="mobile"] [data-row="middle"] {
  background-color: #2d361c !important;
  background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png") !important;
  border-color: #c0a24a !important;
}

[data-transparent-row="yes"] {
  background-color: transparent !important;
}

#header.ct-header .ct-menu-link,
.ct-header-cart .ct-amount,
.ct-header [data-device="mobile"] .ct-icon-container,
.ct-header [data-device="mobile"] .ct-header-search,
.ct-header [data-device="mobile"] .ct-header-trigger {
  color: #f8f4e6 !important;
  letter-spacing: 0.15em !important;
}

body #header.ct-header,
body [data-sticky],
.ct-header [data-device="mobile"] {
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(to right, #b8860b, #e6b422, #ffd700, #e6b422, #b8860b) 1 !important;
  box-shadow: 0 2px 15px rgba(212, 175, 55, 0.3);
}

#header-menu-2 .ct-menu-link i,
.ct-header-cart svg {
  color: #e6b422 !important;
  fill: #e6b422 !important;
  filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.ct-menu-link:hover,
#header-menu-2 .ct-menu-link:hover i,
.ct-header-cart:hover svg,
.ct-header-cart:hover .ct-amount,
.ct-header-search:hover .ct-icon,
.ct-header-trigger:hover .ct-icon {
  color: #ffd700 !important;
  fill: #ffd700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.7) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

.ct-dynamic-count-cart {
  background: linear-gradient(135deg, #ffd700, #b8860b) !important;
  color: #2d361c !important;
  border: 1px solid #f8f4e6 !important;
  font-weight: bold !important;
}

.ct-search-results .ct-search-item > span:last-child {
  color: #f8f4e6 !important;
}

/* ---------------------------------------------------------
  どこで何をするCSSか
  サイト全体：ヘッダー演出（舞い散る金箔）
--------------------------------------------------------- */
.ct-header::before,
.ct-header::after {
  content: "" !important;
  position: fixed !important;
  top: 30px !important;
  width: 12px;
  height: 6px;
  background: linear-gradient(135deg, #ffd700, #b8860b) !important;
  border-radius: 80% 10%;
  z-index: 999999 !important;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.8) !important;
}

.ct-header::before {
  animation: leafFlyingGlobal 15s infinite linear !important;
}

.ct-header::after {
  top: 50px !important;
  animation: leafFlyingGlobal 22s infinite linear 7s !important;
}

@keyframes leafFlyingGlobal {
  0% {
    transform: translateX(-20vw) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(120vw) rotate(1080deg);
    opacity: 0;
  }
}

/* ---------------------------------------------------------
  どこで何をするCSSか
  サイト全体：共通ボタン
--------------------------------------------------------- */
.wp-block-button__link,
button,
.button,
input[type="submit"] {
  background-color: #2d361c !important;
  background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png") !important;
  color: #f8f4e6 !important;
  border: 1px solid #c0a24a !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 0 4px rgba(192, 162, 74, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.wp-block-button__link:hover,
button:hover,
.button:hover,
input[type="submit"]:hover {
  background-color: #3e462a !important;
  color: #ffd700 !important;
  text-shadow: 0 0 5px rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2), 0 0 15px rgba(212, 175, 55, 0.4) !important;
  transform: translateY(-2px) !important;
  letter-spacing: 0.2em !important;
}

.single_add_to_cart_button,
.woocommerce-button.button.checkout {
  border: 1.5px solid #d4af37 !important;
}

/* ---------------------------------------------------------
  どこで何をするCSSか
  サイト全体：フッター共通デザイン
--------------------------------------------------------- */
.ct-footer {
  margin-top: 30px;
  background-color: #2d361c !important;
  background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png") !important;
  color: #f8f4e6 !important;
  position: relative !important;
  overflow: hidden !important;
}

.ct-footer .widget ul,
.ct-footer .menu,
.ct-footer .widget_nav_menu ul {
  display: grid !important;
  gap: 8px 20px !important;
  padding: 0 !important;
}

@media (min-width: 1025px) {
  .ct-footer .widget ul,
  .ct-footer .menu {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 1024px) {
  .ct-footer .widget ul,
  .ct-footer .menu {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.ct-footer .menu > li > a,
.ct-footer .widget ul li a {
  color: #f8f4e6 !important;
  border-bottom: 1px solid rgba(248, 244, 230, 0.1) !important;
  transition: all 0.3s ease !important;
}

.ct-footer .menu > li > a:hover,
.ct-footer .widget ul li a:hover {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ---------------------------------------------------------
  どこで何をするCSSか
  サイト全体：フッター演出（舞い散る新緑の茶葉）
--------------------------------------------------------- */
.ct-footer::before,
.ct-footer::after,
.ct-footer .footer-copyright::before,
.ct-footer .footer-copyright::after,
.ct-footer .widget-title::before {
  content: "" !important;
  position: absolute;
  width: 14px;
  height: 7px;
  background: linear-gradient(135deg, #c5d9a1, #8fa45b) !important;
  box-shadow: 0 0 10px rgba(197, 217, 161, 0.4) !important;
  border-radius: 80% 20%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.ct-footer::before {
  bottom: 150px;
  left: 5%;
  animation: leafSwayingFooter 12s infinite ease-in-out !important;
}

.ct-footer::after {
  bottom: 80px;
  right: 8%;
  background: linear-gradient(135deg, #e4efd2, #a4b57d) !important;
  animation: leafSwayingFooter 15s infinite ease-in-out 4s !important;
}

.ct-footer .footer-copyright::before {
  bottom: 100px;
  left: 30%;
  animation: leafSwayingFooter 9s infinite ease-in-out 2s !important;
}

.ct-footer .footer-copyright::after {
  bottom: 180px;
  right: 25%;
  animation: leafSwayingFooter 18s infinite ease-in-out 6s !important;
}

.ct-footer .widget-title::before {
  top: -20px;
  left: 15%;
  animation: leafSwayingFooter 14s infinite ease-in-out 1s !important;
}

@keyframes leafSwayingFooter {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    transform: translate(150px, -80px) rotate(720deg);
    opacity: 0;
  }
}

/* ---------------------------------------------------------
  どこで何をするCSSか
  サイト全体：季節の演出（四片の舞い茶葉）
--------------------------------------------------------- */
body::before,
body::after,
#header-grid::before,
#header-grid::after {
  content: "" !important;
  position: fixed !important;
  top: -100px !important;
  width: 18px !important;
  height: 18px !important;
  z-index: 9999 !important;
  pointer-events: none;
  background: linear-gradient(135deg, #c5d9a1, #8fa45b) !important;
  box-shadow: 0 0 6px rgba(197, 217, 161, 0.35) !important;
  border-radius: 80% 20% !important;
  opacity: 0;
}

body::before {
  left: 3% !important;
  animation: seasonLeafGlobalSway 22s infinite ease-in-out !important;
}

#header-grid::before {
  left: 4% !important;
  animation: seasonLeafGlobalSway 26s infinite ease-in-out 11s !important;
}

body::after {
  right: 3% !important;
  animation: seasonLeafGlobalSway 28s infinite ease-in-out reverse !important;
}

#header-grid::after {
  right: 4% !important;
  animation: seasonLeafGlobalSway 24s infinite ease-in-out 14s reverse !important;
}

@keyframes seasonLeafGlobalSway {
  0% {
    transform: translateY(0) translateX(-10px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  25% {
    opacity: 0.4;
    transform: translateY(25vh) translateX(10px) rotate(180deg) scaleX(-0.8);
  }
  50% {
    opacity: 0.8;
    transform: translateY(50vh) translateX(-10px) rotate(360deg) scaleX(1);
  }
  75% {
    opacity: 0.4;
    transform: translateY(75vh) translateX(10px) rotate(540deg) scaleX(-0.8);
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(115vh) translateX(-10px) rotate(720deg);
    opacity: 0;
  }
}