/* ==========================================================================
   La Tingeria — Main Stylesheet
   Loaded after style.css (which only holds theme header + tokens)
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  background:var(--bg-body);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--color-primary); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover{ color:var(--color-primary-dark); }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:var(--lh-heading); margin:0 0 var(--space-2); font-weight:600; color:var(--color-ink); }
h1{ font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:-0.01em; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }
p{ margin:0 0 var(--space-2); }
ul,ol{ padding-left:1.25em; }
button{ font-family:inherit; }

/* ---- Accessibility ---- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--color-primary); color:#fff; padding:14px 22px;
  border-radius:0 0 var(--radius-sm) 0; font-weight:700; text-decoration:none;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline: none; box-shadow: var(--shadow-focus); border-radius: 4px; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- Layout ---- */
.container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--space-3); }
.container--narrow{ max-width:var(--container-narrow); }
.section{ padding: var(--space-7) 0; }
.section--tight{ padding: var(--space-5) 0; }
.section-head{ max-width: 720px; margin: 0 auto var(--space-5); text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-tiny);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--color-primary);
  margin-bottom: var(--space-2);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--color-secondary); display:inline-block; }
.section-head p{ color:var(--color-charcoal); font-size:1.1rem; }
.grid{ display:grid; gap:var(--space-4); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr;} }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:0.98rem; padding:14px 28px; border-radius:var(--radius-pill);
  border:2px solid transparent; cursor:pointer; transition: all var(--dur-fast) var(--ease-standard);
  text-decoration:none; line-height:1;
}
.btn-primary{ background:var(--btn-primary-bg); color:var(--btn-primary-text); }
.btn-primary:hover{ background:var(--btn-primary-bg-hover); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-secondary{ background:var(--btn-secondary-bg); color:var(--btn-secondary-text); border-color:var(--btn-secondary-border); }
.btn-secondary:hover{ background:var(--btn-secondary-bg-hover); color:var(--btn-secondary-text-hover); }
.btn-gold{ background:var(--color-secondary); color:var(--color-ink); }
.btn-gold:hover{ background:var(--color-secondary-dark); transform:translateY(-2px); }
.btn-lg{ padding:17px 34px; font-size:1.05rem; }
.btn-block{ width:100%; }

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:500; background:rgba(251,246,237,0.92);
  backdrop-filter: blur(10px); border-bottom:1px solid var(--color-border);
  height:var(--header-height); display:flex; align-items:center;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); width:100%; }
.site-branding{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.site-branding img{ height:52px; width:auto; }
.site-title{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--color-ink); margin:0; }
.site-title a{ color:inherit; text-decoration:none; }
.site-tagline{ display:block; font-size:0.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary); font-weight:700; }

.primary-nav ul{ display:flex; gap:var(--space-4); list-style:none; margin:0; padding:0; }
.primary-nav a{
  color:var(--color-ink); text-decoration:none; font-weight:600; font-size:0.98rem;
  padding:8px 2px; position:relative;
}
.primary-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--color-primary);
  transition:width var(--dur-fast) var(--ease-standard);
}
.primary-nav a:hover::after, .primary-nav .current-menu-item a::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:var(--space-2); }
.header-phone{ display:flex; align-items:center; gap:6px; font-weight:700; color:var(--color-ink); text-decoration:none; }

.menu-toggle{ display:none; background:none; border:2px solid var(--color-ink); border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer; }
@media (max-width: 900px){
  .primary-nav{ display:none; }
  .header-cta .btn-primary{ display:none; }
  .menu-toggle{ display:block; }
  .primary-nav.is-open{
    display:block; position:fixed; inset:var(--header-height) 0 0 0; background:var(--bg-body);
    padding:var(--space-4); overflow-y:auto; z-index:499;
  }
  .primary-nav.is-open ul{ flex-direction:column; gap:var(--space-3); }
  .primary-nav.is-open a{ font-size:1.3rem; }
}

/* ---- Hero ---- */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  color:#fff; overflow:hidden; background:var(--bg-dark);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(32,19,16,.55) 0%, rgba(32,19,16,.78) 100%); }
.hero-content{ position:relative; z-index:1; max-width:760px; }
.hero-content h1{ color:#fff; }
.hero-content p{ font-size:1.2rem; color:#f0e6da; max-width:560px; }
.hero-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
.hero-badges{ display:flex; gap:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; }
.hero-badge{ display:flex; align-items:center; gap:8px; font-size:0.9rem; font-weight:600; color:#f0e6da; }
.hero-badge strong{ color:var(--color-secondary-light); font-size:1.1rem; }

/* ---- Marquee strip ---- */
.marquee{ background:var(--color-primary); color:#fff; overflow:hidden; padding:12px 0; }
.marquee-track{ display:flex; gap:3rem; white-space:nowrap; animation: marquee 28s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee span{ font-weight:700; letter-spacing:.04em; font-size:0.9rem; text-transform:uppercase; }

/* ---- Cards ---- */
.card{ background:var(--bg-surface); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition: transform var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); border:1px solid var(--color-border); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card-img{ aspect-ratio: 4/3; overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition: transform var(--dur-slow) var(--ease-standard); }
.card:hover .card-img img{ transform:scale(1.06); }
.card-body{ padding:var(--space-3); }
.card-body h3{ font-size:1.2rem; margin-bottom:6px; }
.price-tag{ font-family:var(--font-display); font-weight:700; color:var(--color-primary); font-size:1.1rem; }

/* ---- Dish / Menu components ---- */
.dish-item{ display:flex; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px dashed var(--color-border); }
.dish-item:last-child{ border-bottom:none; }
.dish-info h4{ margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.dish-info p{ color:var(--color-charcoal); font-size:0.95rem; margin-bottom:0; }
.dish-price{ font-family:var(--font-display); font-weight:700; color:var(--color-primary); white-space:nowrap; font-size:1.15rem; }
.tag{ display:inline-flex; align-items:center; gap:4px; font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:var(--radius-pill); }
.tag-halal{ background:var(--color-accent); color:#fff; }
.tag-spicy{ background:var(--color-primary); color:#fff; }
.tag-veg{ background:var(--color-secondary); color:var(--color-ink); }
.tag-popular{ background:var(--color-ink); color:#fff; }

.menu-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:var(--space-5); }
.menu-filter-btn{
  background:var(--bg-surface); border:2px solid var(--color-border); color:var(--color-ink);
  padding:10px 20px; border-radius:var(--radius-pill); font-weight:700; cursor:pointer; font-size:0.92rem;
}
.menu-filter-btn.is-active, .menu-filter-btn:hover{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.menu-category{ margin-bottom:var(--space-6); }
.menu-category-head{ display:flex; align-items:baseline; gap:var(--space-2); margin-bottom:var(--space-3); }
.menu-category-head h2{ margin:0; }
.menu-category-head::after{ content:""; flex:1; height:1px; background:var(--color-border); }

/* ---- Testimonials ---- */
.review-card{ background:var(--bg-surface); border-radius:var(--radius-md); padding:var(--space-4); border:1px solid var(--color-border); box-shadow:var(--shadow-sm); height:100%; }
.review-stars{ color:var(--color-secondary-dark); letter-spacing:2px; margin-bottom:10px; }
.review-source{ display:flex; align-items:center; gap:10px; margin-top:var(--space-2); font-size:0.85rem; color:var(--color-stone); font-weight:700; }

/* ---- Stats band ---- */
.stats-band{ background:var(--color-ink); color:#fff; padding:var(--space-5) 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); text-align:center; }
.stat-num{ font-family:var(--font-display); font-size:2.4rem; color:var(--color-secondary-light); font-weight:700; }
.stat-label{ font-size:0.85rem; text-transform:uppercase; letter-spacing:.08em; color:#e5d9c8; }
@media (max-width:700px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---- CTA band ---- */
.cta-band{ background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark)); color:#fff; border-radius:var(--radius-lg); padding:var(--space-6); text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#fbe4e0; max-width:560px; margin-left:auto; margin-right:auto; }

/* ---- Footer ---- */
.site-footer{ background:var(--bg-dark); color:#e8ddce; padding-top:var(--space-6); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--space-4); padding-bottom:var(--space-5); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--space-2); }
.site-footer a{ color:#e8ddce; }
.site-footer a:hover{ color:var(--color-secondary-light); }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-social{ display:flex; gap:12px; margin-top:var(--space-2); }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:var(--space-3) 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.85rem; color:#a89684; }

/* ---- Forms ---- */
.form-group{ margin-bottom:var(--space-3); }
.form-group label{ display:block; font-weight:700; margin-bottom:6px; font-size:0.92rem; }
.form-control{
  width:100%; padding:13px 16px; border:2px solid var(--color-border); border-radius:var(--radius-sm);
  font-family:inherit; font-size:1rem; background:var(--bg-surface); color:var(--color-ink);
}
.form-control:focus{ border-color:var(--color-primary); outline:none; }
textarea.form-control{ min-height:140px; resize:vertical; }
.form-note{ font-size:0.85rem; color:var(--color-stone); }
.form-success{ background:#eaf4ea; border:1px solid var(--color-accent); color:var(--color-accent-dark); padding:var(--space-3); border-radius:var(--radius-sm); }
.form-error{ background:#fbeceb; border:1px solid var(--color-primary); color:var(--color-primary-dark); padding:var(--space-3); border-radius:var(--radius-sm); }

/* ---- Info blocks (contact page) ---- */
.info-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.info-list li{ display:flex; gap:14px; align-items:flex-start; }
.info-icon{ flex:0 0 40px; height:40px; width:40px; border-radius:50%; background:var(--color-sand); display:flex; align-items:center; justify-content:center; color:var(--color-primary); }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table td{ padding:8px 0; border-bottom:1px solid var(--color-border); }
.hours-table td:last-child{ text-align:right; font-weight:700; }
.hours-table tr.is-today td{ color:var(--color-primary); font-weight:800; }

/* ---- Blog ---- */
.post-card .card-body time{ color:var(--color-stone); font-size:0.85rem; }
.breadcrumbs{ font-size:0.85rem; color:var(--color-stone); margin-bottom:var(--space-3); }
.breadcrumbs a{ color:var(--color-stone); }
.reading-progress{ position:fixed; top:0; left:0; height:3px; background:var(--color-primary); z-index:600; width:0%; }
.single-article{ max-width: 760px; margin:0 auto; }
.single-article .featured-image{ border-radius:var(--radius-md); overflow:hidden; margin-bottom:var(--space-4); }
.single-article .entry-content h2{ margin-top:var(--space-5); }
.single-article .entry-content blockquote{ border-left:4px solid var(--color-primary); margin:var(--space-3) 0; padding:var(--space-2) var(--space-3); background:var(--bg-surface); font-style:italic; }
.article-meta{ display:flex; gap:var(--space-3); align-items:center; color:var(--color-stone); font-size:0.9rem; margin-bottom:var(--space-3); flex-wrap:wrap; }
.share-bar{ display:flex; gap:10px; margin:var(--space-4) 0; }
.share-bar a{ width:40px; height:40px; border-radius:50%; background:var(--bg-surface); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; }
.author-box{ display:flex; gap:var(--space-3); background:var(--bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3); margin:var(--space-5) 0; }
.author-box img{ width:84px; height:84px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-social{ display:flex; gap:10px; margin-top:8px; }
.post-nav{ display:flex; justify-content:space-between; gap:var(--space-3); margin:var(--space-5) 0; }
.post-nav a{ flex:1; background:var(--bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3); text-decoration:none; }
.post-nav .nav-next{ text-align:right; }
.post-nav span{ display:block; font-size:0.75rem; text-transform:uppercase; color:var(--color-stone); margin-bottom:4px; }

/* ---- FAQ accordion ---- */
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-question{
  width:100%; text-align:left; background:none; border:none; padding:var(--space-3) 0;
  font-family:var(--font-display); font-size:1.15rem; font-weight:600; display:flex; justify-content:space-between;
  align-items:center; cursor:pointer; color:var(--color-ink); gap:var(--space-2);
}
.faq-question .icon{ transition:transform var(--dur-fast); flex-shrink:0; }
.faq-question[aria-expanded="true"] .icon{ transform:rotate(45deg); }
.faq-answer{ display:none; padding-bottom:var(--space-3); color:var(--color-charcoal); }
.faq-answer.is-open{ display:block; }

/* ---- Map ---- */
.map-wrap{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
.map-wrap iframe{ width:100%; height:420px; border:0; display:block; }

/* ---- 404 / Search ---- */
.error-404{ text-align:center; padding:var(--space-8) 0; }
.error-404 .big-num{ font-family:var(--font-display); font-size:8rem; color:var(--color-primary); line-height:1; }

/* ---- Utilities ---- */
.text-center{ text-align:center; }
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.pill{ background:var(--color-sand); border-radius:var(--radius-pill); padding:6px 14px; font-size:0.8rem; font-weight:700; }
.aspect-video{ aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-md); }
.aspect-video img{ width:100%; height:100%; object-fit:cover; }

/* ---- Print ---- */
@media print{ .site-header, .site-footer, .marquee, .hero-actions{ display:none; } }