/* ========= Legacy base (unchanged behavior) ========= */
.legacy-page { background: #f6f8fb; }
.legacy-content { min-height: calc(100dvh - 56px - 56px); } /* viewport - nav - footer */
.footer a { text-decoration: none; }
.footer a:hover { color: var(--brand-primary) !important; }

/* ========= Theme variables ========= */
:root{
  --legacy-nav-blue: #2f3b59;

  /* Navbar sizing controls */
  --legacy-nav-font-size: 15px;   /* label text size */
  --legacy-nav-icon-size: 20px;   /* icon width/height */
  --legacy-nav-gap: .5rem;        /* space between icon and label */
  --legacy-nav-pad-y: .45rem;     /* vertical padding */
  --legacy-nav-pad-x: .60rem;     /* horizontal padding */

  /* Mobile tweaks (optional: adjust if you like) */
  --legacy-nav-font-size-sm: 15px;
  --legacy-nav-icon-size-sm: 20px;
  --legacy-nav-gap-sm: .6rem;
}

/* ========= Legacy navbar ========= */
.legacy-navbar{
  background: var(--legacy-nav-blue) !important;
  border-bottom: 0 !important;
}

/* Text on dark navbar */
.legacy-navbar.navbar-dark .navbar-brand,
.legacy-navbar.navbar-dark .navbar-brand span,
.legacy-navbar.navbar-dark .greeting{
  color: #fff !important;
}

/* Outline buttons invert on dark navbar */
.legacy-navbar .btn-outline-primary,
.legacy-navbar .btn-outline-secondary,
.legacy-navbar .btn-outline-danger,
.legacy-navbar .btn-outline-success{
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,.6);
  --bs-btn-hover-bg: rgba(255,255,255,.12);
  --bs-btn-hover-border-color: rgba(255,255,255,.9);
  --bs-btn-active-bg: rgba(255,255,255,.2);
  --bs-btn-active-border-color: rgba(255,255,255,1);
  --bs-btn-focus-shadow-rgb: 255,255,255;
}
/* Icons inside buttons follow text color */
.legacy-navbar .btn [data-feather],
.legacy-navbar .btn i{ stroke: currentColor; color: currentColor; }

/* Icon + text links */
.legacy-navbar .nav-link-plain{
  color:#fff !important;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: var(--legacy-nav-gap);
  padding: var(--legacy-nav-pad-y) var(--legacy-nav-pad-x);
  border-radius:.375rem;
  line-height:1.1;
  font-size: var(--legacy-nav-font-size);
}
.legacy-navbar .nav-link-plain:hover,
.legacy-navbar .nav-link-plain:focus{
  background:rgba(255,255,255,.12);
  color:#fff !important;
  text-decoration:none;
}
/* Feather SVG after replacement: size + color */
.legacy-navbar .nav-link-plain svg.feather{
  width: var(--legacy-nav-icon-size);
  height: var(--legacy-nav-icon-size);
  stroke: currentColor;
  color: currentColor;
  stroke-width: 2; /* nicer when larger */
  flex: 0 0 auto;
}
/* If using Font Awesome anywhere in the navbar */
.legacy-navbar .nav-link-plain i[class*="fa"]{
  font-size: var(--legacy-nav-icon-size);
  line-height: 1;
}

/* Active page highlight */
.legacy-navbar .nav-link-plain.active{ background: rgba(255,255,255,.18); }

/* Greeting spacing */
.legacy-navbar .greeting{ margin-right: .25rem; }

/* Remove Bootstrap caret for icon+text look */
.legacy-navbar .nav-drop .dropdown-toggle::after{ display:none; }

/* ========= Dropdowns ========= */
.legacy-navbar .dropdown-menu-dark{
  --bs-dropdown-bg: rgba(0,0,0,.9);
  --bs-dropdown-link-color: #e9ecef;
  --bs-dropdown-link-hover-bg: rgba(255,255,255,.08);
  --bs-dropdown-link-hover-color: #fff;
  border:0; min-width:220px;
}

/* Colored dropdown pane to match legacy theme */
.legacy-navbar .legacy-dropdown{
  background: var(--legacy-nav-blue) !important;
  border:0;
  min-width:220px;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.25);
}
.legacy-navbar .legacy-dropdown .dropdown-item{
  color:#fff;
}
.legacy-navbar .legacy-dropdown .dropdown-item:hover,
.legacy-navbar .legacy-dropdown .dropdown-item:focus{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.legacy-navbar .legacy-dropdown .dropdown-item i,
.legacy-navbar .legacy-dropdown .dropdown-item [data-feather]{
  width:16px; height:16px;
  stroke: currentColor; color: currentColor; stroke-width:2;
}
.legacy-navbar .legacy-dropdown .dropdown-divider{
  border-color: rgba(255,255,255,.15);
}

/* ========= Footer ========= */
.legacy-footer{
  background: var(--legacy-nav-blue) !important;
  border-top: 0 !important;
  color: #fff;
}
.legacy-footer .text-muted{ color: rgba(255,255,255,.75) !important; }
.legacy-footer a{
  color:#fff !important;
  text-decoration:none !important;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .45rem;
  border-radius:.375rem;
  opacity:.9;
  transition: background .18s ease, opacity .18s ease;
}
.legacy-footer a:hover,
.legacy-footer a:focus{ background: rgba(255,255,255,.12); opacity:1; }
.legacy-footer i,
.legacy-footer [data-feather]{ width:16px; height:16px; color: currentColor; stroke: currentColor; }
/* keep links/icons white on any state */
.legacy-footer a,
.legacy-footer a:hover,
.legacy-footer a:focus,
.legacy-footer a:active{ color:#fff !important; }

/* ========= Content helpers ========= */
.caspio-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; padding-bottom:.25rem; }
.caspio-scroll table{ max-width:100%; }

/* Legacy pages: white canvas */
.page-template-page-legacy,
.page-template-page-legacy-php,
.page-template-page-legacy-comparables,
.page-template-page-legacy-comparables-php { background:#fff !important; }
.page-template-page-legacy .wrapper,
.page-template-page-legacy .main,
.page-template-page-legacy .content,
.page-template-page-legacy-php .wrapper,
.page-template-page-legacy-php .main,
.page-template-page-legacy-php .content,
.page-template-page-legacy-comparables .wrapper,
.page-template-page-legacy-comparables .main,
.page-template-page-legacy-comparables .content,
.page-template-page-legacy-comparables-php .wrapper,
.page-template-page-legacy-comparables-php .main,
.page-template-page-legacy-comparables-php .content{ background:#fff !important; }

/* ========= Mobile: collapsed menu panel (same color + horizontal toolbar) ========= */
@media (max-width: 767.98px){
  /* Keep navbar on top; panel overlays content just below it */
  .legacy-navbar{ position: sticky; top: 0; z-index: 1050; }
  .legacy-navbar .navbar-collapse{
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--legacy-nav-blue) !important;
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.25);
    padding: .5rem .5rem;
    z-index: 1040;
  }

  /* Turn the group into a single-row, swipeable toolbar */
  .legacy-navbar .navbar-collapse .ms-auto{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: var(--legacy-nav-gap-sm) !important;
  }
  .legacy-navbar .navbar-collapse .ms-auto > *{ flex: 0 0 auto !important; }

  /* Ensure labels/icons don’t wrap or get cut */
  .legacy-navbar .nav-link-plain{
    font-size: var(--legacy-nav-font-size-sm) !important;
    padding: .45rem .55rem !important;
  }
  .legacy-navbar .nav-link-plain span{ white-space: nowrap; }
  .legacy-navbar .nav-link-plain svg.feather{
    width: var(--legacy-nav-icon-size-sm) !important;
    height: var(--legacy-nav-icon-size-sm) !important;
  }

  /* subtle scrollbar for the toolbar */
  .legacy-navbar .navbar-collapse .ms-auto::-webkit-scrollbar{ height: 6px; }
  .legacy-navbar .navbar-collapse .ms-auto::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.25); border-radius: 3px;
  }
}

/* === Mobile: collapsed menu as a VERTICAL panel under the bar === */
@media (max-width: 767.98px){
  /* keep navbar on top; panel appears below it */
  .legacy-navbar{ position: sticky; top: 0; z-index: 1050; }

  .legacy-navbar .navbar-collapse{
    position: absolute !important;        /* under the bar */
    left: 0; right: 0; top: 100%;
    background: var(--legacy-nav-blue) !important;
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.25);
    padding: .25rem 0;
    overflow: visible !important;          /* no horizontal scroll bar */
    height: auto !important;               /* cancel any fixed height */
  }

  /* stack items vertically, full width */
  .legacy-navbar .navbar-collapse .ms-auto{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;                     /* consistent row spacing */
    overflow: visible !important;
  }
  .legacy-navbar .navbar-collapse .ms-auto > *{
    flex: 0 0 auto !important;
    width: 100% !important;                /* links span the panel */
  }

  /* link/label/icon styling inside the panel */
  .legacy-navbar .nav-link-plain{
    padding: .75rem 1rem !important;
    font-size: var(--legacy-nav-font-size-sm, 16px) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    border-radius: 0;                       /* flat list look */
    justify-content: flex-start;
  }
  .legacy-navbar .nav-link-plain:last-child{
    border-bottom: 0;
  }
  .legacy-navbar .nav-link-plain span{ white-space: nowrap; }

  /* feather icons = visible and sized */
  .legacy-navbar .nav-link-plain svg.feather{
    width: var(--legacy-nav-icon-size-sm, 20px) !important;
    height: var(--legacy-nav-icon-size-sm, 20px) !important;
    stroke-width: 2;
    margin-right: .5rem;
    flex: 0 0 auto;
  }

  /* dropdowns open inside the panel (not off-screen) */
  .legacy-navbar .dropdown-menu{
    position: static !important;           /* flow with the list */
    transform: none !important;
    float: none;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .legacy-navbar .legacy-dropdown .dropdown-item{
    color: #fff;
    padding: .6rem 1rem .6rem 2.4rem;      /* indent for icon */
  }
  .legacy-navbar .legacy-dropdown .dropdown-item i,
  .legacy-navbar .legacy-dropdown .dropdown-item [data-feather]{
    width: 16px; height: 16px; stroke-width: 2;
    margin-right: .6rem;
    position: absolute; left: 1rem;        /* icon column */
  }
}