/* ===== Hangout Casa — design polish layer (loads after style.css) ===== */
:root{--maroon:#6e1410;--marigold:#e4a72c;--forest:#172016;--lantern:#ffd36b;--paper:#fffaf0}

/* --- Hero: slow drift on the photo, glass buttons, prayer-flag bunting --- */
.hero{background:#121b12;overflow:hidden;isolation:isolate}
.hero:before{content:"";position:absolute;inset:-4%;z-index:-2;background:url('assets/hero-original.jpg') center/cover;animation:heroDrift 26s ease-in-out infinite alternate;will-change:transform}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#121b12ef 0%,#182315b0 46%,#18231510 100%),linear-gradient(0deg,#121b12cc 0%,transparent 28%)}
@keyframes heroDrift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.5%,-1%,0)}}
.hero-content{padding:120px 0 130px}
.hero h1{font-size:clamp(3.4rem,7.4vw,7rem);letter-spacing:-2px}
.hero-actions{gap:12px;align-items:center}
.hero-actions .btn{padding:14px 24px}
.hero-actions .btn-primary{box-shadow:0 10px 26px #b51f1966}
.hero-actions .btn-dark[href="catering.html"]{box-shadow:0 10px 26px #e4a72c55}
.hero-actions .btn-light,.hero-actions .home-cart-btn{background:#ffffff1c;color:#fff;border:1px solid #ffffff55;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:12px 20px;font-size:.92rem;font-weight:600}
.hero-actions .btn-light:hover,.hero-actions .home-cart-btn:hover{background:#ffffff38}
.hero-actions .home-cart-btn b{background:var(--red)}
.bunting{position:absolute;top:0;left:0;right:0;height:78px;z-index:2;pointer-events:none;overflow:hidden}
.bunting svg{display:block;width:100%;height:100%;transform-origin:50% 0;animation:breeze 7s ease-in-out infinite}
.bunting svg+svg{position:absolute;inset:0;opacity:.55;transform:translateY(-6px);animation-duration:9s;animation-delay:-3s}
@keyframes breeze{0%,100%{transform:skewX(0)}30%{transform:skewX(1.4deg) translateX(-3px)}65%{transform:skewX(-1.1deg) translateX(3px)}}
.bunting svg+svg{animation-name:breeze2}@keyframes breeze2{0%,100%{transform:translateY(-6px) skewX(0)}40%{transform:translateY(-6px) skewX(-1.6deg)}75%{transform:translateY(-6px) skewX(1.2deg)}}
.open-pill{display:inline-flex;align-items:center;gap:9px;background:#ffffff1c;border:1px solid #ffffff40;backdrop-filter:blur(8px);padding:7px 14px;border-radius:999px;font-weight:600}
.open-pill i{width:9px;height:9px;border-radius:50%;background:#46d369;box-shadow:0 0 0 0 #46d36999;animation:pulse 2s infinite}
.open-pill.closed i{background:#ff8a65;box-shadow:none;animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px #46d36900}100%{box-shadow:0 0 0 0 #46d36900}}
.hero-meta span{animation:none!important}

/* --- Info strip becomes a floating card over the hero edge --- */
.quick-info{position:relative;z-index:5;background:transparent;border:0;padding:0;margin-top:-62px}
.quick-info .info-grid{background:#fff;border-radius:20px;box-shadow:0 24px 60px #2a1a0a26,0 2px 0 var(--marigold) inset;gap:0;padding:6px 10px}
.quick-info .info-grid>div{padding:24px 26px;position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:center}
.quick-info .info-grid>div+div:before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:#eadcc7}
.quick-info .info-grid>div:after{content:"";grid-row:1/3;grid-column:1;width:40px;height:40px;border-radius:12px;background:#fdf1d4 center/20px no-repeat}
.quick-info .info-grid>div>*{grid-column:2}.quick-info .info-grid>div:after{grid-column:1;grid-row:1/3;order:-1}
.quick-info .info-grid>div:nth-child(1):after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b51f19' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.quick-info .info-grid>div:nth-child(2):after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b51f19' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.quick-info .info-grid>div:nth-child(3):after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b51f19' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.quick-info .info-grid>div:nth-child(4):after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b51f19' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5h10M7 9h10M9 5c5 0 5 7 0 7H7l8 8'/%3E%3C/svg%3E")}
.quick-info small{margin-bottom:2px}
.about-grid{padding-top:90px}

/* --- Headings: a small brand flourish under section titles --- */
.section-heading h2:after,.menu-showcase-heading h2:after,.contact-grid h2:after{content:"";display:block;width:74px;height:10px;margin-top:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 10' fill='none' stroke='%23e4a72c' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 5h26M47 5h26'/%3E%3Ccircle cx='37' cy='5' r='3' fill='%23e4a72c' stroke='none'/%3E%3C/svg%3E") no-repeat}

/* --- Gallery: tactile hover + lightbox --- */
.gallery img{cursor:zoom-in;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s,filter .4s}
.gallery img:hover{transform:scale(1.025) rotate(-.4deg);box-shadow:0 22px 44px #241c0e30;filter:saturate(1.12)}
.lb{position:fixed;inset:0;z-index:2000;background:#0c0905ee;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(6px)}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:min(1100px,92vw);max-height:84vh;border-radius:14px;box-shadow:0 30px 90px #000a;transform:scale(.96);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lb.open img{transform:none}
.lb button{position:absolute;border:1px solid #ffffff44;background:#ffffff14;color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.5rem;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lb button:hover{background:#ffffff33}
.lb-x{top:20px;right:20px}.lb-p{left:20px;top:50%}.lb-n{right:20px;top:50%}

/* --- Buttons & focus --- */
.btn,.nav-cta,.nav-book{transition:transform .25s,box-shadow .25s,background .25s}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}
.nav-wrap{transition:box-shadow .3s,background .3s}.nav-wrap.scrolled{box-shadow:0 8px 30px #2a1a0a1f}
.nav.scrolled-nav{min-height:68px}

/* --- Contact card: warmer inputs --- */
.contact-card input:focus,.contact-card select:focus,.contact-card textarea:focus,.cat-form input:focus,.cat-form select:focus,.cat-form textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px #b51f1918;outline:0}

/* --- Rich footer --- */
footer{background:radial-gradient(ellipse at 20% 0,#223020 0,#172016 55%,#0f160f 100%);padding:0;position:relative}
footer:before{content:"";display:block;height:5px;background:repeating-linear-gradient(90deg,#3b78c4 0 20%,#f4f1ea 20% 40%,#c8261d 40% 60%,#3f9a4d 60% 80%,#f1b61e 80% 100%)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:50px;padding:62px 0 40px}
.f-brand p{color:#cfd3c4;line-height:1.7;max-width:330px;font-size:.92rem}
.f-grid h4{font:700 1.15rem 'Playfair Display',serif;margin:0 0 16px;color:var(--lantern)}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.f-grid li,.f-grid a{color:#e6e8dc;font-size:.92rem;line-height:1.6}
.f-grid a:hover{color:var(--lantern)}
.f-bottom{border-top:1px solid #ffffff1c;padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:#b9bdae}
.f-bottom a{color:#b9bdae}
@media(max-width:900px){.quick-info .info-grid>div{padding:18px 16px}.f-grid{grid-template-columns:1fr 1fr;gap:36px}.f-brand{grid-column:1/-1}}
@media(max-width:620px){.hero-content{padding:96px 0 110px}.bunting{height:60px}.quick-info{margin-top:-44px}.quick-info .info-grid{padding:4px}.quick-info .info-grid>div{grid-template-columns:34px 1fr;column-gap:10px;padding:14px 12px}.quick-info .info-grid>div:after{width:34px;height:34px;background-size:17px}.quick-info .info-grid>div:nth-child(odd):before{display:none}.hero-actions .btn{padding:13px 20px}.f-grid{grid-template-columns:1fr;padding:46px 0 26px}.lb-p{left:8px}.lb-n{right:8px}}
@media(prefers-reduced-motion:reduce){.hero:before,.bunting svg,.open-pill i{animation:none!important}}

/* --- fixes: legibility over photo, button wrapping --- */
.hero:after{background:linear-gradient(90deg,#0e150ef5 0%,#121b12d8 40%,#121b1280 72%,#121b1230 100%),linear-gradient(0deg,#0e150ecc 0%,transparent 30%)}
.hero h1,.hero-text{text-shadow:0 3px 22px #000a}
.hero-actions .btn{flex:0 1 auto;white-space:normal;text-align:center}
.hero-actions .btn-primary{order:1}.hero-actions .btn-dark[href="catering.html"]{order:2}.hero-actions .btn-light,.hero-actions .home-cart-btn{order:3}
.bunting svg+svg{opacity:.4}
@media(max-width:620px){.hero-actions .btn-primary,.hero-actions .btn-dark[href="catering.html"]{flex:1 1 100%}.hero-actions .btn-light,.hero-actions .home-cart-btn{flex:1 1 calc(50% - 6px);padding:11px 14px}.hero-actions .home-cart-btn{flex-basis:100%}.hero-meta{margin-top:30px}}
.hero:before{background:url('assets/hero-original.jpg') center/cover no-repeat;background-size:cover;background-position:center;opacity:1;mix-blend-mode:normal}
.hero:after{left:0;right:0;top:0;bottom:0;height:auto;transform:none;animation:none;opacity:1}
.hero:after{background:linear-gradient(90deg,#0e150eeb 0%,#121b12b8 36%,#121b1260 68%,#121b1220 100%),linear-gradient(0deg,#0e150eb0 0%,transparent 26%)}