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

/* Extracted from The_Refuge_for_Humanism.php - style block 1 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

    :root {
        --blue-500: #3b82f6;
        --blue-600: #2563eb;
        --blue-700: #1d4ed8;
        --blue-800: #1e3a8a;
        --blue-900: #0f2b5c;
        --font-family: inter, 'Times New Roman', serif !important;
        --font-family: inter, 'Times New Roman', serif !important;
    }

    body {
        font-family: var(--font-sans);
        color: #334155;
        background-color: #ffffff;
        line-height: 1.7;
    }

    /* Banner Image Container */
    .image-datacontainer {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        margin: 15px 0 20px;
    }

    .image-datacontainer img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* ---- Tab Navigation Bar (#crumb-bar) ---- */
    .drive-top {
        /*background: #ffffff;*/
        /*border-bottom: 2px solid #e2e8f0;*/
        padding: 14px 0;
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);*/
    }

    /* Sticky ONLY on Desktop/Tablet, NOT on mobile */
    @media (min-width: 768px) {
        .drive-top {
            /*position: sticky;*/
            top: 0;
            z-index: 1000;
        }
    }

    @media (max-width: 767px) {
        .drive-top {
            /*position: relative !important;*/
            top: auto !important;
            padding: 10px 0;
            box-shadow: none;
        }
    }

    .crumb-trail {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .crumb {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        color: #475569;
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
    }

    .crumb .num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        background: #cbd5e1;
        color: #1e293b;
        border-radius: 50%;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .crumb:hover {
        background: #e2e8f0;
        color: var(--blue-800);
        border-color: var(--blue-500);
    }

    .crumb.active {
        background: var(--blue-800);
        border-color: var(--blue-800);
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
    }

    .crumb.active .num {
        background: #ffffff;
        color: var(--blue-800);
    }

    /* Mobile view tab trail horizontal scroll without sticky */
    @media (max-width: 767px) {
        .crumb-trail {
            justify-content: flex-start;
            overflow-x: auto;
            flex-wrap: nowrap;
            padding: 4px 0 8px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .crumb-trail::-webkit-scrollbar {
            display: none;
        }

        .crumb {
            padding: 7px 12px;
            font-size: 0.82rem;
            flex-shrink: 0;
        }
    }

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

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

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

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

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

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

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

    /* Eyebrow arrow banner */
    .eyebrow-arrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #445c91;
        color: #ffffff;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 8px 24px 8px 16px;
        clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
        margin-bottom: 18px;
    }

    .section-title {
        font-family: var(--font-family);
        font-size: 22px;
        font-weight: 700;
        color: var(--blue-800);
        margin-bottom: 14px;
        line-height: 1.3;
    }

    .section-sub {
        font-size: 1.08rem;
        color: #475569;
        margin-bottom: 20px;
        line-height: 1.65;
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        text-align: justify;
        word-wrap: break-word;
    }

    /* Images Styling */
    .imagesdata {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid #e2e8f0;
        background: #ffffff;
    }

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

    /* Feature Card */
    .feature-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
        height: 100%;
    }

    /* Quote Blocks */
    .quote-block {
        background: #eff6ff;
        border-left: 4px solid var(--blue-600);
        border-radius: 0 8px 8px 0;
        padding: 18px 22px;
        margin: 20px 0;
        font-style: italic;
        font-size: 1.05rem;
        color: var(--blue-800);
    }

    .quote-block1 {
        background: #f8fafc;
        border-left: 4px solid #d97706;
        border-radius: 0 8px 8px 0;
        padding: 18px 22px;
        margin: 20px 0;
        font-style: italic;
        font-size: 1.05rem;
        color: #1e293b;
        border: 1px solid #e2e8f0;
        border-left-width: 4px;
    }

    /* Pathway Flowchart Box */
    .pathway-card {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        padding: 22px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
        margin: 20px 0;
    }

    .pathway-steps {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
    }

    .pathway-step {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        color: var(--blue-800);
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 0.88rem;
    }

    .pathway-arrow {
        color: #d97706;
        font-weight: bold;
    }

    /* Arrow Lists */
    ul.arrow-list {
        list-style: none;
        padding: 0;
        margin: 14px 0;
    }

    ul.arrow-list li {
        position: relative;
        padding-left: 26px;
        margin-bottom: 10px;
        font-size: 1rem;
        color: #334155;
    }

    ul.arrow-list li::before {
        content: "\f061";
        /* fa-arrow-right */
        font-family: "FontAwesome";
        position: absolute;
        left: 0;
        top: 2px;
        color: var(--blue-600);
        font-size: 0.88rem;
    }

    /* Forces Cards (Logos, Pathos, Ego) */
    .force-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 24px;
        height: 100%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    /* Comparison Cards */
    .card-danger {
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 12px;
        padding: 24px;
    }

    .card-danger h5 {
        color: #b91c1c;
        font-weight: 700;
        margin-bottom: 14px;
    }

    .card-danger ul.arrow-list li::before {
        color: #dc2626;
    }

    .card-success {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 12px;
        padding: 24px;
    }

    .card-success h5 {
        color: #15803d;
        font-weight: 700;
        margin-bottom: 14px;
    }

    .card-success ul.arrow-list li::before {
        color: #16a34a;
    }

    /* Gallery Items */
    .gallery-img-wrapper {
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .gallery-img-wrapper img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
    }

    /* Mobile Responsiveness Adjustments */
    @media (max-width: 768px) {
        .content-section {
            padding: 0px 0;
        }

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

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

        .eyebrow-arrow {
            font-size: 0.85rem;
            padding: 6px 18px 6px 12px;
            clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
        }

        .gallery-img-wrapper img {
            height: 140px;
        }
    }

/* Former inline styles; page-prefixed classes prevent cross-page collisions. */
.uod-the-refuge-for-humanism-inline-001 { font-size:1.15rem; font-weight:600;  margin-bottom: 20px; }
.uod-the-refuge-for-humanism-inline-002 { font-weight:700; color:var(--blue-800); margin-bottom:10px; }
.uod-the-refuge-for-humanism-inline-003 { font-family:var(--font-serif); color:var(--blue-800); margin-bottom:12px; }
.uod-the-refuge-for-humanism-inline-004 { color:var(--blue-600); }
.uod-the-refuge-for-humanism-inline-005 { font-weight:700; color:var(--blue-800); font-size:1.05rem; }
.uod-the-refuge-for-humanism-inline-006 { font-family:var(--font-serif); color:var(--blue-800); margin-bottom:10px; }
.uod-the-refuge-for-humanism-inline-007 { margin-top:10px; font-weight:600; color:var(--blue-700); }