/*
  khabeernb-responsive.css — drop-in, pure CSS responsiveness layer
  ------------------------------------------------------------------
  How to use:
  1) Link this AFTER your current site CSS on every page:
     <link rel="stylesheet" href="/css/khabeernb-responsive.css">
  2) Without changing your HTML, you immediately get:
     - Fluid typography & spacing
     - Flexible media (images, video, iframes)
     - Safer defaults for tables/forms on small screens
     - CSS-only mobile nav pattern (opt-in classes provided)
     - A small grid & utility set you can sprinkle where needed

  Notes:
  - All classes are namespaced with .kb- to avoid collisions.
  - You can adopt them gradually; start with containers, rows/cols, and nav.
*/

/* ---------- 1) Base reset & tokens ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { margin: 0; line-height: 1.6; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; height: auto; }
img { font-style: italic; background-repeat: no-repeat; background-size: cover; }

:root {
  /* Breakpoints */
  --kb-sm: 576px;  /* phones */
  --kb-md: 768px;  /* tablets */
  --kb-lg: 992px;  /* small laptops */
  --kb-xl: 1200px; /* desktops */
  --kb-xxl: 1400px;/* large desktops */

  /* Fluid type scale */
  --kb-fs-100: clamp(0.75rem, 0.70rem + 0.2vw, 0.875rem);
  --kb-fs-200: clamp(0.875rem, 0.82rem + 0.3vw, 1rem);
  --kb-fs-300: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
  --kb-fs-400: clamp(1.125rem, 1.05rem + 0.5vw, 1.25rem);
  --kb-fs-500: clamp(1.25rem, 1.15rem + 0.8vw, 1.5rem);
  --kb-fs-600: clamp(1.5rem, 1.35rem + 1vw, 1.875rem);
  --kb-fs-700: clamp(1.875rem, 1.6rem + 1.2vw, 2.25rem);
  --kb-fs-800: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);

  /* Spacing scale */
  --kb-sp-1: 0.25rem;
  --kb-sp-2: 0.5rem;
  --kb-sp-3: 0.75rem;
  --kb-sp-4: 1rem;
  --kb-sp-5: 1.5rem;
  --kb-sp-6: 2rem;
  --kb-sp-7: 3rem;
  --kb-sp-8: 4rem;

  /* Container widths */
  --kb-container: min(100% - 2rem, 72rem); /* ~1152px */
}

body { font-size: var(--kb-fs-300); color: #111; }
h1 { font-size: var(--kb-fs-800); line-height: 1.1; margin: 0 0 var(--kb-sp-5); }
h2 { font-size: var(--kb-fs-700); line-height: 1.2; margin: 0 0 var(--kb-sp-4); }
h3 { font-size: var(--kb-fs-600); line-height: 1.25; margin: 0 0 var(--kb-sp-3); }
h4, h5, h6 { margin: 0 0 var(--kb-sp-3); }
p { margin: 0 0 var(--kb-sp-4); }

/* ---------- 2) Containers & layout ---------- */
.kb-container { width: var(--kb-container); margin-inline: auto; }
.kb-stack > * + * { margin-top: var(--kb-sp-5); }
.kb-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kb-sp-3); }
.kb-center { box-sizing: content-box; margin-inline: auto; max-width: var(--kb-container); padding-inline: var(--kb-sp-4); }

/* ---------- 3) Grid (12-col, flex-based) ---------- */
.kb-row { display: flex; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; }
.kb-col { padding-left: 0.75rem; padding-right: 0.75rem; flex: 1 0 0%; }

/* Widths for columns (mobile-first) */
:where([class*="kb-col-"]) { flex: 0 0 auto; }
.kb-col-1{ width: 8.3333%; } .kb-col-2{ width: 16.6667%; }
.kb-col-3{ width: 25%; } .kb-col-4{ width: 33.3333%; }
.kb-col-5{ width: 41.6667%; } .kb-col-6{ width: 50%; }
.kb-col-7{ width: 58.3333%; } .kb-col-8{ width: 66.6667%; }
.kb-col-9{ width: 75%; } .kb-col-10{ width: 83.3333%; }
.kb-col-11{ width: 91.6667%; } .kb-col-12{ width: 100%; }

@media (min-width: 576px){
  .kb-col-sm-1{ width: 8.3333%; } .kb-col-sm-2{ width: 16.6667%; }
  .kb-col-sm-3{ width: 25%; } .kb-col-sm-4{ width: 33.3333%; }
  .kb-col-sm-5{ width: 41.6667%; } .kb-col-sm-6{ width: 50%; }
  .kb-col-sm-7{ width: 58.3333%; } .kb-col-sm-8{ width: 66.6667%; }
  .kb-col-sm-9{ width: 75%; } .kb-col-sm-10{ width: 83.3333%; }
  .kb-col-sm-11{ width: 91.6667%; } .kb-col-sm-12{ width: 100%; }
}
@media (min-width: 768px){
  .kb-col-md-1{ width: 8.3333%; } .kb-col-md-2{ width: 16.6667%; }
  .kb-col-md-3{ width: 25%; } .kb-col-md-4{ width: 33.3333%; }
  .kb-col-md-5{ width: 41.6667%; } .kb-col-md-6{ width: 50%; }
  .kb-col-md-7{ width: 58.3333%; } .kb-col-md-8{ width: 66.6667%; }
  .kb-col-md-9{ width: 75%; } .kb-col-md-10{ width: 83.3333%; }
  .kb-col-md-11{ width: 91.6667%; } .kb-col-md-12{ width: 100%; }
}
@media (min-width: 992px){
  .kb-col-lg-1{ width: 8.3333%; } .kb-col-lg-2{ width: 16.6667%; }
  .kb-col-lg-3{ width: 25%; } .kb-col-lg-4{ width: 33.3333%; }
  .kb-col-lg-5{ width: 41.6667%; } .kb-col-lg-6{ width: 50%; }
  .kb-col-lg-7{ width: 58.3333%; } .kb-col-lg-8{ width: 66.6667%; }
  .kb-col-lg-9{ width: 75%; } .kb-col-lg-10{ width: 83.3333%; }
  .kb-col-lg-11{ width: 91.6667%; } .kb-col-lg-12{ width: 100%; }
}
@media (min-width: 1200px){
  .kb-col-xl-1{ width: 8.3333%; } .kb-col-xl-2{ width: 16.6667%; }
  .kb-col-xl-3{ width: 25%; } .kb-col-xl-4{ width: 33.3333%; }
  .kb-col-xl-5{ width: 41.6667%; } .kb-col-xl-6{ width: 50%; }
  .kb-col-xl-7{ width: 58.3333%; } .kb-col-xl-8{ width: 66.6667%; }
  .kb-col-xl-9{ width: 75%; } .kb-col-xl-10{ width: 83.3333%; }
  .kb-col-xl-11{ width: 91.6667%; } .kb-col-xl-12{ width: 100%; }
}

/* Gap utility for rows */
.kb-gx-0 > *{ padding-left:0; padding-right:0; }
.kb-gx-1 > *{ padding-left:0.25rem; padding-right:0.25rem; }
.kb-gx-2 > *{ padding-left:0.5rem; padding-right:0.5rem; }
.kb-gx-3 > *{ padding-left:0.75rem; padding-right:0.75rem; }
.kb-gy-1 > * + *{ margin-top:0.25rem; }
.kb-gy-2 > * + *{ margin-top:0.5rem; }
.kb-gy-3 > * + *{ margin-top:0.75rem; }

/* ---------- 4) Utilities ---------- */
.kb-flex{ display:flex; }
.kb-grid{ display:grid; }
.kb-wrap{ flex-wrap:wrap; }
.kb-center-items{ align-items:center; }
.kb-justify-center{ justify-content:center; }
.kb-justify-between{ justify-content:space-between; }
.kb-gap-1{ gap:var(--kb-sp-1); } .kb-gap-2{ gap:var(--kb-sp-2); }
.kb-gap-3{ gap:var(--kb-sp-3); } .kb-gap-4{ gap:var(--kb-sp-4); }
.kb-gap-5{ gap:var(--kb-sp-5); } .kb-gap-6{ gap:var(--kb-sp-6); }
.kb-w-100{ width:100%; } .kb-maxw-container{ max-width: var(--kb-container); }
.kb-hide-overflow { overflow: hidden; }
.kb-rounded { border-radius: 0.75rem; }
.kb-shadow { box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.06); }

/* Show/hide helpers */
@media (max-width: calc(var(--kb-md) - 0.02px)) { .kb-hide-sm { display: none !important; } }
@media (min-width: var(--kb-md)) and (max-width: calc(var(--kb-lg) - 0.02px)) { .kb-hide-md { display: none !important; } }
@media (min-width: var(--kb-lg)) { .kb-hide-lg { display: none !important; } }

/* ---------- 5) Media elements ---------- */
.kb-responsive-embed { position: relative; width: 100%; }
.kb-responsive-embed > * { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* ---------- 6) Nav: CSS-only hamburger (opt-in) ---------- */
/* Markup pattern:
  <nav class="kb-nav">
    <div class="kb-nav-bar kb-container">
      <a class="kb-brand" href="#">Brand</a>
      <input id="kb-nav-toggle" type="checkbox" class="kb-nav-toggle"/>
      <label for="kb-nav-toggle" class="kb-burger" aria-label="Open Menu">☰</label>
      <ul class="kb-menu">
        <li><a href="#">Link</a></li>
        ...
      </ul>
    </div>
  </nav>
*/
.kb-nav { background: #ffffff; border-bottom: 1px solid #eee; }
.kb-nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--kb-sp-3); min-height: 56px; }
.kb-brand { font-weight: 700; text-decoration: none; color: inherit; font-size: var(--kb-fs-500); }
.kb-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--kb-sp-4); }
.kb-menu a { text-decoration: none; color: inherit; padding: 0.5rem 0.25rem; display: inline-block; }
.kb-menu a:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.kb-burger { display: none; cursor: pointer; user-select: none; font-size: 1.5rem; line-height: 1; }
.kb-nav-toggle { display: none; }

@media (max-width: calc(var(--kb-lg) - 0.02px)) {
  .kb-burger { display: block; }
  .kb-menu { position: absolute; inset: 56px 0 auto 0; background: #fff; border-top: 1px solid #eee; display: grid; gap: 0; padding: 0.5rem 1rem; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .kb-nav-toggle:checked ~ .kb-burger + .kb-menu { max-height: 70vh; }
}

/* ---------- 7) Tables ---------- */
/* Option A: keep table layout and allow horizontal scroll */
.kb-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kb-table-wrap > table { width: 100%; border-collapse: collapse; }
.kb-table-wrap th, .kb-table-wrap td { padding: 0.625rem; text-align: left; border-bottom: 1px solid #eee; }

/* Option B (opt-in class): stack rows on narrow screens */
.kb-table-stack { width: 100%; border-collapse: collapse; }
.kb-table-stack thead { display: none; }
.kb-table-stack tr { display: block; border-bottom: 1px solid #eee; }
.kb-table-stack td { display: grid; grid-template-columns: 10ch 1fr; gap: 1rem; padding: 0.5rem 0; }
.kb-table-stack td::before { content: attr(data-label); font-weight: 600; }
@media (min-width: var(--kb-md)) { 
  .kb-table-stack thead { display: table-header-group; }
  .kb-table-stack tr { display: table-row; }
  .kb-table-stack td { display: table-cell; }
  .kb-table-stack td::before { content: none; }
}

/* ---------- 8) Forms ---------- */
input, select, textarea, button { font: inherit; }
.kb-form-fluid input[type="text"],
.kb-form-fluid input[type="email"],
.kb-form-fluid input[type="password"],
.kb-form-fluid input[type="tel"],
.kb-form-fluid select,
.kb-form-fluid textarea { width: 100%; max-width: 100%; }

/* On small screens, make form controls full-width even without .kb-form-fluid */
@media (max-width: calc(var(--kb-md) - 0.02px)) {
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea { width: 100%; }
}

/* ---------- 9) Cards & media blocks ---------- */
.kb-card { background: #fff; border: 1px solid #eee; border-radius: 0.75rem; overflow: hidden; }
.kb-card > .kb-card-media { aspect-ratio: 16/9; overflow: hidden; }
.kb-card > .kb-card-body { padding: var(--kb-sp-5); }

/* ---------- 10) Footer & sticky footer pattern ---------- */
.kb-page { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; }

/* ---------- 11) Helpers for legacy fixed widths ---------- */
/* Convert common hard-coded widths to fluid on phones */
@media (max-width: calc(var(--kb-md) - 0.02px)) {
  [style*="width:600px"], [style*="width:700px"], [style*="width:800px"],
  [style*="width:900px"], [style*="width:1000px"] { width: 100% !important; }
}

/* Ensure big hero headings and banners scale */
.kb-hero { padding: var(--kb-sp-7) var(--kb-sp-4); text-align: center; }
.kb-hero h1 { margin-bottom: var(--kb-sp-4); }
.kb-hero p { font-size: var(--kb-fs-400); max-width: 60ch; margin: 0 auto; }

/* ---------- 12) Spacing utilities (margin/padding) ---------- */
.kb-p-0{padding:0}.kb-p-1{padding:var(--kb-sp-1)}.kb-p-2{padding:var(--kb-sp-2)}.kb-p-3{padding:var(--kb-sp-3)}.kb-p-4{padding:var(--kb-sp-4)}.kb-p-5{padding:var(--kb-sp-5)}.kb-p-6{padding:var(--kb-sp-6)}
.kb-px-4{padding-left:var(--kb-sp-4);padding-right:var(--kb-sp-4)}.kb-py-4{padding-top:var(--kb-sp-4);padding-bottom:var(--kb-sp-4)}
.kb-m-0{margin:0}.kb-mt-4{margin-top:var(--kb-sp-4)}.kb-mb-4{margin-bottom:var(--kb-sp-4)}.kb-mt-6{margin-top:var(--kb-sp-6)}.kb-mb-6{margin-bottom:var(--kb-sp-6)}

/* ---------- 13) Responsive images with captions ---------- */
figure { margin: 0; }
figure.kb-media { display: grid; gap: var(--kb-sp-3); }
figure.kb-media figcaption { font-size: var(--kb-fs-200); color: #555; }

/* ---------- 14) Accessibility niceties ---------- */
:focus-visible { outline: 3px solid #0a7; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 15) Optional: sticky responsive table header ---------- */
.kb-table-wrap thead th { position: sticky; top: 0; background: #fff; }

/* ---------- 16) Optional: responsive sidebar layout ---------- */
/* Markup pattern:
<div class="kb-container kb-layout">
  <aside class="kb-aside">...</aside>
  <main class="kb-main">...</main>
</div>
*/
.kb-layout { display: grid; gap: var(--kb-sp-5); }
.kb-aside { order: 2; }
.kb-main { order: 1; }
@media (min-width: var(--kb-lg)) {
  .kb-layout { grid-template-columns: 280px 1fr; align-items: start; }
  .kb-aside { order: 1; }
  .kb-main { order: 2; }
}


/* ========= Navbar Responsive ========= */
.kb-menu-icon {
  font-size: 28px;
  cursor: pointer;
  user-select: none;
  padding: 8px 12px;
  display: block;
}

.kb-toggle {
  display: none;
}

.kb-menu {
  position: fixed;
  top: 0;
  right: -280px; /* hidden */
  width: 250px;
  height: 100vh;
  background: #fff;
  box-shadow: -3px 0 8px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  text-align: right;
  transition: right 0.3s ease;
  z-index: 9999;
}


.kb-menu-logo {
  text-align: center;
  margin-bottom: 20px;
}

.kb-menu-logo img {
  max-width: 140px;
}



.kb-menu a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  padding: 8px 10px;
  border-radius: 4px;
}

.kb-menu a:hover {
  background: #f1f1f1;
}

.kb-close {
  font-size: 28px;
  cursor: pointer;
  margin-bottom: 20px;
  display: block;
}

.kb-toggle:checked ~ .kb-menu {
  right: 0;
}

/* Desktop: hide mobile controls */
@media (min-width: 966px) {
  .kb-menu-icon,
  .kb-menu,
  .kb-close {
    display: none !important;
  }
}









/* 4444444444444444444444444444444444 */
/* ===== Custom collapse range: 767px — 1103px =====
   Show hamburger & slide-menu in this range, hide desktop nav */
   @media (min-width: 767px) and (max-width: 1103px) {

    /* show the hamburger icon (label) */
    .kb-menu-icon {
      display: block !important;
    }
  
    /* ensure the slide menu exists off-screen by default */
    .kb-menu {
      display: flex !important;
      right: -300px !important;    /* hidden off-canvas */
      width: 280px;                /* adjust width as needed */
      transition: right 0.28s ease !important;
      z-index: 9999;
    }
  
    /* when the hidden checkbox is checked, slide it in */
    .kb-toggle:checked ~ .kb-menu {
      right: 0 !important;
    }
  
    /* hide the desktop-only nav block while in this range
       (your desktop container had: class="d-none d-md-flex ...") */
    .mainheader .d-none.d-md-flex {
      display: none !important;
    }
  
    /* keep logo visible above the menu and not hidden */
    .mainheader .navbar-brand {
      z-index: 10010;
      position: relative;
    }
  
    /* small polish for links inside the menu in this range */
    .kb-menu a {
      padding: 10px 12px;
      font-size: 15px;
    }










      /* push logo to the right and hamburger to the left */
  .mainheader .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse; /* flip the order for RTL */
  }

  /* keep logo on the right side */
  .mainheader .logo,
  .mainheader .navbar-brand {
    margin-left: auto;
  }

  /* force hamburger icon to left side */
  .kb-menu-icon {
    margin-right: auto;
  }



  
  }
  
  /* Make sure on wide screens (above 1103px) mobile controls are hidden */
  @media (min-width: 1104px) {
    .kb-menu-icon,
    .kb-menu,
    .kb-close {
      display: none !important;
    }
  }