/*!
Theme Name:    QTH Hosting Theme
Description:   Theme that works with Beaver Builder page builder
Version:       1.0.0
*/

/* ======================= global resets ======================= */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table                { border-collapse:collapse; border-spacing:0 }
fieldset, img        { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
caption, th          { text-align:left }
q:before, q:after    { content:''}
a img                { border:none } /* Gets rid of IE's blue borders */
input[type="submit"] { cursor:pointer; -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ }
input[type="submit"]::-moz-focus-inner { border:0; } /* helps with input and submit sizing */
/* html5 reset */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display:block; }
audio,
canvas,
video                   { display:inline-block; }
audio:not([controls])   { display:none; }
@-ms-viewport           { width:device-width; }
*,
*:before,
*:after        { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
:link img      { border:none; }
a              { outline:none; }
.clearfix:after               { visibility:hidden; display:block; font-size:0; content:" "; clear:both;  height:0; }
* html .clearfix              { zoom:1; } /* IE6 */
*:first-child+html .clearfix  { zoom:1; } /* IE7 */
/* responsive */
img, object, embed   { max-width:100%; height:auto; }
object, embed        { height:100%; }
img                  { -ms-interpolation-mode: bicubic; }

/* :root css vars are assigned in the inc/customizer.php */

html {
   height: 100%;
}

body {
   margin: 0;
   padding: 0;
   height: 100%;
   line-height: 1.45;
   text-align: left;
   color: var(--qth-hosting-body-font-color);
   background: var(--qth-hosting-body-background-color);
}
body, button, input, select, textarea {
   font-size: var(--qth-hosting-body-font-size);
   font-family: var(--qth-hosting-body-font-family);
   font-weight: normal;
}

small {
   font-size: 12px;
}
strong, b {
   font-weight: 700;
}
em, i {
   font-style: italic;
}
input,
textarea,
select {
   border-radius: 0;
}
input[type="submit"] {
   white-space: normal;
}

/* placeholder font color */
::-webkit-input-placeholder {
   color: #333;
}
:-moz-placeholder {
   /* Firefox 18- */ color: #333;
}
::-moz-placeholder {
   /* Firefox 19+ */ color: #333;
}
:-ms-input-placeholder {
   color: #333;
}

/* headings */
h1,h2,h3,h4,h5,h6 {
   text-align: left;
   font-weight: var(--qth-hosting-headings-font-weight);
   line-height: 1.2;
   margin: 10px 0 10px 0;
   color: var(--qth-hosting-headings-font-color);
   font-family: var(--qth-hosting-headings-font-family);
}
.faux-h1 {
   line-height: 1.2;
   color: var(--qth-hosting-headings-font-color);
   font-family: var(--qth-hosting-headings-font-family);
   font-size: var(--qth-hosting-h1-font-size-desktop);
}
h1 {
   margin: 0;
   padding: 0;
   font-size: var(--qth-hosting-h1-font-size-desktop);
}
h2 {
   font-size: var(--qth-hosting-h2-font-size-desktop);
}
h3 {
   font-size: var(--qth-hosting-h3-font-size-desktop);
}
h4 {
   font-size: var(--qth-hosting-h4-font-size-desktop);
}
h5 {
   font-size: var(--qth-hosting-h5-font-size-desktop);
}
h6 {
   font-size: var(--qth-hosting-h6-font-size-desktop);
}

/* links */
a {
   color: var(--qth-hosting-accent-color);
}
a:hover {
   color: var(--qth-hosting-accent-color-hover);
}

.fl-builder-content p {
   margin: 0 0 15px 0;
}

@media(max-width:768px) {
   body, button, input, select, textarea {
      font-size: var(--qth-hosting-body-font-size-mobi);
   }
   .faux-h1,
   h1 {
      font-size: var(--qth-hosting-h1-font-size-mobile);
   }
   h2 {
      font-size: var(--qth-hosting-h2-font-size-mobile);
   }
   h3 {
      font-size: var(--qth-hosting-h3-font-size-mobile);
   }
   h4 {
      font-size: var(--qth-hosting-h4-font-size-mobile);
   }
   h5 {
      font-size: var(--qth-hosting-h5-font-size-mobile);
   }
   h6 {
      font-size: var(--qth-hosting-h6-font-size-mobile);
   }
}

/* list margins */
#content ol,
#content ul {
   margin: 0 0 15px 30px;
}

/* masthead sticky */
#masthead {
   position: relative;
}
#masthead .qth-hosting-part-wrap .fl-row-content-wrap {
   transition: .3s;
}
body.fixed:not(.fl-builder-edit) #masthead .qth-hosting-part-wrap {
   position: fixed;
   z-index: 99999;
   width: 100%;
   top: 0;
   left: 0;
}
body.admin-bar.fixed:not(.fl-builder-edit) #masthead .qth-hosting-part-wrap {
   top: 32px;
}
body.fixed.shrink:not(.fl-builder-edit) #masthead .qth-hosting-part-wrap .fl-row-content-wrap {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0;
   padding-bottom: 0;
}
@media(max-width:768px) {
   body.fixed #masthead .qth-hosting-part-wrap {
      position: static !important;
   }
}

/*
   fallback page title row
   this is only used if the end-user has disabled the page title theme layout
*/
.fallback-page-title {
   margin: 0 0 30px 0;
}

/* admin notices for template part */
.qth-layout-notice {
   text-align: center;
   padding: 20px;
}

/* theme part edit button */
.qth-hosting-part-wrap {
   position: relative;
}
.qth-hosting-part-wrap a.edit-qth-part {
   display: block;
   opacity: 0;
   position: absolute;
   width: 30px;
   height: 30px;
   line-height: 1;
   top: 0;
   left: 0;
   color: #fff;
   background: #00a0d2; /* matches BB editor blue */
   margin: 0px;
   padding: 0px;
   text-align: center;
   text-decoration: none;
   -webkit-transition:  .3s;
   transition:          .3s;
}
.qth-hosting-part-wrap a.edit-qth-part span {
   display: inline-block;
   position: relative;
   top: 4px;
   text-align: center;
}
.qth-hosting-part-wrap:hover a.edit-qth-part {
   opacity: 1;
}
body.fl-builder-edit .qth-hosting-part-wrap a.edit-qth-part {
   display: none;
}

/* FL buttons */
.fl-builder-content a.fl-button {
   font-size: var(--qth-hosting-button-font-size) !important;
   color: var(--qth-hosting-button-font-color) !important;
   background-color: var(--qth-hosting-button-background-color) !important;
   border: var(--qth-hosting-button-border-width) solid var(--qth-hosting-button-border-color) !important;
   border-radius: var(--qth-hosting-button-border-radius) !important;
}
.fl-builder-content a.fl-button span.fl-button-text {
   color: inherit;
}
.fl-builder-content a.fl-button:hover {
   color: var(--qth-hosting-button-font-color-hover) !important;
   background-color: var(--qth-hosting-button-background-color-hover) !important;
   border-color: var(--qth-hosting-button-border-color-hover);
}
.fl-builder-content a.fl-button:hover span.fl-button-text {
   color: inherit;
}

/* sidebar template (note the sidebar "width" is set in inc/customizer.php head dynamic CSS) */
.content-sidebar-wrap {
   margin: 0 auto;
   display: flex;
   flex-wrap: nowrap;
}
.content-sidebar-wrap .fl-row-content-wrap {
   padding-left: 0 !important; /* help line up with header/footer */
}
.content-sidebar-wrap .content-col {
   width: calc(100% - var(--qth-hosting-sidebar-width));
}
.content-sidebar-wrap #secondary {
   width: var(--qth-hosting-sidebar-width) !important;
}
.content-sidebar-wrap #secondary .fl-row-content-wrap {
   padding: 10px 0 0 0 !important; /* help line up with header/footer */
}
@media(max-width:768px) {
   .content-sidebar-wrap {
      display: block;
   }
   .content-sidebar-wrap .content-col {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
   }
   .content-sidebar-wrap #secondary {
      width: 100% !important;
   }
}

/*
   when editing BB uses the single template which inherits some issues
   if the sidebar is active it will show up here as well it gets hidden
*/
body.fl-builder-edit #content > .fl-row-content-wrap > .fl-row-content {
   max-width: 100% !important;
}
.single.fl-builder-edit .fl-row-content-wrap.outer-wrap {
   margin: 0 !important;
   padding: 0 !important;
}
.single.fl-builder-edit .fl-row-content-wrap.outer-wrap .single-top {
   display: none;
}
.single.fl-builder-edit .fl-row-content-wrap.outer-wrap > .content-sidebar-wrap {
   max-width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
}
.single.fl-builder-edit .content-col {
   width: 100% !important;
}
.single.fl-builder-edit #secondary {
   display: none !important;
}

/* WP widgets (reducing the H2's to H3 font size) */
#secondary h2 {
   font-size: var(--qth-hosting-h3-font-size-desktop);
}
@media(max-width:768px) {
   #secondary h2 {
      font-size: var(--qth-hosting-h3-font-size-mobile);
   }
}

/* search widget */
.widget_search input.search-field {
   width: 100%;
   border: 1px solid #ccc;
   padding: 8px;
   font-size: var(--qth-hosting-button-font-size); /* so it matches the button font size */
}
.widget_search input.search-submit {
   border: none;
   padding: 9px 0px;
   font-size: var(--qth-hosting-button-font-size);
   color: var(--qth-hosting-button-font-color);
   background: var(--qth-hosting-button-background-color);
}
.widget_search input.search-submit:hover {
   color: var(--qth-hosting-button-font-color-hover);
   background: var(--qth-hosting-button-border-color-hover);
}
#secondary form.search-form {
   display: flex;
}
#secondary .widget_search label {
   width: calc(100% - 90px);
}
#secondary .widget_search input.search-submit {
   width: 90px;
}

/* widget lists */
.widget ul {
   margin: 0 0 0 10px;
   padding: 0;
}
.widget ul li {
   margin: 0;
   padding: 0;
   list-style: none;
}
.widget ul li a {
   display: block;
   text-decoration: none;
}

/* archive, search results */
.entry-result {
   display: flex;
   flex-wrap: nowrap;
   margin: 0 0 50px 0;
}
.entry-result .thumb {
   width: 300px;
   margin: 10px 30px 0 0;
}
.entry-result .entry-summary {
   margin: 0 0 20px 0;
}
.entry-result h2 {
   margin: 0;
}
.entry-result h2 a {
   text-decoration: none;
}
.entry-result .entry-date {
   font-style: italic;
   margin: 0 0 5px 0;
}
.entry-result .entry-wrap {
   flex-shrink: 4;
}
@media(max-width:992px) {
   .entry-result {
      display: block;
      margin: 0 0 30px 0;
   }
   .entry-result .thumb {
      width: 100%;
      height: 250px;
      margin: 0 0 15px 0;
   }
   .entry-result .thumb img {
      object-fit: contain;
      object-position: left bottom;
      width: 100%;
      height: 100%;
   }
}
@media(max-width:768px) {
   .entry-result {
      margin: 0 20px 40px 20px;
      padding-bottom: 40px;
      border-bottom: 1px solid #ccc;
   }
}

/* paging */
.navigation.pagination .nav-links {
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
}
.navigation.pagination .nav-links .page-numbers {
   display: inline-block;
   padding: 6px 12px;
   border: 1px solid #ccc;
   margin: 0 3px;
   border-radius: 3px;
}

/* single view (posts) - note that single template is also used for BB while editing */
body:not(.fl-builder-edit) .single-body .fl-row-content-wrap {
   padding-top: 0;
   padding-bottom: 0;
}
.single-wrap .post-featured-img {
   height: 350px;
}
.single-wrap .post-featured-img img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: left bottom;
}
.single-wrap .post-title {
   margin-top: 20px;
}
.single-wrap .post-date {
   font-style: italic;
}
.single-wrap .post-featured .fl-row-content-wrap {
   padding-bottom: 0 !important;
}
.single-wrap .post-content .fl-row-content-wrap {
   padding-bottom: 0 !important;
}
@media(max-width:768px) {
   .single-wrap .post-featured-img {
      height: auto;
   }
   .single-wrap .post-featured-img img {
      object-fit: fill;
   }
}

.single-wrap .comments-wrap {
   padding: 0 20px;
}
.single-wrap .post-comments .fl-module-content {
   width: 60%;
}
.single-wrap .post-comments .fl-row-content-wrap {
   padding-top: 0 !important;
}
#commentform p {
   margin: 0 0 20px 0;
}
#commentform textarea,
#commentform input {
   padding: 5px;
   border: 1px solid #ccc;
}
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
   display: flex;
   flex-wrap: nowrap;
}
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
   display: block;
   width: 110px;
}
#commentform input#submit {
   border: none;
   padding: 10px 20px;
   font-size: var(--qth-hosting-button-font-size)px;
   color: var(--qth-hosting-button-font-color);
   border-radius: var(--qth-hosting-button-border-radius)px;
   background: var(--qth-hosting-button-background-color);
}
#commentform input#submit:hover {
   color: var(--qth-hosting-button-font-color-hover);
   background: var(--qth-hosting-button-background-color-hover);
}
ol.comment-list {
   margin: 0;
   padding: 0;
}
ol.comment-list li {
   margin: 0 0 30px 0;
   padding: 0;
   list-style: none;
}
ol.comment-list li .comment-author img {
   display: none;
}
ol.comment-list li .comment-author .fn a {
   text-decoration: none;
}
ol.comment-list li .comment-author span.says {
   display: none;
}
ol.comment-list li .comment-metadata a {
   text-decoration: none;
   font-size: 16px;
}
ol.comment-list li .comment-content {
   border: 1px solid #ccc;
   margin: 10px 0 10px 0px;
   padding: 15px;
   border-radius: 5px;
}
ol.comment-list li .comment-content p {
   margin: 0;
}
ol.comment-list li .reply {
   margin-top: -5px;
   margin-left: 10px;
}
ol.comment-list li .reply a {
   font-size: 16px;
   text-decoration: none;
   padding: 5px;
}
ol.comment-list li .reply a::after {
   content: '↓';
   diplsy: inline-block;
   margin-left: 4px;
}
ol.comment-list ol.children {
   margin-top: 10px;
   margin-left: 40px;
}
@media(max-width:768px) {
   .post-featured .fl-row-content-wrap,
   .post-comments .fl-row-content-wrap {
      padding-left: 0;
      padding-right: 0;
   }
   .single-wrap .post-comments .fl-module-content {
      width: 100%;
   }
}
@media(max-width:500px) {
   .comment-form-comment,
   .comment-form-author,
   .comment-form-email,
   .comment-form-url {
      display: block;
   }
   .comment-form-comment label,
   .comment-form-author label,
   .comment-form-email label,
   .comment-form-url label {
      width: 100%;
   }
}

/* some templates require the removal of extra padding on mobile */
@media(max-width:768px) {
   .fl-row-content-wrap.outer-wrap {
      padding-left: 0;
      padding-right: 0;
   }
}

/* captions */
.wp-caption {
   margin-bottom: 1.5em;
   max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.wp-caption .wp-caption-text {
   margin: 0.8075em 0;
}

.wp-caption-text {
   text-align: center;
}

/* Galleries */
.gallery {
   margin-bottom: 1.5em;
   display: grid;
   grid-gap: 1.5em;
}

.gallery-item {
   display: inline-block;
   text-align: center;
   width: 100%;
}

.gallery-columns-2 {
   grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
   grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
   grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
   grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
   grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
   grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
   grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
   grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
   display: block;
}

/* text meant only for screen readers. */
.screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute !important;
   width: 1px;
   word-wrap: normal !important;
}

.screen-reader-text:focus {
   background-color: #f1f1f1;
   border-radius: 3px;
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
   clip: auto !important;
   clip-path: none;
   color: #21759b;
   display: block;
   font-size: 0.875rem;
   font-weight: 700;
   height: auto;
   left: 5px;
   line-height: normal;
   padding: 15px 23px 14px;
   text-decoration: none;
   top: 5px;
   width: auto;
   z-index: 100000;
}

/* do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
   outline: 0;
}

/* alignments */
.alignleft {
   float: left;
   margin-right: 1.5em;
   margin-bottom: 1.5em;
}

.alignright {

   /*rtl:ignore*/
   float: right;

   /*rtl:ignore*/
   margin-left: 1.5em;
   margin-bottom: 1.5em;
}

.aligncenter {
   clear: both;
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 1.5em;
}