/*
Theme Name: Richoux Child
Theme URI: https://richoux.sg
Description: Code-first block child theme for Richoux Pte Ltd (Singapore mala / hotpot canteen). Brand tokens in theme.json; provisioning engine in functions.php. Built to deploy on Hostinger via MCP with zero SSH.
Author: WarelyEcom
Template: twentytwentyfive
Version: 2.1.2
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: richoux-child
*/

:root {
  --rx-red: #5C1A1A;
  --rx-ember: #7A2222;
  --rx-gold: #C9A84C;
  --rx-gold-deep: #A8852E;
  --rx-cream: #FFF8E7;
  --rx-sand: #F3E7C9;
  --rx-dark: #1A0A00;
  --rx-shadow: 0 18px 40px -24px rgba(26,10,0,.55);
  --rx-radius: 16px;
}

body { background: var(--rx-cream); color: var(--rx-dark); }
.wp-site-blocks { overflow-x: clip; }

h1,h2,h3,h4 { letter-spacing: -0.01em; }

/* ---------- Reusable section scaffolding ---------- */
.rx-section { padding: clamp(3rem,7vw,6rem) 1.5rem; }
.rx-wrap { max-width: 1240px; margin-inline: auto; }
.rx-narrow { max-width: 760px; margin-inline: auto; }
.rx-center { text-align: center; }
.rx-eyebrow {
  display: inline-block; font-family: "Inter",sans-serif; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; font-size: .78rem;
  color: var(--rx-gold-deep); margin: 0 0 .9rem;
}
.rx-h { font-family: "Noto Serif SC",Georgia,serif; color: var(--rx-red); line-height: 1.12; margin: 0 0 1rem; }
.rx-h--xl { font-size: clamp(2rem,3.6vw,2.9rem); }
.rx-lead { font-size: 1.12rem; color: #4a3528; max-width: 60ch; }
.rx-center .rx-lead { margin-inline: auto; }
.rx-rule { width: 64px; height: 3px; background: var(--rx-gold); border: 0; margin: 1.1rem 0; border-radius: 2px; }
.rx-center .rx-rule { margin-inline: auto; }

/* ---------- Buttons ---------- */
.rx-btn {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  font-family: "Inter",sans-serif; font-weight: 700; font-size: 1rem;
  padding: .9rem 2rem; border-radius: 999px; text-decoration: none;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.rx-btn--gold { background: var(--rx-gold); color: var(--rx-dark); box-shadow: var(--rx-shadow); }
.rx-btn--gold:hover { background: var(--rx-dark); color: var(--rx-cream); transform: translateY(-2px); }
.rx-btn--ghost { background: transparent; color: var(--rx-cream); border: 2px solid rgba(255,248,231,.6); }
.rx-btn--ghost:hover { background: var(--rx-cream); color: var(--rx-red); border-color: var(--rx-cream); }
.rx-btn--red { background: var(--rx-red); color: var(--rx-cream); box-shadow: var(--rx-shadow); }
.rx-btn--red:hover { background: var(--rx-gold); color: var(--rx-dark); transform: translateY(-2px); }

/* ---------- Header ---------- */
.rx-header { position: sticky; top: 0; z-index: 100; background: var(--rx-red); }
.rx-header .wp-block-site-title a { text-decoration: none; color: var(--rx-cream); font-family: "Noto Serif SC",serif; font-weight: 900; }
.rx-header .wp-block-navigation { font-family: "Inter",sans-serif; font-weight: 600; }
.rx-header .wp-block-navigation a { color: var(--rx-cream); }
.rx-header .wp-block-navigation a:hover { color: var(--rx-gold); }
.rx-brand-cn { font-family: "Noto Serif SC",serif; color: var(--rx-gold); font-weight: 700; font-size: .85rem; letter-spacing:.3em; line-height:1; }

/* ---------- Hero ---------- */
.rx-hero {
  position: relative; color: var(--rx-cream); text-align: center;
  padding: clamp(4.5rem,12vw,8rem) 1.5rem;
  min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, rgba(58,13,13,.78) 0%, rgba(40,9,9,.92) 100%), url(assets/img/hero.jpg) center/cover no-repeat;
  overflow: hidden;
}
.rx-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(201,168,76,.16) 1.4px, transparent 1.4px);
  background-size: 26px 26px; opacity: .5;
}
.rx-hero > * { position: relative; }
.rx-hero-cn { font-family: "Noto Serif SC",serif; color: var(--rx-gold); font-size: clamp(1.4rem,4vw,2.2rem); letter-spacing: .35em; margin: 0 0 .6rem; }
.rx-hero-title { font-family: "Noto Serif SC",serif; font-weight: 900; color: var(--rx-cream); font-size: clamp(2.8rem,7vw,5rem); line-height: 1.02; margin: 0 0 1.1rem; }
.rx-hero-sub { font-size: clamp(1.05rem,2vw,1.3rem); color: #f3e2c4; max-width: 38ch; margin: 0 auto 2.2rem; }
.rx-hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.rx-hero-strip { margin-top: 2.6rem; display:flex; gap: 1.8rem; justify-content:center; flex-wrap:wrap; color: #e9d4a8; font-size:.92rem; font-weight:600; font-family:"Inter",sans-serif; }
.rx-hero-strip span { display:inline-flex; align-items:center; gap:.45rem; }

/* ---------- Trust bar ---------- */
.rx-trust { background: var(--rx-dark); color: var(--rx-cream); }
.rx-trust .rx-wrap { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; padding: 1.6rem 1.5rem; }
.rx-trust-item { display: flex; align-items: center; gap: .8rem; justify-content: center; font-family:"Inter",sans-serif; font-weight: 600; font-size: .98rem; }
.rx-trust-item svg { flex: 0 0 auto; color: var(--rx-gold); }

/* ---------- Signature dishes ---------- */
.rx-dishes { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; margin-top: 2.6rem; }
.rx-dish {
  background: #fff; border-radius: var(--rx-radius); overflow: hidden;
  box-shadow: var(--rx-shadow); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.rx-dish:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -26px rgba(26,10,0,.6); }
.rx-dish-img {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: linear-gradient(150deg, var(--rx-ember), #3a0f0f);
}
.rx-dish-img .cn { font-family:"Noto Serif SC",serif; font-weight:900; font-size: 4.2rem; color: rgba(201,168,76,.28); line-height:1; }
.rx-dish-img img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.rx-dish:hover .rx-dish-img img { transform: scale(1.07); }
.rx-dish-img .tag { position:absolute; z-index:2; top:.8rem; left:.8rem; background: var(--rx-gold); color: var(--rx-dark); font-family:"Inter",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.05em; padding:.28rem .7rem; border-radius:999px; box-shadow:0 4px 10px -4px rgba(0,0,0,.4); }
.rx-dish-body { padding: 1.25rem 1.35rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.rx-dish-body h3 { font-family:"Noto Serif SC",serif; color: var(--rx-red); font-size: 1.3rem; margin: 0; }
.rx-dish-body p { margin: 0; color:#5a4636; font-size: .98rem; flex:1; }
.rx-dish-foot { display:flex; align-items:center; justify-content:space-between; margin-top:.6rem; }
.rx-price { font-family:"Inter",sans-serif; font-weight:700; color: var(--rx-red); font-size: 1.2rem; }
.rx-dish-foot a { font-family:"Inter",sans-serif; font-weight:700; font-size:.9rem; color: var(--rx-gold-deep); text-decoration:none; }
.rx-dish-foot a:hover { color: var(--rx-red); }

/* ---------- Spice band ---------- */
.rx-spice { background: linear-gradient(135deg, var(--rx-gold) 0%, var(--rx-gold-deep) 100%); color: var(--rx-dark); }
.rx-spice .rx-wrap { display:grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items:center; padding: clamp(2.5rem,5vw,4rem) 1.5rem; }
.rx-spice h2 { color: var(--rx-dark); }
.rx-spice .rx-eyebrow { color: var(--rx-red); }
.rx-spice-levels { display:flex; flex-direction:column; gap:.7rem; }
.rx-spice-row { display:flex; align-items:center; gap:.9rem; background: rgba(255,248,231,.45); border-radius:12px; padding:.7rem 1rem; font-family:"Inter",sans-serif; font-weight:600; }
.rx-flames { letter-spacing:2px; color: var(--rx-red); font-size:1.1rem; min-width:90px; }
.rx-flames .off { color: rgba(92,26,26,.25); }

/* ---------- Why us ---------- */
.rx-why { display:grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; margin-top: 2.6rem; }
.rx-why-card { background:#fff; border:1px solid var(--rx-sand); border-radius: var(--rx-radius); padding: 1.8rem 1.4rem; text-align:center; }
.rx-why-ico { width:58px; height:58px; border-radius:50%; background: var(--rx-cream); color: var(--rx-red); display:grid; place-items:center; margin:0 auto 1rem; }
.rx-why-card h3 { font-family:"Noto Serif SC",serif; color: var(--rx-red); font-size: 1.18rem; margin:0 0 .4rem; }
.rx-why-card p { margin:0; color:#5a4636; font-size:.95rem; }

/* ---------- Gallery ---------- */
.rx-gallery { display:grid; grid-template-columns: repeat(4,1fr); gap: .9rem; margin-top: 2.4rem; }
.rx-gtile { aspect-ratio: 1; border-radius: 12px; overflow:hidden; display:grid; place-items:center; background: linear-gradient(150deg,#7A2222,#3a0f0f); color: rgba(201,168,76,.35); font-family:"Noto Serif SC",serif; font-weight:900; font-size:2.4rem; }
.rx-gtile:nth-child(even){ background: linear-gradient(150deg,#8a6a1f,#5c4310); }
.rx-gtile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.rx-gtile:hover img { transform: scale(1.08); }

/* ---------- Testimonials ---------- */
.rx-quotes { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.4rem; }
.rx-quote { background:#fff; border-radius: var(--rx-radius); padding: 1.7rem 1.5rem; box-shadow: var(--rx-shadow); }
.rx-stars { color: var(--rx-gold); letter-spacing: 2px; font-size: 1.05rem; margin-bottom:.7rem; }
.rx-quote p { font-style: italic; color:#3d2b1f; margin:0 0 1rem; }
.rx-quote .who { font-family:"Inter",sans-serif; font-weight:700; color: var(--rx-red); font-size:.95rem; }

/* ---------- Location ---------- */
.rx-loc { background: var(--rx-red); color: var(--rx-cream); }
.rx-loc .rx-wrap { display:grid; grid-template-columns: 1fr; gap:1.3rem; justify-items:center; text-align:center; max-width:820px; padding: clamp(2.5rem,5vw,4rem) 1.5rem; }
.rx-loc .rx-loc-list { align-items:center; }
.rx-loc h2 { color: var(--rx-cream); }
.rx-loc .rx-eyebrow { color: var(--rx-gold); }
.rx-loc-list { list-style:none; padding:0; margin: 1.2rem 0 0; display:flex; flex-direction:column; gap:.9rem; font-size:1.05rem; }
.rx-loc-list li { display:flex; gap:.8rem; align-items:flex-start; }
.rx-loc-list svg { color: var(--rx-gold); flex:0 0 auto; margin-top:.15rem; }
.rx-map { position:relative; display:block; height:380px; border-radius: var(--rx-radius); overflow:hidden; box-shadow: var(--rx-shadow); background:#e8e4d8; text-decoration:none; }
.rx-map-grid { position:absolute; top:50%; left:50%; width:768px; height:768px; display:grid; grid-template-columns:repeat(3,256px); grid-template-rows:repeat(3,256px); transform:translate(-429.4px,-358.8px); }
.rx-map-grid img { width:256px; height:256px; display:block; }
.rx-map-pin { position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); z-index:2; line-height:0; filter:drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.rx-map-badge { position:absolute; right:.7rem; top:.7rem; z-index:2; background:#fff; color:var(--rx-red); font-family:"Inter",sans-serif; font-weight:700; font-size:.8rem; padding:.35rem .8rem; border-radius:999px; box-shadow:0 4px 12px -4px rgba(0,0,0,.45); }
.rx-map-attr { position:absolute; right:.35rem; bottom:.3rem; z-index:2; background:rgba(255,255,255,.82); color:#444; font-family:"Inter",sans-serif; font-size:.66rem; padding:.08rem .4rem; border-radius:4px; }

/* ---------- CTA band ---------- */
.rx-cta { background: radial-gradient(120% 120% at 50% 0%, #7A2222, #350D0D); color: var(--rx-cream); text-align:center; }
.rx-cta h2 { color: var(--rx-cream); }
.rx-cta .rx-lead { color:#f0ddbb; }

/* ---------- Footer ---------- */
.rx-footer { background: var(--rx-dark); color: var(--rx-cream); }
.rx-footer a { color: var(--rx-cream); text-decoration:none; }
.rx-footer a:hover { color: var(--rx-gold); }

/* ---------- WooCommerce ---------- */
.woocommerce ul.products li.product, .wc-block-grid__product { text-align:center; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .wc-block-grid__product-price { color: var(--rx-red) !important; font-weight:700; }
.woocommerce span.onsale { background: var(--rx-gold); color: var(--rx-dark); }
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .woocommerce .button.alt,
.wc-block-components-button {
  background-color: var(--rx-red) !important; color: var(--rx-cream) !important;
  border-radius: 999px !important; font-weight:700 !important; padding:.7rem 1.5rem !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover {
  background-color: var(--rx-gold) !important; color: var(--rx-dark) !important;
}
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom:1.5rem; }

/* Defensive: never show a stray FSE post title on built pages */
.home .wp-block-post-title, .page .wp-block-post-title { display:none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .rx-dishes, .rx-why, .rx-quotes { grid-template-columns: repeat(2,1fr); }
  .rx-trust .rx-wrap { grid-template-columns: repeat(2,1fr); }
  .rx-spice .rx-wrap, .rx-loc .rx-wrap { grid-template-columns: 1fr; }
  .rx-gallery { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 560px) {
  .rx-dishes, .rx-why, .rx-quotes, .rx-trust .rx-wrap { grid-template-columns: 1fr; }
  .rx-gallery { grid-template-columns: repeat(2,1fr); }
}

/* Remove TT5 default block-gap between sticky header and first section (and above footer) */
.wp-site-blocks > main, .wp-site-blocks > footer{ margin-block-start:0 !important; }

/* ---- UX / mobile / a11y polish pass ---- */
html{ scroll-behavior:smooth; }
img{ max-width:100%; height:auto; }
a:focus-visible,button:focus-visible,summary:focus-visible,.ss-btn:focus-visible,.rx-btn:focus-visible,.wp-element-button:focus-visible{ outline:3px solid var(--ss-cyan,var(--rx-gold,#C9A84C)); outline-offset:3px; }
.wpcf7 label{ display:block; font-weight:600; font-size:.92rem; margin:.2rem 0 .9rem; color:inherit; }
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 input[type=number],.wpcf7 input[type=date],.wpcf7 textarea{ width:100%; margin-top:.35rem; padding:.7rem .85rem; border:1px solid rgba(0,0,0,.18); border-radius:8px; font:inherit; box-sizing:border-box; background:#fff; color:#222; }
.wpcf7 textarea{ min-height:120px; }
.wpcf7 input:focus,.wpcf7 textarea:focus{ outline:2px solid var(--ss-cyan,var(--rx-gold,#C9A84C)); border-color:transparent; }
.wpcf7 .wpcf7-submit{ cursor:pointer; border:0; color:#fff; background:var(--ss-cyan,var(--rx-red,#5C1A1A)); font-weight:700; padding:.8rem 1.8rem; border-radius:999px; margin-top:.5rem; width:auto; }
.wpcf7 .wpcf7-submit:hover{ filter:brightness(.93); }
@media (max-width:600px){
  .ss-hero,.rx-hero{ min-height:auto !important; padding-top:3.2rem !important; padding-bottom:3.4rem !important; }
  .ss-hero h1,.rx-hero-title{ font-size:clamp(2rem,9vw,2.8rem) !important; }
  .ss-hero-cta,.rx-hero-cta{ flex-direction:column; align-items:stretch; }
  .ss-hero-cta .ss-btn,.rx-hero-cta .rx-btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } }