/* 
 * Sunset BBQ Gathering
 * Theme: Sunset Orange, Dusty Pink, Warm Brown, Glow lighting effects
 */

 :root {
    --clr-orange: #FF7E67;
    --clr-orange-glow: #FFAA67;
    --clr-dusty: #D291BC;
    --clr-dusty-light: #F4E4EF;
    --clr-brown: #8B5A2B;
    --clr-dark: #2B211E;
    --clr-white: #FFFFFF;
    
    --font-head: 'Outfit', sans-serif;
    --font-script: 'Pacifico', cursive; /* casual casual */
    
    --transition: all 0.4s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body { background-color: var(--clr-white); font-family: var(--font-head); color: var(--clr-dark); line-height: 1.6; }

h1, h2, h3, h4 { font-weight: 800; margin-bottom: 15px; color: var(--clr-dark); }
h1 { font-size: 4rem; text-transform: uppercase; line-height: 1.1; }
h2 { font-size: 2.8rem; }
.font-casual { font-family: var(--font-script); text-transform: none; color: var(--clr-orange); font-size: 3.5rem; font-weight: 400; display: block; margin-top: -10px;}

a { text-decoration: none; transition: var(--transition); }
img { max-width: 100%; border-radius: 8px; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 100px 0; }
.text-center { text-align: center; }

.text-orange { color: var(--clr-orange); }
.text-white { color: var(--clr-white); }
.bg-dusty { background-color: var(--clr-dusty-light); }
.bg-dark { background-color: var(--clr-dark); }
.relative { position: relative; }

.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 4rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3.5rem; }

/* Buttons */
.btn {
    display: inline-block; padding: 14px 35px; border-radius: 50px; font-weight: 600;
    font-size: 1.1rem; cursor: pointer; transition: var(--transition); letter-spacing: 1px;
}
.btn-orange { background-color: var(--clr-orange); color: var(--clr-white); }
.btn-orange:hover { background-color: var(--clr-orange-glow); transform: translateY(-3px); }
.btn-glow { box-shadow: 0 0 20px rgba(255, 126, 103, 0.6); }

.btn-white { background-color: var(--clr-white); color: var(--clr-orange); }
.btn-glow-w { box-shadow: 0 0 25px rgba(255, 255, 255, 0.4); }
.btn-white:hover { color: var(--clr-brown); transform: translateY(-3px); }

/* Nav */
nav { position: fixed; top:0; left:0; width:100%; padding: 25px 0; z-index: 1000; transition: var(--transition); }
nav.scrolled { padding: 15px 0; background-color: var(--clr-white); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.nav-container { display: flex; justify-content: space-between; align-items: center; }

.logo { font-size: 1.8rem; font-weight: 800; color: var(--clr-white); display: flex; align-items: center; gap: 5px; }
nav.scrolled .logo { color: var(--clr-dark); }
.logo i { color: var(--clr-orange); }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 1rem; font-weight: 600; color: var(--clr-white); }
nav.scrolled .nav-links a { color: var(--clr-dark); }
.nav-links a:hover { color: var(--clr-orange); }

.nav-btn { background: var(--clr-orange); padding: 8px 24px; border-radius: 50px; }
nav.scrolled .nav-btn { background: var(--clr-orange); color: var(--clr-white) !important;}

.mobile-menu-btn { display: none; font-size: 2rem; color: var(--clr-white); cursor: pointer; }
nav.scrolled .mobile-menu-btn { color: var(--clr-dark); }

.mobile-nav {
    position: fixed; top:0; right: -100%; width: 300px; height: 100vh;
    background-color: var(--clr-white); z-index: 2000; box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; transition: var(--transition);
}
.mobile-nav.active { right:0; }
.close-menu { position: absolute; top:30px; right: 30px; font-size: 2.5rem; color: var(--clr-orange); cursor: pointer; }
.mobile-nav a { font-size: 1.5rem; font-weight: 600; color: var(--clr-dark); }

/* Hero */
.hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; }
.hero-bg {
    position: absolute; top:0; left:0; width:100%; height:100%; z-index: 1;
    background-image: url('https://images.unsplash.com/photo-1555939594-58d7cb561ad1?q=80&w=1974&auto=format&fit=crop');
    background-size: cover; background-position: center;
}
.hero::after { content:''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(43, 33, 30, 0.7); z-index: 2; }
.glow-effect { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 80%; height: 200px; background: radial-gradient(ellipse at center, rgba(255, 126, 103, 0.4) 0%, transparent 70%); z-index: 3; filter: blur(20px);}

.hero-content { position: relative; z-index: 4; color: var(--clr-white); max-width: 800px; }
.badge-glow { display: inline-block; padding: 8px 25px; border-radius: 50px; border: 2px solid var(--clr-orange); color: var(--clr-orange); font-weight: 600; margin-bottom: 25px; box-shadow: 0 0 15px rgba(255, 126, 103, 0.3); }
.hero-content h1 { color: var(--clr-white); }
.hero-content p { font-size: 1.2rem; margin-bottom: 30px; line-height: 1.8; }

/* Info Block */
.info-block { display: flex; background: var(--clr-white); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.05); }
.ib-text { flex: 1.2; padding: 50px; background: var(--clr-orange); color: var(--clr-white); }
.ib-text h2 { color: var(--clr-white); }
.ib-text p { font-size: 1.1rem; }
.ib-details { flex: 2; padding: 50px; display: flex; flex-direction: column; gap: 30px; justify-content: center; }
.ib-row { display: flex; align-items: center; gap: 20px; }
.ib-row i { font-size: 2.5rem; color: var(--clr-orange); }
.ib-col strong { display: block; font-size: 1.2rem; color: var(--clr-dark); margin-bottom: 5px;}
.ib-col span { color: #666; font-size: 1rem; }

/* Light Flares */
.flare-light { position: absolute; width: 300px; height: 300px; background: var(--clr-dusty); filter: blur(100px); opacity: 0.2; z-index: -1; border-radius: 50%;}
.flare-light.left { left: -100px; top: 20%; }

/* Vibes */
.vibe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.vibe-card { background: var(--clr-white); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: var(--transition); border: 1px solid rgba(255,126,103,0.1);}
.vibe-card:hover { transform: translateY(-10px); border-color: var(--clr-orange); box-shadow: 0 15px 40px rgba(255,126,103,0.15); }
.vc-icon { width: 70px; height: 70px; background: var(--clr-dusty-light); color: var(--clr-orange); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2.2rem; margin: 0 auto 20px; }

/* Menu BBQ */
.menu-list-bbq { display: flex; flex-direction: column; gap: 40px; max-width: 900px; margin: 0 auto;}
.ml-item { display: flex; align-items: center; gap: 40px; }
.ml-img { flex: 1; height: 250px; border-radius: 15px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.5); position: relative;}
.ml-img::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; box-shadow: inset 0 0 50px rgba(255,126,103,0.3); pointer-events: none;}
.ml-img img { width: 100%; height: 100%; object-fit: cover; }
.ml-info { flex: 1; }
.ml-info h4 { font-size: 1.6rem; color: var(--clr-orange); margin-bottom: 10px;}
.ml-info p { color: rgba(255,255,255,0.8); font-size: 1.1rem; }
.alt-row { flex-direction: row-reverse; }
.text-right { text-align: right; }

/* Gallery Glow */
.glow-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.gg-img { height: 300px; border-radius: 15px; overflow: hidden; position: relative; transition: var(--transition); }
.gg-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.gg-img:hover { box-shadow: 0 0 30px rgba(255, 126, 103, 0.4); transform: scale(1.02); z-index: 10; }
.gg-img:hover img { transform: scale(1.1); }

.checklist-reminder { background: var(--clr-white); padding: 40px; border-radius: 15px; border-left: 5px solid var(--clr-orange); max-width: 700px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
.checklist-reminder h3 { color: var(--clr-orange); }

/* CTA */
.cta-sunset { background: linear-gradient(135deg, var(--clr-orange), var(--clr-dusty)); }

/* Footer */
footer { background: var(--clr-dark); color: var(--clr-white); padding: 50px 0; }
footer h3 { color: var(--clr-white); }
footer p { opacity: 0.7; }

/* Responsive */
@media(max-width: 900px) {
    .info-block { flex-direction: column; }
    .ml-item, .alt-row { flex-direction: column; text-align: center; gap: 20px; }
    .text-right { text-align: center; }
    .ml-img { height: 200px; width: 100%; }
}
@media(max-width: 768px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
    .hero h1 { font-size: 3rem; }
    .font-casual { font-size: 2.5rem; margin-top: 0; }
    .ib-text { padding: 30px; }
    .ib-details { padding: 30px; }
}