/* 
Theme Name: R Media 
Theme URI: https://r-media.co.uk
Description: R Media theme for Wordpress based on the Hello Elementor theme
Author: Blue Ad
Author URI: https://bluead.ro/
Template: hello-elementor
Version: 2.0.0
Text Domain: r-media
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ============================================================================
   FOOTER LOGO — slow left <-> right bounce (Oct 2026: replaces the home page's
   07 Marquee section). Site-wide: this file loads on every page.

   SETUP (Elementor → Theme Builder → Footer): select the full-width logo widget
   at the bottom of the footer → Advanced → CSS Classes → add:
        rmedia-footer-brand

   The widget breaks out to the full screen width and clips its content; the
   logo inside is 110% of the screen, so as it glides 5% each way the extra
   runs off the screen edges (the same feel as the old marquee). Pure CSS:
   no GSAP needed, so it works on the Elementor pages too.
   ========================================================================== */
body { overflow-x: clip; } /* the full-bleed widget must never cause a sideways scroll */

.elementor .rmedia-footer-brand {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	overflow: hidden;
}
.elementor .rmedia-footer-brand .elementor-widget-container { overflow: visible; }

.elementor .rmedia-footer-brand img,
.elementor .rmedia-footer-brand svg {
	display: block;
	width: 110vw !important;
	max-width: none !important;
	height: auto;
	margin-left: -5vw !important;
	animation: rmedia-brand-bounce 5s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes rmedia-brand-bounce {
	from { transform: translateX(-5vw); }
	to   { transform: translateX(5vw); }
}

/* Reduced motion: no movement, logo simply spans the screen. */
@media (prefers-reduced-motion: reduce) {
	.elementor .rmedia-footer-brand img,
	.elementor .rmedia-footer-brand svg {
		animation: none;
		width: 100vw !important;
		margin-left: 0 !important;
	}
}