/* ===================================================================
   SolarTally custom overrides — loaded AFTER style.css on purpose.
   Order matters here: broad/generic rules are declared FIRST, specific
   component rules AFTER, so that when two rules tie on specificity the
   more specific component (tags, share icons, buttons) wins rather
   than being silently overridden by a later generic rule.
   =================================================================== */

/* ---------- Home page: disable the custom cursor follower ----------
   It can't track the mouse while it's over the calculator iframe
   (a separate document), so it visually detaches from the real
   cursor whenever the pointer moves over the calculator. */
body.home-calculator-page .mouse-cursor {
    display: none !important;
}
body.active-dark-mode .logo img.dark-logo { display: none !important; }
body.active-dark-mode .logo img.light-logo { display: block !important; }
body:not(.active-dark-mode) .logo img.dark-logo { display: block !important; }
body:not(.active-dark-mode) .logo img.light-logo { display: none !important; }

/* ---------- General link/text safety net (declared early on purpose —
   see note above; specific components below override this) ---------- */
body.active-dark-mode a { color: inherit; text-decoration: none; }
body.active-dark-mode .axil-post-details > p a,
body.active-dark-mode .about-author .description a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
body.active-dark-mode .axil-post-details > p a:hover {
    color: var(--color-primary, #3858F6) !important;
}
body.active-dark-mode .post-excerpt,
body.active-dark-mode .b3,
body.active-dark-mode .b1.description,
body.active-dark-mode .comment-form-cookies-consent,
body.active-dark-mode .comment-notes {
    color: #b7b7b7 !important;
}
/* Defensive: guarantee post body text is never dark-on-dark, whatever
   the cause of any specific instance turns out to be. */
body.active-dark-mode .axil-post-details p,
body.active-dark-mode .axil-post-details li,
body.active-dark-mode .axil-post-details span:not([class]) {
    color: #c7c5c5 !important;
}

/* ---------- Header "Get an Installer" CTA button ---------- */
.mainmenu .header-cta-item {
    display: flex !important;
    align-items: center !important;
    margin-left: 12px !important;
}
.mainmenu .header-cta-item a::after,
.mainmenu .header-cta-item a::before {
    display: none !important;
    content: none !important;
}
.mainmenu .header-cta-item a,
a.axil-button.button-rounded.btn-primary,
input.axil-button.button-rounded {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    background-color: var(--color-primary, #3858F6) !important;
    color: #ffffff !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 19px !important;
    line-height: normal !important;
    white-space: nowrap !important;
    border: 2px solid var(--color-primary, #3858F6) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
.mainmenu .header-cta-item a:hover,
a.axil-button.button-rounded.btn-primary:hover,
input.axil-button.button-rounded:hover {
    background-color: transparent !important;
    color: var(--color-primary, #3858F6) !important;
}

/* ---------- Post like button ---------- */
.post-like a.like-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 20px !important;
    border-radius: 50px !important;
    border: 1px solid #444 !important;
    color: #e5e5e5 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}
.post-like a.like-button:hover,
.post-like a.like-button.liked {
    border-color: var(--color-primary, #3858F6) !important;
    color: var(--color-primary, #3858F6) !important;
}

/* Tag cloud: intentionally NOT overridden — the theme's own native
   .tagcloud a rule (plus its existing dark-mode border-color tweak)
   already renders correctly and matches light mode exactly. */

/* ---------- Social share icon buttons ---------- */
ul.social-share-transparent li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid #444 !important;
    color: #cfcfcf !important;
    background-color: #1a1a1a !important;
    margin-right: 6px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}
ul.social-share-transparent li a:hover {
    background-color: var(--color-primary, #3858F6) !important;
    border-color: var(--color-primary, #3858F6) !important;
    color: #ffffff !important;
}
body.active-dark-mode ul.social-icon li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid #444 !important;
    color: #cfcfcf !important;
    margin-right: 6px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}
body.active-dark-mode ul.social-icon li a:hover {
    background-color: var(--color-primary, #3858F6) !important;
    border-color: var(--color-primary, #3858F6) !important;
    color: #ffffff !important;
}

/* ---------- Post category label: uppercase in both modes ---------- */
.post-cat-list a,
.post-cat a {
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ---------- Comment / contact form submit buttons ----------
   Applies in both modes now. :not(.search-button) keeps this from
   bleeding into the search widget's submit button. */
.form-submit input.axil-button,
.form-submit button.axil-button,
form button[type="submit"]:not(.search-button):not(.newsletter-submit) {
    display: inline-block !important;
    width: auto !important;
    background-color: var(--color-primary, #3858F6) !important;
    color: #ffffff !important;
    padding: 12px 32px !important;
    border-radius: 50px !important;
    border: none !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.form-submit input.axil-button:hover,
.form-submit button.axil-button:hover,
form button[type="submit"]:not(.search-button):not(.newsletter-submit):hover {
    opacity: 0.9 !important;
}

/* ---------- Search widget: force it back to a plain icon trigger,
   undoing any accidental button styling from rules above ---------- */
body.active-dark-mode .axil-search .search-button {
    all: unset !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #9a9a9a !important;
    cursor: pointer !important;
    font-size: 15px !important;
}

/* ---------- FAQ accordion (plain Bootstrap markup — this theme's
   10px root font-size shrinks Bootstrap's own rem-based type unless
   we set explicit pixel sizes here). Sizing applies in both modes;
   colors are dark-mode-only since light mode's white card already
   has correct contrast natively. ---------- */
.accordion-button {
    font-size: 17px !important;
    line-height: 1.5 !important;
    padding: 18px 20px !important;
}
.accordion-body,
.accordion-body p {
    font-size: 15px !important;
    line-height: 1.7 !important;
}
.accordion-body {
    padding: 4px 20px 20px !important;
}
body.active-dark-mode .accordion-item {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
body.active-dark-mode .accordion-button {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
body.active-dark-mode .accordion-button:not(.collapsed) {
    background-color: #222222 !important;
    color: var(--color-primary, #3858F6) !important;
}
body.active-dark-mode .accordion-button::after {
    filter: invert(1) !important;
}
body.active-dark-mode .accordion-body {
    background-color: #1a1a1a !important;
    color: #c7c5c5 !important;
}

/* ---------- Blog-list thumbnails: square, matching real Blogar, and
   vertically centered in the row instead of pinned to the top ---------- */
.content-block.post-list-view .post-thumbnail {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    align-self: center !important;
}
.content-block.post-list-view .post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* ---------- More Stories thumbnails: fixed 3:2 landscape, matching
   real Blogar's own reference sizing (285x190), cropped consistently
   regardless of the source photo's actual dimensions ---------- */
.post-stories .post-thumbnail {
    display: block !important;
    overflow: hidden !important;
    aspect-ratio: 3 / 2 !important;
}
.post-stories .post-thumbnail a,
.post-stories .post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

body.active-dark-mode .sidebar-inner .axil-single-widget:not(.widget_categories) {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    padding: 20px !important;
}
body.active-dark-mode .sidebar-inner .widget-title {
    color: #ffffff !important;
}

/* Categories widget: prevent longer names (e.g. "Commercial") from
   overflowing their rounded box — let the box grow instead. */
/* Categories widget: intentionally left alone — the theme's own
   dark-mode handling (transparent background, native 5px padding,
   50px thumbnail) already matches light mode's layout exactly.
   Defensive wrap fallback only, no sizing changes. */
.widget_categories .cat-item .title {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* ---------- Author box image (was rendering tiny) ---------- */
.about-author .media { display: flex !important; align-items: flex-start !important; gap: 20px !important; }
.about-author .media .thumbnail { flex: 0 0 auto !important; }
.about-author .media .thumbnail img {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.post-meta .post-author-avatar img,
.post-author-avatar img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* ---------- Featured image: fixed 810x550 ---------- */
.axil-post-details > figure.wp-block-image {
    margin: 0 0 30px 0 !important;
}
.axil-post-details > figure.wp-block-image img {
    width: 100% !important;
    max-width: 810px !important;
    height: 550px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* ---------- Blog list pagination (same appearance in both modes) ---------- */
.axil-pagination .pagination {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 40px 0 0 !important;
    flex-wrap: wrap !important;
}
.axil-pagination .pagination li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #444 !important;
    color: #cfcfcf !important;
    background-color: #1a1a1a !important;
    text-decoration: none !important;
}
.axil-pagination .pagination li.page-num a {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
}
.axil-pagination .pagination li.page-nav a {
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 21px !important;
    white-space: nowrap !important;
}
.axil-pagination .pagination li.active a {
    background-color: var(--color-primary, #3858F6) !important;
    border-color: var(--color-primary, #3858F6) !important;
    color: #ffffff !important;
}
.axil-pagination .pagination li a:hover {
    border-color: var(--color-primary, #3858F6) !important;
    color: var(--color-primary, #3858F6) !important;
}
body.active-dark-mode .widget_newsletter .newsletter-widget-form input[type="email"] {
    border: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 44px !important;
    color: #ffffff !important;
}
.widget_newsletter .newsletter-widget-form input[type="email"] {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    box-sizing: border-box !important;
    margin-bottom: 14px !important;
}
.widget_newsletter .newsletter-widget-form .newsletter-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    background-color: var(--color-primary, #3858F6) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 44px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.widget_newsletter { margin-bottom: 30px !important; }

/* ---------- Popular Posts widget: fixed thumbnail size ----------
   Without this, a missing/not-yet-uploaded image renders as a broken-
   image icon PLUS its full alt text, which has no size constraint and
   can blow up the whole card's layout. Lock the box regardless.
   NOTE: the real per-card class is "content-block post-medium" (the
   "post-medium-block" class only wraps the whole group of 3 cards) —
   matching that exact combo is required to beat the theme's own
   higher-specificity native rule for this element. */
.content-block.post-medium .post-thumbnail {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    flex: 0 0 80px !important;
    overflow: hidden !important;
    display: block !important;
}
.content-block.post-medium .post-thumbnail a,
.content-block.post-medium .post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ---------- Contact/comment textarea: dark mode sets a dark
   background natively but never sets matching light text color,
   leaving it black-on-black. Fix directly. ---------- */
body.active-dark-mode .form-group textarea,
body.active-dark-mode textarea.form-control {
    color: #ffffff !important;
}

/* ---------- Mobile "Blog" dropdown: native <details>/<summary> ----------
   Replaces a JS-driven toggle that proved unreliable — the browser
   handles expand/collapse and link navigation natively here, so it
   can't be broken by any other script on the page. Styled to match
   the rest of the mobile menu items exactly. */
.popup-mobilemenu-area .mainmenu .mobile-blog-details summary {
    cursor: pointer;
    list-style: none;
    color: var(--color-body, #1a1a1a);
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    padding: inherit;
    display: block;
}
.popup-mobilemenu-area .mainmenu .mobile-blog-details summary::-webkit-details-marker {
    display: none;
}
.popup-mobilemenu-area .mainmenu .mobile-blog-details summary::after {
    content: "+";
    float: right;
    font-weight: 700;
}
.popup-mobilemenu-area .mainmenu .mobile-blog-details[open] summary::after {
    content: "\2212";
}
.popup-mobilemenu-area .mainmenu .mobile-blog-details .axil-submenu {
    display: block !important;
    padding-left: 20px;
    padding-top: 10px;
}
.popup-mobilemenu-area .mainmenu .mobile-blog-details .axil-submenu li a {
    padding: 8px 0;
    display: block;
    font-size: 14px;
    line-height: 18px;
}
body.active-dark-mode .popup-mobilemenu-area .mainmenu .mobile-blog-details summary {
    color: #969696;
}