/*
 * Site-specific overrides. Loaded after style.css / style-dark.css / responsive.css.
 *
 * We use the header-style-one "two" variant for its solid bar + red top-bar,
 * but keep the standard visible desktop nav from the base variant. The .two
 * rules in style.css hide the desktop menu (it is hamburger-driven in the
 * original template); these overrides restore base behavior on desktop only.
 * Below 1200px responsive.css takes over and the .two mobile rules already
 * match our existing hamburger behavior, so nothing is overridden there.
 */
@media (min-width: 1201px) {
    header.header-style-one.two .desktop-nav .nav-bar > ul {
        display: flex;
    }
    header.header-style-one.two .desktop-nav .nav-bar .extras #desktop-menu {
        display: block;
    }
    header.header-style-one.two a#mobile-menu {
        display: none;
    }
}

/*
 * Brand logo sizing. The Train With Panda logos are square (1:1) while the
 * template's GymOn logo was 503x171 (~3:1), and the template sizes logos by
 * width — a square image under those rules triples the header/footer height.
 * Constrain by the height the GymOn logo actually occupied instead.
 */
.header-logo a img {
    width: auto;
    max-height: 61px; /* 180px-wide GymOn logo at 503:171 */
}
.mobile-nav .res-log img {
    width: auto;
    max-height: 68px; /* .mobile-nav img was 200px wide -> ~68px tall */
}
.footer-logo a img {
    width: auto;
    max-height: 68px; /* 200px-wide GymOn logo at 503:171 */
}
/* Heading icon: old icon was 58x56; +40% => ~78px */
.heading figure img {
    width: auto;
    max-height: 78px;
}
@media (max-width: 480px) {
    .header-logo a img {
        max-height: 48px; /* matches the 140px-wide logo this breakpoint used */
    }
}

/*
 * Contact Us section: restore the world map and the stacked location cards.
 *
 * The template paints the map at z-index:-11 and the four rear cards at
 * z-index:-1..-4. Their ancestors (.c-data, .c-cards, .gap) are all
 * position:relative with z-index:auto, so none establishes a stacking
 * context and the negative layers escape to the root — landing behind the
 * opaque background style-dark.css puts on .contact-us itself.
 *
 * isolation:isolate makes each wrapper its own stacking context, which
 * confines the negative layers to it. They then paint above every ancestor
 * background while staying behind their in-flow siblings (the avatar list
 * and the active card), which is the intended layering.
 */
.contact-us .c-data,
.contact-us .c-cards {
    isolation: isolate;
}

/*
 * The dark theme repaints the active card (#0f0f0f at specificity 0,5,1),
 * overriding the template's red. Re-assert it at equal specificity from
 * this later-loading file.
 */
.contact-us .c-cards .card.active,
body.light-d .contact-us .c-cards .card.active {
    /*background-color: var(--theme-color);*/
}

/*
 * Blog index: 2-column card grid.
 *
 * pages/blog/index.blade.php reuses the blog-style-three layout (col-lg-8
 * main + col-lg-4 sidebar) but keeps the blog-style-one card markup, laid
 * out two-per-row inside the col-lg-8. The blog-style-three rules in
 * style.css were authored for cards spanning the FULL col-lg-8 (~856px),
 * so applied to a ~416px card they oversize the type, break the gutter
 * alignment, and un-clip the hover arrow. Scoped to .blog-grid-two-col so
 * the blog detail page (blog-style-three without this class) is untouched.
 *
 * Every selector repeats .blog-style-one.blog-style-three to outrank the
 * (0,3,0)-(0,4,0) rules being corrected, including the ones inside
 * responsive.css media queries.
 */

/* 1. blog-style-three sets overflow:visible, which was for a card with no
 *    hover arrow. The blog-style-one arrow rests at right:-110px and slides
 *    to right:-10px on hover — without clipping it floats outside the card
 *    over the neighbouring column. Restore the blog-style-one behaviour.
 * 3. Drop margin-right:20px so card edges line up with the g-4 gutter. */
.blog-style-one.blog-style-three.blog-grid-two-col .blog-post {
    overflow: hidden;
    margin-right: 0;
}

/* 2. 40px/50px was sized for the full-width card; back to the
 *    blog-style-one card size. Targets .blog-data h2 to also outrank
 *    responsive.css's .blog-style-one .blog-post .blog-data h2.
 *
 *    Because that selector outranks every responsive.css rule for this
 *    headline, the template's own breakpoint ladder no longer reaches it
 *    and has to be restated here. Ordered widest-first so each narrower
 *    query wins on equal specificity. */
.blog-style-one.blog-style-three.blog-grid-two-col .blog-post .blog-data h2 {
    font-size: 28px;
    line-height: 38px;
}

@media (max-width: 1200px) {
    .blog-style-one.blog-style-three.blog-grid-two-col .blog-post .blog-data h2 {
        font-size: 24px;
        line-height: 32px;
    }
}

@media (max-width: 480px) {
    .blog-style-one.blog-style-three.blog-grid-two-col .blog-post .blog-data h2 {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 375px) {
    .blog-style-one.blog-style-three.blog-grid-two-col .blog-post .blog-data h2 {
        font-size: 18px;
        line-height: 26px;
    }
}

/* 4. 35px/30px padding costs 60px of a 416px card; back to blog-style-one. */
.blog-style-one.blog-style-three.blog-grid-two-col .blog-data {
    padding: 20px 25px;
}

/* 5. blog-style-three removes the card hover shadow at equal specificity to
 *    the blog-style-one rule it follows. Put it back. */
.blog-style-one.blog-style-three.blog-grid-two-col .blog-post:hover {
    box-shadow: 10px 10px 15px 0px rgb(0 0 0 / 8%);
    -webkit-box-shadow: 10px 10px 15px 0px rgb(0 0 0 / 8%);
    -moz-box-shadow: 10px 10px 15px 0px rgb(0 0 0 / 8%);
}

/* 6. Pagination sits in its own full-width container below both columns, so
 *    the blog-style-three left-align reads as misaligned here. Re-centre. */
.blog-style-one.blog-style-three.blog-grid-two-col .gym-pagination .pagination {
    justify-content: center;
}

/*
 * Service card watermark: inline <svg class="theme-shaps"> replaced by a PNG
 * <img class="theme-shaps"> (brand mark). The template rule at style.css:3040
 * sizes it with width:90px + height:auto + fill:#fff — the fill is inert on a
 * raster <img> and is left in place. Restated here so the PNG keeps its
 * aspect ratio regardless of any later img sizing rule.
 */
.service-two-box .theme-shaps {
    height: auto;
    object-fit: contain;
}