/* ===================================================================
   DMM INNER-PAGE KIT — append to
   wp-content/themes/dmm-drs/style.css
   Makes shortcode-built inner pages read like the new homepage.
   Reusable on every inner page, not just /prolotherapy/.
   =================================================================== */

/* ---------- 1. Section shells -------------------------------------
   Beat the parent theme's .dm-service-section:nth-child(odd/even)
   background alternation (same specificity, later in source wins).   */
.dm-service-section.dm-sec-light,
.dm-service-section.dm-sec-cream,
.dm-service-section.dm-sec-blue,
.dm-service-section.dm-sec-dark {
    padding: 4.5rem 0;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}
.dm-service-section.dm-sec-light { background: var(--white); }
.dm-service-section.dm-sec-cream {
    background: var(--cream-bg);
    border-top: 1px solid var(--cream);
    border-bottom: 1px solid var(--cream);
}
.dm-service-section.dm-sec-blue  { background: var(--blue) !important; }
.dm-service-section.dm-sec-dark  {
    background: linear-gradient(135deg, var(--dark) 0%, #2a3040 50%, #2d2530 100%);
}
.dm-sec-blue::before,
.dm-sec-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 50%, rgba(255,255,255,.05), transparent 50%),
        radial-gradient(ellipse at 75% 50%, rgba(179,90,67,.12), transparent 50%);
    pointer-events: none;
}
.dm-sec-blue > .dm-container,
.dm-sec-dark > .dm-container { position: relative; z-index: 1; }

/* ---------- 2. Grid behaviour inside our sections ----------------- */
.dm-sec-light .dm-flex,
.dm-sec-cream .dm-flex,
.dm-sec-blue  .dm-flex,
.dm-sec-dark  .dm-flex {
    align-items: stretch;
    row-gap: 1.25rem;
}
/* vertical centering only for the 2-column intro rows */
.dm-sec-flex-center .dm-flex { align-items: center; }

/* cancel the parent theme's automatic image/text swap on even sections */
.dm-sec-light .dm-half:nth-child(1),
.dm-sec-cream .dm-half:nth-child(1),
.dm-sec-blue  .dm-half:nth-child(1),
.dm-sec-dark  .dm-half:nth-child(1) { order: 0; }

.dm-sec-light .dm-half,  .dm-sec-cream .dm-half,
.dm-sec-blue  .dm-half,  .dm-sec-dark  .dm-half   { padding: 0 1rem; }
.dm-sec-light .dm-third, .dm-sec-cream .dm-third,
.dm-sec-blue  .dm-third, .dm-sec-dark  .dm-third  { padding: 0 .625rem; }
.dm-sec-light .dm-fourth,.dm-sec-cream .dm-fourth,
.dm-sec-blue  .dm-fourth,.dm-sec-dark  .dm-fourth { padding: 0 .625rem; }
.dm-sec-light .dm-full,  .dm-sec-cream .dm-full,
.dm-sec-blue  .dm-full,  .dm-sec-dark  .dm-full   { padding: 0 .625rem; }

/* cards stretch to fill their column */
.dm-sec-light .dm-third > .treat-card,  .dm-sec-cream .dm-third > .treat-card,
.dm-sec-blue  .dm-third > .treat-card,  .dm-sec-dark  .dm-third > .treat-card,
.dm-sec-light .dm-fourth > .treat-card, .dm-sec-cream .dm-fourth > .treat-card,
.dm-sec-blue  .dm-fourth > .treat-card, .dm-sec-dark  .dm-fourth > .treat-card,
.dm-sec-light .dm-third > .step,        .dm-sec-cream .dm-third > .step,
.dm-sec-light .dm-third > .vf-card,     .dm-sec-cream .dm-third > .vf-card,
.dm-sec-light .dm-half > .value-card,   .dm-sec-cream .dm-half > .value-card,
.dm-sec-blue  .dm-half > .value-card,   .dm-sec-dark  .dm-half > .value-card {
    height: 100%;
}

/* ---------- 3. Images: drop the parent theme outline/border ------- */
.dm-sec-light img, .dm-sec-cream img,
.dm-sec-blue  img, .dm-sec-dark  img {
    outline: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 34px rgba(0,0,0,.14);
    width: 100%;
    height: auto;
}
.dm-sec-light .treat-icon img, .dm-sec-cream .treat-icon img,
.dm-sec-blue  .treat-icon img, .dm-sec-dark  .treat-icon img {
    box-shadow: none;
    border-radius: 0;
}

/* ---------- 4. Typography on dark / blue sections ----------------- */
.dm-sec-blue .section-title, .dm-sec-dark .section-title,
.dm-sec-blue h2, .dm-sec-dark h2,
.dm-sec-blue h3, .dm-sec-dark h3,
.dm-sec-blue h4, .dm-sec-dark h4 { color: #fff; }
.dm-sec-blue .section-body, .dm-sec-dark .section-body,
.dm-sec-blue > .dm-container p, .dm-sec-dark > .dm-container p,
.dm-sec-blue .dm-half > ul li, .dm-sec-dark .dm-half > ul li { color: rgba(255,255,255,.92); }
.dm-sec-blue .section-label, .dm-sec-dark .section-label { color: var(--accent); }
.dm-sec-blue .section-label::before,
.dm-sec-dark .section-label::before { background: var(--accent); }
.dm-sec-blue a:not(.btn-cta):not(.btn-ghost),
.dm-sec-dark a:not(.btn-cta):not(.btn-ghost) { color: var(--cream); }

/* white cards sitting on a dark/blue section keep dark text */
.dm-sec-blue .value-card *, .dm-sec-dark .value-card *,
.dm-sec-blue .callout-box *, .dm-sec-dark .callout-box *,
.dm-sec-blue .vf-card *, .dm-sec-dark .vf-card * { color: var(--text); }
.dm-sec-blue .value-card h3, .dm-sec-dark .value-card h3 { color: var(--dark); }

/* ghost button needs light borders on dark grounds */
.dm-sec-blue .btn-ghost, .dm-sec-dark .btn-ghost {
    border-color: rgba(255,255,255,.35);
    color: #fff;
}
.dm-sec-blue .btn-ghost:hover, .dm-sec-dark .btn-ghost:hover {
    border-color: #fff;
    background: rgba(255,255,255,.08);
    color: #fff;
}

/* ---------- 5. Order-independent card accents --------------------
   On the homepage the accent colours come from :nth-child().
   Inside dm-third / dm-fourth wrappers every card is child #1, so
   the accent is set with an explicit modifier class instead.        */
.treat-card.tc-blue::before   { background: var(--blue); }
.treat-card.tc-cta::before    { background: var(--cta); }
.treat-card.tc-accent::before { background: var(--accent); }
.treat-card.tc-gray::before   { background: var(--gray); }

.treat-card.tc-blue   .treat-icon { background: var(--blue-tint2); }
.treat-card.tc-cta    .treat-icon { background: var(--accent-light); }
.treat-card.tc-accent .treat-icon { background: rgba(212,117,78,.10); }
.treat-card.tc-gray   .treat-icon { background: rgba(132,144,154,.12); }

.treat-card.tc-blue   .treat-icon svg { color: var(--blue); }
.treat-card.tc-cta    .treat-icon svg { color: var(--cta); }
.treat-card.tc-accent .treat-icon svg { color: var(--accent); }
.treat-card.tc-gray   .treat-icon svg { color: var(--gray); }

.step-icon.si-blue { background: var(--blue); color: #fff; }
.step-icon.si-gray { background: var(--gray); color: #fff; }
.step-icon.si-cta  { background: var(--cta);  color: #fff; }

.vf-card.vf-blue   { border-top-color: var(--blue); }
.vf-card.vf-cta    { border-top-color: var(--cta); }
.vf-card.vf-accent { border-top-color: var(--accent); }

/* ---------- 6. Step cards outside .section.process ---------------- */
.dm-sec-light .step, .dm-sec-cream .step,
.dm-sec-blue  .step, .dm-sec-dark  .step { background: var(--blue); }
.dm-sec-light .step *, .dm-sec-cream .step *,
.dm-sec-blue  .step *, .dm-sec-dark  .step * { color: #fff; }
.dm-sec-light .step:hover, .dm-sec-cream .step:hover,
.dm-sec-blue  .step:hover, .dm-sec-dark  .step:hover { background: #fff; }
.dm-sec-light .step:hover *, .dm-sec-cream .step:hover *,
.dm-sec-blue  .step:hover *, .dm-sec-dark  .step:hover * { color: var(--text) !important; }
.dm-sec-light .step:hover h3, .dm-sec-cream .step:hover h3 { color: var(--dark) !important; }
.step p strong, .step h3 { display: block; }

/* ---------- 7. Small shared helpers ------------------------------- */
.dm-sec-center { text-align: center; }
.dm-sec-center .section-label { justify-content: center; }
.dm-sec-center .section-body  { margin-left: auto; margin-right: auto; }
.dm-narrow { max-width: 760px; margin: 0 auto; }
.dm-stack > * + * { margin-top: 1rem; }

/* stat tiles reusing the homepage success-card look */
.dm-stat {
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid rgba(225,220,211,.5);
    border-left: 4px solid var(--blue);
    padding: 1.5rem 1.25rem;
    text-align: center;
    height: 100%;
    transition: all .3s;
}
.dm-stat:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.06); }
.dm-stat.st-gray { border-left-color: var(--gray); }
.dm-stat.st-cta  { border-left-color: var(--cta); }
.dm-stat h3 { font-size: 34px; line-height: 1.1; color: var(--dark); margin: 0 0 .35rem; }
.dm-stat p  { font-size: .85rem; color: var(--text-light); line-height: 1.5; margin: 0; }

/* the shortcode kit renders no <p> margins by default in some themes */
.dm-sec-light p, .dm-sec-cream p,
.dm-sec-blue  p, .dm-sec-dark  p { margin: 0 0 1rem; }
.dm-sec-light p:last-child, .dm-sec-cream p:last-child,
.dm-sec-blue  p:last-child, .dm-sec-dark  p:last-child { margin-bottom: 0; }

/* ---------- 8. Inner-page header, homepage-styled ------------------
   AFFECTS EVERY INNER PAGE. Delete this block if you want the old
   flat #0274BE bar back.                                             */
section.page-header {
    background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 55%, var(--blue-light) 100%) !important;
    padding: 3.25rem 0 3rem;
    margin-bottom: 0;
    text-align: left;
}
section.page-header .container { max-width: 1200px; }
section.page-header * {
    color: #fff;
    text-transform: none;
    letter-spacing: -.01em;
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    line-height: 1.15;
}
article.article { padding: 0 !important; margin-bottom: 0; }

@media (max-width: 900px) {
    .dm-sec-light .dm-fourth, .dm-sec-cream .dm-fourth,
    .dm-sec-blue  .dm-fourth, .dm-sec-dark  .dm-fourth { flex: 1 1 50%; width: 50%; }
}
@media (max-width: 640px) {
    .dm-service-section.dm-sec-light,
    .dm-service-section.dm-sec-cream,
    .dm-service-section.dm-sec-blue,
    .dm-service-section.dm-sec-dark { padding: 3rem 0; }
    .dm-sec-light .dm-third, .dm-sec-cream .dm-third,
    .dm-sec-blue  .dm-third, .dm-sec-dark  .dm-third,
    .dm-sec-light .dm-fourth, .dm-sec-cream .dm-fourth,
    .dm-sec-blue  .dm-fourth, .dm-sec-dark  .dm-fourth { flex: 1 1 100%; width: 100%; }
    section.page-header { padding: 2.25rem 0 2rem; }
}

/* ---------- 9. [dm-cta] band ---------------------------------------
   The shortcode reuses the homepage .urgency section verbatim, so the
   only additions are the bits the homepage never needed: a secondary
   ghost button, an inline phone line, and link colour on the dark
   ground.                                                            */
.urgency .btn-cta,
.urgency .btn-ghost { margin: .35rem .3rem 0; }
.urgency .btn-ghost {
    border-color: rgba(255,255,255,.35);
    color: #fff;
}
.urgency .btn-ghost:hover {
    border-color: #fff;
    background: rgba(255,255,255,.08);
    color: #fff;
}
.urgency a:not(.btn-cta):not(.btn-ghost) { color: var(--cream); }
.urgency .cta-phone {
    margin: 1.4rem 0 0;
    font-size: .88rem;
    color: rgba(255,255,255,.6);
}
.urgency .cta-phone a { font-weight: 600; }
/* the band is full-bleed, so it must not sit inside the page container */
.post-content > .urgency { margin-bottom: 0; }

/* ---------- 10. [dm-contact] band -----------------------------------
   Reuses the homepage .lead section verbatim. The homepage template puts
   it last inside a full-width page, so the only additions are the ones an
   inner page needs: kill the trailing .post-content margin, and make the
   two-column grid behave when the parent theme's narrower page width
   applies.                                                            */
.post-content > .lead { margin-bottom: 0; }
.post-content > .urgency + .lead { border-top: 0; }

/* the parent theme adds its own list/paragraph rhythm inside .post-content;
   the form card sets its own */
.post-content .lead .form-card p { margin: 0; }
.post-content .lead .gform_wrapper { margin-top: .9rem; }
.post-content .lead .lead-left p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .post-content > .lead .lead-grid { display: block; }
    .post-content > .lead .form-card { margin-top: 2rem; }
}

/* ---------- 11. Reused homepage components on inner pages -----------
   The live child style.css already defines .cond-areas / .cond-list /
   .cond-dot / .doc-creds / .treat-link / .vf-card for the homepage.
   These rules only adapt them to a full-width shortcode section.      */

/* the homepage runs .cond-areas in a half-width column, so it is a
   2-up grid there. In a [dm-full] it has the whole page to use. */
.dm-sec-light .dm-full > .cond-areas,
.dm-sec-cream .dm-full > .cond-areas,
.dm-sec-blue  .dm-full > .cond-areas,
.dm-sec-dark  .dm-full > .cond-areas { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
    .dm-sec-light .dm-full > .cond-areas,
    .dm-sec-cream .dm-full > .cond-areas,
    .dm-sec-blue  .dm-full > .cond-areas,
    .dm-sec-dark  .dm-full > .cond-areas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .dm-sec-light .dm-full > .cond-areas,
    .dm-sec-cream .dm-full > .cond-areas,
    .dm-sec-blue  .dm-full > .cond-areas,
    .dm-sec-dark  .dm-full > .cond-areas { grid-template-columns: 1fr; }
}

/* .cond-list also appears on its own inside a [dm-half] of body copy */
.dm-sec-light ul.cond-list.no-before,
.dm-sec-cream ul.cond-list.no-before,
.dm-sec-blue  ul.cond-list.no-before,
.dm-sec-dark  ul.cond-list.no-before { list-style: none; margin: 0 0 1.25rem; }
.dm-sec-light ul.cond-list.no-before li,
.dm-sec-cream ul.cond-list.no-before li,
.dm-sec-blue  ul.cond-list.no-before li,
.dm-sec-dark  ul.cond-list.no-before li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .28rem 0;
    font-size: .92rem;
}
.dm-sec-blue ul.cond-list.no-before li a,
.dm-sec-dark ul.cond-list.no-before li a { color: rgba(255,255,255,.92); }
.dm-sec-blue .cond-dot, .dm-sec-dark .cond-dot { background: var(--accent); }
.cond-area-title { margin: 0 0 .5rem; font-size: .95rem; font-weight: 600; }
.cond-area-title a { text-decoration: none; }

/* .vf-card is a homepage 3-up; give it the same column stretch the
   other cards get. Accent colour comes from .vf-blue / .vf-cta /
   .vf-accent (section 5), not from nth-child, because a [dm-full]
   heading above the row shifts every column's child index. */
.dm-sec-light .dm-third > .vf-card, .dm-sec-cream .dm-third > .vf-card,
.dm-sec-blue  .dm-third > .vf-card, .dm-sec-dark  .dm-third > .vf-card {
    height: 100%;
}

/* .test-card is a homepage 3-up; it runs two-up in a [dm-half] on
   /testimonials/, where the quotes are far longer than the homepage's */
.dm-sec-light .dm-half > .test-card, .dm-sec-cream .dm-half > .test-card,
.dm-sec-blue  .dm-half > .test-card, .dm-sec-dark  .dm-half > .test-card {
    height: 100%;
}
.dm-sec-light .test-card blockquote, .dm-sec-cream .test-card blockquote,
.dm-sec-blue  .test-card blockquote, .dm-sec-dark  .test-card blockquote {
    font-size: .92rem;
    line-height: 1.7;
}

/* responsive video embeds — YouTube on /services/regenexx/ and the about page */
.dm-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--dark);
}
.dm-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* credential / affiliation badge row inside a .value-card */
.dm-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
    margin: 0 0 .25rem;
}
.dm-badges img {
    max-height: 78px;
    width: auto;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.cond-areas {
    display: block !important;
}

ul.cond-list.no-before {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: initial;
}

ul.cond-list.no-before > li {
    flex: 1 1 46%;
    width: 45%;
    margin: 0px;
    padding: 10px !important;
}

ul.cond-list.no-before a {
    display: block;
    width: 100%;
}