/* ============================================================
   PHOTO SIDEBAR NAV (Sidebar Topics)
   POLITICO / Newsroom style — tight, flat, hierarchical
   Scope: ONLY the Sidebar Topics menu in the sidebar widget area

   Required menu item classes:
     - sidebar-nav-menu-header  (Current Events, Series)
     - sidebar-nav-travel       (Travel toggle)
     - sidebar-nav-collapsed    (added/removed by JS)

   Container (WP adds): .menu-sidebar-topics-container
   Menu UL id (WP adds): #menu-sidebar-topics
   ============================================================ */

:root{
  --sb-accent: var(--ast-global-color-0);
  --sb-rule: rgba(0,0,0,.12);
  --sb-soft: rgba(0,0,0,.03);
  --sb-text: rgba(0,0,0,.88);
  --sb-muted: rgba(0,0,0,.64);
  --sb-bullet: rgba(0,0,0,.22);
}

/* ------------------------------------------------------------
   Hard-scope: only this menu
------------------------------------------------------------ */
#secondary .menu-sidebar-topics-container,
#secondary .menu-sidebar-topics-container ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Astra default adds big spacing in sidebar lists; kill it here only */
#secondary .menu-sidebar-topics-container li{
  margin: 0 !important;
  border: 0 !important;
}

/* Optional: subtle top padding so it doesn't feel glued */
#secondary .menu-sidebar-topics-container{
  padding-top: .1rem !important;
}

/* ------------------------------------------------------------
   TOP LEVEL section blocks
   Only header items + travel toggle get dividers.
------------------------------------------------------------ */
#secondary .menu-sidebar-topics-container > ul > li.sidebar-nav-menu-header,
#secondary .menu-sidebar-topics-container > ul > li.sidebar-nav-travel{
  padding: .45rem 0 .55rem !important;
  border-bottom: 1px solid var(--sb-rule) !important;
}

/* If last section is last element */
#secondary .menu-sidebar-topics-container > ul > li.sidebar-nav-menu-header:last-child,
#secondary .menu-sidebar-topics-container > ul > li.sidebar-nav-travel:last-child{
  border-bottom: 0 !important;
}

/* ------------------------------------------------------------
   Section header (kicker)
------------------------------------------------------------ */
#secondary .menu-sidebar-topics-container .sidebar-nav-menu-header > a{
  font-size: .72rem !important;          /* bumped slightly for desktop */
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  color: rgba(0,0,0,.72) !important;
  text-decoration: none !important;

  pointer-events: none !important;
  cursor: default !important;

  display: inline-block !important;
  position: relative !important;

  padding: 0 0 .20rem !important;
  margin: 0 !important;
}

/* Nicer underline: longer + tapered */
#secondary .menu-sidebar-topics-container .sidebar-nav-menu-header > a::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 34px !important;               /* extended */
  height: 2px !important;

  background: linear-gradient(
    90deg,
    var(--sb-accent) 0%,
    var(--sb-accent) 70%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* ------------------------------------------------------------
   Travel toggle header
------------------------------------------------------------ */
#secondary .menu-sidebar-topics-container .sidebar-nav-travel > a{
  font-size: .72rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  color: rgba(0,0,0,.72) !important;
  text-decoration: none !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;

  cursor: pointer !important;
  position: relative !important;

  padding: 0 0 .20rem !important;
  margin: 0 !important;
}

/* Same nicer underline */
#secondary .menu-sidebar-topics-container .sidebar-nav-travel > a::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 34px !important;               /* extended */
  height: 2px !important;

  background: linear-gradient(
    90deg,
    var(--sb-accent) 0%,
    var(--sb-accent) 70%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* Caret */
#secondary .menu-sidebar-topics-container .sidebar-nav-travel > a::before{
  content: "▾" !important;
  font-size: .82rem !important;
  opacity: .78 !important;
  transform: translateY(-1px) !important;
}

#secondary .menu-sidebar-topics-container .sidebar-nav-travel.sidebar-nav-collapsed > a::before{
  content: "▸" !important;
}

#secondary .menu-sidebar-topics-container .sidebar-nav-travel.sidebar-nav-collapsed > ul{
  display: none !important;
}

/* ------------------------------------------------------------
   Submenus: tighter and flat
------------------------------------------------------------ */
#secondary .menu-sidebar-topics-container ul ul{
  margin-top: .12rem !important;
}

/* Base submenu links */
#secondary .menu-sidebar-topics-container ul ul a{
  display: block !important;

  /* tight, not pill-shaped */
  padding: .12rem 0 .12rem .95rem !important;
  border-radius: 0 !important;

  font-size: .92rem !important;          /* good desktop size */
  line-height: 1.12 !important;

  color: var(--sb-text) !important;
  text-decoration: none !important;

  transition: background .12s ease, color .12s ease !important;
  position: relative !important;
}

/* “tick” marker instead of dot */
#secondary .menu-sidebar-topics-container ul ul a::before{
  content: "" !important;
  position: absolute !important;
  left: .35rem !important;

  /* stable placement for tight line-height */
  top: .62rem !important;

  width: 6px !important;
  height: 1px !important;
  background: var(--sb-bullet) !important;
}

/* Hover: light wash + accent text */
#secondary .menu-sidebar-topics-container ul ul a:hover{
  background: var(--sb-soft) !important;
  color: var(--sb-accent) !important;
}
#secondary .menu-sidebar-topics-container ul ul a:hover::before{
  background: var(--sb-accent) !important;
}

/* Current: no block highlight, just weight + accent */
#secondary .menu-sidebar-topics-container .current-menu-item > a,
#secondary .menu-sidebar-topics-container .current_page_item > a{
  background: transparent !important;
  color: var(--sb-accent) !important;
  font-weight: 700 !important;
}
#secondary .menu-sidebar-topics-container .current-menu-item > a::before,
#secondary .menu-sidebar-topics-container .current_page_item > a::before{
  background: var(--sb-accent) !important;
}

/* ------------------------------------------------------------
   Multi-level indentation
------------------------------------------------------------ */
#secondary .menu-sidebar-topics-container ul ul ul a{
  padding-left: 1.45rem !important;
  font-size: .89rem !important;
  color: rgba(0,0,0,.82) !important;
}
#secondary .menu-sidebar-topics-container ul ul ul a::before{
  left: .85rem !important;
  width: 5px !important;
  height: 1px !important;
  background: rgba(0,0,0,.18) !important;
}

#secondary .menu-sidebar-topics-container ul ul ul ul a{
  padding-left: 1.95rem !important;
  font-size: .88rem !important;
  color: rgba(0,0,0,.78) !important;
}
#secondary .menu-sidebar-topics-container ul ul ul ul a::before{
  left: 1.35rem !important;
  width: 5px !important;
  height: 1px !important;
  background: rgba(0,0,0,.16) !important;
}

/* ------------------------------------------------------------
   Travel mini subheaders (regions)
   Level-2 items under Travel only
------------------------------------------------------------ */
#secondary .menu-sidebar-topics-container .sidebar-nav-travel > ul > li{
  margin-top: .22rem !important;
}

/* Region label */
#secondary .menu-sidebar-topics-container .sidebar-nav-travel > ul > li > a{
  display: block !important;

  padding: .18rem 0 .14rem !important;
  margin: .08rem 0 .05rem !important;

  font-size: .66rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  color: rgba(0,0,0,.56) !important;
  background: transparent !important;

  border-top: 1px solid rgba(0,0,0,.08) !important;  /* subtle separator */
}

/* Region labels should not have ticks */
#secondary .menu-sidebar-topics-container .sidebar-nav-travel > ul > li > a::before{
  display: none !important;
}

#secondary .menu-sidebar-topics-container .sidebar-nav-travel > ul > li > a:hover{
  background: transparent !important;
  color: var(--sb-accent) !important;
}

/* Tighten children under each region */
#secondary .menu-sidebar-topics-container .sidebar-nav-travel > ul > li > ul{
  margin: .05rem 0 .16rem !important;
}