/**
 * fse-pet-shop 風格全域設計系統 v2
 * Very Enjoy — Premium UI Theme
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');

:root {
  /* ── 色彩系統 — fse-pet-shop 標準 ── */
  --primary:       #8D19E8;
  --secondary:     #FF782D;
  --sec-accent:    #FFF2E8;
  --third-accent:  #FF8745;
  --heading:       #1B1B1C;
  --body-text:     #454545;
  --background:    #FFFFFF;
  --tertiary-bg:   #F6F7FA;
  --border-color:  #EBEBEB;
  --foreground:    #000000;

  /* ── 字體大小 Scale (Fluid Typography) ── */
  --fs-tiny:        15px; /* 原 13px */
  --fs-xs:          16px; /* 原 14px */
  --fs-sm:          17px; /* 原 15px */
  --fs-md:          18px; /* 原 16px */
  --fs-upper-h:     20px; /* 原 18px */
  --fs-normal:      clamp(20px, 1.6vw, 22px); /* 原 18px-20px */
  --fs-content-h:   clamp(24px, 4.2vw, 26px); /* 原 22px-24px */
  --fs-post-title:  clamp(26px, 3vw, 38px);   /* 原 24px-36px */
  --fs-large:       clamp(30px, 4.2vw, 34px); /* 原 28px-32px */
  --fs-xl:          clamp(34px, 6vw, 38px);    /* 原 32px-36px */
  --fs-h1:          clamp(44px, 3vw, 58px);    /* 原 42px-56px */
  --fs-h2:          clamp(34px, 2.6vw, 51px);  /* 原 32px-49px */
  --fs-h3:          clamp(30px, 1.9vw, 38px);  /* 原 28px-36px */
  --fs-h4:          clamp(26px, 1.5vw, 30px);  /* 原 24px-28px */
  --fs-h5:          clamp(20px, 1.3vw, 26px);  /* 原 18px-24px */

  /* ── 行高 ── */
  --lh-heading:  1.11;
  --lh-h2:       1.28;
  --lh-h3:       1.36;
  --lh-h4:       1.50;
  --lh-para:     1.75;

  /* ── 字重 ── */
  --fw-light:     300;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── 間距系統 (Fluid Spacing) ── */
  --sp-xs:         clamp(14px, 2.5vw, 21px);
  --sp-normal:     clamp(21px, 3.5vw, 35px);
  --sp-section:    clamp(42px, 5.5vw, 105px);
  --sp-main-gap:   clamp(35px, 5.5vw, 84px);
  --sp-col-gap:    clamp(30px, 5.5vw, 40px);

  /* ── 圓角 ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 30px;

  /* ── 陰影 ── */
  --shadow-sm:   0 4px 12px rgba(0,0,0,0.06);
  --shadow-md:   0 10px 30px rgba(0,0,0,0.08);
  --shadow-lg:   0 20px 50px rgba(0,0,0,0.10);
  --shadow-primary: 0 10px 20px rgba(141,25,232,0.20);
}

/* ── 全域基礎設置 ── */
body {
  font-family: 'Archivo', 'Noto Sans TC', sans-serif;
  color: var(--body-text);
  line-height: var(--lh-para);
  background-color: var(--background);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
}

/* ── 全域過渡 ── */
a, .btn, .card {
  transition: all 0.5s ease;
}

/* ── 按鈕：主要（填充式） ── */
.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary) 0%, #a740ff 100%);
  color: #ffffff !important;
  border-radius: var(--radius-pill);
  padding: 12px 35px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.5px;
  transition: all 0.4s ease;
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(141,25,232,0.30);
}

/* ── 按鈕：次要（橘色） ── */
.btn-secondary {
  display: inline-block;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--third-accent) 100%);
  color: #ffffff !important;
  border-radius: var(--radius-pill);
  padding: 10px 28px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border: none;
  cursor: pointer;
  text-align: center;
  transition: all 0.4s ease;
}

.btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(255,120,45,0.25);
}

/* ── 按鈕：文字底線（次要連結） ── */
.btn-underline {
  display: inline-block;
  background: transparent;
  color: var(--primary) !important;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;
  padding: 0 0 4px;
  position: relative;
  transition: color 0.3s;
}

.btn-underline::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--primary);
  transition: width 0.35s ease;
}

.btn-underline:hover {
  color: var(--secondary) !important;
}

.btn-underline:hover::before {
  width: 0;
  background: var(--secondary);
}

/* ── Badge / 標籤 ── */
.badge {
  display: inline-block;
  background-color: var(--secondary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 2px 12px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.8;
}

.badge-primary {
  background-color: var(--primary);
}

/* ── 卡片組件 ── */
.card {
  background: var(--background);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: all 0.4s ease;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(141,25,232,0.15);
}

/* ── Section 標題 ── */
.section-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--primary);
  padding: 10px 0 6px;
  margin: 0 0 15px 0;
  border-bottom: 2px solid var(--primary);
  letter-spacing: 1px;
}

/* ── 閃光動畫 (Shine Effect) ── */
.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::before {
  content: '';
  position: absolute;
  top: 0; left: -97%;
  z-index: 2;
  width: 50%; height: 100%;
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
}

.shine-effect:hover::before {
  animation: shine 0.75s;
}

@keyframes shine {
  100% { left: 125%; }
}

/* ── 輸入框美化（全域） ── */
.form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--border-color);
  outline: none;
  font-size: var(--fs-md);
  font-family: 'Archivo', 'Noto Sans TC', sans-serif;
  color: var(--body-text);
  transition: border-color 0.3s ease;
}

.form-input:focus {
  border-bottom-color: var(--primary);
}

.form-input::placeholder {
  color: #bbb;
}

/* ── 圖片對象適配 ── */
img {
  vertical-align: middle;
}

/* ── 佔位元素（Nav sticky 偏移補償） ── */
.place {
  height: 48px;
}