@extends('layouts.master')

@section('title', ($policy->meta_title ?: $policy->title) . ' | ' . setting('site.title', 'Farmers for Forests'))

@if($policy->meta_description)
    @section('meta_description', $policy->meta_description)
@endif

@php
if (!function_exists('renderPolicyIconClass')) {
    function renderPolicyIconClass($iconStr, $fallback = 'fa fa-leaf') {
        if (empty($iconStr)) return $fallback;
        $iconStr = trim((string)$iconStr);

        // Already formatted CSS classes
        if (str_starts_with($iconStr, 'ri-') || str_contains($iconStr, ' ri-')) {
            return $iconStr;
        }
        if (str_starts_with($iconStr, 'bi-') || str_starts_with($iconStr, 'bi ') || str_contains($iconStr, ' bi-')) {
            return str_starts_with($iconStr, 'bi ') ? $iconStr : 'bi bi-' . preg_replace('/^bi-/', '', $iconStr);
        }
        if (str_starts_with($iconStr, 'fa-solid ') || str_starts_with($iconStr, 'fa-regular ') || str_starts_with($iconStr, 'fa-brands ') ||
            str_starts_with($iconStr, 'fas ') || str_starts_with($iconStr, 'far ') || str_starts_with($iconStr, 'fab ') || str_starts_with($iconStr, 'fa ')) {
            return $iconStr;
        }

        // React Icon PascalCase mapping
        if (preg_match('/^Ri([A-Z].*)$/', $iconStr, $m)) {
            $kebab = strtolower(preg_replace('/([a-z0-9])([A-Z])/', '$1-$2', $m[1]));
            return 'ri-' . $kebab;
        }
        if (preg_match('/^Bs([A-Z].*)$/', $iconStr, $m)) {
            $kebab = strtolower(preg_replace('/([a-z0-9])([A-Z])/', '$1-$2', $m[1]));
            return 'bi bi-' . $kebab;
        }
        if (preg_match('/^Fa([A-Z].*)$/', $iconStr, $m)) {
            $kebab = strtolower(preg_replace('/([a-z0-9])([A-Z])/', '$1-$2', $m[1]));
            return 'fa-solid fa-' . $kebab;
        }
        if (preg_match('/^Lu([A-Z].*)$/', $iconStr, $m)) {
            $kebab = strtolower(preg_replace('/([a-z0-9])([A-Z])/', '$1-$2', $m[1]));
            return 'ri-' . $kebab;
        }

        if (str_starts_with($iconStr, 'fa-')) {
            return 'fa ' . $iconStr;
        }
        return 'fa fa-' . $iconStr;
    }
}
@endphp

@push('custom-css')
<style>
    /* ==========================================================================
       Farmers For Forests — Modern Legal & Policy Page Architecture
       Fidelity to reference design: Hero Canopy Banner, Sub-bar, 2-Column Layout
       ========================================================================== */

    :root {
        --f4f-dark-green: #09383A;
        --f4f-forest-green: #14532d;
        --f4f-leaf-green: #86a34d;
        --f4f-mint-bg: #f1f9f2;
        --f4f-mint-card: #eef7ee;
        --f4f-mint-border: #bbf7d0;
        --f4f-text-dark: #0f172a;
        --f4f-text-muted: #64748b;
        --f4f-border-light: #e2e8f0;
    }

    /* --------------------------------------------------------------------------
       1. Hero Forest Canopy Banner
       -------------------------------------------------------------------------- */
    .policy-hero-banner {
        position: relative;
        width: 100%;
        min-height: 400px;
        background-color: var(--f4f-dark-green);
        background-size: cover;
        background-position: center 35%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 55px 20px;
    }

    .policy-hero-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(9, 56, 58, 0.45) 0%, rgba(9, 56, 58, 0.65) 100%);
        backdrop-filter: blur(1px);
    }

    .policy-hero-banner-content {
        position: relative;
        z-index: 2;
        max-width: 960px;
        margin: 0 auto;
    }

    .policy-hero-title {
        /* font-family: 'Outfit', sans-serif; */
        font-size: 64px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: -0.5px;
        margin: 0;
        line-height: 1.2;
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
    }

    @media (max-width: 767.98px) {
        .policy-hero-banner {
            min-height: 250px;
            padding: 38px 16px;
        }
        .policy-hero-title {
            font-size: 35px;
        }
    }

    /* --------------------------------------------------------------------------
       2. Sub-Bar (Breadcrumbs & Effective Date)
       -------------------------------------------------------------------------- */
    .policy-subbar {
        background: #ffffff;
        border-bottom: 1px solid var(--f4f-border-light);
        padding: 14px 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .policy-subbar .policy-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 14px;
    }

    .policy-breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #475569;
        font-weight: 500;
    }

    .policy-breadcrumb .f4f-brand {
        color: #166534;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .policy-breadcrumb-separator {
        color: #94a3b8;
        font-size: 12px;
    }

    .policy-breadcrumb-current {
        color: #1e293b;
        font-weight: 600;
    }

    .policy-effective-date {
        color: var(--f4f-text-muted);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13.5px;
    }

    .policy-effective-date strong {
        color: #334155;
    }

    /* --------------------------------------------------------------------------
       3. Main Page Layout & Responsive Containers
       -------------------------------------------------------------------------- */
    .policy-page-wrapper {
        background-color: #f8fafc;
        padding-top: 36px;
        padding-bottom: 90px;
        min-height: 70vh;
        color: #1e293b;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .policy-container {
        max-width: 1680px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 36px;
        padding-right: 36px;
    }

    @media (min-width: 1600px) {
        .policy-container {
            max-width: 1760px;
        }
    }

    @media (max-width: 991.98px) {
        .policy-page-wrapper {
            padding-top: 20px;
            padding-bottom: 60px;
        }
        .policy-container {
            padding-left: 18px;
            padding-right: 18px;
        }
    }

    /* --------------------------------------------------------------------------
       4. Mobile View Order: Controls Below Banner & Sub-Bar
       -------------------------------------------------------------------------- */
    .mobile-policy-bar {
        background: #ffffff;
        border: 1px solid var(--f4f-border-light);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 24px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-doc-selector-wrap {
        position: relative;
    }

    .mobile-accordion-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f8fafc;
        border: 1px solid var(--f4f-border-light);
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--f4f-text-dark);
        cursor: pointer;
        text-align: left;
        transition: all 0.2s ease;
    }

    .mobile-accordion-toggle:hover,
    .mobile-accordion-toggle.is-open {
        background: #f1f9f2;
        border-color: var(--f4f-mint-border);
    }

    .mobile-accordion-toggle .toggle-chevron {
        font-size: 13px;
        color: #64748b;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-accordion-toggle.is-open .toggle-chevron {
        transform: rotate(180deg);
        color: #166534;
    }

    .mobile-accordion-dropdown {
        display: none;
        background: #ffffff;
        border: 1px solid var(--f4f-border-light);
        border-radius: 10px;
        margin-top: 8px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        overflow: hidden;
        animation: fadeInDown 0.25s ease;
    }

    .mobile-accordion-dropdown.is-open {
        display: block;
    }

    @keyframes fadeInDown {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .mobile-policy-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        font-size: 13.5px;
        font-weight: 500;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        text-decoration: none;
        transition: all 0.15s ease;
    }

    .mobile-policy-link:last-child {
        border-bottom: none;
    }

    .mobile-policy-link:hover,
    .mobile-policy-link.active {
        background: #f0fdf4;
        color: #14532d;
        font-weight: 700;
    }

    .mobile-toc-trigger-btn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--f4f-dark-green);
        color: #ffffff;
        border: none;
        padding: 12px 18px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 3px 10px rgba(9, 56, 58, 0.2);
    }

    .mobile-toc-trigger-btn:hover {
        background: #114e51;
    }

    /* --------------------------------------------------------------------------
       5. Desktop Left Sidebar
       -------------------------------------------------------------------------- */
    .policy-sidebar {
        position: sticky;
        top: 90px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .sidebar-card {
        background: #ffffff;
        border: 1px solid var(--f4f-border-light);
        border-radius: 14px;
        padding: 22px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    }

    .sidebar-card-title {
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #64748b;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Legal Documents Switcher List */
    .legal-docs-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .legal-doc-item a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
        color: #334155;
        border: 1px solid transparent;
    }

    .legal-doc-item a:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #e2e8f0;
    }

    .legal-doc-item a.active {
        background: var(--f4f-dark-green);
        color: #ffffff !important;
        font-weight: 700;
        box-shadow: 0 3px 10px rgba(9, 56, 58, 0.25);
    }

    .legal-doc-item a.active i {
        color: #a7f3d0;
    }

    /* Table of Contents List (Desktop) */
    .toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .toc-item a {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 13.5px;
        color: #475569;
        text-decoration: none;
        transition: all 0.2s ease;
        line-height: 1.45;
    }

    .toc-item a:hover {
        background: var(--f4f-mint-bg);
        color: var(--f4f-forest-green);
    }

    .toc-item a.active {
        background: #f0fdf4;
        color: #14532d;
        font-weight: 600;
        border-left: 3px solid #16a34a;
    }

    .toc-num {
        font-size: 12px;
        font-weight: 700;
        color: var(--f4f-leaf-green);
        min-width: 18px;
    }

    /* Have Questions Card */
    .questions-card {
        background: var(--f4f-mint-card);
        border: 1px solid #d1ead1;
        border-radius: 14px;
        padding: 22px;
    }

    .questions-card-icon {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #ffffff;
        color: #166534;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        margin-bottom: 12px;
    }

    .questions-card h4 {
        font-size: 16px;
        font-weight: 700;
        color: #14532d;
        margin-bottom: 8px;
    }

    .questions-card p {
        font-size: 13px;
        line-height: 1.55;
        color: #334155;
        margin-bottom: 14px;
    }

    .questions-card-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 700;
        color: #14532d;
        text-decoration: underline;
        transition: color 0.2s;
    }

    .questions-card-link:hover {
        color: var(--f4f-dark-green);
    }

    /* --------------------------------------------------------------------------
       6. Right Content Column
       -------------------------------------------------------------------------- */
    .policy-sections-wrapper {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    /* Top Intro Summary Box */
    .policy-intro-box {
        background: var(--f4f-mint-bg);
        border: 1.5px solid var(--f4f-leaf-green);
        border-radius: 14px;
        padding: 24px 28px;
        margin-bottom: 28px;
        font-size: 15.5px;
        line-height: 1.75;
        color: #1e3a2b;
        box-shadow: 0 2px 8px rgba(134, 163, 77, 0.08);
    }

    /* Section Card */
    .policy-section-card {
        background: #ffffff;
        border: 1px solid var(--f4f-border-light);
        border-radius: 16px;
        padding: 32px 36px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
        scroll-margin-top: 100px;
    }

    @media (max-width: 767.98px) {
        .policy-section-card {
            padding: 24px 20px;
            border-radius: 12px;
        }
        .policy-intro-box {
            padding: 18px 20px;
            font-size: 14.5px;
        }
    }

    /* Section Header: Icon Swatch before Number */
    .policy-section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 22px;
        padding-bottom: 14px;
        border-bottom: 1px solid #f1f5f9;
    }

    .section-bullet-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #e8f5e9;
        border: 1px solid #bbf7d0;
        color: #166534;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13.5px;
        flex-shrink: 0;
    }

    .section-title {
        font-family: 'Outfit', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
        line-height: 1.3;
    }

    @media (max-width: 767.98px) {
        .section-title {
            font-size: 18px;
        }
    }

    /* Multi-Blocks Flow */
    .section-blocks-flow {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Block 1: Plain / Rich Text */
    .block-text-content {
        font-size: 15px;
        line-height: 1.75;
        color: #334155;
    }

    .block-text-content p {
        margin-bottom: 14px;
    }

    .block-text-content p:last-child {
        margin-bottom: 0;
    }

    .block-text-content strong {
        color: #0f172a;
    }

    /* Block 2: 4-Card Grid */
    .block-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin: 8px 0;
    }

    @media (max-width: 767.98px) {
        .block-cards-grid {
            grid-template-columns: 1fr;
        }
    }

    .policy-info-card {
        background: #ffffff;
        border: 1px solid var(--f4f-border-light);
        border-radius: 12px;
        padding: 22px;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
    }

    .policy-info-card:hover {
        border-color: var(--f4f-mint-border);
        box-shadow: 0 4px 14px rgba(22, 101, 52, 0.06);
        transform: translateY(-2px);
    }

    .card-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
    }

    .card-icon-swatch {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #166534;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .card-badge-pill {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        background: #e0f2fe;
        color: #0369a1;
        padding: 3px 8px;
        border-radius: 4px;
        letter-spacing: 0.3px;
    }

    .card-heading {
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 8px 0;
    }

    .card-text {
        font-size: 13.5px;
        line-height: 1.6;
        color: #475569;
        margin: 0;
    }

    /* Block 3: Data Table */
    .block-table-wrapper {
        border-radius: 12px;
        overflow-x: auto;
        border: 1px solid var(--f4f-border-light);
        margin: 8px 0;
        background: #ffffff;
    }

    .policy-data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13.5px;
        text-align: left;
    }

    .policy-data-table thead th {
        background: #eef7ee;
        color: #14532d;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 14px 18px;
        border-bottom: 1px solid #d1ead1;
        white-space: nowrap;
    }

    .policy-data-table tbody td {
        padding: 14px 18px;
        border-bottom: 1px solid #f1f5f9;
        color: #334155;
        line-height: 1.55;
        vertical-align: top;
    }

    .policy-data-table tbody tr:last-child td {
        border-bottom: none;
    }

    .policy-data-table tbody tr:hover {
        background: #f8fafc;
    }

    .policy-data-table tbody td:first-child {
        font-weight: 600;
        color: #0f172a;
    }

    /* Block 4: Whistleblower Callout Box */
    .policy-callout-box {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 24px;
        border-radius: 12px;
        margin: 8px 0;
    }

    .policy-callout-box.tone-warning {
        background: #fff7ed;
        border-left: 4px solid #ea580c;
        border-top: 1px solid #fed7aa;
        border-right: 1px solid #fed7aa;
        border-bottom: 1px solid #fed7aa;
        color: #7c2d12;
    }

    .policy-callout-box.tone-warning .callout-icon {
        color: #ea580c;
        font-size: 22px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .policy-callout-box.tone-success {
        background: #f0fdf4;
        border-left: 4px solid #16a34a;
        border-top: 1px solid #bbf7d0;
        border-right: 1px solid #bbf7d0;
        border-bottom: 1px solid #bbf7d0;
        color: #14532d;
    }

    .policy-callout-box.tone-success .callout-icon {
        color: #16a34a;
        font-size: 22px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .policy-callout-box.tone-info {
        background: #eff6ff;
        border-left: 4px solid #2563eb;
        border-top: 1px solid #bfdbfe;
        border-right: 1px solid #bfdbfe;
        border-bottom: 1px solid #bfdbfe;
        color: #1e3a8a;
    }

    .policy-callout-box.tone-info .callout-icon {
        color: #2563eb;
        font-size: 22px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .callout-title {
        font-size: 15.5px;
        font-weight: 700;
        margin: 0 0 6px 0;
        color: inherit;
    }

    .callout-message {
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
        color: inherit;
    }

    /* Block 5: Hero Card Block */
    .policy-hero-card {
        background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
        border: 1px solid var(--f4f-mint-border);
        border-radius: 14px;
        padding: 26px;
        margin: 8px 0;
    }

    .hero-card-badge {
        display: inline-block;
        background: #14532d;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 9999px;
        margin-bottom: 12px;
        letter-spacing: 0.5px;
    }

    .hero-card-title {
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 10px 0;
    }

    .hero-card-summary {
        font-size: 14.5px;
        line-height: 1.65;
        color: #334155;
        margin-bottom: 18px;
    }

    .hero-card-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .hero-card-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #1e293b;
        font-weight: 500;
    }

    .hero-card-item i {
        color: #16a34a;
        font-size: 15px;
    }

    /* Block 6: Custom Block */
    .policy-custom-block {
        border-radius: 12px;
        padding: 24px;
        margin: 8px 0;
    }

    .custom-block-heading {
        font-size: 17px;
        font-weight: 700;
        margin: 0 0 14px 0;
    }

    /* --------------------------------------------------------------------------
       7. Mobile Slide-In Offcanvas Drawer (TOC)
       -------------------------------------------------------------------------- */
    .toc-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(3px);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
    }

    .toc-drawer-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    .toc-drawer-panel {
        position: fixed;
        top: 0;
        right: -360px;
        width: 340px;
        max-width: 90vw;
        height: 100vh;
        background: #ffffff;
        box-shadow: -6px 0 24px rgba(0, 0, 0, 0.15);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .toc-drawer-panel.is-open {
        right: 0;
    }

    .toc-drawer-header {
        padding: 18px 22px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f8fafc;
    }

    .toc-drawer-header h3 {
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .toc-drawer-close {
        background: transparent;
        border: none;
        font-size: 24px;
        line-height: 1;
        color: #64748b;
        cursor: pointer;
        padding: 4px;
    }

    .toc-drawer-close:hover {
        color: #0f172a;
    }

    .toc-drawer-body {
        padding: 20px 22px;
        overflow-y: auto;
        flex: 1;
    }

    .toc-drawer-nav {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .toc-drawer-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 13.5px;
        color: #334155;
        text-decoration: none;
        transition: all 0.15s ease;
        border: 1px solid transparent;
    }

    .toc-drawer-item:hover,
    .toc-drawer-item.active {
        background: #f0fdf4;
        color: #14532d;
        border-color: #bbf7d0;
        font-weight: 600;
    }

    .toc-drawer-num {
        font-weight: 700;
        font-size: 12px;
        color: var(--f4f-leaf-green);
        min-width: 16px;
    }

    /* Floating quick TOC button for mobile */
    .mobile-floating-toc {
        display: none;
    }

    @media (max-width: 991.98px) {
        .mobile-floating-toc {
            display: flex;
            position: fixed;
            bottom: 24px;
            right: 20px;
            z-index: 9990;
            background: var(--f4f-dark-green);
            color: #ffffff !important;
            padding: 12px 18px;
            border-radius: 9999px;
            box-shadow: 0 4px 18px rgba(9, 56, 58, 0.4);
            font-size: 13.5px;
            font-weight: 700;
            align-items: center;
            gap: 8px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            text-decoration: none;
            cursor: pointer;
        }
        .mobile-floating-toc:hover {
            background: var(--f4f-forest-green);
        }
    }
</style>
@endpush

@section('content')
<!-- Hero Forest Canopy Banner -->
<section class="policy-hero-banner" style="background-image: url('{{ $policy->banner_url }}');">
    <div class="policy-hero-banner-content">
        <h1 class="policy-hero-title">{{ $policy->title }}</h1>
    </div>
</section>

<!-- Sub-Bar (Breadcrumbs & Effective Date) -->
<div class="policy-subbar">
    <div class="policy-container">
        <div class="policy-breadcrumb">
            <span class="f4f-brand">
                <i class="{{ renderPolicyIconClass($settings['topbar_category_pill_icon'] ?? '', 'fa fa-seedling') }}"></i> Farmers for Forests
            </span>
            <span class="policy-breadcrumb-separator">&gt;</span>
            <span class="policy-breadcrumb-current">{{ $policy->badge_text ?: 'Legal & Governance' }}</span>
        </div>
        @if(!empty($policy->effective_date))
            <div class="policy-effective-date">
                <i class="fa fa-calendar-alt"></i>
                <span>Effective Date: <strong>{{ $policy->effective_date }}</strong></span>
            </div>
        @endif
    </div>
</div>

<div class="policy-page-wrapper">
    <div class="policy-container">

        <!-- Mobile View Order: Document Selector Accordion + TOC Drawer Trigger BELOW Banner -->
        <div class="d-block d-lg-none">
            <div class="mobile-policy-bar">
                @if($allPolicies->count() > 1)
                    <div class="mobile-doc-selector-wrap">
                        <button type="button" class="mobile-accordion-toggle" id="mobileAccordionToggle">
                            <span>
                                <i class="fa fa-file-contract" style="color: #166534; margin-right: 8px;"></i>
                                Select Policy Document: <strong>{{ $policy->title }}</strong>
                            </span>
                            <i class="fa fa-chevron-down toggle-chevron"></i>
                        </button>
                        <div class="mobile-accordion-dropdown" id="mobileAccordionDropdown">
                            @foreach($allPolicies as $p)
                                <a href="{{ url($p->slug) }}" class="mobile-policy-link {{ $p->id === $policy->id ? 'active' : '' }}">
                                    <span>
                                        <i class="fa {{ $p->id === $policy->id ? 'fa-circle-check text-success' : 'fa-file-lines text-muted' }}" style="margin-right: 8px;"></i>
                                        {{ $p->title }}
                                    </span>
                                    @if($p->badge_text)
                                        <small class="badge" style="background: #e2e8f0; color: #475569; font-size: 10px;">{{ $p->badge_text }}</small>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if(is_array($policy->sections) && count($policy->sections) > 0)
                    <button type="button" class="mobile-toc-trigger-btn" id="openMobileTocBtn">
                        <i class="fa fa-list-ol"></i>
                        <span>On This Page ({{ count($policy->sections) }} Sections)</span>
                        <i class="fa fa-sliders" style="margin-left: auto;"></i>
                    </button>
                @endif
            </div>
        </div>

        <!-- 2-Column Responsive Layout -->
        <div class="row">
            <!-- Left Sidebar Column (Desktop sticky, hidden on mobile) -->
            <div class="col-lg-4 d-none d-lg-block">
                <aside class="policy-sidebar">
                    
                    <!-- Card 1: LEGAL DOCUMENTS -->
                    <div class="sidebar-card">
                        <h3 class="sidebar-card-title">
                            <i class="fa fa-folder-closed" style="color: #166534;"></i>
                            LEGAL DOCUMENTS
                        </h3>
                        <ul class="legal-docs-list">
                            @foreach($allPolicies as $otherPolicy)
                                <li class="legal-doc-item">
                                    <a href="{{ url($otherPolicy->slug) }}" class="{{ $otherPolicy->id === $policy->id ? 'active' : '' }}">
                                        <span style="display: flex; align-items: center; gap: 8px;">
                                            <i class="fa fa-file-lines" style="font-size: 13px;"></i>
                                            {{ $otherPolicy->title }}
                                        </span>
                                        @if($otherPolicy->id === $policy->id)
                                            <i class="fa fa-arrow-right" style="font-size: 12px;"></i>
                                        @endif
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <!-- Card 2: ON THIS PAGE (TOC) -->
                    @if(is_array($policy->sections) && count($policy->sections) > 0)
                        <div class="sidebar-card">
                            <h3 class="sidebar-card-title">
                                <i class="fa fa-list-ol" style="color: #166534;"></i>
                                ON THIS PAGE
                            </h3>
                            <ul class="toc-list" id="desktopTocList">
                                @foreach($policy->sections as $sIdx => $sec)
                                    @php
                                        $secNum = $sec['number'] ?? sprintf('%02d', $sIdx + 1);
                                        $secId = !empty($sec['id']) ? $sec['id'] : 'sec-' . $secNum;
                                        $secTitle = $sec['title'] ?? 'Section ' . $secNum;
                                    @endphp
                                    <li class="toc-item">
                                        <a href="#{{ $secId }}" class="toc-nav-link" data-target="{{ $secId }}">
                                            <span class="toc-num">{{ ltrim($secNum, '0') }}.</span>
                                            <span class="toc-text">{{ $secTitle }}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <!-- Card 3: Have Questions? -->
                    <div class="questions-card">
                        <div class="questions-card-icon">
                            <i class="{{ renderPolicyIconClass($settings['sidebar_icon'] ?? '', 'fa fa-headset') }}"></i>
                        </div>
                        <h4>Have Questions?</h4>
                        <p>Reach out to our Grievance Redressal Officer directly, or submit an inquiry through our dedicated form.</p>
                        <a href="mailto:{{ $settings['sidebar_email'] ?? 'grievance@farmersforforests.org' }}" class="questions-card-link">
                            Inquiry Form <i class="fa fa-arrow-right"></i>
                        </a>
                    </div>
                </aside>
            </div>

            <!-- Right Content Column: Flow of Sections -->
            <div class="col-lg-8">
                <!-- Top Intro Summary Box -->
                @if($policy->hero_summary)
                    <div class="policy-intro-box">
                        {!! nl2br(e($policy->hero_summary)) !!}
                    </div>
                @endif

                <!-- Dynamic Sections Flow -->
                <div class="policy-sections-wrapper">
                    @forelse($policy->sections ?? [] as $sIdx => $sec)
                        @php
                            $secNum = $sec['number'] ?? sprintf('%02d', $sIdx + 1);
                            $secIcon = $sec['icon'] ?? 'fa-leaf';
                            $secTitle = $sec['title'] ?? 'Section ' . $secNum;
                            $secId = !empty($sec['id']) ? $sec['id'] : 'sec-' . $secNum;
                            $blocks = $sec['blocks'] ?? [];
                        @endphp

                        <article class="policy-section-card" id="{{ $secId }}" data-section-id="{{ $secId }}">
                            <!-- Section Header: Icon Swatch before Number -->
                            <header class="policy-section-header">
                                <div class="section-bullet-icon">
                                    <i class="{{ renderPolicyIconClass($secIcon, 'fa fa-leaf') }}"></i>
                                </div>
                                <h2 class="section-title">{{ ltrim($secNum, '0') }}. {{ $secTitle }}</h2>
                            </header>

                            <!-- Multi-Blocks Flow inside Section -->
                            <div class="section-blocks-flow">
                                @forelse($blocks as $bIdx => $block)
                                    @php
                                        $bType = $block['type'] ?? 'text';
                                    @endphp

                                    {{-- 1. Plain / Rich Text Block --}}
                                    @if($bType === 'text')
                                        <div class="block-text-content">
                                            {!! $block['content'] ?? $block['text'] ?? '' !!}
                                        </div>

                                    {{-- 2. 4-Card Grid Block --}}
                                    @elseif($bType === 'cards')
                                        @php
                                            $cards = $block['cards'] ?? $block['items'] ?? [];
                                        @endphp
                                        <div class="block-cards-grid">
                                            @foreach($cards as $card)
                                                @php
                                                    $cardDesc = $card['desc'] ?? $card['description'] ?? '';
                                                @endphp
                                                <div class="policy-info-card">
                                                    <div class="card-top-row">
                                                        <div class="card-icon-swatch">
                                                            <i class="{{ renderPolicyIconClass($card['icon'] ?? '', 'fa fa-check') }}"></i>
                                                        </div>
                                                        @if(!empty($card['badge']))
                                                            <span class="card-badge-pill">{{ $card['badge'] }}</span>
                                                        @endif
                                                    </div>
                                                    <h3 class="card-heading">{{ $card['title'] ?? '' }}</h3>
                                                    @if(!empty($cardDesc))
                                                        <p class="card-text">{!! nl2br(e($cardDesc)) !!}</p>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>

                                    {{-- 3. Data Table Block --}}
                                    @elseif($bType === 'table')
                                        @php
                                            $headers = $block['headers'] ?? [];
                                            $rows = $block['rows'] ?? [];
                                        @endphp
                                        <div class="block-table-wrapper table-responsive">
                                            <table class="policy-data-table">
                                                @if(count($headers) > 0)
                                                    <thead>
                                                        <tr>
                                                            @foreach($headers as $h)
                                                                <th>{{ $h }}</th>
                                                            @endforeach
                                                        </tr>
                                                    </thead>
                                                @endif
                                                <tbody>
                                                    @foreach($rows as $row)
                                                        <tr>
                                                            @foreach($row as $cell)
                                                                <td>{!! nl2br(e($cell)) !!}</td>
                                                            @endforeach
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>

                                    {{-- 4. Callout / Notice Block --}}
                                    @elseif($bType === 'callout')
                                        @php
                                            $tone = $block['tone'] ?? 'info';
                                            $cIcon = !empty($block['icon']) ? $block['icon'] : match($tone) {
                                                'warning' => 'fa-triangle-exclamation',
                                                'success' => 'fa-circle-check',
                                                'danger' => 'fa-shield-exclamation',
                                                default => 'fa-circle-info',
                                            };
                                        @endphp
                                        <div class="policy-callout-box tone-{{ $tone }}">
                                            <div class="callout-icon">
                                                <i class="{{ renderPolicyIconClass($cIcon, 'fa fa-circle-info') }}"></i>
                                            </div>
                                            <div>
                                                @if(!empty($block['title']))
                                                    <h3 class="callout-title">{{ $block['title'] }}</h3>
                                                @endif
                                                <p class="callout-message">{!! nl2br(e($block['message'] ?? $block['text'] ?? '')) !!}</p>
                                            </div>
                                        </div>

                                    {{-- 5. Policy Hero Card Block --}}
                                    @elseif($bType === 'hero_card')
                                        @php
                                            $rawHl = $block['highlights'] ?? $block['items'] ?? [];
                                            $hlList = is_array($rawHl) ? $rawHl : (is_string($rawHl) ? explode("\n", $rawHl) : []);
                                            $heroSummary = $block['summary'] ?? $block['subtitle'] ?? '';
                                        @endphp
                                        <div class="policy-hero-card">
                                            @if(!empty($block['badge']))
                                                <span class="hero-card-badge">{{ $block['badge'] }}</span>
                                            @endif
                                            @if(!empty($block['title']))
                                                <h3 class="hero-card-title">{{ $block['title'] }}</h3>
                                            @endif
                                            @if(!empty($heroSummary))
                                                <p class="hero-card-summary">{{ $heroSummary }}</p>
                                            @endif
                                            @if(count($hlList) > 0)
                                                <ul class="hero-card-list">
                                                    @foreach($hlList as $hl)
                                                        @if(trim($hl))
                                                            <li class="hero-card-item">
                                                                <i class="fa fa-circle-check"></i>
                                                                <span>{{ trim($hl) }}</span>
                                                            </li>
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>

                                    {{-- 6. Custom Block --}}
                                    @elseif($bType === 'custom')
                                        <div class="policy-custom-block" style="background-color: {{ $block['bg_color'] ?? '#f1f9f2' }}; border: 1px solid {{ $block['border_color'] ?? '#bbf7d0' }}; color: {{ $block['text_color'] ?? '#0f172a' }};">
                                            @if(!empty($block['heading']) || !empty($block['title']))
                                                <h3 class="custom-block-heading" style="color: {{ $block['accent_color'] ?? '#14532d' }};">{{ $block['heading'] ?? $block['title'] }}</h3>
                                            @endif
                                            {!! $block['custom_html'] ?? $block['content'] ?? '' !!}
                                        </div>
                                    @endif
                                @empty
                                    <p class="text-muted">No content blocks available for this section.</p>
                                @endforelse
                            </div>
                        </article>
                    @empty
                        <div class="policy-section-card text-center" style="padding: 60px 20px;">
                            <i class="fa fa-file-text" style="font-size: 40px; color: #94a3b8; margin-bottom: 16px; display: block;"></i>
                            <h3 style="color: #475569;">No Sections Published Yet</h3>
                            <p class="text-muted">This policy is currently being updated by the compliance team.</p>
                        </div>
                    @endforelse
                </div>

                <!-- Mobile Questions Card (Shown at bottom of main content on mobile only) -->
                <div class="d-block d-lg-none" style="margin-top: 32px;">
                    <div class="questions-card">
                        <div class="questions-card-icon">
                            <i class="fa fa-circle-question"></i>
                        </div>
                        <h4>Have Questions?</h4>
                        <p>Reach out to our Grievance Redressal Officer directly, or submit an inquiry through our dedicated form.</p>
                        <a href="mailto:{{ $settings['sidebar_email'] ?? 'grievance@farmersforforests.org' }}" class="questions-card-link">
                            Inquiry Form <i class="fa fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Mobile Slide-In Offcanvas Drawer (Table of Contents) -->
<div class="toc-drawer-backdrop" id="tocDrawerBackdrop"></div>
<div class="toc-drawer-panel" id="tocDrawerPanel" aria-hidden="true" role="dialog">
    <div class="toc-drawer-header">
        <h3><i class="fa fa-list-ol" style="color: #166534;"></i> On This Page</h3>
        <button type="button" class="toc-drawer-close" id="closeTocDrawerBtn" aria-label="Close menu">&times;</button>
    </div>
    <div class="toc-drawer-body">
        <p style="font-size: 13px; color: #64748b; margin-bottom: 16px;">Jump to section in <strong>{{ $policy->title }}</strong>:</p>
        <div class="toc-drawer-nav">
            @foreach($policy->sections ?? [] as $sIdx => $sec)
                @php
                    $secNum = $sec['number'] ?? sprintf('%02d', $sIdx + 1);
                    $secId = !empty($sec['id']) ? $sec['id'] : 'sec-' . $secNum;
                    $secTitle = $sec['title'] ?? 'Section ' . $secNum;
                    $secIcon = $sec['icon'] ?? 'fa-leaf';
                @endphp
                <a href="#{{ $secId }}" class="toc-drawer-item" data-target="{{ $secId }}">
                    <span class="toc-drawer-num">{{ ltrim($secNum, '0') }}.</span>
                    <i class="fa {{ $secIcon }}" style="font-size: 13px; color: #166534;"></i>
                    <span style="flex: 1;">{{ $secTitle }}</span>
                    <i class="fa fa-angle-right" style="color: #94a3b8; font-size: 11px;"></i>
                </a>
            @endforeach
        </div>
    </div>
</div>

<!-- Mobile Floating Button to trigger Table of Contents -->
@if(is_array($policy->sections) && count($policy->sections) > 0)
    <button type="button" class="mobile-floating-toc" id="floatingTocBtn">
        <i class="fa fa-list-ul"></i>
        <span>Index ({{ count($policy->sections) }})</span>
    </button>
@endif
@endsection

@push('custom-js-scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // -------------------------------------------------------------
    // Mobile Accordion Toggle
    // -------------------------------------------------------------
    const accordionToggle = document.getElementById('mobileAccordionToggle');
    const accordionDropdown = document.getElementById('mobileAccordionDropdown');
    if (accordionToggle && accordionDropdown) {
        accordionToggle.addEventListener('click', function(e) {
            e.preventDefault();
            const isOpen = accordionDropdown.classList.contains('is-open');
            if (isOpen) {
                accordionDropdown.classList.remove('is-open');
                accordionToggle.classList.remove('is-open');
            } else {
                accordionDropdown.classList.add('is-open');
                accordionToggle.classList.add('is-open');
            }
        });
    }

    // -------------------------------------------------------------
    // Mobile Slide-Over Drawer (TOC)
    // -------------------------------------------------------------
    const openBtn = document.getElementById('openMobileTocBtn');
    const floatingBtn = document.getElementById('floatingTocBtn');
    const closeBtn = document.getElementById('closeTocDrawerBtn');
    const backdrop = document.getElementById('tocDrawerBackdrop');
    const drawer = document.getElementById('tocDrawerPanel');

    function openDrawer() {
        if (!drawer || !backdrop) return;
        drawer.classList.add('is-open');
        backdrop.classList.add('is-open');
        drawer.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
    }

    function closeDrawer() {
        if (!drawer || !backdrop) return;
        drawer.classList.remove('is-open');
        backdrop.classList.remove('is-open');
        drawer.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
    }

    if (openBtn) openBtn.addEventListener('click', openDrawer);
    if (floatingBtn) floatingBtn.addEventListener('click', openDrawer);
    if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
    if (backdrop) backdrop.addEventListener('click', closeDrawer);

    // Close drawer on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && drawer && drawer.classList.contains('is-open')) {
            closeDrawer();
        }
    });

    // -------------------------------------------------------------
    // Smooth Scrolling & Active State for TOC Items
    // -------------------------------------------------------------
    const allTocLinks = document.querySelectorAll('.toc-nav-link, .toc-drawer-item');

    allTocLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
            const targetId = this.getAttribute('data-target') || this.getAttribute('href').replace('#', '');
            const targetEl = document.getElementById(targetId);

            if (targetEl) {
                e.preventDefault();
                closeDrawer();

                const offsetTop = targetEl.getBoundingClientRect().top + window.pageYOffset - 90;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });

                // Update active link styling
                allTocLinks.forEach(l => l.classList.remove('active'));
                const matched = document.querySelectorAll('[data-target="' + targetId + '"]');
                matched.forEach(m => m.classList.add('active'));

                // Update URL hash cleanly
                history.pushState(null, null, '#' + targetId);
            }
        });
    });

    // -------------------------------------------------------------
    // ScrollSpy: Highlight current section while reading
    // -------------------------------------------------------------
    const sections = document.querySelectorAll('.policy-section-card');
    if (sections.length > 0 && 'IntersectionObserver' in window) {
        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    const secId = entry.target.getAttribute('id');
                    allTocLinks.forEach(function(l) {
                        if (l.getAttribute('data-target') === secId) {
                            l.classList.add('active');
                        } else {
                            l.classList.remove('active');
                        }
                    });
                }
            });
        }, {
            root: null,
            rootMargin: '-80px 0px -70% 0px',
            threshold: 0
        });

        sections.forEach(function(sec) {
            observer.observe(sec);
        });
    }
});
</script>
@endpush