/*
Theme Name: Roof Right
Theme URI: https://dev.snworks.com/whatsnew/wp-content/themes/whatsnew
Author: Synergy Web Design and Marketing - Lora Champion
Author URI: https://snwebdm.com/
Description: This theme works best with Elementor, although you can also use blocks with it (remove bottom section from functions.php to enable block editor). Recommended plugins: Elementor, Yoast, Contact7, woocommerce, ultimate member
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, block-styles, wide-blocks
Version: 1:012422
Requires at least: 5.0
Tested up to: 5.8.3
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: whatsnew-raw
This theme, like WordPress, is licensed under the GPL.
Tested up to: 5.8
Requires PHP: 7.0
*/


@font-face {
    font-family: 'American Captain';
    src: url('roofright/wp-content/themes/RoofRight/fonts/webfonts/American Captain.ttf') format('truetype'),
         url('/roofright/wp-content/themes/RoofRight/fonts/webfonts/American Captain.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




.font-accent-brand {
    font-family: 'American Captain', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;

}





h1, h2, h3, {

   font-family: "Oswald", Sans-serif;

}



p {

  font-family: "Manrope", sans-serif;

}







/*HEADER CSS*/
/* ── Edison Oil–style underline — targets Mega Max Menu links ── */

/* Remove overflow clipping on list items — this is what was blocking ::after */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item,
#mega-menu-wrap-secondary #mega-menu-secondary > li.mega-menu-item {
    overflow: visible !important;
}

/* Base state for top-level items only */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-secondary #mega-menu-secondary > li.mega-menu-item > a.mega-menu-link {
    position: relative !important;
    text-decoration: none !important;
    padding-bottom: 6px !important;
    font-family: 'American Captain', sans-serif !important;
    letter-spacing: 0.04em !important;
    transition: color 0.25s ease, box-shadow 0.3s ease !important;
}

/* The underline pseudo-element */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-secondary #mega-menu-secondary > li.mega-menu-item > a.mega-menu-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #35d91c !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform 0.3s ease !important;
    display: block !important;
}

/* Slide in on hover */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link::after,
#mega-menu-wrap-secondary #mega-menu-secondary > li.mega-menu-item:hover > a.mega-menu-link::after {
    transform: scaleX(1) !important;
}

/* Color change on hover */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
#mega-menu-wrap-secondary #mega-menu-secondary > li.mega-menu-item:hover > a.mega-menu-link {
    color: #35d91c !important;
}

/* Active/current page — underline stays on, slightly dimmer */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-current-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-secondary #mega-menu-secondary > li.mega-menu-current-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-current-menu-ancestor > a.mega-menu-link::after,
#mega-menu-wrap-secondary #mega-menu-secondary > li.mega-menu-current-menu-ancestor > a.mega-menu-link::after {
    transform: scaleX(1) !important;
    opacity: 0.5 !important;
}

/* Fallback for non-Mega Max nav items */
.site-header .navbar-nav .nav-link {
    position: relative;
    text-decoration: none;
    padding-bottom: 4px;
    font-family: 'American Captain', sans-serif !important;
    letter-spacing: 0.04em;
    transition: color 0.25s ease;
}
.site-header .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #35d91c;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}
.site-header .navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}
.site-header .navbar-nav .nav-link:hover {
    color: #35d91c;
}







/* ── Shared sticky behavior ──────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Padding only for inner pages — homepage hero stays full bleed */
body:not(.is-homepage) {
    padding-top: 80px; /* adjust to match your standard header height */
}

/* ── Homepage header: fully invisible until scrolled ─────── */
.homepage-header {
    background-color: transparent;
    box-shadow: none;
}

/* PRE-SCROLL: no logo shown at all */
.homepage-header .header-pre-scroll {
    display: none !important;
}

/* POST-SCROLL row: hidden by default */
.homepage-header .header-post-scroll {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease, max-height 0.4s ease;
}

/* ── After 100vh scroll (.scrolled added by JS) ──────────── */
.homepage-header.scrolled {
    background-color: #ffffff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.homepage-header.scrolled .header-post-scroll {
    opacity: 1;
    visibility: visible;
    max-height: 200px;  /* generous — lets dropdowns breathe */
    overflow: visible;  /* allows mega menu dropdowns to escape */
}

/* ── Standard header (all other pages) ───────────────────── */
.standard-header {
    background-color: #ffffff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}




/*FOOTER CSS*/


.site-footer {


    background-color: #000;
    color: white;

}

.footer-headings {
	color: #fff;
	font-size: 38px;
	font-weight: 500;
	font-family: "Oswald", sans-serif;
}

#footer-links {

    color: #35d91c;
    text-decoration: underline;


}


#footer-links:hover {

    color: #ffffff;


}



a.site-footer {

    color: #fff;
    text-decoration: underline;




}




a.site-footer:hover {

    color:#35d91c;

}

/*homepage form*/


.form-label {

    margin-bottom: 5px;
    font-weight: 500;


}


#form-text {
	display: block;
}



/* --- Contact Form 7: WIA Inspired Styling --- */

/* Container Setup */
#wpcf7-f6-p106-o1 {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box; /* Ensures padding doesn't cause overflow */
}

.radio-heading {

    color: #fff;
}

.dropdown-heading {

    color: #fff;

}



/* Make all text inputs, emails, and selects full-width */
#wpcf7-f6-p106-o1 input[type="text"],
#wpcf7-f6-p106-o1 input[type="email"],
#wpcf7-f6-p106-o1 input[type="tel"],
#wpcf7-f6-p106-o1 select,
#wpcf7-f6-p106-o1 textarea {
    width: 100% !important;
    height: auto;
    padding: 6px 10px;
    margin-top: 8px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 16px;
    color: #000000;
    box-sizing: border-box; /* Prevents input from sliding off screen */
    display: block;
}


/* Specific styling for the Dropdown (Select) */
#wpcf7-f6-p106-o1 select {
    /* Hide default browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Apply your custom arrow */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"%3E%3Cpath d="M0 0l5 6 5-6H0z" fill="%2321336a"%3E%3C/path%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px; /* Space so text doesn't hit the arrow */
    cursor: pointer;
}




/* Input Focus State */
#wpcf7-f6-p106-o1 input:focus,
#wpcf7-f6-p106-o1 select:focus,
#wpcf7-f6-p106-o1 textarea:focus {
    border-color: #0b9f2a; /* Roof Right Green */
    outline: none;
    box-shadow: 0 0 5px rgba(46, 125, 50, 0.2);
}

/* Radio Button Layout (Project Type) */
#wpcf7-f6-p106-o1 .wpcf7-radio {
    display: block;
    margin-bottom: 20px;
}

#wpcf7-f6-p106-o1 .wpcf7-list-item {
    display: inline-block;
    margin-right: 20px;
    margin-left: 0;
}

/* Labels */
#wpcf7-f6-p106-o1 label {
    font-weight: 600;
    color: #fff;
    display: block;
    margin-bottom: 5px;
}

/* Submit Button - Full Width & Bold */
#wpcf7-f6-p106-o1 .wpcf7-submit {
    width: 100% !important;
    background-color: #0b9f2a; /* Brand Green */
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s ease;
    margin-top: 10px;
}

#wpcf7-f6-p106-o1 .wpcf7-submit:hover {
    background-color: #0b9f2a;
}

/* Validation Messages Styling */
#wpcf7-f6-p106-o1 .wpcf7-not-valid-tip {
    color: #d32f2f;
    font-size: 14px;
    font-weight: normal;
}

#wpcf7-f6-p106-o1 .wpcf7-response-output {
    margin: 20px 0 0 0;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}



/*FOOTER roof-right TICKER CSS */



/*FOOTER LOGO TICKER CSS */


.logo-ticker-item img,
.logo-ticker-item svg {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}


.logo-ticker {
    overflow: hidden;
    padding: 1.5rem 0;
}


.logo-ticker-track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: logo-ticker-scroll 10s linear infinite;
}


.logo-ticker-item {
    flex: 0 0 auto;
    /*width: clamp(120px, 25vw, 200px); removed to make the slogan images bigger*/
    display: flex;
    align-items: center;
    justify-content: center;
}


.logo-ticker-item .logo-img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}


@keyframes logo-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}




/* RR MENU IMAGE DROPDOWN CARDS CSS */


/* MEGA MENU GRID */


/* RR MENU IMAGE DROPDOWN CARDS CSS */


/* CARD */

.roof-card{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    display:block;
    height:260px;
    text-decoration:none;
    background:#000;
}


/* IMAGE */

.roof-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    filter:brightness(.9);

    transition:
        transform .6s ease,
        opacity .4s ease,
        filter .4s ease;
}


/* HOVER */

.roof-card:hover img{
    transform:scale(1.05);
    filter:brightness(1);
}


/* OVERLAY */

.roof-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:flex-end;

    padding:22px;

    background:linear-gradient(
        to top,
        rgba(30,30,30,.55),
        rgba(30,30,30,.08),
        rgba(30,30,30,0)
    );
}


/* TITLE */

.roof-overlay h3{
    color:#fff;
    font-size:1.05rem;
    line-height:1.2;
    font-weight:600;
    margin:0;
    max-width:75%;
}


/* MAIN DROPDOWN PANEL */

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu{
    
    background:rgba(255, 255, 254, 0.76) !important;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-radius:0 0 6px 6px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    padding:30px !important;
}





/********Style for the button popup form********/

.message svg{
    width:32px;
    height:32px;
    z-index:2;
}

.message svg path{
    fill:#fff;
}

.message:hover svg,
.message:hover svg path{
    fill:#fff;
}



/***Style for the close button for popup form***/


.close-icon{
    width:18px;
    height:18px;
    fill:#fff;
    cursor:pointer;
    transition:opacity .25s ease;
}

.close-icon:hover{
    opacity:.75;
}







.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 600px;
}

.popup-content h2 {
  font-size: 24px;
}

.closePopupBtn {
  font-size: 50px;
  color: #aaa;
  position: relative;
  float: right;
  cursor: pointer;
  margin-right: 0;
  margin-top: -27px;
}

.closePopupBtn:hover,
.closePopupBtn:focus {
  color: rgb(255, 255, 255);
  text-decoration: none;
  cursor: pointer;
}

/* Schedule and button popup forms - CF7" */
#wpcf7-f217-o2 label,
#wpcf7-f217-o2 input,
#wpcf7-f82-p13-o1 label,
#wpcf7-f82-p13-o1 input {
  width: 100%;
}

#wpcf7-f217-o2 input,
#wpcf7-f82-p13-o1 input {
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.wpcf7-submit.has-spinner {
  margin-top: 0px;
}

#wpcf7-f82-p13-o1 p {
  margin-bottom: 23px;
}

::placeholder {
  color: #000000 !important;
  opacity: 1;
  /* Firefox */
}

::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: #000000 !important;
}



/* Chase's messenger popup form */
.message {
  overflow: hidden;
  display: flex;
  position: fixed;
   /*bottom: 90px;*/
  bottom: 96px;
  right: 12px;
  justify-content: center;
  width: 25px;
  height: 25px;
  background-color: #35d91c;
  padding: 30px;
  border-radius: 100%;
  align-items: center;
  cursor: pointer;
  z-index: 99999;
  transition: all 0.3s, outline 0s;
} 

.message:hover {
  transform: scale(1.1);
}

.message:hover::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: scale(2);
  border-radius: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    transparent 0% 40%,
    rgba(255, 255, 255, 0.8) 48% 52%,
    transparent 60%
  );
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: glow 1s infinite cubic-bezier(0.42, 0, 0.58, 1);
}

.message p {
  line-height: 1;
}

@keyframes glow {
  0% {
    transform: scale(1.3);
    top: -40px;
    left: -40px;
  }

  50% {
    transform: scale(2);
  }

  100% {
    transform: scale(1.3);
    top: 40px;
    left: 40px;
  }
}

.message i {
  font-size: 32px;
  color: white;
}

.message p {
  margin: 0px;
}


.message-form {
    position: fixed;
    bottom: 24px;
    right: 20px;

    width: 340px;
    max-width: calc(100vw - 40px);

    display: none;
    flex-wrap: wrap;

    z-index: 99999;

    color: #fff;
    font-family: inherit;

    animation: slide-up .35s ease;
    box-sizing: border-box;
}

@keyframes slide-up {
  0% {
    clip-path: inset(100% -10% 0% -10% round 10px);
  }

  100% {
    clip-path: inset(0% -10% -10% -10% round 10px);
  }
}

.message-container {
  background-color: #0b9f2a;
  scroll-behavior: smooth;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
}

.message-form::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.3);
  /* transform: scale(1.03); */
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  border-radius: 10px;
}

.message-form-header h3 {
  margin: 0px;
  font-size: inherit;
}

.message-form-header {
  flex: 100%;
  display: flex;
  padding: 20px 30px 0px 30px;
  justify-content: space-between;
  width: 300px;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
}

.message-form-sub-header {
  flex: 100%;
  padding: 0px 30px;
}

.message-form-inputs-bg {
  position: relative;
  background-color: #f0f0f0;
  padding: 20px 20px;
  flex: 100%;
}

.message-form-inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: normal;
}

.message-form-inputs input[type="text"],
.message-form-inputs input[type="tel"],
.message-form-inputs input[type="email"] {
  font-size: 16px;
  font-family: Manrope;
  line-height: 1;
  flex: 100%;
  padding: 10px;
  color: black !important;
  background-color: #ffffff !important;
  border: none;
  outline: none;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
  max-width: 275px;
}

.message-form-inputs input[type="radio"],
.message-form-inputs input[type="radio"] + label {
  cursor: pointer;
}

.message-form-inputs > input:nth-last-of-type(1) {
  margin-bottom: 20px;
}

.message-form-inputs input:not([type="radio"]):focus {
  flex: 100%;
  outline: none;
  box-shadow: inset 0px 0px 0px 3px #35d91c;
  background-color: #d3d3d3 !important;
}

.message-form-inputs label,
.message-form-inputs span {
  color: black;
  font-weight: 450;
}

.message-form-inputs button {
  margin-top: 10px;
}

.chat-bg {
  border-top: solid 1px lightgrey;
  background-color: white;
  flex: 100%;
  display: flex;
  justify-content: center;
}

.message-form .chat-bg p {
  margin: 0px;
  width: 100%;
}

.message-form .chat-bg .wpcf7-spinner {
  display: none;
}

.message-form .chat-bg .wpcf7-submit {
  color: rgb(0, 0, 0) !important;
  background-color: white !important;
  border: none !important;
  padding: 10px 30px !important;
  width: 100% !important;
  cursor: pointer !important;
}

.message-form-sub-header p {
  font-size: inherit;
  line-height: inherit;
  color: white;
}

.close-icon{
    width:18px;
    height:18px;
    fill:#fff;
    cursor:pointer;
    transition:opacity .25s ease;
}

.close-icon:hover{
    opacity:.75;
}

.message-form .message-form-success {
  display: none;
  padding: 20px 30px;
  background-color: #35d91c;
  color: white;
  border-radius: 10px;
}

.message-form .message-form-success p {
  color: white;
  font-size: inherit;
  line-height: inherit;
}

.spinner-container {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 100px;
  position: relative;
  top: 0px;
  left: 0px;
  justify-content: center;
  align-items: center;
}

.spinner {
  display: none;
  width: 50px;
  height: 50px;
  background-color: transparent;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 10px #35d91c;
  clip-path: polygon(
    -20% -20%,
    120% -20%,
    120% 20%,
    -20% 20%,
    -20% 80%,
    120% 80%,
    120% 120%,
    -20% 120%
  );
  z-index: 1;
  align-items: center;
  animation: spin 1.3s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.message-form-inputs .wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio {
  display: block !important;
}

.message-form-inputs span.wpcf7-list-item {
  width: 100%;
  margin: 0px;
}

.message-form-inputs span.wpcf7-list-item input {
  margin: auto 5px;
}

.message-form-inputs span.wpcf7-list-item > label {
  display: flex;
  margin: 0px;
}

@media (min-width: 992px) {
  .message-form-sub-header p,
  .form-group p,
  .popup-messenger.message-form .text-lg-end {
    text-align: left !important;
  }
}

@media (max-width: 991px) {
  .message-form-sub-header p,
  .form-group p,
  .popup-messenger.message-form .text-lg-end {
    text-align: left !important;
  }
}