/*
Theme Name: Charoen Thai Cuisine
Theme URI: https://charoenthaicuisine.com
Author: BESTHOMECONDO
Description: ธีมหน้าเดียว (One-page theme) สำหรับร้าน Charoen Thai Cuisine แปลงมาจากไฟล์ export ของ Canva
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: charoen-thai
*/

:root{--ivory:#F8F4ED;--green:#214132;--gold:#C9A24C;--brown:#453225;--ink:#2D2D2D}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,sans-serif !important;color:var(--ink);background:var(--ivory)}
h1,h2,h3,.serif{font-family:"Cormorant Garamond",serif !important}
section{scroll-margin-top:78px}
.site-shell{width:100%;overflow:hidden}

.focus-ring:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.nav-link{position:relative}
.nav-link:after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .25s}
.nav-link:hover:after,.nav-link:focus-visible:after{width:100%}

.hero{min-height:100vh;position:relative;isolation:isolate}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,29,23,.88),rgba(22,29,22,.57) 55%,rgba(17,20,16,.2));z-index:1}
.hero-content{z-index:2;position:relative}

.eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.68rem;font-weight:700}
.gold-rule{width:58px;height:1px;background:var(--gold)}

.image-zoom{overflow:hidden}
.image-zoom img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.image-zoom:hover img{transform:scale(1.06)}

.dish-card{transition:transform .28s ease,box-shadow .28s ease}
.dish-card:hover{transform:translateY(-7px);box-shadow:0 24px 45px rgba(69,50,37,.15)}

.reveal{animation:rise .8s both}
.delay-1{animation-delay:.13s}
.delay-2{animation-delay:.25s}
.delay-3{animation-delay:.38s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.reveal-on-scroll{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal-on-scroll.visible{opacity:1;transform:none}

.mobile-menu{display:none}
.mobile-menu.is-open{display:flex}

.map-panel{background:linear-gradient(135deg,#dfe4d7,#bac8b4);position:relative;overflow:hidden}
.map-panel:before,.map-panel:after{content:"";position:absolute;background:rgba(255,255,255,.68);transform:rotate(-24deg)}
.map-panel:before{width:150%;height:32px;left:-20%;top:44%}
.map-panel:after{width:130%;height:22px;right:-20%;top:18%;transform:rotate(38deg)}
.map-line{position:absolute;background:#adc0a6;height:13px;border-radius:20px;z-index:1}
.map-pin{position:absolute;z-index:2;left:51%;top:49%;transform:translate(-50%,-100%);filter:drop-shadow(0 5px 4px rgba(0,0,0,.18))}

@media(max-width:767px){
  .hero:after{background:linear-gradient(90deg,rgba(18,29,23,.91),rgba(18,29,23,.45))}
  .mobile-only{display:flex!important}
}
@media(min-width:768px){
  .mobile-only{display:none!important}
}


.map-panel {
  position: relative;
  overflow: hidden;
}

.map-panel::before,
.map-panel::after {
  display: none !important;
  content: none !important;
}

.map-panel iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


  .hero h1 {
    font-family: 'Yellowtail', cursive !important;
    font-weight: 400 !important;
  }