/* Lightweight global shell — no Tailwind. Full utilities live in /themes/styles/global/app-tailwind.css (commerce themes only). */

/* NProgress Custom Styling */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #ccff00 !important;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow:
    0 0 10px #ccff00,
    0 0 5px #ccff00;
  opacity: 1;
  transform: rotate(3deg) translate(0px, -4px);
}

html {
  max-width: 100%;
}

body {
  margin: 0;
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bs-body-bg, #ffffff);
  color: var(--bs-body-color, #000000);
  max-width: 100%;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.btn-primary {
  background-color: var(--bs-primary, #000000);
  color: var(--bs-white, #ffffff);
}

.btn-primary:hover {
  background-color: var(--bs-primary-hover, #333333);
}

.text-primary {
  color: var(--bs-primary, #000000);
}

.bg-primary {
  background-color: var(--bs-primary, #000000);
}

.border-primary {
  border-color: var(--bs-primary, #000000);
}

.link-primary {
  color: var(--bs-primary, #000000);
}

.link-primary:hover {
  color: var(--bs-primary-hover, #333333);
}

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --radius: 0.5rem;
}

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

* {
  border-color: hsl(var(--border));
}

[data-debug-wrapper="true"] {
  display: contents !important;
}

[data-debug-wrapper="true"] > * {
  margin-left: inherit;
  margin-right: inherit;
  margin-top: inherit;
  margin-bottom: inherit;
  padding-left: inherit;
  padding-right: inherit;
  padding-top: inherit;
  padding-bottom: inherit;
  column-gap: inherit;
  row-gap: inherit;
  gap: inherit;
  border-left-width: inherit;
  border-right-width: inherit;
  border-top-width: inherit;
  border-bottom-width: inherit;
  border-left-style: inherit;
  border-right-style: inherit;
  border-top-style: inherit;
  border-bottom-style: inherit;
  border-left-color: inherit;
  border-right-color: inherit;
  border-top-color: inherit;
  border-bottom-color: inherit;
}

.navbar-brand img {
  width: auto;
  height: auto;
  max-height: 56px;
  object-fit: contain;
}

header .dropdown-toggle {
  border-top-color: var(--bs-utility-navbar-text) !important;
  color: var(--bs-utility-navbar-text) !important;
}
header .arrow-icon {
  border-top-color: var(--bs-utility-navbar-text) !important;
  color: var(--bs-utility-navbar-text) !important;
}

.subcategory-list {
  color: #6e6e6e !important;
  padding-bottom: 10px !important;
}

.subcategory-list li a {
  color: #6e6e6e !important;
}

.subcategory-list li a:hover {
  color: #14142b !important;
}

.fbba-nav-icon {
  background: #1d428a !important;
  color: white !important;
}
.fbba-nav-icon svg {
  color: white !important;
}

.cr-border {
  height: 72px;
  width: 72px;
  border-radius: 50%;
  border: 3px solid var(--bs-primary);
  transition: 300ms ease-in-out all;
}
ul a:hover .cr-border {
  transform: scale(1.1);
}

.aggies .fbba-nav-icon {
  background: #eff0f6 !important;
  color: #000b11 !important;
}
.aggies .fbba-nav-icon svg {
  color: #000b11 !important;
}
.fbba-shop-nav.fbba-team-utility-nav {
  background-color: rgb(105, 75, 2);
  box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 32px 0px;
}

@media (min-width: 1280px) {
  @media (min-width: 1580px) {
    .xl\:container {
      max-width: 1580px !important;
    }
  }
}

@media (max-width: 576px) {
  header .bg-mobile {
    background-color: rgb(234, 236, 240) !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 1px !important;
  }
  header .cart-icon {
    background: white !important;
    border-radius: 30px !important;
  }
  header .cart-icon svg {
    color: #14142b !important;
  }
  .user-icon {
    background: white !important;
    color: #14142b !important;
  }
  .toggle-mobile-menu svg {
    color: #14142b !important;
  }
  .search-icon-mobile {
    background-color: transparent !important;
  }
}

@media screen and (max-width: 1023px) {
  input:not(
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="hidden"],
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="file"],
    [type="image"]
  ),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ============================================
   Accessibility: keyboard focus visibility
   ============================================ */

/* Restore a visible keyboard focus indicator globally (WCAG 2.4.7).
   Many components strip outlines via `outline-none`; this override only
   applies during keyboard navigation (:focus-visible), so mouse and touch
   interactions are unaffected. The !important is required to beat Tailwind's
   `outline-none` utility, which also carries higher source order.
   Form fields (input/select/textarea) are excluded — they use component focus styles. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--focus-ring-color, #0576f0) !important;
  outline-offset: 2px !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Skip-to-content link: visually hidden until keyboard-focused (WCAG 2.4.1).
   Rendered as the first focusable element by the theme layouts. */
.skip-to-content-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100000;
  padding: 10px 18px;
  border-radius: 8px;
  background: #14142b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}

.skip-to-content-link:focus,
.skip-to-content-link:focus-visible {
  transform: translateY(0);
}

/* The skip-link target receives programmatic focus; it doesn't need a ring
   of its own (it has tabindex="-1", which the global rule already excludes). */
#main-content {
  scroll-margin-top: 96px;
}