/* Global site styles shared across all pages */

/* Reserve scrollbar space to avoid layout shifts across pages */
html {
  scrollbar-gutter: stable;
}

/* Prevent accidental horizontal overflow causing page offset */
body {
  overflow-x: hidden;
}

/* Material Symbols configuration */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  font-size: inherit;
}

/* Brand title font */
.brand-title {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
}

/* Consistent logo sizing */
img.logo-24 {
  height: 24px;
  width: auto;
}

img.logo-32 {
  height: 42px;
  width: auto;
}

/* Common utility bundles (no Tailwind build step required) */
.nav-link {
  font-size: 0.875rem;            /* text-sm */
  font-weight: 500;               /* font-medium */
  color: #d1d5db;                 /* text-gray-300 */
  transition-property: color;     /* transition-colors */
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.section-title {
  color: #fcf8f8;                 /* text-text-dark on dark bg; overridden by Tailwind class if present */
  font-size: 22px;                /* text-[22px] */
  font-weight: 700;               /* font-bold */
  line-height: 1.25;              /* leading-tight (approx) */
  letter-spacing: -0.015em;       /* tracking-[-0.015em] */
  padding-bottom: 0.75rem;        /* pb-3 */
  padding-top: 1.25rem;           /* pt-5 */
  text-align: center;             /* text-center default */
}
@media (min-width: 640px) {       /* sm: */
  .section-title {
    text-align: left;             /* sm:text-left */
    font-size: 1.875rem;          /* sm:text-3xl => 30px (approx 1.875rem) */
    line-height: 2.25rem;         /* matching Tailwind text-3xl line-height */
  }
}

/* Primary button container (color kept via Tailwind classes in HTML) */
.btn {
  display: flex;                   /* flex */
  min-width: 84px;                 /* min-w-[84px] */
  cursor: pointer;                 /* cursor-pointer */
  align-items: center;             /* items-center */
  justify-content: center;         /* justify-center */
  overflow: hidden;                /* overflow-hidden */
  border-radius: 0.5rem;           /* rounded-lg */
  height: 2.5rem;                  /* h-10 */
  padding-left: 1rem;              /* px-4 */
  padding-right: 1rem;             /* px-4 */
  font-size: 0.875rem;             /* text-sm */
  font-weight: 700;                /* font-bold */
  line-height: 1.5;                /* leading-normal */
  letter-spacing: 0.015em;         /* tracking-[0.015em] */
}

/* Badge (colors kept via Tailwind classes in HTML) */
.badge {
  font-size: 0.75rem;              /* text-xs */
  font-weight: 500;                /* font-medium */
  padding: 0.25rem 0.625rem;       /* py-1 px-2.5 */
  border-radius: 9999px;           /* rounded-full */
}