/* ==========================================================================
   The Waffle Taco — Global Styles
   Variables, Reset, Typography, Layout, Header, Footer, Buttons, 
   Shared Components, Scroll-to-top, Social FAB
   ========================================================================== */

:root {
    --color-waffle-red:   #C14F2D;
    --color-taco-orange:  #EC6A36;
    --color-gold:         #F5A623;
    --color-gold-light:   #FBBF24;
    --color-gold-pale:    #FEF3C7;
    --color-orange:       #EA580C;
    --color-orange-warm:  #FB923C;
    --color-red-accent:   #DC2626;
    --color-cream:        #FFFBEB;
    --color-cream-deep:   #FEF7E0;
    --color-charcoal:     #1C1917;
    --color-dark:         #292524;
    --color-brown:        #44403C;
    --color-brown-light:  #78716C;
    --color-stone:        #A8A29E;
    --color-stone-light:  #E7E5E4;
    --color-white:        #FFFFFF;
    --color-open:         #16A34A;
    --color-closed:       #DC2626;
    --font-display: 'Fredoka', sans-serif;
    --font-body:    'Nunito', sans-serif;
    --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem;
    --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem;
    --container-max: 1140px;
    --header-height: 80px;
    --radius: 8px; --radius-lg: 16px; --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgba(28,25,23,0.08);
    --shadow-md: 0 4px 12px rgba(28,25,23,0.1);
    --shadow-lg: 0 8px 30px rgba(28,25,23,0.12);
    --shadow-warm: 0 4px 20px rgba(245,166,35,0.2);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); font-size:1rem; line-height:1.6; color:var(--color-dark); background:var(--color-white); padding-bottom:70px; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; transition:color 0.2s ease; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.2; color:var(--color-charcoal); }
h1 { font-size:clamp(2rem,5vw,3.25rem); font-weight:700; }
h2 { font-size:clamp(1.6rem,4vw,2.5rem); font-weight:600; }
h3 { font-size:clamp(1.15rem,2.5vw,1.4rem); font-weight:600; }
.container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 var(--space-lg); }


/* === Header === */
.site-header { background:var(--color-white); border-bottom:none; position:sticky; top:0; z-index:1000; box-shadow:var(--shadow-sm); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:var(--header-height); }
.logo-link { display:flex; align-items:center; }
.logo { height:60px; width:auto; }
.nav-actions { display:flex; align-items:center; gap:var(--space-md); }

/* Nav Links */
.nav-list { display:flex; list-style:none; gap:var(--space-xs); }
.nav-list a { display:block; padding:var(--space-sm) var(--space-md); font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--color-waffle-red); border-radius:var(--radius); transition:all 0.2s ease; }
.nav-list a:hover { color:var(--color-white); background:var(--color-taco-orange); }
.nav-list a.active { color:var(--color-white); background:var(--color-taco-orange); }

/* Mobile nav header / extras — hidden on desktop */
.mobile-nav-header { display:none; }
.mobile-nav-brand { display:none; }
.mobile-nav-extras { display:none; }
.mobile-close { display:none; }


/* === Info Bar (below nav) === */
.info-bar {
    background:linear-gradient(135deg, var(--color-waffle-red) 0%, var(--color-taco-orange) 100%);
    color:var(--color-white);
    padding:0.5rem 0;
}

.info-bar-inner {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-md);
}

.info-bar-details {
    display:flex;
    align-items:center;
    gap:var(--space-lg);
    flex-wrap:wrap;
    justify-content:center;
}

.info-bar-badge {
    font-family:var(--font-display);
    font-size:0.78rem;
    font-weight:700;
    padding:0.15rem 0.65rem;
    border-radius:50px;
    letter-spacing:0.02em;
}

.info-bar-badge--open {
    background:rgba(255,255,255,0.2);
    color:#a7f3d0;
}

.info-bar-badge--closed {
    background:rgba(255,255,255,0.2);
    color:#fecaca;
}

.info-bar-link {
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:rgba(255,255,255,0.9);
    font-size:0.82rem;
    font-weight:500;
    transition:color 0.2s ease;
}

.info-bar-link:hover { color:var(--color-white); }

.info-bar-link svg {
    flex-shrink:0;
    opacity:0.8;
}


/* === Sticky Order Dock === */
.order-dock {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:999;
    background:var(--color-charcoal);
    padding:0.6rem var(--space-lg);
    box-shadow:0 -4px 20px rgba(0,0,0,0.15);
}

.order-dock-inner {
    display:flex;
    gap:var(--space-sm);
    max-width:480px;
    margin:0 auto;
}

.order-dock-btn {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0.7rem 1rem;
    font-family:var(--font-display);
    font-size:0.9rem;
    font-weight:700;
    border-radius:50px;
    text-decoration:none;
    transition:all 0.25s ease;
    cursor:pointer;
    border:none;
}

.order-dock-pickup {
    background:var(--color-taco-orange);
    color:var(--color-white);
}

.order-dock-pickup:hover {
    background:var(--color-waffle-red);
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(193,79,45,0.35);
}

.order-dock-delivery {
    background:var(--color-white);
    color:var(--color-charcoal);
}

.order-dock-delivery:hover {
    background:var(--color-gold-pale);
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(0,0,0,0.1);
}

.order-dock-btn svg { flex-shrink:0; }


/* === Sign In Button (Header) === */
.btn-sign-in {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0.45rem 1rem;
    font-family:var(--font-display);
    font-size:0.85rem;
    font-weight:600;
    color:var(--color-charcoal);
    background:transparent;
    border:2px solid var(--color-stone-light);
    border-radius:50px;
    cursor:pointer;
    transition:all 0.25s ease;
    flex-shrink:0;
}

.btn-sign-in:hover {
    border-color:var(--color-taco-orange);
    color:var(--color-taco-orange);
    background:rgba(236,106,54,0.06);
}

.btn-sign-in svg { flex-shrink:0; }

.btn-outline-charcoal {
    background:transparent;
    color:var(--color-charcoal);
    border-color:var(--color-stone-light);
}

.btn-outline-charcoal:hover {
    border-color:var(--color-taco-orange);
    color:var(--color-taco-orange);
}

.mobile-signin-btn {
    width:100%;
    justify-content:center;
    gap:8px;
}


/* === Hamburger === */
.mobile-toggle { display:none; background:none; border:none; cursor:pointer; padding:var(--space-sm); }
.hamburger, .hamburger::before, .hamburger::after { display:block; width:26px; height:3px; background:var(--color-charcoal); border-radius:2px; transition:all 0.3s ease; }
.hamburger { position:relative; }
.hamburger::before, .hamburger::after { content:''; position:absolute; left:0; }
.hamburger::before { top:-8px; }
.hamburger::after { top:8px; }
.mobile-toggle[aria-expanded="true"] .hamburger { background:transparent; }
.mobile-toggle[aria-expanded="true"] .hamburger::before { top:0; transform:rotate(45deg); }
.mobile-toggle[aria-expanded="true"] .hamburger::after { top:0; transform:rotate(-45deg); }


/* === Buttons === */
.btn { display:inline-flex; align-items:center; gap:var(--space-sm); padding:0.85rem 1.75rem; font-family:var(--font-display); font-size:1rem; font-weight:600; border:2px solid transparent; border-radius:50px; cursor:pointer; transition:all 0.25s ease; text-decoration:none; }
.btn-primary { background:var(--color-gold); color:var(--color-charcoal); border-color:var(--color-gold); }
.btn-primary:hover { background:var(--color-gold-light); border-color:var(--color-gold-light); transform:translateY(-2px); box-shadow:var(--shadow-warm); }
.btn-outline { background:transparent; color:var(--color-white); border-color:rgba(255,255,255,0.4); }
.btn-outline:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.7); transform:translateY(-2px); }
.btn-secondary { background:var(--color-taco-orange); color:var(--color-white); border-color:var(--color-taco-orange); }
.btn-secondary:hover { background:var(--color-orange); border-color:var(--color-orange); transform:translateY(-2px); box-shadow:0 4px 20px rgba(234,88,12,0.25); }
.btn-white { background:var(--color-white); color:var(--color-taco-orange); border-color:var(--color-white); }
.btn-white:hover { background:var(--color-cream); border-color:var(--color-cream); transform:translateY(-2px); box-shadow:0 4px 20px rgba(0,0,0,0.15); }
.btn-outline-dark { background:transparent; color:var(--color-white); border-color:rgba(255,255,255,0.5); }
.btn-outline-dark:hover { background:rgba(0,0,0,0.15); border-color:var(--color-white); transform:translateY(-2px); }


/* === Content Sections === */
.section { padding:var(--space-4xl) 0; position:relative; }
.section + .section::before {
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:min(80%, 600px);
    height:3px;
    background:linear-gradient(90deg, transparent 0%, var(--color-taco-orange) 30%, var(--color-gold) 70%, transparent 100%);
    border-radius:2px;
}
.section-alt { background:var(--color-white); }
.section-header { text-align:center; max-width:600px; margin:0 auto var(--space-2xl); }
.section-header p { margin-top:var(--space-sm); color:var(--color-brown-light); font-size:1.05rem; }
.section-label { display:inline-block; font-family:var(--font-display); font-size:0.85rem; font-weight:600; color:var(--color-orange); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-sm); }


/* === Feature Cards === */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-xl); }
.feature-card { background:var(--color-white); border-radius:var(--radius-lg); padding:var(--space-2xl) var(--space-xl); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--color-stone-light); transition:all 0.3s ease; }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--color-gold); }
.feature-icon { font-size:2.5rem; margin-bottom:var(--space-md); display:block; }
.feature-card h3 { margin-bottom:var(--space-sm); }
.feature-card p { color:var(--color-brown-light); font-size:0.95rem; }


/* === Hours Card === */
.hours-card { background:var(--color-white); border-radius:var(--radius-lg); padding:var(--space-2xl); box-shadow:var(--shadow-md); border-top:4px solid var(--color-gold); max-width:480px; margin:0 auto; }
.hours-card h3 { text-align:center; margin-bottom:var(--space-lg); }
.hours-table { width:100%; border-collapse:collapse; }
.hours-table td { padding:var(--space-sm) 0; border-bottom:1px solid var(--color-stone-light); }
.hours-table tr:last-child td { border-bottom:none; }
.hours-table td:first-child { font-weight:600; color:var(--color-charcoal); }
.hours-table td:last-child { text-align:right; color:var(--color-brown-light); }


/* === Legal / Terms Content === */
.legal-content { max-width:760px; margin:0 auto; }
.legal-updated { font-size:0.85rem; color:var(--color-stone); margin-bottom:var(--space-2xl); font-style:italic; }
.legal-content h2 { font-size:1.15rem; margin-top:var(--space-2xl); margin-bottom:var(--space-sm); color:var(--color-charcoal); }
.legal-content h2:first-of-type { margin-top:0; }
.legal-content p { color:var(--color-brown); line-height:1.8; margin-bottom:var(--space-md); font-size:0.95rem; }
.legal-content a { color:var(--color-taco-orange); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.legal-content a:hover { color:var(--color-waffle-red); }


/* === Info Banner === */
.info-banner { background:linear-gradient(135deg,var(--color-orange) 0%,var(--color-gold) 100%); color:var(--color-white); padding:var(--space-2xl) 0; text-align:center; }
.info-banner h2 { color:var(--color-white); margin-bottom:var(--space-sm); }
.info-banner p { font-size:1.1rem; opacity:0.9; margin-bottom:var(--space-lg); }
.info-banner .btn { background:var(--color-white); color:var(--color-orange); border-color:var(--color-white); }
.info-banner .btn:hover { background:var(--color-cream); transform:translateY(-2px); box-shadow:0 4px 20px rgba(0,0,0,0.15); }
.info-banner--order { background:linear-gradient(135deg,var(--color-waffle-red) 0%,var(--color-taco-orange) 100%); }


/* === Page Headers === */
.page-header { background:var(--color-charcoal); color:var(--color-white); padding:var(--space-2xl) 0; text-align:center; position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 50%,rgba(245,166,35,0.1) 0%,transparent 50%); pointer-events:none; }
.page-header::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }
.page-header h1 { color:var(--color-white); position:relative; z-index:1; }
.page-header p { color:var(--color-stone); margin-top:var(--space-sm); position:relative; z-index:1; font-size:1.1rem; }


/* === Footer === */
.site-footer { background:var(--color-charcoal); color:var(--color-stone); padding:var(--space-3xl) 0 var(--space-lg); }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--space-2xl); padding-bottom:var(--space-2xl); border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-logo { height:70px; width:auto; margin-bottom:var(--space-md); }
.footer-tagline { color:var(--color-stone); font-size:0.95rem; }
.footer-social { display:flex; gap:var(--space-md); margin:var(--space-lg) 0; }
.footer-social a { color:var(--color-stone); transition:color 0.2s ease; display:flex; }
.footer-social a:hover { color:var(--color-gold-light); }
.footer-order-btn { margin-top:var(--space-sm); }
.site-footer h3 { color:var(--color-gold-light); font-family:var(--font-display); font-size:1.05rem; margin-bottom:var(--space-md); }
.site-footer address { font-style:normal; }
.site-footer address a { color:var(--color-stone); transition:color 0.2s ease; }
.site-footer address a:hover { color:var(--color-gold-light); }
.site-footer address p { margin-bottom:var(--space-sm); }
.site-footer .hours-table td { font-size:0.9rem; padding:3px 0; border-color:rgba(255,255,255,0.06); }
.site-footer .hours-table td:first-child { color:var(--color-stone-light); font-weight:500; }
.site-footer .hours-table td:last-child { color:var(--color-stone); }
.footer-bottom { text-align:center; padding-top:var(--space-lg); font-size:0.85rem; color:var(--color-brown-light); }


/* === Scroll to Top === */
.scroll-top {
    position:fixed;
    bottom:80px;
    right:var(--space-xl);
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--color-taco-orange);
    color:var(--color-white);
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 16px rgba(236,106,54,0.35);
    transition:all 0.3s ease;
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    z-index:900;
}

.scroll-top.visible {
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

.scroll-top:hover {
    background:var(--color-waffle-red);
    transform:translateY(-3px);
    box-shadow:0 6px 20px rgba(193,79,45,0.4);
}


/* === Floating Social FAB === */
.social-fab {
    position:fixed;
    bottom:140px;
    right:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    z-index:900;
}

.social-fab-toggle {
    width:48px;
    height:48px;
    border-radius:50%;
    border:none;
    background:var(--color-charcoal);
    color:var(--color-white);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease, box-shadow 0.3s ease;
    position:relative;
    z-index:2;
}

.social-fab-toggle:hover {
    box-shadow:0 6px 20px rgba(0,0,0,0.35);
}

.social-fab-toggle .fab-icon-share,
.social-fab-toggle .fab-icon-close {
    position:absolute;
    transition:opacity 0.3s ease;
}

.social-fab-toggle .fab-icon-close {
    opacity:0;
}

.social-fab.open .social-fab-toggle {
    transform:rotate(360deg);
    background:var(--color-waffle-red);
}

.social-fab.open .social-fab-toggle .fab-icon-share { opacity:0; }
.social-fab.open .social-fab-toggle .fab-icon-close { opacity:1; }

.social-fab.closing .social-fab-toggle {
    transform:rotate(0deg);
}

.social-fab-link {
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,0.15);
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    opacity:0;
    transform:scale(0.3) translateY(20px);
    pointer-events:none;
}

.social-fab-fb { background:#1877F2; color:#fff; }
.social-fab-fb:hover { background:#0d65d9; transform:scale(1.12) translateY(0) !important; box-shadow:0 5px 16px rgba(24,119,242,0.4); }

.social-fab-ig { background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color:#fff; }
.social-fab-ig:hover { transform:scale(1.12) translateY(0) !important; box-shadow:0 5px 16px rgba(214,36,159,0.4); }

.social-fab.open .social-fab-link { opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
.social-fab.open .social-fab-fb { transition-delay:0.08s; }
.social-fab.open .social-fab-ig { transition-delay:0.03s; }


/* === Language Preference Popup === */
.lang-popup {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-lg);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.35s ease, visibility 0.35s ease;
}

.lang-popup.show {
    opacity:1;
    visibility:visible;
}

.lang-popup-card {
    background:var(--color-white);
    border-radius:var(--radius-xl);
    padding:var(--space-2xl) var(--space-2xl) var(--space-xl);
    text-align:center;
    max-width:380px;
    width:100%;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
    transform:scale(0.9) translateY(20px);
    transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.lang-popup.show .lang-popup-card {
    transform:scale(1) translateY(0);
}

.lang-popup-logo {
    width:100px;
    margin:0 auto var(--space-lg);
}

.lang-popup-card h3 {
    font-size:1.3rem;
    margin-bottom:var(--space-sm);
    color:var(--color-charcoal);
}

.lang-popup-card p {
    color:var(--color-brown-light);
    font-size:0.9rem;
    line-height:1.5;
    margin-bottom:var(--space-xl);
}

.lang-popup-btns {
    display:flex;
    gap:var(--space-md);
}

.lang-popup-btn {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-sm);
    padding:var(--space-lg) var(--space-md);
    background:var(--color-cream);
    border:2px solid var(--color-stone-light);
    border-radius:var(--radius-lg);
    cursor:pointer;
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:600;
    color:var(--color-charcoal);
    transition:all 0.25s ease;
}

.lang-popup-btn:hover {
    border-color:var(--color-taco-orange);
    background:var(--color-gold-pale);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.lang-popup-flag {
    font-size:2rem;
    line-height:1;
}


/* === Sign In Modal === */
.signin-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-lg);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease, visibility 0.3s ease;
}

.signin-overlay.show {
    opacity:1;
    visibility:visible;
}

.signin-modal {
    background:var(--color-white);
    border-radius:var(--radius-xl);
    padding:var(--space-2xl);
    max-width:420px;
    width:100%;
    position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
    transform:scale(0.9) translateY(20px);
    transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    text-align:center;
}

.signin-overlay.show .signin-modal {
    transform:scale(1) translateY(0);
}

.signin-close {
    position:absolute;
    top:var(--space-md);
    right:var(--space-md);
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:var(--color-cream);
    color:var(--color-charcoal);
    font-size:1.1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s ease;
}

.signin-close:hover {
    background:var(--color-stone-light);
    color:var(--color-waffle-red);
}

.signin-logo {
    width:80px;
    margin:0 auto var(--space-md);
}

.signin-modal h2 {
    margin-bottom:var(--space-xs);
}

.signin-subtitle {
    color:var(--color-brown-light);
    font-size:0.9rem;
    margin-bottom:var(--space-xl);
}

.signin-form {
    display:flex;
    flex-direction:column;
    gap:var(--space-md);
    text-align:left;
}

.signin-field label {
    display:block;
    font-family:var(--font-display);
    font-size:0.85rem;
    font-weight:600;
    color:var(--color-charcoal);
    margin-bottom:var(--space-xs);
}

.signin-field input {
    width:100%;
    padding:0.7rem 1rem;
    border:2px solid var(--color-stone-light);
    border-radius:var(--radius);
    font-family:var(--font-body);
    font-size:0.95rem;
    color:var(--color-dark);
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
}

.signin-field input:focus {
    outline:none;
    border-color:var(--color-taco-orange);
    box-shadow:0 0 0 3px rgba(236,106,54,0.12);
}

.signin-submit {
    width:100%;
    justify-content:center;
    margin-top:var(--space-xs);
}

.signin-options {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-md);
}

.signin-remember {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:0.85rem;
    color:var(--color-brown);
    cursor:pointer;
    user-select:none;
}

.signin-remember input[type="checkbox"] {
    width:16px;
    height:16px;
    accent-color:var(--color-taco-orange);
    cursor:pointer;
    margin:0;
}

.signin-forgot {
    font-size:0.85rem;
    font-weight:600;
    color:var(--color-taco-orange);
    transition:color 0.2s ease;
    white-space:nowrap;
}

.signin-forgot:hover {
    color:var(--color-waffle-red);
}

.signin-footer-text {
    margin-top:var(--space-lg);
    font-size:0.85rem;
    color:var(--color-brown-light);
}

.signin-link {
    color:var(--color-taco-orange);
    font-weight:600;
}

.signin-link:hover {
    color:var(--color-waffle-red);
}


/* === Animations === */
@keyframes floatIn { from{opacity:0;transform:translateY(-20px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }


/* === Mobile Nav Overlay === */
.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:998; }
.nav-overlay.show { display:block; }


/* ==========================================================================
   Responsive — Global
   ========================================================================== */

@media (max-width:900px) {
    .footer-grid { grid-template-columns:1fr; gap:var(--space-xl); }
}

@media (max-width:768px) {
    :root { --header-height:70px; }

    /* Info bar mobile */
    .info-bar-inner { padding:var(--space-xs) 0; }
    .info-bar-details { gap:var(--space-sm); }
    .info-bar-link { font-size:0.75rem; }

    /* Order dock mobile */
    .order-dock { padding:0.5rem var(--space-md); }
    .order-dock-btn { font-size:0.85rem; padding:0.65rem 0.8rem; }

    .mobile-toggle { display:block; z-index:1001; }
    .main-nav.open ~ .mobile-toggle { opacity:0; pointer-events:none; }

    /* === Full-width Mobile Nav Drawer === */
    .main-nav {
        position:fixed;
        top:0; left:0;
        width:100%; height:100vh;
        background:var(--color-white);
        transform:translateX(100%);
        transition:transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
        z-index:999;
        display:flex; flex-direction:column;
        padding:0; overflow-y:auto;
    }

    .main-nav.open { transform:translateX(0); }

    .mobile-nav-header {
        display:flex; align-items:center; justify-content:flex-end;
        padding:var(--space-sm) var(--space-lg) 0; flex-shrink:0;
    }

    .mobile-close {
        display:flex; align-items:center; justify-content:center;
        width:44px; height:44px;
        background:none; border:none;
        font-size:1.6rem; color:var(--color-charcoal);
        cursor:pointer; transition:color 0.2s ease;
    }

    .mobile-close:hover { color:var(--color-taco-orange); }

    .mobile-nav-brand {
        display:flex; justify-content:center;
        padding:0 var(--space-xl) var(--space-md);
        margin-top:calc(-1 * var(--space-md));
        border-bottom:3px solid var(--color-gold); flex-shrink:0;
    }

    .mobile-nav-logo { height:100px; width:auto; }

    .nav-list {
        flex-direction:column; gap:0;
        padding:var(--space-lg) var(--space-xl); flex-shrink:0;
    }

    .nav-list li { border-bottom:1px solid var(--color-stone-light); }
    .nav-list li:last-child { border-bottom:none; }
    .nav-list a { font-size:1.15rem; padding:var(--space-md) var(--space-md); border-radius:var(--radius); }

    .mobile-nav-extras {
        display:flex; flex-direction:column; align-items:center;
        gap:var(--space-lg); padding:var(--space-lg) var(--space-xl) var(--space-xl); flex-shrink:0;
    }

    .mobile-order-btn { width:100%; justify-content:center; padding:1rem; font-size:1.1rem; }

    .mobile-nav-social { display:flex; gap:var(--space-xl); }
    .mobile-nav-social a { color:var(--color-brown-light); transition:color 0.2s ease; display:flex; }
    .mobile-nav-social a:hover { color:var(--color-taco-orange); }

    /* Sign in button — hide desktop version on mobile */
    .btn-sign-in { display:none; }

    .section { padding:var(--space-3xl) 0; }
    .features-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto; }

    .scroll-top { width:42px; height:42px; bottom:75px; right:var(--space-lg); }
}