/*
 * Resources page — v2 polish layer
 * ---------------------------------
 * Loaded from glocoach-resources.php and its /de /es /ms /zh-hans /zh-hant
 * copies. It re-grounds the carried-over listing on the v2 tokens without
 * editing its markup. The listing re-links owl/style/aos/new_style inside the
 * body, so load order alone would not win — every rule here is scoped under
 * #legacy-middle (the listing's wrapper) and takes those sheets on specificity.
 *
 * It covers what the retired WordPress theme used to: the breadcrumb had no
 * stylesheet left at all, resources_page_css_js/style.css still sets
 * `h1,h2,h3 { font-family:"Alte Haas Grotesk" }` (a face nothing loads, so the
 * hero fell back to serif), and the empty #container block left ~190px of blank
 * white between the breadcrumb and This Month's Pick.
 */

/* ═══ 1. FONT — style.css's global h1/h2/h3 + p/li/label families leak into the
   v2 chrome, which is Poppins throughout. Reclaim the parts v2 owns. ═══ */
.site-nav, .site-nav *,
.hero, .hero *,
.site-footer, .site-footer * {
  font-family: 'Poppins', sans-serif;
}

.hero h1 { letter-spacing: -0.015em; }

/* ═══ 2. BREADCRUMB ═══
   Full-bleed band, contained rail, v2 ink. Was unstyled: a default-blue link
   flush against the viewport edge in the browser's fallback font. */
#legacy-middle .breadcrumbswrapper {
  background: var(--warm-50);
  border-bottom: 1px solid var(--warm-line);
}
#legacy-middle .breadcrumbscontainer {
  max-width: 1140px;
  margin: 0 auto;
  padding: 13px 60px;
}
#legacy-middle .breadcrumbs {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#legacy-middle .breadcrumbs a,
#legacy-middle .breadcrumbs span {
  font-family: 'Poppins', sans-serif;
}
#legacy-middle .breadcrumbs a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: color .18s ease;
}
#legacy-middle .breadcrumbs a:hover { color: var(--gold); }
#legacy-middle .breadcrumbs .seperator { color: rgba(0, 59, 92, 0.32); }
#legacy-middle .breadcrumbs .current-item { color: var(--text-light); }
/* decorative rules the old theme drew under the trail — nothing styles them now */
#legacy-middle .breadcrumbswrapper .borderbox { display: none; }

@media (max-width: 720px) {
  #legacy-middle .breadcrumbscontainer { padding: 11px 20px; }
}

/* ═══ 3. THE EMPTY CONTENT BLOCK ═══
   #container.normalpage holds only clearers and an empty .contentbox — all of
   its real content went with the WordPress loop. Left in the markup for the
   page's structure, but it must not paint ~190px of blank white. */
#legacy-middle #container.normalpage > .contentwrapper { display: none; }

/* ═══ 4. THIS MONTH'S PICK ═══ */
/* the card-chrome rule catches .why_box_wrap and the .clearer sibling too, so
   the card was drawn inside a second box with a stray bar under it */
#legacy-middle .why_boxes_container > .why_box_wrap,
#legacy-middle .why_boxes_container > .clearer {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#legacy-middle .why_boxes_container > .clearer { display: none; }
#legacy-middle .outerparallaxbanner.why_boxes .blockcontent h1 {
  font-size: clamp(30px, 3.6vw, 40px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
/* the markup centres the card heading inline, over left-aligned body copy */
#legacy-middle .why_boxes_container .why_content h2 { text-align: left !important; }
#legacy-middle .why_boxes_container .why_box { padding: 20px; gap: 34px; }

/* ═══ 5. FILTER BAR ═══
   The section carried a hard `height: 300px !important` — roughly 190px of it
   empty, with the cards below overlapping into it. */
#legacy-middle .resource-container .catagory-blog-section {
  height: auto !important;
  padding: 44px 0 0;
}
/* it already sits inside .custom-container, so it needs no rail of its own —
   the max-width + padding it used to add indented it past the card grid */
#legacy-middle .resource-container .catogory-dropdown-section {
  height: auto;
  padding: 0;
  margin: 0 0 40px;
  grid-column-gap: 18px;
  grid-row-gap: 14px;
}
#legacy-middle .resource-container .catogory-dropdown-section .catagory-list,
#legacy-middle .resource-container .catogory-dropdown-section .serch-section { height: 56px; }
#legacy-middle .resource-container .catogory-dropdown-section .dropdown,
#legacy-middle .resource-container .catogory-dropdown-section .search-input {
  border: 1px solid var(--warm-line);
  border-radius: 10px;
  background: var(--white);
  transition: border-color .18s ease, box-shadow .18s ease;
}
#legacy-middle .resource-container .catogory-dropdown-section .dropdown:hover,
#legacy-middle .resource-container .catogory-dropdown-section .search-input:hover {
  border-color: rgba(0, 59, 92, 0.28);
}
#legacy-middle .resource-container .catogory-dropdown-section .search-input {
  padding: 0 52px 0 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: var(--near-black);
}
#legacy-middle .resource-container .catogory-dropdown-section .search-input::placeholder {
  color: #9aa1b0;
}
#legacy-middle .resource-container .catogory-dropdown-section .search-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 59, 92, 0.12);
}
#legacy-middle .resource-container .catogory-dropdown-section .dropdown-trigger {
  padding: 0 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--near-black);
}
#legacy-middle .resource-container .catogory-dropdown-section .dropdown-menu {
  border: 1px solid var(--warm-line);
  border-radius: 10px;
  margin-top: 6px;
  padding: 6px 0;
  box-shadow: 0 16px 44px rgba(0, 30, 48, 0.14);
  max-height: 320px;
  overflow-y: auto;
}
#legacy-middle .resource-container .catogory-dropdown-section .dropdown-menu a {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
  padding: 9px 20px;
}
#legacy-middle .resource-container .catogory-dropdown-section .dropdown-menu a:hover,
#legacy-middle .resource-container .catogory-dropdown-section .dropdown-menu a.selected {
  background: var(--warm-50);
  color: var(--ink);
}
#legacy-middle .resource-container .catogory-dropdown-section .serch-section-submit { opacity: .55; }

@media (max-width: 720px) {
  #legacy-middle .resource-container .catogory-dropdown-section { grid-template-columns: 1fr; }
  #legacy-middle .resource-container .catagory-blog-section { padding-top: 32px; }
}

/* ═══ 6. ARTICLE CARDS ═══ */
/* new_style.css pulls the grid up by 175px to sit inside the filter section's
   300px box; with that box now auto-height the pull has nothing to cancel. */
#legacy-middle .resource-container .cards-section {
  margin-top: 0;
  margin-bottom: 64px;
}
#legacy-middle .card-wrapper { align-items: start; }

/* a missing or slow thumbnail used to leave a stark 240px of white */
#legacy-middle .resource-container .product-card-image {
  background-color: var(--warm-100);
}
#legacy-middle .resource-container .card-content {
  padding: 0 22px 24px;
  display: flex;
  flex-direction: column;
}
/* the markup sizes these two rows with inline `height: 2%` / `14%` against a
   parent with no height — percentages nothing can resolve */
#legacy-middle .resource-container .card-content .card-blog-image { height: auto !important; }
#legacy-middle .resource-container .card-content .card-blog-image:first-child { margin-bottom: 10px; }
#legacy-middle .resource-container .user-link {
  width: 54px;
  height: 54px;
  margin-top: -27px;
  background-color: var(--ink);
  background-position: center;
  background-size: cover;
  border: 3px solid var(--white);
  box-shadow: 0 4px 12px rgba(0, 30, 48, 0.16);
}
/* category — a pill, not loose grey text (the markup inlines `color: black`) */
#legacy-middle .resource-container .blog-text {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(219, 150, 31, 0.12);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold-dark) !important;
}
#legacy-middle .resource-container .card-t-p { padding-top: 12px; }
#legacy-middle .resource-container .card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--ink);
  padding-bottom: 10px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#legacy-middle .resource-container .card-para {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--text-light);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#legacy-middle .resource-container .button-seeMore {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 22px 18px;
}
#legacy-middle .resource-container .product-card:hover .card-content { transform: none; }

/* ── the two in-grid promo cards ──
   Both are colour blocks whose copy is set in white. The v2 card-chrome rule
   painted every grid child white, so they lost their ground and their text was
   pulled back to body ink by the #legacy-middle typography layer. Re-grounded
   here on the v2 palette rather than the old #0222d8 / #FDD013 pair. */
#legacy-middle .card-wrapper > .card-decoration.card-blue {
  background: var(--ink);
  border-color: var(--ink);
}
#legacy-middle .card-wrapper > .card-decoration.card-yellow {
  background: var(--gold);
  border-color: var(--gold);
}
#legacy-middle .card-decoration .cards-decoration-para,
#legacy-middle .card-decoration .spot-para-title,
#legacy-middle .card-decoration .spot-para,
#legacy-middle .card-decoration .sopt-text {
  color: #fff;
  font-family: 'Poppins', sans-serif;
}
#legacy-middle .card-decoration .cards-decoration-para,
#legacy-middle .card-decoration .spot-para-title {
  font-size: 21px;
  line-height: 1.32;
  font-weight: 700;
}
#legacy-middle .card-decoration .spot-para { font-size: 13px; line-height: 1.6; }
/* the eyebrow was boxed at a fixed 147x23px sized for Helvetica — let it size
   to whatever the label is in this locale */
#legacy-middle .card-decoration .sopt-text {
  width: auto;
  height: auto;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-color: rgba(255, 255, 255, 0.65);
}
#legacy-middle .card-decoration .card-decoration-input { border-radius: 6px; }
#legacy-middle .card-decoration .place-input { font-family: 'Poppins', sans-serif; font-size: 14px; }
#legacy-middle .card-decoration .img-link { background-color: var(--gold); }
/* on gold, navy reads as the action colour */
#legacy-middle .card-decoration.card-yellow .button-link {
  background-color: var(--ink);
  border-radius: 6px;
}
#legacy-middle .card-decoration .button-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #fff;
}
#legacy-middle .card-decoration:hover { transform: none; }

/* ═══ 7. LOAD MORE / VIEW VISITS ═══ */
#legacy-middle .load-mpre-section { gap: 14px; padding-bottom: 84px; }
#legacy-middle .resource-container .load-more-btn { color: #fff; }
#legacy-middle .add-article .visit-link,
#legacy-middle .add-article-btn .add-article-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--warm-line);
  border-radius: 8px;
  padding: 12px 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
#legacy-middle .add-article .visit-link:hover,
#legacy-middle .add-article-btn .add-article-link:hover {
  border-color: var(--ink);
  background: var(--warm-50);
}

/* ═══ 8. EMPTY STATE ═══ */
#legacy-middle .no_record {
  text-align: center;
  padding: 56px 0 12px;
  color: var(--text-light);
  font-size: 16px;
}