/* ===================================================================
   Supplementary Tailwind utilities for the PUBLIC site.

   The public site now shares the same pre-compiled vendor Tailwind
   build the admin dashboard uses (theme/assets/css/tailwind.css,
   loaded in layouts/guest.blade.php alongside brand-overrides.css).
   That vendor file only contains the utility classes the admin
   dashboard's own markup happens to use — it's missing some values
   the public site's marketing-style layouts need (larger spacing,
   wider grids, some transform utilities). Rather than hand-editing
   the 8,340-line generated vendor file, missing utilities the public
   site actually needs get added here, following the same pattern as
   brand-overrides.css / bootstrap-overrides.css. Loaded after
   tailwind.css and brand-overrides.css in guest.blade.php.
   =================================================================== */

.translate-x-full { --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.translate-x-0    { --tw-translate-x: 0px;  transform: translate(var(--tw-translate-x), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }

/* THE MAIN FIX: Tailwind's stock .container only sets max-width per
   breakpoint — unlike Bootstrap's .container, it does NOT include
   margin:0 auto to center itself (Tailwind expects you to also add
   `mx-auto` alongside `container` on every element, which this
   codebase's markup never does since it was written for Bootstrap).
   Without this, every `<div class="container">` across the whole
   public site sits flush against the left edge once it hits its
   max-width cap instead of centering — the "everything shifted left"
   bug. Centering it here fixes every page at once. */
.container { margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

/* Standard left/right gutter for the whole public site — scales up at
   wider viewports instead of staying a flat 16px, matching the 28px
   already used by layouts/profile.blade.php's .nav-inner (provider
   profile pages) so every public layout converges on the same edge
   spacing at desktop width. */
@media (min-width: 640px) {
    .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .container { padding-left: 1.75rem; padding-right: 1.75rem; }
}

/* mt-auto / h-auto — used by public/keyword.blade.php card layouts
   (e.g. pinning a card's CTA button to the bottom of a flex column,
   and letting Bootstrap-style .img-fluid replacements size naturally). */
.mt-auto { margin-top: auto; }
.h-auto  { height: auto; }

/* col-span-full — used for @forelse @empty states inside grid.grid-cols-*
   containers (Bootstrap's col-12 equivalent: always spans the full row
   regardless of breakpoint). */
.col-span-full { grid-column: 1 / -1; }

/* bg-gray-50 — Bootstrap's bg-light equivalent, used by auth/register.blade.php's
   page background. */
.bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); }

/* w-10/12 — Bootstrap's col-sm-10 equivalent, used by auth/register.blade.php's
   registration-type cards. */
.w-10\/12 { width: 83.333333%; }

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:w-10\/12 { width: 83.333333%; }
}

@media (min-width: 768px) {
    .md\:mt-0 { margin-top: 0px; }
    .md\:inline { display: inline; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:w-1\/6 { width: 16.666667%; }
}

@media (min-width: 1024px) {
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:w-5\/12 { width: 41.666667%; }
    .lg\:w-7\/12 { width: 58.333333%; }
    .lg\:mb-0 { margin-bottom: 0px; }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}