/* =========================================================
   Phuket Happenings — base stylesheet
   Foundation build: header, hero, finder, cards, map, footer.
   Colors/spacing are tokenized in :root so the whole look can
   be refined later without touching markup.
========================================================= */

:root{
  --ph-green: #24463B;
  --ph-green-deep: #17281F;
  --ph-green-soft: #3B6152;
  --ph-turquoise: #2E8C93;
  --ph-turquoise-light: #6FC2C4;
  --ph-orange: #E97C3C;
  --ph-orange-deep: #D65B2A;
  --ph-gold: #F0B84B;
  --ph-orchid: #B3388F;
  --ph-sand: #FBF5E7;
  --ph-sand-deep: #F1E2C3;
  --ph-cream: #FFFFFF;
  --ph-text: #2A3630;
  --ph-text-soft: #5B6B62;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --max-width: 1240px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--ph-sand);
  font-family:'Anuphan', sans-serif;
  color:var(--ph-text);
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:'Fraunces', serif;margin:0;}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:14px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  max-width:var(--max-width);
  margin:18px auto 0;
  padding:10px 12px 10px 20px;
  background:rgba(251,246,236,0.94);
  border-radius:var(--radius-pill);
  box-shadow:0 12px 30px -14px rgba(31,54,45,.35);
  border:1px solid rgba(255,255,255,.5);
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:52px;height:52px;border-radius:50%;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  flex:none;object-fit:cover;
}
.brand-name{
  font-family:'Fraunces',serif;font-size:18px;font-weight:600;
  letter-spacing:.4px;color:var(--ph-green-deep);
}

.site-nav{display:flex;align-items:center;gap:4px;}
.site-nav a{
  padding:9px 16px;border-radius:var(--radius-pill);
  font-size:14.5px;font-weight:500;color:var(--ph-green-deep);
  transition:background .2s ease, color .2s ease;
}
.site-nav a:hover{background:rgba(224,138,82,.14);color:var(--ph-orange-deep);}

.header-right{display:flex;align-items:center;gap:14px;}

.lang-switch{
  display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.6);
  border-radius:var(--radius-pill);
  padding:3px;
}
.lang-switch button{
  display:flex;align-items:center;gap:6px;
  border:none;background:transparent;cursor:pointer;
  padding:6px 10px;border-radius:var(--radius-pill);
  font-family:'Anuphan',sans-serif;font-size:13px;font-weight:600;
  color:var(--ph-text-soft);
}
.lang-switch button.active{
  background:var(--ph-cream);color:var(--ph-green-deep);
  box-shadow:0 3px 8px rgba(31,54,45,.15);
}
.flag{width:18px;height:13px;border-radius:2px;display:inline-block;overflow:hidden;flex:none;}

.cta-pill{
  padding:11px 22px;border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--ph-orange), var(--ph-orange-deep));
  color:#fff !important;font-weight:600;font-size:14.5px;
  box-shadow:0 8px 18px -6px rgba(217,120,65,.55);
  white-space:nowrap;
}

/* mobile nav toggle (hidden on desktop) */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;border:none;background:transparent;cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--ph-green-deep);
  border-radius:2px;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  max-width:var(--max-width);
  margin:22px auto 0;
  border-radius:36px;
  overflow:hidden;
  background-size:cover;
  background-position:center 42%;
  min-height:820px;
  display:flex;align-items:flex-end;justify-content:center;
  padding:170px 40px 90px;
  text-align:center;
  box-shadow:0 30px 60px -30px rgba(31,54,45,.35);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(to top, rgba(17,28,23,.6), rgba(17,28,23,0));
  pointer-events:none;
}
.hero-stack{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  color:#F2CD82;
}
.hero-stack img{
  width:104px;height:104px;border-radius:50%;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.hero-title{
  font-size:clamp(32px,5.2vw,54px);font-weight:700;letter-spacing:5px;
  text-shadow:0 3px 10px rgba(0,0,0,.75),0 10px 26px rgba(0,0,0,.55);
}
.hero-tag{
  margin:0;font-size:clamp(15px,1.9vw,22px);font-weight:600;letter-spacing:3px;
  text-shadow:0 3px 8px rgba(0,0,0,.75),0 6px 18px rgba(0,0,0,.5);
}
.hero-guide{
  margin:0;font-size:clamp(11.5px,1.15vw,14.5px);font-weight:600;letter-spacing:1.6px;
  text-shadow:0 2px 6px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9);
}

/* ---------- FINDER / SEARCH BAR ---------- */
.finder{
  position:relative;z-index:3;
  max-width:1020px;margin:26px auto 0;
  background:var(--ph-cream);
  border-radius:var(--radius-lg);
  box-shadow:0 26px 50px -22px rgba(31,54,45,.4);
  padding:22px 24px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  border:none;
}
.finder-filters{display:flex;gap:10px;flex-wrap:wrap;flex:1;}
.chip-select, .search-box{
  padding:11px 18px;border-radius:var(--radius-pill);
  background:var(--ph-sand);border:1px solid #eee0c6;
  font-size:14px;color:var(--ph-text);font-family:'Anuphan',sans-serif;
}
.search-box{min-width:220px;flex:1;}
.finder-actions{display:flex;gap:10px;}
.btn-gold{
  padding:11px 20px;border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--ph-gold), var(--ph-orange));
  color:#3a2410;font-weight:600;font-size:14px;
}
.btn-green{
  padding:11px 20px;border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--ph-turquoise), var(--ph-green));
  color:#fff;font-weight:600;font-size:14px;
}

/* ---------- VENUE CARDS ---------- */
.cards{
  max-width:1160px;margin:50px auto 0;padding:0 20px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.card{
  background:var(--ph-cream);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:0 16px 30px -18px rgba(31,54,45,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 36px -16px rgba(31,54,45,.35);}
.card-photo{height:130px;position:relative;}
.p1{background:linear-gradient(135deg,#6FC2C4,#2E8C93);}
.p2{background:linear-gradient(135deg,#F0B84B,#E97C3C);}
.p3{background:linear-gradient(135deg,#8FBBA0,#3B6152);}
.p4{background:linear-gradient(135deg,#D98FC0,#B3388F);}
.tag{
  position:absolute;top:12px;left:12px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(4px);
  padding:5px 12px;border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:600;color:var(--ph-green-deep);
}
.card-body{padding:16px 18px 20px;}
.card-body h3{font-size:17px;font-weight:600;margin-bottom:6px;}
.card-body .meta{font-size:12.5px;color:var(--ph-text-soft);margin:0 0 10px;line-height:1.5;}
.event-chip{
  display:inline-block;font-size:11.5px;font-weight:600;
  background:var(--ph-sand-deep);color:var(--ph-orange-deep);
  padding:5px 11px;border-radius:var(--radius-pill);
}

/* ---------- MAP SECTION ---------- */
.map-section{max-width:1160px;margin:56px auto 0;padding:0 20px;}
.map-section h2{font-size:24px;font-weight:600;margin:0 0 4px;}
.map-section p{color:var(--ph-text-soft);font-size:14px;margin:0 0 16px;}
.map-frame{
  height:340px;border-radius:var(--radius-lg);
  background:
    linear-gradient(rgba(46,140,147,.35), rgba(23,40,31,.45)),
    repeating-linear-gradient(45deg, #cfe8e6 0 18px, #bfe0dd 18px 36px);
  position:relative;overflow:hidden;
  box-shadow:0 20px 40px -20px rgba(31,54,45,.35);
}
.map-pin{
  position:absolute;width:34px;height:34px;border-radius:50% 50% 50% 0;
  background:var(--ph-orange);transform:rotate(-45deg);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;
}
.map-pin span{transform:rotate(45deg);color:#fff;font-size:12px;font-weight:700;}
.map-note{
  position:absolute;bottom:14px;left:14px;
  background:rgba(255,255,255,.9);padding:6px 14px;border-radius:var(--radius-pill);
  font-size:12px;color:var(--ph-text-soft);
}

/* ---------- FOOTER ---------- */
.site-footer{margin-top:64px;}
.wave{display:block;width:100%;height:60px;margin-bottom:-2px;}
.footer-inner{
  background:linear-gradient(175deg, var(--ph-green) 0%, #16261f 100%);
  padding:52px 40px 28px;color:#eef3ef;
}
.footer-grid{
  max-width:1160px;margin:0 auto;display:flex;gap:40px;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
}
.footer-brand{display:flex;align-items:center;gap:14px;}
.footer-brand .brand-mark{margin-bottom:0;}
.footer-brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:#fbf4e6;}
.footer-tag{color:#c3d4c9;font-size:13px;margin-top:3px;letter-spacing:.4px;}
.footer-nav{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:14px;}
.footer-nav a{color:#e7efe9;transition:color .2s ease;}
.footer-nav a:hover{color:var(--ph-gold);}
.footer-nav .dot{color:#5c7166;font-size:12px;}
.footer-connect{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.footer-email{font-size:14px;color:#e7efe9;transition:color .2s ease;}
.footer-email:hover{color:var(--ph-gold);}
.social-row{display:flex;gap:12px;}
.social-chip{width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;}
.social-chip:hover{transform:translateY(-3px);}
.social-chip img{width:100%;height:100%;object-fit:contain;}
.footer-bottom{
  max-width:1160px;margin:34px auto 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:#b7c7bd;
}
.footer-bottom a{color:#dbe6df;font-weight:500;}
.footer-bottom a:hover{color:var(--ph-gold);}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:900px){
  .site-header{margin:14px 14px 0;padding:8px 10px 8px 14px;gap:10px;}
  .brand-name{font-size:16px;}
  .site-nav{
    display:none;position:fixed;inset:0;z-index:60;
    flex-direction:column;justify-content:center;align-items:center;gap:18px;
    background:var(--ph-green-deep);
  }
  .site-nav a{color:#fdf4e2;font-size:20px;}
  .nav-toggle{display:flex;}
  body.nav-open .site-nav{display:flex;}
  .cta-pill{padding:9px 16px;font-size:13px;}
  .hero{min-height:460px;padding:120px 22px 118px;}
  .hero-stack img{width:76px;height:76px;}
  .hero-stack{gap:12px;}
  .cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .site-header{border-radius:24px;padding:8px 8px 8px 12px;}
  .brand-mark{width:42px;height:42px;}
  .brand-name{white-space:nowrap;font-size:13px;}
  .lang-switch button{padding:5px 8px;font-size:11.5px;}
  .lang-switch button .flag{width:15px;height:11px;}
  .cta-pill{padding:8px 13px;font-size:12px;}
  .hero{min-height:400px;padding:100px 14px 108px;}
  .hero-stack img{width:56px;height:56px;}
  .hero-title{letter-spacing:2px;}
  .finder{flex-direction:column;align-items:stretch;border-radius:22px;}
  .finder-filters{flex-direction:column;}
  .finder-actions{flex-direction:column;}
  .cards{grid-template-columns:1fr;padding:0 16px;}
  .map-section{padding:0 16px;}
  .footer-grid{flex-direction:column;align-items:flex-start;gap:22px;}
  .footer-connect{align-items:flex-start;}
  .footer-bottom{flex-direction:column;gap:8px;}
}
@media (max-width:420px){
  .brand-name{display:none;}
  .site-header{gap:6px;padding:7px 6px 7px 8px;}
  .lang-switch{padding:2px;}
  .lang-switch button{padding:4px 6px;font-size:10.5px;gap:3px;}
  .cta-pill{padding:7px 11px;font-size:11.5px;}
}