/* ---------------------------------------------------------------------------
   Site-specific overrides for GL Lock & Keys.
   Loaded after style.css so these rules win.
   --------------------------------------------------------------------------- */

/* Prevent iOS "hover-on-first-tap": treat all taps as immediate clicks. */
a, button, .read_more a, .footer_menu a, .side_menu a { touch-action: manipulation; }

/* On touch-primary devices (phones/tablets), strip the padding-shift transitions
   from "Learn More" links. That animation is what iOS catches as a hover event on
   the first tap, requiring a second tap to actually follow the link. */
@media (hover: none) {
    /* Strip the global a transition and all hover-animated links so iOS fires
       click immediately on first tap instead of activating hover state. */
    a { transition: none !important; }
    .read_more a,
    .iconbox .iconbox_wrapper .iconbox_content .read_more a,
    .iconbox2 .iconbox_wrapper .iconbox_content .read_more a,
    .iconbox3 .iconbox_wrapper .iconbox_content .read_more a,
    .blog_post .post_content .read_more a {
        transition: none !important;
    }
    .read_more a:hover,
    .iconbox .iconbox_wrapper .iconbox_content .read_more a:hover,
    .iconbox2 .iconbox_wrapper .iconbox_content .read_more a:hover,
    .iconbox3 .iconbox_wrapper .iconbox_content .read_more a:hover,
    .blog_post .post_content .read_more a:hover {
        padding-left: inherit !important;
        padding-right: inherit !important;
    }

    /* Footer "Service List" links: make hover identical to normal so iOS does not
       use the first tap to reveal the gold hover state before navigating. */
    .footer .footer_nav li a:hover { color: #c9c9c9 !important; }
}

/* Fix horizontal overflow at the source: these full-width rows have no
   .container, so Bootstrap's default -15px side margins spill ~15px past the
   viewport. Zeroing them removes the overflow without a global overflow-x:hidden
   (which previously broke the off-canvas mobile menu). */
.services > .row,
.clients .row { margin-left: 0; margin-right: 0; }

/* Equal-height service cards. The columns already stretch to the tallest
   column, but each column is display:block so the .iconbox3 card only grows
   to its content height, leaving an empty strip under the shorter cards
   (visible roughly 992px-1453px where the longer text wraps to extra lines).
   Making the column a flex container lets the card fill the full height. */
.services > .row > [class*="col-"] { display: flex; }
.services > .row > [class*="col-"] > .iconbox3 { width: 100%; }

/* Equalize the text blocks: let each card's wrapper/content fill the full card
   height, and let the <p> grow to fill the leftover space. This makes the three
   paragraphs occupy the same area and aligns the "Learn More" links even when
   one box has more text than the others. */
.services .iconbox3 { display: flex; }
.services .iconbox3 .iconbox_wrapper { width: 100%; }
.services .iconbox3 .iconbox_content { display: flex; flex-direction: column; }
.services .iconbox3 .iconbox_content p { flex: 1 1 auto; }

/* Gold gradient on the service card titles */
.services .iconbox3 .iconbox_content h3 a {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Below ~1454px the columns get narrow, but .iconbox_wrapper keeps its big
   60px padding and the icon block takes ~120px, leaving only ~125px for the
   text. That caused heavy wrapping and an inconsistent 2-line "Learn More".
   Tighten the padding/icon spacing in that range so the text has room. */
@media (max-width: 1453px) {
    .services .iconbox3 .iconbox_wrapper { padding: 35px 25px; }
    .services .iconbox3 .iconbox_image { margin-right: 22px; min-width: 60px; }
}

/* Lock icon in the services_1 ("Common problem solutions") section header:
   size 60x60, dark-grey tint like the deco icons, kept behind the sub-title. */
.services_1 .section_header .shadow_icon {
    z-index: 0;
}
.services_1 .section_header .section_sub_title,
.services_1 .section_header .section_title {
    position: relative;
    z-index: 2;
}
.services_1 .section_header .shadow_icon img {
    width: 60px;
    height: 60px;
    filter: brightness(0) invert(0.1);
}

/* Remove the leftover highlight bar (recolored to black) behind the
   "Call Today" appointment line in the experience section. */
.experience_content .appoint:after { display: none; }

/* Gold gradient border at the bottom of the service page hero */
.page_header .page_header_content[style] {
    border-bottom: 2px solid transparent;
    border-image: var(--gl-gold-grad) 1;
}

/* Scroll offset for anchor links: leaves 150px above section headings so the
   sticky header doesn't cover the target when using sidenav links. */
.post_content[id], .post_title[id], h3[id], h4[id] {
    scroll-margin-top: 25px;
}

/* Gold gradient on service page section headings (h3.post_title) */
.blog_details .post_content .post_title {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Gold border on the blog/service detail post_content card */
.blog_details .post_content { border: 1px solid rgba(212, 175, 55, 0.28) !important; }

/* Spacing between stacked service-article cards */
.blog_details_inner .post_content + .post_content { margin-top: 30px; }

/* Gold gradient border top and bottom on service page images */
.service_image {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-image: var(--gl-gold-grad) 1;
}

/* Service page content images: extend to the full width of the content card
   by cancelling the .post_content 25px padding, with spacing above and below. */
.service_image {
    display: block;
    width: calc(100% + 50px);
    max-width: none;
    height: auto;
    margin: 30px -25px;
}

/* Sidebar widgets: clip children so the top border and corners are visible. */
.sidebar .widget.widget_menu,
.sidebar .widget.widget_side_contact {
    border-radius: 6px;
    overflow: hidden;
}

/* Appointment-box man image */
.man_keys_img { max-height: 138px; width: auto; }

/* Appointment-box phone icon: black, larger, and tight to the number
   (matches the footer phone spacing). brightness(0) turns the white svg black. */
.side_contact .side_phone_inner img {
    max-height: 32px;
    margin-right: 8px;
    filter: brightness(0);
}
.side_contact .side_phone_inner a,
.side_contact .side_phone_inner a:hover { color: #ffffff !important; }

/* Header phone icon: inline gold-gradient phone.svg */
.header .phone .phone-icon {
    display: inline-block;
    line-height: 0;
    margin-right: 10px;
    vertical-align: middle;
}
.header .phone .phone-icon svg { display: block; }

/* Header phone "Emergency Service" badge: black box with a solid gold border */
.header .phone {
    background: transparent !important;
    padding: 12px 26px !important;
    border: 3px solid transparent;
    border-image: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) 1;
}
.header .phone::before { display: none !important; }

/* Header phone text: red "Emergency Service:" label + large white number */
.header .phone .phone_text { line-height: 1.2; }
.header .phone .phone_label {
    display: block;
    color: #ee3b3b !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
}
.header .phone .phone_number {
    display: block;
    color: #ffffff;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.1;
}
.header .phone .phone_number:hover { color: #ffffff; }

/* Constrain the header logo so a large source image (e.g. 512x320) fits the bar */
.header .logo img {
    max-height: 110px;
    width: auto;
    max-width: 300px;
    padding: 10px;
}

/* Give the logo a little breathing room and keep it vertically centered */
.header .middle_bar {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Footer / aside logos: keep them reasonable too */
.footer .logo_footer img,
.aside_info .logo-side img {
    width: auto;
}

/* On desktop, phone numbers are plain text (tel: links only work on mobile) */
@media (min-width: 992px) {
    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
        color: inherit;
        text-decoration: none;
    }
}

/* Slider button: show "Learn More" on desktop, hide the mobile "Call Now" */
.slider_button .slider_call { display: none; }

@media (max-width: 991px) {
    /* Logo: twice as large on mobile/tablet */
    .header .logo img {
        max-height: 120px;
        max-width: 240px;
    }

    /* Slider button: swap to the phone "Call Now" tel: button on mobile */
    .slider_button .slider_learn { display: none; }
    .slider_button .slider_call {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .slider_button .slider_call_icon { width: 20px; height: 20px; }

    /* Hide the header search box on mobile */
    .header .header_search { display: none !important; }

    /* Hide social icons in the header on mobile */
    .header .header_social { display: none !important; }

    /* Hide the image collage in the experience section on mobile; show only text */
    .experience.bglayer_1 .row > div:first-child { display: none; }
    .experience.bglayer_1 .row > div:last-child { flex: 0 0 100%; max-width: 100%; }
    /* Trim the big top padding and hide the decorative shadow icon */
    .experience.bglayer_1.pd_tp_110 { padding-top: 30px !important; }
    .experience.bglayer_1 .shadow_icon { display: none !important; }

    /* Space below the phone box on mobile */
    .header .phone { margin-bottom: 10px !important; }

    /* Remove left indent on ordered/checkmark lists on mobile */
    .point_order { padding-left: 0 !important; }

    /* FAQ: show image below accordion on mobile */
    .section.faq .col-lg-4 { order: 2; }
    .section.faq .col-lg-8 { order: 1; }

    /* Stop justified text from stretching wrapped lines on mobile */
    .blog_details .post_content,
    .blog_details .fulltext,
    .blog_details ul.point_order li { text-align: left !important; }

    /* Space between the main content and the sidebar nav on mobile */
    .blog_details .col-lg-4.col-md-4 { margin-top: 40px; }

    /* Reduce slider top spacing to 1/4 (165px -> ~41px) on mobile */
    .theme_slider_1 .slider .slide_content { padding-top: 41px !important; }

    /* Center the logo, pin the menu button to the right (same row) */
    .header .middle_bar_inner {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 5px 0 !important;
    }
    .header .middle_bar { padding: 0 !important; }
    .header .logo { margin: 0 auto; line-height: 0; }
    .header .logo a { display: inline-block; line-height: 0; }
    .header .logo img { display: block; margin: 0; padding: 0; }
    .header .header_right_part {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        margin-top: 0 !important;
        display: flex;
        align-items: center;
    }
    .header .ma5menu__toggle { margin-left: 0 !important; }
}

/* FAQ page: gold divider at the bottom of the FAQ section (the man image touches
   it from above). The CTA banner sits flush against the border so the gold line
   reads as the top edge of the banner instead of bracketing an empty grey band
   (an empty gap below a bright line is what made it look like a grey box). */
.section.faq { border-bottom: 1px solid var(--gl-gold, #d4af37); }
.section.faq + .banner.type_3 { margin-top: 0; }
.section.faq + .banner.type_3 .banner_content { margin-top: 50px; }