/* ===== 香港腸道專科檢測中心 — Shared Stylesheet ===== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Microsoft YaHei", "Ping Hei", "PingFang TC", Arial, sans-serif; font-size: 14px; line-height: 1.7; color: #333; background: #f5f7fa; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Header — single-row layout, desktop and mobile */
.site-header { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 100; }
.header-top { background: #317eb6; color: #fff; }
.header-top .container {
  max-width: 1080px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}

/* Logo group (logo + mobile-only elements) */
.header-logo-group { display: flex; align-items: center; gap: 10px; }

/* Logo with icon + clinic name text */
.header-logo { display: flex; align-items: center; gap: 10px; }
.header-logo a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.header-logo .logo-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 61px;
  height: 56px;
}
.header-logo .logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.header-logo .clinic-name-zh { font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); letter-spacing: 2px; white-space: nowrap; }
.header-logo .clinic-name-en { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.95); text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); letter-spacing: 1px; white-space: nowrap; }

/* Desktop contact: icon + number only (no text labels) */
.header-contact { display: flex; align-items: center; gap: 16px; }
.contact-item { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #fff; font-weight: 600; transition: color 0.2s, text-decoration 0.2s; white-space: nowrap; }
.contact-item:hover { color: #ff6600; text-decoration: underline; }
.contact-item .phone-num { font-weight: 700; }

/* Icon colors for desktop SVGs - use inline fill, not CSS */
.icon-wa, .icon-phone { display: inline-block; width: 20px; height: 20px; }

/* Language toggle */
.lang-toggle { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.lang-toggle a { color: #fff; padding: 2px 6px; border-radius: 3px; transition: background-color 0.2s; }
.lang-toggle a:hover { background-color: rgba(255,255,255,0.2); text-decoration: underline; }
.lang-toggle a[aria-current="page"] { background-color: rgba(255,255,255,0.2); }

/* Nav */
.site-nav { background: #fff; border-top: 1px solid #eee; }
.nav-list { display: flex; list-style: none; justify-content: flex-end; flex-wrap: wrap; }
.nav-list li a { display: block; padding: 14px 20px; font-size: 14px; font-weight: 600; color: #4a4a4a; transition: background 0.2s, color 0.2s; }
.nav-list li a:hover, .nav-list li a.active { color: #fff; background: #3B88BE; }
/* Always show active page nav item with hover style (for both desktop and mobile) */
.nav-list li a.active { color: #fff; background: #3B88BE; }

/* Hero — using background-size: cover (crops edges, never stretches) */
.hero {
  position: relative;
  min-height: 280px;
  width: 100%;
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.hero > .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: -1;
}
.hero > .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(59,136,190,0.25) 0%, rgba(91,160,212,0.20) 100%);
  z-index: -1;
}
.hero h1 { font-size: 26px; font-weight: 700; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.hero p { font-size: 15px; opacity: 0.95; max-width: 600px; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }

/* Main Content */
.site-content { background: #fff; margin-top: 12px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.section { padding: 40px 24px; border-bottom: 1px solid #eee; }
.section:last-child { border-bottom: none; }
.section + .section { padding-top: 0; }
.section h2 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 20px; }
.section h3 { font-size: 16px; font-weight: 700; color: #444; margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.grid-2 p { margin-bottom: 14px; }
.grid-2 p strong { font-weight: 700; }
.grid-2 .content-img { float: right; margin: 0 0 8px 12px; border-radius: 4px; }
.grid-2 .content-img:last-child { clear: both; }
.facility-list { list-style: none; }
.facility-list li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 14px; }
.facility-list li::before { content: "✓"; position: absolute; left: 0; color: #3B88BE; font-weight: 700; }
.staff-list { list-style: none; }
.staff-list li { margin-bottom: 10px; font-size: 14px; }
.staff-list a { color: #3B88BE; font-weight: 600; transition: color 0.2s, text-decoration 0.2s; }
.staff-list a:hover { color: #ff6600; text-decoration: underline; }

/* Quick Links */
.quick-links { padding: 24px 0; border-top: 1px solid #eee; font-size: 13px; }
.quick-links p { margin-bottom: 10px; }
.quick-links a { color: #3B88BE; }
.quick-links a:hover { color: #ff6600; text-decoration: underline; }

/* Footer */
.site-footer { background: #3B88BE; color: #fff; font-size: 13px; text-align: center; padding: 16px 0; margin-top: 8px; }
.site-footer a { color: #fff; }
.site-footer a:hover { text-decoration: underline; }

/* Hero backgrounds — each page uses its own dedicated image */
/* Desktop (≥1025px) */
.hero.hero-index > .hero-bg {
  background-image: url('../images/hero1_desktop.jpg');
}
.hero.hero-stomach > .hero-bg {
  background-image: url('../images/stomach_hero_desktop.jpg');
}
.hero.hero-stomach-cancer > .hero-bg {
  background-image: url('../images/stomach_cancer_hero_desktop.jpg');
}
.hero.hero-checking > .hero-bg {
  background-image: url('../images/checking_hero_desktop.jpg');
}
.hero.hero-colonoscopy > .hero-bg {
  background-image: url('../images/colonoscopy_hero_desktop.jpg');
}
.hero.hero-knowledge > .hero-bg {
  background-image: url('../images/knowledge_hero_desktop.jpg');
}
.hero.hero-precaution > .hero-bg {
  background-image: url('../images/precaution_hero_desktop.jpg');
}
.hero.hero-contact > .hero-bg {
  background-image: url('../images/contact_us_hero_desktop.jpg');
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .hero.hero-index > .hero-bg {
    background-image: url('../images/hero1_tablet.jpg');
  }
  .hero.hero-stomach > .hero-bg {
    background-image: url('../images/stomach_hero_tablet.jpg');
  }
  .hero.hero-stomach-cancer > .hero-bg {
    background-image: url('../images/stomach_cancer_hero_tablet.jpg');
  }
  .hero.hero-checking > .hero-bg {
    background-image: url('../images/checking_hero_tablet.jpg');
  }
  .hero.hero-colonoscopy > .hero-bg {
    background-image: url('../images/colonoscopy_hero_tablet.jpg');
  }
  .hero.hero-knowledge > .hero-bg {
    background-image: url('../images/knowledge_hero_tablet.jpg');
  }
  .hero.hero-precaution > .hero-bg {
    background-image: url('../images/precaution_hero_tablet.jpg');
  }
  .hero.hero-contact > .hero-bg {
    background-image: url('../images/contact_us_hero_tablet.jpg');
  }
}

/* Mobile (≤560px) */
@media (max-width: 560px) {
  .hero.hero-index > .hero-bg {
    background-image: url('../images/hero1_mobile.jpg');
  }
  .hero.hero-stomach > .hero-bg {
    background-image: url('../images/stomach_hero_mobile.jpg');
  }
  .hero.hero-stomach-cancer > .hero-bg {
    background-image: url('../images/stomach_cancer_hero_mobile.jpg');
  }
  .hero.hero-checking > .hero-bg {
    background-image: url('../images/checking_hero_mobile.jpg');
  }
  .hero.hero-colonoscopy > .hero-bg {
    background-image: url('../images/colonoscopy_hero_mobile.jpg');
  }
  .hero.hero-knowledge > .hero-bg {
    background-image: url('../images/knowledge_hero_mobile.jpg');
  }
  .hero.hero-precaution > .hero-bg {
    background-image: url('../images/precaution_hero_mobile.jpg');
  }
  .hero.hero-contact > .hero-bg {
    background-image: url('../images/contact_us_hero_mobile.jpg');
  }
}

/* ===== Responsive: Mobile (≤560px) ===== */
@media (max-width: 560px) {
  .header-top .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }

  /* Mobile: clear space between clinic name and WA/contact icons */
  .header-logo-group {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .header-logo {
    padding-right: 10px !important;
    margin-right: 6px !important;
    gap: 8px !important;
  }
  .header-logo a { gap: 8px; }
  .header-logo .logo-icon { height: 49px; width: auto; }
  .header-logo .clinic-name-zh { font-size: 18px; letter-spacing: 1.5px; }
  .header-logo .clinic-name-en { font-size: 13px; letter-spacing: 0.5px; }

  /* Hide desktop contact */
  .header-contact { display: none; }
  .lang-toggle.desktop-only { display: none; }

  /* Mobile: 2-col grid — row1: WA EN, row2: 📞 繁體 */
  .header-contact-icons {
    margin-left: auto !important;
    display: grid !important;
    grid-template-columns: auto auto;
    grid-auto-rows: auto;
    flex-shrink: 0 !important;
    align-items: center !important;
    gap: 6px 12px !important;
  }
  .mobile-contact { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #fff; font-weight: 600; white-space: nowrap; }
  .mobile-contact svg { width: 18px; height: 18px; flex-shrink: 0; }
  .mobile-contact .phone-num { font-weight: 700; }
  .lang-toggle.mobile-only {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 11px !important;
    align-items: center !important;
  }
  .lang-toggle.mobile-only a { padding: 2px 5px; }

  /* Nav: 2 rows of 3, centered, full-width — large touch targets */
  .nav-list { flex-wrap: wrap; gap: 0; justify-content: center; }
  .nav-list li { flex: 1 1 33.333%; text-align: center; }
  .nav-list li a { padding: 4px 8px; font-size: 16px; border-bottom: 1px solid #f0f0f0; }
  .nav-list li:nth-child(-n+3) { border-right: 1px solid #f0f0f0; }

  /* Hero: 50% of desktop height, face prominent, text flush left */
  .hero {
    min-height: 140px;
    padding: 24px 0 8px 0;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .hero h1 { font-size: 18px; margin-bottom: 4px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
  .hero p { font-size: 12px; opacity: 0.95; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
  .section { padding: 24px 16px; }
  .section h2 { font-size: 18px; }
  .grid-2 { grid-template-columns: 1fr; gap: 16px; }
  .grid-2 .content-img { float: none; margin: 12px auto; }

  /* Enlarge content text on mobile (≤560px) — overrides page inline styles & !important rules */
  .site-content .section { font-size: 20px !important; }
  .site-content .section h2 { font-size: 24px !important; }
  .site-content .section h3 { font-size: 22px !important; }
  .site-content .section h4 { font-size: 20px !important; }
  .site-content .section p,
  .site-content .section div,
  .site-content .section li,
  .site-content .section span,
  .site-content .section ol,
  .site-content .section ul,
  .site-content .section a {
    font-size: 20px !important;
  }

  /* Contact cards mobile */
  .contact-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .contact-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
  }
  .contact-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
  .card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f0f5fa;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-icon.wa { background: #eafaf1; }
  .card-body { flex: 1; min-width: 0; }
  .card-label { font-size: 12px; color: #888; margin-bottom: 2px; }
  .card-value { font-size: 16px; font-weight: 600; color: #333; }
  .card-value.highlight { color: #317eb6; }
  .card-value a { color: inherit; text-decoration: none; }
  .card-value a:hover { text-decoration: underline; }
}

/* Desktop: 2x2 grid for contact cards */
@media (min-width: 561px) {
  .header-contact-icons { display: none !important; }
  .lang-toggle.mobile-only { display: none; }
}
/* Print */
@media print {
  .site-header, .site-nav, .hero, .site-footer { background: #fff; color: #333; }
  .site-header, .site-nav { box-shadow: none; }
  .hero { background: none; }
}