/* ==========================================================
   media.cleaned.css
   Cleaned from media.css for the header-only template.

   Order:
   1) Desktop base enforcement
   2) Desktop compression at 1265px and below
   3) Desktop tight compression at 908px and below
   4) Desktop mega/dropdown panel placement
   5) Mobile header/menu at 768px and below

   Note:
   - The 908px block comes AFTER the 1265px block so it wins when both match.
   - Removed old overlapping mobile image ranges like 688-785, 516-715, 400-700.
   ========================================================== */

/* === 1) Desktop Header Base - 769px and wider (Cleaned) === */
@media (min-width: 350px)and (max-width: 769px)  {
	body{
		width: 99%;
	}
	
	.columnInner, .columnCenter {
    padding: 0;
}
	
}

@media (min-width: 769px) {
	body{
		width: 95%;
	}

  .main-header {
    height: 122px;
    min-height: 122px;
    position: sticky;
    top: 0;
  }

  .navbarHeader {
    min-height: 122px;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px;
    padding: 10px 22px;
    box-sizing: border-box;
  }

  .nav-logo {
    flex: 0 0 auto;
    margin-right: 18px;
  }

  .nav-logo img.desktop-img {
    width: 300px !important;
    height: 101px !important;
  }

  .nav-link-rows {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
  }

  .nav-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    flex-wrap: nowrap;
  }

  .nav-row-top,
  .nav-row-bottom {
    padding-right: 4px !important;
  }

}
/* === End Desktop Header Base - 769px and wider (Cleaned) === */
@media (min-width: 818px) and (max-width: 1215px) {
  .main-header {
    height: 122px;
    min-height: 122px;
	margin-bottom: -40px;
    position: sticky;
    top: 0;
  }
}
@media (min-width: 600px) and (max-width: 817px) {
  .main-header {
    height: 122px;
    min-height: 122px;
	margin-bottom: -10px;
    position: sticky;
    top: 0;
  }
}
@media (min-width: 500px) and (max-width: 600px) {
  .main-header {
    height: 122px;
    min-height: 122px;
	margin-bottom: -10px;
    position: sticky;
    top: 0;
  }
}

/* === 2) Compact Desktop Header - 1265px and below (Cleaned) === */
@media (min-width: 769px) and (max-width: 1265px) {

  .nav-logo {
    position: relative;
    top: -20px;
  }

  .nav-logo img.desktop-img {
    transform: scale(.70);
    transform-origin: left center;
  }

  .nav-row {
    gap: 6px !important;
  }

  .nav-link,
  .nav-drop-btn,
  .BugReport {
    min-height: 30px !important;
    padding: 6px 7px !important;
    font-size: .82rem !important;
    gap: 4px !important;
  }

  .menu-icon {
    width: 16px;
    min-width: 16px;
    font-size: .85rem;
  }

  body.cff-header-scrolled .nav-logo {
    width: 100px;
    height: 35px;
  }

  body.cff-header-scrolled .nav-logo img.desktop-img {
    transform: scale(.333);
  }

}
/* === End Compact Desktop Header - 1265px and below (Cleaned) === */


/* === 3) Tight Desktop Header - 908px and below (Cleaned) === */
@media (min-width: 769px) and (max-width: 908px) {

  .nav-logo img.desktop-img {
    transform: scale(.56);
    transform-origin: left center;
  }

  .nav-row {
    gap: 4px !important;
  }

  .nav-link,
  .nav-drop-btn,
  .BugReport {
    min-height: 26px !important;
    padding: 4px 6px !important;
    font-size: .74rem !important;
    gap: 3px !important;
  }

  .menu-icon {
    width: 14px;
    min-width: 14px;
    font-size: .75rem;
  }

}
/* === End Tight Desktop Header - 908px and below (Cleaned) === */


/* === 4) Desktop Mega / Dropdown Panel Placement (Cleaned) === */
@media (min-width: 769px) {

  .header-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: auto !important;
    right: 0 !important;
    z-index: 5000;
  }

  #Admin.header-mega-panel,
  #Cats.header-mega-panel,
  #Templates.header-mega-panel,
  #Blog.header-mega-panel,
  #SearchKB.header-mega-panel {
    position: fixed !important;
    top: 108px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 99999 !important;
  }

  #Admin.header-mega-panel,
  #Cats.header-mega-panel,
  #SearchKB.header-mega-panel {
    width: 640px !important;
    max-width: 640px !important;
  }

  #Templates.header-mega-panel {
    width: 460px !important;
    max-width: 460px !important;
  }

  #Blog.header-mega-panel {
    width: 420px !important;
    max-width: 420px !important;
  }

  #Admin .mega-panel-grid,
  #Cats .mega-panel-grid,
  #SearchKB .mega-panel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #Templates .template-grid,
  #Templates .mega-panel-grid,
  #Blog .blog-grid,
  #Blog .mega-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #Admin.header-mega-panel .TagLinks,
  #Cats.header-mega-panel .TagLinks,
  #Templates.header-mega-panel .TagLinks,
  #Blog.header-mega-panel .TagLinks,
  #SearchKB.header-mega-panel .TagLinks {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #Blog.header-dropdown-menu-small {
    min-width: 210px;
  }

  body.cff-header-scrolled #Cats.header-mega-panel,
  body.cff-header-scrolled #Templates.header-mega-panel,
  body.cff-header-scrolled #Blog.header-mega-panel,
  body.cff-header-scrolled #SearchKB.header-mega-panel {
    top: 58px !important;
  }

}
/* === End Desktop Mega / Dropdown Panel Placement (Cleaned) === */


/* === 5) Desktop Dropdown Viewport Clamp - 1192px and below (Cleaned) === */
@media (min-width: 769px) and (max-width: 1192px) {

  .nav-item.has-dropdown {
    position: relative;
  }

  #Admin,
  #Cats,
  #Templates,
  #Blog,
  #SearchKB,
  .header-dropdown-menu {
    left: auto;
    right: 0;
  }

  #Admin.header-mega-panel,
  #Cats.header-mega-panel,
  #Templates.header-mega-panel,
  #Blog.header-mega-panel,
  #SearchKB.header-mega-panel {
    left: auto;
    right: 0;
    width: min(680px, calc(100vw - 24px));
  }

  .mega-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}
/* === End Desktop Dropdown Viewport Clamp - 1192px and below (Cleaned) === */


/* === 6) Desktop Mega Card Tightening - 930px and below (Cleaned) === */
@media (min-width: 769px) and (max-width: 930px) {

  #Admin.header-mega-panel,
  #Cats.header-mega-panel,
  #SearchKB.header-mega-panel {
    width: 500px !important;
    max-width: 500px !important;
  }

  #Templates.header-mega-panel {
    width: 460px !important;
    max-width: 460px !important;
  }

  #Blog.header-mega-panel {
    width: 420px !important;
    max-width: 420px !important;
  }

  #Admin .mega-panel-grid,
  #Cats .mega-panel-grid,
  #Templates .template-grid,
  #Templates .mega-panel-grid,
  #Blog .blog-grid,
  #Blog .mega-panel-grid,
  #SearchKB .mega-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #Admin.header-mega-panel .TagLinks a,
  #Cats.header-mega-panel .TagLinks a,
  #Templates.header-mega-panel .TagLinks a,
  #Blog.header-mega-panel .TagLinks a,
  #SearchKB.header-mega-panel .TagLinks a {
    min-height: 42px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    column-gap: 6px !important;
    padding: 6px 7px !important;
    box-sizing: border-box !important;
  }

  #Admin.header-mega-panel .mega-item-icon,
  #Cats.header-mega-panel .mega-item-icon,
  #Templates.header-mega-panel .mega-item-icon,
  #Blog.header-mega-panel .mega-item-icon,
  #SearchKB.header-mega-panel .mega-item-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.74rem !important;
    border-radius: 6px !important;
  }

  #Admin.header-mega-panel .TagLinks span:not(.mega-item-icon),
  #Cats.header-mega-panel .TagLinks span:not(.mega-item-icon),
  #Templates.header-mega-panel .TagLinks span:not(.mega-item-icon),
  #Blog.header-mega-panel .TagLinks span:not(.mega-item-icon),
  #SearchKB.header-mega-panel .TagLinks span:not(.mega-item-icon),
  #Admin.header-mega-panel .TagLinks small,
  #Cats.header-mega-panel .TagLinks small,
  #Templates.header-mega-panel .TagLinks small,
  #Blog.header-mega-panel .TagLinks small,
  #SearchKB.header-mega-panel .TagLinks small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

}
/* === End Desktop Mega Card Tightening - 930px and below (Cleaned) === */


/* === 7) Final Desktop Panel Width Clamp - 900px and below (Cleaned) === */
@media (min-width: 769px) and (max-width: 900px) {

  #Admin.header-mega-panel,
  #Cats.header-mega-panel,
  #Templates.header-mega-panel,
  #Blog.header-mega-panel,
  #SearchKB.header-mega-panel {
    width: min(560px, calc(100vw - 24px));
  }

}
/* === End Final Desktop Panel Width Clamp - 900px and below (Cleaned) === */


/* === 8) Mobile Header / Mobile Menu - 768px and below (Cleaned) === */
@media (max-width: 830px) {

  html {
    scroll-padding-top: 72px;
  }

  html {
    overflow-x: clip !important;
  }
  
  /* 2. Set the body to visible so sticky calculations can pass through it */
  body {
    overflow-x: visible !important;
  }
  
  /* 3. Keep the wrapper clipped to prevent mobile side-scrolling */
  .cffWrapper {
    overflow-x: clip !important;
    height: auto !important;
  }

  .columnLeft {
    display: none;
  }

  .main-header {
    position: sticky;
    top: 0;
    height: 72px !important;
    min-height: 72px;
    display: block !important;
    background: var(--header-bg);
    color: #333;
    border-bottom: 1px solid #ccc;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .navbarHeader {
    height: 72px;
    align-items: center;
    justify-content: flex-start;
    padding: 0 78px 0 12px;
  }

  .desktop-img {
    display: none !important;
  }

  .mobile-img {
    display: block !important;
    width: 212px !important;
    height: 71px !important;
    object-fit: contain;
    background: transparent !important;
  }

  .nav-links,
  .nav-link-rows {
    display: none !important;
  }

  #Admin.header-mega-panel,
  #Cats.header-mega-panel,
  #Templates.header-mega-panel,
  #Blog.header-mega-panel,
  #SearchKB.header-mega-panel {
    display: none !important;
  }

  #mobile-menu-container {
    display: block;
    position: fixed;
    top: 9px;
    right: 12px;
    z-index: 9999;
    font-family: var(--font-main);
  }
  
    #mobile-control-panel{
        max-height:calc(100vh - 90px);
        overflow-y:auto;
        overscroll-behavior:contain;
    }

    .mobile-panel-items{
        max-height:inherit;
    }

}
/* === End Mobile Header / Mobile Menu - 768px and below (Cleaned) === */
/* Responsive */
@media(max-width:768px){

    .article-header{
        padding:22px;
    }

    .CodeTitles{
        font-size:2rem;
        line-height:1.25;
    }

}