/* ============================================
   Tablet Responsive Styles
   Target: iPad, Android Tablets, Surface
   Breakpoints: 768px - 1024px
   ============================================ */

/* Base Tablet Styles (768px - 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    /* Typography adjustments for tablets */
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    h1,
    .h1 {
        font-size: 2.5rem !important;
    }

    h2,
    .h2 {
        font-size: 2rem !important;
    }

    h3,
    .h3 {
        font-size: 1.75rem !important;
    }

    h4,
    .h4 {
        font-size: 1.5rem !important;
    }

    /* Container adjustments */
    .container {
        max-width: 95% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Header responsive */
    #dsn_header {
        padding: 15px 30px !important;
    }

    .main-logo {
        max-width: 150px !important;
    }

    /* Navigation adjustments */
    .primary-nav {
        font-size: 0.9rem;
    }

    .primary-nav a {
        padding: 10px 15px !important;
    }

    /* Hero sections */
    .v-dark-head .container,
    .hero-section .container {
        padding: 40px 30px !important;
    }

    /* Grid layouts */
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    .row>* {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Cards and boxes */
    .box-img,
    .card,
    .service-item,
    .portfolio-item {
        margin-bottom: 30px;
    }

    /* Spacing adjustments */
    .section-padding {
        padding: 60px 0 !important;
    }

    .section-margin {
        margin: 60px 0 !important;
    }

    /* Buttons */
    .dsn-btn,
    .button {
        padding: 12px 30px !important;
        font-size: 0.95rem !important;
    }

    /* Forms */
    .form-control {
        padding: 12px 15px !important;
        font-size: 1rem !important;
    }

    /* Footer */
    footer {
        padding: 40px 30px !important;
    }

    /* Sidebar adjustments */
    .sidebar {
        width: 100% !important;
        margin-top: 40px;
    }

    /* Modal adjustments */
    .modal-dialog {
        max-width: 90% !important;
        margin: 30px auto !important;
    }

    /* Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.9rem;
    }

    /* Content sections */
    .content-section {
        padding: 40px 20px !important;
    }

    /* Gallery/Portfolio grid */
    .gallery-item,
    .portfolio-grid .item {
        width: 48% !important;
        float: left;
        margin: 1%;
    }

    /* Slider adjustments */
    .slider-wrapper,
    .carousel {
        width: 100% !important;
    }

    /* Video player */
    .video-wrapper {
        padding-bottom: 56.25% !important;
        /* 16:9 ratio */
    }

    /* Testimonials */
    .testimonial-item {
        padding: 30px !important;
    }

    /* Team members */
    .team-member {
        margin-bottom: 30px;
    }

    /* Services section */
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* Contact form */
    .contact-form {
        padding: 30px !important;
    }

    /* Blog posts */
    .blog-post {
        margin-bottom: 40px;
    }

    /* Animations - reduce complexity on tablets */
    .animated-element {
        animation-duration: 0.5s !important;
    }

    /* Remove hover effects that don't work well on tablets */
    .hover-effect:hover {
        transform: none !important;
    }
}

/* iPad Portrait (768px) */
@media only screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {

    .container {
        max-width: 90% !important;
    }

    .main-content {
        padding: 30px 20px !important;
    }

    /* Stack columns on portrait */
    .col-md-6,
    .col-md-4,
    .col-md-3 {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* Full width elements */
    .sidebar,
    .widget {
        width: 100% !important;
    }
}

/* iPad Landscape & Larger Tablets (834px - 1024px) */
@media only screen and (min-width: 834px) and (max-width: 1024px) and (orientation: landscape) {

    .container {
        max-width: 95% !important;
    }

    /* Two column layout */
    .col-md-6 {
        width: 48% !important;
        float: left;
        margin: 1%;
    }

    /* Three column layout */
    .col-md-4 {
        width: 31.333% !important;
        float: left;
        margin: 1%;
    }

    /* Header full width */
    #dsn_header {
        width: 100%;
    }

    /* Services in 2 columns */
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Specific fixes for common elements */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    /* Fix menu overflow */
    .main-navigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fix images breaking layout */
    .wp-post-image,
    .attachment-post-thumbnail {
        width: 100% !important;
        height: auto !important;
    }

    /* Fix iframe embeds */
    iframe {
        max-width: 100% !important;
    }

    /* Fix tables */
    .table-wrapper {
        overflow-x: auto;
    }

    /* Adjust padding for touch targets */
    a,
    button,
    .btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Improve readability */
    p {
        line-height: 1.8;
    }

    /* Fix sticky elements */
    .sticky-element {
        position: relative !important;
    }

    /* Remove fixed positioning that causes issues */
    .fixed-header {
        position: relative !important;
    }
}

/* RTL Support for Tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    [dir="rtl"] .gallery-item,
    [dir="rtl"] .portfolio-grid .item {
        float: right;
    }

    [dir="rtl"] .col-md-6,
    [dir="rtl"] .col-md-4 {
        float: right;
    }
}

/* Performance optimizations for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    /* Optimize images */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* Remove parallax effects */
    .parallax-section {
        background-attachment: scroll !important;
    }

    /* Ensure menu links are clickable on tablets */
    .site-header.dsn-hamburger ul.primary-nav li,
    .site-header.dsn-hamburger ul.primary-nav a,
    .site-header.dsn-hamburger ul.primary-nav ul li,
    .site-header.dsn-hamburger ul.primary-nav ul a,
    #dsn-primary-list a,
    #dsn-primary-list-mobile a,
    .primary-nav a {
        pointer-events: auto !important;
    }

    /* Ensure touch targets are large enough */
    .primary-nav a,
    .site-header a,
    #navbar_toggle {
        min-height: 44px;
        min-width: 44px;
    }
}