/* =================================================================
   UBG Airsoft - shared base styles
   Loaded by EVERY page: the main site and the online shop.
   Holds the fonts, the brand colours and the parts of the page that
   are the same everywhere: announcement bar, header and footer.

   To change a brand colour or font, change it here once.
   Class names start with "ubg-" so they never clash with the shop's.
   ================================================================= */

@font-face{font-family:'UniversCond';src:url('fonts/UniversCom-47LightCond.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'UniversCond';src:url('fonts/UniversCom-67BoldCond.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'UniversBlack';src:url('fonts/UniversCom-85XBlack.ttf') format('truetype');font-weight:900;font-display:swap}

:root{
  /* brand - red sampled from the 2026 street sign artwork */
  --red:#D12729;
  --red-dark:#A81E20;
  --black:#0B0B0C;
  --char:#18181A;
  --char-2:#26262A;
  --ink:#1B1B1D;
  --muted:#6E6E73;
  --line:#E3E3E5;
  --paper:#F4F4F2;
  --white:#fff;
  --ok:#1F7A3D;

  --radius:6px;
  --max:1200px;
  --hdr-h:72px;

  --head:'UniversCond','Arial Narrow',Arial,sans-serif;
  --display:'UniversBlack','Arial Black',Arial,sans-serif;
  --body:'UniversCond','Arial Narrow',Arial,Helvetica,sans-serif;
}

/* ---------------- announcement bar + closed notice ---------------- */
#site-banner[hidden]{display:none}
#site-banner{font-family:var(--head);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.03em}
#site-banner .sb-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;
  padding:9px 16px;font-size:16px;line-height:1.25;text-align:center;color:#fff;background:var(--red)}
#site-banner .sb-item + .sb-item{border-top:1px solid rgba(255,255,255,.3)}
#site-banner .sb-dark{background:var(--char-2)}
#site-banner .sb-yellow{background:#F2C230;color:#1B1B1D}
#site-banner .sb-closed{background:#8F1517;font-size:19px;padding:12px 16px}
#site-banner .sb-link{display:inline-block;padding:3px 12px;border:2px solid currentColor;border-radius:4px;
  color:inherit;font-size:14px;text-decoration:none;white-space:nowrap}
#site-banner .sb-link:hover,#site-banner .sb-link:focus{background:rgba(255,255,255,.2)}
#site-banner .sb-yellow .sb-link:hover{background:rgba(0,0,0,.08)}

/* ---------------- header ---------------- */
.ubg-hdr{background:var(--black);color:#fff;position:sticky;top:0;z-index:90;border-bottom:3px solid var(--red);
  font-family:var(--body)}
.ubg-hdr *{box-sizing:border-box}
.ubg-hdr-in{max-width:var(--max);margin:0 auto;padding:0 20px;height:var(--hdr-h);display:flex;align-items:center;gap:20px}
.ubg-brand{display:flex;align-items:center;color:#fff;text-decoration:none;flex:0 0 auto}
.ubg-brand svg{height:44px;width:auto;display:block;color:#fff}
.ubg-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.ubg-nav a{font-family:var(--head);font-weight:700;font-style:italic;text-transform:uppercase;text-decoration:none;
  font-size:17px;letter-spacing:.03em;padding:10px 11px;color:#E9E9EA;border-radius:4px;white-space:nowrap;line-height:1}
.ubg-nav a:hover,.ubg-nav a:focus-visible{color:#fff;background:var(--char-2)}
.ubg-nav a.on{color:#fff;box-shadow:inset 0 -3px 0 var(--red)}
.ubg-nav .ubg-cart{display:inline-flex;align-items:center;gap:6px}
.ubg-nav .ubg-cart .cart-count{background:var(--red);color:#fff;font-style:normal;border-radius:999px;font-size:13px;
  min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px}
.ubg-book{display:inline-flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;
  font-style:italic;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border-radius:var(--radius);
  padding:11px 16px;font-size:16px;line-height:1;background:var(--red);color:#fff;white-space:nowrap;margin-left:8px}
.ubg-book:hover,.ubg-book:focus-visible{background:var(--red-dark);color:#fff}
.ubg-burger{display:none;margin-left:4px;background:none;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:8px}
@media (max-width:1020px){
  .ubg-burger{display:block}
  .ubg-book{margin-left:auto}
  .ubg-nav{display:none;position:absolute;left:0;right:0;top:calc(var(--hdr-h) + 3px);background:var(--black);
    flex-direction:column;align-items:stretch;padding:6px 16px 16px;border-bottom:3px solid var(--red);
    max-height:calc(100vh - var(--hdr-h));overflow:auto}
  .ubg-nav.open{display:flex}
  .ubg-nav a{padding:15px 8px;font-size:20px;border-bottom:1px solid var(--char-2);border-radius:0}
  .ubg-nav a.on{box-shadow:inset 4px 0 0 var(--red)}
}
@media (max-width:380px){
  .ubg-hdr-in{gap:10px;padding:0 14px}
  .ubg-brand svg{height:38px}
  .ubg-book{padding:10px 12px;font-size:15px}
}

/* ---------------- footer ---------------- */
.ubg-ftr{background:var(--black);color:#CFCFD2;padding:60px 0 26px;border-top:3px solid var(--red);font-family:var(--body);font-size:17px;line-height:1.5}
.ubg-ftr *{box-sizing:border-box}
.ubg-ftr-in{max-width:var(--max);margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
.ubg-ftr svg{height:92px;width:auto;color:#fff;display:block}
.ubg-ftr h4{font-family:var(--head);font-weight:700;font-style:italic;text-transform:uppercase;color:#fff;font-size:18px;margin:0 0 12px;letter-spacing:.04em}
.ubg-ftr a{color:#CFCFD2;text-decoration:none}
.ubg-ftr a:hover{color:#fff;text-decoration:underline}
.ubg-ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ubg-ftr p{margin:16px 0 0}
.ubg-ftr-bot{max-width:var(--max);margin:44px auto 0;padding:20px 20px 0;border-top:1px solid var(--char-2);font-size:15px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 20px}
.ubg-ftr-bot > span{display:inline-flex;gap:16px;flex-wrap:wrap}
@media (max-width:860px){.ubg-ftr-in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ubg-ftr-in{grid-template-columns:1fr}}

/* Visually hidden but read by screen readers */
.ubg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ubg-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#000;padding:10px 14px}
.ubg-skip:focus{left:10px;top:10px}