/*
 * Responsive Overrides CSS
 * Zeytinburnu Çilingir Theme
 * 
 * Note: Tailwind handles most responsive design using sm:, md:, lg:, xl: prefixes.
 * This file is for complex queries or specific component overrides.
 */

/* Small Devices (Mobile Phones) */
@media (max-width: 767px) {

    /* Ensure hero background doesn't get distorted */
    section.hero-section {
        background-position: center;
    }

    /* Mobile nav behavior */
    .mobile-menu-open {
        overflow: hidden;
        /* Prevent body scroll when menu is open */
    }

    /* Adjust WP aligns for mobile to fit screen */
    .alignleft,
    .alignright {
        float: none;
        display: block;
        margin: 5px auto 20px auto;
    }

    .wp-caption.alignleft,
    .wp-caption.alignright {
        float: none;
        display: block;
        margin: 5px auto 20px auto;
    }
}

/* Medium Devices (Tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet specific tweaks if needed */
}

/* Large Devices (Desktops) */
@media (min-width: 1024px) {

    /* Desktop specific tweaks if needed */
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Extra Large Devices (Large Desktops) */
@media (min-width: 1280px) {
    .container {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}