/*
 * Styles for Democracy_Community.php
 * Extracted from the PHP page without changing selectors or declaration order.
 */

/* Extracted from Democracy_Community.php - style block 1 */
:root {
        --blue-500: #3b82f6;
        --blue-600: #2563eb;
        --blue-700: #1d4ed8;
        --blue-800: #1e3a8a;
        /* default fonts kept as-is, nothing custom imported */
        --font-serif: Georgia, "Times New Roman", Times, serif;
        --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    /* ---- Content Sections ---- */
    .content-section {
        padding: 40px 0 46px 0px;
    }

    #section-citizens {
        background-color: #ffffff;
    }

    #section-payback {
        background-color: #f8fafc;
        border-top: 1px solid #f1f5f9;
        border-bottom: 1px solid #f1f5f9;
    }

    #section-wisdom {
        background-color: #ffffff;
    }

    #section-changemakers {
        background-color: #f8fafc;
        border-top: 1px solid #f1f5f9;
        border-bottom: 1px solid #f1f5f9;
    }

    #section-serendipity {
        background-color: #ffffff;
    }

    #section-pledge {
        background-color: #f8fafc;
        border-top: 1px solid #f1f5f9;
        border-bottom: 1px solid #f1f5f9;
    }

    #section-support {
        background-color: #ffffff;
    }

    /* ---- Arrow-shaped eyebrow banner (used for "The Path" + section numbering) ---- */
    .eyebrow-arrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #445c91;
        color: #fff;
        font-weight: 700;
        font-size: 22px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 8px 26px 8px 16px;
        clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
        margin-bottom: 18px;
        /*width: 54%;*/
    }

    .section-title {
        font-family: var(--font-serif);
        font-size: 1.5rem;
        color: var(--blue-800);
        margin: 0 0 12px;
    }

    .highlight {
        color: var(--blue-600);
    }

    .section-sub {
        font-size: 1.05rem;
        color: #475569;
        max-width: 640px;
        margin-bottom: 20px;
    }

    /* Highlighted arrow-style tagline (e.g. "Truth is the path when all paths are obscured") */
    .tagline-highlight {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 1.25rem;
        color: var(--blue-700);
        background: #eff6ff;
        border-left: 4px solid var(--blue-600);
        padding: 10px 18px;
        margin: 16px 0 26px;
        position: relative;
    }

    .tagline-highlight::before {
        content: "\f061";
        /* fa-arrow-right */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: var(--blue-500);
        margin-right: 10px;
    }

    .quote-block {
        background: #eff6ff;
        border-left: 4px solid var(--blue-600);
        padding: 18px 22px;
        margin: 24px 0;
        font-style: italic;
        color: var(--blue-800);
    }

    .quote-block cite {
        display: block;
        margin-top: 8px;
        font-style: normal;
        font-size: 0.85rem;
        color: #64748b;
    }

    .quote-block1 {
        background: #00000012;
        /*border-left: 4px solid var(--blue-600);*/
        padding: 18px 22px;
        margin: 24px 0;
        font-style: italic;
        color: var(--blue-800);
    }

    .quote-block1 cite {
        display: block;
        margin-top: 8px;
        font-style: normal;
        font-size: 0.85rem;
        color: #64748b;
    }

    .pillar-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin: 18px 0;
    }

    .pillar-item {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pillar-item i {
        color: var(--blue-500);
    }

    /* ---- Fixed list markers: right-pointing arrow instead of default dot, font untouched ---- */
    ul.arrow-list {
        list-style: none;
        margin: 14px 0;
        padding: 0;
    }

    ul.arrow-list li {
        position: relative;
        padding-left: 28px;
        margin-bottom: 10px;
    }

    .two-col-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        margin: 20px 0;
    }

    .col h4 {
        font-family: var(--font-serif);
        color: var(--blue-800);
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .col h4 i {
        color: var(--blue-500);
    }

    .blue-accent-box {
        background: #eff6ff;
        border-radius: 10px;
        padding: 16px 20px;
        margin: 16px 0;
    }

    .grid-2-compare {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin: 20px 0;
    }

    .card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 20px;
    }

    .card h5 {
        margin-top: 0;
        color: var(--blue-800);
    }

    .card-danger {
        background: #fef2f2;
        border-color: #fecaca;
    }

    .card-danger h5 {
        color: #b91c1c;
    }

    @media (max-width: 680px) {

        .two-col-layout,
        .grid-2-compare {
            grid-template-columns: 1fr;
        }
    }

    .imagesdata img {
        width: 100%;
        height: auto;
    }

    /* =========================================================
     MOBILE RESPONSIVE ADDITIONS ONLY
     (nothing above this line was changed)
     Breakpoints: 992px, 768px, 480px
     ========================================================= */

    @media (max-width: 992px) {
        .content-section {
            padding: 48px 0;
        }
    }

    @media (max-width: 768px) {
        .content-section {
            padding: 36px 0;
        }

        .eyebrow-arrow {
            font-size: 16px;
            padding: 7px 20px 7px 14px;
            gap: 6px;
            clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
            margin-bottom: 14px;
        }

        .section-title {
            font-size: 1.25rem;
            margin-bottom: 10px;
        }

        .section-sub {
            font-size: 0.98rem;
            max-width: 100%;
            margin-bottom: 16px;
        }

        .tagline-highlight {
            font-size: 1.05rem;
            padding: 9px 14px;
            margin: 14px 0 20px;
        }

        .quote-block,
        .quote-block1 {
            padding: 14px 16px;
            margin: 18px 0;
            font-size: 0.95rem;
        }

        .pillar-grid {
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 10px;
            margin: 14px 0;
        }

        .pillar-item {
            padding: 12px 14px;
        }

        ul.arrow-list li {
            padding-left: 24px;
            margin-bottom: 8px;
        }

        .two-col-layout,
        .grid-2-compare {
            gap: 20px;
        }

        .blue-accent-box {
            padding: 14px 16px;
            margin: 12px 0;
        }

        .card {
            padding: 16px;
        }
    }

    @media (max-width: 480px) {
        .content-section {
            padding: 28px 0;
        }

        .eyebrow-arrow {
            font-size: 13px;
            letter-spacing: 0.05em;
            padding: 6px 16px 6px 12px;
            clip-path: none;
            border-radius: 4px;
            width: 100%;
            justify-content: center;
            text-align: center;
        }

        .section-title {
            font-size: 1.1rem;
        }

        .section-sub {
            font-size: 0.92rem;
        }

        .tagline-highlight {
            font-size: 0.95rem;
            padding: 8px 12px;
        }

        .tagline-highlight::before {
            margin-right: 6px;
        }

        .quote-block,
        .quote-block1 {
            padding: 12px 14px;
            font-size: 0.9rem;
        }

        .pillar-grid {
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .two-col-layout,
        .grid-2-compare {
            gap: 14px;
        }

        .card {
            padding: 14px;
        }
    }

    /* ---- extra bits used only by the new content sections below ---- */
    .df-community-table th,
    .df-community-table td {
        vertical-align: middle;
    }

    .df-subhead {
        font-family: var(--font-serif);
        color: var(--blue-800);
        font-size: 1.15rem;
        margin: 26px 0 10px;
    }

    .df-subhead:first-of-type {
        margin-top: 6px;
    }

    ol.df-ordered {
        padding-left: 22px;
        margin: 10px 0 18px;
    }

    ol.df-ordered li {
        margin-bottom: 8px;
        color: #334155;
    }

/* Former inline styles; page-prefixed classes prevent cross-page collisions. */
.uod-democracy-community-inline-001 { color:var(--blue-800); margin-top:0; }
.uod-democracy-community-inline-002 { margin-bottom:0; }