/*
  mobile_style.css

  This stylesheet defines mobile responsiveness using CSS custom properties (@media)
  Imported into the main stylesheet (style.css) to ensure consistent application of the mobile responsiveness across the entire site.
  
*/

@media (max-width: 1050px) {
	#testingDiv {
        display: none !important; /* hide full menu */
    }
	/* Stack header elements vertically */
    header.top-nav {
        flex-direction: column;
        padding: 10px 0;
        height: 50px !important;
    }
    .logo-container,
    .search-container,
    .header-text {
        width: 100% !important;
        justify-content: center !important;;
        margin: 5px 0 !important;;
        border-right: none !important;
    }
    nav.main-nav {
        display: none !important; /* hide full menu */
    }
    .toggle-btn {
        display: none !important; /* hide full menu */
    }
    /* Make page container stack and hide sidebars */
    .page-container {
        flex-direction: column;
    }
    .sidebar-left,
    .sidebar-right {
        display: none;
    }
    /* 2 per row when narrower (tweak breakpoint as needed) */
    .pill-items-image > li {
		flex: 0 1 calc(50% - 20px) !important;
	}
	.pill-section {
	    background-size: 75% 35% !important;
	}
	.home_row4_container {
        justify-content: center !important;
	}
}

/* Extra small phones */
@media (max-width: 480px) {
    .search-container {
        width: 100%;
    }
    .search-input {
        padding: 8px 10px 8px 40px;
    }
    .toggle-btn {
        font-size: 18px;
        padding: 5px;
    }
}