/* ── Singodia shared base CSS ──
   Centralized rules that are byte-identical (after whitespace normalization)
   across the large majority of Components/Web/Pages/*.razor style blocks.
   Verified via automated diff (2026-08-04) across all 73 page files:
     - reset block:   59/73 pages use this exact rule (14 use a lighter `* {}` reset, left local)
     - html:           71/73 pages identical
     - a:               71/73 pages identical
     - .container:      69/73 pages identical (2 outliers use 1400px/900px max-width, left local)

   NOTE: :root variables below are the default Singodia palette required by
   navbar.css / footer.css. Festive pages may still override them locally.
*/

:root {
    --color-primary: #c0392b;
    --color-primary-dark: #a93226;
    --color-secondary: #f39c12;
    --color-accent: #2980b9;
    --color-bg: #fdf8f4;
    --color-white: #ffffff;
    --color-text: #1e1e2a;
    --color-text-muted: #4a4a5a;
    --color-border: #e8e0d8;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.10);
    --radius: 12px;
    --radius-lg: 20px;
    --transition: 0.25s ease;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Phase 3: bucketed defaults for .btn / .page-banner / .section-title ──
   Survey of all 73 pages' local <style> blocks found:
     - .btn: 40/73 pages share this exact declaration set (this is the site
       default below). Remaining pages fall into a handful of one-off /
       family variants (festive pages add font-family + smaller padding,
       admin/form pages add justify-content, a few dashboard pages use a
       square radius). Those variant pages keep their local .btn override
       in their own <style> block, which wins via normal CSS cascade
       (page <style> renders after this stylesheet's <link> in <head>).
     - .page-banner: 27/73 pages share this exact declaration set (default
       below). Other pages are per-"page family" variants (festival pages
       use a taller banner + colored bottom border keyed to that festival's
       accent color, e.g. --xmas-gold/--diwali-gold/--durga-gold) — those
       are intentional and left as local overrides.
     - .section-title: 18/73 pages share this exact declaration set
       (default below). Remaining pages have individually-tweaked
       font-size/spacing and are left local.
   :root color variables were surveyed too but deliberately NOT centralized:
   :root is a genuinely global CSS scope, and multiple pages' <style> blocks
   can be present in the DOM at once during Blazor Server SPA navigation, so
   merging per-page palettes into shared :root risks one page's theme
   bleeding into another. Each page's one-line :root override is cheap to
   keep local. */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    background: var(--color-primary);
    color: var(--color-white);
}

.page-banner {
    padding: 70px 0 50px;
    background: linear-gradient(135deg, #1e1e2a 0%, #2d2d44 100%);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* ── Festival-cluster page banners (10 pages): identical position/padding/
   overflow/text-align, differing only by a per-page accent color (and one
   page's gradient end-color) supplied via inline CSS custom properties on
   the <section> element. See Data/DbInitializer.cs BodyHtml for each slug. */
.page-banner.page-banner--festival {
    position: relative;
    padding: 60px 0 40px;
    background: linear-gradient(135deg, #1e1e2a 0%, var(--festival-bg-end, #3d1f1a) 100%);
    border-bottom: 3px solid var(--festival-accent, var(--color-secondary));
    overflow: hidden;
    text-align: center;
}

.section-title {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}
