group on every inner template (Tours, Destinations, single tour/destination pages, pages, posts, search, 404), so content no longer runs edge to edge. On phones it steps down to 20px, matching the home page's .section gutters. (WordPress declares these variables on body.) ========================================================================== */ @media(max-width:560px){ :root body{--wp--style--root--padding-left:20px;--wp--style--root--padding-right:20px} } /* Destination cards: the archive grid outputs the region tag inside .dest-card__body (not .dest-card__media), so the card itself must anchor the absolutely positioned tag. Otherwise every tag piles up in one spot. */ .dest-card{position:relative} /* Pages built from home-style .section blocks (About uses the home patterns; Contact / Book a Trip / Transport use [wptours_form], which outputs a .section) already carry their own gutters. Let those sections span the padded

edge to edge so the gutters aren't doubled; they look exactly as before. (!important beats the constrained layout's auto margins.) */ .has-global-padding .section{max-width:none;margin-left:calc(var(--wp--style--root--padding-left) * -1) !important;margin-right:calc(var(--wp--style--root--padding-right) * -1) !important} /* ========================================================================== Regular pages (About, Contact, Book a Trip, Transport...) - .page-intro: the page's Excerpt, shown under the breadcrumb by [wptours_page_intro], with the same gutters as the breadcrumb. - The page template's

already adds 64px above and 96px below the content, so the first/last home-style .section drops its own outer padding instead of doubling it. Spacing between sections is unchanged. ========================================================================== */ .page-intro{padding:0 max(40px, calc((100% - 1440px) / 2))} .page-intro p{max-width:780px;margin:0;font-size:19px;line-height:1.65;color:#4a5c5c} .has-global-padding .wp-block-post-content > .section:first-child{padding-top:0} .has-global-padding .wp-block-post-content > .section:last-child{padding-bottom:0} @media(max-width:560px){ .page-intro{padding:0 20px} .page-intro p{font-size:17px} } /* ========================================================================== Contact Form 7 submit buttons (Contact, Book a Trip, Transport) The forms print inside .form-light, where the field rule (.form-light input) is more specific than .btn--primary and turned the buttons into sand boxes. Keep them gold and full width, like the theme's own fallback forms. Must stay after the .form-light rules (same specificity as .form-light input:focus). ========================================================================== */ .form-light input.btn--primary{width:100%;justify-content:center;background:var(--brand);color:var(--on-brand);border:none;border-radius:30px;padding:16px 30px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px -8px rgba(var(--brand-rgb),.7);transition:transform .2s,background .2s,box-shadow .2s} .form-light input.btn--primary:hover{background:var(--brand-dark);transform:translateY(-2px)} .form-light input.btn--primary:focus-visible{outline:2px solid var(--on-brand);outline-offset:3px} /* CF7's (hidden) sending spinner wrapped onto its own line under the full-width button, leaving a blank gap: float it over the button's right end instead (the button is always the last thing in that paragraph, which can also hold the fields above it, so it is pinned to the bottom). Browsers without :has() keep the old layout. */ .form-light p:has(> .wpcf7-submit){position:relative} .form-light p:has(> .wpcf7-submit) > .wpcf7-spinner{position:absolute;right:18px;bottom:14px;margin:0} /* ========================================================================== Carousel touch and drag (hero slider + tour packages; see theme.js) - touch-action: pan-y leaves up/down swipes to the browser, so the page still scrolls, and hands sideways swipes to the script. Pinch-zoom keeps working. - Mouse users get a grab cursor (links and buttons keep the pointer). While dragging, text selection and the browser's own image dragging are switched off. ========================================================================== */ .hero,.carousel{touch-action:pan-y;touch-action:pan-y pinch-zoom} .hero,.carousel__track{cursor:grab} .hero.is-dragging,.hero.is-dragging *,.carousel.is-dragging,.carousel.is-dragging *{cursor:grabbing;-webkit-user-select:none;user-select:none} .hero img,.carousel img{-webkit-user-drag:none;-webkit-touch-callout:none} /* Pinch-zoomed: the browser pans sideways again (theme.js stops swiping). */ .is-pinch-zoomed .hero,.is-pinch-zoomed .carousel{touch-action:auto} .is-pinch-zoomed .hero,.is-pinch-zoomed .carousel__track{cursor:auto} /* ========================================================================== Hero pause / play button (theme.js adds it under the slide bars) and reduced motion: no autoplay (theme.js), no Ken Burns zoom, no spinning promo badge, near-instant slide changes. ========================================================================== */ .hero__pause{position:relative;flex:0 0 auto;width:30px;height:30px;margin-top:6px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.14);backdrop-filter:blur(6px);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:background .25s,border-color .25s} .hero__pause::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:11px;transform:translate(-50%,-50%);box-sizing:border-box;border-left:3px solid #fff;border-right:3px solid #fff} .hero__pause.is-paused::before{width:0;height:0;border-right:0;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;transform:translate(-35%,-50%)} .hero__pause:hover{background:var(--brand);border-color:var(--brand)} .hero__pause:hover::before{border-left-color:var(--on-brand);border-right-color:var(--on-brand)} .hero__pause:focus-visible{outline:2px solid #fff;outline-offset:2px} /* ========================================================================== Contact page: "Find us" section ([wptours_map]) - office details on a white card next to a Google map; stacked on tablets and phones (card first). Details come from wptours_contact_details() in functions.php. ========================================================================== */ .map-section__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:stretch} .map-card{display:flex;flex-direction:column;background:#fff;border-radius:24px;padding:34px;box-shadow:0 30px 60px -30px rgba(var(--brand-shadow-rgb),.4)} .map-card .section__title{font-size:clamp(26px,3vw,36px);margin-bottom:26px} .map-card__list{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:18px} .map-card__list li{display:flex;gap:14px;align-items:flex-start} .map-card__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(var(--brand-rgb),.16);color:var(--brand-deep)} .map-card__icon svg{width:19px;height:19px} .map-card__label{display:block;margin-bottom:3px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#7c8f8f} .map-card__text{font-size:16px;font-weight:600;line-height:1.5;color:#123434;overflow-wrap:anywhere} a.map-card__text:hover{color:var(--brand-deep)} .map-card__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto} .btn--outline{background:transparent;color:var(--on-brand);box-shadow:inset 0 0 0 2px var(--brand)} .btn--outline:hover{background:var(--brand);color:var(--on-brand);transform:translateY(-2px)} .map-frame{position:relative;min-height:440px;border-radius:24px;overflow:hidden;background:#ebe5d7;box-shadow:0 30px 60px -30px rgba(var(--brand-shadow-rgb),.5)} .map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media(max-width:900px){.map-section__grid{grid-template-columns:1fr}.map-frame{min-height:360px}} @media(max-width:560px){.map-card{padding:26px 22px}.map-frame{min-height:300px;border-radius:20px}} /* Contact block ([wptours_form type="contact"]): text top-aligned with the form card, quick WhatsApp / call buttons, and the phone number set large under them instead of a details list (the full details and the map are in "Find us" further down the page). */ .split--top{align-items:start} .split--top .section__title{margin-bottom:16px} .contact-quick{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} /* The phone number as a tap-to-call pill: a solid gold phone disc (concentric with the pill's rounded end) beside the number in heavy, evenly spaced figures, with the support hours under it. The number's size steps with the column width so it stays on one line from 320px phones up. */ .contact-hotline{display:flex;align-items:center;gap:16px;width:fit-content;max-width:100%;margin-top:20px;padding:14px 30px 14px 14px;border:1px solid rgba(var(--brand-rgb),.4);border-radius:999px;background:#fff;color:#123434;box-shadow:0 18px 36px -22px rgba(var(--brand-shadow-rgb),.55);transition:border-color .2s,box-shadow .2s} .contact-hotline:hover{color:#123434;border-color:var(--brand);box-shadow:0 22px 40px -20px rgba(var(--brand-shadow-rgb),.65)} .contact-hotline:focus-visible{outline:2px solid var(--on-brand);outline-offset:3px} .contact-hotline__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--brand);color:var(--on-brand);transition:background .2s} .contact-hotline:hover .contact-hotline__icon{background:var(--brand-dark)} .contact-hotline__icon svg{width:24px;height:24px} .contact-hotline__text{display:flex;flex-direction:column;gap:2px;min-width:0} .contact-hotline__number{font-size:clamp(24px,2.9vw,28px);font-weight:800;line-height:1.15;letter-spacing:.01em;word-spacing:.1em;font-variant-numeric:tabular-nums} .contact-hotline__hours{font-size:15px;font-weight:600;line-height:1.3;color:var(--brand-deep)} @media(max-width:900px){.contact-hotline__number{font-size:28px}} @media(max-width:560px){ .contact-hotline{gap:12px;padding:12px 22px 12px 12px} .contact-hotline__icon{width:44px;height:44px} .contact-hotline__icon svg{width:20px;height:20px} .contact-hotline__number{font-size:clamp(19px,calc(10vw - 13px),28px)} } /* Text for screen readers only (e.g. "opens in a new tab"). */ .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){ .hero .kb,.promo__badge{animation:none} .hero__track,.carousel__track{transition-duration:.01s} .hero__panel,.hero__panel.is-active{transition:none} }