@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
  font-family: "Inter", sans-serif;
}

@theme {
  /* colors theme */
  --color-bg: #FAFAFA;
  --color-primary: #ffd900;
  --color-foreground: #111111;
  --color-muted-foreground: #737373;
  --color-secondary-foreground: #333333;
  --color-border: #d9d9d9;
}

/* Custom Navigation Link Styles for Desktop */
.nav-link-tw {
  @apply relative px-5 py-2 text-xs tracking-[0.15em] font-medium transition-colors duration-300 text-muted-foreground hover:text-foreground;
}

.nav-link-tw::after {
  content: '';
  @apply absolute bottom-0 left-5 right-5 h-[2px] bg-transparent transition-colors duration-300;
}

.nav-link-tw.active {
  @apply text-primary;
}

.nav-link-tw.active::after {
  @apply bg-primary;
}

.nav-link-tw.active .nav-number-tw {
  color: var(--color-primary);
}

/* Hero Overlay Gradients */
.hero-overlay-tw {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  @apply bg-linear-to-t from-bg via-bg/60 to-transparent;
  z-index: 1;
  pointer-events: none;
}

.heading-title {
  @apply font-mono text-[10px] text-primary tracking-[0.4em] block mb-4 uppercase;
}

.heading2 {
  @apply text-3xl lg:text-5xl font-black tracking-tight uppercase;
}

.heading2 span {
  @apply text-primary;
}

.heading3 {
  @apply text-2xl lg:text-3xl font-black mb-4 leading-tight;
}

.p-tx {
  @apply text-muted-foreground leading-relaxed text-sm lg:text-base;
}

.p-img {
  @apply w-full h-64 lg:h-80 object-cover object-top;
}

.footer-nav {
  @apply flex items-center gap-2 text-sm text-secondary-foreground hover:text-primary transition-colors;
}

/* Mobile Menu Transitions and Staggered Animations */
#mobile-menu {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

#mobile-menu.mobile-menu-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-item {
  opacity: 0;
  transform: translateY(-30px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  will-change: transform, opacity;
}

#mobile-menu.mobile-menu-open .mobile-nav-item {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered transition delays for links and button when opening */
#mobile-menu.mobile-menu-open .mobile-nav-item:nth-child(1) {
  transition-delay: 0.1s;
}

#mobile-menu.mobile-menu-open .mobile-nav-item:nth-child(2) {
  transition-delay: 0.16s;
}

#mobile-menu.mobile-menu-open .mobile-nav-item:nth-child(3) {
  transition-delay: 0.22s;
}

#mobile-menu.mobile-menu-open .mobile-nav-item:nth-child(4) {
  transition-delay: 0.28s;
}

#mobile-menu.mobile-menu-open .mobile-nav-item:nth-child(5) {
  transition-delay: 0.34s;
}


/* Parts Search Results Table*/

table.searchResult {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 20px 0;
    border-top: 1px solid var(--color-border);
}

/* Fixed column widths so they remain the same on every page */
.searchResult th:nth-child(1),
.searchResult td:nth-child(1) {
    width: 18%;
}

.searchResult th:nth-child(2),
.searchResult td:nth-child(2) {
    width: 27%;
}

.searchResult th:nth-child(3),
.searchResult td:nth-child(3) {
    width: 40%;
}

.searchResult th:nth-child(4),
.searchResult td:nth-child(4) {
    width: 15%;
}

.searchResult tr:nth-of-type(odd) {
    background: #f8f7f4;
}

.searchResult th {
    background: var(--color-bg);
    color: var(--color-foreground);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-right: 1px solid var(--color-border);
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.searchResult th:last-child {
    border-right: none;
}

.searchResult td {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: var(--color-foreground);
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.searchResult thead {
    border-bottom: 1px solid var(--color-border);
}

.searchResult td.inStock {
    color: #19955f;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
}

.searchResult td.enquire {
    color: var(--color-primary);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #f3e8bf;
}

.searchResult td.enquire a {
    color: var(--color-primary);
}

.searchResult td.enquire a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
}

.searchResult td a {
    transition: color 0.3s ease;
}


/* Image Widget */

.hmRow_1List_2 {
    background: transparent;
}

.hmRow_1List_2 img {
    display: block;
    width: 100%;
    height: auto;
}

.hmRow_1List_2 p {
    margin: 0;
    padding: 16px 20px;
    background: #333333;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

/* Pagination Arrow Buttons */

.nextPrev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 18px;
    line-height: 1;
}