/*
Theme Name:   Reliable Child
Theme URI:    https://www.reliablestorage.co.in/
Description:  Astra child theme for the /blogs/ WordPress install. Reuses the main site's header and footer verbatim so the blog is visually identical to reliablestorage.co.in. Generated from common/header.php and common/footer.php - see header.php for details.
Author:       Management Solution Tech
Author URI:   https://www.managementsolutiontech.com/
Template:     astra
Version:      1.0.6
Text Domain:  reliable-child
*/

/* The main site's own stylesheets are loaded by header.php (absolute URLs),
   so nothing is duplicated here. Only blog-specific layout lives below. */

/* ---- Blog listing ---- */
.rss-blog-wrap { padding: 50px 0 60px; }
.rss-post-card {
    background: #fff;
    border: 1px solid #e9ebef;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease;
}
.rss-post-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-3px); }
.rss-post-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: #f4f5f7; }
.rss-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rss-post-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.rss-post-card__meta { font-size: 13px; color: #8a9099; margin-bottom: 8px; }
.rss-post-card__body h2 { font-size: 19px; line-height: 1.35; margin: 0 0 10px; }
.rss-post-card__body h2 a { color: #1f2430; text-decoration: none; }
.rss-post-card__body h2 a:hover { color: #a1151c; }
.rss-post-card__body p { font-size: 14px; color: #5c636e; margin: 0 0 16px; }
.rss-read-more { margin-top: auto; font-weight: 600; color: #a1151c; text-decoration: none; }
.rss-read-more:hover { text-decoration: underline; }

/* ---- Single article ---- */
.rss-article { padding: 45px 0 60px; }
.rss-article__meta { font-size: 14px; color: #8a9099; margin-bottom: 22px; }
.rss-article__featured { margin: 0 0 28px; }
.rss-article__featured img { width: 100%; height: auto; border-radius: 8px; }
.rss-article__body { font-size: 16px; line-height: 1.75; color: #33383f; }
.rss-article__body h2 { font-size: 26px; margin: 34px 0 14px; }
.rss-article__body h3 { font-size: 21px; margin: 26px 0 12px; }
.rss-article__body p  { margin-bottom: 16px; }
.rss-article__body ul,
.rss-article__body ol { margin: 0 0 18px 22px; }
.rss-article__body li { margin-bottom: 8px; }
.rss-article__body img { max-width: 100%; height: auto; border-radius: 6px; }
.rss-article__body table { width: 100%; margin: 20px 0; border-collapse: collapse; }
.rss-article__body table th,
.rss-article__body table td { border: 1px solid #dfe2e6; padding: 10px 12px; }
.rss-article__body table th { background: #f6f7f9; text-align: left; }
.rss-article__body blockquote {
    border-left: 4px solid #a1151c;
    margin: 22px 0;
    padding: 6px 0 6px 18px;
    color: #4a5059;
    font-style: italic;
}
/* Inline links inherit surrounding typography - same rule as the main site */
.rss-article__body a:not(.btn):not(.button-89):not(.button-3) {
    font-family: inherit; font-size: inherit; font-weight: inherit;
    line-height: inherit; text-decoration: underline; text-underline-offset: 2px;
}

/* ---- Sidebar CTA ---- */
.rss-sidebar-cta {
    background: #1f3864; color: #fff; border-radius: 8px;
    padding: 26px 22px; position: sticky; top: 100px;
}
.rss-sidebar-cta h3 { color: #fff; font-size: 20px; margin-bottom: 10px; }
.rss-sidebar-cta p  { font-size: 14px; opacity: .9; margin-bottom: 18px; }

/* ---- Related posts ---- */
.rss-related { background: #f6f7f9; padding: 50px 0; }

/* ---- Pagination ---- */
.rss-pagination { margin-top: 40px; text-align: center; }
.rss-pagination .page-numbers {
    display: inline-block; padding: 8px 14px; margin: 0 3px;
    border: 1px solid #dfe2e6; border-radius: 4px;
    color: #1f2430; text-decoration: none;
}
.rss-pagination .page-numbers.current,
.rss-pagination .page-numbers:hover { background: #a1151c; border-color: #a1151c; color: #fff; }

@media (max-width: 767.98px) {
    .rss-article__body { font-size: 15px; }
    .rss-article__body h2 { font-size: 22px; }
    .rss-sidebar-cta { position: static; margin-top: 30px; }
}

/* ===================================================================
   FIXES — 24 September 2026
   Both issues are specificity conflicts: Astra's stylesheet is enqueued
   after the main site's CSS, so Astra wins on anything the main site
   leaves unset. These rules are in the child stylesheet, which loads
   last, so they win without touching main.css or custom.css.
   =================================================================== */

/* ---- FIX 1: banner title rendering dark -------------------------------
   css/main.css styles `.bread-custom h2` and `.bread h2` as white 45px,
   but there is NO h1 rule anywhere in the main site CSS. On the main site
   the h1 inherits and looks white; under WordPress, Astra sets an explicit
   dark colour on h1, which wins. Result: dark grey text on a dark photo.
   Mirroring the h2 treatment onto h1 fixes it.                          */
.location .bread .bread-custom h1,
.bread-custom h1 {
    color: #fff !important;
    font-size: 45px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 6px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.location .bread-custom {
    background-color: rgba(14, 14, 14, .45);
}
/* Strengthen the overlay so text stays legible on busy warehouse photos */
.location .bread-custom::before {
    background: rgba(0, 0, 0, .35);
}
.location ul.breadcrumb,
.location ul.breadcrumb li,
.location ul.breadcrumb li a {
    color: #fff !important;
}
.location ul.breadcrumb li a:hover {
    color: #fff !important;
    text-decoration: underline;
}
@media (max-width: 767.98px) {
    .location .bread .bread-custom h1,
    .bread-custom h1 { font-size: 26px; }
}

/* ---- FIX 2: mega-menu (v1.0.5) --------------------------------------
   Built on Ashish's full-width CSS grid approach, which is the right
   solution for a 12-column panel. Three things had to be corrected:

   1. My own 1.0.4 rules were blocking it. `max-width: 100% !important` and
      `margin: 0 !important` overrode `width: 100vw` and
      `margin-left: calc(-50vw + 50%)`, so the full-width grid could never
      take effect. Those !important declarations are gone.

   2. Hover and click rendered differently. The site's original rule
      `.dropdown:hover .dropdown-menu { display: flex }` is (0,3,0) specific,
      while `.navbar-nav .dropdown-menu` is (0,2,0) - so hovering gave the old
      12-column flex row and clicking gave the grid. Both states are now
      matched by the same selector.

   3. `grid-auto-flow: column` fought `grid-template-columns: repeat(5,...)`.
      With 11 visible <ul>s, column flow generates 6 implicit columns beyond
      the 5 declared, producing an 11-column row. Default row flow is correct.

   Also replaced `:nth-child(3) { display: none }` - which breaks the moment
   the menu order changes - with `:not(:has(li))`, which detects the
   whitespace-only <ul> by content rather than position.                   */

/* #navbar is the positioning context. Needed so `calc(-50vw + 50%)`
   resolves against a full-width containing block. */
@media (min-width: 992px) {
    nav#navbar.navbar { position: relative !important; }
    nav#navbar.navbar > div.container-fluid,
    nav#navbar.navbar div.navbar-collapse,
    nav#navbar.navbar ul.navbar-nav,
    nav#navbar.navbar ul.navbar-nav > li.nav-item,
    nav#navbar.navbar ul.navbar-nav > li.nav-item.dropdown { position: static !important; }

    /* POSITIONING OVERRIDE - must out-specify css/custom.css, which has
       `.navbar-expand-lg .navbar-nav .dropdown-menu { left:45%; top:64px;
       transform: translate(-50%,0) }` at (0,3,0). A plain
       `.navbar-nav .dropdown-menu` rule is (0,2,0) and loses, which is what
       shifted the panel left and slid it up over the logo.

       With #navbar as the containing block (full viewport width), left:0 plus
       width:100vw fits exactly - no negative margin needed, so margin-left is
       zeroed to cancel the calc(-50vw + 50%). */
    nav#navbar.navbar ul.navbar-nav > li.nav-item.dropdown > div.dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }

    /* Keep logo, menu and REQUEST A QUOTE on one row */
    nav#navbar.navbar { flex-wrap: nowrap; }
    nav#navbar.navbar div.navbar-collapse { flex-basis: auto; flex-wrap: nowrap; }

    /* Astra wrappers clip absolutely-positioned children */
    #content, #primary, .site-content, .ast-container,
    .ast-primary-header-bar, .site-header, #navbar, .navbar-collapse {
        overflow: visible;
    }
}

/* ---- Panel ---- */
.navbar-nav .dropdown-menu {
    display: none;
    width: 100vw;
    max-width: 100vw;
    left: 0;
    margin-left: 0;
    border: 0;
    border-top: 3px solid #c8102e;
    border-radius: 0;
    padding: 24px clamp(20px, 4vw, 60px);
    max-height: calc(100vh - 165px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
}

/* Both open states share one rule, so hover and click match.
   Row flow (the default) gives 5 columns with items filling across. */
.navbar-nav .dropdown-menu.show,
.navbar-nav .dropdown:hover > .dropdown-menu,
.navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 0 24px;
    align-items: start;
    justify-content: start;
}

/* Hide the whitespace-only column by content, not by position.
   :empty misses it because it contains whitespace text nodes. */
.navbar-nav .dropdown-menu > ul:not(:has(li)) { display: none; }
/* Fallback for browsers without :has() */
@supports not selector(:has(li)) {
    .navbar-nav .dropdown-menu > ul:nth-child(3) { display: none; }
}

.navbar-nav .dropdown-menu > ul {
    list-style: none;
    margin: 0;
    padding: 0 12px 0 0;
    border-right: 1px solid #eceff3;
    min-width: 0;
    float: none;
    width: auto;
}
.navbar-nav .dropdown-menu > ul:last-child { border-right: 0; }

.navbar-nav .dropdown-menu > ul ul {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    float: none;
    width: auto;
    columns: auto;
}

.navbar-nav .dropdown-menu .dropdown-item {
    display: block;
    white-space: normal;
    padding: 4px 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: #1d2733;
    background: none;
}
.navbar-nav .dropdown-menu .dropdown-item:hover {
    background: none;
    color: #c8102e;
}

.navbar-nav .dropdown-menu .dropdown-item.dropdown-toggle {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #c8102e;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid #f1f3f6;
}
.navbar-nav .dropdown-menu .dropdown-item.dropdown-toggle::after { display: none; }

.navbar-nav .dropdown-menu::-webkit-scrollbar { width: 8px; }
.navbar-nav .dropdown-menu::-webkit-scrollbar-thumb { background: #ccd2da; border-radius: 4px; }

@media (max-height: 820px) {
    .navbar-nav .dropdown-menu { padding-top: 16px; padding-bottom: 16px; }
    .navbar-nav .dropdown-menu .dropdown-item { padding: 3px 0; font-size: 13px; }
}

/* Narrower desktop and zoomed-in views: 3 columns */
@media (max-width: 1399px) {
    .navbar-nav .dropdown-menu.show,
    .navbar-nav .dropdown:hover > .dropdown-menu,
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .navbar-nav .dropdown-menu > ul { border-right: 0; padding-bottom: 16px; }
}

/* Tablet and mobile: in-flow single column inside the collapsed menu */
@media (max-width: 991px) {
    .navbar-nav .dropdown-menu {
        position: static;
        width: auto;
        max-width: none;
        margin-left: 0;
        max-height: none;
        overflow: visible;
        box-shadow: none;
        padding: 14px 18px;
    }
    .navbar-nav .dropdown-menu.show,
    .navbar-nav .dropdown:hover > .dropdown-menu,
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        grid-template-columns: 1fr;
    }
    .navbar-nav .dropdown-menu > ul { border-right: 0; padding-right: 0; }
}

/* Astra caps content width, which squeezed the header and footer rows */
.site-content .ast-container {
    max-width: 100% !important;
}

/* Astra's admin-bar offset was pushing the red top bar down */
body.admin-bar-showing .top-header,
body.logged-in .top-header {
    margin-top: 0;
}

/* Blog cards: match main-site card spacing and stop the grid running
   full-bleed the way it did in the earlier screenshots */
.rss-blog-wrap > .container,
.rss-article > .container,
.rss-related > .container {
    max-width: 1280px;
    padding-left: 20px;
    padding-right: 20px;
}