/* === VARIABLES === */
:root {
  --c-brown:      #6B4E35;
  --c-brown-dk:   #4A3320;
  --c-brown-lt:   #9B7B5B;
  --c-cream:      #FDFAF6;
  --c-warm:       #F5EFE6;
  --c-card:       #FBF7F2;
  --c-text:       #2C1F10;
  --c-muted:      #7D6050;
  --c-light:      #B09880;
  --c-border:     #E8D9C5;
  --shadow:       0 2px 16px rgba(107,78,53,.10);
  --shadow-sm:    0 1px 4px rgba(107,78,53,.07);
  --radius:       12px;
  --radius-sm:    6px;
  --max-w:        1040px;
}

/* === LAYOUT === */
.wrap        { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; }
.wrap.narrow { max-width:720px; }
.section     { padding:5rem 0; }
.bg-warm     { background:var(--c-warm); }

/* === TYPOGRAPHY === */
h1 { font-size:2.25rem; line-height:1.3; }
h2 { font-size:1.875rem; line-height:1.35; }
h3 { font-size:1.15rem; }
p  { color:var(--c-muted); line-height:1.9; }

.label {
  display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-brown); background:rgba(107,78,53,.1);
  padding:.25rem .875rem; border-radius:99px; margin-bottom:.875rem;
}

/* === BUTTONS === */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.75rem 1.75rem; border-radius:99px; font-size:.95rem;
  font-weight:500; font-family:inherit; cursor:pointer;
  border:2px solid transparent; transition:all .2s ease;
  text-decoration:none; white-space:nowrap;
}
.btn-primary { background:var(--c-brown); color:#fff; border-color:var(--c-brown); }
.btn-primary:hover { background:var(--c-brown-dk); border-color:var(--c-brown-dk); }
.btn-outline { background:transparent; color:var(--c-brown); border-color:var(--c-brown); }
.btn-outline:hover { background:var(--c-brown); color:#fff; }
.btn-light { background:#fff; color:var(--c-brown); border-color:#fff; }
.btn-light:hover { background:var(--c-warm); }
.btn-ghost { background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost:hover { background:rgba(255,255,255,.28); }
.btn-full { width:100%; justify-content:center; margin-top:1rem; }

/* === HEADER === */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(253,250,246,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-border); padding:.875rem 0;
  transition:box-shadow .3s;
}
.site-header.scrolled { box-shadow:var(--shadow-sm); }
.site-header .wrap { display:flex; align-items:center; gap:2rem; }

.site-logo { display:flex; flex-direction:column; line-height:1.2; flex-shrink:0; }
.logo-th   { font-size:1.05rem; font-weight:700; color:var(--c-brown); }
.logo-en   { font-size:.68rem; color:var(--c-light); letter-spacing:.06em; }

.site-nav  { flex:1; }
.nav-list  { display:flex; gap:1.75rem; }
.nav-list a { font-size:.875rem; color:var(--c-muted); font-weight:500; position:relative; padding-bottom:3px; }
.nav-list a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--c-brown); transition:width .25s; }
.nav-list a:hover, .nav-list .current-menu-item > a { color:var(--c-brown); }
.nav-list a:hover::after, .nav-list .current-menu-item > a::after { width:100%; }
.nav-list li { position:relative; }
.nav-list .sub-menu {
  display:block; position:absolute; top:100%; left:0;
  background:var(--c-cream); border:1px solid var(--c-border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  min-width:180px; padding:.5rem 0;
}
.nav-list .sub-menu { visibility:hidden; opacity:0; pointer-events:none; transition: opacity .15s, visibility .15s; }
.nav-list li:hover > .sub-menu { display:block; visibility:visible; opacity:1; pointer-events:auto; }
.nav-list .sub-menu a { display:block; padding:.5rem 1rem; font-size:.85rem; }
.nav-list .sub-menu a::after { display:none; }

.header-right { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.nav-cta {
  background:var(--c-brown); color:#fff; padding:.5rem 1.2rem;
  border-radius:99px; font-size:.85rem; font-weight:500; transition:all .2s;
}
.nav-cta:hover { background:var(--c-brown-dk); }

.hamburger { display:none; flex-direction:column; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span { display:block; width:100%; height:2px; background:var(--c-text); border-radius:2px; transition:all .3s; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* === HERO === */
.hero {
  background:linear-gradient(150deg,#7a5940 0%,#4a3320 60%,#2d1a0a 100%);
  padding:6rem 0 5.5rem; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0; opacity:.4;
  background:radial-gradient(ellipse at 80% 50%, rgba(180,130,80,.3) 0%, transparent 60%);
}
.hero .wrap { position:relative; max-width:620px; }
.hero .label { background:rgba(255,255,255,.15); color:rgba(255,255,255,.9); }
.hero h1 { color:#fff; margin:.75rem 0 1.25rem; font-size:2.75rem; }
.hero-desc { color:rgba(255,255,255,.8); font-size:1.05rem; margin-bottom:2rem; }
.hero-btns { display:flex; gap:.875rem; flex-wrap:wrap; }

/* === ABOUT === */
.two-col { display:grid; grid-template-columns:1fr 360px; gap:5rem; align-items:start; }
.col-text h2 { margin:.75rem 0 1.25rem; color:var(--c-text); }
.col-text p  { margin-bottom:1rem; }
.stats-row { display:flex; gap:2.5rem; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--c-border); }
.stat strong { display:block; font-size:1.5rem; font-weight:700; color:var(--c-brown); }
.stat span   { font-size:.8rem; color:var(--c-light); }

.info-card {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--radius); padding:1.75rem; position:sticky; top:90px;
}
.info-card h3 { font-size:1rem; margin-bottom:1.25rem; padding-bottom:.875rem; border-bottom:1px solid var(--c-border); color:var(--c-text); }
.info-list { display:flex; flex-direction:column; gap:1rem; margin-bottom:1.5rem; }
.info-list li { display:flex; gap:.875rem; align-items:flex-start; }
.info-list li > span { font-size:1.1rem; flex-shrink:0; margin-top:.1rem; }
.info-list strong { display:block; font-size:.85rem; font-weight:600; color:var(--c-text); }
.info-list p { font-size:.85rem; margin:0; line-height:1.5; }

/* === SECTION HEADER === */
.section-head { text-align:center; margin-bottom:3rem; }
.section-head h2 { margin:.5rem 0 .5rem; color:var(--c-text); }

/* === POSTS GRID === */
.posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.post-card {
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .25s, transform .25s;
}
.post-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); }
.card-img { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--c-warm); }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.post-card:hover .card-img img { transform:scale(1.05); }
.card-img-empty { display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.card-body { padding:1.25rem; }
.tag { display:inline-block; font-size:.72rem; font-weight:600; color:var(--c-brown); background:rgba(107,78,53,.1); padding:.2rem .65rem; border-radius:99px; margin-bottom:.625rem; }
.card-body h3 { font-size:.975rem; margin-bottom:.5rem; line-height:1.5; }
.card-body h3 a { color:var(--c-text); }
.card-body h3 a:hover { color:var(--c-brown); }
.card-body p { font-size:.875rem; margin-bottom:.75rem; }
.date { font-size:.75rem; color:var(--c-light); }
.center-btn { text-align:center; margin-top:2.5rem; }
.no-posts { text-align:center; padding:3rem; color:var(--c-muted); }

/* === SOCIAL BOX === */
.social-box {
  background:var(--c-warm); border:1px solid var(--c-border);
  border-radius:20px; padding:3.5rem; text-align:center;
}
.social-box h2 { margin:.75rem 0 1rem; color:var(--c-text); }
.social-box p  { max-width:480px; margin:0 auto 2rem; }
.social-btns { display:flex; gap:.875rem; justify-content:center; flex-wrap:wrap; }
.sbtn { padding:.65rem 1.5rem; border-radius:99px; font-size:.875rem; font-weight:600; transition:opacity .2s; }
.sbtn:hover { opacity:.85; }
.sbtn-line { background:#06C755; color:#fff; }
.sbtn-fb   { background:#1877F2; color:#fff; }
.sbtn-ig   { background:#E1306C; color:#fff; }

/* === FOOTER === */
.site-footer { background:var(--c-brown-dk); color:rgba(255,255,255,.7); padding:3.5rem 0 0; }
.footer-grid { display:grid; grid-template-columns:200px 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-logo { font-size:1.15rem; font-weight:700; color:#fff; display:block; margin-bottom:.75rem; }
.footer-brand p { font-size:.85rem; color:rgba(255,255,255,.5); line-height:1.8; margin-bottom:1rem; }
.footer-social { display:flex; gap:.5rem; flex-wrap:wrap; }
.footer-social a { font-size:.75rem; background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); padding:.3rem .75rem; border-radius:99px; transition:background .2s; }
.footer-social a:hover { background:rgba(255,255,255,.22); color:#fff; }
.footer-nav-col h4 { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:1rem; }
.footer-nav-col ul { display:flex; flex-direction:column; gap:.5rem; }
.footer-nav-col a { font-size:.875rem; color:rgba(255,255,255,.6); transition:color .2s; }
.footer-nav-col a:hover { color:#fff; }
.footer-bottom { text-align:center; padding:1.25rem 0; font-size:.78rem; color:rgba(255,255,255,.3); }

/* === INNER PAGES === */
.inner-page { padding:3.5rem 0; }
.page-title, .post-title { font-size:2rem; margin-bottom:1.5rem; color:var(--c-text); }
.featured-img { border-radius:var(--radius); overflow:hidden; margin-bottom:2rem; }
.featured-img img { width:100%; }
.page-content, .post-content { font-size:1rem; line-height:2; color:var(--c-text); }
.page-content h2, .post-content h2 { margin:2rem 0 1rem; }
.page-content p, .post-content p { color:var(--c-muted); margin-bottom:1.25rem; }
.page-content a, .post-content a { color:var(--c-brown); text-decoration:underline; }
.post-meta-top { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }

/* Single layout */
.single-layout { display:grid; grid-template-columns:1fr 280px; gap:4rem; align-items:start; }
.post-nav { display:flex; justify-content:space-between; padding:1.75rem 0; margin-top:2rem; border-top:1px solid var(--c-border); font-size:.875rem; }
.post-nav a { color:var(--c-brown); font-weight:500; }

.single-sidebar { position:sticky; top:90px; display:flex; flex-direction:column; gap:1.5rem; }
.sidebar-box { background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius); padding:1.5rem; }
.sidebar-box h3 { font-size:.95rem; font-weight:600; color:var(--c-text); margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--c-border); }
.sidebar-info { display:flex; flex-direction:column; gap:.5rem; }
.sidebar-info li { font-size:.875rem; color:var(--c-muted); }
.related-item { display:flex; flex-direction:column; gap:.2rem; padding:.75rem 0; border-bottom:1px solid var(--c-border); }
.related-item:last-child { border-bottom:none; }
.related-item a { font-size:.875rem; font-weight:500; color:var(--c-text); }
.related-item a:hover { color:var(--c-brown); }
.related-item .date { font-size:.75rem; }

/* Archive */
.archive-head { margin-bottom:3rem; padding-bottom:1.5rem; border-bottom:1px solid var(--c-border); }
.archive-head h1 { margin:.5rem 0; }
.pagination { margin-top:3rem; display:flex; justify-content:center; }
.nav-links { display:flex; gap:.5rem; }
.page-numbers { padding:.5rem .875rem; border:1px solid var(--c-border); border-radius:var(--radius-sm); color:var(--c-muted); font-size:.875rem; transition:all .2s; }
.page-numbers:hover, .page-numbers.current { background:var(--c-brown); color:#fff; border-color:var(--c-brown); }

/* === RESPONSIVE === */
@media (max-width:900px) {
  .two-col { grid-template-columns:1fr; gap:2.5rem; }
  .info-card { position:static; }
  .posts-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .single-layout { grid-template-columns:1fr; }
  .single-sidebar { position:static; }
}

@media (max-width:768px) {
  h1 { font-size:1.875rem; }
  .hero h1 { font-size:2rem; }
  section { padding:3.5rem 0; }
  .site-header { position:relative; }
  .site-nav {
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--c-cream); border-bottom:1px solid var(--c-border);
    padding:1rem 1.5rem; box-shadow:var(--shadow);
  }
  .site-nav.open { display:block; }
  .nav-list { flex-direction:column; gap:.25rem; }
  .nav-list .sub-menu { position:static; box-shadow:none; border:none; display:block; padding-left:1rem; background:transparent; }
  .hamburger { display:flex; }
  .posts-grid { grid-template-columns:1fr; }
  .stats-row { gap:1.5rem; flex-wrap:wrap; }
  .social-box { padding:2rem 1.25rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:480px) {
  .hero h1 { font-size:1.75rem; }
  .hero-btns, .social-btns { flex-direction:column; align-items:flex-start; }
  .social-btns { align-items:center; }
  .footer-grid { grid-template-columns:1fr; }
}

/* Grid 2 คอลัมน์ สำหรับ Section กิจกรรม */
.posts-grid--2 { grid-template-columns: repeat(2,1fr); }
@media (max-width: 768px) { .posts-grid--2 { grid-template-columns: 1fr; } }

/* ========================================
   FOOTER — override Elementor
   ======================================== */
footer,
footer.elementor-location-footer {
  background: #4A3320 !important;
  color: rgba(255,255,255,.7) !important;
  padding: 3.5rem 0 0 !important;
  display: block !important;
  height: auto !important;
  min-height: unset !important;
}
footer .footer-width-fixer,
footer .elementor-section-wrap { display: contents !important; }
footer .wrap {
  display: block !important;
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  background: transparent !important;
}
footer .footer-grid {
  display: grid !important;
  grid-template-columns: 200px 1fr 1fr 1fr !important;
  gap: 3rem !important;
  padding-bottom: 3rem !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
footer .footer-brand { display: block !important; }
footer .footer-logo { font-size: 1.15rem !important; font-weight: 700 !important; color: #fff !important; display: block !important; margin-bottom: .75rem !important; text-decoration: none !important; }
footer .footer-brand p { font-size: .85rem !important; color: rgba(255,255,255,.5) !important; line-height: 1.8 !important; margin-bottom: 1rem !important; }
footer .footer-social { display: flex !important; gap: .5rem !important; flex-wrap: wrap !important; }
footer .footer-social a { font-size: .75rem !important; background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.8) !important; padding: .3rem .75rem !important; border-radius: 99px !important; text-decoration: none !important; }
footer .footer-social a:hover { background: rgba(255,255,255,.22) !important; color: #fff !important; }
footer .footer-nav-col { display: block !important; }
footer .footer-nav-col h4 { font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: rgba(255,255,255,.4) !important; margin-bottom: 1rem !important; }
footer .footer-nav-col ul { display: flex !important; flex-direction: column !important; gap: .5rem !important; list-style: none !important; padding: 0 !important; }
footer .footer-nav-col a { font-size: .875rem !important; color: rgba(255,255,255,.6) !important; text-decoration: none !important; }
footer .footer-nav-col a:hover { color: #fff !important; }
footer .footer-bottom { text-align: center !important; padding: 1.25rem 0 !important; font-size: .78rem !important; color: rgba(255,255,255,.3) !important; }
footer .footer-bottom p { color: rgba(255,255,255,.3) !important; margin: 0 !important; }
@media (max-width: 900px) { footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; } }
@media (max-width: 480px) { footer .footer-grid { grid-template-columns: 1fr !important; } }


/* === ACTIVITIES PAGE === */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.activity-card.featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-card);
  transition: box-shadow .2s;
}
.activity-card.featured:hover { box-shadow: var(--shadow); }

.activity-card.featured .activity-thumb {
  display: block;
  overflow: hidden;
}
.activity-card.featured .activity-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 240px;
}
.activity-card.featured .activity-body {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.activity-card.featured .activity-title a {
  font-size: 20px;
}

.activity-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.activity-card:hover { box-shadow: var(--shadow); }

.activity-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-warm);
}
.activity-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.activity-card:hover .activity-thumb img { transform: scale(1.03); }

.activity-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.activity-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--c-brown-lt);
  background: var(--c-warm);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  width: fit-content;
}

.activity-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 8px;
}
.activity-title a {
  color: var(--c-text);
  text-decoration: none;
}
.activity-title a:hover { color: var(--c-brown); }

.activity-date {
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 10px;
  display: block;
}

.activity-excerpt {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.65;
  margin-bottom: 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.activity-card.featured .activity-excerpt {
  -webkit-line-clamp: 3;
}

.activity-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brown);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}
.activity-more:hover { color: var(--c-brown-dk); }

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-card);
  font-size: 14px;
  color: var(--c-brown);
  text-decoration: none;
  transition: all .15s;
}
.pagination a:hover { background: var(--c-warm); }
.pagination .current {
  background: var(--c-brown);
  color: var(--c-cream);
  border-color: var(--c-brown);
}

.page-header-inner {
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-border);
}
.page-header-inner h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 6px;
}
.page-header-inner p {
  font-size: 15px;
  color: var(--c-muted);
}

@media (max-width: 768px) {
  .activities-grid { grid-template-columns: 1fr; }
  .activity-card.featured { grid-template-columns: 1fr; }
  .activity-card.featured .activity-thumb img { min-height: 200px; }
  .activity-card.featured .activity-body { padding: 20px; }
}
@media (min-width: 769px) and (max-width: 960px) {
  .activities-grid { grid-template-columns: repeat(2, 1fr); }
  .activity-card.featured { grid-column: 1 / -1; }
}