/* 
Theme Name: Roofline Design
Theme URI: 	https://www.roofline-design.co.uk/
Description: A bespoke theme built off the Hello Elementor Theme
Author: Trio Media
Author URI: https://trio-media.co.uk
Template: hello-elementor
Version: 2.0.0
Text Domain: syers-mcgill
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
*/



/**
GLOBAL SECTION PADDING
**/
.page-content > div > .e-con:not(.e-con-full) {
	padding-left: 6vw;
	padding-right: 6vw;
}



/** CUSTOM BUTTON **/

.custom_button a {
	display: inline-block;
	background-color: #33B4FF;
	border: solid #33B4FF 1px;
	color: #000 !important;
	border-radius: 5px;
	text-decoration: none;
	font-family: "Zing Rust", Sans-serif;
	font-size: 16px;
	line-height: 21px;
	padding: 10px 25px;
	text-align:center;
	transition: all 0.3s ease;
}
@media (max-width: 768px) {
	.custom_button a {
		font-size: 16px;
	}
}
@media (max-width: 520px) {
	.custom_button a {
		padding: 8px 15px;
	}
}

.custom_button.blue a:hover {
	background-color: transparent;
	color: #000 !important;
	border: solid #000 1px;

}

.custom_button.blue a{
	background-color: #000;
	color: #fff !important;
	border: solid #000 1px;

}


.custom_button.light a:hover {
	background-color: transparent;
	color: #000 !important;
}

.custom_button.light a{
	background-color: #33B4FF;
	color: #000 !important;
}

.custom_button.dark a:hover {
	background-color: transparent;
	color: #fff !important;
}








/** CUSTOM ARROWS FOR TESTIMONIALS SLIDER **/


/* Hide Elementor default arrow icons */
.elementor-swiper-button i,
.elementor-swiper-button svg {
  display: none !important;
}

/* === Base buttons === */
.elementor-swiper-button {
  width: 30px;
  height: 30px;
  background: transparent;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 10;
}

/* Left arrow */
.elementor-swiper-button-prev {
  background-color: #333333;
  -webkit-mask: no-repeat center / 50%;
          mask: no-repeat center / 50%;
  -webkit-mask-image: url("https://rooflinedesstg.wpenginepowered.com/wp-content/uploads/2026/01/chevron-right-left.svg");
          mask-image: url("https://rooflinedesstg.wpenginepowered.com/wp-content/uploads/2026/01/chevron-right-left.svg");
}

/* Right arrow */
.elementor-swiper-button-next {
  background-color: #333333;
  -webkit-mask: no-repeat center / 50%;
          mask: no-repeat center / 50%;
  -webkit-mask-image: url("https://rooflinedesstg.wpenginepowered.com/wp-content/uploads/2026/01/chevron-right-light.svg");
          mask-image: url("https://rooflinedesstg.wpenginepowered.com/wp-content/uploads/2026/01/chevron-right-light.svg");
}

/* Hover & focus */
.elementor-swiper-button:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Disabled arrows (when not looping) */
.elementor-swiper-button.elementor-swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Desktop positioning */
.elementor-swiper-button-prev { left: -100px !important; }
.elementor-swiper-button-next { right: -100px !important; }

/* === Mobile adjustments === */
@media (max-width: 767px) {
  .elementor-swiper-button {
    width: 22px;
    height: 22px;
    top: auto !important;
  }

  /* Position both arrows near bottom centre */
  .elementor-swiper-button-prev {
    left: 45% !important;
  }

  .elementor-swiper-button-next {
    right: 45%  !important;
  }
	
	
.elementor-swiper-button-prev { left: -10px !important; }
.elementor-swiper-button-next { right: -10px !important; }
}



.swiper-pagination-bullet {
	
	border: 1px solid #333333;
	
	
}



.brandIcons .swiper-slide-image,
.brandIcons img {

	border: solid #dddddd 1px;
}


/** FIX GREY FLICKER ON ACCORDIONS ON MOBILE **/

.e-n-accordion-item-title,
.e-n-accordion-item-content {
  -webkit-tap-highlight-color: transparent !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
  will-change: transform;
  contain: layout paint;
  transition: none !important;
}

.e-n-accordion-item {
  overflow: hidden;
  transform: translateZ(0);
  -webkit-transform: translate3d(0,0,0);
}

/**
 * ANIM MENU BUTTON
 **/

#animMenu {
	background-color: transparent !important;
	border: unset !important;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	position: relative;
	top: 2px;
	border-radius: 0px !important;
	margin-left: 10px;
}
#animMenu .btnBars {
	display: block;
	width: 30px;
	height: 2px;
	margin: 0 auto;
	background-color: #fff;
	transition: all 0.3s ease-in-out;
}
#animMenu .btnBars:after {
	content: "";
	display: block;
	width: 30px;
	border-bottom: solid 2px #fff;
	position: absolute;
	left: 5px;
	bottom: 10px;
	transform: rotate(0deg);
	transition: all 0.3s ease-in-out;
}
#animMenu .btnBars:before {
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	left: 5px;
	border-bottom: solid 2px #fff;
	position: absolute;
	top: 10px;
	transform: rotate(0deg);
	transition: all 0.3s ease-in-out;
}


/**
 * ANIM MENU BUTTON ACTIVE
 **/


#animMenu.active .btnBars {
	background-color: transparent;
}
#animMenu.active .btnBars:after {
	transform: rotate(45deg);
	transform-origin: center;
	bottom: 20px;
	width: 32px;
}
#animMenu.active .btnBars:before {
	transform: rotate(-45deg);
	transform-origin: center;
	top: 18px;
	width: 32px;
}

button#animMenu {
	border-radius: 0;
	padding: 0;
	width: 40px;
	height: 40px;
	position: relative;
	border: unset;
}
button#animMenu:hover,
button#animMenu:focus,
button#animMenu:active {
	background-color: transparent;
}
button#animMenu span:before,
button#animMenu span:after {
	transition: 0.2s ease-in-out;
}
button#animMenu span:before {
	content: "";
	display: block;
	width: 18px;
	border-bottom: solid 2px #33b4ff;
	transform: rotate(45deg);
	position: absolute;
	left: 5px;
}
button#animMenu span:after {
	content: "";
	display: block;
	width: 18px;
	border-bottom: solid 2px #33b4ff;
	transform: rotate(-45deg);
	position: absolute;
	right: 5px;
}

button#animMenu.light span:before,
button#animMenu.light span:after {
	border-color: white;
}

button#animMenu.active span:before {
	transform: rotate(135deg);
}
button#animMenu.active span:after {
	transform: rotate(-135deg);
}

/* ================================
   WORK CAROUSEL CARD BASE
================================ */

.work-card{
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* ================================
   IMAGE SETUP + ZOOM
================================ */

.work-card img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform .45s ease;
}

.swiper-slide:hover .work-card img{
  transform: scale(1.08);
}

/* ================================
   DARK GRADIENT OVERLAY (FULL CARD)
================================ */

.work-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.9),
    rgba(0,0,0,0.7),
    rgba(0,0,0,0.4)
  );
  opacity:0;
  transition: opacity .3s ease;
  pointer-events:none;
  z-index:1;
}

.swiper-slide:hover .work-card::after{
  opacity:1;
}

/* ================================
   TEXT OVERLAY PANEL
================================ */

.work-overlay{
  position:absolute;

  opacity:0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
  z-index:2;
}

/* Reveal text on hover (desktop) */
.swiper-slide:hover .work-overlay{
  opacity:1;
  transform: translateY(0);
}

/* ================================
   CLICK / LINK FIXES
================================ */

.work-card a{
  position: relative;
  z-index:3;
}

/* ================================
   MOBILE / TABLET BEHAVIOUR
   Keep text hidden on mobile/tablet
================================ */

@media (max-width: 1024px){

  /* Force overlay text hidden */
  .work-overlay{
    opacity:0 !important;
    transform: translateY(12px) !important;
  }

  /* Force gradient overlay off */
  .work-card::after{
    opacity:0 !important;
  }

  /* No zoom */
  .swiper-slide:hover .work-card img{
    transform:none;
  }
}



.elementor-mark-required .elementor-field-label::after {
  color: #000;
}


/**
SCROLL ADJUSTMENT 
**/
.scrollAdjustment {
	scroll-margin-top: 160px; /* adjust to match your header height */
}