/*
Theme Name: Saranrom Thai
Theme URI: https://saranromthai.com
Author: Saranrom Thai Digital Team
Author URI: https://saranromthai.com
Description: A premium, hand-coded WordPress theme built exclusively for Saranrom Thai, a Bib Gourmand Thai street-food restaurant in Elmhurst, NY. No page builders. Fully custom, accessible, and optimized for Core Web Vitals, Local SEO, and Answer/Generative Engine Optimization.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saranrom
Tags: restaurant, custom-menu, custom-logo, translation-ready, accessibility-ready, block-patterns
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --color-primary:#26402F;
  --color-primary-dark:#152219;
  --color-primary-light:#3C5C46;
  --color-secondary:#B98A3E;
  --color-secondary-light:#D8B876;
  --color-accent:#C1442D;
  --color-cream:#FAF3E6;
  --color-ivory:#FFFDF8;
  --color-charcoal:#241F1B;
  --color-charcoal-70:#241f1bb3;
  --color-line:#E3D9C4;
  --color-white:#FFFFFF;
  --color-success:#2E6B45;
  --color-error:#B3261E;

  --font-heading:"Playfair Display", Georgia, "Times New Roman", serif;
  --font-script:"Cormorant Garamond", Georgia, serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-8:3rem; --space-10:4rem; --space-12:6rem;

  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-full:999px;
  --shadow-sm:0 1px 3px rgba(21,34,25,.08);
  --shadow-md:0 8px 24px rgba(21,34,25,.12);
  --shadow-lg:0 20px 48px rgba(21,34,25,.18);
  --container:1240px;
  --transition:.25s ease;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--color-ivory); color:var(--color-charcoal);
  font-family:var(--font-body); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--color-primary); text-decoration:none; transition:color var(--transition);}
a:hover{color:var(--color-accent);}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading); color:var(--color-primary-dark); line-height:1.2; margin:0 0 var(--space-4);}
h1{font-size:clamp(2.25rem,4vw + 1rem,3.75rem);}
h2{font-size:clamp(1.75rem,2.5vw + 1rem,2.75rem);}
h3{font-size:1.4rem;}
p{margin:0 0 var(--space-4);}
ul,ol{padding-left:1.25rem;}
button, input, select, textarea{font-family:inherit; font-size:1rem;}
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5);}
.eyebrow{
  font-family:var(--font-script); font-style:italic; color:var(--color-secondary);
  font-size:1.35rem; display:block; margin-bottom:var(--space-2);
}
.section{padding-block:var(--space-12);}
.section--cream{background:var(--color-cream);}
.section--dark{background:var(--color-primary-dark); color:var(--color-cream);}
.section--dark h2, .section--dark h3{color:var(--color-ivory);}
.text-center{text-align:center;}
.chili::after{content:"🌶️"; font-size:.85em; margin-left:.15em;}

/* Accessibility */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--color-primary);
  color:#fff; padding:.75rem 1.25rem; z-index:9999; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--color-accent); outline-offset:2px;}
.screen-reader-text{
  position:absolute!important; width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important;}
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  padding:.9rem 1.75rem; border-radius:var(--radius-full); border:2px solid transparent;
  cursor:pointer; transition:transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
  font-size:.95rem; letter-spacing:.02em;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--color-accent); color:#fff;}
.btn-primary:hover{background:#a3381f; color:#fff; box-shadow:var(--shadow-md);}
.btn-outline{border-color:var(--color-ivory); color:var(--color-ivory); background:transparent;}
.btn-outline:hover{background:var(--color-ivory); color:var(--color-primary-dark);}
.btn-secondary{background:var(--color-secondary); color:var(--color-primary-dark);}
.btn-secondary:hover{background:var(--color-secondary-light); color:var(--color-primary-dark);}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:500; background:var(--color-ivory);
  border-bottom:1px solid var(--color-line); box-shadow:var(--shadow-sm);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-3);}
.site-branding{display:flex; align-items:center; gap:.75rem;}
.site-branding img{max-height:56px; width:auto;}
.site-title{font-family:var(--font-script); font-style:italic; font-size:1.9rem; color:var(--color-primary); margin:0;}
.site-title a{color:var(--color-primary);}
.site-tagline{display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--color-secondary); margin-top:-4px;}

.primary-nav ul{display:flex; gap:var(--space-6); list-style:none; margin:0; padding:0;}
.primary-nav a{color:var(--color-charcoal); font-weight:600; font-size:.95rem;}
.primary-nav a:hover, .primary-nav .current-menu-item > a{color:var(--color-accent);}
.header-cta{display:flex; align-items:center; gap:var(--space-4);}
.header-phone{font-weight:700; color:var(--color-primary-dark); white-space:nowrap;}
.menu-toggle{display:none; background:none; border:2px solid var(--color-primary); border-radius:var(--radius-sm); padding:.5rem .75rem; cursor:pointer;}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:var(--color-primary-dark); position:relative; margin:5px 0; transition:var(--transition);
}

@media (max-width:900px){
  .primary-nav{position:fixed; inset:0 0 0 auto; width:min(320px,85%); background:var(--color-ivory);
    transform:translateX(100%); transition:transform var(--transition); padding:var(--space-8) var(--space-5); box-shadow:var(--shadow-lg); z-index:600;}
  .primary-nav.is-open{transform:translateX(0);}
  .primary-nav ul{flex-direction:column; gap:var(--space-5);}
  .menu-toggle{display:block;}
  .header-phone{display:none;}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(21,34,25,.55), rgba(21,34,25,.75)), var(--color-primary-dark);
  background-size:cover; background-position:center; color:var(--color-ivory);
}
.hero-content{max-width:720px;}
.hero .eyebrow{color:var(--color-secondary-light);}
.hero h1{color:#fff;}
.hero p.lede{font-size:1.25rem; max-width:56ch; color:#f1ece0;}
.hero-actions{display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-6);}
.hero-badges{display:flex; gap:var(--space-6); margin-top:var(--space-10); flex-wrap:wrap;}
.hero-badge{text-align:left;}
.hero-badge strong{display:block; font-family:var(--font-heading); font-size:1.6rem; color:var(--color-secondary-light);}
.hero-badge span{font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:#e9e2d0;}

/* =========================================================
   CARDS / GRIDS
   ========================================================= */
.grid{display:grid; gap:var(--space-6);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;} }

.card{
  background:var(--color-white); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid var(--color-line); transition:transform var(--transition), box-shadow var(--transition);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.card img{aspect-ratio:4/3; object-fit:cover; width:100%;}
.card-body{padding:var(--space-5);}
.card-body .price{color:var(--color-accent); font-weight:700; float:right;}

.dish-card h3{display:flex; justify-content:space-between; gap:var(--space-3); align-items:baseline;}
.dish-card .thai-name{display:block; font-size:.85rem; color:var(--color-secondary); font-weight:500; margin:-6px 0 6px;}
.tag{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--color-cream); color:var(--color-primary); padding:.25rem .6rem; border-radius:var(--radius-full); margin:0 .3rem .3rem 0;
}
.tag--allergen{background:#fbeae7; color:var(--color-accent);}

/* Testimonials */
.testimonial{background:var(--color-cream); border-radius:var(--radius-md); padding:var(--space-6); position:relative; height:100%;}
.testimonial p{font-style:italic; font-size:1.05rem; color:var(--color-charcoal);}
.testimonial .stars{color:var(--color-secondary); letter-spacing:.15em; margin-bottom:var(--space-2);}
.testimonial cite{font-style:normal; font-weight:700; display:block; margin-top:var(--space-3); color:var(--color-primary-dark);}

/* Testimonial Slider / Carousel */
.testimonial-slider{position:relative; max-width:1100px; margin-inline:auto;}
.testimonial-track-wrap{overflow:hidden;}
.testimonial-track{display:flex; gap:var(--space-6); transition:transform .5s ease;}
.testimonial-slide{flex:0 0 100%; box-sizing:border-box;}
@media (min-width:760px){.testimonial-slide{flex:0 0 calc(50% - var(--space-3));}}
@media (min-width:1080px){.testimonial-slide{flex:0 0 calc(33.333% - var(--space-4));}}
.testimonial-controls{display:flex; justify-content:center; align-items:center; gap:var(--space-5); margin-top:var(--space-8);}
.testimonial-arrow{
  width:44px; height:44px; border-radius:50%; border:2px solid var(--color-secondary-light);
  background:transparent; color:var(--color-ivory); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background var(--transition), color var(--transition);
}
.testimonial-arrow:hover{background:var(--color-secondary); color:var(--color-primary-dark);}
.testimonial-dots{display:flex; gap:.5rem;}
.testimonial-dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); border:0; padding:0; cursor:pointer;}
.testimonial-dot.is-active{background:var(--color-secondary-light);}

/* =========================================================
   MENU PAGE
   ========================================================= */
.menu-nav{position:sticky; top:78px; background:var(--color-ivory); z-index:100; padding-block:var(--space-3); border-bottom:1px solid var(--color-line); overflow-x:auto;}
.menu-nav ul{display:flex; gap:var(--space-3); list-style:none; margin:0; padding:0 var(--space-5); white-space:nowrap;}
.menu-nav a{padding:.5rem 1rem; border-radius:var(--radius-full); background:var(--color-cream); font-weight:600; font-size:.85rem; color:var(--color-primary-dark);}
.menu-nav a:hover, .menu-nav a.is-active{background:var(--color-primary); color:#fff;}
.menu-category{padding-block:var(--space-10); scroll-margin-top:150px; border-bottom:1px solid var(--color-line);}
.menu-category-header{margin-bottom:var(--space-6);}
.menu-items{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5) var(--space-8);}
@media (max-width:700px){.menu-items{grid-template-columns:1fr;}}
.menu-item{display:flex; gap:var(--space-4); align-items:flex-start; border-bottom:1px dashed var(--color-line); padding-bottom:var(--space-4);}
.menu-item img{width:88px; height:88px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0;}
.menu-item-name{display:flex; justify-content:space-between; gap:var(--space-2); font-weight:700; color:var(--color-primary-dark);}
.menu-item-price{color:var(--color-accent); font-weight:700; white-space:nowrap;}
.menu-item .thai{display:block; color:var(--color-secondary); font-size:.85rem; margin-bottom:.25rem;}
.menu-item .desc{font-size:.9rem; color:var(--color-charcoal-70); margin:0;}
.allergen-note{background:#fbeae7; border-left:4px solid var(--color-accent); padding:var(--space-4) var(--space-5); border-radius:var(--radius-sm); margin-bottom:var(--space-8);}

/* =========================================================
   ABOUT / STORY
   ========================================================= */
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-10); align-items:center;}
@media (max-width:900px){.story-grid{grid-template-columns:1fr;}}
.story-grid img{border-radius:var(--radius-lg); box-shadow:var(--shadow-md);}
.timeline{border-left:2px solid var(--color-line); margin-left:var(--space-3); padding-left:var(--space-6);}
.timeline-item{position:relative; padding-bottom:var(--space-8);}
.timeline-item::before{content:""; position:absolute; left:-2.55rem; top:.35rem; width:14px; height:14px; border-radius:50%; background:var(--color-accent); border:3px solid var(--color-ivory);}
.timeline-item .year{font-family:var(--font-heading); color:var(--color-secondary); font-size:1.4rem;}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3);}
.gallery-grid figure{margin:0; border-radius:var(--radius-md); overflow:hidden; position:relative;}
.gallery-grid img{aspect-ratio:1; object-fit:cover; transition:transform .4s ease;}
.gallery-grid a:hover img{transform:scale(1.06);}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-10);}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.info-list{list-style:none; padding:0; margin:0;}
.info-list li{display:flex; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--color-line);}
.info-list strong{display:block; color:var(--color-primary-dark);}
.map-embed{border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); margin-top:var(--space-6);}
.map-embed iframe{width:100%; height:340px; border:0; display:block;}

.form-field{margin-bottom:var(--space-5);}
.form-field label{display:block; font-weight:600; margin-bottom:.4rem; color:var(--color-primary-dark);}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--color-line); border-radius:var(--radius-sm);
  background:var(--color-white); transition:border-color var(--transition);
}
.form-field input:focus, .form-field textarea:focus{border-color:var(--color-primary); outline:none;}
.form-field .required{color:var(--color-accent);}
.form-error{color:var(--color-error); font-size:.85rem; margin-top:.3rem;}
.form-notice{padding:var(--space-4); border-radius:var(--radius-sm); margin-bottom:var(--space-5);}
.form-notice.success{background:#e7f3ea; color:var(--color-success); border:1px solid var(--color-success);}
.form-notice.error{background:#fbeae7; color:var(--color-error); border:1px solid var(--color-error);}
.honeypot-field{position:absolute; left:-9999px;}

/* =========================================================
   FAQ (accordion)
   ========================================================= */
.faq-item{border-bottom:1px solid var(--color-line);}
.faq-question{
  width:100%; text-align:left; background:none; border:0; padding:var(--space-5) 0;
  font-family:var(--font-heading); font-size:1.15rem; color:var(--color-primary-dark);
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.faq-question::after{content:"+"; font-size:1.5rem; color:var(--color-accent); transition:transform var(--transition);}
.faq-item.is-open .faq-question::after{transform:rotate(45deg);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-item.is-open .faq-answer{max-height:600px;}
.faq-answer-inner{padding-bottom:var(--space-5); color:var(--color-charcoal-70);}

/* =========================================================
   BLOG
   ========================================================= */
.reading-progress{position:fixed; top:0; left:0; height:4px; background:var(--color-accent); width:0; z-index:1000;}
.breadcrumbs{font-size:.85rem; color:var(--color-charcoal-70); margin-bottom:var(--space-5);}
.breadcrumbs a{color:var(--color-charcoal-70); text-decoration:underline;}
.post-meta{display:flex; gap:var(--space-4); flex-wrap:wrap; color:var(--color-charcoal-70); font-size:.9rem; margin-bottom:var(--space-6);}
.post-featured-image{border-radius:var(--radius-md); margin-bottom:var(--space-8); box-shadow:var(--shadow-sm);}
.entry-content{max-width:75ch; font-size:1.08rem;}
.entry-content h2{margin-top:var(--space-8);}
.entry-content blockquote{border-left:4px solid var(--color-secondary); margin:var(--space-6) 0; padding-left:var(--space-5); font-style:italic; color:var(--color-primary-dark);}
.share-bar{display:flex; gap:var(--space-3); align-items:center; margin:var(--space-8) 0; padding:var(--space-5) 0; border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line);}
.share-bar a{width:38px; height:38px; border-radius:50%; background:var(--color-cream); display:flex; align-items:center; justify-content:center; color:var(--color-primary);}
.author-box{display:flex; gap:var(--space-5); background:var(--color-cream); padding:var(--space-6); border-radius:var(--radius-md); margin:var(--space-10) 0;}
.author-box img{width:88px; height:88px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.post-nav{display:flex; justify-content:space-between; gap:var(--space-5); margin:var(--space-10) 0;}
.post-nav a{flex:1; padding:var(--space-5); background:var(--color-cream); border-radius:var(--radius-md); display:block;}
.post-nav .label{display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-secondary);}
.related-posts{margin-top:var(--space-12);}
.card-post h3{font-size:1.1rem;}
.card-post .meta{font-size:.8rem; color:var(--color-charcoal-70);}

/* comments */
.comment-list{list-style:none; margin:0; padding:0;}
.comment{border-bottom:1px solid var(--color-line); padding:var(--space-5) 0;}
.comment .comment-author{font-weight:700; color:var(--color-primary-dark);}
.comment-respond{background:var(--color-cream); padding:var(--space-6); border-radius:var(--radius-md); margin-top:var(--space-8);}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--color-primary-dark); color:#e9e2d0; padding-block:var(--space-12) var(--space-6);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-8);}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h3{color:var(--color-secondary-light); font-size:1rem; text-transform:uppercase; letter-spacing:.08em;}
.site-footer a{color:#e9e2d0;}
.site-footer a:hover{color:var(--color-secondary-light);}
.site-footer ul{list-style:none; padding:0; margin:0;}
.site-footer li{margin-bottom:.6rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:var(--space-10); padding-top:var(--space-6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); font-size:.85rem; color:#bcb29c;}
.social-row{display:flex; gap:var(--space-3);}
.social-row a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;}

/* =========================================================
   404 / SEARCH
   ========================================================= */
.error-404{text-align:center; padding-block:var(--space-12);}
.error-404 h1{font-size:6rem; color:var(--color-secondary);}
.search-form{display:flex; gap:var(--space-3); max-width:520px; margin-inline:auto;}
.search-form input[type="search"]{flex:1; padding:.9rem 1.1rem; border:1.5px solid var(--color-line); border-radius:var(--radius-full);}
.search-results-count{color:var(--color-charcoal-70); margin-bottom:var(--space-8);}

/* Utility */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.visually-hidden{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0);}