@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-secondary;
  }
  .h1 {
    @apply text-2xl font-bold leading-[1.15] md:text-3xl;
  }
  .h2 {
    @apply text-xl font-bold leading-[1.25]  md:text-2xl;
  }
  .h3 {
    @apply text-md font-bold leading-[1.25] md:text-lg;
  }
}

.section-padding-primary {
  @apply py-[3.75rem] md:py-[6.25rem] xl:py-[7.5rem];
}

::selection {
  text-shadow: none;
  @apply bg-primary text-white;
}

/* Navbar Styles */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Flexbox for horizontal layout */
  gap: 1.5rem; /* Add spacing between items */
}

nav li {
  position: relative;
}

nav > ul > li {
  display: inline-block;
}

/* General Link Styles */
nav a {
  text-decoration: none;
  color: #333; /* Default color */
  font-size: 1rem;
  font-weight: bold; /* Make all menu items bold */
  padding: 0.5rem 0.75rem; /* Add padding for clickable area */
  transition: color 0.2s ease-in-out;
}

/* Hover Effects */
nav a:hover {
  color: #ff6600; /* Change color on hover */
}

/* Submenu Styles */
.submenu {
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
  background: #333;
  padding: 10px 0;
  min-width: 200px;
  z-index: 100;
}

.submenu .submenu {
  left: 100%;
  top: 0;
}

nav li:hover > .submenu {
  display: block;
}

.submenu li {
  padding: 8px 15px;
}

.submenu li a {
  color: #fff; /* Default color for all submenu items */
  text-decoration: none;
}

.submenu li:hover {
  background: #ff6600;
}

.has-submenu > a:after {
  content: '▼';
  margin-left: 5px;
  font-size: 12px;
}

/* Specific "ServiceNow" Menu Item Styling */
nav > ul > li:nth-child(2) > ul > li:first-child > a {
  color: #fff; /* Set the "ServiceNow" menu item text color to white */
}