/* กำหนดฟอนต์ Prompt ให้กับทั้ง Body */
body {
    font-family: 'Prompt', sans-serif;
    /* padding-top is now dynamically handled by JS for mobile,
       but still good to have a base for desktop if navbar isn't full height */
}

button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

/* Custom styles for mobile menu transition */
.mobile-menu {
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
    top: 4rem; /* Should match body's padding-top or navbar height, 4rem = 64px */
}
.mobile-menu.open {
    transform: translateY(0);
}

/* Ensure mobile menu links stretch for better centering visually */
.mobile-menu a {
    width: 100%; /* Make links take full width in mobile menu */
    text-align: center; /* Center the text within the link */
}

/* Responsive adjustments for main content padding */
/* Adjust padding top on body for fixed navbar */
@media (max-width: 767px) { /* For screens smaller than md (768px) */
    body {
        padding-top: 4rem; /* Match navbar height */
    }
    /* Adjust main content padding on small screens */
    .container {
        padding-top: 1rem !important; /* Override default Tailwind mt-16, mt-20, mt-24 for small screens */
        padding-bottom: 1rem !important;
    }
}

/* Ensure footer sticks to the bottom on smaller content */
html, body {
    height: 100%;
}
#root { /* If you have a root div wrapping content */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { /* If your main content is wrapped in a <main> tag */
    flex-grow: 1;
}