@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

/* Base Styles */
html{
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Space for fixed navbar */
}

html, body {
    font-family: 'Lexend', sans-serif; 
    font-size: 15px;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: linear-gradient(
        to bottom, 
        #6a00ff -1000%,    /* Pure purple at very top */
        #000000 100%    /* Fades to black by bottom */
    );
    color: #fff; /* White text */
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body * {
    box-sizing: border-box;
}

/* Typography */
h1 {
    font-size: 4.00em;
    font-weight: 500;
    line-height: 1;
    position: relative;
    margin-top: 0;
    max-width: 700px;
    width: 100%;
    color: #fff; /* White text */
}

/* Navigation Bar Styles */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 4rem;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
    backdrop-filter: blur(8px); /* Frosted glass effect */
    border-bottom: 1px solid #222;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    user-select: none; /* Prevent text selection */
  }
  
  .nav-logo-img {
    height: 28px;
    width: auto;
    display: block; /* Fixes odd spacing */
    margin-top: 3px; /* Manually adjusted vertical alignment */
  }
  
  .nav-logo-text {
    font-size: 1.5rem;
    font-weight: 500;
    color: white;
    position: relative;
    top: 1px; /* Optical alignment */
    display: inline-block; /* Prevents text splitting */
    white-space: nowrap; /* Keeps text on one line */
  }

.nav-links {    /* nav Settings */
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8); /* more nav Settings */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    font-size: 0.95rem;
}

.nav-link:hover { /* Hovering over a nav link */
    color: white;
}

.nav-link.active, /* Selecting a nav link */
.nav-link:active {
    color: white;
}

h1:after {  /* Little gradient bar */
    position: absolute;
    content: "";
    width: 5rem;
    height: 6px;
    background: linear-gradient(90deg, #A100FF, #FF007B); /* Purple to pink gradient */
    bottom: -3rem;
    left: 0;
}

h2 {    /* h2 Settings */
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 7rem;
    color: #fff; /* White text */
}

.h2-larger {
    font-size: 2.25rem;
}

p {     /* p Settings */
    font-size: 1.250rem;
    font-weight: 500;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8); /* Subtle text */
}

li {
    font-size: 1.250rem;
    font-weight: 500;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8); /* Subtle text */
}

/* Button Styles */
button {
    background: linear-gradient(90deg, #A100FF, #FF007B); /* Purple to pink gradient */
    padding: 0.75em 1.5em;
    font-size: 1.0rem;
    border: none;
    font-weight: 600;
    border-radius: 3px;
    transition: all 200ms ease;
    color: #fff;
    position: relative;
    overflow: visible; /* Changed from hidden */
    z-index: 1;
    background-clip: padding-box; /* Addes these to prevent edge artifacts */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Restaurant Button with Gold Glow */
button.restaurant-button {
    box-shadow: 0 0 40px #FFD69C; /* Gold glow */
    animation: gentle-breathing 5s ease-in-out infinite;
    transition: box-shadow 300ms ease;
}

@keyframes gentle-breathing {
    0%, 100% {
        box-shadow: 0 0 10px #FFD69C; /* Normal state */
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 214, 156, 0.8); /* Subtle pulse */
    }
}

/* Enhanced gold glow on hover */
button.restaurant-button:hover {
    animation: none; /* Pause breathing on hover */
    opacity: 10; /* Completely disable the overlay */
}

/* DISABLE the dark overlay ONLY for restaurant button */
button.restaurant-button::before {
    display: none; /* Completely removes the overlay */
}


button:hover {
    cursor: pointer;
    transform: none; /* Remove any transform that might cause shaking */
}

button:before {
    content: '';
    position: absolute;
    top: -1px; /* Covers edges better */
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: #000;
    z-index: -1;
    opacity: 0;
    transition: opacity 200ms ease;
    border-radius: 3px; /* Match button radius */
}

button:hover:before {
    opacity: 0.8; /* Change opacity on hover */
}

button:focus {
    outline: none;
}

/* Release Roadmap Styles */
.release-roadmap-section {
    background: rgb(0, 0, 0); /* Remove the gradient from these sections */
    padding: 6rem 0; /* Matches your hero's top/bottom spacing */
}

.release-roadmap-section .container {
    display: block; /* Disables hero's flex layout */
}

.release-roadmap-section h2 {
    margin-top: 0; /* Removes default h2 top margin */
    /* Inherits all other h2 styles automatically */
}

.release-roadmap-section p {
    color: rgba(255, 255, 255, 0.8); /* Subtle text */
    max-width: 600px; /* Better readability than full width */
}

.roadmap-image-container { /* Roadmap Image Styling */
    margin: 2rem auto 0; /* Spacing above/below, centered */
    max-width: 900px; /* Adjust to match your image's ideal max size */
    width: 100%; /* Ensures it scales down on mobile */
}

.roadmap-image {
    margin-top: 75px;
    width: 100%; /* Scales with container */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes extra space under image */
}

/* Features styles */
.features-image-container {
    max-width: min(1400px, 90vw); /* Won't exceed 90% of viewport */
    margin: 0 auto; /* Center horizontally */
    width: 100%; /* More edge padding on mobile */
}

.features-image {
    width: 115%;
    height: auto;
    display: block;
    margin-left: -7.5%; /* Re-center the overflow */
    margin-top: -7.5%; /* Re-center the overflow */
    margin-bottom: -4%; /* Re-center the overflow */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .features-image-container {
        width: 100%;
        padding: 0 1rem; /* Add side padding on small screens */
    }
}

/* Restaurant How it Works Styles */
#how-it-works.release-roadmap-section {
    padding: 4rem 0; /* Reduced vertical padding */
    min-height: auto; /* Override full viewport height */
}

#how-it-works .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem; /* Reduced gap since we have padding */
    min-height: auto; /* Override full viewport height */
}

#how-it-works .content {
    flex: 1;
    min-width: 0;
    max-width: 800px; /* Your desired text width */
    padding-right: 2rem;
    align-self: center; /* Ensures text block stays centered */
}

#how-it-works .graphic {
    flex: 0 0 auto;
    width: auto;
    padding-left: 1rem;
    align-items: center; /* Centers image vertically in its container */
    height: 100%; /* Takes full height of parent */
}

#how-it-works .phone-image {
    max-width: 400px;
    width: auto;
    height: auto;
    
}

/* Contact Us Styles */
.contact-us-section{
    background: rgb(0, 0, 0); /* Remove the gradient from these sections */
    padding: 6rem 0; /* Matches your hero's top/bottom spacing */
}

.contact-us-section .container {
    display: block; /* Disables hero's flex layout */
}

.contact-us-section h2 {
    margin-top: 0; /* Removes default h2 top margin */
    margin-bottom: 1rem; /* Same as Release Roadmap */
    /* Inherits all other h2 styles automatically */
}

.contact-us-section p {
    color: rgba(255, 255, 255, 0.8); /* Subtle text */
    max-width: 600px; /* Better readability than full width */
}

/* Frosted Glass Card */
.contact-card {
    background: linear-gradient(135deg, rgb(0, 0, 0), rgba(106, 0, 255, 0.055));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    margin: 0 auto;
    margin-top: 75px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Form Styles */
.contact-form    {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group label {
    display: block;
    color: white;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    font-size: 1rem;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Footer Styles */
.site-footer {
    background: #000;
    padding: 1.5rem 4rem;
    border-top: 1px solid #222;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-right {
    display: flex;
    gap: 2rem;
}

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .footer-right {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Layout */
.container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    padding-left: 6em;
    padding-right: 6em;
}

.section-container {
    /* Clone ALL container properties */
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    padding-left: 6em;
    padding-right: 6em;
    
    /* SINGLE override */
    background: #000; /* Only change */
}

.content {
    flex: 1;
    padding-right: 4em;
    max-width: 60%;
}

/* ===== Image Scaling Fix ===== */
.graphic {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top */
    padding-left: 2em;
}

.phone-image { /* NOT PHONE IMAGE --> THIS IS THE HERO IMAGE*/
    width: 500px; 
    height: 70vh; /* Scales to viewport height */
    max-height: 800px; /* Absolute max size */
    object-fit: contain; /* Prevents distortion */
    margin-top: 75px;
    transform-origin: top center; /* Scales from top */
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .phone-image {
        height: 60vh;
    }
}

@media (max-width: 920px) {
    .container {
        flex-direction: column;
    }
    
    .phone-image {
        height: auto;
        width: 50%; /* Smaller on tablets */
        max-width: 400px;
        transform: scale(0.6);
        margin-top: 40px;
    }
}

@media (max-width: 600px) {
    .phone-image {
        width: 70%;
        transform: scale(0.7); /* Less scaling needed on mobile */
        margin-top: 30px;
    }
}

.download-link {
    margin-top: 2.5em;
}

/* Responsive Adjustments */
@media(max-width: 920px) {
    .container {
        padding-top: 5em;
        padding-bottom: 5em;
        flex-direction: column;
    }

    .content {
        max-width: 100%;
        padding-right: 0;
    }

    .graphic {
        margin-top: 3em;
        padding-left: 0;
    }

    .svg-blob {
        display: none;
    }
}

@media(max-width: 600px) {
    .container {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    h1 {
        font-size: 3em;
    }
}

/* Restaurant Page Specific Styles */
.nav-logo-text {
    /* TastiMap Header Text */
    display: inline-flex;
    align-items: center;
}

.for {
    margin-left: 0.25em;
    margin-right: 0.15em;
    /* Adjust spacing between "For" and "Restaurants" */
    font-size: 1em;
    /* Adjust font size of "For" */
    background: linear-gradient(90deg, #FFD69C 50%, #CDA772 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.restaurants {
    font-size: 1em;
    /* Adjust font size of "Restaurants" */
    background: linear-gradient(90deg, #FFD69C 50%, #CDA772 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.simple-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
    max-width: 500px;
}

.simple-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: white;
}

.simple-form .form-group input {
    width: 100%;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    font-size: 1rem;
}

@media (max-width: 920px) {
    .restaurant-container {
        padding: 6rem 2rem 3rem;
    }

    .restaurant-section {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 4rem;
    }

    .restaurant-section .text-content,
    .restaurant-section .image-content {
        max-width: 100%;
    }

    .image-placeholder {
        height: 300px;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .restaurant-container {
        padding: 6rem 1.5rem 3rem;
    }

    h1 {
        font-size: 3em;
    }
}