/*
  Sitemap page (sitemap.php) — scoped redesign.
  Every rule is prefixed with .sitemap-page so nothing here leaks onto the
  other pages that share .other-section-main, .container, etc. (defined in
  assets/css/main.css / responsive.css). The shared hero banner above this
  content is left untouched since it is reused site-wide.

  Concept: a sitemap is a technical map of the site, so the page borrows the
  vocabulary of a directory listing / blueprint schematic instead of a plain
  card grid — monospace URL-path labels under each section title, and
  blueprint-style corner registration marks on each card/panel — rather than
  decorative icons with no connection to what a sitemap actually is.
*/

.sitemap-page{--sm-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;}

.sitemap-page .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------------------------------------------------------------------- */
/* 1) Intro strip — eyebrow + heading on the left, live search on the right */
/* ---------------------------------------------------------------------- */
.sitemap-page .directory-intro{padding:60px 0 40px;background:#fff;}
.sitemap-page .directory-intro-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;border-bottom:1px solid var(--vtc-border-border-1);padding-bottom:36px;}
.sitemap-page .directory-intro-copy{max-width:620px;}
.sitemap-page .dir-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vtc-bg-main-bg-1);margin-bottom:14px;}
.sitemap-page .dir-eyebrow i{display:inline-block;width:26px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--vtc-bg-main-bg-1),var(--vtc-text-pera-text-4));}
.sitemap-page .directory-intro-copy h2{font-family:'Manrope','Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--f-fs-font-fs36);line-height:var(--f-fs-font-fs44);font-weight:var(--f-fw-ex-bold);color:var(--vtc-text-heading-text-1);margin-bottom:14px;}
.sitemap-page .directory-intro-copy p{font-size:var(--f-fs-font-fs17);line-height:1.7;color:var(--vtc-text-pera-text-1);}

.sitemap-page .directory-search{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--vtc-border-border-2);border-radius:10px;padding:6px 8px 6px 18px;min-width:340px;transition:border-color .3s ease, box-shadow .3s ease;}
.sitemap-page .directory-search:focus-within{border-color:var(--vtc-bg-main-bg-1);box-shadow:0 0 0 4px rgba(24,88,202,.12);}
.sitemap-page .search-icon{color:var(--vtc-text-pera-text-1);display:flex;flex-shrink:0;}
.sitemap-page .search-icon svg{width:19px;height:19px;}
.sitemap-page .directory-search input{border:none;outline:none;flex:1;min-width:0;font-size:var(--f-fs-font-fs16);color:var(--vtc-text-heading-text-1);background:transparent;padding:12px 0;}
.sitemap-page .directory-search input::placeholder{color:var(--vtc-text-pera-text-1);}
.sitemap-page .directory-count{flex-shrink:0;font-family:var(--sm-mono);font-size:12px;letter-spacing:.03em;color:var(--vtc-text-pera-text-5);background:var(--vtc-bg-main-bg-6);padding:8px 12px;border-radius:7px;white-space:nowrap;}

/* ---------------------------------------------------------------------- */
/* 2) Directory wrap — faint blueprint dot-grid backdrop                  */
/* ---------------------------------------------------------------------- */
.sitemap-page .directory-wrap{
  padding:50px 0 110px;
  background-color:#F7FAFF;
  background-image:radial-gradient(rgba(24,88,202,.14) 1px, transparent 1.6px);
  background-size:24px 24px;
}

.sitemap-page .directory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}

/* ---------------------------------------------------------------------- */
/* 3) Directory card — corner registration marks are the signature detail */
/* ---------------------------------------------------------------------- */
.sitemap-page .dir-card{
  position:relative;
  background:#fff;
  border:1px solid var(--vtc-border-border-1);
  border-radius:12px;
  padding:30px 28px 22px;
  box-shadow:0 1px 3px rgba(16,24,40,.05);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.sitemap-page .dir-card::before,
.sitemap-page .dir-card::after,
.sitemap-page .archive-panel::before,
.sitemap-page .archive-panel::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  border-color:var(--vtc-bg-main-bg-1);
  opacity:.55;
  transition:transform .35s ease, opacity .35s ease, border-color .35s ease;
}
.sitemap-page .dir-card::before,
.sitemap-page .archive-panel::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid;border-radius:5px 0 0 0;}
.sitemap-page .dir-card::after,
.sitemap-page .archive-panel::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid;border-radius:0 0 5px 0;}

.sitemap-page .dir-card:hover,
.sitemap-page .archive-panel:hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(24,88,202,.28);border-color:transparent;}
.sitemap-page .dir-card:hover::before,
.sitemap-page .archive-panel:hover::before{transform:translate(-3px,-3px);border-color:var(--vtc-bg-main-bg-3);opacity:1;}
.sitemap-page .dir-card:hover::after,
.sitemap-page .archive-panel:hover::after{transform:translate(3px,3px);border-color:var(--vtc-bg-main-bg-3);opacity:1;}

.sitemap-page .dir-card-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.sitemap-page .dir-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--vtc-bg-main-bg-6);color:var(--vtc-bg-main-bg-1);}
.sitemap-page .dir-icon svg{width:22px;height:22px;}
.sitemap-page .dir-card-title h3{font-family:'Manrope','Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--f-fs-font-fs20);font-weight:var(--f-fw-bold);color:var(--vtc-text-heading-text-1);line-height:1.3;}
.sitemap-page .dir-path{display:inline-block;margin-top:3px;font-family:var(--sm-mono);font-size:12px;letter-spacing:.02em;color:var(--vtc-text-pera-text-4);}

.sitemap-page .dir-list li{border-bottom:1px dashed var(--vtc-border-border-1);}
.sitemap-page .dir-list li:last-child{border-bottom:none;}
.sitemap-page .dir-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 2px;
  font-size:var(--f-fs-font-fs16);
  font-weight:var(--f-fw-medium);
  color:var(--vtc-text-heading-text-2);
  transition:color .25s ease, padding-left .25s ease;
}
.sitemap-page .dir-list a::after{
  content:"";
  width:6px;
  height:6px;
  flex-shrink:0;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.5;
  transition:transform .25s ease, opacity .25s ease;
}
.sitemap-page .dir-list a:hover{color:var(--vtc-bg-main-bg-1);padding-left:6px;}
.sitemap-page .dir-list a:hover::after{transform:rotate(45deg) translate(2px,-2px);opacity:1;}

.sitemap-page .no-match{display:none;padding:14px 2px 4px;font-size:14px;color:var(--vtc-text-pera-text-1);font-style:italic;}
.sitemap-page .dir-card.is-empty .dir-list,
.sitemap-page .archive-panel.is-empty .chip-group{display:none;}
.sitemap-page .dir-card.is-empty .no-match,
.sitemap-page .archive-panel.is-empty .no-match{display:block;}

/* ---------------------------------------------------------------------- */
/* 4) Archive panels — Blog / Case Studies rendered as a growing tag cloud */
/*    (a pill layout, distinct from the fixed nav cards above, signals    */
/*    that this list keeps growing rather than being a static menu).      */
/* ---------------------------------------------------------------------- */
.sitemap-page .archive-grid{display:grid;grid-template-columns:1fr;gap:26px;margin-top:26px;}
.sitemap-page .archive-panel{position:relative;background:#fff;border:1px solid var(--vtc-border-border-1);border-radius:12px;padding:30px 28px;box-shadow:0 1px 3px rgba(16,24,40,.05);transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.sitemap-page .archive-head{margin-bottom:20px;}

.sitemap-page .chip-group{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0;min-height:20px;}
.sitemap-page .chip-group li{border:none;}
.sitemap-page .chip-group li span{display:none;}
.sitemap-page .chip-group li a{
  display:inline-flex;
  align-items:center;
  padding:9px 16px;
  border:1px solid var(--vtc-border-border-2);
  border-radius:999px;
  font-size:14px;
  font-weight:var(--f-fw-medium);
  color:var(--vtc-text-heading-text-2);
  background:#F9FAFC;
  transition:all .25s ease;
}
.sitemap-page .chip-group li a:hover{background:var(--vtc-bg-main-bg-1);border-color:var(--vtc-bg-main-bg-1);color:#fff;transform:translateY(-2px);}

/* Skeleton placeholder shown while the archive lists load over AJAX */
.sitemap-page .chip-group:empty::before{
  content:"Loading archive\2026";
  font-family:var(--sm-mono);
  font-size:13px;
  color:var(--vtc-text-pera-text-1);
}

/* ---------------------------------------------------------------------- */
/* 5) Responsive                                                          */
/* ---------------------------------------------------------------------- */
@media (max-width:1199px){
  .sitemap-page .directory-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:991px){
  .sitemap-page .directory-intro{padding:40px 0 30px;}
  .sitemap-page .directory-intro-inner{align-items:flex-start;}
  .sitemap-page .directory-search{min-width:100%;}
  .sitemap-page .directory-wrap{padding:36px 0 70px;}
}
@media (max-width:767px){
  .sitemap-page .directory-grid{grid-template-columns:1fr;}
  .sitemap-page .directory-intro-copy h2{font-size:var(--f-fs-font-fs28);line-height:var(--f-fs-font-fs36);}
  .sitemap-page .dir-card,
  .sitemap-page .archive-panel{padding:24px 20px 18px;}
}

/* ---------------------------------------------------------------------- */
/* 6) Reduced motion                                                      */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .sitemap-page .dir-card,
  .sitemap-page .archive-panel,
  .sitemap-page .dir-list a,
  .sitemap-page .dir-list a::after,
  .sitemap-page .chip-group li a,
  .sitemap-page .dir-card::before,
  .sitemap-page .dir-card::after,
  .sitemap-page .archive-panel::before,
  .sitemap-page .archive-panel::after{transition:none;}
  .sitemap-page .dir-card:hover,
  .sitemap-page .archive-panel:hover,
  .sitemap-page .chip-group li a:hover{transform:none;}
}