/**
 * Report CSS
 * @file report.css
 * @description: Styles for the report page.
 * @author: LA County Department of Public Health
 * @version 1.0.0
 */

:root {
    --ph-dark-blue: #061c60;
    --ph-gold: #ffc107;
}

/* Natively forces all browser window updates to glide smoothly */
html {
    scroll-behavior: smooth;
}

/* Creates a precise layout viewport padding zone for the scroll engine */
#diseases-list {
    scroll-margin-top: 100px;
    /* Adjust this value to match your header height if needed */
}

.upperCase {
    text-transform: uppercase;
}

a {
    text-decoration: none;
}

.carousel-item img {
    max-width: 1197px;
    border: 1px solid #cbcccd;
}

/* header styles */
.section h2 {
    position: relative;
    color: var(--ph-dark-blue);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 5px 0;
    padding-bottom: 10px;
    text-transform: capitalize;
}

.section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 128px;
    height: 4px;
    background: var(--ph-gold);
    border-radius: 2px;
}

/* report page button styles */
.report-btn {
    --c1: #ffffff;
    --c2: #ffc107;
    --size-letter: 0.95rem;

    padding: 0.5em 1em;
    font-size: var(--size-letter);
    font-weight: 700;
    background-color: transparent;
    border: calc(var(--size-letter) / 6) solid var(--c2);
    border-radius: 0.2em;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: 300ms cubic-bezier(0.83, 0, 0.17, 1);
    color: var(--c1);

    &>.text {
        font-weight: 700;
        color: var(--c2);
        position: relative;
        z-index: 2;
        /* Increased layer to sit on top */
        transition: color 700ms cubic-bezier(0.83, 0, 0.17, 1);
    }
}

.report-btn::after {
    content: "";

    width: 0;
    height: calc(300% + 1em);

    position: absolute;
    translate: -50% -50%;
    inset: 50%;
    rotate: 30deg;

    background-color: var(--c2);
    z-index: 1;

    /* Explicitly forced behind the text (.text) layer */
    transition: 1000ms cubic-bezier(0.83, 0, 0.17, 1);
}

.report-btn:hover {
    &>.text {
        color: var(--c1) !important;
    }

    &::after {
        width: calc(120% + 1em);
    }
}

.report-btn:active {
    scale: 0.98;
    filter: brightness(0.9);
}

.align-report-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}


/* shared styles for the provider alert bar */
.provider-alert-bar {
    width: min(1000px, 100%);
    margin: 0 auto .45rem;

    background: linear-gradient(135deg,
            #061c60 0%,
            #143085 100%);

    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

    box-shadow: 0 8px 18px rgb(0 32 91 / 18%);
}

.provider-help-inner {
    display: block;
    align-items: center;

    /* justify-content: center; */

    gap: .75rem;
    padding: .9rem 1.5rem;

    color: #fff;

    font-size: .98rem;
    line-height: 1.6;

    text-align: center;

    max-width: 750px;
    margin: 0 auto;
}

.provider-header {
    font-size: clamp(0.95rem,
            1.15rem + 0.5vw,
            1.15rem);
}

.provider-help-inner i {
    flex-shrink: 0;

    color: #ffc107;

    font-size: clamp(0.95rem,
            1.15rem + 0.5vw,
            1.35rem);
}

.provider-text {
    font-size: clamp(0.75rem,
            0.85rem + 0.5vw,
            0.95rem);
}

.provider-help-inner strong {
    color: #fff;
}

.provider-help-inner a {
    color: #fff !important;
    font-weight: 700;
    white-space: nowrap;
}

.provider-help-inner a:hover,
.provider-help-inner a:focus {
    color: #ffc107 !important;
    text-decoration-thickness: 2px;
}

@media (max-width: 768px) {

    .provider-header {
        font-size: 0.9rem;
    }

    .provider-text {
        font-size: 0.8rem;
    }

}

@media (max-width: 600px) {

    .provider-help-inner {
        padding: .75rem 1rem;
    }

    .provider-help-inner i {
        font-size: clamp(0.75rem,
                0.85rem + 0.5vw,
                1.15rem);
    }

}

@media (max-width: 575px) {

    .provider-header {
        font-size: 0.86rem;
    }

    .provider-help-inner {
        padding: .75rem 1rem;
    }

    .provider-help-inner i {
        font-size: clamp(0.75rem,
                0.85rem + 0.5vw,
                1.15rem);
    }

    .provider-head {
        max-width: 330px;
        width: 100%;
        margin: 0 auto;
    }

}

@media (max-width: 480px) {

    .provider-help-inner a {
        font-size: 0.8rem;
        white-space: normal;
        padding: 0.25em 0.5em;
    }

}

/* shared styles for the provider alert bar */


/* ==========================================================================
   1. Brand Anchors & Links (.report-anchor)
   ========================================================================== */

.report-anchor a:not(.pdf-file-top a):not(.secondary-report-btn):not(.legal-code-highlight) {
    display: inline;

    padding-bottom: 2px;

    color: var(--soil-blue, #003f70);

    font-size: inherit;
    font-weight: 800;
    line-height: inherit;

    text-decoration: none !important;

    background-color: transparent;

    background-image: linear-gradient(var(--soil-gold-bright, #f3b125),
            var(--soil-gold-bright, #f3b125));

    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;

    border-radius: 0.15rem;

    overflow-wrap: anywhere;

    transition:
        color 0.2s ease,
        background-size 0.25s ease;
}

.report-anchor a i,
.report-anchor a svg {
    display: inline-block;

    margin-inline-start: 0.25rem;

    color: inherit !important;
    fill: currentColor;

    font-size: 0.75rem;
    vertical-align: 0.05em;

    transition: transform 0.2s ease;
}

.report-anchor a:not(.secondary-report-btn):not(.pdf-file-top a):not(.legal-code-highlight):hover,
.report-anchor a:not(.secondary-report-btn):not(.pdf-file-top a):not(.legal-code-highlight):focus-visible {
    color: var(--soil-blue-dark, #002b4d) !important;
    background-size: 100% 100%;
}

.report-anchor a:not(.secondary-report-btn):not(.pdf-file-top a):not(.legal-code-highlight):hover i,
.report-anchor a:not(.secondary-report-btn):not(.pdf-file-top a):not(.legal-code-highlight):not(.pdf-file-top a):hover svg,
.report-anchor a:not(.secondary-report-btn):not(.pdf-file-top a):not(.legal-code-highlight):focus-visible i,
.report-anchor a:not(.secondary-report-btn):not(.pdf-file-top a):not(.legal-code-highlight):focus-visible svg {
    transform: translate(2px, -2px);
}

.report-anchor a:not(.secondary-report-btn):not(.pdf-file-top a):not(.legal-code-highlight):focus-visible {
    outline: 3px solid var(--soil-gold, #d89a20);
    outline-offset: 3px;
}


/* ==========================================================================
   2. Base Structural Layout (Desktop Focus)
   ========================================================================== */

.reporting-header-card {
    background-color: #f0f9ff;
    border: 1px solid #e0f2fe;
    border-radius: 8px;
    padding: 0 15px 24px;
    margin-bottom: 20px;
}

.header-top-row {
    display: flex;
    flex-direction: column;
}

/*
 * PDF link when used inside the header area.
 */
.pdf-file-top {
    align-self: flex-end;
}

.reporting-header-card h2 {
    order: 2;
}

.intro-text {
    color: #334155;
    margin-bottom: 0px;
    font-size: 0.9rem !important;
}


/* ==========================================================================
   3. Input Controls & Buttons Layout
   ========================================================================== */

.directory-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 16px;

    width: 100%;
}


/*
 * PDF LINK
 *
 * Forces the PDF download button to take up
 * the entire first row.
 */
.directory-controls-row .pdf-file-top {
    flex: 0 0 100%;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    order: 3;

    /*
     * Overrides Bootstrap .mt-4 because the
     * PDF is already positioned using the row gap.
     */
    margin-top: 0 !important;

    margin-bottom: 0;

    padding: 0;
}


/*
 * SEARCH FIELD
 */
.directory-controls-row .search-box-wrapper {
    flex: 1 1 0;

    min-width: 0;

    order: 2;
}


/*
 * CONDITION DROPDOWN
 */
.directory-controls-row .custom-dropdown-container {
    flex: 1 1 0;

    min-width: 0;

    order: 3;
}


/* Search and dropdown controls */
.search-box-wrapper input,
.dropdown-trigger-btn {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid #cbd5e1;
    border-radius: 6px;

    background: #ffffff;

    font-size: 0.95rem;

    color: #334155;

    box-sizing: border-box;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


/* Focus states */
.search-box-wrapper input:focus,
.dropdown-trigger-btn:focus {
    outline: none;

    border-color: #0284c7;

    box-shadow:
        0 0 0 3px rgba(2, 132, 199, 0.15);
}


/* ==========================================================================
   4. PDF Component Elements Style
   ========================================================================== */

.pdf-file-top a,
.pdf-file-bottom a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #1e3a8a;

    background-color: #ffffff;

    border: 1px solid #bae6fd;

    padding: 8px 16px;

    border-radius: 6px;

    font-weight: 700;

    font-size: clamp(0.65rem,
            1.05vw,
            0.85rem);

    line-height: 1.4;

    text-decoration: none !important;

    white-space: nowrap;

    /*
     * Removes the old:
     *
     * position: relative;
     * top: -1rem;
     * right: -1rem;
     *
     * The flex layout now controls positioning.
     */
    position: static;

    transition:
        color 0.2s ease-in-out,
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
}


/* PDF hover */
.pdf-file-top a:hover,
.pdf-file-bottom a:hover {
    color: #ffffff !important;

    background-color: #1e3a8a;

    border-color: #1e3a8a;
}


/* PDF keyboard focus */
.pdf-file-top a:focus-visible,
.pdf-file-bottom a:focus-visible {
    color: #ffffff !important;

    background-color: #1e3a8a;

    border-color: #1e3a8a;

    outline: 3px solid #ffc107;

    outline-offset: 3px;
}


/* PDF icon */
.pdf-file-top a i,
.pdf-file-top a svg,
.pdf-file-bottom a i,
.pdf-file-bottom a svg {
    display: inline-block;

    color: #c62828 !important;

    fill: #c62828;

    font-size: clamp(0.65rem,
            1.05vw,
            0.85rem);

    flex-shrink: 0;

    transition:
        color 0.2s ease,
        fill 0.2s ease,
        transform 0.2s ease;
}


/*
 * Change icon to white on hover/focus
 * so it remains visible against dark blue.
 */
.pdf-file-top a:hover i,
.pdf-file-top a:hover svg,
.pdf-file-top a:focus-visible i,
.pdf-file-top a:focus-visible svg,
.pdf-file-bottom a:hover i,
.pdf-file-bottom a:hover svg,
.pdf-file-bottom a:focus-visible i,
.pdf-file-bottom a:focus-visible svg {
    color: #ffffff !important;
    fill: #ffffff;
}


/* Bottom PDF component */
.pdf-file-bottom {
    text-align: right;

    margin: 15px 0;
}


/* ==========================================================================
   5. Media Queries Responsive Rules
   ========================================================================== */


/* Tablet View Breakpoint Configuration */
@media (max-width: 900px) {

    .reporting-header-card {
        padding: 20px;
    }

}


/* ==========================================================================
   Narrow Tablet & Small Device View
   ========================================================================== */

@media (max-width: 768px) {

    .header-top-row {
        align-items: flex-start;

        gap: 12px;
    }


    /*
     * Stack PDF, search and dropdown.
     */
    .directory-controls-row {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }


    /*
     * Each control receives the full width.
     */
    .directory-controls-row .pdf-file-top,
    .directory-controls-row .search-box-wrapper,
    .directory-controls-row .custom-dropdown-container {
        width: 100%;

        flex: 0 0 auto;
    }


    /*
     * PDF remains first.
     */
    .directory-controls-row .pdf-file-top {
        display: flex;

        justify-content: flex-end;

        order: 1;
    }


    /*
     * Search remains second.
     */
    .directory-controls-row .search-box-wrapper {
        order: 2;
    }


    /*
     * Dropdown remains third.
     */
    .directory-controls-row .custom-dropdown-container {
        order: 3;
    }

}


/* ==========================================================================
   Smartphone Micro Target View
   ========================================================================== */

@media (max-width: 480px) {

    .reporting-header-card {
        padding: 16px;

        border-radius: 6px;
    }


    .intro-text {
        font-size: 0.9rem;

        line-height: 1.4;
    }


    /*
     * Full-width PDF button on mobile.
     */
    .directory-controls-row .pdf-file-top {
        justify-content: stretch;
        margin-bottom: 1rem;
    }


    .pdf-file-top a,
    .pdf-file-bottom a {
        display: flex;

        justify-content: center;

        width: 100%;

        box-sizing: border-box;

        white-space: normal;

        text-align: center;
    }


    .pdf-file-bottom {
        text-align: center;
    }

}


/* Buttons in main body */


/* ==========================================================================
   Responsive Grid System Architecture
   ========================================================================== */

.button-grid-container {
    display: grid;

    grid-template-columns: repeat(2, auto);

    justify-content: start;

    gap: 16px;

    margin: 15px 0;
}


/* ==========================================================================
   Responsive Grid System Architecture (Centered configuration)
   ========================================================================== */

.button-grid-container {
    display: grid;

    grid-template-columns: repeat(2, auto);

    justify-content: center;

    gap: 16px;

    margin: 1rem auto 2rem auto;

    width: fit-content;
}


/* ==========================================================================
   Base Button Shared Style (Anchor Tag Optimized - Public Health Core)
   ========================================================================== */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0.8em 1.75em;

    background-color: transparent;

    border-radius: 6px;

    transition: .5s;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    z-index: 1;

    font-weight: 600;

    font-size: 16px;

    font-family:
        'Roboto',
        'Segoe UI',
        sans-serif;

    text-transform: uppercase;

    text-decoration: none !important;

    box-sizing: border-box;
}

.btn::after,
.btn::before {
    content: '';

    display: block;

    height: 100%;
    width: 100%;

    transform:
        skew(90deg) translate(-50%, -50%);

    position: absolute;

    inset: 50%;

    left: 25%;

    z-index: -1;

    transition: .5s ease-out;
}

.btn::before {
    top: -50%;

    left: -25%;

    transform:
        skew(90deg) rotate(180deg) translate(-50%, -50%);
}

.btn:hover::before {
    transform:
        skew(45deg) rotate(180deg) translate(-50%, -50%);
}

.btn:hover::after {
    transform:
        skew(45deg) translate(-50%, -50%);
}

.btn:active {
    filter: brightness(.8);

    transform: scale(.98);
}

.btn i {
    font-size: 1.1rem;

    transition:
        color 0.5s ease,
        transform 0.3s ease;
}

.btn:hover i {
    transform: scale(1.05);
}


/* ==========================================================================
   Secondary Report Button
   ========================================================================== */

.secondary-report-btn {
    --color: #0369a1;
    --color2: #ffffff;

    border: 1.5px solid var(--color);

    color: var(--color) !important;
}

.secondary-report-btn::after,
.secondary-report-btn::before {
    background-color: var(--color);
}

.secondary-report-btn:hover {
    color: var(--color2) !important;
}


/* ==========================================================================
   Mobile Main Body Buttons
   ========================================================================== */

@media (max-width: 480px) {

    .button-grid-container {
        grid-template-columns: 1fr;

        justify-content: stretch;

        width: 100%;
    }


    .btn {
        width: 100%;
    }

}