/* =========================================================
   One Pacific Airways — Global Design System
   ========================================================= */
:root {
  /* Brand */
  --color-red: #c30f23;
  --color-gold: #d8ac58;
  --color-ink: #222;
  --color-deep: #222;
  --color-text: #222;
  --color-muted: #777;
  --color-muted2: #ccc;
  --color-soft: #f7f7f7;
  --color-line: #ccc;
  --color-white: #fff;

  /* Fonts */
  --font-body: "DM Sans", Arial, sans-serif;
  --font-heading: "Manrope", "DM Sans", Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --eyebrow-size: 24px;
  --number-size: 32px;
  --hero-title-size: clamp(58px, 6.2vw, 94px);
  --h1-size: clamp(50px, 5.2vw, 78px);
  --h2-size: clamp(36px, 3.6vw, 54px);
  --h3-size: clamp(24px, 2vw, 32px);

  /* Layout */
  --content-width: 1380px;
  --reading-width: 960px;
  --text-width: 700px;
  --page-padding-x: clamp(16px, 3vw, 42px);
  --section-padding-y: clamp(72px, 8vw, 118px);
  --header-height: 82px;

  /* Media ratios */
  --ratio-card: 4 / 3;
  --ratio-card-mobile: 16 / 10;
  --ratio-banner: 16 / 9;

  /* Brand sizing */
  --logo-width: 130px;
  --logo-width-mobile: clamp(96px, 28vw, 118px);
  --nav-pad-y: 16px;
  --nav-pad-y-mobile: 12px;

  /* UI */
  --radius-sm: 6px;
  --radius: 10px;
  --shadow-modal: 0 28px 80px rgba(0, 0, 0, .25);

  /* Banner 高度：後續只需要修改這三個數值 */

  --hero-height-desktop: 900px;
  --hero-height-tablet: 900px;
  --hero-height-mobile: 650px;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-white)
}

/* =========================================================
   GLOBAL HERO TITLE
   Home / About / Contact 使用同一套 H1 字體規格。
   各頁 CSS 只保留版面相關設定，例如 max-width / margin。
   ========================================================= */
.hero-content h1,
.hero-content .hero-title,
.about-hero h1,
.contact-hero h1 {
  font-family: var(--font-heading);
  font-size: var(--h1-size);
  font-weight: var(--weight-heavy);
  line-height: 1.1;
  letter-spacing: -.05em;
}

.container {
  width: min(calc(100% - (var(--page-padding-x) * 2)), var(--content-width));
  margin-inline: auto
}

.section {
  padding: var(--section-padding-y) 0
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--color-gold);
  font-size: var(--eyebrow-size);
  line-height: 1.2;
  letter-spacing: .14em;
  font-weight: var(--weight-semibold)
}

.eyebrow.light {
  color: var(--color-gold);
  opacity: 1
}

/* Standard centered section heading */
.section-title,
.section-heading {
  display: block;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 52px
}

.section-title>div,
.section-heading>div {
  display: block
}

.section-title h2,
.section-heading h2,
.section-heading-title {
  margin: 0 auto 16px;
  font: var(--weight-medium) var(--h2-size)/1.08 var(--font-heading);
  letter-spacing: -.035em;
  max-width: 860px
}

.section-title>p,
.section-heading-intro {
  max-width: 680px;
  margin: 22px auto 0;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.75;
  text-align: center
}

/* Common numbers */
.section-number,
.item-number,
.contact-topics>div>span {
  font-size: var(--number-size);
  line-height: 1.2;
  letter-spacing: .04em;
  font-weight: var(--weight-medium);
  color: var(--color-gold)
}


/* =========================================================
   BUTTON SYSTEM — single source of truth
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: .02em;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn--outline {
  background: transparent;
  border-color: var(--color-deep);
  color: var(--color-deep);
}

.btn--outline:hover {
  background: var(--color-deep);
  color: #fff;
}


.btn--book {
  min-height: 40px;
  padding: 0 18px;
  border-width: 1px;
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
  font-size: var(--text-xs);
  letter-spacing: .09em;
}

.btn--book::after {
  content: none
}

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =========================================================
   GLOBAL RWD
   ========================================================= */
@media (max-width: 720px) {
  .section-title,
  .section-heading {
    margin-bottom: 34px;
  }
}