/*
Theme Name: Joyfulday Child
Theme URI: https://joyfuldaysg.com
Description: Code-first block child theme for Joyfulday Pte Ltd (Joyfulday Loyang Prata Corner, Singapore Indian-Muslim cuisine). Config-driven; provisioning engine in inc/provision.php. Deploys to Hostinger via MCP, no SSH.
Author: WarelyEcom
Template: twentytwentyfive
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: joyfulday-child
*/

:root{
  --ss-ink:#6B1E12; --ss-graphite:#7E2A18; --ss-cyan:#E8920C; --ss-cyan-deep:#BE6B07;
  --ss-silver:#E2C79A; --ss-cloud:#FBF4E9; --ss-white:#fff; --ss-body:#3A2A22;
  --ss-shadow:0 18px 44px -26px rgba(107,30,18,.55); --ss-radius:14px;
}
body{ background:var(--ss-white); color:var(--ss-body); }
.wp-site-blocks{ overflow-x:clip; }

/* sections */
.ss-section{ padding:clamp(3rem,7vw,6rem) 1.5rem; }
.ss-wrap{ max-width:1240px; margin-inline:auto; }
.ss-narrow{ max-width:780px; margin-inline:auto; }
.ss-center{ text-align:center; }
.ss-eyebrow{ display:inline-block; font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-size:.78rem; color:var(--ss-cyan-deep); margin:0 0 .9rem; }
.ss-h{ font-family:"Baloo 2",sans-serif; font-weight:800; color:var(--ss-ink); line-height:1.1; margin:0 0 1rem; }
.ss-h--xl{ font-size:clamp(2rem,3.6vw,2.9rem); }
.ss-lead{ font-size:1.12rem; color:#5b574c; max-width:62ch; }
.ss-center .ss-lead{ margin-inline:auto; }
.ss-rule{ width:64px; height:3px; background:var(--ss-cyan); border:0; margin:1.1rem 0; border-radius:2px; }
.ss-center .ss-rule{ margin-inline:auto; }

/* buttons */
.ss-btn{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-weight:700; font-size:1rem; padding:.9rem 1.9rem; border-radius:8px; text-decoration:none; transition:transform .15s,background .2s,color .2s; }
.ss-btn--cyan{ background:var(--ss-cyan); color:var(--ss-ink); box-shadow:var(--ss-shadow); }
.ss-btn--cyan:hover{ background:var(--ss-white); color:var(--ss-ink); transform:translateY(-2px); }
.ss-btn--ghost{ background:transparent; color:var(--ss-white); border:2px solid rgba(255,255,255,.55); }
.ss-btn--ghost:hover{ background:var(--ss-white); color:var(--ss-ink); }
.ss-btn--dark{ background:var(--ss-ink); color:var(--ss-white); box-shadow:var(--ss-shadow); }
.ss-btn--dark:hover{ background:var(--ss-cyan); color:var(--ss-ink); transform:translateY(-2px); }

/* header */
.ss-header{ position:sticky; top:0; z-index:100; background:var(--ss-ink); }
.ss-header .wp-block-site-title a{ text-decoration:none; color:var(--ss-white); font-family:"Baloo 2",sans-serif; font-weight:800; letter-spacing:.02em; }
.ss-header .wp-block-navigation{ font-weight:600; }
.ss-header .wp-block-navigation a{ color:#EAE3D2; }
.ss-header .wp-block-navigation a:hover{ color:var(--ss-cyan); }
.ss-brand-cn{ color:var(--ss-cyan); font-weight:700; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; line-height:1; }
.ss-brand{ display:flex; align-items:center; gap:.7rem; }
.ss-brand img{ height:54px; width:54px; display:block; border-radius:50%; background:#fff; padding:2px; box-shadow:0 2px 8px -2px rgba(0,0,0,.35); }

/* hero */
.ss-hero{ position:relative; color:var(--ss-white); padding:clamp(4.5rem,12vw,8rem) 1.5rem; min-height:82vh; display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(105deg, rgba(75,18,10,.94) 0%, rgba(75,18,10,.74) 52%, rgba(75,18,10,.38) 100%), url(assets/img/hero.jpg) center/cover no-repeat; overflow:hidden; }
.ss-hero-inner{ max-width:1240px; margin-inline:auto; width:100%; }
.ss-hero-eyebrow{ color:var(--ss-cyan); font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-size:.82rem; }
.ss-hero h1{ font-family:"Baloo 2",sans-serif; font-weight:800; color:var(--ss-white); font-size:clamp(2.6rem,6.5vw,4.75rem); line-height:1.03; margin:.6rem 0 1rem; max-width:16ch; }
.ss-hero p{ font-size:clamp(1.05rem,2vw,1.3rem); color:#F1E9D8; max-width:48ch; margin:0 0 2rem; }
.ss-hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.ss-hero-strip{ margin-top:2.6rem; display:flex; gap:1.8rem; flex-wrap:wrap; color:#d9cfb6; font-weight:600; font-size:.92rem; }
.ss-hero-strip span{ display:inline-flex; align-items:center; gap:.45rem; }
.ss-hero-strip b{ color:var(--ss-white); }

/* trust bar */
.ss-trust{ background:var(--ss-graphite); color:#F3ECDC; }
.ss-trust .ss-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; padding:1.5rem; }
.ss-trust-item{ display:flex; align-items:center; gap:.7rem; justify-content:center; font-weight:600; font-size:.98rem; }
.ss-trust-item svg{ color:var(--ss-cyan); flex:0 0 auto; }

/* packages / menu cards */
.ss-pkgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.6rem; }
.ss-pkg{ background:var(--ss-white); border:1px solid #EBE2CE; border-radius:var(--ss-radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--ss-shadow); transition:transform .18s,box-shadow .18s; }
.ss-pkg:hover{ transform:translateY(-5px); box-shadow:0 28px 54px -28px rgba(107,30,18,.6); }
.ss-pkg-img{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--ss-graphite); }
.ss-pkg-img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.ss-pkg:hover .ss-pkg-img img{ transform:scale(1.07); }
.ss-pkg-body{ padding:1.2rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.ss-pkg-body h3{ font-family:"Baloo 2",sans-serif; font-size:1.18rem; color:var(--ss-ink); margin:0; }
.ss-pkg-body p{ margin:0; color:#6a6456; font-size:.95rem; flex:1; }
.ss-price{ font-family:"Baloo 2",sans-serif; font-weight:800; color:var(--ss-ink); font-size:1.5rem; }
.ss-price small{ font-size:.8rem; font-weight:600; color:#9a907c; }
.ss-pkg .ss-btn{ width:100%; justify-content:center; padding:.7rem 1rem; font-size:.95rem; margin-top:.4rem; }

/* process steps */
.ss-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.6rem; }
.ss-step{ position:relative; padding:1.6rem 1.3rem; background:var(--ss-cloud); border-radius:var(--ss-radius); }
.ss-step-n{ font-family:"Baloo 2",sans-serif; font-weight:800; font-size:2.4rem; color:var(--ss-cyan); line-height:1; }
.ss-step h3{ font-family:"Baloo 2",sans-serif; font-size:1.1rem; color:var(--ss-ink); margin:.5rem 0 .35rem; }
.ss-step p{ margin:0; color:#6a6456; font-size:.94rem; }

/* why us (dark band) */
.ss-why{ background:var(--ss-ink); color:#F3ECDC; }
.ss-why h2{ color:var(--ss-white); }
.ss-why .ss-eyebrow{ color:var(--ss-cyan); }
.ss-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.6rem; }
.ss-why-card{ background:var(--ss-graphite); border-radius:var(--ss-radius); padding:1.8rem 1.4rem; text-align:center; }
.ss-why-ico{ width:56px; height:56px; border-radius:14px; background:rgba(232,146,12,.18); color:var(--ss-cyan); display:grid; place-items:center; margin:0 auto 1rem; }
.ss-why-card h3{ font-family:"Baloo 2",sans-serif; color:var(--ss-white); font-size:1.12rem; margin:0 0 .4rem; }
.ss-why-card p{ margin:0; color:#d9cfb6; font-size:.94rem; }

/* gallery */
.ss-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-top:2.4rem; }
.ss-gtile{ aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--ss-graphite); }
.ss-gtile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.ss-gtile:hover img{ transform:scale(1.08); }

/* testimonials */
.ss-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.4rem; }
.ss-quote{ background:var(--ss-white); border:1px solid #EBE2CE; border-radius:var(--ss-radius); padding:1.7rem 1.5rem; box-shadow:var(--ss-shadow); }
.ss-stars{ color:var(--ss-cyan); letter-spacing:2px; font-size:1.05rem; margin-bottom:.7rem; }
.ss-quote p{ font-style:italic; color:#4a463c; margin:0 0 1rem; }
.ss-quote .who{ font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--ss-ink); font-size:.95rem; }

/* location */
.ss-loc{ background:var(--ss-graphite); color:#F3ECDC; }
.ss-loc .ss-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; padding:clamp(2.5rem,5vw,4rem) 1.5rem; }
.ss-loc h2{ color:var(--ss-white); }
.ss-loc .ss-eyebrow{ color:var(--ss-cyan); }
.ss-loc-list{ list-style:none; padding:0; margin:1.2rem 0 0; display:flex; flex-direction:column; gap:.9rem; font-size:1.05rem; }
.ss-loc-list li{ display:flex; gap:.8rem; align-items:flex-start; }
.ss-loc-list svg{ color:var(--ss-cyan); flex:0 0 auto; margin-top:.15rem; }

/* map (composited OSM tiles) - retained for compatibility, unused on pages */
.ss-map{ position:relative; display:block; height:380px; border-radius:var(--ss-radius); overflow:hidden; box-shadow:var(--ss-shadow); background:#e7ddc8; text-decoration:none; }
.ss-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(-402.3px,-496.1px); }
.ss-map-grid img{ width:256px; height:256px; display:block; }
.ss-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,.4)); }
.ss-map-badge{ position:absolute; right:.7rem; top:.7rem; z-index:2; background:#fff; color:var(--ss-ink); font-weight:700; font-size:.8rem; padding:.35rem .8rem; border-radius:999px; box-shadow:0 4px 12px -4px rgba(0,0,0,.45); }
.ss-map-attr{ position:absolute; right:.35rem; bottom:.3rem; z-index:2; background:rgba(255,255,255,.82); color:#444; font-size:.66rem; padding:.08rem .4rem; border-radius:4px; }

/* cta band */
.ss-cta{ position:relative; color:var(--ss-white); text-align:center; background:linear-gradient(rgba(75,18,10,.9),rgba(75,18,10,.93)),url(assets/img/curry.jpg) center/cover no-repeat; }
.ss-cta h2{ color:var(--ss-white); }
.ss-cta .ss-lead{ color:#F1E9D8; }

/* footer */
.ss-footer{ background:var(--ss-ink); color:#E2DAC8; }
.ss-footer a{ color:#E2DAC8; text-decoration:none; }
.ss-footer a:hover{ color:var(--ss-cyan); }
.ss-footer h3{ color:var(--ss-white); }

/* WooCommerce */
.woocommerce ul.products li.product .price, .woocommerce div.product p.price{ color:var(--ss-ink) !important; font-weight:800; }
.woocommerce span.onsale{ background:var(--ss-cyan); color:var(--ss-ink); }
.woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit,.woocommerce .button.alt,.wc-block-components-button{
  background-color:var(--ss-ink) !important; color:#fff !important; border-radius:8px !important; font-weight:700 !important; }
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button.alt:hover{ background-color:var(--ss-cyan) !important; color:var(--ss-ink) !important; }
.home .wp-block-post-title,.page .wp-block-post-title{ display:none !important; }

/* responsive */
@media (max-width:960px){
  .ss-pkgs{ grid-template-columns:repeat(2,1fr); }
  .ss-steps,.ss-why-grid{ grid-template-columns:repeat(2,1fr); }
  .ss-quotes{ grid-template-columns:1fr; }
  .ss-trust .ss-wrap{ grid-template-columns:repeat(2,1fr); }
  .ss-loc .ss-wrap{ grid-template-columns:1fr; }
  .ss-gallery{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .ss-pkgs,.ss-steps,.ss-why-grid,.ss-trust .ss-wrap{ grid-template-columns:1fr; }
  .ss-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; } }