/*
Theme Name: Turnkey Roofing
Theme URI: http://www.premierepc.net
Template: enfold
Author: PremierePC
Author URI: http://www.premierepc.net
Description: Enfold Child theme for Turnkey Roofing
Version: 4.5
Updated: 2025-09-22

*/

/*  Custom size logo

 Update the width in the below code and height from the Enfold > Header > Header size

#top .logo ,
#top .logo a {
  width: 262px;
 }

@media only screen and (max-width: 767px) {
#top .logo ,
#top .logo a {
  max-width: 60% !important;
  width: 60% !important;
  height: auto;
 }}

*/

/************************************

Add button elements to your header
Logo left, Widget right, Menu below

*************************************


CSS Settings:

» Initiate Flexbox
» Topbar
» Header
» Logo
» Menu
» Widget
» Social icons
» Search
» Cart icon

***********************************/

/*--------------------------------

» Initiate Flexbox

--------------------------------*/

/* Header */
.responsive #top #header,
/* Top bar */
.responsive #top #header #header_meta,
/* Search icon */
.responsive #top #header #menu-item-search a,
/* Cart icon */
.responsive #top #header a.cart_dropdown_link,
/* Social icon */
.responsive #top #header #header_main nav .social_bookmarks,
/* Logo */
.responsive #top #header #header_main .inner-container .logo,
/* Main menu, cart and social icons */
.responsive #top #header #header_main .inner-container .main_menu,
/* Widgets */
.responsive #top #header #header_main .inner-container .widget,
/* Header inner container */
#top #header #header_main .container.av-logo-container .inner-container {
  display: flex;
  position: relative;
}

/*--------------------------------

» Topbar

--------------------------------*/

/* Top bar */

.responsive #top #header #header_meta {
  flex-basis: 100%;
}

/*--------------------------------

» Header

--------------------------------*/

/* Height outer container */

#top #header #header_main .container.av-logo-container {
  /* Do not change height here */
  /* Auto height: Header takes the height of the contents */
  height: inherit;
  line-height: inherit;
}

/* Header inner container */

#top #header #header_main .container.av-logo-container .inner-container {
  /* Define header height here */
  height: inherit;
  position: relative !important;
  flex-wrap: wrap;
  /* Define header padding */
  padding: 10px;
}

/* Wrappers
--------------------------------*/

/* Main header ( logo, menu, widgets ) and topbar */

.responsive #top #header {
  flex-wrap: wrap;
}

/*  Logo, Menu, Social Icons and Widgets. */

.responsive #top #header #header_main {
  flex-basis: 100%;
}

/* Transparent header
--------------------------------*/

.responsive.html_header_transparency #top #wrap_all #header {
  position: absolute;
}

@media only screen and (max-width: 767px) {
  .responsive.html_header_transparency #top #wrap_all #main {
    /* Define padding value for transparent header in mobile */
    /*padding-top: 315px !important; */
  }
}

/* Fixed header
--------------------------------*/

.html_header_sticky.html_mobile_menu_tablet #top #wrap_all #header,
.html_header_sticky.html_header_transparency #top #wrap_all #header,
.html_header_sticky #top #wrap_all #header {
  position: fixed;
}

.html_header_sticky #top #header_main .container,
.html_header_sticky #top .main_menu ul:first-child > li a {
  height: inherit !important;
  line-height: inherit !important;
}

/* Main content padding value should be same as the fixed header height. */

.html_header_sticky:not(.html_header_transparency) #top #wrap_all #main,
.html_header_sticky #top #wrap_all #main {
  /* Define padding only if sticky header is active */
  /*padding-top: 262px ;  */
}

@media only screen and (max-width: 767px) {
  .html_header_sticky #top #wrap_all #main {
    /* Define padding value for sticky header on mobile */
    /*padding-top: 315px !important; */
  }
}

/*--------------------------------

» Logo

--------------------------------*/

/* Logo */

.responsive #top #header #header_main .inner-container .logo {
  order: 2;
  flex-basis: 30%;
  /*width: auto;*/

  /* Define scalable min width of the logo on small screens */
  min-width: 100px;
  /* Define scalable max width of the logo on big screens */
  /* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size */
  max-width: 180px;

  z-index: 9;
}

/* Logo image size */

.responsive #top #header .logo,
.responsive #top #header .logo a,
.responsive #top #header .logo img {
  width: auto;

  /* Height specification is not required. It is proportional to the max width of the logo */
  height: auto;
  align-items: center;
  align-self: center;
  justify-content: center;
}

/* Vertically center transparency logo */

.responsive #top #header .logo span img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/*--------------------------------

» Menu

--------------------------------*/

/* Menu outer container: Menu with siblings cart and social icons */

.responsive #top #header #header_main .inner-container .main_menu {
  order: 4;

  /* Define menu width */
  flex-basis: 100%;

  align-items: center;
  align-self: center;
  justify-content: center;
  height: inherit !important;

  /*     background: gold; */
  background: #2c353d;
}

/* Navigation */

#header .av-main-nav {
  display: flex;
  flex-wrap: nowrap;
}

/*  Activate burger menu  */

@media only screen and (max-width: 1000px) {
  #top #header .av-main-nav > li.menu-item {
    display: none !important;
  }
  #top #header .av-burger-menu-main {
    cursor: pointer;
    display: block !important;
  }
}

@media only screen and (max-width: 767px) {
  /* Mobile menu position fix */
  .responsive #top .av-logo-container .avia-menu {
    display: flex !important;
    align-items: center;
  }
}

/* Mega menu submenu position fix */

.responsive #top #header .avia_mega_div {
  /* Define megamenu submenu top value */
  /*   top: 300px;
   position: fixed;
   left: 50%;
   transform: translateX(-50%);*/
}

/*--------------------------------

» Widget

--------------------------------*/

/* Widgets */

.responsive #top #header #header_main .inner-container .widget {
  order: 3;
  flex-basis: 70%;
  max-width: 600px;
  padding: 0;
  clear: none !important;

  justify-content: center;
  align-self: center;
  align-items: center;
  z-index: 1;
  margin-left: auto;

  font-family: montserrat, Helvetica, Arial, sans-serif;
}

.responsive #top #header #header_main .inner-container .widget > div {
  width: 100%;
  line-height: 14px;
  padding: 0 10px;
}

.responsive #top #header #header_main .inner-container .widget > div label {
  visibility: hidden;
}

/*--------------------------------

» Social icons

--------------------------------*/

/* Flex support and position fix */

.responsive #top #header #header_main nav .social_bookmarks {
  top: auto;
  margin-top: 0;
  align-items: center;
}

/* Inherit height for flex alignment */

.responsive #top .av-logo-container .social_bookmarks li {
  height: inherit;
}

/*--------------------------------

» Search

--------------------------------*/

/* Your styles here */

.html_header_top #top .av_header_stretch .container {
  width: 100%;
}

#top #header #header_main .container.av-logo-container .inner-container {
  padding: 0;
}

.responsive #top #header #header_main .inner-container .logo {
  padding-left: 10px;
}

@media screen and (max-width: 1191px) {
  .av-main-nav > li > a {
    padding: 8px;
  }

  #header .av-main-nav {
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .container {
/*     width: 100%; */
/*     max-width: 100%; */
  }

  .responsive #top #header #header_main .inner-container .logo {
    flex-basis: 45%;
  }

  .responsive #top #header #header_main .inner-container .widget {
    flex-basis: 40%;
  }

  .responsive #top #header #header_main .inner-container .main_menu {
    flex-basis: 15%;
  }

  .responsive #top #header #header_main .inner-container .main_menu {
    background: inherit;
  }
}

@media only screen and (max-width: 479px) {
  #header_meta {
    display: none !important;
  }
  .responsive #top #header #header_main .inner-container .logo {
    flex-basis: 40%;
    padding-left: 0;
  }

  .responsive #top #header #header_main .inner-container .widget {
    flex-basis: 45%;
    margin-left: none;
  }

  #top .avia-button .avia_button_icon {
    display: none !important;
  }

  .responsive #top #wrap_all #header .widget .avia-button {
    font-size: 14px;
    padding: 10px;
  }
}
/*--------------------------------

» Cart

--------------------------------*/

/* Cart position fix */

#top #header #header_main #menu-item-shop a.cart_dropdown_link {
  height: auto;
}

@media only screen and (max-width: 767px) {
  .responsive #top #menu-item-shop.cart_dropdown {
    display: flex;
    align-items: center;
  }
  .cart_dropdown .dropdown_widget .avia-arrow {
    display: none;
  }
}