/**
Custom CSS File for The True Maids
Changes to the stylesheet will not be affected during a YOOtheme version update
Last updated: 07072025
**/


/*! === Global Classes === */

:root {
    --primary: #0263b8;
    --secondary: #fec600;
    --alt: #004f99;
    --white: #ffffff;
    --black: #000000;
    --gray: #999999;
}

.uk-button-text {
    position: relative;
    transform: rotate(-1deg);
    text-align: left;
}

.uk-button-text::after {
    content: '';
    display: block;
    width: 30%;
    height: 8px;
    background: var(--secondary);
    transform: translate(0px, 0px) rotate(-1deg) skewX(-30deg);
    position: relative;
    bottom: 0px;
    transition: all .25s ease;
}

.uk-checkbox, .uk-radio {
    margin-top: 0px;
    margin-right: 5px;
}

/*! === Custom Global Classes === */

.yellow-square {
    background: var(--secondary);
}

.yellow-square > img {
    position: relative;
    transform: rotate(-2deg);
}

.blue-separator {
    position: relative;
    top: -10px;
}

.uk-button-text:hover::after {
    width: 100%;
}

/*! === Site Header === **/

.tm-header {
    transform: rotate(-1deg) translate(0px, -70px);
    padding: 30px 0px 0px;
    position: fixed;
    width: 100%;
    z-index: 99;
}

.tm-header::before {
    content: '';
    background: linear-gradient(to bottom, var(--white) 98%, #00000029 98%, transparent);
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translate(0, -50px) scale(1.1);
}

.tm-header .uk-navbar-nav {
    position: relative;
    transform: translate(0px, 20px);
}

.tm-header .uk-navbar-nav > li > a {
    color: var(--black);
}

.tm-header .uk-navbar-nav > li.uk-active > a {
    color: var(--primary);
}

.tm-header .uk-navbar-nav > li:hover > a {
    color: var(--alt);
}

.tm-header .uk-navbar-nav > li > a:focus {
    color: var(--secondary);
}

#headerCall > a {
    font-size: 24px;
    color: var(--black);
}

#headerCall > a:hover {
    color: var(--primary);
}

#headerBookNow {
    width: 100%;
}

#headerBookNow > a, .uk-light .uk-button-secondary {
    width: auto;
    width: max-content;
    transform: translate(0px, 0px);
    border: 0px;
    color: var(--white);
    transition: all .25s ease;
}

#headerBookNow > a:hover, .uk-light .uk-button-secondary:hover {
    color: var(--black);
    background: var(--primary);
    border-color: var(--primary);
    transform: rotate(0deg) translate(0px, 0px) scale(1.02);
}

#headerBookNow > a::before, .uk-light .uk-button-secondary::before {
    content: '';
    transform: translate(0px, 0px) rotate(0deg);
    background: linear-gradient(110deg, var(--primary), var(--alt));
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
    display: block;
    position: absolute;
}

#headerBookNow > a:hover::before, .uk-light .uk-button-secondary:hover::before{
    background: var(--secondary);
    transform: rotate(2deg) translate(-2px, 0px) scale(1.02);
}

.uk-logo {
    gap: 30px;
    align-items: center;
}

.uk-logo::after {
    content: 'The True Maids';
    display: block;
    color: var(--primary);
    font-size: 2rem;
    transform: translateY(10px) rotate(0deg);
    width: 200px;
}

.tm-header .uk-logo > * {
    padding-top: 30px;
}

.tm-header .uk-navbar .uk-navbar-right > * {
    position: relative;
    top: 20px;
}

@media(max-width: 1709px) {
    .tm-header > div > .uk-container {
        padding: 0px 10px;
    }
    .uk-logo {
        max-width: 300px;
    }
    .uk-logo::after,
    .tm-header * {
        font-size: 26px !important;
    }
}

@media (max-width: 1479px) {
    .tm-header .uk-navbar-nav,
    .uk-navbar-right {
        gap: 25px;
    }
    .uk-logo {
        gap: 15px;
    }
    .uk-navbar-left {
        gap: 5px;
    }
}

@media (max-width: 1409px) and (min-width: 960px) {
    #headerItems {
        margin-left: 0px;
    }

    #headerItems > div {
        padding-left: 15px;
    }
}
@media (max-width: 1339px) and (min-width: 960px) {
    .tm-header .uk-navbar-nav,
    .uk-navbar-right {
        gap: 15px;
    }
}

@media (max-width: 1299px) and (min-width: 960px) {
    .tm-header * {
        font-size: 20px !important; 
    }
}

@media (max-width: 1199px) {
    .tm-header-mobile .uk-navbar-container {
        padding: 3px 0px;
        background: #fff !important;
    }
    #mheaderBookNow .uk-button {
        font-size: 24px;
    }
}

@media (max-width: 1139px) and (min-width: 960px) {
    .uk-logo {
        max-width: 250px;
    }
    .uk-logo::after {
        font-size: 24px !important;
    }
}

@media(max-width: 1079px) and (min-width: 960px) {
    .tm-header * {
        font-size: 18px !important; 
    }
    .socials .uk-icon {
        font-size: 16px !important;
    }
    #headerBookNow .uk-button {
        padding: 0px 10px;
    }
    .uk-logo {
        max-width: 220px;
    }
    .uk-logo::after {
        font-size: 20px !important;
    }
}

@media (max-width: 999px) and (min-width: 960px) {
    .tm-header .socials > .uk-grid {
        margin-left: -10px;
    }

    .tm-header .socials > .uk-grid > div {
        padding-left: 10px;
    }
}

@media(max-width: 959px) {
    .tm-header-mobile .uk-navbar-container {
        padding: 3px 0px;
        background: #fff !important;
    }
    #mheaderBookNow .uk-button {
        font-size: 22px;
    }
    .uk-logo > * {
        width: 90px;
    }
    .uk-logo::after {
        transform: translateY(4px);
        font-size: 24px !important;
        width: 120px;
    }
    .uk-logo {
        max-width: 250px;
    }
}

@media (max-width: 479px) {
    #mheaderBookNow .uk-button {
        padding: 0px 30px;
        font-size: 26px;
        max-width: max-content;
    }
    .uk-logo::after {
        font-size: 20px !important;
    }
    .tm-header-mobile .uk-container {
        padding: 0px 10px;
    }
    .uk-navbar-right {
        gap: 15px;
    }

    .hero-section .uk-button {
        width: 100% !important;
    }
}

/*! === Home Page === */

/*? Hero */

.hero-section + div {
    position: relative;
    overflow: visible;
}

.hero-section + div::before {
    content: '';
    background-image: url('/wp-content/uploads/line-blue.svg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 20px;
    position: absolute;
    top: -10px;
    left: 0px;
}

.hero-overlay > div > *:not(.hero-button) {
    text-shadow: 1px 1px 0px rgb(0 0 0 / 80%);
}

.hero-overlay img {
    filter: drop-shadow(2px 4px 6px #00000075);
}

.hero-button > div {
    gap: 30px;
}

/*? Services */

.home-kickers > div a img {
    transition: all .25s ease;    
}

.home-kickers > div a:hover img {
    transform: scale(.99);
}

.home-kickers > div .uk-inline-clip {
    overflow: visible;
}

.home-kickers > div:nth-child(odd) img {
    transform: rotate(-1deg);
}

.home-kickers > div:nth-child(even) img {
    transform: rotate(-2deg);
}

.home-kickers > div img + div {
    box-shadow: 5px 5px 0px 0px var(--secondary);
    position: absolute !important;
    transition: all .25s ease;
}

.home-kickers > div:nth-child(odd) img + div {
    transform: translate(-10px, 10px) rotate(-2deg);
}

.home-kickers > div:nth-child(even) img + div {
    transform: translate(20px, 20px) rotate(1deg);
}

.home-kickers > div img:hover + div, .home-kickers > div img + div:hover {
    transform: scale(1.1) rotate(1deg);
}

.home-kickers > div:nth-child(even) img:hover + div, .home-kickers > div:nth-child(even) img + div:hover {
    transform: translate(20px, 15px) scale(1.1) rotate(1deg);
}

/*? Call to Action */

.home-cta {
    position: relative;
    transform: rotate(-1deg) scale(1.02) translateY(-20px);
}

.home-cta .cta-book-now .el-link > *{
    transition: all .25s ease;
    transform: translate(-30px, -10px) rotate(10deg);
}

.home-cta:hover .cta-book-now .el-link > * {
    transform: translate(190px, -10px) rotate(-1deg);
}



/*! === Footer === */

.socials .uk-icon {
    transform: rotate(0deg) translateY(0px);
    /* transition: all .15s ease; */
    padding: 5px;
    border-radius: 5px;
}

.socials .uk-icon:hover {
    transform: rotate(1deg) translateY(-2px);
    transition: all .15s ease;
}

.uk-icon[uk-icon^="icon: facebook"] {
    background: #0866ff;
    color: #fff;
}

.uk-icon[uk-icon^="icon: instagram"] {
    background: radial-gradient(circle at 30% 110%, #ffdb8b 0%, #ee653d 25%, #d42e81 50%, #a237b6 75%, #3e57bc 100%);
    color: #fff;
}


::-webkit-scrollbar {
    width: 3px;
    background: #f7f7f7;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
}

/*? Book Now */

.uk-open>.uk-modal-dialog {
    position: relative;
    padding: 0px;
    height: 100vh;
}

#bookNow {
    padding: 0px;
}

.uk-modal-close-outside {
    top: 20px;
    right: 20px;
    transform: unset;
}

.cleaning-scheduler-form-wrapper {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0px;
    max-height: 540px;
    overflow-y: scroll;
}

.cleaning-scheduler-form-wrapper .uk-select {
    padding: 0px 50px 0px 10px !important;
    font-size: 16px;
}

.cleaning-scheduler-form-wrapper .uk-button {
    font-size: 22px;
    padding: 0px 10px;
}

.uk-form-label > p {
    margin: 0;
}

@media (max-width: 1199px) {
    .cleaning-scheduler-form-wrapper {
        width: calc(100% - 60px);
        border: 0px;
    }
}

/*! === Manage Bookings === */

.delete-booking-button {
    background: none;
    border: 0px;
    padding: 0px;
}

.column-delete {
    text-align: center;
}

.cleaning-bookings-manager-wrap .uk-input, .cleaning-bookings-manager-wrap .uk-select {
    border: 1px solid #dfdfdf !important;
    padding: 5px 10px;
}

/*! === Services === */

.service-content .uk-align-right + div {
    display: block;
}

.service-grid > div > div:nth-child(odd) .el-item {
    transform: rotate(-1deg);
}

.service-grid > div > div:nth-child(even) .el-item {
    transform: rotate(1deg);
}