/* joetennisreviews.com - extracted from SITE_PASTE_READY_R3_WithIDs.html + type-scale normalization */
/* Global Styles */
    html, body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f4f4f9;
        color: #333;
    }

    body.no-scroll {
        overflow: hidden; /* Disable scrolling while popup is active */
    }

    header {
        background: #444;
        color: #fff;
        padding: 0.5rem 0; /* Reduce padding */
        text-align: center;
    }

    nav {
        display: flex;
        justify-content: center;
        background: #333;
        padding: 0.5rem 0;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    nav a {
        color: #fff;
        text-decoration: none;
        margin: 0 1rem;
    }

    nav a:hover {
        text-decoration: underline;
    }

    .container {
        max-width: 100%; /* Expand the container width */
        padding: 0 1rem; /* Add padding for responsiveness */
    }

    /* General Section Styling */
    .section-content {
        margin: 1rem 0;
        padding: 1.5rem;
        border-radius: 5px;
        background: #fff; /* White background for all section content */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }

    /* Customer Reviews Styling */
    #customer-reviews {
        width: 100%; /* Make sure the section spans the entire width */
        margin: auto;
        padding: 1rem 0;
    }

    #customer-reviews table {
        width: 100%; /* Table spans full width of the parent */
        border-collapse: collapse;
        font-size: 1.2rem;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        /*table-layout: fixed; /* Ensures even column spacing */
    }

    #customer-reviews th, #customer-reviews td {
        padding: 12px 15px;
        border: 1px solid #ddd;
        text-align: left;
        word-wrap: break-word; /* Prevent text overflow */
    }

    #customer-reviews th {
        background-color: #444;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
    }

    #customer-reviews tbody tr:nth-child(even) {
        background-color: #f4f4f9;
    }

    /* Individual Reviews */
    #customer-reviews article {
        margin: 1rem 0; /* Space between reviews */
        padding: 1rem; /* Padding inside each review */
        border-radius: 5px; /* Rounded corners for individual reviews */
        border: 1px solid #ddd; /* Subtle border around reviews */
        background: #fff; /* White background for each review */
    }

    /* Doing Business As Section */
    #known-businesses .section-content {
        background: none; /* Remove the white background */
        box-shadow: none; /* Remove the shadow effect */
    }

    header h1 {
        font-size: 1.8rem; /* Reduce font size */
        font-weight: bold;
        margin: 0;
        padding-bottom: 0.5rem; /* Add spacing below the line */
    }

    header p {
        font-size: 1rem; /* Smaller font for the subheading */
        margin: 0.5rem 0 0; /* Adjust spacing */
    }

    h2 {
        font-size: 1.5rem;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        padding-bottom: 0.3rem;
    }

    footer {
        background: #444;
        color: #fff;
        text-align: center;
        padding: 1rem 0;
        margin-top: 2rem;
    }

    .hidden {
        display: none; /* Content is hidden by default */
    }

    /* Popup Styling */
    .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #mandatory-popup {
        display: flex;
    }

    .popup-content {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        max-width: 90%;
        max-height: 80%;
        overflow-y: auto;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        text-align: left;
    }

    .close-popup {
        display: block;
        margin: 10px auto;
        background: #444;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 14px;
        border-radius: 5px;
        text-align: center;
    }

    .close-popup:hover {
        background: #333;
    }

    /* Ensure the table is scrollable on mobile devices */
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        font-size: 1.2rem;
        text-align: left;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    thead {
        background-color: #444;
        color: white;
    }

    th, td {
        padding: 12px 15px;
        border: 1px solid #ddd;
    }

    tr:nth-child(even) {
        background-color: #f4f4f9;
    }

    th {
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* Adjust for Mobile */
    @media (max-width: 768px) {
        #customer-reviews table {
            display: block;
            overflow-x: auto; /* Enables horizontal scrolling */
            white-space: nowrap; /* Prevents table content wrapping */
        }

        #customer-reviews th, #customer-reviews td {
            font-size: 1rem;
            padding: 8px;
        }
    }

    /* General Table Styling */
    table {
        width: 100%; /* Ensures both tables span the same width */
        border-collapse: collapse;
        margin: 1rem 0;
        font-size: 1.2rem;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    table th, table td {
        padding: 12px 15px;
        border: 1px solid #ddd;
        text-align: left;
    }

    table th {
        background-color: #444;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1rem;
    }

    table tbody tr:nth-child(even) {
        background-color: #f4f4f9;
    }

    #reviews-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        font-size: 1.2rem;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    #reviews-table th, #reviews-table td {
        padding: 12px 15px;
        border: 1px solid #ddd;
        text-align: left;
    }

    #reviews-table th {
        background-color: #444;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1rem;
    }

    #reviews-table tbody tr:nth-child(even) {
        background-color: #f4f4f9;
    }

    #pagination-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        gap: 5px;
    }

    .pagination-button {
        background-color: #444;
        color: white;
        border: none;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 4px;
        font-size: 1rem;
    }

    .pagination-button.active {
        background-color: #333;
        font-weight: bold;
    }

    .pagination-button:hover {
        background-color: #555;
    }

    /* Remove surrounding cell */
    #customer-reviews .section-content {
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
        background: none; /* Remove background color */
        box-shadow: none; /* Remove box-shadow */
    }

    /* Contact Us Section Styling */
    #contact {
        width: 100%; /* Full width */
        margin: 0 auto; /* Center the section */
        padding: 0rem 0; /* Vertical spacing */
        text-align: left; /* Align content to the left */
    }

    #contact h2 {
        font-size: 1.8rem; /* Consistent header size */
        font-weight: bold;
        margin-bottom: 1rem; /* Space below the header */
        text-align: left; /* Align the header to the left */
    }

    #contact .section-content {
        max-width: 1200px; /* Match other sections */
        margin: 0 auto; /* Center content horizontally */
        padding: 1rem; /* Add spacing inside the container */
        font-size: 1.4rem;
        line-height: 1.5; /* Consistent spacing for readability */
        background: #fff; /* Ensure background color consistency */
        border-radius: 5px; /* Rounded corners for uniformity */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    }

    #contact p {
        margin: 0; /* Remove extra margin */
        text-align: left; /* Align text to the left */
    }

    #contact a {
        color: #007bff; /* Highlight email link */
        text-decoration: none;
    }

    #contact a:hover {
        text-decoration: underline; /* Add hover effect */
    }

    /* Report & Get Help Section Styling */
    #report-and-get-help {
        width: 100%; /* Full width */
        margin: 0 auto; /* Center the section */
        padding: 0rem 0; /* Vertical spacing */
        text-align: left; /* Align content to the left */
    }

    #report-and-get-help h2 {
        font-size: 1.8rem; /* Consistent header size */
        font-weight: bold;
        margin-bottom: 1rem; /* Space below the header */
        text-align: left; /* Align the header to the left */
    }

    #report-and-get-help .section-content {
        max-width: 1200px; /* Match other sections */
        margin: 0 auto; /* Center content horizontally */
        padding: 1rem; /* Add spacing inside the container */
        font-size: 1.4rem;
        line-height: 1.5; /* Consistent spacing for readability */
        background: #fff; /* Ensure background color consistency */
        border-radius: 5px; /* Rounded corners for uniformity */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    }

    #report-and-get-help p {
        margin: 0; /* Remove extra margin */
        text-align: left; /* Align text to the left */
    }

    #report-and-get-help a {
        color: #007bff; /* Highlight email link */
        text-decoration: none;
    }

    #report-and-get-help a:hover {
        text-decoration: underline; /* Add hover effect */
    }


/* ============================================================
   TYPE SCALE NORMALIZATION - added 2026-07-23
   The inherited stylesheet mixed units and sizes: h2 was 1.5rem in most
   sections but 1.8rem under #contact and #report-and-get-help; body prose
   was 1rem in the About sections but 1.4rem in those two; tables were
   1.2rem; .close-popup was the only px value in the file. Result: the lower
   half of the page rendered ~40% larger than the top. One scale below.
   ============================================================ */

/* Root size drives the whole scale below, because every value here is in rem.
   100% = 16px (browser default). 93.75% = 15px, i.e. one standard step down.
   Reduced to 93.75% on 2026-07-23 - text read too large.
   TO REVERT: set this back to 100%. Nothing else needs touching.
   Using a percentage rather than a px value keeps the user's own browser
   font-size preference working proportionally. */
html { font-size: 93.75%; }
body { font-size: 1rem; line-height: 1.65; }

/* headings */
header h1                                   { font-size: 2rem; line-height: 1.25; }
header p                                    { font-size: 1.0625rem; font-weight: 400; opacity: .92; }
h2,
#contact h2,
#report-and-get-help h2                     { font-size: 1.5rem; line-height: 1.3; }
.popup-content h3                           { font-size: 1.25rem; }
.popup-content h4                           { font-size: 1.0625rem; margin-top: 1.25em; }

/* body prose - one size everywhere */
.section-content,
#contact .section-content,
#report-and-get-help .section-content       { font-size: 1rem; line-height: 1.65; }
.popup-content, .popup-content p,
.popup-content li                           { font-size: 1rem; line-height: 1.6; }

/* prose column width - #contact and #report-and-get-help already used
   max-width:1200px; applying the same value everywhere for consistency.
   Tables are deliberately excluded and stay full width. */
.section-content                            { max-width: 1200px; margin-left: auto; margin-right: auto; }
#known-businesses .section-content,
#customer-reviews .section-content          { max-width: none; }

/* tables */
table, #customer-reviews table              { font-size: 1rem; }
table td, #customer-reviews td              { line-height: 1.6; vertical-align: top; }
table th, #customer-reviews th              { font-size: .8125rem; letter-spacing: .04em; }

/* controls */
.pagination-button                          { font-size: .9375rem; }
.close-popup, #agree-button                 { font-size: .9375rem; }
#agree-button                               { background:#444; color:#fff; border:none;
                                              padding:10px 20px; border-radius:5px; cursor:pointer; }
#agree-button:hover                         { background:#333; }

/* visually hidden but available to screen readers (table captions) */
.sr-only                                    { position: absolute; width: 1px; height: 1px;
                                              padding: 0; margin: -1px; overflow: hidden;
                                              clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- nav ----------
   Sticky again 2026-07-23 at the site owner's request. It was unpinned earlier
   because page content scrolling underneath it read as the bar "covering" text.
   That is inherent to position:sticky, so the treatment below makes the boundary
   unambiguous rather than trying to prevent it: an opaque background, a hard
   bottom edge, and a drop shadow so content clearly passes BEHIND the bar.
   scroll-margin-top keeps anchor-link targets from landing underneath it.
   TO UNPIN AGAIN: change position to static and drop the z-index. */
nav                                         { position: sticky; top: 0; z-index: 1000;
                                              background: #333;
                                              border-bottom: 2px solid #1a1a1a;
                                              box-shadow: 0 3px 10px rgba(0,0,0,.32); }
section[id]                                 { scroll-margin-top: 4.25rem; }
/* the popups sit above everything, including the pinned nav */
.popup                                      { z-index: 2000; }

/* ---------- photographs and AI renderings in About Joe ---------- */
.photo-block                                { margin: 1.6rem 0 0; }
.photo-block h3                             { font-size: 1.125rem; margin: 0 0 .5rem; }
.photo-row                                  { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
/* Fixed COLUMN WIDTH, natural height. A forced height distorted portrait
   images and let the square one render nearly twice as wide as the others. */
.photo-item                                 { margin: 0; flex: 0 0 auto; width: 232px; max-width: 100%; }
.photo-item img                             { display: block; width: 100%; height: auto;
                                              border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.photo-item figcaption                      { font-size: .8125rem; line-height: 1.45; color: #555; margin-top: .4rem; }
.photo-item figcaption em                   { display: block; margin-top: .25rem; color: #333; }

/* The renderings are visually separated so they cannot be mistaken for
   photographs: tinted panel, amber rule, and a tag on every caption. */
.render-block                               { background: #fdf7ec; border: 1px solid #e6d4b0;
                                              border-left: 4px solid #c98a1a; border-radius: 5px;
                                              padding: 1rem 1.1rem; margin-top: 1.8rem; }
.render-block h3                            { color: #7a5209; }
.render-notice                              { font-size: .875rem; line-height: 1.55; margin: 0 0 .6rem; }
.photo-row-4 .photo-item                    { width: 200px; }
/* six renders on one desktop line (2026-09-14): 6 x 170 + 5 x 15 gap = 1,095px, inside the 1,122px block */
.photo-row-6 .photo-item                    { width: 170px; }
.render-block .photo-item img               { border-color: #c98a1a; }
.gen-tag                                    { display: inline-block; background: #c98a1a; color: #fff;
                                              font-size: .625rem; font-weight: 700; text-transform: uppercase;
                                              letter-spacing: .06em; padding: .1rem .35rem; border-radius: 3px;
                                              margin-right: .3rem; vertical-align: 1px; }

@media (max-width: 768px) {
  .photo-item                               { width: 46%; max-width: 46%; }
  .photo-row-4 .photo-item                  { width: 46%; max-width: 46%; }
  .photo-row-6 .photo-item                  { width: 46%; max-width: 46%; }
}

/* ---------- correspondence from the subject ----------
   NOTE: the inherited stylesheet styles <header> globally (dark background,
   white text, centred) for the page banner. These articles use <header> too,
   so every one of those properties has to be undone explicitly or the meta
   line renders dark-grey-on-near-black and is unreadable. */
.corr                                       { background: #fff; border: 1px solid #ddd; border-left: 4px solid #444;
                                              border-radius: 5px; padding: 1rem 1.2rem; margin: 0 0 1.1rem; }
.corr .corr-head                            { background: none; color: inherit; text-align: left;
                                              padding: 0 0 .55rem; margin: 0 0 .65rem;
                                              border-bottom: 1px solid #eee;
                                              display: flex; flex-wrap: wrap; gap: .15rem .9rem;
                                              align-items: baseline; }
.corr .corr-date                            { font-weight: 700; font-size: 1rem; color: #222; }
.corr .corr-meta                            { font-size: .8125rem; color: #5a5a5a; }
.corr code                                  { font-size: .95em; background: #f0f0f0; color: #333;
                                              padding: .05em .3em; border-radius: 3px; }
.corr blockquote                            { margin: 0; padding: 0; border: 0; max-width: none;
                                              font-size: 1rem; line-height: 1.7; color: #222; }
.corr blockquote br + br                    { line-height: 2.2; }
.corr-warning                               { background: #fdf7ec; border-left: 4px solid #c98a1a;
                                              padding: .7rem 1rem; border-radius: 4px;
                                              font-size: .9375rem; line-height: 1.6; max-width: none; }
.corr-note                                  { font-size: .9375rem; line-height: 1.6; max-width: none;
                                              border-top: 1px solid #e5e5e5; padding-top: .9rem; margin-top: 1.3rem; }
#correspondence .section-content > p        { max-width: none; }

/* ---------- Ohio AG complaints ---------- */
.ag-privacy                                 { background: #eef4fa; border-left: 4px solid #3c6e9f;
                                              padding: .7rem 1rem; border-radius: 4px;
                                              font-size: .9375rem; line-height: 1.6; max-width: none; }
.ag-note                                    { font-size: .875rem; line-height: 1.6; color: #444;
                                              max-width: none; background: #f7f7f7; padding: .65rem .9rem;
                                              border-radius: 4px; }
.ag-sub                                     { font-size: .875rem; color: #666; max-width: none; }
#ag-complaints .section-content > p         { max-width: none; }
#ag-complaints h3                           { font-size: 1.125rem; margin: 1.6rem 0 .4rem; }
.agc                                        { background: #fff; border: 1px solid #ddd;
                                              border-left: 4px solid #3c6e9f; border-radius: 5px;
                                              padding: .95rem 1.15rem; margin: 0 0 1rem; }
.agc .agc-head                              { background: none; color: inherit; text-align: left;
                                              padding: 0 0 .5rem; margin: 0 0 .6rem;
                                              border-bottom: 1px solid #eee; display: flex;
                                              flex-wrap: wrap; gap: .15rem .9rem; align-items: baseline; }
.agc .agc-no                                { font-weight: 700; font-size: .9375rem; color: #1f4d75;
                                              font-variant-numeric: tabular-nums; }
.agc .agc-meta                              { font-size: .8125rem; color: #5a5a5a; }
.agc blockquote                             { margin: 0; padding: 0; border: 0; max-width: none;
                                              font-size: 1rem; line-height: 1.7; color: #222; }

/* ---------- direct reports to the site ---------- */
.dr-tier                                    { background: #f4f0fa; border-left: 4px solid #6b4fa0;
                                              padding: .7rem 1rem; border-radius: 4px;
                                              font-size: .9375rem; line-height: 1.6; max-width: none; }
.dr-privacy, .dr-sub                        { font-size: .875rem; color: #555; max-width: none; line-height: 1.6; }
#direct-reports .section-content > p        { max-width: none; }
#direct-reports h3                          { font-size: 1.125rem; margin: 1.6rem 0 .3rem; }
.dr                                         { background: #fff; border: 1px solid #ddd;
                                              border-left: 4px solid #6b4fa0; border-radius: 5px;
                                              padding: .95rem 1.15rem; margin: 0 0 1rem; }
.dr .dr-head                                { background: none; color: inherit; text-align: left;
                                              padding: 0 0 .5rem; margin: 0 0 .6rem;
                                              border-bottom: 1px solid #eee; display: flex;
                                              flex-wrap: wrap; gap: .15rem .9rem; align-items: baseline; }
.dr .dr-who                                 { font-weight: 700; font-size: 1rem; color: #222; }
.dr .dr-meta                                { font-size: .8125rem; color: #5a5a5a; }
.dr blockquote                              { margin: 0; padding: 0; border: 0; max-width: none;
                                              font-size: 1rem; line-height: 1.7; color: #222; }
.dr .dr-note                                { font-size: .8125rem; color: #555; line-height: 1.55;
                                              max-width: none; margin: .7rem 0 0; padding-top: .6rem;
                                              border-top: 1px dashed #e0e0e0; }
.dr-foot                                    { font-size: .9375rem; line-height: 1.6; max-width: none;
                                              border-top: 1px solid #e5e5e5; padding-top: .9rem; margin-top: 1.3rem; }

/* ---------- expandable evidence entries (AG complaints, direct reports) ----
   Each entry collapses to a one-line summary with a text preview, so a reader
   can scan 8 complaints or 7 reports at a glance and open only what they want.
   Full text stays in the DOM (inside <details>), so it is still present in the
   page source for search engines and archivers. */
details.agc, details.dr                     { background: #fff; border: 1px solid #ddd;
                                              border-radius: 5px; margin: 0 0 .5rem; }
details.agc                                 { border-left: 4px solid #3c6e9f; }
details.dr                                  { border-left: 4px solid #6b4fa0; }
details.agc > summary, details.dr > summary { cursor: pointer; padding: .6rem .9rem;
                                              display: block; list-style: none;
                                              font-size: .875rem; line-height: 1.5; }
details.agc > summary::-webkit-details-marker,
details.dr  > summary::-webkit-details-marker { display: none; }
details.agc > summary::before, details.dr > summary::before {
                                              content: '\25B8'; display: inline-block;
                                              margin-right: .5rem; color: #888;
                                              transition: transform .12s ease; }
details[open].agc > summary::before, details[open].dr > summary::before {
                                              transform: rotate(90deg); }
details.agc > summary:hover, details.dr > summary:hover { background: #f7f9fb; }
details.agc .agc-no                         { font-weight: 700; color: #1f4d75;
                                              font-variant-numeric: tabular-nums; margin-right: .6rem; }
details.dr  .dr-who                         { font-weight: 700; color: #222; margin-right: .6rem; }
details.agc .agc-meta, details.dr .dr-meta  { font-size: .8125rem; color: #5a5a5a; margin-right: .6rem; }
.ex-prev                                    { display: block; color: #666; font-size: .8125rem;
                                              margin-top: .2rem; font-style: italic; }
details[open] .ex-prev                      { display: none; }
details.agc blockquote, details.dr blockquote { margin: 0; padding: 0 .9rem .9rem 1.5rem;
                                              border: 0; max-width: none; font-size: 1rem;
                                              line-height: 1.7; color: #222; font-style: normal; }
details.dr .dr-note                         { font-size: .8125rem; color: #555; line-height: 1.55;
                                              max-width: none; margin: 0 .9rem .9rem 1.5rem;
                                              padding-top: .6rem; border-top: 1px dashed #e0e0e0; }
.expand-hint                                { font-size: .8125rem; color: #666; margin: .2rem 0 .7rem; }

/* ---------- unified evidence row ----------------------------------------
   One layout for every kind of documented complaint. Nothing is collapsed:
   the full text of every entry is visible without interaction.
   Header line carries the facts a reader scans for - date, source tier,
   who, which trade name, how much - then the account itself at full width. */
.ev-list                                    { margin: 1rem 0 0; }
.ev                                         { border-top: 1px solid #e3e3e3; padding: 1rem 0 1.1rem; }
.ev:first-child                             { border-top: 2px solid #ccc; }
.ev-head                                    { display: flex; flex-wrap: wrap; align-items: baseline;
                                              gap: .4rem .8rem; margin-bottom: .5rem; }
.ev-date                                    { font-weight: 700; font-size: .9375rem; color: #222;
                                              font-variant-numeric: tabular-nums; min-width: 5.5em; }
.ev-badge                                   { font-size: .6875rem; font-weight: 700; text-transform: uppercase;
                                              letter-spacing: .06em; padding: .12rem .4rem; border-radius: 3px;
                                              color: #fff; white-space: nowrap; }
.ev-direct                                  { background: #6b4fa0; }
.ev-ag                                      { background: #3c6e9f; }
.ev-court                                   { background: #7a1f1f; }
.ev-platform                                { background: #55606b; }
.ev-who                                     { font-weight: 700; font-size: .9375rem; color: #222; }
.ev-biz                                     { font-size: .8125rem; color: #5a5a5a; }
.ev-amt                                     { margin-left: auto; font-weight: 700; font-size: 1rem;
                                              color: #7a1f1f; font-variant-numeric: tabular-nums;
                                              white-space: nowrap; }
.ev-amt.ev-avoided                          { color: #1a7a3c; font-weight: 600; font-size: .875rem; }
.ev-text                                    { margin: 0; font-size: 1rem; line-height: 1.65; color: #222; }
.ev-note                                    { margin: .6rem 0 0; padding-top: .55rem; font-size: .8125rem;
                                              line-height: 1.55; color: #555; border-top: 1px dashed #e0e0e0; }
@media (max-width: 620px) {
  .ev-amt                                   { margin-left: 0; }
  .ev-date                                  { min-width: 0; }
}

/* ---------- review card grid ----------------------------------------------
   Two columns on desktop so long verbatim complaints get real width instead of
   a squeezed table cell; one column on narrow screens. align-items:start keeps
   each card its natural height rather than stretching a short one to match a
   long neighbour. Reading order stays chronological (row-major). */
.ev-grid                                    { display: grid; gap: 0;
                                              grid-template-columns: 1fr;
                                              align-items: start; margin: .8rem 0 0; }
.ev-card                                    { background: #fff; border: 1px solid #ddd;
                                              border-bottom: 0; padding: .55rem .9rem .6rem; }
.ev-card:first-child                        { border-radius: 5px 5px 0 0; }
.ev-card:last-child                         { border-bottom: 1px solid #ddd; border-radius: 0 0 5px 5px; }
.ev-card:nth-child(even)                    { background: #fafafa; }
.ev-card .ev-head                           { display: flex; flex-wrap: wrap; align-items: baseline;
                                              gap: .3rem .7rem; margin-bottom: .3rem;
                                              padding-bottom: 0; border-bottom: 0; }
.ev-card .ev-date                           { font-weight: 700; font-size: .875rem; color: #222;
                                              font-variant-numeric: tabular-nums; }
.ev-card .ev-who                            { font-weight: 700; font-size: .875rem; color: #222; }
.ev-loc                                     { font-size: .75rem; color: #777; }
.ev-card .ev-biz                            { font-size: .75rem; color: #5a5a5a; margin-left: auto;
                                              text-align: right; }
.ev-card .ev-text                           { margin: 0; font-size: .9375rem; line-height: 1.55; color: #222; }
/* the platform badge IS the source link - no separate footer line repeating it */
a.ev-badge                                  { text-decoration: none; }
a.ev-badge:hover, a.ev-badge:focus          { filter: brightness(1.18); text-decoration: underline; }
a.ev-badge:focus-visible                    { outline: 2px solid #222; outline-offset: 2px; }
.ev-flag                                    { font-size: .625rem; font-weight: 700; text-transform: uppercase;
                                              letter-spacing: .05em; color: #8a5a00; background: #fdf0d5;
                                              border: 1px solid #e8cf9a; padding: 0 .3rem; border-radius: 3px; }
/* platform badge colours */
.ev-yelp                                    { background: #a32b28; }
.ev-bbb                                     { background: #1a5a8a; }
.ev-ha                                      { background: #d97706; }
.ev-porch                                   { background: #2f7d5c; }
.ev-birdeye                                 { background: #6b4fa0; }
.ev-other                                   { background: #55606b; }
@media (max-width: 640px) {
  .ev-grid                                  { grid-template-columns: 1fr; }
  .ev-card .ev-biz                          { margin-left: 0; text-align: left; }
}

/* The inherited stylesheet carries a rule on #customer-reviews article setting
   margin 1rem 0 and padding 1rem, left over from the old design. ID+element
   beats a plain class, so every .ev-card rule was being overridden and the
   cards kept a 1rem gap. These selectors match that specificity to undo it. */
#customer-reviews .ev-card                  { margin: 0; padding: .55rem .9rem .6rem;
                                              border: 1px solid #ddd; border-bottom: 0;
                                              border-radius: 0; box-shadow: none; }
#customer-reviews .ev-card:first-child      { border-radius: 5px 5px 0 0; }
#customer-reviews .ev-card:last-child       { border-bottom: 1px solid #ddd; border-radius: 0 0 5px 5px; }
#customer-reviews .ev-card:nth-child(even)  { background: #fafafa; }

/* ---------- court judgments ---------- */
#court-judgments table                      { margin-top: .6rem; }
.cj-note                                    { font-size: .875rem; line-height: 1.6; color: #444;
                                              background: #f7f7f7; padding: .6rem .9rem;
                                              border-radius: 4px; border-left: 3px solid #bbb; }
#court-judgments h3                         { font-size: 1.125rem; margin: 1.8rem 0 .3rem; }
.cj-amt                                     { text-align: right; font-variant-numeric: tabular-nums;
                                              white-space: nowrap; font-weight: 600; }
.cj-no                                      { color: #7a1f1f; font-weight: 700; white-space: nowrap; }
.cj-sub                                     { font-size: .8125rem; color: #666; }
tr.cj-total td                              { background: #f0f0f0; border-top: 2px solid #999; }
tr.cj-total .cj-amt                         { font-size: 1.0625rem; color: #7a1f1f; }

/* ---------- nav: current-section indicator ----------
   site.v*.js adds .is-current to the link whose section is in view. The
   indicator is a bar along the bottom edge of the item plus a lighter
   background, so it reads even where the nav wraps to two lines. */
nav a.is-current                            { background: #4a4a4a; color: #fff;
                                              box-shadow: inset 0 -3px 0 #c98a1a; }
nav a.is-current:hover                      { background: #555; }
@media (prefers-reduced-motion: no-preference) {
  nav a                                     { transition: background-color .12s ease, box-shadow .12s ease; }
}

.dba-alert                                  { background: #fdecea; border-left: 4px solid #a32b28;
                                              padding: .8rem 1.05rem; border-radius: 4px;
                                              font-size: 1.0625rem; line-height: 1.55; color: #222; }
.dba-note                                   { font-size: .9375rem; line-height: 1.6; color: #444;
                                              background: #f7f7f7; padding: .65rem .95rem;
                                              border-radius: 4px; border-left: 3px solid #bbb; }

/* ---------- About This Site ---------- */
.as-key                                     { background: #fdf7ec; border-left: 4px solid #c98a1a;
                                              padding: .75rem 1rem; border-radius: 4px;
                                              font-size: 1rem; line-height: 1.6; }

/* ---------- About Joe ---------- */
.aj-key                                     { background: #fdf7ec; border-left: 4px solid #c98a1a;
                                              padding: .75rem 1rem; border-radius: 4px;
                                              font-size: 1rem; line-height: 1.6; }
.aj-note                                    { background: #f7f7f7; border-left: 3px solid #bbb;
                                              padding: .6rem .9rem; border-radius: 4px;
                                              font-size: .875rem; line-height: 1.6; color: #444; }
.aj-sub                                     { font-size: .875rem; color: #666; line-height: 1.55; }
#about-joe h3                               { font-size: 1.125rem; margin: 1.8rem 0 .3rem; }

/* ---------- about the positive reviews ----------
   Side-by-side comparison. The original 2021 review sits on the left, the
   later fragments on the right, with the shared sentences highlighted so the
   reader can see the match without having to compare the text word by word. */
#positive-reviews h3                        { font-size: 1.125rem; margin: 1.8rem 0 .3rem; }
.pr-quote                                   { margin: .6rem 0 1rem; padding: .8rem 1.1rem;
                                              background: #fff; border: 1px solid #ddd;
                                              border-left: 4px solid #444; border-radius: 5px;
                                              font-size: 1rem; line-height: 1.65; color: #222; }
.pr-sub                                     { font-size: .875rem; color: #666; line-height: 1.55; }
.pr-pair                                    { display: grid; gap: .8rem; margin: .8rem 0 1.1rem;
                                              grid-template-columns: 1fr 1fr; align-items: start; }
.pr-side                                    { background: #fff; border: 1px solid #ddd;
                                              border-radius: 5px; padding: .8rem 1rem; }
.pr-orig                                    { border-left: 4px solid #2f7d5c; }
.pr-copy                                    { border-left: 4px solid #a32b28; }
.pr-head                                    { font-size: .8125rem; color: #555; margin-bottom: .35rem;
                                              padding-bottom: .3rem; border-bottom: 1px solid #eee; }
.pr-head2                                   { margin-top: .9rem; }
.pr-side p                                  { margin: 0; font-size: .9375rem; line-height: 1.6; color: #333; }
.pr-side mark                               { background: #fff3bf; color: #222; padding: 0 .1em; }
.pr-side mark.m2                            { background: #d9ecff; }
.pr-side mark.m3                            { background: #d8f5d8; }
.pr-list li                                 { margin-bottom: .5rem; line-height: 1.6; }
.pr-attrib                                  { display: block; margin-top: .5rem; font-size: .8125rem;
                                              color: #666; font-style: normal; }
.pr-src                                     { font-size: .8125rem; color: #666; line-height: 1.55;
                                              margin: .3rem 0 1rem; }
.pr-note                                    { font-size: .875rem; line-height: 1.6; color: #444;
                                              background: #f7f7f7; padding: .6rem .9rem;
                                              border-radius: 4px; border-left: 3px solid #bbb; }
@media (max-width: 720px) {
  .pr-pair                                  { grid-template-columns: 1fr; }
}

/* ---------- stats strip (inserted after nav by site.v*.js) ---------- */
.stats-strip                                { display: flex; flex-wrap: wrap; gap: 1px;
                                              background: #ddd; border-bottom: 1px solid #ddd; }
.stats-strip .stat                          { flex: 1 1 0; min-width: 140px; background: #fff;
                                              padding: .85rem 1rem; text-align: center; }
.stats-strip .stat-value                    { display: block; font-size: 1.5rem; font-weight: 700;
                                              color: #222; line-height: 1.15; }
.stats-strip .stat-label                    { display: block; font-size: .75rem; text-transform: uppercase;
                                              letter-spacing: .06em; color: #666; margin-top: .2rem; }

/* ---------- pagination ---------- */
#pagination-controls                        { flex-direction: column; gap: .6rem; }
.pagination-count                           { font-size: .8125rem; color: #666; }
.pagination-row                             { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.pagination-button.is-disabled              { opacity: .4; cursor: default; }
.pagination-button.is-disabled:hover        { background-color: #444; }

/* Reviews table: cap the reading measure.
   At full width the Review column ran 150+ characters per line, which is roughly
   double a comfortable measure. Desktop only. table-layout:fixed is required
   because browsers ignore max-width on a td under the default auto layout.
   Percentages are of the 1200px cap, so Review lands ~660px, about 80 chars. */
@media (min-width: 769px) {
  #customer-reviews table                     { max-width: 1200px; margin-left: auto; margin-right: auto;
                                                table-layout: fixed; }
  #customer-reviews th:nth-child(1),
  #customer-reviews td:nth-child(1)           { width: 8%; }   /* date */
  #customer-reviews th:nth-child(2),
  #customer-reviews td:nth-child(2)           { width: 11%; }  /* reviewer */
  #customer-reviews th:nth-child(3),
  #customer-reviews td:nth-child(3)           { width: 11%; }  /* location */
  #customer-reviews th:nth-child(4),
  #customer-reviews td:nth-child(4)           { width: 56%; }  /* review */
  #customer-reviews th:nth-child(5),
  #customer-reviews td:nth-child(5)           { width: 14%; }  /* source */
}

/* ============================================================
   MOBILE: reviews render as CARDS, not as a table.
   The inherited rule set white-space:nowrap with horizontal scroll, which meant
   each review was ONE unbroken line. The longest record is 1,584 characters -
   roughly 11,000px wide on a phone. Effectively unreadable, and most traffic
   for contractor searches is mobile. Cards wrap normally, no sideways scrolling.
   Labels come from the data-label attributes emitted by site.v*.js.
   ============================================================ */
@media (max-width: 768px) {
  body                                      { font-size: 1rem; }
  header h1                                 { font-size: 1.625rem; }
  h2, #contact h2, #report-and-get-help h2  { font-size: 1.3125rem; }
  table, #customer-reviews th, #customer-reviews td { font-size: .9375rem; }

  /* undo the inherited nowrap / horizontal-scroll behaviour */
  #customer-reviews table                   { display: block; white-space: normal; overflow-x: visible;
                                              background: none; box-shadow: none; border-radius: 0;
                                              font-size: .9375rem; }
  #customer-reviews thead                   { position: absolute; width: 1px; height: 1px;
                                              overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #customer-reviews tbody,
  #customer-reviews tr,
  #customer-reviews td                      { display: block; width: auto; }
  #customer-reviews tbody tr:nth-child(even) { background: #fff; }
  #customer-reviews tr                      { background: #fff; border: 1px solid #ddd; border-radius: 6px;
                                              margin: 0 0 .9rem; padding: .8rem 1rem;
                                              box-shadow: 0 2px 5px rgba(0,0,0,.08); }
  #customer-reviews td                      { border: none; padding: .2rem 0; }
  #customer-reviews td[data-label]::before  { content: attr(data-label); display: block;
                                              font-size: .625rem; font-weight: 700; text-transform: uppercase;
                                              letter-spacing: .07em; color: #888; margin-bottom: .1rem; }
  /* the review body needs no label - it is obviously the review */
  #customer-reviews td[data-label="Review"]::before { content: none; }
  #customer-reviews td[data-label="Review"] { padding: .55rem 0; border-top: 1px solid #eee;
                                              border-bottom: 1px solid #eee; margin: .45rem 0; }
  .stats-strip .stat                        { min-width: 45%; padding: .7rem .5rem; }
  .stats-strip .stat-value                  { font-size: 1.25rem; }
}


/* ============================================================
   MOBILE COMPATIBILITY PASS - 2026-09-14  (source: _build/style_mobile.css,
   appended to the stylesheet by build_v2.js after the type-scale block)
   Audited with real Chromium rendering at 320, 360, 375, 393, 412, 667 and
   768px. Every rule below answers a measured failure:
   1. nav was display:flex with NO wrap. Eleven links were squeezed into the
      viewport, the first four pushed off the LEFT edge (unreachable), and
      the page scrolled sideways. Narrow screens now get one finger-scrollable
      row, 44px tall; site.v11.js keeps the current link scrolled into view.
   2. The four data tables (DBA, AG complaints, court judgments, BWC liens)
      were 446-763px wide on a 375px phone: Amount, Interest and Satisfied
      were off-screen and the whole page scrolled sideways. Narrow screens now
      get stacked label:value cards. The labels are data-label attributes the
      build copies from each table's own <th> cells (addTableLabels in
      build_v2.js), so the CSS never has to know column names.
   3. Tap targets: source links in table cells were 28x16px, platform badges
      41x21px, pagination buttons 32x32px with 5px gaps. Raised to 40-44px
      with 8px gaps.
   4. Text below 12px (badges 10.3px, flags 9.4px, small labels 11.25px)
      raised to 12.2px on phones.
   5. Policy popups: the Close button sat below ~10,000px of Terms text and
      the card ran edge to edge. Close is now a sticky footer inside the
      scrolling card; the card keeps a side margin and fits the screen.
   6. Side padding: a 375px screen showed 300px of text. Now 331px.
   Desktop rendering is unchanged except: nav may wrap instead of overflowing
   on windows narrower than ~840px, and the popup Close bar is sticky.
   ============================================================ */

/* iOS Safari inflates text on orientation change without this */
html                                        { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* On any width where the eleven links do not fit on one line, wrap them
   instead of spilling off both edges of the window. */
nav                                         { flex-wrap: wrap; }

/* ---------- desktop: one line (2026-09-14, owner request) ----------
   At the inherited 15px text and 30px gaps the eleven links need 1,477px, so
   every window under 1,520px wrapped to two rows (or, before the rule above,
   squeezed each label onto two lines). Measured in Chromium with a classic
   17px scrollbar: 13.5px text with 6px padding needs 1,165px, so this holds
   one row from a 1,200px window up. 1,520px and wider keep the original
   spacing, which already fits. 861-1,199px still wraps to two rows; the
   fix there would be 12px text, which is too small. Padding rather than
   margin, so the current-section highlight gets breathing room. */
@media (min-width: 861px) and (max-width: 1519px) {
  nav a                                     { margin: 0; padding: 0 .4rem; font-size: .9rem; }
}

/* Policy popups: the card scrolls, the page behind it must not (scroll
   chaining on touch screens). */
.popup-content                              { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* The Close button rides along as a footer bar inside the scrolling card, so
   the reader is never a full policy of scrolling away from closing it. The
   <p> is the sticky element, not the button: a sticky element can only move
   within its parent, the button's parent is this one-line <p>, and the <p>'s
   parent is the full-height card. The consent gate is untouched: its last
   child is the button itself, not a <p>.
   bottom is NEGATIVE by the card's padding because browsers measure the
   sticky constraint against the scroll container's content box, not its
   padding box: with bottom:0 the bar floated 20px above the card edge and
   text scrolled past underneath it. Verified in Chromium 2026-09-14. */
.popup-content > p:last-child               { position: sticky; bottom: -20px; margin: 1rem -20px 0;
                                              padding: .5rem 20px .75rem; background: #fff;
                                              border-top: 1px solid #e5e5e5; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 768px) {
  /* side padding: .container 1rem + .section-content 1.5rem + a second
     .container on later sections gave 37.5-52.5px per side on a 375px screen */
  .section-content                          { padding: 1rem; }
  section.container                         { padding-left: 0; padding-right: 0; }

  /* nav: one finger-scrollable row, sticky as before */
  nav                                       { flex-wrap: nowrap; justify-content: flex-start;
                                              overflow-x: auto; overflow-y: hidden;
                                              -webkit-overflow-scrolling: touch;
                                              scrollbar-width: none; padding: 0; }
  nav::-webkit-scrollbar                    { display: none; }
  nav a                                     { flex: 0 0 auto; white-space: nowrap; margin: 0;
                                              display: inline-flex; align-items: center;
                                              min-height: 44px; padding: 0 .8rem; box-sizing: border-box;
                                              font-size: .9375rem; }
  nav a:first-child                         { padding-left: 1rem; }
  /* right-edge fade: says "this row scrolls"; it rides at the right edge of
     the visible strip and parks harmlessly after the last link at the end */
  nav::after                                { content: ""; position: sticky; right: 0; flex: 0 0 28px;
                                              align-self: stretch; pointer-events: none;
                                              background: linear-gradient(to right, rgba(51,51,51,0), #333 85%); }
  section[id]                               { scroll-margin-top: 3.25rem; }

  /* policy popups: keep a margin, never taller than the visible screen */
  .popup-content                            { box-sizing: border-box; width: calc(100% - 1.5rem); max-width: none;
                                              max-height: 86vh; max-height: 86dvh; padding: 16px; }
  .popup-content > p:last-child             { bottom: -16px; margin: 1rem -16px 0; padding: .5rem 16px .75rem; }
}

/* ---------- any touch screen, whatever its width ----------
   (pointer: coarse) is true on phones AND on tablets held in landscape, where
   the width rules above do not apply but fingers are still the pointer. */
@media (max-width: 768px), (pointer: coarse) {
  /* tap targets */
  .pagination-row                           { gap: 8px; }
  .pagination-button                        { min-width: 44px; min-height: 44px; padding: 8px 12px; }
  #agree-button, .close-popup               { min-height: 44px; padding: 10px 24px; }
  .ev-badge                                 { font-size: .8125rem; padding: .25rem .6rem; min-height: 30px;
                                              display: inline-flex; align-items: center; }
  .main-content tbody td a                  { display: inline-block; padding: .55rem .3rem; margin: -.3rem 0;
                                              line-height: 1.4; }

  /* nothing below 12px */
  .ev-flag, .gen-tag                        { font-size: .8125rem; }
  .ev-card .ev-biz, .ev-loc,
  .stats-strip .stat-label                  { font-size: .8125rem; }
  .corr .corr-meta code                     { font-size: 1em; }
  #customer-reviews td[data-label]::before  { font-size: .8125rem; }
}

/* ---------- tables become stacked cards ----------
   860px rather than 768px because the seven-column court judgments table is
   763px wide before padding and still overflowed an iPad in portrait. */
@media (max-width: 860px) {
  .main-content table                       { display: block; width: auto; background: none;
                                              box-shadow: none; border-radius: 0; overflow: visible;
                                              margin: 1rem 0; }
  .main-content thead                       { position: absolute; width: 1px; height: 1px; overflow: hidden;
                                              clip: rect(0 0 0 0); white-space: nowrap; }
  .main-content tbody,
  .main-content tbody tr,
  .main-content tbody td                    { display: block; width: auto; box-sizing: border-box; }
  .main-content tbody tr                    { background: #fff; border: 1px solid #ddd; border-radius: 6px;
                                              margin: 0 0 .9rem; padding: .3rem .9rem .55rem;
                                              box-shadow: 0 2px 5px rgba(0,0,0,.08); }
  .main-content tbody tr:nth-child(even)    { background: #fff; }
  .main-content tbody td                    { border: 0; border-top: 1px solid #eee; padding: .45rem 0;
                                              text-align: left; white-space: normal; }
  .main-content tbody td:first-child        { border-top: 0; font-weight: 700; font-size: 1.0625rem; }
  .main-content tbody td:first-child .dba-alt { display: block; font-weight: 400; font-size: .875rem; color: #555; }
  .main-content tbody td[data-label]::before { content: attr(data-label); display: block; font-size: .8125rem;
                                              font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                                              color: #777; margin-bottom: .15rem; }
  .main-content tr.cj-total                 { background: #f0f0f0; border-color: #999; }
  .main-content tr.cj-total td              { background: none; }
  /* source links in table cells become tappable chips (were 28x16px) */
  .main-content tbody td a                  { display: inline-flex; align-items: center; min-height: 40px;
                                              padding: .3rem .8rem; margin: .2rem .25rem .2rem 0;
                                              border: 1px solid #bcd; border-radius: 999px; background: #f3f7fb;
                                              color: #1f4d75; text-decoration: none; font-weight: 600;
                                              line-height: 1.3; }
}