/* ============================================
   Base Styles - Reset & Typography
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--wdtFontTypo_Base);
  font-size: var(--wdtFontSize_Base);
  font-weight: var(--wdtFontWeight_Base);
  line-height: var(--wdtLineHeight_Base);
  color: var(--wdtBodyTxtColor);
  background-color: var(--wdtBodyBGColor);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--wdtLinkColor);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:visited {
    color: inherit;
}

a:hover {
  color: var(--wdtLinkHoverColor);
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wdtFontTypo_Alt);
  font-weight: var(--wdtFontWeight_Alt);
  line-height: var(--wdtLineHeight_Alt);
  color: var(--wdtHeadAltColor);
}

h1 { font-size: var(--wdtFontSize_H1); }
h2 { font-size: var(--wdtFontSize_H2); }
h3 { font-size: var(--wdtFontSize_H3); }
h4 { font-size: var(--wdtFontSize_H4); }
h5 { font-size: var(--wdtFontSize_H5); }
h6 { font-size: var(--wdtFontSize_H6); }

/* Utility */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}

.section {
  padding: var(--section-padding-y) 0;
}

.section--alt {
  background: var(--wdtTertiaryColor);
}

/* Layout Utilities - Flex & Grid */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.d-none {
  display: none !important;
}

.bg-white {
  background-color: var(--wdtBodyBGColor) !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.w-10 {
    width: 2.5rem;
}
.h-10 {
    height: 2.5rem;
}
.rounded-full {
    border-radius: 9999px;
}
.justify-center {
    justify-content: center;
}
.items-center {
    align-items: center;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-white
 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.ml-4 {
    margin-left: 1rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.font-semibold {
    font-weight: 600;
}
.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.inset-0 {
    inset: 0px;
}

.rotate-6 {
    --tw-rotate: 6deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
    transform: translate(0, 0) rotate(6deg) skewX(0) skewY(0) scaleX(1) scaleY(1);
}
.rounded-3xl {
    border-radius: 1.5rem;
}
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}