/* ==========================================================================
   Acha Khao Piyo - home template
   Hero + search, cuisine grid, closing CTA.
   Hero background image is set inline on .hero from the Home page field.
   ========================================================================== */

/* ============ Hero ============
   Blocksy's transparent header sits over this section, so the hero reserves
   its height at the top and then centres its content, which keeps the space
   above and below the block equal.
   ------------------------------------------------------------------------ */
.hero{
  --akp-header-h:95px;
  position:relative;
  z-index:5; /* paints above the following sections so the dropdown can escape */
  display:flex;
  align-items:center;
  min-height:clamp(600px,88vh,860px);
  padding-top:var(--akp-header-h);
  color:#fff;
  background:var(--charcoal) center/cover no-repeat;
}
.hero:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,9,6,.72) 0%,rgba(15,9,6,.55) 45%,rgba(15,9,6,.86) 100%);
}
.hero-content{position:relative;z-index:2;padding:96px 0;text-align:center}
.hero-heading{
  font-size:clamp(36px,5.6vw,64px);
  line-height:1.06;letter-spacing:-1.2px;font-weight:700;
  margin:0 0 18px;color:#fff;
}
.hero-heading em{font-style:italic;font-weight:500;color:var(--primary);display:inline-block;position:relative}
.hero-subtitle{margin:0 auto 36px;max-width:480px;color:rgba(255,255,255,.82);font-size:16px}

/* ============ Hero search ============ */
.hero-search-wrap{width:min(760px,100%);margin:auto;position:relative;z-index:10}
.hero-search{
  display:flex;align-items:stretch;
  background:#fff;border-radius:var(--radius-md);padding:7px;box-shadow:var(--shadow-lg);
}
.search-field{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  padding:9px 18px;text-align:left;border-right:1px solid var(--border);
  margin:0;
}
.search-field:last-of-type{border-right:none}

/* Icons are inline SVG so they render identically everywhere */
.field-icon{
  display:grid;place-items:center;width:20px;height:20px;
  color:var(--muted);flex-shrink:0;
}
.field-icon i{display:block;font-size:16px;line-height:1}

.field-copy{display:flex;flex-direction:column;min-width:0;width:100%}
.field-copy label,
.field-copy .field-label{
  font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  color:var(--muted);margin:0;padding:0;line-height:1.4;
}

/* Reset the theme's form styling inside the hero: these fields are borderless
   by design and sit inside the white card, not in boxes of their own. */
.hero-search input,
.hero-search input[type="search"],
.hero-search input[type="text"]{
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  width:100%;
  min-height:0;
  height:auto;
  margin:0;
  padding:2px 0 0;
  font:inherit;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0;
}
.hero-search input::placeholder{color:#b7ab9e;opacity:1}
.hero-search input[type="search"]::-webkit-search-decoration,
.hero-search input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* Custom "Where" dropdown */
.select-field-wrap{position:relative}
.select-trigger{
  all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--ink);font-weight:500;padding:2px 18px 0 0;
}
.select-chevron{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;
  color:var(--muted);pointer-events:none;transition:transform .2s,color .2s;
}
.select-chevron i{display:block;font-size:11px;line-height:1}
.select-field-wrap.is-open .select-chevron{transform:translateY(-50%) rotate(180deg);color:var(--primary)}
.select-panel{
  position:absolute;top:calc(100% + 12px);left:-18px;
  width:250px;max-height:280px;overflow-y:auto;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:8px;list-style:none;margin:0;z-index:40;
}
.select-panel[hidden]{display:none}
.select-panel li{
  padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:background .15s,color .15s;margin:0;
}
.select-panel li:hover,.select-panel li.is-active{background:var(--primary-tint);color:var(--primary-dark)}
.select-panel li.is-selected{color:var(--primary);font-weight:700}
.select-panel li.is-selected:after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;float:right;font-size:11px}

/* Submit button: pill-free rounded rectangle that stretches to the card */
.hero-search .hero-search-button{
  border:0;background:var(--primary);color:#fff;
  border-radius:10px;padding:0 30px;
  font-family:inherit;font-weight:700;font-size:14px;line-height:1;
  letter-spacing:0;text-transform:none;
  cursor:pointer;transition:background .2s;flex-shrink:0;
  min-height:0;box-shadow:none;
}
.hero-search .hero-search-button:hover,
.hero-search .hero-search-button:focus{background:var(--primary-dark);color:#fff}

.hero-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-links a{
  color:rgba(255,255,255,.92);font-size:13px;font-weight:600;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  padding:8px 18px;border-radius:999px;transition:all .2s;
}
.hero-links a:hover{background:var(--primary);border-color:var(--primary);color:#fff}

/* ============ Cuisine grid ============ */
.cuisine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cuisine{
  position:relative;height:200px;border-radius:var(--radius-md);overflow:hidden;
  background:#eee;box-shadow:var(--shadow-sm);
}
.cuisine img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.cuisine:hover img{transform:scale(1.06)}
.cuisine:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,6,4,.82) 100%)}
.cuisine-name{
  position:absolute;z-index:1;left:18px;right:18px;bottom:16px;
  color:#fff;font-weight:700;font-size:16px;font-family:"Ivy Mode",serif;letter-spacing:-.2px;
}
.cuisine-count{
  position:absolute;z-index:1;left:18px;top:14px;
  font-size:11px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(4px);padding:4px 10px;border-radius:999px;
}

/* ============ Closing CTA ============ */
.cta{
  padding:80px 0;text-align:center;
  background:radial-gradient(600px 260px at 50% 0%,rgba(255,77,28,.08),transparent),var(--cream);
}
.cta h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.8px}
.cta h2 em{color:var(--primary);font-style:italic;font-weight:500}
.cta p{color:var(--muted);margin:12px auto 28px;max-width:440px;font-size:15px}
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--primary);color:#fff;padding:14px 30px;border-radius:999px;
  font-weight:700;font-size:14px;transition:background .2s,transform .2s;
}
.cta-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}

/* ============ Responsive ============ */
@media (max-width:980px){
  .cuisine-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .hero{--akp-header-h:70px;min-height:0}
  .hero-content{padding:56px 0 60px}
  .hero-search{flex-direction:column;gap:2px}
  .search-field{border-right:0;border-bottom:1px solid var(--border);padding:12px 14px}
  .select-panel{left:0;right:0;width:auto}
  .hero-search .hero-search-button{padding:14px;margin-top:6px}
  .cuisine-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cuisine{height:150px}
}
@media (max-width:460px){
  .cuisine-grid{grid-template-columns:1fr}
  .hero-links{gap:8px}
  .hero-links a{padding:7px 14px;font-size:12px}
}