/*
Theme Name: grand
Theme URI: https://github.com/tidythemes/grand
Author: edwin
Description: grand child theme
Template: grand
Version: 1.0.0
Text Domain: grand

*/

/* =====================================================
   SCROLL FIXES
   ===================================================== */

/* =====================================================
   TERMS / LEGAL PAGE CONTENT
   ===================================================== */

.content-containesd {
    display: block;
    width: 100%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 24px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .content-containesd {
        padding: 80px 48px;
    }
}

@media (min-width: 1024px) {
    .content-containesd {
        padding: 95px 60px;
    }
}

/* =====================================================
   SCROLL FIXES
   ===================================================== */

/* Let the browser handle scrolling naturally */
html, body {
    touch-action: auto;
}

/* Mobile scroll fix (max-width used instead of pointer media query for
   reliable matching in Chrome Android and DevTools responsive mode).
   Undoes the virtual scroll system that main.bundle.js activates:
   - position:fixed + transform on .scroll-container-pages
   - body { height:Xpx } artificial height
   - parallax translate on .hero__background-graphic (causes hero to appear
     off-screen on narrow viewports, showing raw body background colour) */
@media (max-width: 1023px) {
    html, body {
        height: auto !important;
        overflow-y: auto !important;
    }
    .scroll-container-pages {
        position: static !important;
        transform: none !important;
        height: auto !important;
    }
    .hero__background-graphic {
        transform: none !important;
    }
    .block-hero-slider,
    .carousel-masks,
    .content,
    .page-travel-style {
        touch-action: pan-y !important;
    }
}

/* Prevent canvas from blocking scroll */
canvas {
    touch-action: pan-y;
    pointer-events: none;
}

/* Only enable interaction on desktop devices */
@media (hover: hover) and (pointer: fine) {
    .carousel-masks__cursor.js-cursor {
        pointer-events: auto;
    }
}