/*
 * -----------------------------------------------------------------------
 * @author     Akshari Solutions
 * @copyright  (c) 2026 Akshari Solutions. All rights reserved.
 * -----------------------------------------------------------------------
 *
 * Apollo Pest Management - site styles, loaded after the theme stylesheet
 * (frontend_assets/assets/css/style_55_august.min.css).
 *
 * Everything here used to be inline: the <style> block of the old
 * head.blade.php, the copies of it at the top of seven pages (printed before
 * <!DOCTYPE>, which put those pages in quirks mode), the footer's <style>
 * block and about 200 style="" attributes. Classes that replace a style=""
 * attribute keep !important, because an inline style beat every normal rule
 * of the theme. Styles used by one page only live in css/pages/.
 *
 *  1. Header and menu
 *  2. "Get a free estimate" side tab
 *  3. Estimate forms
 *  4. Hero slider and page banners
 *  5. Service cards and lists
 *  6. Sections (testimonials, memberships, contact)
 *  7. Footer
 *  8. Keyboard focus
 */

/* 1. Header and menu ------------------------------------------------------ */

.header-area .welome-text.ap-call-bar {
    background-color: white !important;
}

.header-area .ap-call-bar p {
    color: #d83e02 !important;
}

.header-area .ap-call-bar .ap-call-link {
    background: #f26122 !important;
    color: white !important;
    border: 1px solid #f26122 !important;
    width: 100% !important;
    height: 35px !important;
    padding: 5px 10px 0px 10px !important;
}

.header-area .header-nav.ap-header-nav {
    background: white !important;
}

.ap-logo-main {
    margin: -30px 0px 0px 95px !important;
}

.ap-logo-sticky {
    margin: 0px 0px 0px 95px !important;
}

.ap-navbar-toggler {
    background-color: #d73c08 !important;
}

@media (min-width: 992px) {
    /* Desktop menu position; the phone menu is laid out by the theme. */
    .ap-navbar-collapse {
        margin: 0px 390px 0px 0px !important;
    }
}

/* Top-level menu links keep their colour in the sticky header too (the old
   inline !important beat the sticky rule below; the id does the same). */
#navbarSupportedContent .nav-link.ap-nav-link {
    color: #d93d02 !important;
}

/* Menu colours (old head.blade.php "Menu update"). */
.header-area .header-nav.sticky .navigation .navbar .navbar-nav .nav-item .nav-link {
    line-height: 30px !important;
    color: #f26122 !important;
}

.header-area .header-nav.sticky .navigation .navbar .navbar-nav .nav-item .sub-menu {
    background-color: white !important;
}

.header-area .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu {
    position: absolute;
    left: 0;
    top: 120%;
    width: 200px;
    background-color: #f26122 !important;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    z-index: 99;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

.header-area .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu > li a:hover {
    background-color: #fff !important;
    color: #f26122 !important;
}

.header-area .header-nav.sticky .navigation .navbar .navbar-nav .nav-item .sub-menu > li a:hover {
    background-color: #f26122 !important;
    color: #fff !important;
}

/* The page you are on: its top-level menu item is framed (Services for a
   service page) and its entry in the Services list looks hovered. The theme
   had no style for the current page. */
.header-area .header-nav .navigation .navbar .navbar-nav > .nav-item.active > .nav-link {
    box-shadow: inset 0 0 0 1px #d93d02;
}

.header-area .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu > li a[aria-current="page"] {
    background-color: #fff !important;
    color: #f26122 !important;
}

.header-area .header-nav.sticky .navigation .navbar .navbar-nav .nav-item .sub-menu > li a[aria-current="page"] {
    background-color: #f26122 !important;
    color: #fff !important;
}

@media (min-width: 992px) {
    /* The Services sub-menu also opens for keyboard users (it opened on
       mouse hover only). */
    .header-area .header-nav .navigation .navbar .navbar-nav .nav-item:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        top: 100%;
    }
}

@media (max-width: 991px) {
    /* Phones and tablets: the logo was pulled up 30px under the "Call Now"
       bar and overlapped by it. */
    .ap-logo-main {
        margin: 5px 0px 0px 0px !important;
    }
}

/* 2. "Get a free estimate" side tab --------------------------------------- */

/* Closed, the panel sits just outside the right edge with only its tab
   showing. It used "right: -500px", which left the narrower panel of a
   phone half on screen; translateX(100%) works for any width. */
.pull-tab {
    color: rgb(94, 94, 94);
    position: fixed;
    top: 10%;
    right: 0;
    width: 500px;
    max-width: calc(100vw - 50px);
    height: auto;
    background: #ffffff;
    box-shadow: 0px 0px 100px 0px rgba(74, 74, 74, 0.35);
    padding: 0px 15px 0px 15px;
    border-radius: 3px;
    transform: translateX(100%);
    transition: 0.3s all;
    /* Open, it sits above the sticky header (on phones the header covered
       its first field). Closed, it is off screen. */
    z-index: 1001;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .pull-tab {
        top: 15%;
    }
}

.pull-tab.tabbed {
    transform: none;
}

.pull-tab .tab {
    cursor: pointer;
    color: #f26122;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0px -20px 50px 0px rgba(74, 74, 74, 0.10);
    position: absolute;
    left: -122px;
    top: 42%;
    background: #fff;
    text-align: center;
    padding: 15px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 600;
    width: auto;
    height: auto;
    transform: rotate(-90deg);
}

/* Long forms scroll inside the panel on short screens. While the tab is
   closed the form is hidden from the keyboard and screen readers (it is off
   screen); visibility changes after the 0.3s slide so the motion is kept. */
.pull-tab .ap-tab-panel {
    max-height: 80vh;
    overflow-y: auto;
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
}

.pull-tab.tabbed .ap-tab-panel {
    visibility: visible;
    transition-delay: 0s;
}

.pull-tab .ap-tab-panel > .alert {
    margin: 20px 0 0;
}

/* The old form: style="padding-top: 20px" plus a <br> above, two below. */
.pull-tab .ap-tab-form {
    padding: calc(20px + 1.5em) 0 3em;
}

.pull-tab input,
.pull-tab textarea {
    -webkit-user-select: text;
    user-select: text;
}

.pull-tab .ap-tab-submit {
    background: #f26122 !important;
    border-color: #f26122 !important;
}

/* Old footer <style>: tall, scrolling nice-select lists. */
.nice-select.open .list {
    width: 100%;
    overflow-y: scroll !important;
    height: 250px !important;
}

/* 3. Estimate forms ------------------------------------------------------- */

.appointment-section-two {
    position: inherit !important;
    margin-top: -215px !important;
    z-index: 2 !important;
}

.appointment-section-two.ap-appointment-home {
    margin-top: 80px !important;
}

.appointment-section-two.ap-appointment-contact {
    margin-top: 0px !important;
}

/* The old override pointed at assets/img/form_bg.png relative to the page
   address, which does not exist, so no picture ever showed behind the
   form. "none" keeps that look without the failing request. */
.appointment-section-two .appointment-form::after {
    background-image: none;
}

.appointment-section-two .appointment-form form .nice-select .list {
    width: 100%;
    overflow-y: scroll !important;
    height: 250px !important;
}

/* Honeypot field: off screen, never shown to people. */
.ap-hp {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ap-field-error {
    display: block;
    flex-basis: 100%;
    width: 100%;
    margin-top: 6px;
    color: #c00000;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.appointment-form form [aria-invalid="true"],
.appointment-form form [aria-invalid="true"] + .nice-select,
.ap-tab-form [aria-invalid="true"],
.ap-tab-form [aria-invalid="true"] + .nice-select {
    box-shadow: inset 0 0 0 2px #c00000;
}

/* Space for the reCAPTCHA box, so the page does not jump when it appears. */
.ap-recaptcha {
    min-height: 78px;
}

@media (max-width: 420px) {
    /* The 304px box is wider than the form on phones. */
    .ap-recaptcha {
        transform: scale(0.85);
        transform-origin: 0 0;
    }
}

.js-estimate-form button[disabled] {
    opacity: 0.7;
    cursor: wait;
}

/* 4. Hero slider and page banners ----------------------------------------- */

.ap-panel {
    background: #ffffffbf !important;
    border: 1px solid #e6ecf1 !important;
}

.ap-my-50 {
    margin: 50px 0px !important;
}

.ap-hero-tag {
    font-size: 30px !important;
    color: #f26122 !important;
    font-weight: 700 !important;
}

.ap-hero-title {
    font-size: 50px !important;
    color: #0a1026 !important;
    font-weight: 700 !important;
}

@media (max-width: 575px) {
    /* Phones: the 50px slide titles ran to eight lines and made the slider
       jump in height from slide to slide. */
    .ap-hero-title {
        font-size: 34px !important;
    }
}

.ap-text-navy {
    color: #0a1026 !important;
}

.ap-banner-panel {
    background: #ffffffbf !important;
    border: 1px solid #d5dfe899 !important;
    width: 100% !important;
}

.ap-banner-panel-padded {
    padding: 0px 0px 25px 0px !important;
}

.ap-banner-panel.ap-banner-panel-narrow {
    width: 50% !important;
}

@media (max-width: 767px) {
    .ap-banner-panel.ap-banner-panel-narrow {
        width: 90% !important;
    }
}

/* 5. Service cards and lists ---------------------------------------------- */

/* Fixed heights line the cards up side by side. On phones (one column) they
   left large empty blocks under short texts, so they start at 768px. */
@media (min-width: 768px) {
    .ap-card-h-618 {
        height: 618px !important;
    }

    .ap-card-h-510 {
        height: 510px !important;
    }

    .ap-card-h-500 {
        height: 500px !important;
    }

    .ap-card-h-455 {
        height: 455px !important;
    }

    .ap-card-h-318 {
        height: 318px !important;
    }
}

.ap-step-icon {
    width: 50px !important;
    margin: 5px 0px !important;
}

.ap-step-icon.ap-step-icon-sm {
    width: 35px !important;
}

.ap-check-icon {
    margin: 17px 0px 0px 0px !important;
}

.ap-list-disc {
    list-style-type: disc !important;
}

.ap-indent-130 {
    margin: 0px 0px 0px 130px !important;
}

/* Wildlife page "how it works" list markers. */
.experience-section-two-p3 .experience-content-p3 .experience-list-p3 li::after {
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background-color: white !important;
    opacity: 0.22;
    content: '';
}

/* 6. Sections ------------------------------------------------------------- */

.ap-bg-muted {
    background-color: #a9a9a924 !important;
}

.ap-testimonial-loop {
    margin: 110px 0px !important;
}

.ap-memberships-row {
    margin: 0px 0px 15px 150px !important;
}

@media (max-width: 991px) {
    /* The 150px indent pushed the logos off-centre on smaller screens. */
    .ap-memberships-row {
        margin: 0px 0px 15px 0px !important;
    }
}

/* Image rows shifted right (washroom hygiene, pest library). */
.ap-row-shift {
    margin: 0px -42px 0px 42px !important;
}

@media (max-width: 575px) {
    /* The shift pushed the images past the right edge of phones. */
    .ap-row-shift {
        margin: 0px !important;
    }
}

@media (max-width: 991px) {
    /* The header row has no .container around it; its -15px margins made
       every page scroll sideways on phones. */
    .header-area .ap-header-nav > .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* What still reaches past the window edge holds nothing visible: the header
   row's -15px margin on wider screens, and the shifted image rows at tablet
   and small laptop widths. Clipped so no page can be moved sideways. Unlike
   overflow: hidden, clip makes no scroll box, so nothing moves. */
.header-area .ap-header-nav,
main {
    overflow-x: clip;
}

.ap-info-box {
    padding-left: 60px !important;
}

.ap-text-medium {
    font-size: medium !important;
}

/* The e-mail address is one long word: on a 320 px phone it pushed the
   contact page sideways. It now wraps only when it does not fit. */
.ap-info-box .info a {
    overflow-wrap: anywhere;
}

/* 7. Footer --------------------------------------------------------------- */

.ap-social-icon {
    margin: 15px 0px 0px 0px !important;
}

.ap-footer-email {
    font-size: 15px !important;
}

.ap-credit-link {
    color: #d93d02 !important;
}

/* The page you are on, in Quick Links. */
.footer-widget-area .nav-widget a[aria-current="page"] {
    color: #fff !important;
}

/* 8. Keyboard focus ------------------------------------------------------- */

/* The theme removes focus outlines (outline: none), so keyboard users could
   not see where they were. :focus-visible leaves mouse clicks unchanged. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.nice-select:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #0a1026 !important;
    outline-offset: 2px;
}