/*
Theme Name: Tawani Property Management Avada Child
Description: Child theme for Avada theme customized for Tawani Property Management.
Author: Holy Cow Online Marketing
Author URI: https://www.HolyCowOnlineMarketing.com/
Template: Avada
Version: 1.0.9
Text Domain:  Avada
*/

.tpm-padding-tight .fusion-layout-column .fusion-column-wrapper {
    /* padding: 10px; */
}

/* Map our TPM color variables to the Avada color variables */
:root {
    --tpm-color-white: var(--awb-color1);
    --tpm-color-pink: var(--awb-color4);
    --tpm-color-gray: var(--awb-color5);
    --tpm-color-black: var(--awb-color8);
}

.tpm-padding-tight .fusion-layout-column .fusion-column-wrapper {
    padding: 20px 10px 10px 10px;
}

/* Style the "Categories" tag cloud on the News page */
/* Use the nav font (not the default body font) */
.tpm-tag-cloud.fusion-tagcloud-element {
    font-family: var(--nav_typography-font-family);
    font-weight: var(--nav_typography-font-weight);
}
/* Remove the border-left from the first element so it acts as a separator */
.tpm-tag-cloud.fusion-tagcloud-element a:first-child {
    border-left: none;
}
/* Tighten up the vertical spacing of the tag cloud. */
.tpm-tag-cloud.fusion-tagcloud-element a.tag-cloud-link {
    min-height: 0;
}

.tpm-tag-cloud.fusion-tagcloud-element a.tag-cloud-link:hover {
    /* We need to have !important here because Avada uses !important on the hover color. :-( */
    color: var(--tpm-color-pink) !important; /* TPM Pink */
    background: none !important;
    border-color: var(--tag-text-color) !important;
}

/* Style the Footer. */
.tpm-footer .fusion-form-form-wrapper {
    --awb-form-label-color: var(--tpm-color-white);
}
.tpm-footer, 
.tpm-footer h6,
.tpm-footer-menu, 
.tpm-footer-menu h6,
.fusion-widget-area .tpm-footer h6 {
    --awb-text-color: var(--tpm-color-white);
    --h6_typography-color: var(--tpm-color-white);
}
.tpm-footer a, .tpm-footer-menu a {
    color: white;
}

.tpm-footer h6 {
    text-transform: uppercase;
    margin-bottom: 2px;
}
.tpm-footer p {
    margin: 0;
}

.tpm-footer .fusion-form-form-wrapper .fusion-form-field .fusion-form-tooltip > i {
    --awb-form-label-color: white;
}
.tpm-footer input::placeholder {
  color: gray !important;
}

/* Make the max-width of the featured image smaller on single blog pages. */
.post-content .fusion-image-element:has(.fusion-imageframe > img) {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Position our fixed "Stay Informed" button that appears on the side of all pages. */
.tpm-newsletter-form-popup-trigger-button.fusion-button {
    position: fixed;
    z-index: 1000000;
    left: 0;
    top: 50vh;
    /* Rotate the button 90 degrees so it's vertical. */
    transform: translate(-50%, -50%) rotate(-90deg) translate(0,50%);
}

/* Assure that the text in the popup newsletter signup form is legible. */
.tpm-newsletter-form-popup .fusion-form-form-wrapper .fusion-form-field .label,
.tpm-newsletter-form-popup .fusion-form-form-wrapper .fusion-form-field label
{
    color: var(--tpm-color-white);
}

/* Style the About Us testimonials slider. */
.fusion-testimonials .reviews .review blockquote q {
    font-family: var(--h5_typography-font-family);
    font-weight: var(--h5_typography-font-weight);
    font-style: var(--h5_typography-font-style);
    font-size: var(--h5_typography-font-size);
    color: white;
    text-align: center;
    padding: 0;
}
.fusion-testimonials .reviews .review .company-name {
    color: white;
    display: block;
    font-weight: normal;
    text-align: center;
    margin: 0 auto;
}
.fusion-testimonials .reviews .review .author .company-name strong::before {
    content: "–";
    color: white;
    margin-right: 0.25em;
}
.fusion-testimonials .reviews .review .author .company-name strong {
    font-weight: normal;
}

/* [TPM-19] 'Implement changes per Emily's "Updates to tpm.stagingsites.online" email of 2/5/2023' 
   - Add CSS IDs to Hero images for more control. Add CSS styles to adjust the sizing of the Hero images for consistency. */
.fusion-fullwidth.tpm-hero-container {
    min-height: 635px; /* 635px is the height of the tallest hero image (Retail). */
}

/* Have links in the top bar use the TPM Pink color. Include both the text and the icon. */
.tpm-top-bar .fusion-button:hover .fusion-button-text,
.tpm-top-bar .fusion-button:hover i
{
    color: var(--tpm-color-pink);
}
