/*
 * app-utilities.css — Tailwind utility class fallbacks
 *
 * The external Tailwind CSS bundle (coderifts.com/assets/tailwind.min.css) does
 * not include all utility classes used in the app's HTML pages. This file
 * provides the missing definitions so nav, footer, and icon layout work
 * correctly without relying on the external bundle's completeness.
 *
 * Loaded by: /try/index.html, /api/docs, and any other app page that uses the
 * shared nav/footer markup with Tailwind utility classes.
 */

/* === Visibility === */
.hidden { display: none !important; }

/* === Nav bar layout === */
nav .mx-auto { max-width: 72rem; margin-left: auto; margin-right: auto; }
nav .flex { display: flex; }
nav .h-full { height: 100%; }
nav .items-center { align-items: center; }
nav .justify-between { justify-content: space-between; }
nav .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
nav .gap-1 { gap: 0.25rem; }
nav .gap-2 { gap: 0.5rem; }
nav .gap-3 { gap: 0.75rem; }

/* === SVG icon sizing (nav + footer) === */
nav svg { width: 20px; height: 20px; max-width: 20px; max-height: 20px; flex-shrink: 0; }
nav .h-3.w-3, nav svg.h-3 { width: 12px; height: 12px; max-width: 12px; max-height: 12px; }
nav .h-4.w-4, nav svg.h-4 { width: 16px; height: 16px; max-width: 16px; max-height: 16px; }
nav .h-5.w-5, nav svg.h-5 { width: 20px; height: 20px; max-width: 20px; max-height: 20px; }
footer svg { width: 20px; height: 20px; max-width: 20px; max-height: 20px; flex-shrink: 0; }
footer svg.h-4 { width: 16px; height: 16px; max-width: 16px; max-height: 16px; }

/* === Responsive nav visibility === */
@media (min-width: 1024px) {
  nav .lg\:flex { display: flex !important; }
  nav .lg\:hidden { display: none !important; }
}
@media (max-width: 1023px) {
  nav .lg\:flex { display: none; }
}

/* === Dropdown positioning === */
nav .relative { position: relative; }
nav .dropdown-menu.absolute { position: absolute; }

/* === Inline-flex (CTA buttons) === */
.inline-flex { display: inline-flex; align-items: center; }

/* === Mobile menu layout === */
#mobile-menu .flex-col { display: flex; flex-direction: column; }
#mobile-menu .gap-2 { gap: 0.5rem; }
#mobile-menu .mt-2 { margin-top: 0.5rem; }

/* === Footer CTA section === */
footer .py-20 .mb-8.flex { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; }
footer .py-20 .mb-4 { margin-bottom: 1rem; }
footer .py-20 .mb-8:not(.flex) { margin-bottom: 2rem; }
footer .py-20 .mx-auto { margin-left: auto; margin-right: auto; }
footer .py-20 .max-w-lg { max-width: 32rem; }
footer .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
footer .text-center { text-align: center; }
footer .justify-center { display: flex; justify-content: center; }

/* === Footer newsletter form === */
footer form.flex { display: flex; align-items: center; gap: 0.5rem; }
footer .h-9 { height: 2.25rem; }

/* === Footer links grid === */
footer .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 640px) {
  footer .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  footer .grid { grid-template-columns: repeat(5, 1fr); }
}
footer .grid h4 { margin-bottom: 1rem; }
footer .grid ul { list-style: none; padding: 0; margin: 0; }
footer .grid ul li { margin-bottom: 0.625rem; }

/* === Footer bottom bar === */
footer .mt-12 { margin-top: 3rem; }
footer .pt-8 { padding-top: 2rem; }
footer .border-t { border-top: 1px solid var(--border); }
footer .flex-col { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
@media (min-width: 640px) {
  footer .sm\:flex-row { flex-direction: row; justify-content: space-between; }
}
footer .gap-4 { gap: 1rem; }
footer .flex.items-center.gap-4 { display: flex; align-items: center; gap: 1rem; }

/* === Footer section padding === */
footer .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
footer .max-w-6xl { max-width: 72rem; margin-left: auto; margin-right: auto; }
footer .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

/* === General text utilities === */
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-mono { font-family: var(--mono); }
.rounded-md { border-radius: 0.375rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }