@charset "utf-8";
/* WP Header + Nav styles ONLY — does not override theme body/content */
/* For 香港多汗症中心 — zorax-main theme */
/* ============================================================
   Do NOT copy layout.css here — it overrides the entire theme.
   This file contains ONLY the header/banner/nav styles that
   match header-1.php. The WP theme handles everything else.
   ============================================================ */

:root {
  --primary: #00796b;
  --primary-dark: #004d40;
  --primary-light: #e0f2f1;
  --accent: #26a69a;
  --text: #333;
  --text-muted: #666;
  --border: #e0e0e0;
  --border-light: #eee;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --radius: 8px;
  --radius-sm: 4px;
  --transition: 0.2s ease;
}

/* ============================================================
   STICKY HEADER GROUP
   ============================================================ */
.sticky-header-group {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.logo-wrap { flex-shrink: 0; }
.header-logo {
  display: block;
  width: 260px;
  height: 46px;
  background: url(../images/logo.jpg) no-repeat left center / contain;
  background-image: url(../images/logo.webp);
  background-size: contain;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .header-logo {
    background-image: url(../images/logo@2x.webp);
  }
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.contact-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0;
  background: none;
  border: none;
  transition: color var(--transition);
}
.contact-item:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.contact-item svg { width: 16px; height: 16px; fill: var(--text-muted); transition: fill var(--transition); flex-shrink: 0; }
.contact-item:hover svg { fill: var(--primary); }
.whatsapp-item svg { fill: #25D366; }
.whatsapp-item:hover svg { fill: #128C7E; }
.clinic-item { color: var(--text); font-size: 14px; cursor: pointer; }
.cta-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary) !important;
  text-decoration: none;
  padding: 6px 18px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.cta-link:hover { background: var(--primary); color: #fff !important; text-decoration: none; }

/* ============================================================
   NAV MENU
   ============================================================ */
#topmenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  gap: 2px;
  font-size: 16px;
}
#topmenu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
#topmenu ul li {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#topmenu a,
#topmenu ul li a,
#topmenu .nav-links {
  display: inline-block;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text) !important;
  position: relative;
  white-space: nowrap;
  text-decoration: none !important;
  transition: color var(--transition);
}
#topmenu a::after,
#topmenu ul li a::after,
#topmenu .nav-links::after {
  content: '';
  display: block;
  width: 0;
  height: 2.5px;
  background: var(--primary);
  border-radius: 2px;
  transition: width var(--transition);
  position: absolute;
  bottom: 0;
  left: 18px;
  right: 18px;
}
#topmenu a:hover,
#topmenu ul li a:hover,
#topmenu .nav-links:hover { color: var(--primary); }
#topmenu a:hover::after,
#topmenu ul li a:hover::after,
#topmenu .nav-links:hover::after,
#topmenu a.current-menu-item::after,
#topmenu ul li a.current-menu-item::after,
#topmenu ul li.current-menu-item a::after,
#topmenu .nav-links.current-menu-item::after,
#topmenu li.current-menu-item .nav-links::after,
#topmenu a.active::after,
#topmenu ul li.active a::after { width: calc(100% - 36px); }
#topmenu a.current-menu-item,
#topmenu ul li.current-menu-item a,
#topmenu ul li a.current-menu-item,
#topmenu .nav-links.current-menu-item,
#topmenu li.current-menu-item .nav-links,
#topmenu a.active,
#topmenu ul li.active a { color: var(--primary) !important; font-weight: 600; }

/* ============================================================
   BANNER
   ============================================================ */
#banner-nav-wrap {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
#banner {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
#banner picture,
#banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 40px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.breadcrumbs a {
  color: var(--primary);
  text-decoration: none;
}
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs a::after {
  content: ' › ';
  color: var(--text-muted);
  margin: 0 2px;
}
.breadcrumb-current { color: var(--text-muted); }

/* ============================================================
   /* BLOG CONTENT — match static page card style */
   /* Target the actual Elementor classes used by this theme */

   /* Blog list wrapper — constrain width like static pages */
   .wpr-blog-area,
   .blogs-wrapper-main,
   .blog__wrapper {
     max-width: 1100px !important;
     margin: 0 auto !important;
     padding: 24px 40px 48px !important;
     width: 100% !important;
   }
   /* Remove any default max-width overrides from theme */
   .wpr-blog-area .container,
   .wpr-blog-area .row,
   .wpr-blog-area [class*="col-"] {
     max-width: none !important;
     width: 100% !important;
     padding: 0 !important;
     margin: 0 !important;
     flex: 0 0 auto !important;
   }

   /* Page heading */
   .page-title,
   .entry-title,
   h1.entry-title,
   .blog__wrapper h1,
   .blogs-wrapper-main h1 {
     font-size: 28px !important;
     font-weight: 700 !important;
     color: var(--primary-dark) !important;
     margin: 0 0 16px 0 !important;
     padding-bottom: 12px !important;
     position: relative;
   }
   .page-title::after,
   .entry-title::after,
   h1.entry-title::after,
   .blog__wrapper h1::after {
     content: '';
     display: block;
     width: 48px;
     height: 3px;
     background: var(--accent);
     border-radius: 2px;
     margin-top: 12px;
   }

   /* Post cards — Elementor wrappers */
   .wpr-postbox-wrapper,
   article.post,
   .type-post {
     background: #fff !important;
     border-radius: var(--radius) !important;
     padding: 36px 40px !important;
     box-shadow: var(--shadow-sm) !important;
     border: 1px solid var(--border) !important;
     margin: 0 0 24px 0 !important;
     width: auto !important;
   }
   .wpr-postbox-wrapper:hover {
     box-shadow: var(--shadow-md) !important;
     transform: translateY(-1px);
     transition: box-shadow var(--transition), transform var(--transition);
   }

   /* Post title links */
   .wpr-postbox-wrapper .entry-title a,
   .wpr-postbox-wrapper h2 a,
   .wpr-postbox-wrapper h3 a,
   .wpr-postbox-wrapper .blog_title a,
   .blog_title a,
   article.post .entry-title a {
     font-size: 22px !important;
     font-weight: 700 !important;
     color: var(--primary-dark) !important;
     text-decoration: none !important;
   }
   .wpr-postbox-wrapper .entry-title a:hover,
   .wpr-postbox-wrapper h2 a:hover { color: var(--primary) !important; }

   /* Post thumbnail images */
   .wpr-postbox-thumb img,
   .postbox__thumb img,
   img.wp-post-image {
     border-radius: var(--radius-sm);
   }

   /* Post body text */
   .wpr-postbox-wrapper p,
   .type-post p,
   article.post p {
     font-size: 15px !important;
     line-height: 1.9 !important;
     color: var(--text) !important;
   }

   /* Content area overall */
   .entry-content,
   .post-content {
     font-size: 15px;
     line-height: 1.9;
     color: var(--text);
   }

/* ============================================================
   BLOG FOOTER — match static site bottommenu + footer
   ============================================================ */
/* The blog uses #bottommenu + #footer — same IDs as static site */
#bottommenu {
  background: #37474f !important;
  padding: 32px 40px !important;
  text-align: center !important;
}
#bottommenu,
#bottommenu p,
#bottommenu font {
  font-size: 14px !important;
  color: rgba(255,255,255,0.75) !important;
  line-height: 2 !important;
}
#bottommenu a {
  color: rgba(255,255,255,0.9) !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  margin: 0 6px !important;
  text-decoration: none !important;
}
#bottommenu a:hover {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.6) !important;
}
/* Copyright */
#footer {
  background: #263238 !important;
  padding: 20px 40px !important;
  text-align: center !important;
}
#footer,
#footer .copyright,
.copyright {
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 !important;
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width: 768px) {
  /* DO NOT set overflow on any ancestor of .sticky-header-group —
     position:sticky breaks on mobile when ANY ancestor has overflow set */
  #warpper,
  .site-header,
  .header-inner,
  .wpr-blog-area,
  .wpr-postbox-details-area,
  .wpr-blog-full-width-area,
  .postbox__area {
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .wpr-blog-area .container,
  .wpr-postbox-details-area .container,
  .postbox__area .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Image safety */
  img { max-width: 100% !important; height: auto !important; }
  .header-inner { padding: 12px 20px !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }
  .header-logo { width: 200px !important; height: 38px !important; }
  .header-nav { gap: 14px !important; width: 100% !important; max-width: 100% !important; justify-content: center !important; }
  .contact-item { font-size: 13px; }
  .contact-item svg { width: 14px; height: 14px; }
  .cta-link { font-size: 11px; font-weight: 400; padding: 0; border: none; }
  #banner img { max-height: 220px; }
  /* ---- Force blog nav to match static site exactly ---- */
  #topmenu,
  #topmenu a,
  #topmenu .nav-links,
  #topmenu ul li a {
    font-family: -apple-system, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif !important;
    text-align: center !important;
  }
  #topmenu {
    padding: 8px 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #topmenu ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none !important;
    box-sizing: border-box !important;
  }
  /* Cascade of height inheritance — grid stretches li, li stretches a */
  #topmenu ul li {
    display: block !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #topmenu a,
  #topmenu ul li a,
  #topmenu ul li a.nav-links,
  #topmenu .nav-links {
    display: flex !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 4px;
    font-size: 13px;
    text-align: center;
    border-radius: var(--radius-sm);
    color: var(--text);
    background: transparent;
    text-decoration: none;
    box-sizing: border-box !important;
  }
  #topmenu a::after,
  #topmenu ul li a::after,
  #topmenu .nav-links::after { display: none !important; }
  #topmenu a.current-menu-item,
  #topmenu ul li.current-menu-item a,
  #topmenu ul li.current_page_item a,
  #topmenu ul li.current-menu-item a.nav-links,
  #topmenu .nav-links.current-menu-item,
  #topmenu .menu-item-105 a,
  #topmenu .menu-item-105 a.nav-links,
  #topmenu li.current-menu-item .nav-links {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: var(--radius-sm);
  }
  .breadcrumbs { padding: 4px 20px 0; }
  /* Blog content */
  .wpr-blog-area,
  .blogs-wrapper-main,
  .blog__wrapper { padding: 20px 20px 32px !important; }
  /* Force post cards to stack vertically on mobile */
  .wpr-postbox-wrapper,
  article.post {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 24px !important;
    margin-bottom: 20px !important;
  }
  .wpr-postbox-thumb,
  .postbox__thumb {
    width: 100% !important;
    margin-bottom: 12px;
    float: none !important;
  }
  .wpr-postbox-thumb img,
  .postbox__thumb img,
  img.wp-post-image {
    width: 100% !important;
    height: auto !important;
    display: block;
  }
  .wpr-postbox-wrapper .blog_title a,
  article.post .entry-title a { font-size: 18px !important; }
  .wpr-postbox-wrapper p,
  article.post p { font-size: 14px !important; line-height: 1.7 !important; }
  h1.page-title,
  .entry-title,
  .blog__wrapper h1 { font-size: 22px !important; }
  #bottommenu { padding: 24px 20px !important; }
  #bottommenu,
  #bottommenu p { font-size: 13px !important; }
  #footer { padding: 16px 20px !important; }
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width: 480px) {
  .header-inner { flex-direction: column !important; gap: 8px !important; align-items: center !important; }
  .header-logo { width: 160px !important; height: 32px !important; }
  .header-nav { gap: 10px !important; flex-wrap: wrap !important; justify-content: center !important; }
  .contact-item { font-size: 12px !important; }
  .contact-item svg { width: 13px !important; height: 13px !important; }
  .cta-link { font-size: 11px !important; font-weight: 400 !important; padding: 0 !important; border: none !important; }
  #banner img { max-height: 160px !important; }
  #topmenu {
    padding: 6px 8px !important;
  }
  #topmenu ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 4px;
  }
  /* Override 768px flex cascade — shrink text/padding on phones */
  #topmenu a,
  #topmenu ul li a,
  #topmenu ul li a.nav-links,
  #topmenu .nav-links {
    padding: 7px 4px !important;
    font-size: 12px !important;
    height: 100% !important;
  }
  .breadcrumbs { padding: 4px 16px 0; }
  /* Blog content */
  .wpr-blog-area,
  .blogs-wrapper-main,
  .blog__wrapper { padding: 16px 16px 24px !important; }
  .wpr-postbox-wrapper,
  article.post {
    display: flex !important;
    flex-direction: column !important;
    padding: 18px 18px !important;
    margin-bottom: 16px !important;
  }
  .wpr-postbox-thumb,
  .postbox__thumb {
    width: 100% !important;
    margin-bottom: 10px;
    float: none !important;
  }
  .wpr-postbox-wrapper .blog_title a,
  article.post .entry-title a { font-size: 16px !important; }
  .wpr-postbox-wrapper p,
  article.post p { font-size: 13px !important; line-height: 1.6 !important; }
  h1.page-title,
  .entry-title,
  .blog__wrapper h1 { font-size: 20px !important; }
  #bottommenu { padding: 20px 16px !important; }
  #bottommenu,
  #bottommenu p { font-size: 12px !important; }
  #footer { padding: 14px 16px !important; }
}