:root{
      --bg:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --line:rgba(15,23,42,.12);
      --shadow:0 18px 40px rgba(2,8,23,.14);

      --blue:#0a3a8d;
      --red:#e53935;

      --radius:16px;
      --tab-h:44px;

      /*  keep header + overlay consistent */
      --header-h: 68px;
    }

    *{box-sizing:border-box}

/* common style */
.wrapperleft{height: 100%;min-height: 670px;}



    /* HEADER */
header.site-header {
  background: url('https://www.avalontec.com/wp-content/uploads/sites/8/2026/images/header-bg.jpg') no-repeat top/cover;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);

}


    .site-header{
      position:sticky;
      top:0;
      z-index:999;
      background:var(--bg);
      border-bottom:1px solid var(--line);
    }

    .header-inner{
      max-width:1360px;
      margin:0 auto;
      padding:7px 16px;
      min-height: var(--header-h); /*  */
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }

    /* BRAND */
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:var(--text);
      font-weight:700;
      flex: 0 0 auto;
    }

    /* FIX LOGO SIZE (do NOT use %) */
    .avalon-logo{
      display:block;
      width:224px; /* desktop default */
      flex: 0 0 auto;
    }
    .avalon-logo img{
      width:100%;
      height:auto;
      display:block;
    }

    /* Responsive logo */
    @media (max-width: 1440px){ .avalon-logo{ width:145px; } }
    @media (max-width: 1024px){ .avalon-logo{ width:135px; } }
    @media (max-width: 600px){  .avalon-logo{ width:125px; } }

    /* Toggle */
    .nav-toggle{
      width:46px;height:42px;
      border:1px solid var(--line);
      background:#fff;
      border-radius:12px;
      display:none;
      align-items:center;
      justify-content:center;
      gap:5px;
      flex-direction:column;
      cursor:pointer;
      flex: 0 0 auto;
    }
    .nav-toggle .bar{
      width:20px;height:2px;background:var(--text);
      border-radius:999px;
      transition: transform .22s ease, opacity .18s ease, width .22s ease;
      transform-origin:center;
    }

    /*  Burger -> X when open */
    body.menu-open .nav-toggle .bar:nth-child(1){
      transform: translateY(7px) rotate(45deg);
    }
    body.menu-open .nav-toggle .bar:nth-child(2){
      opacity: 0;
      width: 0;
    }
    body.menu-open .nav-toggle .bar:nth-child(3){
      transform: translateY(-7px) rotate(-45deg);
    }

    /* NAV */
    .nav-menu{
      margin:0;
      padding:0;
      list-style:none;
      display:flex;
      align-items:center;
      gap:10px;
    }

    /* Tabs */
    .menu-item{position:relative;list-style-type: none;}
    .menu-link{
      height:var(--tab-h);
      padding:0 14px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      text-decoration:none;
      color:var(--text);
      font-weight:600;
      border:1px solid transparent;
      white-space: nowrap;font-size: 16px;
    }
    .menu-link:hover{
      background:#f2f5fb;color: #438ff0;
     /* border-color:rgba(10,58,141,.12);*/
    }
    .chev{font-size:16px;color:var(--muted)}

    /* Submenu (Desktop default) */
    .submenu{
      position:absolute;
      top:calc(100% + 0px);
      left:0;
      min-width:250px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:14px;
      box-shadow:var(--shadow);
      padding:10px;
      display:none;
    }

    .sub-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:5px;
      padding:2px 12px;
      border-radius:30px;
      color:var(--text);
      text-decoration:none;
      font-weight:400;font-size: 14px;
    }
    .sub-link:hover{background-color: rgba(18, 89, 207, 0.82);color: #fff;}
	.sub-link:hover span.chev{color:#fff;}

    /* Submenu inside submenu (Desktop) */
    .sub-item{position:relative}
    .subsubmenu{
      position:absolute;
      top:0;
      left:calc(100% + 5px);
      min-width:240px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:14px;
      box-shadow:var(--shadow);
      padding:10px;
      display:none;
    }

		.submenu .sub-link{margin-top: 5px;}


    /* Desktop hover + keyboard (focus) */
    @media (min-width: 901px){
      .menu-item.has-sub:hover > .submenu,
      .menu-item.has-sub:focus-within > .submenu{display:block}

      .sub-item.has-sub:hover > .subsubmenu,
      .sub-item.has-sub:focus-within > .subsubmenu{display:block}
    }

    /*  MOBILE */
    @media (max-width: 900px){
      .nav-toggle{display:flex}

      .nav{
        position:fixed;
        inset: var(--header-h) 0 0 0;  /*  uses header height */
        background:rgba(15,23,42,.45);
        opacity:0;
        pointer-events:none;
        transition:.22s ease;
      }
      body.menu-open .nav{
        opacity:1;
        pointer-events:auto;
      }

      .nav-menu{
        display:flex;
        position:absolute;
        top:0; right:0;
        height:100%;
        width:min(92vw, 380px);
        background:#fff;
        border-left:1px solid var(--line);
        box-shadow:var(--shadow);
        padding:14px;
        padding-bottom:24px;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        transform:translateX(10px);
        transition:.22s ease;
	background-color: #fff;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
      }
      body.menu-open .nav-menu{transform:translateX(0)}

      .menu-link{
        height:auto;
        padding:12px 12px;
        border-radius:14px;
        justify-content:space-between;
        border:1px solid var(--line);
      }

      .submenu,
      .subsubmenu{
        position:static;
        display:none;
        margin:8px 0 0;
        padding:0;
        border:0;
        box-shadow:none;margin-left: 10px;
      }


      .sub-link{
        padding:10px 12px;
        border:1px solid rgba(15,23,42,.08);
        border-radius:12px;
        margin-top:8px;margin-left: 10px;
      }
    }
/* ======================================================
   AVDEV DESKTOP SUBMENU FIX (NON-DESTRUCTIVE PATCH)
   - Prevents hover gap hiding
   - Adds smooth fade + slide animation
   - Keeps mobile logic untouched
====================================================== */

/* Hover buffer to avoid submenu flicker */
@media (min-width: 901px){

  .menu-item.has-sub > .submenu::before{
    content:"";
    position:absolute;
    top:-12px;
    left:0;
    right:0;
    height:12px;
  }

  .sub-item.has-sub > .subsubmenu::before{
    content:"";
    position:absolute;
    left:-12px;
    top:0;
    bottom:0;
    width:12px;
  }

  /* Make submenus animatable (override display:none safely) */
  .submenu,
  .subsubmenu{
    display:block;                  /* override */
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform: translateY(8px);
    transition:
      opacity .28s ease,
      transform .28s ease,
      visibility .28s ease;
  }

  .subsubmenu{
    transform: translateX(8px);
  }

  /* SHOW submenu */
  .menu-item.has-sub:hover > .submenu,
  .menu-item.has-sub:focus-within > .submenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform: translateY(0);
  }

  /* SHOW subsubmenu */
  .sub-item.has-sub:hover > .subsubmenu,
  .sub-item.has-sub:focus-within > .subsubmenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform: translateX(0);
  }
}