/*
 | SanimangalDham — CSS "bridge" for the Settings + Events additions.
 |
 | WHY THIS FILE EXISTS
 | --------------------
 | The compiled Tailwind bundle in public/build/ was generated BEFORE the admin
 | Settings page, the Events module, and the header/footer edits were added.
 | Tailwind only compiles the utility classes it can see at build time, so a
 | handful of standard utilities used by the newer Blade views are not present
 | in that older bundle. This file re-declares exactly those utilities (with the
 | same values Tailwind would produce) so every new page renders correctly even
 | if the front-end assets have not been rebuilt yet.
 |
 | It is loaded AFTER the Vite stylesheet (see layouts/app.blade.php) so these
 | rules win where needed. Values match the Tailwind v4 defaults and the brand
 | palette in resources/css/app.css, so there is NO visual conflict once assets
 | are rebuilt.
 |
 | SAFE TO REMOVE after you run `npm run build` on a machine with a working
 | Node tool-chain (e.g. your Windows/Laragon box) — the rebuilt bundle will
 | contain all of these classes natively. Until then, keep this file.
*/

/* ---- colours ---- */
.bg-amber-100 { background-color: #fef3c7; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-red-500 { color: #ef4444; }
.border-brand-200 { border-color: #ffd0a1; }

/* ---- width / height ---- */
.w-auto { width: auto; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.h-32 { height: 8rem; }
.h-36 { height: 9rem; }
.h-56 { height: 14rem; }
.h-64 { height: 16rem; }
.max-w-\[180px\] { max-width: 180px; }
.max-w-\[150px\] { max-width: 150px; }

/* ---- spacing ---- */
.p-10 { padding: 2.5rem; }
.p-0\.5 { padding: 0.125rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-1 { row-gap: 0.25rem; }
.space-y-14 > :not([hidden]) ~ :not([hidden]) { margin-top: 3.5rem; }

/* ---- flexbox / object / opacity / filters ---- */
.justify-end { justify-content: flex-end; }
.object-contain { object-fit: contain; }
.opacity-90 { opacity: 0.9; }
.grayscale-\[15\%\] { filter: grayscale(0.15); }

/* ---- typography ---- */
.text-\[10px\] { font-size: 10px; line-height: 1rem; }
.font-normal { font-weight: 400; }

/* ---- hover states ---- */
.hover\:opacity-100:hover { opacity: 1; }
.hover\:text-gray-700:hover { color: #374151; }
.hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* ---- responsive: sm (>=640px) ---- */
@media (min-width: 640px) {
    .sm\:p-10 { padding: 2.5rem; }
    .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
}

/* ---- responsive: md (>=768px) ---- */
@media (min-width: 768px) {
    .md\:w-2\/5 { width: 40%; }
    .md\:h-full { height: 100%; }
}

/*
 | ---- Dashboard + media-library additions ----
 | Used by the rewritten admin dashboard and media library, which were added
 | after the public/build bundle was generated. Values match Tailwind v4
 | defaults / the brand palette in resources/css/app.css, so there is no visual
 | conflict once assets are rebuilt.
*/
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.hover\:text-brand-500:hover { color: #ff7a00; }

@media (min-width: 640px) {
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/*
 | Lightweight "prose" styling for admin-authored article/event bodies.
 | The Tailwind Typography plugin is not bundled, so `.prose` would otherwise be
 | inert. These conservative defaults give blog posts and event descriptions
 | readable rhythm without pulling in the plugin.
*/
.prose { color: #374151; line-height: 1.75; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin-top: 1.25em; margin-bottom: 1.25em; }
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #111827; font-weight: 700; line-height: 1.3;
    margin-top: 1.6em; margin-bottom: 0.6em;
}
.prose h1 { font-size: 1.875em; }
.prose h2 { font-size: 1.5em; }
.prose h3 { font-size: 1.25em; }
.prose h4 { font-size: 1.1em; }
.prose ul, .prose ol { margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.5em; margin-bottom: 0.5em; }
.prose a { color: var(--smd-primary, #ff7a00); text-decoration: underline; }

/* Visual CMS editor output on home, donation, impact and document cards. */
.smd-rich > :first-child { margin-top: 0; }
.smd-rich > :last-child { margin-bottom: 0; }
.smd-rich p { margin: .7em 0; }
.smd-rich h2, .smd-rich h3, .smd-rich h4 { color: inherit; font-weight: 700; line-height: 1.3; margin: 1.1em 0 .4em; }
.smd-rich h2 { font-size: 1.5em; }
.smd-rich h3 { font-size: 1.25em; }
.smd-rich h4 { font-size: 1.1em; }
.smd-rich ul, .smd-rich ol { margin: .7em 0; padding-left: 1.5em; }
.smd-rich ul { list-style: disc; }
.smd-rich ol { list-style: decimal; }
.smd-rich a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: #111827; font-weight: 600; }
.prose blockquote {
    border-left: 3px solid #e5e7eb; padding-left: 1em;
    font-style: italic; color: #4b5563; margin: 1.5em 0;
}
.prose img { border-radius: 0.5rem; margin: 1.5em 0; max-width: 100%; height: auto; }
.prose hr { border-color: #e5e7eb; margin: 2em 0; }

/*
 | ============================================================
 |  CLEAN-UP LAYER — calm, spacious, institutional polish
 |  (reference look: akshayapatra.org). Added 2026-09-29.
 |
 |  Loaded AFTER the Vite bundle, so these rules win. 100%
 |  render-safe: plain CSS, NO `npm run build` required. Keeps
 |  the orange brand identity — just adds whitespace, calms the
 |  shadows/gradients and tidies the type hierarchy.
 | ============================================================
*/

/* 1) Generous, consistent vertical rhythm for the homepage
      sections (replaces the tighter py-14 / sm:py-16 wrapper). */
.smd-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 640px) {
    .smd-section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
}

/* 2) Calmer, flatter call-to-action buttons — less heavy coloured
      glow, a light lift only on hover (institutional feel). */
.smd-btn-primary { box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08); }
.smd-btn-primary:hover { box-shadow: 0 6px 16px -6px rgba(255, 122, 0, 0.45); }
.smd-btn-accent { box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08); }
.smd-btn-accent:hover { box-shadow: 0 6px 16px -6px rgba(18, 183, 106, 0.45); }

/* 3) Cleaner content cards — hairline border + very soft shadow,
      gentle hover lift (calmer than the shadow-sm -> shadow-xl jump). */
.smd-card {
    border: 1px solid #eef0f2;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.smd-card:hover {
    box-shadow: 0 18px 40px -22px rgba(17, 24, 39, 0.25);
    transform: translateY(-2px);
}

/* 4) Tidier headings — balanced line wrapping (ignored by older
      browsers, so it degrades safely). Scoped to public pages only
      (.smd-public is on the public <body>) so the admin UI is untouched. */
.smd-public h1, .smd-public h2 { text-wrap: balance; }

/* 5) Softer, cleaner brand hero wash (used by some inner pages). */
.smd-hero {
    background:
        radial-gradient(900px 380px at 88% -18%, #ffedd8 0%, rgba(255, 248, 241, 0) 60%),
        linear-gradient(180deg, #fffaf4 0%, #ffffff 72%);
}