/* ------------------------------------------------------------------
   ccm-content.css
   Styling for the long-form credentialing, billing and payer-guide
   pages added for the specialty SEO plan.

   The existing style.css was written for short marketing pages: it has
   no rules for a data table, a document checklist, a timeline or an FAQ
   block, and those are most of what the plan's page template (section 9)
   asks each page to carry. Rather than bend the marketing classes into
   shapes they were not built for, these pages get their own small,
   self-contained sheet.

   Palette is the site's own: #294481 navy, #37b6ab teal, #177a72 green.
   Loaded only by pages built from assets/partials/page-template.html.
   ------------------------------------------------------------------ */

.ccm-doc {
    --ink: #16233f;
    --body: #41506b;
    --navy: #294481;
    --teal: #37b6ab;
    --green: #177a72;
    --line: #e1e7f0;
    --tint: #f4f7fb;
    max-width: 1100px;
    padding-top: 10px;
    padding-bottom: 70px;
    color: var(--body);
    font-size: 17px;
    line-height: 1.75;
}

/* ------------------------------------------------------------ HERO */

/* Matches the banner every other page on the site already uses: a photo
   background with the navy wash, and the heading and strapline centred
   over it. The first version of this was a flat gradient with the copy
   ranged left, which made the new pages look like they came from a
   different website. */
.ccm-page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 300px;
    padding: 50px 0;
    background-color: #1d3566;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* The stock banner images already carry a navy tint; this is the extra
   margin that keeps white text legible whichever one a page uses. */
.ccm-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29, 53, 102, .74) 0%, rgba(29, 53, 102, .66) 100%);
}

.ccm-page-hero > .container {
    position: relative;
    z-index: 1;
}

.ccm-page-hero .page-header {
    margin: 0;
    border: 0;
}

.ccm-page-hero .page-title {
    max-width: 26ch;
    margin: 0 auto 16px;
    font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.5rem);
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    color: #fff;
}

.ccm-page-hero .page-header p {
    max-width: 62ch;
    margin: 0 auto;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.65;
    text-align: center;
    color: rgba(255, 255, 255, .9);
}

@media screen and (max-width: 575px) {
    .ccm-page-hero {
        min-height: 230px;
        padding: 38px 0;
    }
}

/* ------------------------------------------------------ BREADCRUMB */

.ccm-breadcrumb {
    margin: 26px 0 34px;
    font-size: 14px;
    color: #7b879c;
}

.ccm-breadcrumb a {
    color: var(--green);
    text-decoration: none;
}

.ccm-breadcrumb a:hover {
    text-decoration: underline;
}

.ccm-breadcrumb-sep {
    margin: 0 2px;
    color: #c3ccdb;
}

/* --------------------------------------------------------- TYPOGRAPHY */

.ccm-doc h2 {
    margin: 46px 0 16px;
    font-size: clamp(1.45rem, 1.15rem + .9vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--ink);
}

.ccm-doc h3 {
    margin: 30px 0 12px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}

.ccm-doc p {
    margin: 0 0 18px;
}

.ccm-doc a {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ccm-doc strong {
    color: var(--ink);
    font-weight: 600;
}

.ccm-doc > section {
    scroll-margin-top: 90px;
}

/* ------------------------------------------------------------ LISTS */

.ccm-doc ul,
.ccm-doc ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.ccm-doc li {
    margin-bottom: 9px;
}

/* Tick list for "what is included" style blocks. */
.ccm-list-check {
    list-style: none;
    padding-left: 0;
}

.ccm-list-check li {
    position: relative;
    padding-left: 32px;
}

.ccm-list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(55, 182, 171, .14) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23177a72'%3e%3cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3e%3c/svg%3e") center/12px no-repeat;
}

/* ----------------------------------------------------------- TABLES */

.ccm-table-wrap {
    margin: 0 0 26px;
    overflow-x: auto;
}

.ccm-doc table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
    line-height: 1.55;
}

.ccm-doc thead th {
    padding: 12px 14px;
    border-bottom: 2px solid var(--navy);
    background: var(--tint);
    font-weight: 700;
    text-align: left;
    color: var(--ink);
    white-space: nowrap;
}

.ccm-doc tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.ccm-doc tbody tr:nth-child(even) td {
    background: #fafbfd;
}

/* ------------------------------------------------------------ CARDS */

.ccm-callout {
    margin: 0 0 26px;
    padding: 22px 26px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 10px;
    background: #fff;
}

.ccm-callout p:last-child {
    margin-bottom: 0;
}

.ccm-callout h3 {
    margin-top: 0;
}

/* Cross-link block that pairs a credentialing page with its billing
   page (SEO plan section 10). */
.ccm-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.ccm-pair li {
    flex: 1 1 260px;
    margin: 0;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--tint);
}

.ccm-pair strong {
    display: block;
    margin-bottom: 4px;
}

/* Provider-type grid on the credentialing hub. */
.ccm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.ccm-grid li {
    margin: 0;
}

.ccm-grid a {
    display: block;
    height: 100%;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 35, 63, .05), 0 8px 20px -12px rgba(22, 35, 63, .2);
    text-decoration: none;
    color: var(--body);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ccm-grid a:hover {
    transform: translateY(-3px);
    border-color: rgba(55, 182, 171, .55);
    box-shadow: 0 2px 4px rgba(22, 35, 63, .06), 0 16px 32px -14px rgba(22, 35, 63, .28);
}

.ccm-grid b {
    display: block;
    margin-bottom: 6px;
    font-size: 1.05rem;
    color: var(--ink);
}

.ccm-grid span {
    display: block;
    font-size: 14.5px;
    line-height: 1.55;
}

/* -------------------------------------------------------------- FAQ */

.ccm-faq-block details {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.ccm-faq-block summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.ccm-faq-block summary::-webkit-details-marker {
    display: none;
}

.ccm-faq-block summary::after {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(55, 182, 171, .14) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23177a72'%3e%3cpath d='M8 2.5a.6.6 0 0 1 .6.6v4.3h4.3a.6.6 0 1 1 0 1.2H8.6v4.3a.6.6 0 1 1-1.2 0V8.6H3.1a.6.6 0 0 1 0-1.2h4.3V3.1a.6.6 0 0 1 .6-.6z'/%3e%3c/svg%3e") center/14px no-repeat;
    transition: transform .25s ease;
}

.ccm-faq-block details[open] summary::after {
    transform: rotate(135deg);
}

.ccm-faq-block .ccm-faq-body {
    padding: 0 22px 20px;
}

.ccm-faq-block .ccm-faq-body p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------- TIER 3 CRED BLOCK
   The short credentialing section injected into the 22 physician
   specialty billing pages by assets/partials/build-tier3.pl. Those pages
   are old theme markup, so this block styles itself completely rather
   than inheriting anything from the section it lands in. */

.ccm-cred-block {
    padding: 54px 0;
    background: #f4f7fb;
    border-top: 1px solid #e1e7f0;
}

.ccm-cred-block .container {
    max-width: 900px;
}

.ccm-cred-block h2 {
    margin: 0 0 18px;
    font-size: clamp(1.4rem, 1.15rem + .8vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: #16233f;
    text-align: left;
    width: auto;
}

.ccm-cred-block p {
    margin: 0 0 16px;
    font-size: 16.5px;
    line-height: 1.75;
    color: #41506b;
    text-align: left;
}

.ccm-cred-block p:last-child {
    margin-bottom: 0;
}

.ccm-cred-block strong {
    color: #16233f;
    font-weight: 600;
}

.ccm-cred-block a {
    color: #177a72;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------- CTA */

.ccm-cta {
    margin: 40px 0 10px;
    padding: 34px 32px;
    border-radius: 14px;
    background: linear-gradient(120deg, #1d3566 0%, #294481 100%);
    color: #fff;
    text-align: center;
}

.ccm-cta h2 {
    margin: 0 0 10px;
    color: #fff;
}

.ccm-cta p {
    max-width: 60ch;
    margin: 0 auto 22px;
    color: rgba(255, 255, 255, .88);
}

.ccm-cta .btn {
    display: inline-block;
    margin: 0 6px 8px;
    padding: 13px 30px;
    border: 2px solid var(--green);
    border-radius: 32px;
    background: var(--green);
    font-size: 15.5px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease;
}

.ccm-cta .btn:hover {
    background: #12645d;
    border-color: #12645d;
    color: #fff;
}

.ccm-cta .btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
}

.ccm-cta .btn-ghost:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
}

@media screen and (max-width: 575px) {
    .ccm-doc {
        font-size: 16px;
    }

    .ccm-doc thead th,
    .ccm-doc tbody td {
        padding: 10px 11px;
    }

    .ccm-cta {
        padding: 26px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ccm-grid a,
    .ccm-faq-block summary::after,
    .ccm-cta .btn {
        transition: none;
    }

    .ccm-grid a:hover {
        transform: none;
    }
}