/* Styles for the nursing home detail page (nursing-home-plugin_template-detail.php
   and nursing-home-template-detail-v2.php). Moved out of inline <style> tags so
   they load as a normal enqueued stylesheet instead of being baked into
   Elementor's per-post generated CSS file. Elementor caches that generated CSS
   once per post, but every nursing home detail page (nh-XXXXXX) shares the same
   underlying Elementor post/template while rendering a different number of
   dynamic elements (boxes/sliders) per provider. Keeping these rules in Elementor's
   post-level cache meant styles could go missing whenever that cache was rebuilt
   from a provider with a different element count. An independently enqueued
   stylesheet is not tied to that per-post cache and always contains every rule.

   The rules below that came from nursing-home-plugin_template-detail.php (the
   older "v1" template) are scoped under .nursinghouse-detail - that's the
   wrapper div only v1 uses. nursing-home-template-detail-v2.php reuses the same
   class names (.slider, .slider-item, .container) for a different toggle
   mechanism (plain display:none/block instead of v1's max-height collapse), so
   leaving these unscoped made v1's max-height:0/overflow:hidden rule apply to
   v2's slider too, which broke "Read more" (display became "block" but the
   content stayed clipped to zero height). Scoping keeps the two templates from
   colliding even though they're both loaded on any nursinghouse_id page. */

.nursinghouse-detail .container {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 20px;
}

.nursinghouse-detail .box {
    display: flex;
    padding: 10px 20px;
    background-color: #ffffff;
    border: 2px solid #000000;
    color: black;
    font-weight: bold;
    justify-content: space-between;
    align-items: left;
    margin-top: 20px;
}

.nursinghouse-detail .slider-container {
    overflow: hidden;
    border: 2px solid #2980b9;
    margin: 20px auto;
    position: relative;
}

.nursinghouse-detail .toggle-button {
    background: #000000;
    color: white;
    border: black;
    padding: 10px;
    cursor: pointer;
}

.nursinghouse-detail .slider {
    display: flex;
    flex-direction: column;
    transition: max-height 0.3s ease;
    max-height: 0;
    overflow: hidden;
    background: #ffffff;
}

.nursinghouse-detail .slider-item {
    display: flex;
    padding: 10px 20px;
    background-color: #ffffff;
    border: 2px solid #000000;
    color: black;
    font-weight: bold;
    justify-content: left;
    align-items: left;
    margin-top: 20px;
}

.custom-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff !important; /* Primary blue */
    color: white !important;
    border: #007bff;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.custom-button:hover {
    background-color: #0056b3 !important; /* Darker blue for hover effect */
}

.custom-button.active {
    background-color: transparent !important; /* Make background transparent when active */
    color: black !important; /* Change text color to black */
    border: 1px solid black !important; /* Add black border */
}

/* nursing-home-template-detail-v2.php ("Inspection Reports" list) used to reuse
   Elementor library template 2074's own class names (elementor-element-<hex>),
   which only get their layout/colors from that template's own generated CSS
   file (wp-content/uploads/elementor/css/post-2074.css). That file is fragile:
   it's regenerated whenever someone edits template 2074 in Elementor, it drifts
   out of sync with this hardcoded markup, and (as happened once already) the
   Elementor editor can mistake this shortcode's rendered HTML for its own
   content and freeze a single example record's data into the page permanently.
   These nh-report-* classes are this plugin's own, so the section no longer
   depends on template 2074 or its generated CSS at all - values below were
   captured from post-2074.css before the switch, to keep the same look. */

.nh-report-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
}

.nh-report-total-wrap .elementor-heading-title {
    color: var(--e-global-color-primary, inherit);
}

.nh-report-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
    background-color: #F4F7FB;
}

.nh-report-card-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    width: 100%;
}

.nh-report-date-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 20%;
}

.nh-report-count-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 25%;
}

.nh-report-sev-block {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    width: 15%;
}

.nh-report-to-wrap {
    align-self: center;
}

.nh-report-badge {
    padding: 0 8px;
    text-align: center;
    align-self: flex-start;
}

.nh-report-badge-from {
    background-color: #EDE2DC;
}

.nh-report-badge-to,
.nh-report-badge-seriousness {
    background-color: #E8D1C6;
}

.nh-report-link-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 20%;
}

.nh-report-btn-block {
    width: 100%;
    max-width: 100%;
    text-align: center;
}

.nh-report-detail-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    width: 100%;
}

.nh-report-detail-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nh-report-detail-45 {
    width: 45%;
}

.nh-report-detail-20 {
    width: 20%;
}

.nh-report-detail-15 {
    width: 15%;
}

.nh-report-rating-severity {
    --e-rating-icon-font-size: 28px;
    --e-rating-gap: 10px;
    --e-rating-icon-marked-color: #00A99D;
}

.nh-report-rating-scope {
    --e-rating-icon-font-size: 28px;
    --e-rating-gap: 10px;
    --e-rating-icon-marked-color: var(--e-global-color-primary, #0056b3);
}

@media (max-width: 768px) {
    .nh-report-date-block,
    .nh-report-count-block,
    .nh-report-sev-block,
    .nh-report-link-block,
    .nh-report-detail-45,
    .nh-report-detail-20,
    .nh-report-detail-15 {
        width: 100%;
    }
}