/*
Theme Name: Astra Child - QA Automation Labs
Template: astra
Description: Astra child theme for qaautomationlabs.com. Holds the Technum content-*.php template parts (used by the technum-plugin listing widgets) and design polish CSS.
Version: 1.0
*/

/* Astra's "wide" featured-image layout bleeds 120px past each viewport edge via
   negative margins; body has overflow-x:hidden but html does not, so the whole
   page scrolls horizontally and the image gets clipped on both sides. */
html {
    overflow-x: hidden;
}

/* Header search (Add Search To Menu plugin): the boxed header container
   (100px side margins) leaves the nav row too narrow to fit the search box
   after the last menu item, so it wraps to its own line. Widen just the
   header's container (not the page-content container) so the search box
   sits inline on the right, after Contacts, like it does on the live site. */
#masthead .ast-container {
    max-width: 1400px;
}
.astm-search-menu {
    margin-left: 10px;
}
.astm-search-menu .is-search-form {
    max-width: 95px;
}
.astm-search-menu input.is-search-input {
    width: 100%;
    max-width: 95px;
    padding: 6px 8px;
    font-size: 12px;
    box-sizing: border-box;
}
@media (min-width: 1367px) {
    .astm-search-menu {
        margin-left: 14px;
    }
    .astm-search-menu .is-search-form {
        max-width: 170px;
    }
    .astm-search-menu input.is-search-input {
        max-width: 170px;
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* ---- Technum widget polish under Astra ---- */

/* "Explore More" style buttons: theme.css relies on Technum's dynamic CSS for
   sizing/colors; restore a solid, readable button. */
.technum-button,
a.technum-button {
    display: inline-block;
    padding: 14px 32px;
    background-color: #00bbee;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px;
    text-decoration: none;
    line-height: 1.4;
    min-width: max-content;
    transition: background-color .2s ease;
}
/* Some slides (e.g. the hero "Explore More") define their own hover text
   color via Elementor's per-slide dynamic CSS (e.g. dark #1F2531 to stay
   readable against that slide's sliding gradient background). Forcing white
   here with !important used to beat that rule and make hover text vanish
   over the lighter half of the gradient — so this only sets a fallback for
   buttons that don't define their own hover color, and never overrides via
   !important. */
.technum-button:hover,
a.technum-button:hover {
    background-color: #0099c4;
}

/* Hero slider text: was styled white by Technum's dynamic CSS */
.slide-content-column .technum-heading-content,
.slide-content-column .technum-heading,
.slide-content-column h1,
.slide-content-column h2,
.slide-content-column h3,
.slide-content-column p {
    color: #ffffff;
}

/* Section-title watermark duplicate: Technum prints the title twice (second
   copy is a decorative watermark). Without its dynamic CSS both render solid;
   soften the watermark copy. */
.technum-section-title .title-watermark,
.section-title .watermark {
    opacity: 0.07;
}

/* ---- Listing grids (blog, courses, events, case studies) ----
   Technum lays these out with isotope (absolute positioning) which mis-measures
   under Astra and overlaps cards. Replace with a stable CSS grid. */
.archive-listing-wrapper {
    display: grid !important;
    gap: 28px;
    height: auto !important;
    position: static !important;
    grid-template-columns: repeat(3, 1fr);
}
.archive-listing-wrapper.columns-2 { grid-template-columns: repeat(2, 1fr); }
.archive-listing-wrapper.columns-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
    .archive-listing-wrapper,
    .archive-listing-wrapper.columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .archive-listing-wrapper,
    .archive-listing-wrapper.columns-2,
    .archive-listing-wrapper.columns-4 { grid-template-columns: 1fr; }
}
.archive-listing-wrapper .grid-item {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
}

/* ---- Card polish ---- */
.blog-item,
.grid-item .blog-item {
    background: #ffffff;
    border-radius: 8px;
    padding: 18px;
    height: 100%;
    box-shadow: 0 2px 14px rgba(31, 37, 49, 0.07);
}
.grid-item img:not(.emoji) {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 14px;
    display: block;
}
img.emoji {
    width: 1em !important;
    height: 1em !important;
    display: inline-block !important;
    margin: 0 !important;
}
.grid-item a,
.blog-item a,
.blog-item .post-title a {
    text-decoration: none !important;
}

/* Featured image: bleed to card edges cleanly instead of the theme's
   negative-margin overflow */
.blog-item .post-media-wrapper {
    margin: -18px -18px 14px !important;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}
.blog-item .post-media-wrapper img {
    margin-bottom: 0;
    border-radius: 0;
}
.post-categories .post-category-item {
    display: inline-block;
    background: #e6f7fc;
    color: #0087ad;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 12px;
    margin: 0 6px 6px 0;
}
.post-meta-item-date a {
    color: #64748b;
    font-size: 13px;
}
.blog-item .post-title {
    margin: 8px 0 10px;
    line-height: 1.45;
}
.blog-item .post-title a {
    color: #1f2531;
}
.blog-item .post-title a:hover {
    color: #00bbee;
}
.blog-item .post-content {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 12px;
}
/* Technum's theme.css sets font-size:0 on .grid-listing to collapse
   inline-block whitespace gaps; this button's label uses an em-based
   font-size (0.875em), so it inherits the zero and becomes invisible. */
.post-more-button a {
    color: #00a5d2;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.post-more-button a span {
    font-size: 14px;
}
.post-more-button svg {
    width: 9px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Pagination prev/next arrows rely on a 'fontello' icon-font glyph that
   isn't loaded, leaving a solid colored box with no visible icon. Draw a
   plain CSS chevron instead so the buttons are usable and not blank tiles. */
.page-numbers.prev .button-icon,
.page-numbers.next .button-icon {
    position: relative;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.page-numbers.prev .button-icon:before,
.page-numbers.next .button-icon:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}
.page-numbers.next .button-icon:before {
    transform: translate(-65%, -50%) rotate(-45deg);
}
.page-numbers.prev .button-icon:before {
    transform: translate(-35%, -50%) rotate(135deg);
}