/* =========================
   Legal page layout (full CSS)
   ========================= */

/* Design tokens */
:root{
  --sidebar-width: 300px;
  --layout-gap: 45px;
  --header-offset: 80px;        /* adjust to your fixed header height */
  --brand-blue: #001949;
  --muted-blue: #939eb2;
  --panel-bg: #f2f7fc;
  --nav-bg: #001a35;
}

/* Global header bit you had */
#main-header .mega-menu{
  position: fixed;
  top: 0;
}

/* ===== Page layout ===== */
.legal-section{
  padding: 0 70px;
  margin-top: 50px;
}

/* Flex row that holds sidebar + content */
.legal-parent{
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
  flex-wrap: nowrap;            /* keep two columns on desktop */
  /* Make sure nothing blocks sticky */
  overflow: visible;
  transform: none;
  filter: none;
  contain: initial;
}

/* ===== Left column (SIDEBAR COLUMN) =====
   Make the COLUMN sticky (more reliable than sticking inner child) */
.side-navbar{
  flex: 0 0 var(--sidebar-width);  /* fixed column width */
  min-width: var(--sidebar-width);
  align-self: flex-start;
  padding: 0;                       /* remove big top padding from earlier */
  position: sticky;                 /* the magic */
  top: var(--header-offset);        /* sticks below your fixed header */
  max-height: calc(100vh - var(--header-offset));
  overflow: auto;                   /* scroll inside if taller than viewport */

  /* Just in case a framework sets these on columns: keep sticky alive */
  overscroll-behavior: contain;
}

/* Inner content of the sidebar (normal flow) */
.legal-sidebar{
  padding: 20px 0;
  position: fixed;
    width: 300px;
    top: 150px;
}

/* ===== Right column (content area) ===== */
.template-area{
  flex: 1 1 auto;
  min-width: 0;                    /* prevents overflow from long words/URLs */
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
}

/* ===== Sidebar widget & menu styles ===== */
.legal-widget { margin-bottom: 20px; }
.legal-widget h3{ display:none; }

.sidebar-menu{
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-menu li{
  color: var(--brand-blue);
  padding: 5px 20px 5px 5px !important;
  font-size: 16px;
  position: relative;
}
.sidebar-menu li a{
  color: var(--brand-blue);
  text-decoration: none;
  display: block;
}
.sidebar-menu li a::after{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f061";
  color: var(--muted-blue);
  position: absolute;
  right: 5px;
}
.sidebar-menu li:hover{
  background-color: var(--panel-bg);
}

/* ===== Title / content styles ===== */
.title-area{
  background-color: var(--nav-bg);
  padding: 50px;
  text-align: center;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title-area h1{
  color: #ffffff;
  margin: 0;
}
.update-date{
  color: #ffffff;
  font-size: 16px;
}

.content h2{
  padding: 10px;
  background-color: var(--panel-bg);
  text-align: center;
  font-size: 32px;
  color: var(--brand-blue);
}

/* ===== Minor utility carry-overs ===== */
ul.sidebar-menu li {
  padding: 5px 20px 5px 5px !important;
}

/* ===== Breakpoints ===== */
@media (max-width: 1280px){
  .legal-section{ margin-top: 0; }
}

/* Tablet & below — stack columns and disable sticky */
@media (max-width: 999px){
  .legal-parent{
    flex-wrap: wrap;                /* allow stacking */
  }
  .side-navbar{
    flex: 0 0 100%;
    min-width: 0;
    position: static;               /* turn off sticky on small screens */
    max-height: none;
    overflow: visible;
  }
  .template-area{
    flex: 0 0 100%;
  }
  .legal-sidebar { position: relative; top: 0; width: 100%;}
}

/* ~900px tweaks preserved */
@media (max-width: 900px){
  .legal-section{ margin: 0; padding: 0 15px; }
  .container{ padding: 0; }

  .legal-parent{ gap: 20px; }
  .legal-widget h3{ font-size: 18px; }

  .title-area{
    padding-left: 20px;
    padding-right: 20px;
    min-height: 180px;
  }
}

/* Phones */
@media (max-width: 500px){
  .container{ padding: 0; }
  .legal-section{ padding-top: 0; }
  .template-area{ gap: 30px; }

  /* If you still want the sidebar hidden on phones, keep this: */
  .side-navbar{ display: none; }

  .legal-sidebar{ padding: 0; }
  .legal-widget{ margin: 0; }

  .update-date{ font-size: 14px; }
  .title-area h1{ font-size: 28px; }
  .content h2{ font-size: 24px; }
  .content-text{ font-size: 16px; }
}