/*
Theme Name: Hello Elementor Child - Device Redirect
Description: Child theme of Hello Elementor with automatic device-based page redirection. Desktop users see homepage (/), mobile users see /mobile page.
Author: Custom Child Theme
Template: hello-elementor
Version: 1.0.0
License: GPL v2 or later
Text Domain: hello-elementor-child
*/

/* Import parent theme styles */
@import url("../hello-elementor/style.css");

/* Custom styles for the child theme */

/* Device switch button styling */
.device-switch {
    display: inline-block;
    padding: 10px 15px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px 0;
    transition: background-color 0.3s ease;
}

.device-switch:hover {
    background-color: #005a87;
    color: white;
    text-decoration: none;
}

/* Device-specific styles */
.is-mobile-device {
    /* Styles that only apply to mobile devices */
}

.is-desktop-device {
    /* Styles that only apply to desktop devices */
}

/* Mobile-first responsive adjustments */
@media (max-width: 768px) {
    .device-switch {
        display: block;
        text-align: center;
        width: 100%;
        max-width: 200px;
        margin: 10px auto;
    }
}

/* Desktop specific adjustments */
@media (min-width: 769px) {
    .device-switch {
        display: inline-block;
    }
}

/* Optional: Hide elements based on device */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none;
    }
}

/* Custom table styling (since you mentioned tables earlier) */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table td, table th {
    height: 60px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ddd;
    padding: 10px;
}

table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

/* Mobile table responsiveness */
@media (max-width: 768px) {
    table {
        font-size: 14px;
    }
    
    table td, table th {
        height: 50px;
        padding: 8px 5px;
    }
}

/* Add any additional custom styles below */