/* ===========================================================================
   GL Lock & Keys - Black & Gold theme
   Loaded last, after style.dark.css and custom.css.
   Handles backgrounds, layered sections, gold gradients and text contrast
   that a flat color swap cannot.
   =========================================================================== */

:root {
    --gl-black: #000000;
    --gl-near: #0d0d0d;
    --gl-panel: #141414;
    --gl-panel-2: #1a1a1a;
    --gl-line: rgba(212, 175, 55, 0.28);
    --gl-line-strong: rgba(212, 175, 55, 0.6);
    --gl-text: #f3f3f3;
    --gl-muted: #c2c2c2;
    --gl-gold: #d4af37;
    --gl-gold-deep: #aa771c;
    --gl-gold-grad: linear-gradient(135deg, #bf953f 0%, #fcf6ba 22%, #b38728 50%, #fbf5b7 78%, #aa771c 100%);
    --gl-gold-grad-soft: linear-gradient(135deg, #8a6d1a 0%, #d4af37 50%, #8a6d1a 100%);
}

/* --- Base ---------------------------------------------------------------- */
html, body {
    background: var(--gl-near);
    color: var(--gl-text);
}
.preloader { background: var(--gl-black) !important; }

p, li, span, td, label, .section_desc, .desc, .intro, .author_intro,
.fulltext, .commenter_review, blockquote {
    color: var(--gl-text);
}
.desc, .post_intro p, .author_intro, .intro { color: var(--gl-muted); }
.section_desc { color: #ffffff; }

a { color: var(--gl-gold); }
a:hover { color: #f3d97a; }

/* --- Gold gradient text helper for headers ------------------------------- */
.section_header .section_title,
.page_header .heading,
.widget_title,
.explore_all,
.appoint {
    background: var(--gl-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
}
.appoint span, .explore_all span { -webkit-text-fill-color: #f3d97a; color: #f3d97a; }

.section_sub_title { color: var(--gl-gold) !important; }

/* generic headings that are not gradient-ized stay light */
h1, h2, h3, h4, h5, h6 { color: var(--gl-text); }
.post_title a, .post_title { color: var(--gl-text) !important; }
.post_title a:hover { color: var(--gl-gold) !important; }

/* gold underline lines */
.title_line { background: var(--gl-gold-grad) !important; }

/* gold gradient on checkmark list icons */
.blog_details ul.point_order li:before {
    background: var(--gl-gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent !important;
}

/* --- Header -------------------------------------------------------------- */
.header .top_bar { background: var(--gl-black) !important; border-bottom: 1px solid var(--gl-line); }
.header .middle_bar { background: var(--gl-near) !important; border-bottom: 1px solid var(--gl-line); }
.header .top_bar,
.header .top_bar .header_info div,
.header .top_bar .schedule div,
.header .top_bar .phone div { color: var(--gl-text); }
.header .top_bar .header_info span { color: var(--gl-gold); }

.header .mainnav ul.main_menu > li > a { color: var(--gl-text) !important; }
.header .mainnav ul.main_menu > li:hover > a,
.header .mainnav ul.main_menu > li.active > a { color: var(--gl-gold) !important; }

.header .mainnav ul.sub-menu { background: #111 !important; border: 1px solid var(--gl-line); }
.header .mainnav ul.sub-menu li a { color: var(--gl-text) !important; }
.header .mainnav ul.sub-menu li a:hover,
.header .mainnav ul.sub-menu li.active a { color: var(--gl-gold) !important; }

.header .header_search .search_form .form-control {
    background: #111 !important;
    color: var(--gl-text) !important;
    border: 1px solid var(--gl-line) !important;
}
.header .aside_open i,
.header .ma5menu__toggle i { color: var(--gl-gold); }

/* --- Page header banner -------------------------------------------------- */
.page_header .page_header_content {
    position: relative;
}
.page_header .page_header_content:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.8));
    z-index: 0;
}
/* Service pages set their hero via an inline background-image; show it at full
   brightness (no dark overlay) and left-align the text like the homepage. */
.page_header .page_header_content[style]:before { display: none; }
.page_header .page_header_content[style] { text-align: left; }
/* Text shadows so the hero text stays readable over the full-brightness image */
.page_header .page_header_content[style] .section_sub_title,
.page_header .page_header_content[style] .section_desc {
    text-shadow:
        0 0 3px rgba(0, 0, 0, 1),
        0 1px 2px rgba(0, 0, 0, 1),
        0 2px 6px rgba(0, 0, 0, 1),
        0 4px 16px rgba(0, 0, 0, 0.9);
}
/* Gradient text + shadow that works on desktop AND mobile (incl. iOS Safari).
   drop-shadow over background-clip:text is buggy on WebKit, so the shadow is a
   blurred duplicate of the text (::before, via data-text) painted behind the
   gradient .gt span. */
.page_header .page_header_content[style] .section_title {
    position: relative;
    background: none;
    -webkit-text-fill-color: initial;
    color: inherit;
}
.page_header .page_header_content[style] .section_title::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 8px;
    width: 100%;
    color: #000;
    -webkit-text-fill-color: #000;
    filter: blur(6px);
    text-shadow: 0 0 6px #000, 0 4px 8px #000;
    z-index: 0;
    pointer-events: none;
}
.page_header .page_header_content[style] .section_title .gt {
    position: relative;
    z-index: 1;
    background: var(--gl-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.page_header .breadcrumb li,
.page_header .breadcrumb li a,
.page_header .breadcrumb li.active { color: var(--gl-text) !important; }
.page_header .breadcrumb li.active { color: var(--gl-gold) !important; }

/* --- Layered sections + gold dividers ------------------------------------ */
.main_wrapper { background: var(--gl-near); }
.section { position: relative; }
.main_wrapper > .section,
.main_wrapper > div[class*="section"],
.services, .experience, .funfacts, .testimonial, .blog,
.clients, .why_choose, .why_choose_2, .team, .top_feature, .contact, .faq {
    background-color: var(--gl-near);
}
/* alternate to pure black */
.main_wrapper > .section:nth-of-type(even),
.testimonial, .clients, .why_choose_2, .funfacts {
    background-color: var(--gl-black);
}
/* gold gradient divider line on top of major blocks */
.services, .experience, .funfacts, .testimonial, .blog,
.clients, .why_choose_2, .team, .contact, .section.services_1 {
    border-top: 2px solid transparent;
    border-image: var(--gl-gold-grad) 1;
}

.funfacts {
    border-bottom: 2px solid transparent;
}

/* --- Cards / panels ------------------------------------------------------ */
.iconbox, .iconbox2, .iconbox3, .iconbox_wrapper,
.service_box, .testibox1, .testibox_inner,
.blog_post, .post_content, .teambox, .teambox_inner,
.funbox1, .keepintouch_2 .communication,
.contact_us_2, .accordion, .accordion_tab, .accordion_info,
.sidebar .widget, .registration_form, .registration_form_inner,
.expe_box_inner, .most_read, .recent_post_item {
    background-color: var(--gl-panel) !important;
    border: 1px solid var(--gl-line);
    color: var(--gl-text);
}
.blog_post .post_content { border-top: 0; }
.iconbox_content h3 a, .blog_post .post_title a, .teambox_intro h5 { color: var(--gl-text); }
.iconbox_content h3 a:hover, .blog_post .post_title a:hover { color: var(--gl-gold); }

/* funfacts has a background image; darken it */
.funfacts.bg_image_3 {
    background-color: var(--gl-black) !important;
    background-blend-mode: overlay;
}

/* clients logos row on black with gold separators */
.clients .client_logo { border: 1px solid var(--gl-line); }
.clients .client_logo a img { filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(5deg); opacity: .8; }

/* --- Buttons ------------------------------------------------------------- */
.button,
.contact_us_2 .button,
.theme_slider_1 .slider .slider_button .button,
.theme_slider_2 .registration_form .button,
input.button {
    background: var(--gl-gold-grad) !important;
    color: #1a1a1a !important;
    border: 0 !important;
    font-weight: 800 !important;
}
.button:hover, input.button:hover {
    background: var(--gl-gold-grad-soft) !important;
    color: #000 !important;
}
.button.alt {
    background: transparent !important;
    color: var(--gl-gold) !important;
    border: 2px solid var(--gl-gold) !important;
}
.button.alt:hover { background: var(--gl-gold-grad) !important; color: #1a1a1a !important; }

.read_more a span { color: var(--gl-gold) !important; }
.read_more a:hover span { color: #f3d97a !important; }

/* date badges, totop, pagination */
.calendar a, .calendar .date { color: #1a1a1a !important; }
.calendar { background: var(--gl-gold-grad) !important; }
.footer .footer_bottom .footer_bottom_inner .totop a,
.pagination li a.current,
.pagination li a.page-number.current {
    background: var(--gl-gold-grad) !important;
    color: #1a1a1a !important;
}
.pagination li a { background: var(--gl-panel); color: var(--gl-text); border: 1px solid var(--gl-line); }
.pagination li a:hover { color: var(--gl-gold); }

/* experience year badge */
.expe_box, .expe_box_inner { background: var(--gl-gold-grad) !important; color: #1a1a1a !important; }
.expe_box_inner { color: #1a1a1a !important; }

/* --- CTA / banner blocks: bold gold ------------------------------------- */
.banner, .banner.type_2 {
    background: var(--gl-gold-grad) !important;
    border-radius: 6px;
}
.banner .banner_text h1, .banner .banner_phone span { color: #1a1a1a !important; }

/* Inline gold-gradient phone icon in banner_phone */
.banner .banner_content .banner_phone .banner_phone_icon {
    margin-right: 15px;
    vertical-align: middle;
}

/* Footer contact phone: keep the gold icon inline with the number */
.footer .contact_info .phone .phone_hours { display: block; }
.footer .contact_info .phone .phone_num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.footer .contact_info .phone .phone_num svg { flex: none; }

/* type_3 banner: transparent background, readable text on the dark section */
.banner.type_3 { background: transparent !important; margin-top: 40px; margin-bottom: 40px; }
.banner.type_3 .banner_content { background: #000000; }
.banner.type_3 .banner_text h1 { color: var(--gl-text) !important; }
.banner.type_3 .banner_phone span { color: var(--gl-gold) !important; }
.banner .banner_content { color: #1a1a1a; }

/* --- Forms --------------------------------------------------------------- */
.form-control, input.form-control, textarea.form-control, select.form-control {
    background: #111 !important;
    color: var(--gl-text) !important;
    border: 1px solid var(--gl-line) !important;
}
.form-control::placeholder { color: #8d8d8d !important; }
.form-control:focus { border-color: var(--gl-gold) !important; box-shadow: 0 0 0 2px rgba(212,175,55,.2) !important; }

/* --- FAQ accordion ------------------------------------------------------- */
.accordion_title { color: var(--gl-text) !important; }
.accordion_title span { color: var(--gl-gold) !important; }
.accordion_tab_icon { color: var(--gl-gold) !important; }
.accordion .item.active .accordion_tab_icon .close_icon { color: #141414 !important; }

/* FAQ page section title: remove any shadow/outline/filter so nothing darkens behind the gradient text */
.section_title.faq {
    filter: none !important;
    text-shadow: none !important;
}
.section_title.faq::before {
    display: none !important;
}

/* --- Testimonials -------------------------------------------------------- */
.testibox1 .testi-content p { color: var(--gl-text); }
.testi-info h4 { color: var(--gl-gold); }
.testi-info h6 { color: var(--gl-muted); }
.testi-content ul li i { color: var(--gl-gold); }
.testi-content ul li.text { color: var(--gl-muted); }

/* --- Footer -------------------------------------------------------------- */
.footer { background: var(--gl-black) !important; border-top: 2px solid transparent; border-image: var(--gl-gold-grad) 1; }
.footer .footer_above { background: var(--gl-black) !important; }
.footer .footer_bottom { background: var(--gl-near) !important; border-top: 1px solid var(--gl-line); }
.footer, .footer p, .footer h4, .footer .contact_info h4,
.footer .footer_menu li a, .footer .most_read_content h5 a,
.footer .most_read_content h6 { color: var(--gl-text); }
.footer .widget_title {
    background: var(--gl-gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent !important;
}
.footer .footer_menu li a:hover,
.footer .most_read_content h5 a:hover { color: var(--gl-gold) !important; }
.footer .most_read { background: transparent !important; border: 0 !important; }

/* --- Side / aside panels ------------------------------------------------- */
.slide_navi, .aside_info {
    background: var(--gl-near) !important;
    border-left: 2px solid transparent;
    border-image: var(--gl-gold-grad) 1;
}
.aside_info .side_info h3, .slide_navi h4, .aside_info h4 { color: var(--gl-text); }
.aside_info .side_info h3 { 
    background: var(--gl-gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent !important;
}

.read_more a span { background: transparent !important; }

.sidebar { background: transparent !important; }

.widget_tag_cloud ul li a {
    background: var(--gl-panel) !important;
    color: var(--gl-text) !important;
    border: 1px solid var(--gl-line);
}
.widget_tag_cloud ul li a:hover { color: var(--gl-gold) !important; border-color: var(--gl-gold); }

.widget_categories .category_list li,
.widget_categories .category_list li a { color: var(--gl-text); }
.widget_categories .category_list li a:hover { color: var(--gl-gold); }

.author_div .author_name { color: var(--gl-text) !important; }
.author_intro { color: var(--gl-muted); }

/* slider text */
.theme_slider_1 .slide_content,
.theme_slider_2 .slide_content { color: var(--gl-text); }

/* Slider heading: gold gradient text (on an inner span so it paints above the
   shadow), with the inner word ("Service") in silver. */
.theme_slider_1 .slider .slide_content .heading { position: relative; z-index: 0; }
.theme_slider_1 .slider .slide_content .heading .heading_grad { position: relative; z-index: 1; }
/* Gold gradient applied per word so each word gets its own full gradient */
.theme_slider_1 .slider .slide_content .heading .gw {
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #bb913b 30%, #dbab3f 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #ffdc7c 25%, #aa8940 62.5%, #78612e 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* Silver gradient for the "Service" word */
.theme_slider_1 .slider .slide_content .heading .sw {
    background: radial-gradient(ellipse farthest-corner at right bottom, #e6e2d2 0%, #a5a4a2 8%, #fafafa 30%, #a6a6a6 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffffff 8%, #ffffff 25%, #8b8888 62.5%, #777777 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* Shadow that works on mobile: a solid-dark blurred duplicate of the text behind
   the gradient (drop-shadow over background-clip:text is buggy on WebKit). The
   gradient sits on .heading_grad (z-index 1) so it paints above this shadow. */
.theme_slider_1 .slider .slide_content .heading::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    white-space: pre-line;
    color: #000;
    -webkit-text-fill-color: #000;
    text-shadow: 0 0 6px #000, 0 4px 10px rgba(0, 0, 0, 0.9);
    z-index: 0;
    pointer-events: none;
}

/* --- Mobile menu (ma5 off-canvas) ---------------------------------------- */
/* Backgrounds: maroon -> near-black */
.ma5menu__container,
.ma5menu__panel { background-color: var(--gl-near) !important; }
.sidenav { background: var(--gl-near) !important; }
.sidenav ul li a { background: var(--gl-panel) !important; border: 1px solid #2b2a2a; }

/* Red accents -> gold */
.ma5menu__header a, .ma5menu__footer a,
.ma5menu__panel > ul li a:hover,
.ma5menu__panel > ul li .ma5menu__category:hover,
.ma5menu__panel > ul li .ma5menu__category.ma5menu__path,
.ma5menu__path,
.ma5menu__panel > ul li:hover .ma5menu__btn--enter,
.ma5menu__leave:hover,
.ma5menu__btn--leave:hover { color: var(--gl-gold) !important; }

/* Keep the back arrow white on tap (mobile :active fires red via vendor hover rule) */
.ma5menu__btn--leave,
.ma5menu__btn--leave:active { color: #ffffff !important; }

/* Mobile menu blur, chosen per platform.
   Default (Chrome/Android, desktop): blurred dark overlay behind the menu.
   backdrop-filter renders correctly here and the overlay sits below the menu. */
.ma5menu--active:before {
    background-color: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 9000 !important;
}
.ma5menu__container { z-index: 10001 !important; }

/* iPhone/iOS only: a backdrop-filter overlay mis-stacks above the menu and steals
   taps on iOS, so disable the overlay there and blur + dim the page content via
   filter instead (these sections are not ancestors of the menu, which is appended
   to <body>, so the menu stays sharp and tappable). */
@supports (-webkit-touch-callout: none) {
    .ma5menu--active:before { display: none !important; }
    .ma5menu--active .header,
    .ma5menu--active .main_wrapper,
    .ma5menu--active .footer {
        filter: blur(16px) brightness(0.45);
    }
}

/* Menu header logo -> main gold logo */
.ma5menu__logo {
    background-image: url('../images/logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
}

/* Left hover accent bar -> gold */
.ma5menu__panel > ul li:hover { border-left-color: var(--gl-gold) !important; }

/* Remove side padding and center items; ensure panel and list fill full container width */
.ma5menu__panel { width: 100% !important; }
.ma5menu__panel > ul { width: 100%; }
.ma5menu__panel > ul li { padding-left: 0 !important; padding-right: 0 !important; text-align: center; width: 100%; }

/* Scrollbar -> gold on near-black */
.ma5menu__panel { scrollbar-color: var(--gl-gold) var(--gl-near); }
.ma5menu__panel::-webkit-scrollbar { background-color: var(--gl-near); }
.ma5menu__panel:hover::-webkit-scrollbar-thumb { background-color: var(--gl-gold); }

/* Gold gradient dividers between items and on the back/leave bar */
.ma5menu__panel > ul li a,
.ma5menu__panel > ul li .ma5menu__category,
.ma5menu__leave {
    border-bottom: 1px solid transparent;
    border-image: var(--gl-gold-grad) 1;
}
/* Keep bottom border on last item and add top border above first item */
.ma5menu__panel > ul li:last-child a { border-bottom: 1px solid transparent; border-image: var(--gl-gold-grad) 1; }
.ma5menu__panel > ul li:first-child a,
.ma5menu__panel > ul li:first-child .ma5menu__category { border-top: 1px solid transparent; border-image: var(--gl-gold-grad) 1; }

/* --- Misc / not-found ---------------------------------------------------- */
.page_header_content.text-center h2.heading {
    background: var(--gl-gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent !important;
}
.border_line { background: var(--gl-line) !important; }
.categ a { background: var(--gl-gold-grad) !important; color: #1a1a1a !important; }

/* Touch devices: neutralize the footer Service List hover so iOS doesn't use the
   first tap to reveal the gold hover state before navigating. */
@media (hover: none) {
    .footer .footer_menu li a:hover { color: var(--gl-text) !important; }
}