/* =========================================================
   Sunrise Electric — custom site overrides
   Loaded AFTER parent theme.css / default.css / responsive.css
   (see elton-child/functions.php enqueue with dependencies)
   ---------------------------------------------------------
   Dark header so the full-color logo (white text) reads well.
   ========================================================= */

/* Top contact bar intentionally left at the theme default (light). */

/* --- Main menu bar --- */
.main-header-menu-wrapper {
    background-color: #121212;
}
/* on-scroll sticky header keeps the dark background */
.main-header.sticky-fixed,
.main-header.sticky-fixed .main-header-menu-wrapper {
    background-color: #121212;
}
.main-menu-list > li > a {
    color: #ffffff;
}
.main-menu-list > li > a:hover,
.main-menu-list > li.current-menu-item > a,
.main-menu-list > li.current-menu-ancestor > a,
.main-menu-list > li.current-menu-parent > a {
    color: var(--elton-primary);
}
.main-menu-list > li > i,
.main-menu-list .menu-item-children > a > i {
    color: #ffffff;
}

/* --- Right-side "Call us" box --- */
.main-menu-right-number-detail p {
    color: rgba(255, 255, 255, 0.7);
}
.main-menu-right-number-detail a {
    color: #ffffff;
}
.main-menu-right-number-detail a:hover {
    color: var(--elton-primary-two);
}

/* --- Mobile header: hamburger icon on the dark bar --- */
.mobile-nav-toggler {
    color: #ffffff;
}

/* --- Remove leftover custom-cursor dots (cursor is disabled; parent header.php
   still prints these empty divs, which render as fixed rings at the top-left) --- */
.custom-cursor-one,
.custom-cursor-two {
    display: none !important;
}

/* --- Remove the lightning-bolt shape that appears behind/under menu items on
   hover (theme menu-shape.png on .main-menu-list > li::after). The hover color
   change on the link is kept; only the bolt graphic is removed. --- */
.main-menu-list > li::after,
.main-menu-list > li:hover::after,
.main-menu-list > li.current-menu-parent::after,
.main-menu-list > li.current-menu-item::after {
    display: none !important;
}

/* ===================================================================
   BRAND PALETTE — recolor theme orange -> logo gold
   Logo colors: gold #d69323 (sun), burnt-amber #ae6113 (gradient base),
   slate #5d5d5b / dark-slate #313130, silver #8e8e8e (mountain/wordmark)
   ---------------------------------------------------------------------
   NOTE: the primary color is set at its source in the theme option
   `elton_base_colors` (elton_primary_color / _second_primary_color /
   _light_primary_color), which inc/inline-css.php prints as an inline
   :root style AFTER this file — so overriding the vars here would not win.
   Change the gold there. The rules below only fix spots the vars miss.
   =================================================================== */
/* Leftover hardcoded oranges (blog area) -> gold */
.blog-details-single-user-social li:hover a { border-color: #d69323 !important; }
.blog-single-category a { background-color: #d69323 !important; }
.fa-angle-left, .blog-pagination-next { color: #d69323 !important; }
.blog-one-single-detail h4 a,
.blog-two-single-detail h4 a {
    background-image: linear-gradient(transparent calc(100% - 1px), #d69323 1px) !important;
}
/* Solid gold buttons: dark text for readability (white-on-gold is too low-contrast) */
.elton-btn,
.banner-box-btn,
.services-one-single-btn a,
.services-two-single-btn a,
.services-three-single-btn a,
.services-four-single-btn a,
.dark-btn {
    color: #1b1b1b !important;
}

/* ===================================================================
   "Need an electrician you can count on?" section — hide the video
   popup link (elton_video widget e490c91). The widget renders the
   .video-btn unconditionally, so it's hidden here rather than via the
   Elementor data. Reversible: delete this rule to restore it.
   =================================================================== */
.elementor-element-e490c91 .video-btn {
    display: none !important;
}

/* ===================================================================
   "Our Electrical Services" cards (elton_service_widget)
   ---------------------------------------------------------------------
   (1) Uniform image height: the "Electrical Panels" featured photo is the
       only portrait shot, so it rendered much taller than the others.
       Crop every card image to the same 4:3 frame the landscape photos
       already use (anchored to the top so the panel breakers stay in view).
   (2) On hover the image slides down to reveal the caption; longer captions
       were getting clipped behind it. Give the card bottom room and slide
       the image a little further so the full caption shows.
   =================================================================== */
.services-one-single-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
}
.services-one-single-box {
    padding-bottom: 30px;
}
.services-one-single-text p {
    padding-top: 12px;
}
.services-one-single-box:hover .services-one-single-img {
    transform: translateY(90px);
}

/* ===================================================================
   FOOTER spacing — the "Working Hours" column and the bottom-bar menu
   were removed, leaving 3 columns spanning only 9/12 and a lopsided
   copyright bar. Spread the columns and re-center the copyright.
   =================================================================== */
@media (min-width: 1200px) {
    .footer-top .row { justify-content: space-between; }
}
.footer-bottom-inner { justify-content: center; }
.footer-bottom-link:empty { display: none; }

/* ===================================================================
   MOBILE header + slide-out menu fixes
   =================================================================== */
/* (1) Hamburger icon: the 3 bars are dark (--elton-bg-darkslategray) and sit on
   the dark menu bar, so they're invisible. Make them white. */
.header-right-end .line-1,
.header-right-end .line-2,
.header-right-end .line-3 {
    background-color: #ffffff;
}

/* (2) Slide-out contact icons (phone / email): the icon circle is a flex item
   with no shrink guard, so the long email address squashed it into an oval and
   shrank it. Lock it to a fixed 35px circle so both match. */
.mobile-nav-contact-icon {
    flex: 0 0 35px;
}

/* (3) Social icon (Instagram): theme renders it as a square outline. Make it a
   solid filled circle with a light glyph, consistent with the contact icons. */
.mobile-nav-social li a {
    background-color: var(--elton-primary);
    border: none;
    border-radius: 50%;
}
.mobile-nav-social li a i {
    color: var(--elton-light);
}

/* ===================================================================
   FOOTER logo (now the light "silver" logo, set via theme option).
   Bump the size on desktop; on mobile bump it more and center it.
   =================================================================== */
.footer-widget-logo img {
    width: 200px;
}
@media (max-width: 767px) {
    .footer-logo-social {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .footer-widget-logo img {
        width: 270px;
    }
}