/* ==========================================
   SKILLCONNECT RESPONSIVE STYLES
   Add this to your existing style.css or create responsive.css
   ========================================== */

/* Base Reset & Mobile-First Approach */
* {
    box-sizing: border-box;
}

/* Typography Responsive Scaling */
html {
    font-size: 16px; /* Base font size */
}

/* Tablet */
@media (max-width: 1024px) {
    html {
        font-size: 15px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
}

/* ==========================================
   NAVIGATION RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
    nav .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    nav .flex.items-center.space-x-4 {
        gap: 0.5rem;
    }
    
    nav a {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    .logo {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    /* Hamburger Menu Styles */
    nav .flex.items-center.space-x-4 {
        display: none;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    
    nav .flex.items-center.space-x-4.show {
        display: flex;
    }
    
    nav a {
        width: 100%;
        text-align: center;
        padding: 0.75rem;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .logo {
        font-size: 1.125rem;
    }
    
    nav .mx-20, nav .mx-10 {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1rem;
    }
    
    nav .text-sm {
        font-size: 0.625rem;
    }
}

/* ==========================================
   HERO SECTION RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
    .header__container h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .header__container h2 {
        font-size: 1rem;
    }
    
    .header__container p {
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .header__container h1 {
        font-size: 1.5rem;
    }
    
    .header__container h2 {
        font-size: 0.875rem;
    }
    
    .header__container {
        padding: 2rem 1rem;
    }
    
    .header__btns {
        flex-direction: column;
        width: 100%;
    }
    
    .header__btns .btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .header__container h1 {
        font-size: 1.25rem;
    }
}

/* ==========================================
   BUTTONS RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    button, .btn, a.btn {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    button i, .btn i {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    button, .btn, a.btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
}

/* ==========================================
   FORMS RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.625rem 0.75rem;
    }
    
    label {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        padding: 0.5rem 0.625rem;
    }
}

/* ==========================================
   MODALS RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .modal > div {
        margin: 1rem;
        max-width: calc(100% - 2rem);
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    
    .modal h3 {
        font-size: 1.25rem;
    }
    
    .modal p {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .modal > div {
        padding: 1rem;
    }
    
    .modal h3 {
        font-size: 1.125rem;
    }
}

/* ==========================================
   GRID LAYOUTS RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
    .grid-cols-3,
    .md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-cols-4,
    .md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .md\:grid-cols-4 {
        grid-template-columns: 1fr;
    }
    
    .lg\:grid-cols-3,
    .lg\:grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   CARDS RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .job__card,
    .explore__card,
    .steps__card,
    .team__card {
        margin-bottom: 1rem;
    }
    
    .job__card__header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .job__card__header img {
        margin-bottom: 0.5rem;
    }
    
    .card h3, .card h4 {
        font-size: 1rem;
    }
    
    .card p {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .card {
        padding: 1rem;
    }
    
    .card h3 {
        font-size: 0.9375rem;
    }
}

/* ==========================================
   TABLES RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    th, td {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }
}

/* ==========================================
   DASHBOARD RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
    .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .lg\:col-span-2 {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    /* Stats Cards */
    .grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Sidebar */
    .lg\:col-span-1 {
        order: 2;
    }
    
    .sticky {
        position: relative;
        top: auto;
    }
    
    /* Job Cards */
    .job-card .flex {
        flex-direction: column;
    }
    
    .job-card img {
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   PROFILE PAGE RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .profile-picture {
        width: 80px;
        height: 80px;
    }
    
    .category-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .experience-badge {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
    
    .skill-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .skill-item > div {
        width: 100%;
    }
}

/* ==========================================
   JOB DETAILS RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .job-header {
        flex-direction: column;
        text-align: center;
    }
    
    .job-header img {
        margin: 0 auto 1rem;
    }
    
    .job-details .flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .job-details span {
        font-size: 0.8125rem;
    }
}

/* ==========================================
   FOOTER RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
    .footer__container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .footer__container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer__col {
        text-align: center;
    }
    
    .footer__socials {
        justify-content: center;
    }
    
    .footer__bar__container {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* ==========================================
   SKILL SETUP PAGE RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .skill-category-section {
        padding: 1rem;
    }
    
    .skill-checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .grid.grid-cols-2.md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   NOTIFICATIONS RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .notification-item {
        flex-direction: column;
    }
    
    .notification-item img {
        margin-bottom: 1rem;
    }
}

/* ==========================================
   APPLICATION VIEW RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .application-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .skill-match-score {
        flex-direction: column;
        text-align: center;
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   TEXT SIZING RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.9375rem; }
    
    .text-4xl { font-size: 2rem; }
    .text-3xl { font-size: 1.5rem; }
    .text-2xl { font-size: 1.25rem; }
    .text-xl { font-size: 1.125rem; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.25rem; }
    h2 { font-size: 1.125rem; }
    h3 { font-size: 1rem; }
    
    .text-4xl { font-size: 1.5rem; }
    .text-3xl { font-size: 1.25rem; }
    .text-2xl { font-size: 1.125rem; }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
    
    .px-8 { padding-left: 1rem; padding-right: 1rem; }
    .py-8 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .mx-8 { margin-left: 1rem; margin-right: 1rem; }
    .my-8 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
    
    .gap-8 { gap: 1rem; }
    .gap-6 { gap: 0.75rem; }
}

/* ==========================================
   SEARCH BAR RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .search-form .grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .search-form input,
    .search-form select,
    .search-form button {
        width: 100%;
    }
}

/* ==========================================
   COMPANY PROFILE RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .company-header {
        flex-direction: column;
        text-align: center;
    }
    
    .company-logo {
        margin: 0 auto 1rem;
    }
    
    .company-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .company-stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   EMPLOYER DASHBOARD RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .job-listing {
        flex-direction: column;
    }
    
    .job-actions {
        width: 100%;
        margin-top: 1rem;
    }
    
    .job-actions button {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ==========================================
   TOUCHSCREEN OPTIMIZATIONS
   ========================================== */
@media (max-width: 768px) {
    /* Larger tap targets */
    a, button, input[type="checkbox"], input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing for touch */
    .space-x-2 { gap: 0.75rem; }
    .space-y-2 { gap: 0.75rem; }
}

/* ==========================================
   PREVENT HORIZONTAL SCROLL
   ========================================== */
body {
    overflow-x: hidden;
}

.container,
.max-w-7xl,
.max-w-6xl,
.max-w-4xl {
    max-width: 100%;
    overflow-x: hidden;
}

/* ==========================================
   IMAGES RESPONSIVE
   ========================================== */
img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .company-logo,
    .profile-picture {
        width: 60px;
        height: 60px;
    }
}

/* ==========================================
   BADGE RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .badge,
    .level-badge,
    .status-badge {
        font-size: 0.6875rem;
        padding: 3px 8px;
    }
}

/* ==========================================
   HAMBURGER MENU (Add to your JS)
   ========================================== */
.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger-menu span {
    width: 25px;
    height: 3px;
    background: #374151;
    margin: 3px 0;
    transition: 0.3s;
}

@media (max-width: 768px) {
    .hamburger-menu {
        display: flex;
    }
}

/* ==========================================
   LOADING STATES
   ========================================== */
@media (max-width: 768px) {
    .spinner {
        width: 30px;
        height: 30px;
    }
}

/* ==========================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================== */
@media (max-width: 768px) {
    /* Ensure text is readable */
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    /* Focus states more visible on mobile */
    *:focus {
        outline: 2px solid #f97316;
        outline-offset: 2px;
    }
}