/*
 * Theme: Twenty Twenty-Five — 九龍果菜同業商會有限公司
 * Centralised stylesheet for all custom templates
 */

/* ================================================================
   1. GLOBAL RESETS & BASE
   ================================================================ */
* { box-sizing:border-box; }
body { font-family:"Microsoft JhengHei","Heiti TC",Arial,sans-serif; margin:0; background:#e8e8e8; }
a { text-decoration:none; }
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }

/* ================================================================
   2. HEADER
   ================================================================ */
.site-header { background:#fff; position:sticky; top:0; z-index:100; overflow:hidden; }
.header-topbar { width:100%; height:5px; background:#00873c; }
.header-inner { max-width:1180px; margin:0 auto; padding:14px 20px 8px; position:relative; z-index:2; }
.header-bg { position:absolute; inset:5px 0 0; z-index:0; overflow:hidden; }
.header-bg img { width:100%; height:100%; object-fit:cover; filter:blur(6px) brightness(1.15); opacity:0.18; }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; z-index:2; }
.header-brand { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.header-logo { flex-shrink:0; }
.header-logo svg { display:block; }
.header-logo-img { max-height:60px; width:auto; display:block; }
.header-title { display:flex; flex-direction:column; }
.header-title-cn { font-size:20px; font-weight:700; color:#b8860b; letter-spacing:.5px; line-height:1.2; white-space:nowrap; }
.header-title-en { font-size:11px; color:#8a8a8a; font-weight:400; line-height:1.3; white-space:nowrap; margin-top:1px; }
.header-search { flex-shrink:0; }
.header-search input {
  width:180px; padding:7px 14px; border:2px solid #00873c; border-radius:20px;
  font-size:13px; color:#333; outline:none; background:#fff; transition:box-shadow .2s;
}
.header-search input:focus { box-shadow:0 0 0 3px rgba(0,135,60,.12); }
.header-search input::placeholder { color:#b0b0b0; }
.header-nav-wrap { position:relative; z-index:2; margin-top:12px; }
.header-nav { display:flex; justify-content:center; gap:0; list-style:none; margin:0; padding:0; }
.header-nav li { margin:0; }
.header-nav a {
  display:block; padding:8px 20px; font-size:14px; font-weight:600; color:#555;
  transition:color .15s; white-space:nowrap;
}
.header-nav a:hover { color:#00873c; }
.header-nav a.active { color:#00873c; }

/* ================================================================
   3. HERO AREAS
   ================================================================ */
.hero-wrap { width:100%; height:380px; position:relative; overflow:hidden; background:#222; }
.hero-wrap img { width:100%; height:100%; object-fit:cover; filter:brightness(.7); display:block; }

/* Slider hero (Smart Slider 3 banner — homepage style, full height) */
.hero-wrap--slider { height:auto; }
.hero-wrap--slider + .content-card { margin-top:-80px; }

/* Simple gradient hero (used on /contact/) */
.hero-simple { width:100%; height:380px; background:linear-gradient(135deg,#00421a,#006428,#00873c); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.hero-simple::before { content:''; position:absolute; inset:0; opacity:.1; background-image:linear-gradient(45deg,#bfa15f 1px,transparent 1px),linear-gradient(-45deg,#bfa15f 1px,transparent 1px); background-size:40px 40px; }
.hero-simple h1 { color:#fff; font-size:28px; font-weight:700; margin:0; position:relative; z-index:1; letter-spacing:1px; }
.hero-simple p { color:rgba(255,255,255,.7); font-size:14px; margin:6px 0 0; position:relative; z-index:1; }

/* ================================================================
   4. CONTENT CARDS (white card overlaying hero)
   ================================================================ */
.content-card { max-width:1100px; margin:-240px auto 0; position:relative; z-index:10; padding:0 16px 40px; }
.card-inner { background:#fff; box-shadow:0 4px 30px rgba(0,0,0,.08); 
   padding:24px 32px 28px; 
}

/* ================================================================
   5. BREADCRUMB + SECTION TITLE
   ================================================================ */
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:#888; margin-bottom:16px; }
.breadcrumb svg { width:15px; height:15px; flex-shrink:0; }
.breadcrumb a { color:#888; transition:color .15s; }
.breadcrumb a:hover { color:#00873c; }
.breadcrumb .sep { color:#ccc; }
.breadcrumb .current { color:#00873c; font-weight:600; }

.section-title { background:#00873c; padding:10px 18px; margin-bottom:20px; }
.section-title h1 { color:#fff; font-size:16px; font-weight:700; margin:0; letter-spacing:.5px; }

/* ================================================================
   6. NEWS / EVENTS CARD GRID (shared by /news/ & /events/)
   ================================================================ */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.news-card { background:#fff; border:1px solid #e2e2e2; overflow:hidden; transition:box-shadow .2s; }
.news-card:hover { box-shadow:0 2px 14px rgba(0,0,0,.07); }
.news-card img { width:100%; height:185px; object-fit:cover; display:block; background:#f2f2f2; }
.news-card-body { padding:14px 16px 12px; }
.news-card h2 { color:#00873c; font-size:15px; font-weight:700; margin:0 0 3px; line-height:1.4; }
.news-card p { color:#666; font-size:13px; margin:0 0 10px; line-height:1.5; }
.news-card-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #eee; padding-top:9px; }
.news-card-date { color:#999; font-size:12px; }
.news-card-btn { background:#00873c; color:#fff; font-size:12px; font-weight:700; padding:5px 16px; border:none; cursor:pointer; transition:background .15s; }
.news-card-btn:hover { background:#006428; }

/* ================================================================
   7. PAGINATION
   ================================================================ */
.pagination-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:24px; padding-top:16px; border-top:1px solid #e0e0e0; }
.pagination-wrap .total-text { font-size:13px; color:#666; margin-right:4px; }
.pagination-wrap a,.pagination-wrap span.pn {
  display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 7px;
  border:1px solid #ddd;border-radius:4px;font-size:13px;color:#333;transition:all .12s;
}
.pagination-wrap a:hover { background:#f2f2f2; border-color:#bbb; }
.pagination-wrap .current { background:#00873c; color:#fff; border-color:#00873c; }
.pagination-wrap .dots { border:none; color:#999; min-width:auto; padding:0 5px; }
.pagination-wrap .arrow { font-weight:700; }
.pagination-wrap .arrow.disabled { opacity:.3; pointer-events:none; }
.per-page-select { font-size:13px; padding:4px 6px; border:1px solid #ddd; border-radius:4px; background:#fff; }
.goto-wrap { display:inline-flex; align-items:center; gap:4px; }
.goto-input { width:48px; padding:4px 6px; font-size:13px; border:1px solid #ddd; border-radius:4px; text-align:center; }
.goto-btn { padding:4px 10px; font-size:13px; background:#00873c; color:#fff; border:none; border-radius:4px; cursor:pointer; }
.goto-btn:hover { background:#006428; }

/* ================================================================
   8. FOOTER
   ================================================================ */
.site-footer { background:#e8f5e9; border-top:2px solid #00873c; margin-top:60px; padding:32px 20px; }
.footer-inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; gap:40px; font-size:12px; color:#666; }
.footer-left h4 { color:#00873c; font-size:14px; font-weight:700; margin:0 0 10px; }
.footer-left p { margin:4px 0; }
.footer-left a { color:#666; }
.footer-left a:hover { color:#006428; }
.footer-right { text-align:right; }
.footer-nav-links { display:flex; gap:16px; margin-bottom:12px; justify-content:flex-end; flex-wrap:wrap; }
.footer-nav-links a { color:#555; font-weight:600; font-size:12px; }
.footer-nav-links a:hover { color:#00873c; }
.footer-copy { color:#999; font-size:11px; }

/* ================================================================
   9. HOMEPAGE SPECIFIC
   ================================================================ */
/* Hero Carousel */
.home-hero-section { width:100%; background:#006428; }
.home-hero-inner { position:relative; width:100%; }
.home-hero-btn { position:absolute; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.5); font-size:36px; background:none; border:none; cursor:pointer; z-index:10; transition:color .2s; }
.home-hero-btn:hover { color:#fff; }
.home-hero-btn.left { left:8px; }
.home-hero-btn.right { right:8px; }
.home-hero-img { width:100%; height:400px; background:#333; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.home-hero-img img { width:100%; height:100%; object-fit:cover; }
.home-hero-caption { text-align:center; margin-top:12px; }
.home-hero-caption p { color:#fff; font-size:15px; font-weight:700; margin:0; letter-spacing:1px; }
.home-hero-dots { display:flex; justify-content:center; gap:6px; padding-top:8px; }
.home-hero-dots span { width:16px; height:4px; display:inline-block; }
.home-hero-dots .active { background:#f5c542; }
.home-hero-dots .inactive { background:#1e6b3a; }

/* Logo Strip (scrolling carousel) */
.logo-strip { background:#fff; border-bottom:1px solid #e5e7eb; padding:24px 0; overflow:hidden; }
.logo-scroll-wrap { width:100%; overflow:hidden; }
.logo-scroll-track { display:flex; gap:20px; animation:scrollLogos 30s linear infinite; width:max-content; }
.logo-scroll-track:hover { animation-play-state:paused; }
@keyframes scrollLogos { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.logo-card { border:1px solid #e5e7eb; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:160px; height:110px; background:#fff; text-align:center; flex-shrink:0; }
.logo-img { width:48px; height:48px; object-fit:contain; margin-bottom:6px; display:block; }

@media (max-width:768px) {
  .header-logo-img { max-height:40px; }
  .header-title-cn { font-size:15px; white-space:normal; }
  .header-title-en { font-size:9px; white-space:normal; }
  .header-row { flex-wrap:wrap; }
  .header-search input { width:140px; }
  .header-nav a { padding:6px 12px; font-size:12px; }
}
.logo-placeholder { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:#f0f0f0; border-radius:8px; font-size:20px; font-weight:700; color:#999; margin-bottom:6px; }
.logo-card .icon { font-size:28px; margin-bottom:6px; }
.logo-card .label { font-size:10px; font-weight:700; letter-spacing:2px; color:#333; text-transform:uppercase; }

/* Chairman (new session design) */
.kln-chairman {
  width:100%;
  background:url('/wp-content/uploads/2026/06/理事長背景圖-scaled.png') center/cover;
  /* padding:60px 0; */
  position:relative;
}
.kln-chairman::before {
  content:''; position:absolute; inset:0;
  background:rgba(245,238,225,.7);
}
.kln-chairman-inner {
  max-width:1260px; margin:0 auto; padding:0 20px;
  display:flex; flex-direction:column; gap:32px;
  position:relative; z-index:1;
}
@media(min-width:768px) { .kln-chairman-inner { flex-direction:row; align-items:center; } }
.kln-chairman-left { flex:1; }
.kln-chairman-title {
  width:250px; font-size:28px; font-weight:700; color:#111; margin:0 0 8px;
  border-bottom:4px solid #006428; padding-bottom:6px;
}
.kln-chairman-org { font-size:20px; font-weight:700; color:#111; margin:0 0 14px; padding-top:20px; padding-bottom:20px;}
.kln-chairman-list { list-style:none; padding:0; margin:0 0 20px; }
.kln-chairman-list li {  font-weight:700; font-size:14px; margin-bottom:6px; }
.kln-chairman-list li::before { color:#006428; content:'▸ '; }
.kln-chairman-btn {
  display:inline-block; background:#006428; color:#fff; font-size:13px; font-weight:700;
  padding:10px 28px; border:none; transition:background .2s;
}
.kln-chairman-btn:hover { background:#004d1f; }
.kln-chairman-right { width:450px; flex-shrink:0; margin:0 auto; }
.kln-chairman-photo { width:100%; height:auto; display:block; object-fit:contain; }

/* Two Column */
.two-col { max-width:1260px; margin:0 auto; padding:60px 20px; display:grid; grid-template-columns:1fr; gap:48px; }
.col-header { border-bottom:4px solid #00873c; padding-bottom:4px; margin-bottom:16px; }
.col-header h3 { font-size:28px; font-weight:700; color:#333; margin:0; }
.col-img { width:100%; height:240px; background:#333; border:1px solid #e5e7eb; position:relative; overflow:hidden; }
.col-img img { width:100%; height:100%; object-fit:cover; }
.col-img .more-btn { position:absolute; bottom:8px; right:8px; background:#00873c; color:#fff; font-size:10px; font-weight:700; padding:4px 12px; transition:background .2s; }
.col-img .more-btn:hover { background:#006428; }
.news-list { border-top:1px solid #e5e7eb; }
.news-item { padding:12px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px dashed #ddd; font-size:12px; font-weight:600; color:#555; transition:color .2s; }
.news-item:hover { color:#00873c; }
.news-item .date { color:#b0b0b0; font-family:monospace; font-weight:500; }

/* Historical Photo */
.history-section { width:100%; background:#d4d0c8; padding:40px 0; border-top:1px solid #bbb; border-bottom:1px solid #bbb; }
.history-inner { max-width:1260px; margin:0 auto; padding:0 20px; }
.history-inner h3 { font-size:28px; font-weight:700; color:#333; margin:0 0 16px; }
.history-img { width:100%; height:280px; background:#333; border:4px solid #fff; box-shadow:0 2px 12px rgba(0,0,0,.15); overflow:hidden; position:relative; }
.history-img img { width:100%; height:100%; object-fit:cover; }
.history-overlay { position:absolute; bottom:6px; right:6px; }
.history-overlay a { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#006428,#00421a); color:#fff; padding:10px 16px; border-radius:10px; border:2px solid #bfa15f; font-size:11px; font-weight:700; transition:all .3s; box-shadow:0 4px 15px rgba(0,0,0,.3); }
.history-overlay a:hover { transform:scale(1.05); background:linear-gradient(135deg,#00873c,#006428); }
.history-overlay .sub { font-size:9px; color:#f5c542; display:block; font-weight:800; letter-spacing:1px; text-transform:uppercase; }

/* Activities */
.activities-section { max-width:1260px; margin:0 auto; padding:60px 20px; }
.activities-header { border-bottom:4px solid #00873c; padding-bottom:4px; margin-bottom:24px; }
.activities-header h3 { font-size:28px; font-weight:700; color:#333; margin:0; }
.activities-grid { display:grid; grid-template-columns:1fr; gap:24px; }
.activity-card { background:#fff; border:1px solid #e5e7eb; overflow:hidden; transition:box-shadow .2s; }
.activity-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); }
.activity-card img { width:100%; height:180px; object-fit:cover; display:block; }
.activity-body { padding:16px; }
.activity-body h4 { font-size:14px; font-weight:700; color:#333; margin:0 0 4px; }
.activity-body p { font-size:11px; color:#777; margin:0 0 12px; line-height:1.5; }
.activity-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #f0f0f0; padding-top:10px; }
.activity-date { font-size:10px; color:#bbb; font-family:monospace; }
.activity-btn { background:#00873c; color:#fff; font-size:10px; font-weight:700; padding:4px 12px; transition:background .2s; display:inline-block; }
.activity-btn:hover { background:#006428; }

/* Fixed Badge */
.fixed-badge { position:fixed; bottom:80px; right:24px; z-index:50; }
.fixed-badge a { display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,#006428,#00421a); color:#fff; padding:12px 18px; border-radius:12px; border:2px solid #bfa15f; font-size:12px; font-weight:700; transition:all .3s; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.fixed-badge a:hover { transform:scale(1.05); background:linear-gradient(135deg,#00873c,#006428); }
.fixed-badge .sub { font-size:9px; color:#f5c542; display:block; font-weight:800; letter-spacing:1px; text-transform:uppercase; }

/* ================================================================
   10. PAGE BODY WRAPPER (for full-width pages like /about/)
   ================================================================ */
.page-body { font-size:13px; line-height:1.7; color:#444; }
.page-body p { margin:0 0 10px; }

/* ================================================================
   11. WORDPRESS PAGINATION OVERRIDES
   ================================================================ */
.page-numbers { display:inline-flex; gap:4px; list-style:none; padding:0; margin:0; }
.page-numbers li { display:inline; }
.page-numbers a,.page-numbers span {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  border:1px solid #e5e7eb; border-radius:8px;
  font-size:13px; font-weight:600; color:#374151;
  text-decoration:none; transition:all .2s;
}
.page-numbers a:hover { background:#00873c; color:#fff; border-color:#00873c; }
.page-numbers .current { background:#00873c; color:#fff; border-color:#00873c; }
.page-numbers .dots { border:none; color:#9ca3af; min-width:auto; }

/* ================================================================
   12. RESPONSIVE
   ================================================================ */
@media (min-width:768px) {
  .chairman-inner { flex-direction:row; align-items:center; }
  .two-col { grid-template-columns:1fr 1fr; }
  .activities-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  .news-grid { grid-template-columns:1fr; }
  .card-inner { padding:16px; }
  .content-card { margin-top:-160px; }
  .hero-wrap { height:240px; }
  .hero-simple { height:160px; }
  .hero-simple h1 { font-size:22px; }
  .hero-wrap--slider + .content-card { margin-top:-40px; }
}

/* ================================================================
   13. WORDPRESS SLIDESHOW / GALLERY BLOCK
   ================================================================ */
.home-hero-section .wp-block-gallery {
    margin:0 !important; padding:0 !important;
    width:100%; height:400px;
}
.home-hero-section .wp-block-gallery .wp-block-image {
    width:100% !important; height:400px; margin:0 !important; flex-grow:0 !important; flex-basis:100% !important;
}
.home-hero-section .wp-block-gallery .wp-block-image img {
    width:100%; height:400px; object-fit:cover;
}
.home-hero-section .wp-block-gallery.is-style-slideshow {
    display:block; overflow:hidden; position:relative;
}
.home-hero-section .wp-block-gallery .wp-element-caption {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(transparent,rgba(0,0,0,.6));
    color:#fff; padding:30px 20px 12px; font-size:14px; font-weight:700; text-align:center;
}
.home-hero-section .blocks-gallery-grid,
.home-hero-section .wp-block-gallery .blocks-gallery-item { margin:0 !important; }