/*
 * Utilities used in Blade templates that app.css does not define.
 *
 * app.css is minified Tailwind v2 output that was committed to the repo and is no longer
 * regenerated (nothing in the deploy runs Vite). The templates have since been written against
 * newer Tailwind idioms, so those classes were being silently ignored by the browser.
 *
 * Values follow the Tailwind defaults so the classes behave as their names imply.
 * Run `php scripts/audit-styles.php` to find any new gaps.
 *
 * Loaded after app.css by every layout in resources/views/layouts/.
 */

/* Spacing */
.ml-5 { margin-left: 1.25rem; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mr-0 { margin-right: 0; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-10 { margin-top: 2.5rem; }
.mb-5 { margin-bottom: 1.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.pt-1 { padding-top: 0.25rem; }
.pb-8 { padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.gap-1 { gap: 0.25rem; }
.top-6 { top: 1.5rem; }

/* Sizing */
.w-fit { width: fit-content; }
.w-px { width: 1px; }
.w-\[75\%\] { width: 75%; }
.max-w-full { max-width: 100%; }
.max-w-5xl { max-width: 64rem; }
.min-w-full { min-width: 100%; }
.min-h-0 { min-height: 0; }
.h-40 { height: 10rem; }
.h-52 { height: 13rem; }
.h-64 { height: 16rem; }
.h-\[280px\] { height: 280px; }
.max-h-\[420px\] { max-height: 420px; }

/* Lists */
.list-disc { list-style-type: disc; }

/* Typography */
.tracking-widest { letter-spacing: 0.1em; }
.leading-none { line-height: 1; }
.text-5xl { font-size: 3rem; line-height: 1; }
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Colours — Tailwind v2 palette, matching the values already used in app.css */
.bg-blue-50 { background-color: #eff6ff; }
.bg-red-50 { background-color: #fef2f2; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); }
.bg-black\/45 { background-color: rgba(0, 0, 0, 0.45); }

.border-trueGray-300 { border-color: #d4d4d4; }
.border-blue-300 { border-color: #93c5fd; }
.border-red-200 { border-color: #fecaca; }
.border-emerald-200 { border-color: #a7f3d0; }
.border-white { border-color: #fff; }

.text-blue-700 { color: #1d4ed8; }
.text-blue-800 { color: #1e40af; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-emerald-700 { color: #047857; }

/* Borders */
.border-l { border-left-width: 1px; }
.border-4 { border-width: 4px; }

/*
 * Gradients. These build the dark scrim that sits between a hero photo and the white heading
 * over it, so without them the text was sitting on an unmodified photograph.
 * The "from" rule must precede "via", which overrides the stop list it sets.
 */
.bg-linear-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-black\/70 {
    --tw-gradient-from: rgba(0, 0, 0, 0.7);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}
.via-black\/45 {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, 0.45), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}
.to-transparent { --tw-gradient-to: transparent; }

/* Opacity */
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.disabled\:opacity-60:disabled { opacity: 0.6; }

/* Overflow and object fit */
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.object-contain { object-fit: contain; }

/* Stacking — dropdowns and the mobile menu overlay rely on these */
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-60 { z-index: 60; }

/* Hover states */
.hover\:bg-white:hover { background-color: #fff; }
.hover\:bg-trueGray-50:hover { background-color: #fafafa; }
.hover\:text-blue-700:hover { color: #1d4ed8; }
.hover\:text-blue-800:hover { color: #1e40af; }
.hover\:text-trueGray-800:hover { color: #262626; }

/*
 * Typography plugin variants. The plugin itself is not installed, so these reproduce the
 * intended effect directly rather than relying on it.
 */
.prose-headings\:text-trueGray-900 :is(h1, h2, h3, h4, h5, h6) { color: #171717; }
.prose-p\:text-trueGray-700 p { color: #404040; }
.prose-li\:text-trueGray-700 li { color: #404040; }

@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-end { align-items: flex-end; }
}

@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:w-auto { width: auto; }
    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .md\:h-72 { height: 18rem; }
    .md\:h-\[340px\] { height: 340px; }
    .md\:space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem; }
}