/* Additions for the WordPress-driven parts. Uses the design tokens from site.css. */

/* Filter bar */
.wp-filters { display: grid; gap: 1.75rem; }
.wp-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wp-filter-label { min-width: 92px; margin-right: .5rem; color: var(--muted-foreground); }
.wp-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 36px; padding: 0 1rem;
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.wp-chip:hover { border-color: var(--gold); color: var(--gold); }
.wp-chip[aria-pressed="true"], .wp-chip[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.wp-chip small { font-size: 10px; opacity: .6; letter-spacing: 0; }
.wp-chip--tag { min-height: 30px; padding: 0 .75rem; text-transform: none; letter-spacing: .02em; font-size: 12px; }
.wp-chip--tag::before { content: "#"; opacity: .45; }
.wp-chip:focus-visible, .wp-more:focus-visible { outline: 1px solid var(--ring); outline-offset: 2px; }
.wp-tags-toggle { background: none; border: 0; padding: 0; font-size: 11px; color: var(--muted-foreground); text-decoration: underline; cursor: pointer; }
.wp-tags-collapsed .wp-chip--tag:nth-of-type(n+15) { display: none; }

.wp-active { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; margin-top: 2.5rem; }
.wp-active h2 { margin: 0; }
.wp-count { font-size: 12px; color: var(--muted-foreground); }
.wp-clear { font-size: 12px; color: var(--gold); text-decoration: underline; }

/* Load more */
.wp-more {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 44px; padding: 0 1.75rem; border: 1px solid var(--foreground); background: transparent;
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.wp-more:hover { background: var(--primary); color: var(--primary-foreground); }
.wp-more[disabled] { opacity: .5; cursor: progress; }

/* Term chips inside articles / heroes */
.wp-terms { display: flex; flex-wrap: wrap; gap: .5rem; }
.wp-terms a { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 1px; opacity: .85; }
.wp-terms a:hover { opacity: 1; }
.wp-terms--tags a { text-transform: none; letter-spacing: .02em; border: 1px solid var(--border); padding: .35rem .75rem; opacity: 1; }
.wp-terms--tags a::before { content: "#"; opacity: .45; }
.wp-terms--tags a:hover { border-color: var(--gold); color: var(--gold); }

/* Loading skeletons */
.wp-skel { position: relative; overflow: hidden; background: var(--secondary); }
.wp-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: wp-shimmer 1.4s infinite;
}
.wp-skel-line { height: 14px; margin-top: 12px; }
.wp-skel-line.w60 { width: 60%; } .wp-skel-line.w80 { width: 80%; } .wp-skel-line.w40 { width: 40%; }
.wp-skel-title { display: block; height: .9em; width: min(560px, 90%); background: rgba(255,255,255,.14); }
@keyframes wp-shimmer { to { transform: translateX(100%); } }

/* Empty / error notes */
.wp-note { padding: 3rem 0; font-size: 14px; color: var(--muted-foreground); }
.wp-note a { color: var(--foreground); text-decoration: underline; }

/* Editorial content coming from WordPress */
.editorial-content img { max-width: 100%; height: auto; margin: 1.5rem 0; }
.editorial-content iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; width: 100%; }
.editorial-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.editorial-content td, .editorial-content th { border: 1px solid var(--border); padding: .5rem .75rem; }
.wp-single-col { max-width: 780px; }

/* Smooth appearance of rendered items */
.wp-fade { animation: wp-fade .45s ease both; }
@keyframes wp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hidden extended sections (toggled by JS) */
[data-wp-when][hidden] { display: none !important; }

/* Lightbox for "Enlarge" image buttons */
.wp-lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 2rem; background: rgba(20, 16, 12, .88); cursor: zoom-out; animation: wp-fade .25s ease both;
}
.wp-lightbox img { max-width: min(1100px, 100%); max-height: 88vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.wp-lightbox button {
  position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border: 0; background: transparent;
  color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .wp-skel::after, .wp-fade, .wp-lightbox { animation: none; }
}

/* Empty cells that complete the last row of the bordered procedure grid */
.wp-fill { display: none; background: var(--background); }
@media (min-width: 768px) and (max-width: 1023.98px) { .wp-fill-md { display: block; } }
@media (min-width: 1024px) { .wp-fill-lg { display: block; } }

/* Keep the expertise links clear of the arrow icon on the home cards */
div[data-wp-group] { padding-right: 2.25rem; }

/* Phones: filter chips scroll sideways instead of stacking */
@media (max-width: 767.98px) {
  .wp-filters { gap: 1rem; }
  .wp-filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wp-filter-row::-webkit-scrollbar { display: none; }
  .wp-chip, .wp-filter-label { flex-shrink: 0; }
  .wp-filter-label { position: sticky; left: 0; z-index: 1; min-width: 0; margin: 0 .25rem 0 0; padding-right: .5rem; background: var(--background); align-self: stretch; display: flex; align-items: center; }
  .wp-tags-collapsed .wp-chip--tag:nth-of-type(n+15) { display: inline-flex; }
  .wp-tags-toggle { display: none; }
}

/* Numbered pagination (same URLs as WordPress: /page/2/) */
.wp-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 4rem; }
.wp-pager:empty { display: none; }
.wp-pager-nums { display: flex; align-items: center; gap: .35rem; }
.wp-pager-num { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .5rem; border: 1px solid var(--border); font-size: 13px; transition: border-color .2s, color .2s; }
.wp-pager-num:hover { border-color: var(--gold); color: var(--gold); }
.wp-pager-num[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.wp-pager-gap { padding: 0 .25rem; color: var(--muted-foreground); }
.wp-pager-step { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.wp-pager-step:hover { color: var(--gold); }