/* HAR site-wide chrome: TOP BAR + FOOTER BAR (file name kept so the Public.Master link does not change).
   HAR site-wide footer bar - CNS 2026-10-06 (R322, Richard: "footer on each page ... icon and text readability, color scheme").
   HAR brand: black bar, red rule and icons, white text, Barlow body, Anton brand name. Linked from Public.Master on every page.
   Overrides the old #Footer rules in Design.min.css (navy #123, 0.75rem Yanone Kaffeesatz address, #99f icons). */

/* ===== TOP BAR (added 2026-10-06, R322; Richard: "make the fix and top bar live"). CSS only: the Public.Master header
   markup, ids, data-url navigation and the vendor login/logout branches are unchanged. Logo left, menu right, both
   pulled in to the 1140px content column so they line up with the page instead of the screen edges. ===== */
#HeaderPanel{border-top:0 !important;border-bottom:4px solid #d10a0a;box-shadow:0 2px 12px rgba(0,0,0,.12);height:66px;
             box-sizing:border-box;padding:6px 0 0 max(16px,calc((100% - 1140px) / 2 + 16px))}
#MainMenu{top:13px;right:max(16px,calc((100% - 1140px) / 2 + 16px))}
.Link{font-family:'Barlow',Arial,sans-serif !important;font-weight:700;font-size:15px;letter-spacing:.6px;color:#333366;
      border-left:0 !important;padding:8px 13px;border-radius:6px;transition:background-color .15s ease,color .15s ease}
.Link:hover{color:#fff;background-color:#d10a0a;border-left:0 !important}
.Link + .Link{margin-left:2px}
.Submenu{top:36px;right:auto;left:0;width:220px;background:#fff;border-top:4px solid #d10a0a;border-radius:0 0 10px 10px;
         box-shadow:0 10px 24px rgba(0,0,0,.18);overflow:hidden}
#Vendors .Submenu{left:auto;right:0}
.Sublink{font-family:'Barlow',Arial,sans-serif !important;font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;color:#1b2433;
         background:#fff;border-left:0 !important;border-bottom:1px solid #dde3ee;padding:11px 16px}
.Sublink:last-child{border-bottom:0}
.Sublink:hover{color:#fff;background-color:#333366;border-left:0 !important}
#Logout{background:#0a0a0a !important;color:#fff !important}
/* the grey-blue gradient band under the header -> plain white */
#PageWrapper div[style*="linear-gradient(#bbc"]{background-image:none !important}
#Version{display:none}
@media only screen and (max-width:1000px){
  #HeaderPanel{padding-left:16px}
  #MainMenu{right:16px}
  #Bars{top:-4px;right:0}
  #Bars i{color:#d10a0a !important}
  #Links{background:#fff;border-top:4px solid #d10a0a;border-radius:0 0 10px 10px;box-shadow:0 12px 26px rgba(0,0,0,.2);padding:6px 0;min-width:240px}
  .Link{display:block;border-radius:0;padding:12px 18px;border-bottom:1px solid #eef0f5}
  .Link:hover{background:#fff3f3;color:#d10a0a}
  .Submenu{position:static;width:auto;box-shadow:none;border-top:0;border-radius:0}
  .Sublink{padding-left:30px;background:#f6f7fb}
}

/* ===== FOOTER ===== */
body{padding-bottom:64px}
#Footer{position:fixed;left:0;right:0;bottom:0;z-index:40;box-sizing:border-box;width:100%;
        display:flex;align-items:center;justify-content:center;gap:8px 26px;flex-wrap:wrap; /* centered (Richard 10-06) */
        background:#0a0a0a;border-top:4px solid #d10a0a;color:#fff;padding:8px 20px;
        font-family:'Barlow',Arial,sans-serif;font-size:16px;font-weight:600;line-height:1.3;letter-spacing:0;
        box-shadow:0 -4px 14px rgba(0,0,0,.35)}
#Footer :not(i){font-family:'Barlow',Arial,sans-serif;letter-spacing:0} /* never the <i> icons: they need the Font Awesome font */
#Footer a{color:#fff;text-decoration:none}
#Footer a:hover,#Footer a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
#Footer a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
#Footer i{color:#d10a0a}

.hfx-phone{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700}
.hfx-phone .hfx-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#d10a0a}
#Footer .hfx-ico i{color:#fff;font-size:16px}

.hfx-place{display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap;justify-content:center}
.hfx-place::before{content:"";width:2px;height:22px;background:#d10a0a;margin-right:-6px} /* red divider between phone and brand */
.hfx-brand{font-family:'Anton',Impact,'Arial Narrow',sans-serif !important;font-weight:400;font-size:19px;letter-spacing:.5px !important;
           text-transform:uppercase;color:#fff;white-space:nowrap}
.hfx-addr{display:inline-flex;align-items:center;gap:7px;color:#e6e6ee;font-weight:600}
.hfx-fb{display:inline-flex;align-items:center;gap:7px;background:#1877f2;color:#fff !important;font-weight:700;font-size:15px;
        padding:5px 12px;border-radius:999px;text-decoration:none !important}
.hfx-fb:hover{background:#0d5bc4}
#Footer .hfx-fb i{color:#fff;font-size:16px}
.hfx-rate{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#0a0a0a !important;font-weight:700;font-size:15px;
          padding:5px 12px;border-radius:999px;text-decoration:none !important}
.hfx-rate:hover{background:#fff3cc}
#Footer .hfx-rate i{color:#fbbc04;font-size:15px}
.hfx-copy{font-size:13px;font-weight:400;color:#b9b9c6;white-space:nowrap}
#Footer .hfx-copy i{color:#b9b9c6}

@media (max-width:760px){
    body{padding-bottom:96px}
    #Footer{justify-content:center;text-align:center;padding:6px 12px;gap:4px 14px}
    .hfx-phone{font-size:18px}
    .hfx-phone .hfx-ico{width:28px;height:28px}
    .hfx-place{justify-content:center;gap:2px 10px}
    .hfx-place::before{display:none}
    .hfx-brand{font-size:16px}
    .hfx-addr{font-size:14px}
    .hfx-copy{display:none}
}