/* ============================================
   Bootstrap 5 Full Integration - Override System
   ============================================
   This file contains targeted overrides to make
   Bootstrap work with our existing custom design.
   ============================================ */

:root {
    /* ============================================
       BRAND COLORS
       ============================================ */
    --bs-primary: darkred;
    --bs-primary-rgb: 139, 0, 0;

    /* ============================================
       NEUTRAL COLORS
       ============================================ */
    --bs-dark: black;
    --bs-light: #e8e4e4;
    --bs-light-rgb: 232, 228, 228;
    /* Light gray - card backgrounds */
    --bs-gray: lightgray;
    /* Medium gray - main background */
    --bs-gray-hover: #e0e0e0;
    /* Hover state gray */
    --bs-white: white;

    /* ============================================
       TABLE-SPECIFIC COLORS
       ============================================ */
    --bs-table-stripe-light: white;
    --bs-table-stripe-tinted: #fff5f5;
    /* Subtle red tint */
    --bs-table-hover: var(--bs-gray-hover);

    /* ============================================
       BOOTSTRAP SEMANTIC COLORS
       ============================================ */
    --bs-secondary: #6c757d;
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-dark);
    --bs-body-bg: var(--bs-gray);
    --bs-body-color: var(--bs-dark);
}

/* ============================================
   CRITICAL FIX: Navigation class collision
   ============================================ */
/* Navigation conflict resolved by renaming custom .nav to .zph-nav */

/* Re-enable our navigation styling by loading navigation.css after this */

/* ============================================
   Typography fixes
   ============================================ */
/* Prevent Bootstrap from overriding our heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0;
}

/* Prevent Bootstrap from adding margins to paragraphs inside specific containers */
.aside-article p,
.footer-contact p {
    margin-bottom: 0;
}



/* ============================================
   List styling fixes
   ============================================ */
/* Preserve our custom list styles in aside */
.aside-article ol,
.aside-article ul {
    margin-bottom: 0;
    padding-left: 0;
}

/* Text Fade Out Effect */
.text-fade-out {
    max-height: 4.5em;
    /* Approximately 3 lines */
    overflow: hidden;
}

.text-fade-out::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(var(--bs-light-rgb), 0) 0%, rgba(var(--bs-light-rgb), 0) 10%, rgba(var(--bs-light-rgb), 1) 100%);
    pointer-events: none;
}

.aside-article ol {
    padding-left: 25px;
}

.aside-article ul {
    padding-left: 5px;
    list-style: none;
}

/* ============================================
   Bootstrap component customization
   ============================================ */
/* Buttons */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--bs-link-hover-color);
    border-color: var(--bs-link-hover-color);
}

/* Cards */
.card {
    background-color: var(--bs-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Add spacing to card body for better breathing room in list views only */
/* Article detail pages handle their own padding */
article .card-body {
    padding: 0.75rem;
}

@media (min-width: 768px) {
    article .card-body {
        padding: 1rem;
    }
}

/* Aside cards keep minimal padding */
aside .card-body {
    padding: 0.5rem;
}

/* Ensure images don't overflow cards, but exclude icons */
.card img:not([src*="icon"]),
.card-body img:not([src*="icon"]) {
    max-width: 100%;
    height: auto;
}

/* Images in article detail should fill the content width (respecting padding) */
article .card-body img:not([src*="icon"]) {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    /* Add some space below images */
}

@media (min-width: 768px) {
    article .card-body img:not([src*="icon"]) {
        width: 100%;
    }
}


/* ============================================
   Responsive Layout Fixes
   ============================================ */
/* Make tables fit within screen width on mobile */
.table {
    width: 100%;
    table-layout: auto;
}

/* Allow table cells to wrap text on mobile */
.table td,
.table th {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* Reduce font size on mobile for better fit */
@media (max-width: 640px) {
    .table {
        font-size: 0.85rem;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
    }

    footer table tr {
        line-height: 12px;
    }
}

/* ============================================
   Custom Table Colors (matching original design)
   ============================================ */
/* Override Bootstrap's default striped colors */
.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-bg-type: var(--bs-table-stripe-light);
    background-color: var(--bs-table-stripe-light);
}

.table-striped>tbody>tr:nth-of-type(even)>* {
    --bs-table-bg-type: var(--bs-table-stripe-tinted);
    background-color: var(--bs-table-stripe-tinted);
}

/* Override Bootstrap's default hover color */
.table-hover>tbody>tr:hover>* {
    --bs-table-bg-type: var(--bs-table-hover);
    background-color: var(--bs-table-hover);
}

/* ============================================
   PAGINATION CUSTOM COLORS
   ============================================ */
/* Active page - use brand primary color instead of Bootstrap blue */
.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* Hover state for pagination links */
.pagination .page-link:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* Default pagination link colors */
.pagination .page-link {
    color: var(--bs-primary);
}

/* Ensure article content doesn't overflow on mobile */
article {
    overflow-x: hidden;
}