/* Responsive Typography System
   Ensures consistent readability across all devices */

:root {
  /* 手機字體基礎尺寸大幅提升 */
  --base-font-size-mobile: 21px; /* 從14px增加到21px (1.5倍) */
  --base-font-size-tablet: 17px; /* 稍微提升平板尺寸 */
  --base-font-size-desktop: 16px;
  
  /* Line height ratios */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  
  /* Primary brand color for consistency */
  --brand-color: #952B32;
}

/* Global responsive font sizing */
html {
  font-size: var(--base-font-size-mobile);
}

@media (min-width: 576px) {
  html {
    font-size: var(--base-font-size-tablet);
  }
}

@media (min-width: 992px) {
  html {
    font-size: var(--base-font-size-desktop);
  }
}

/* Responsive heading styles using rem units */
h1, .h1 {
  font-size: 1.875rem; /* 約39px on mobile (基礎值21px) */
  line-height: var(--line-height-tight);
  font-weight: 700;
}

h2, .h2 {
  font-size: 1.5rem; /* 約31px on mobile */
  line-height: var(--line-height-tight);
  font-weight: 700;
}

h3, .h3 {
  font-size: 1.25rem; /* 約26px on mobile */
  line-height: var(--line-height-tight);
  font-weight: 600;
}

h4, .h4 {
  font-size: 1.125rem; /* 約24px on mobile */
  line-height: var(--line-height-tight);
  font-weight: 600;
}

h5, .h5 {
  font-size: 1rem; /* 約21px on mobile */
  line-height: var(--line-height-normal);
  font-weight: 600;
}

h6, .h6 {
  font-size: 0.875rem; /* 約18px on mobile */
  line-height: var(--line-height-normal);
  font-weight: 600;
}

/* Larger heading sizes on medium screens and up */
@media (min-width: 768px) {
  h1, .h1 {
    font-size: 2.25rem; /* 約38px on tablet */
  }
  
  h2, .h2 {
    font-size: 1.75rem; /* 約30px on tablet */
  }
  
  h3, .h3 {
    font-size: 1.5rem; /* 約26px on tablet */
  }
}

/* Largest heading sizes on large screens */
@media (min-width: 992px) {
  h1, .h1 {
    font-size: 2.5rem; /* 40px on desktop */
  }
  
  h2, .h2 {
    font-size: 2rem; /* 32px on desktop */
  }
}

/* Body text and paragraphs */
body, p, li, td, input, select, textarea {
  font-size: 1rem; /* 使用根字體大小，在手機上約21px */
  line-height: var(--line-height-normal);
}

/* Small text elements (在手機上仍然保持適當大小) */
small, .small {
  font-size: 0.875rem; /* 約18px on mobile */
  line-height: var(--line-height-normal);
}

.smaller {
  font-size: 0.75rem; /* 約16px on mobile */
  line-height: var(--line-height-tight);
}

/* 更大的展示標題 */
.display-1 {
  font-size: 2.5rem; /* 約53px on mobile */
  font-weight: 700;
  line-height: 1.1;
}

.display-2 {
  font-size: 2.25rem; /* 約47px on mobile */
  font-weight: 700;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .display-1 {
    font-size: 3.5rem; /* 約60px on tablet */
  }
  
  .display-2 {
    font-size: 3rem; /* 約51px on tablet */
  }
}

@media (min-width: 992px) {
  .display-1 {
    font-size: 4.5rem; /* 72px on desktop */
  }
  
  .display-2 {
    font-size: 3.75rem; /* 60px on desktop */
  }
}

/* Utility classes for responsive text alignment */
.text-responsive-left {
  text-align: left !important;
}

@media (min-width: 576px) {
  .text-sm-responsive-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-responsive-right {
    text-align: right !important;
  }
}

/* Utility classes for responsive font sizes */
.fs-large {
  font-size: 1.125rem !important; /* 約24px on mobile */
}

.fs-xlarge {
  font-size: 1.25rem !important; /* 約26px on mobile */
}

@media (min-width: 768px) {
  .fs-large {
    font-size: 1.25rem !important; /* 約21px on tablet */
  }
  
  .fs-xlarge {
    font-size: 1.5rem !important; /* 約26px on tablet */
  }
}

/* Store components adjustments */
.store-name {
  font-size: 1.1rem; /* 約23px on mobile */
  font-weight: bold;
}

.store-detail {
  font-size: 0.9rem; /* 約19px on mobile */
}

@media (min-width: 768px) {
  .store-name {
    font-size: 1.25rem;
  }
  
  .store-detail {
    font-size: 1rem;
  }
}

/* 導航元素調整尺寸 */
.nav-link {
  font-size: 0.9375rem; /* 約20px on mobile */
  font-weight: 500;
}

@media (min-width: 992px) {
  .nav-link {
    font-size: 1rem; /* 16px on desktop */
  }
}

/* 新聞和內容文字 */
.news-excerpt, .news-body p, .store-detail p {
  font-size: 1rem; /* 約21px on mobile */
  line-height: var(--line-height-relaxed);
}

/* 按鈕元素調整尺寸 */
.btn, button {
  font-size: 0.9375rem; /* 約20px on mobile */
}

.btn-lg, .btn-large {
  font-size: 1.125rem; /* 約24px on mobile */
}

.btn-sm, .btn-small {
  font-size: 0.875rem; /* 約18px on mobile */
}

/* 表單元素調整尺寸 */
input, select, textarea, label {
  font-size: 1rem; /* 約21px on mobile */
}

/* 頁腳文字調整 */
footer, footer p, .footerInfo {
  font-size: 0.875rem; /* 約18px on mobile */
}

@media (min-width: 992px) {
  footer, footer p {
    font-size: 0.9375rem; /* 15px on desktop */
  }
}

/* 頁腳資訊文字最小保持可讀性 */
.footerInfo {
  font-size: 0.75rem; /* 約16px on mobile */
}

@media (min-width: 768px) {
  .footerInfo {
    font-size: 0.8125rem; /* 約14px on tablet */
  }
}

/* 控制行間距以避免文字過於緊湊 */
@media (max-width: 576px) {
  p, li, td, .store-detail {
    line-height: 1.6;
    margin-bottom: 0.75em;
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5em;
  }
}