.elementor-2634 .elementor-element.elementor-element-0d982a3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2634 .elementor-element.elementor-element-e50188e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2634 .elementor-element.elementor-element-e50188e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2634 .elementor-element.elementor-element-87dba98{width:100%;max-width:100%;}.elementor-2634 .elementor-element.elementor-element-4c919f4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2634 .elementor-element.elementor-element-c711a20{width:100%;max-width:100%;}@media(min-width:768px){.elementor-2634 .elementor-element.elementor-element-0d982a3{--width:100%;}.elementor-2634 .elementor-element.elementor-element-e50188e{--width:28%;}.elementor-2634 .elementor-element.elementor-element-4c919f4{--width:72%;}}/* Start custom CSS *//************************************************************
 LONG & CO. – Resources Page (Dark Theme)
 Pure arrow carets (no box, no hover background)
************************************************************/

/* ================================
   0) DESIGN TOKENS
   ================================ */
:root{
  --lc-navy:      #163767;
  --lc-navy-700:  #0f2a50;
  --lc-navy-300:  #2a4f86;

  --bg-page:      #0B0E13;
  --bg-panel:     #11161f;
  --bg-panel-2:   #0F1216;
  --bg-soft:      #0e1523;

  --text-strong:  #ffffff;
  --text-body:    #d6deea;
  --text-muted:   #a9b6c8;
  --text-link:    #cfe0ff;

  --border-soft:  #223047;
  --shadow-1:     0 6px 14px rgba(0,0,0,.25);

  --radius-md:    8px;
  --radius-sm:    4px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
}

/* Page base */
body, .elementor, #content, .site, .elementor-section{
  background: var(--bg-page);
  color: var(--text-body);
}
a { color: var(--text-link); }
a:hover { color: #fff; }

/* =========================================================
   1) LEFT COLUMN – FILTER PANELS
   ========================================================= */
.xs-filters{ position: sticky; top: 100px; }

.xs-filter-group{
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.xs-filter-title{
  background: var(--lc-navy);
  color: var(--text-strong);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.xs-filter-item{
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-body);
  text-decoration: none;
  border-top: 1px solid var(--border-soft);
  transition: background .15s ease, color .15s ease;
}
.xs-filter-item:hover{ background: rgba(255,255,255,.06); color: var(--text-strong); }
.xs-filter-item.is-active{
  background: rgba(42,79,134,.35);
  color: #fff;
  border-left: 3px solid var(--lc-navy);
  padding-left: 11px;
}
.xs-filter-item[data-term=""]{ font-style: italic; opacity:.9; }

/* ---- Collapsible category tree ---- */
.xs-tree { margin: 0; padding: 0; list-style: none; }
.xs-node { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.xs-node + .xs-node { border-top: 1px solid var(--border-soft); }

/* PURE arrow caret – no box, no hover background */
.xs-caret,
.xs-caret-placeholder {
  background: none !important;
  border: none !important;
  padding: 0;
  margin: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.xs-caret::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid var(--text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease, border-color .15s ease;
}
.xs-node.is-open > .xs-caret::before {
  transform: rotate(90deg);
  border-left-color: var(--text-strong);
}
.xs-caret:hover,
.xs-caret:focus {
  background: none !important;
  outline: none !important;
}

/* children styling */
.xs-node > .xs-filter-item{ border-top: 0; padding: 10px 14px; }
.xs-children{
  grid-column: 1 / -1;
  padding-left: 14px;
  margin-left: 14px;
  border-left: 1px dashed var(--border-soft);
}
.xs-children .xs-node > .xs-filter-item{ font-size: 13.5px; padding: 9px 12px; }
.xs-children .xs-caret,
.xs-children .xs-caret-placeholder{ height: 14px; }

/* =================================================
   2) RIGHT COLUMN – GRID + CARDS
   ================================================= */
.xs-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-5);
}
@media (max-width: 1024px){
  .xs-cards{ grid-template-columns: 1fr; }
}

.xs-card{
  background: var(--bg-panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.xs-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  border-color: var(--lc-navy-300);
}

/* image + badge */
.xs-media{
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-md); background: var(--bg-soft);
}
.xs-media img{ width: 100%; height: auto; display: block; }
.xs-badge{
  position: absolute; left: 10px; bottom: 10px;
  background: var(--lc-navy); color: #fff;
  font-weight: 600; font-size: 11px; padding: 5px 8px;
  border-radius: var(--radius-sm); box-shadow: 0 4px 10px rgba(0,0,0,.2);
  white-space: nowrap;
}

/* title + meta + excerpt */
.xs-card-title{
  margin: var(--space-3) 0 var(--space-2);
  font-size: 19px; line-height: 1.3; color: var(--text-strong);
}
.xs-card-title a{ color: inherit; text-decoration: none; }
.xs-card-title a:hover{ text-decoration: underline; }

.xs-meta{
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 13px; margin-bottom: 8px;
}
.xs-meta a{ color: var(--text-muted); text-decoration: none; }
.xs-meta a:hover{ color: var(--text-body); text-decoration: underline; }
.xs-dot{ opacity: .7; }

.xs-card-excerpt{ color: var(--text-body); font-size: 14px; line-height: 1.5; }

/* loading fade */
#resources-grid.is-loading{ opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* --- Guard the grid from parent stretched links --- */
#resources-grid { position: relative; z-index: 1; }

/* make sure the real post links win the click */
#resources-grid .xs-card a {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

/* kill any full-section anchors sitting above the grid */
#resources-grid .e-con > a[href],
#resources-grid .elementor-section > a[href]{
  pointer-events: none !important;
}

/* Make the left filter column sticky, contained to its section */
.xs-filters{
  position: sticky;
  top: 110px;          /* header height offset — tweak (e.g., 96–140) */
  align-self: start;   /* prevents stretching in flex/grid parents */
  z-index: 3;          /* above content, below the header */
}

/* If you're logged in (WP admin bar adds 32px) */
body.admin-bar .xs-filters{
  top: 142px;          /* 110 + 32 */
}

/* Optional: only stick on desktop/tablet */
@media (max-width: 767px){
  .xs-filters{ position: static; }  /* no sticky on phones */
}

/* Keep header above everything */
header#masthead{ position: relative; z-index: 9999; }/* End custom CSS */