/**
 * Dosily – Responsive & Mobile-Touch Fixes
 * Scope: global (all pages)
 * Author: dosily-dev
 * Version: 1.0.0
 *
 * Breakpoints used:
 *   ≤ 320px   xs-mobile
 *   ≤ 375px   small-mobile
 *   ≤ 414px   medium-mobile
 *   ≤ 767px   all-mobile
 *   ≤ 1024px  tablet / small-desktop
 */

/* =========================================================
   0. BASE — prevent horizontal scroll on every page
   ========================================================= */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Remove implicit horizontal margin from Elementor columns that can cause overflow */
.elementor-row {
    flex-wrap: wrap;
}

/* =========================================================
   1. IMAGES — always shrink inside their container
   ========================================================= */
img {
    max-width: 100%;
    height: auto;
}

/* Course card images — fixed aspect-ratio, no stretching */
.image_thumb.nail img,
.image_thumb.nail .course_icon_img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* =========================================================
   2. COURSE CARD — make entire card clickable via overlay link
   ========================================================= */

/* Card wrapper must be position:relative so the overlay anchor stretches to fill it */
.ld_course_grid article.thumbnail.course {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    transition: box-shadow .2s;
}

.ld_course_grid article.thumbnail.course:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

/* The overlay anchor covers the entire card */
.ld_course_grid article.thumbnail.course > a.dosily-card-overlay {
    position: absolute;
    inset: 0;           /* top:0; right:0; bottom:0; left:0 */
    z-index: 1;
    display: block;
    /* transparent – only used for click interception */
}

/* All interactive child elements must sit above the overlay.
   NOTE: Do NOT force `position: relative` on elements that the theme
   positions absolutely (e.g. .ld_course_grid_button which holds the
   play button overlaid on the thumbnail). For those we only raise
   z-index so they stay clickable above the .dosily-card-overlay. */
.ld_course_grid article.thumbnail.course .overlay_video,
.ld_course_grid article.thumbnail.course .professional_whislist,
.ld_course_grid article.thumbnail.course .addtoany_shortcode,
.ld_course_grid article.thumbnail.course form,
.ld_course_grid article.thumbnail.course [class*="wishlist"],
.ld_course_grid article.thumbnail.course [class*="add-to-cart"],
.ld_course_grid article.thumbnail.course .ld_course_grid_price {
    position: relative;
    z-index: 2;
}

/* Keep theme's absolute positioning for play-button wrapper, just lift z-index */
.ld_course_grid article.thumbnail.course .ld_course_grid_button,
.ld_course_grid article.thumbnail.course .video_button {
    z-index: 2;
}

/* Minimum tap-target size for interactive elements.
   Exclude .video_button / .btn-primary inside the thumbnail because the
   theme sizes the play icon (~30-50px) via background-image and a larger
   min-size visually breaks the overlay. */
.ld_course_grid article.thumbnail.course button:not(.video_button):not(.btn-primary),
.ld_course_grid article.thumbnail.course .btn:not(.video_button):not(.btn-primary),
.ld_course_grid article.thumbnail.course a[href]:not(.dosily-card-overlay) {
    min-height: 44px;
    min-width: 44px;
}

/* =========================================================
   3. COURSE LISTING GRID — responsive columns
   ========================================================= */

/* 3 col on desktop (default), handled by existing col-md-4 / col-sm-6 Bootstrap */

@media (max-width: 1024px) {
    .ld-course-list-items .ld_course_grid {
        width: 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767px) {
    .ld-course-list-items .ld_course_grid {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 auto 20px !important;
    }
    .ld-course-list-items.ld_course_list_items_grid {
        display: block;
    }
}

/* =========================================================
   4. HEADER / LOGO / NAVIGATION
   ========================================================= */

@media (max-width: 767px) {
    /* Prevent logo image overflow */
    .site-branding img,
    .custom-logo,
    .custom-logo-link img {
        max-width: 140px !important;
        height: auto !important;
    }

    /* Astra mobile nav toggle must be visible */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Astra header – avoid padding that pushes content off-screen */
    .main-header-bar .ast-container,
    .main-header-bar-wrap .ast-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }

    /* Mobile nav dropdown full-width */
    .main-navigation ul.sub-menu,
    .main-header-menu .sub-menu,
    #ast-hf-menu-1 .sub-menu {
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
    }

    /* Sticky header must not overlap content — handled by padding-top on body by Astra,
       but ensure it does not clip course cards */
    .ast-header-sticked ~ #content {
        padding-top: 0 !important;
    }
}

/* =========================================================
   5. HOME SEARCH BAR — prevent overflow at all widths
   ========================================================= */

.search-container {
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 767px) {
    body.home .search-container {
        width: calc(100% - 20px) !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Constrain the autocomplete input so it doesn't overflow */
    .awesomplete {
        width: calc(100% - 120px) !important;
        min-width: 0;
    }

    .awesomplete > input,
    #home-search {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Category select pill */
    #course {
        max-width: 100px !important;
        min-width: 0 !important;
        flex-shrink: 1;
    }
}

@media (max-width: 414px) {
    .awesomplete {
        width: calc(100% - 105px) !important;
    }
    body.home .search-container button {
        width: 45px !important;
        background-size: 50px !important;
        background-position: 0px 3px !important;
    }
}

/* =========================================================
   6. HOMEPAGE SECTIONS
   ========================================================= */

@media (max-width: 767px) {
    /* Top banner — no fixed height that cuts off content */
    .home_page_top_banner {
        background-size: cover !important;
        min-height: 0 !important;
        padding-bottom: 20px;
    }

    /* Specialisation icons — 2 per row instead of 5 */
    .home_spec_icon {
        width: 45% !important;
        display: inline-block;
        vertical-align: top;
    }

    /* Partner logos wrap nicely */
    .partner_blocksection ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
        margin: 0;
    }
    .partner_blocksection ul li {
        width: auto !important;
        padding: 5px 8px !important;
    }
}

@media (max-width: 414px) {
    /* Prevent elementor column text overflow */
    .elementor-column-wrap,
    .elementor-widget-container {
        word-break: break-word;
    }
}

/* =========================================================
   7. COURSE DETAIL PAGE (single-sfwd-courses)
   ========================================================= */

@media (max-width: 1024px) {
    /* Right-side course status box – reduce width so it doesn't overlap */
    .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
        width: 100% !important;
        padding-left: 3% !important;
        padding-right: 3% !important;
        box-sizing: border-box;
    }

    /* Enrolled/started float bar */
    .learndash.learndash_post_sfwd-courses.user_has_no_access .float_bar {
        width: 100% !important;
        float: none !important;
        clear: both;
    }
}

@media (max-width: 767px) {
    /* Start-course button – full width, comfortable tap target */
    .learndash-wrapper .ld-course-status .ld-course-status-action .btn,
    .learndash-wrapper .ld-course-status .ld-course-status-action a,
    #btn-razorpay,
    .ld-course-status-action .ld-button {
        width: 100% !important;
        min-height: 48px;
        font-size: 16px;
        display: block;
        text-align: center;
        box-sizing: border-box;
    }

    /* Instructor section — stack vertically */
    .Instructors_blk,
    .Instructors_details {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
    .Instructors_blk img.Instructors_blk_img {
        margin: 0 auto 10px !important;
        display: block;
    }

    /* Curriculum / modules accordion */
    .learndash-wrapper .ld-item-list-item-preview,
    .learndash-wrapper .ld-lesson-item {
        word-break: break-word;
    }

    /* Course preview card — don't let it overflow on right side */
    .show_in_desktop.ld-course-status-not-enrolled {
        position: relative !important;
        right: auto !important;
        float: none !important;
        margin: 0 auto !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Duration blocks – 2 per row on phone */
    .duration_blk ul li {
        width: 45% !important;
        box-sizing: border-box;
    }

    /* insstruction sidebar — go full width */
    .insstruction_datadetais {
        width: 100% !important;
        float: none !important;
        border-left: none !important;
        padding-left: 0 !important;
    }
    .home_page_instructor .Instructors_details {
        width: 100% !important;
        float: none !important;
    }
}

@media (max-width: 414px) {
    /* Very small phones — duration items stack 1 per row */
    .duration_blk ul li {
        width: 100% !important;
        padding: 8px 0 !important;
    }
}

/* =========================================================
   8. CART PAGE
   ========================================================= */

@media (max-width: 767px) {
    .cart_div {
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px;
    }
    .woocommerce .cart-collaterals {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }
    /* Cart table cells — full width stacked */
    .woocommerce-cart table.cart td,
    .woocommerce-cart table.cart th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .woocommerce-cart .image_thumb1 {
        width: 100% !important;
    }
    .woocommerce-cart .image_thumb1 img {
        width: 100px !important;
        height: auto !important;
    }
    .product-price {
        text-align: left !important;
    }
    .applied_coupon_code {
        width: 70% !important;
    }
    .sbmt_coupon_code {
        width: 29% !important;
    }
}

/* =========================================================
   9. CHECKOUT PAGE
   ========================================================= */

@media (max-width: 767px) {
    .checkout-collaterals {
        width: 100% !important;
        float: none !important;
    }
    .woocommerce .form-row-wide,
    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last,
    .woocommerce-page form .form-row-first,
    .woocommerce-page form .form-row-last {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
    .woocommerce #payment #place_order,
    .woocommerce-page #payment #place_order {
        width: 100% !important;
        box-sizing: border-box;
        padding: 14px 20px !important;
    }
    #order_review table.shop_table {
        width: 100% !important;
    }
    .checkout_banner {
        background-size: auto !important;
        height: auto !important;
    }
}

/* =========================================================
   10. LOGIN & SIGNUP PAGES
   ========================================================= */

@media (max-width: 767px) {
    /* Woo login/register form */
    .woocommerce-account .entry-content,
    .woocommerce-MyAccount-content {
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* Custom login popup modal */
    .overlay.popupshow .popup {
        width: 95% !important;
        max-width: 95vw;
        margin: 20px auto !important;
        box-sizing: border-box;
    }
    .overlay.popupshow input {
        width: 100% !important;
        box-sizing: border-box;
    }
    .register_label {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 4px;
    }

    /* Gravity Forms */
    .gform_wrapper .top_label input.medium,
    .gform_wrapper .top_label select.medium,
    .gform_wrapper .top_label textarea.medium {
        width: 100% !important;
    }
}

/* =========================================================
   11. FOOTER
   ========================================================= */

/* Live site keeps the 2-column footer (logo | links) down to ~580px;
   only stack to single column on small phones to match parity. */
@media (max-width: 580px) {
    .footer_sub_blk,
    .footer_sub_blk_right {
        width: 100% !important;
        float: none !important;
    }
    .footer_sub_blk_right ul {
        width: 50% !important;
        display: inline-block;
        vertical-align: top;
    }
    .footer_sub_blk_right ul.contact_ul {
        width: 100% !important;
    }
    .copyright_block .links {
        text-align: center !important;
        width: 100% !important;
        float: none !important;
    }
}

@media (max-width: 414px) {
    .footer_sub_blk_right ul {
        width: 100% !important;
    }
}

/* =========================================================
   12. MOBILE TOUCH EXPERIENCE
   ========================================================= */

/* Minimum tap target 44×44 px for all interactive elements */
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
.btn {
    -webkit-tap-highlight-color: rgba(0, 0, 0, .1);
}

button,
input[type="submit"],
input[type="button"],
.btn,
.menu-toggle {
    min-height: 44px;
    min-width: 44px;
}

/* Override: course-card play button (a small icon-style span/btn-primary)
   should keep its theme-defined size (~30-50px) – the global 44px min
   would push it out of the absolute-positioned overlay wrapper. */
.thumbnail.course .video_button,
.thumbnail.course .btn-primary,
.ld_course_grid .btn-primary,
.ld_course_grid .video_button {
    min-height: 0 !important;
    min-width: 0 !important;
}

/* Prevent double-tap zoom on iOS for common buttons */
a,
button {
    touch-action: manipulation;
}

/* Ensure hover-state features degrade gracefully on touch */
@media (hover: none) {
    /* Overlay video stays hidden on hover-only devices; show on tap via JS */
    .image_thumb.nail .overlay_video {
        opacity: 0;
        pointer-events: none;
    }
    .image_thumb.nail:focus-within .overlay_video,
    .image_thumb.nail.tapped .overlay_video {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Hamburger menu toggle — keep big enough for thumbs */
.menu-toggle,
.ast-mobile-header-wrap .menu-toggle {
    padding: 10px 12px !important;
}

/* Search input — large enough on mobile */
@media (max-width: 767px) {
    #home-search,
    .awesomplete > input,
    input[type="search"],
    input[type="text"] {
        font-size: 16px !important; /* prevents iOS auto-zoom on focus */
    }
    select {
        font-size: 16px !important;
    }
}

/* =========================================================
   13. STICKY / FIXED ELEMENTS — must not block content
   ========================================================= */

@media (max-width: 767px) {
    /* Notification bar should not overlap content at bottom */
    .notification_bar {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        left: 10px !important;
        box-sizing: border-box;
    }

    /* Admin bar — WordPress default, but ensure it doesn't double-count */
    #wpadminbar {
        position: fixed !important;
    }
}

/* =========================================================
   14. TEXT — prevent overflow / word wrap
   ========================================================= */

.entry-title,
.entry-content,
h1, h2, h3, h4, h5, h6,
p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Course card title must not overflow card width */
.ld_course_grid .entry-title,
.ld_course_grid .caption .title_block h3 {
    white-space: normal !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: 3em;
}

/* =========================================================
   15. IMAGES — lazy loading & layout-shift prevention
   ========================================================= */

/*
 * Course thumbnail aspect-ratio boxes intentionally NOT applied here.
 * The live site (https://dosily.com) lets images flow at their natural
 * height (~153px at 327px wide) — the parent .image_thumb.nail has no
 * fixed height. Adding a padding-top:56.25% trick collapses the parent
 * to 0 because of how some Astra/LearnDash sub-rules interact, hiding
 * every course thumbnail. Match live behaviour instead.
 */

/* =========================================================
   16. PERFORMANCE — reduce layout shift for known asset sizes
   ========================================================= */

/* Logo placeholder — stop CLS from logo load */
.custom-logo-link {
    display: inline-block;
    min-width: 120px;
    min-height: 40px;
}

/* Font display swap already set via @font-face in style.css;
   this ensures text remains visible during webfont load */
@font-face {
    font-display: swap;
}

/* =========================================================
   17. TABLET (768px – 1024px) FIXES
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
    /* 2-column course grid on tablet */
    .ld-course-list-items .ld_course_grid {
        width: 50% !important;
        max-width: 50% !important;
    }

    /* Course detail right box — narrower on tablet to avoid overlap */
    .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
        width: 100% !important;
        padding: 3% !important;
        box-sizing: border-box;
    }

    /* Cart — 2-col still ok, only shrink collaterals */
    .cart_div {
        width: 60% !important;
    }
    .woocommerce .cart-collaterals {
        width: 37% !important;
    }

    /* Checkout form fields – single column on narrow tablet */
    .woocommerce .form-row-wide {
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/* =========================================================
   18. SMALL PHONES (≤ 375px)
   ========================================================= */

@media (max-width: 375px) {
    /* Logo — tiny screen */
    .custom-logo,
    .custom-logo-link img {
        max-width: 110px !important;
    }

    /* Headline font size clamp */
    h1, .elementor-image-box-title {
        font-size: clamp(16px, 5vw, 28px) !important;
    }

    /* Popup / overlay – no horizontal overflow */
    .overlay.popupshow .popup {
        width: 98% !important;
        margin: 10px auto !important;
    }
}

/* =========================================================
   19. 320px PHONES
   ========================================================= */

@media (max-width: 320px) {
    body {
        font-size: 13px;
    }

    h1, .page-title {
        font-size: 18px !important;
    }

    /* Avoid very small font that makes text unreadable */
    .copy_span,
    .copyright_block .links a,
    .footer_sub_blk_right ul li {
        font-size: 11px !important;
    }
}

/* -------------------------------------------------------
   Dosily: Page-transition loader (course card click)
   ------------------------------------------------------- */
#dosily-page-loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255, 255, 255, 0.88);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#dosily-page-loader.active {
    display: flex;
}
#dosily-page-loader .dosily-spinner {
    width: 52px;
    height: 52px;
    border: 5px solid #e8e8e8;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: dosily-spin 0.75s linear infinite;
}
#dosily-page-loader .dosily-loader-text {
    margin-top: 16px;
    font-size: 14px;
    color: #555555;
    font-family: inherit;
    letter-spacing: 0.4px;
}
@keyframes dosily-spin {
    to { transform: rotate(360deg); }
}