/* ==========================================================================
   Resources hub — Milestone 3 CSS follow-ups
   Loaded after custom-styles.css. Targeted overrides only; the original
   rules are left untouched.
   ========================================================================== */

/* ---- #4  Filter bar: show ONLY the pills on desktop ---------------------- */
/* custom-styles.css sets `.dropdown.mobile { display:inline-block }` in the
   base layer, so the mobile "Post" dropdown rendered next to the desktop
   pills. The pills are hidden below 992px, so hide the mobile dropdown above
   it — one control per breakpoint. */
@media (min-width: 992px) {
    #insightsfilter .dropdown.mobile { display: none !important; }
}

/* ---- #2 + #3  Header "Resources" dropdown -------------------------------- */
#main-nav .navbar-nav > li.menu-item-has-children { position: relative; }

/* Open flush to the nav bar (removes the hover gap that dropped the menu),
   drop the leftover amber (#FFC93C) debug border, and size to content instead
   of the fixed 300px box. */
#main-nav .navbar-nav > li:hover > ul.sub-menu {
    top: 100%;
    left: 0;
    width: auto;
    min-width: 180px;
    padding: 14px 22px;
    border: none;
    border-radius: 0 0 12px 12px;
}
#main-nav .navbar-nav > li ul.sub-menu > li { width: 100%; margin-bottom: 2px; }
#main-nav .navbar-nav > li ul.sub-menu > li a {
    display: block;
    width: auto;
    white-space: nowrap;
    font-size: 15px;
    line-height: 2;
    font-weight: 500;
    text-transform: none;
    text-decoration: none;
    color: #242935;
}
#main-nav .navbar-nav > li ul.sub-menu > li a:hover { color: #FF6B55; }

/* ---- #5  Footer "Resources" dropdown ------------------------------------- */
/* The footer <ul class="footer_nav navbar-nav"> inherited the header's absolute
   light dropdown, so it rendered as an off-page white box on the dark footer.
   Open it UPWARD, dark-themed, flush to the link. */
.footer_nav > li.menu-item-has-children { position: relative; }
.footer_nav > li:hover > ul.sub-menu {
    top: auto;
    bottom: 100%;
    left: 0;
    width: auto;
    min-width: 180px;
    padding: 14px 20px;
    background-color: #242935;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px 12px 0 0;
    filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.25));
}
.footer_nav > li ul.sub-menu > li { width: 100%; margin-bottom: 2px; }
.footer_nav > li ul.sub-menu > li a {
    display: block;
    width: auto;
    white-space: nowrap;
    font-size: 15px;
    line-height: 2;
    color: #ffffff;
    text-decoration: none;
}
.footer_nav > li ul.sub-menu > li a:hover { color: #FF6B55; }

/* ---- #4  Blog listing: filter bar + 3-column card grid ------------------ */
/* Rebuilt to the original design: eyebrow + title, a tidy filter row, and a
   grid of vertical cards (image on top, eyebrow, title, excerpt, Learn More). */

/* Tighten the header: the shared .textonly block uses 80px top/bottom margins,
   leaving too much blank space above the title and before the filter bar. */
.category-page .textonly { margin: 32px 0 26px; }

/* Eyebrow above the page title ("RESOURCE CENTER"). */
.category-page .resource-eyebrow,
.latest-resources .resource-eyebrow {
    display: block;
    color: #FF6B55;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Filter pills: one tidy row with even spacing. */
#insightsfilter ul.nav.button-group.desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    margin: 0 0 6px;
    padding: 0;
    align-items: center;
}
#insightsfilter ul.nav.button-group.desktop li { margin: 0 !important; }
#insightsfilter ul.nav.button-group.desktop a { min-width: 0; padding: 6px 24px; line-height: 30px; }

/* Search sits inline with the pills (right-aligned) on desktop. */
#insightsfilter .filters .row { align-items: center; }
#insightsfilter .post-search { display: flex; justify-content: flex-end; }
@media (max-width: 991px) {
    #insightsfilter .post-search { justify-content: flex-start; margin-top: 12px; }
}
/* The search input already carries the magnifier (search-outline-1.png); the
   append button just needs to be an invisible click target — no second icon. */

/* Card grid — native CSS Grid: real gaps, equal-height rows (so the Learn More
   CTAs align), and correct reflow when web-fonts load. 3 cols -> 2 -> 1. */
.category-page .list,
.resource-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}
@media (max-width: 991px) { .category-page .list, .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .category-page .list, .resource-grid { grid-template-columns: 1fr; } }
.resource-card { min-width: 0; }
.category-page .resource-card.is-hidden { display: none; }

/* The card itself — full height so every card in a row matches, with the
   button pinned to the bottom. */
.resource-card .blog-tile {
    max-width: none;
    height: 100%;
    background-color: #fff;
    border: 1px solid #EAE3D8;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.resource-card .blog-tile .tile-image { display: block; }
.resource-card .blog-tile .inner {
    width: 100%;
    padding-top: 62%;                 /* image aspect ratio */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.resource-card .blog-tile .tile-content {
    height: auto;
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.resource-card .blog-tile .eyebrow { margin-bottom: 10px; }
.resource-card .blog-tile .tile-title {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: #242935;
    text-decoration: none;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.resource-card .blog-tile .tile-title:hover { color: #5E3FE0; }
.resource-card .blog-tile .tile-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: #5b5b5b;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.resource-card .blog-tile .button {
    align-self: flex-start;
    margin-top: auto;                 /* pin Learn More to the card bottom */
    display: inline-block;
    background-color: #242935;
    background-image: none;           /* drop the generic .button arrow bg */
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    padding: 11px 22px;
    border-radius: 4px;
    text-decoration: none;
}
.resource-card .blog-tile .button:hover { background-color: #FF6B55; color: #fff; }

.category-page .results-count { margin-top: 20px; font-weight: 600; }

/* ---- Single post: make the tag pills work as links to their archives ----- */
/* The theme's chip styling targets span.tags; tags are now <a> elements, so
   replicate the chip look here (same values as custom-styles.css span.tags). */
.blog-detail-header a.tags {
    background-color: #EAE3D8;
    margin-left: 15px;
    font-size: 13px;
    line-height: 18px;
    border-radius: 3px;
    padding: 3px 9px;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.blog-detail-header a.tags:hover { color: #FF6B55; }

/* ---- [latest_resources] — homepage "Latest from the blog" module ---------- */
.latest-resources { padding: 60px 0; }
.latest-resources-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.latest-resources-head h4 { margin: 0; }
/* View All inherits the theme's .button treatment (text + coral circle arrow),
   matching the "Learn More" CTAs in the sections above. */
.latest-resources-head .view-all {
    text-decoration: none;
    white-space: nowrap;
    align-self: flex-end;
    margin-bottom: 4px;
}