/* ==========================================================================
   聖揚 樂晴空 EDM — 2026-08-10 改版
   載入順序必須在 dear-sky-is-our-limit.css 之後，用以覆蓋舊配色。
   本檔只做兩件事：
     1. 定義新版 12 區版型（.v2-sec 系列）
     2. 覆蓋表單與 CTA 的配色（沿用舊 class，不動 markup 結構）
   ========================================================================== */

:root {
  --v2-dark: #3e495d;  /* 深藍灰：首屏底、表單底、CTA 圖示與文字 */
  --v2-lime: #dadf00;  /* 黃綠：品牌色、CTA 列底、重點文字 */
  --v2-cream: #fefbf6; /* 米白：紙紋區底色 */
  --v2-green: #607b71; /* 墨綠：區塊標題（由 SVG 自帶，此處僅備用） */
}

/* ==========================================================================
   1. 區塊版型
   文字層 SVG 在一般流內負責撐出區高（其 viewBox 高度即該區完整高度），
   底圖與輪播用絕對定位疊上去。12 區結構完全一致。
   ========================================================================== */

/* body 是 flex（.body-v1），.section-wrapper 原本靠圖片的固有寬度撐開。
   新版圖片帶了固定的 width 屬性，改用明確寬度，不再依賴固有尺寸推算。 */
.section-wrapper {
  width: 100%;
  max-width: 720px;
}

.v2-sec {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--v2-cream);
  font-size: 0; /* 消除 inline 圖片下方的行距空隙 */
}

.v2-sec > .v2-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-sec > .v2-txt {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none; /* 讓下層輪播的箭頭與圓點仍可點擊 */
}

/* 首屏與表單抬頭是深藍灰底，其餘沿用米白 */
.v2-sec.v2-s1,
.v2-sec.v2-s12 {
  background-color: var(--v2-dark);
}

/* ==========================================================================
   2. 照片輪播
   座標由設計版型 p2 量測而得（白色外框已燒在輪播圖內，此處不可再加 border）。
   --l / --t / --w 為該區的百分比位置，比例固定 1229:809。
   ========================================================================== */

.v2-sec > .v2-slider {
  position: absolute;
  z-index: 2;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  aspect-ratio: 1229 / 809;
}

.v2-s6 > .v2-slider  { --l: 6.246%; --t: 51.221%; --w: 85.219%; }
.v2-s7 > .v2-slider  { --l: 6.246%; --t: 53.842%; --w: 85.288%; }
.v2-s8 > .v2-slider  { --l: 6.246%; --t: 55.212%; --w: 85.219%; }
.v2-s9 > .v2-slider  { --l: 6.246%; --t: 49.213%; --w: 85.288%; }
.v2-s10 > .v2-slider { --l: 7.495%; --t: 59.387%; --w: 85.149%; }

/* Webflow slider 內部：覆蓋 components.css 的 height:300px 與灰底 */
.v2-slider .w-slider {
  width: 100%;
  height: 100%;
  background: transparent;
}

.v2-slider .w-slider-mask,
.v2-slider .w-slide {
  height: 100%;
}

.v2-slider .v2-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左右箭頭：壓在照片上，維持低調 */
.v2-slider .w-slider-arrow-left,
.v2-slider .w-slider-arrow-right {
  width: 15%;
  color: #fff;
  font-size: 26px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.v2-slider .w-slider-arrow-left { left: 1%; }
.v2-slider .w-slider-arrow-right { right: 1%; }

/* 頁籤圓點：貼齊照片下緣，避開燒在圖內的白色外框 */
.v2-slider .w-slider-nav {
  height: auto;
  padding-top: 0;
  bottom: 12px;
  font-size: 8px;
}

.v2-slider .w-slider-dot {
  width: 1em;
  height: 1em;
  margin: 0 4px;
  background-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}

.v2-slider .w-slider-dot.w-active {
  background-color: var(--v2-lime);
}

/* ==========================================================================
   3. 表單配色
   欄位結構、name、送出邏輯完全沿用舊版，這裡只換顏色。
   ========================================================================== */

.section-v1.sec-contact,
.div-edm-contact-box {
  background-color: var(--v2-dark);
}

/* 欄位標籤 */
.contact-from-lable-style-v1 {
  color: #fff;
}

/* 文字輸入框：純白底、直角、無外框 */
.contact-form-text-field-style-v1 {
  color: #222;
  background-color: #fff;
  border: 0;
  border-radius: 0;
}

.contact-form-text-field-style-v1::placeholder {
  color: #9aa0a6;
}

.contact-form-text-field-style-v1:focus {
  border: 0;
  outline: 2px solid var(--v2-lime);
  outline-offset: -2px;
}

/* 核取方塊：未勾為純白方塊，勾選後填入黃綠 */
.contact-form-checkbox-item {
  background-color: #fff;
  border: 0;
  border-radius: 0;
}

.contact-form-checkbox-item.w--redirected-checked {
  background-color: var(--v2-lime);
  background-image: none;
  border: 0;
  box-shadow: inset 0 0 0 4px #fff;
}

.contact-form-checkbox-item-label-2 {
  color: #fff;
}

/* 隱私權條列：第 1 條（含連結）為黃綠，其餘為白 */
.contact-form-privacy-rich-text-block-style-v1 .heading,
.contact-form-privacy-rich-text-block-style-v1 .heading-2 {
  color: #fff;
}

.contact-form-privacy-rich-text-block-style-v1 .heading:first-child,
.contact-form-privacy-rich-text-block-style-v1 .heading:first-child a {
  color: var(--v2-lime);
}

/* 驗證錯誤訊息沿用 index.html 內嵌樣式的「白字紅底」，此處不覆蓋。
   注意：jQuery validate 也會在 <input> 上加 .error，若在此設 color 會讓
   使用者輸入的文字跟著變色，切勿用 .error 設定文字顏色。 */

/* 送出按鈕：改為純 CSS 膠囊按鈕，取代舊的 submit-btn2x.png */
.contact-from-submit-button {
  background-color: var(--v2-lime);
  background-image: none;
  border: 0;
  border-radius: 999px;
  color: var(--v2-dark);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 8px;
  text-indent: 8px; /* 補回 letter-spacing 造成的右側偏移 */
  line-height: 1.4;
  cursor: pointer;
}

.contact-from-submit-button:hover {
  background-color: #e8ee2a;
}

.contact-from-submit-button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 頁尾版權 */
.footer-copyright-mobile .text-block-2,
.footer-copyright-mobile .footer-link-text-v1 {
  color: #b9c0cc;
}

.section-edm-contact.sec-contact.hv2 {
  background-color: var(--v2-lime);
}

.footer-copyright-desktop .text-block-2,
.footer-copyright-desktop .footer-link-out {
  color: var(--v2-dark);
}

/* ==========================================================================
   4. CTA
   連結與圖示位置完全不變，只換底色與圖示顏色。
   ========================================================================== */

.section-cta-menu-mobile.sec-cta-mobile,
.section-cta-menu-mobile.sec-cta-mobile .div-mobile-cta-item-box {
  background-color: var(--v2-lime);
}

.div-cta-element.cta-v2 {
  background-color: transparent;
}

.cta-mobile-decorated-line-v1 {
  background-color: #fff;
}

.desktop-cta-wrapper,
.desktop-cta-wrapper.left,
.desktop-cta-wrapper.right {
  background-color: var(--v2-lime);
}

.desktop-cta-decorated-line-v1 {
  background-color: #fff;
}

/* 新版圖示本身已是深藍灰，取消舊版的反相濾鏡 */
.desktop-cta-icon-img {
  filter: none;
}

.desktop-cta-item:hover,
.desktop-cta-item.cta-item:hover {
  background-color: rgba(255, 255, 255, 0.28);
}