/* ==========================================================================
   Twin Cities Chiropractic Spine and Injury Center — Brand Tokens
   ========================================================================== */
:root {
    --primary:       #010008;  /* deep navy — dominant brand color */
    --primary-mid:   #05103f;  /* mid navy — gradient stop */
    --accent:        #082081;  /* medium blue — CTAs, icons, links */
    --accent-light:  #eef1ff;  /* light blue tint — hover states */
    --bg:            #ffffff;
    --bg-tint:       #f4f6fb;  /* faint brand-tinted section bg */
    --text-dark:     #1a1a1a;
    --text-medium:   #666666;
    --fog:           #c9d1ea;  /* light text on dark sections */
    --radius:        10px;
    --radius-lg:     16px;
}

body, p, li, .et_pb_text_inner { font-family: 'Open Sans', sans-serif; }
h1, h2, h3, h4, h5, h6, .rmc-heading { font-family: 'Montserrat', sans-serif; }

/* Divi's bundled FontAwesome (used for blurb icons — see rmc_lib.py blurb())
   is normally loaded only when Divi's own native icon module attribute is
   used. That module is buggy in this Divi 5 install (only renders the icon
   for one blurb per page even with identical attrs across a whole row), so
   icons are emitted as literal HTML instead — but that means Divi's dynamic
   asset loader never detects icon usage and never enqueues the font. Declare
   it directly so it always loads regardless of how the icon markup gets in. */
@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/wp-content/themes/Divi/core/admin/fonts/fontawesome/fa-solid-900.woff2') format('woff2'),
         url('/wp-content/themes/Divi/core/admin/fonts/fontawesome/fa-solid-900.woff') format('woff'),
         url('/wp-content/themes/Divi/core/admin/fonts/fontawesome/fa-solid-900.ttf') format('truetype');
}

/* ==========================================================================
   Typography as design element
   ========================================================================== */
.rmc-eyebrow,
.rmc-eyebrow-light,
.rmc-eyebrow-dark {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: block;
}
.rmc-eyebrow       { color: var(--accent-light); } /* legacy default — not yet split by background, treat as dark-bg */
.rmc-eyebrow-dark  { color: var(--accent-light); } /* eyebrow label on navy/primary-color sections */
.rmc-eyebrow-light { color: var(--accent); }        /* eyebrow label on white/bg-tint sections */
.rmc-hero-h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(2.4rem, 4vw + 1rem, 4.6rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 22px;
}
.rmc-hero-h1 .word { display: inline-block; opacity: 0; transform: translateY(100%); animation: rmc-word-up .7s cubic-bezier(.16,1,.3,1) forwards; }
.rmc-section-h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 2.4vw + 1rem, 2.8rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--primary);
    margin: 0 0 18px;
}
.rmc-section-h2.is-light { color: #ffffff; }
.rmc-body-copy p {
    line-height: 1.7;
    
    color: var(--text-medium);
    font-size: 1.02rem;
}

/* Sub/body text contrast pairs — apply the one that matches the section's
   background behind the text. Edit these two values to retune contrast
   site-wide without touching generated page content. */
.rmc-subtext-on-light { color: var(--text-medium); } /* for text on white or bg-tint sections */
.rmc-subtext-on-dark  { color: #fff; }          /* for text on navy/primary-color sections */
.rmc-section-h2 + .rmc-body-copy,
.rmc-eyebrow + .rmc-hero-h1 + .rmc-body-copy { margin-top: 0; }

/* ==========================================================================
   Animation keyframes
   ========================================================================== */
@keyframes rmc-word-up    { to { opacity: 1; transform: translateY(0); } }
@keyframes rmc-fade-up    { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rmc-glow-pulse { 0%,100% { box-shadow: 0 4px 24px rgba(8,32,129,.38); } 50% { box-shadow: 0 4px 48px rgba(8,32,129,.72); } }
@keyframes rmc-float      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes rmc-aurora     { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes rmc-marquee    { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rmc-shimmer    { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.rmc-reveal-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
}
.rmc-reveal-item.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Gradient-mesh / aurora hero background (used when no photo is available)
   ========================================================================== */
.rmc-hero-bg {
    position: relative;
    background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(8,32,129,.45) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(5,16,63,.4) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 50% 100%, rgba(238,241,255,.25) 0%, transparent 65%),
        var(--primary);
    background-size: 200% 200%;
    animation: rmc-aurora 18s ease-in-out infinite;
}
.rmc-hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(1,0,8,0) 0%, rgba(1,0,8,.25) 100%);
    pointer-events: none;
}

/* Tinted section rhythm break */
.et_pb_section[style*="background-color: #f4f6fb"],
.et_pb_section[style*="background-color:#f4f6fb"] {
    background-image: radial-gradient(ellipse 60% 50% at 90% 0%, rgba(8,32,129,.06) 0%, transparent 60%) !important;
}

/* ==========================================================================
   Cards, blurbs, hover states
   ========================================================================== */
.et_pb_blurb, .rmc-trust-card, .rmc-service-card {
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 20px 40px -12px rgba(0,0,0,.10);
}
.et_pb_blurb:hover, .rmc-trust-card:hover, .rmc-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 24px 48px -12px rgba(1,0,8,.28);
}

.rmc-link-underline { position: relative; text-decoration: none; color: inherit; }
.rmc-link-underline::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.rmc-link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* Buttons */
.rmc-btn {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    padding: 15px 32px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease;
}
.rmc-btn-primary { background: var(--accent); color: #fff !important; box-shadow: 0 4px 20px rgba(8,32,129,.4); }
.rmc-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(8,32,129,.55); animation: rmc-glow-pulse 1.8s ease-in-out infinite; }
.rmc-btn-outline { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.6); position: relative; overflow: hidden; z-index: 1; }
.rmc-btn-outline::before {
    content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left;
    transition: transform .35s cubic-bezier(.16,1,.3,1); z-index: -1;
}
.rmc-btn-outline:hover { color: var(--primary) !important; border-color: #fff; }
.rmc-btn-outline:hover::before { transform: scaleX(1); }
.rmc-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* Dark-card hover, matching the interior of the page: on hover the card's own
   background/border swap to the section's light tint (not a sliding overlay),
   with text flipping to the standard dark-on-light color. Wraps the blurb's
   inner content (see rmc_lib.py blurb(wipe_hover=True)) for the text-color
   flip; the background/border swap targets the real .et_pb_blurb wrapper
   directly via :has(), since a custom class on the blurb module itself
   doesn't render (see Bug 4 notes) and the compiled background/border are
   page-specific numbered classes we can't target by name. */
.et_pb_blurb:has(.rmc-blurb-wipe) {
    transition: background-color .3s ease, border-color .3s ease;
}
.et_pb_blurb:has(.rmc-blurb-wipe):hover {
    background-color: var(--bg-tint) !important;
    border-color: rgba(1,0,8,0.14) !important;
}
.rmc-blurb-wipe { transition: color .3s ease; }
.et_pb_blurb:hover .rmc-blurb-wipe,
.et_pb_blurb:hover .rmc-blurb-wipe * { color: var(--primary) !important; }

/* ==========================================================================
   Stat band with count-up
   ========================================================================== */
.rmc-stat-band { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; }
.rmc-stat { text-align: center; min-width: 140px; }
.rmc-stat-num {
    display: block; font-family: 'Montserrat', sans-serif; font-weight: 800;
    font-size: clamp(2.2rem, 3vw, 3.4rem); color: var(--accent-light); line-height: 1;
}
.rmc-stat-label { display: block; margin-top: 10px; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fog); }

/* ==========================================================================
   Marquee (certifications / review platforms strip)
   ========================================================================== */
.rmc-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.rmc-marquee-track { display: flex; gap: 64px; width: max-content; align-items: center; animation: rmc-marquee 26s linear infinite; }
.rmc-marquee:hover .rmc-marquee-track { animation-play-state: paused; }
.rmc-marquee-item { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text-dark); opacity: .75; white-space: nowrap; }

/* ==========================================================================
   Testimonial spotlight
   ========================================================================== */
.rmc-testimonial-spotlight { max-width: 780px; margin: 0 auto; text-align: center; }
.rmc-testimonial-quote {
    font-family: 'Montserrat', sans-serif; font-weight: 500; font-style: italic;
    font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.5; color: var(--primary); margin-bottom: 24px;
}
.rmc-testimonial-author { font-weight: 700; color: var(--text-dark); }
.rmc-testimonial-meta { font-size: 0.85rem; color: var(--text-medium); margin-top: 4px; }
.rmc-testimonial-stars { color: var(--accent); font-size: 1.1rem; margin-bottom: 18px; letter-spacing: 2px; }

/* ==========================================================================
   Testimonial carousel ("What Our Patients Are Saying")
   ========================================================================== */
.rmc-tc {
    max-width: 900px; margin: 0 auto;
    display: flex; align-items: center; gap: 22px;
}
.rmc-tc-viewport { position: relative; overflow: hidden; flex: 1 1 auto; min-width: 0; align-self: center; }
.rmc-tc-track { position: relative; transition: height .4s cubic-bezier(.16,1,.3,1); display: flex !important;max-height: 500px;}
.rmc-tc-card {
    position: absolute; inset: 0; box-sizing: border-box; text-align: center;
    display: flex; flex-direction: column; justify-content: center;
    /* Tinted card on the light section bg + the same border/shadow language
       as .rmc-trust-card/.et_pb_blurb, so it reads as a distinct card instead
       of text floating on white — reuses existing brand tokens, no new colors. */
    background: var(--bg-tint);
    border: 1px solid rgba(1,0,8,.08);
    border-radius: var(--radius-lg);
    padding: 44px 48px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 20px 40px -12px rgba(0,0,0,.10);
    opacity: 0; transform: translateX(0); pointer-events: none;
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.rmc-tc-card.is-active { position: relative; opacity: 1; pointer-events: auto; width:100%;}
.rmc-tc-card.rmc-tc-enter-right { transform: translateX(28px); }
.rmc-tc-card.rmc-tc-enter-left { transform: translateX(-28px); }
.rmc-tc-quote {
    font-family: 'Montserrat', sans-serif; font-weight: 500; font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--primary);
    margin: 0 0 20px;
}
.rmc-tc-author { font-weight: 700; color: var(--text-dark); }
.rmc-tc-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; padding: 0; flex: none;
    align-self: center;
    background: #fff; border: 1px solid rgba(1,0,8,.12);
    box-shadow: 0 4px 16px rgba(1,0,8,.10);
    font-family: FontAwesome; font-weight: 900; font-size: 15px; color: var(--accent);
    cursor: pointer;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.rmc-tc-arrow:hover, .rmc-tc-arrow:focus-visible {
    background: var(--accent); color: #fff; transform: scale(1.08); box-shadow: 0 8px 22px rgba(8,32,129,.35);
}
@media (max-width: 620px) {
    /* Mobile drops the side-by-side arrow layout: arrows move into their own
       row below the card instead of flanking it, so the card gets the full
       mobile width instead of sharing it with two arrow columns. More width
       per line of text means fewer wrapped lines, so the longer reviews
       (e.g. "PTL Dennis V") read shorter here without needing a height cap
       that would otherwise clip them (see .rmc-tc-track below). */
    .rmc-tc {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "viewport viewport" "prev next";
        gap: 20px 16px;
    }
    .rmc-tc-viewport { grid-area: viewport; }
    .rmc-tc-prev { grid-area: prev; justify-self: center; }
    .rmc-tc-next { grid-area: next; justify-self: center; }
    .rmc-tc-arrow { width: 44px; height: 44px; font-size: 15px; }
    .rmc-tc-card { padding: 30px 20px; }
    /* JS measures each card's real rendered height at the current viewport
       width and sets it inline (see syncFixedHeight in functions.php) — the
       desktop 500px cap on .rmc-tc-track would clip taller mobile cards, so
       mobile removes it and trusts that measured value instead. */
    .rmc-tc-track { max-height: 650px; }
}

/* Category tab selector (/testimonials page: Patient Testimonials / General
   Comments / Kids' Comments), each tab revealing its own .rmc-tc instance. */
.rmc-tc-tabs-wrap { max-width: 900px; margin: 0 auto; }
.rmc-tc-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.rmc-tc-tab {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em;
    padding: 10px 22px; border-radius: 999px; border: 1.5px solid rgba(1,0,8,.14);
    background: #fff; color: var(--text-dark); cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.rmc-tc-tab:hover { border-color: var(--accent); color: var(--accent); }
.rmc-tc-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.rmc-tc-panel { display: none; }
.rmc-tc-panel.is-active { display: block; }

/* Thin funnel link nudging service-page readers toward /testimonials/. */
.rmc-tc-funnel a { transition: opacity .2s ease; }
.rmc-tc-funnel a:hover { opacity: .78; }

/* ==========================================================================
   Before/after comparison slider (auto-accident recovery progress, etc.)
   ========================================================================== */
.rmc-ba-slider { position: relative; overflow: hidden; border-radius: var(--radius-lg); --pos: 50%; aspect-ratio: 4/3; box-shadow: 0 20px 50px -14px rgba(1,0,8,.35); }
.rmc-ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rmc-ba-before-wrap { position: absolute; inset: 0; width: var(--pos); overflow: hidden; border-right: 2px solid #fff; }
.rmc-ba-before-wrap img { width: 100vw; max-width: none; }
.rmc-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.rmc-ba-handle { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3); pointer-events: none; }

/* ==========================================================================
   Trust / process cards
   ========================================================================== */
.rmc-trust-card, .rmc-service-card {
    background: #fff; border-radius: var(--radius-lg); padding: 34px 28px;
    border: 1px solid rgba(1,0,8,.08);
}

/* ==========================================================================
   Mobile sticky CTA bar
   ========================================================================== */
.rmc-mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    display: none; align-items: stretch;
    background: var(--primary); box-shadow: 0 -6px 20px rgba(0,0,0,.18);
}
.rmc-mobile-cta a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 10px; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 0.85rem; text-decoration: none;
}
.rmc-mobile-cta .rmc-mcta-btn { background: var(--accent); }
@media (max-width: 980px) { .rmc-mobile-cta { display: flex; } body { padding-bottom: 54px; } }

/* ==========================================================================
   Divi UI overrides
   ========================================================================== */
.et_pb_button, .et_pb_module.et_pb_button_module .et_pb_button {
    border-radius: 999px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1) !important;
}
.et_pb_button:hover { transform: translateY(-3px); }
.et_pb_blurb, .et_pb_module, .rmc-trust-card, .rmc-service-card, img { border-radius: var(--radius); }
.et_pb_image img, .wp-block-image img { border-radius: var(--radius-lg); }

/* ==========================================================================
   Ninja Forms restyle
   ========================================================================== */
.nf-form-cont {
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 24px 50px -14px rgba(1,0,8,.18);
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
    background: #fff;
}
.nf-form-cont::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
    background-size: 200% auto;
    animation: rmc-shimmer 4s linear infinite;
}
.nf-field-label label { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
.nf-field-element input, .nf-field-element textarea, .nf-field-element select {
    border: 1.5px solid #dde6ef !important; border-radius: 8px !important; padding: 14px 16px !important;
    transition: border-color .2s, box-shadow .2s; font-family: 'Open Sans', sans-serif;
}
.nf-field-element input:focus, .nf-field-element textarea:focus {
    border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(8,32,129,.14); outline: none;
}
.nf-field-element select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23666' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.nf-form-cont input[type="submit"], .nf-form-cont .submit-wrap button {
    background: var(--accent) !important; color: #fff !important; border: none !important;
    border-radius: 999px !important; padding: 15px 32px !important; font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important; letter-spacing: 0.04em; width: 100%; cursor: pointer;
    transition: transform .3s, box-shadow .3s;
}
.nf-form-cont input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(8,32,129,.4); }
.nf-response-msg { background: var(--primary); color: #fff; border-radius: var(--radius); padding: 18px 22px; border-left: 4px solid var(--accent-light); }
.nf-error .nf-field-element input, .nf-error .nf-field-element textarea { border-color: #e53e3e !important; box-shadow: 0 0 0 3px rgba(229,62,62,.12); }

/* PHI/HIPAA safety notice styling on forms */
.rmc-form-notice { font-size: 0.8rem; color: var(--text-medium); margin-top: 14px; line-height: 1.5; }

/* Divi 5's code-module height decoration (sizing.desktop.height:100%, used by
   rmc_lib.py code(fill_height=True)) only compiles onto the outer .et_pb_code
   wrapper, not its .et_pb_code_inner child — so a height:100% div inside the
   raw HTML content has nothing real to resolve against and collapses to its
   min-height fallback instead of filling the module. This rule only takes
   effect when the outer wrapper already has an explicit height (i.e. only
   where fill_height=True is used) — every other code module on the site has
   an auto-height outer wrapper, against which height:100% here is a no-op. */
.et_pb_code_inner { height: 100%; }

/* ==========================================================================
   Blog grid (/blog/ — see rmc_blog_grid_shortcode() in functions.php)
   ========================================================================== */
.rmc-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.rmc-blog-card {
    display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg);
    border: 1px solid rgba(1,0,8,.08); overflow: hidden; text-decoration: none; color: inherit;
    max-width: 100%;
}
.rmc-blog-card-img { aspect-ratio: 16/10; overflow: hidden; }
.rmc-blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.rmc-blog-card:hover .rmc-blog-card-img img { transform: scale(1.06); }
.rmc-blog-card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1 1 auto; }
.rmc-blog-card-cat {
    align-self: flex-start; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.72rem;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-light);
    border-radius: 999px; padding: 5px 14px; margin-bottom: 14px;
}
.rmc-blog-card-title {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.18rem; line-height: 1.35;
    color: var(--primary); margin: 0 0 10px;
}
.rmc-blog-card:hover .rmc-blog-card-title { color: var(--accent); }
.rmc-blog-card-excerpt { color: var(--text-medium); font-size: 0.92rem; line-height: 1.6; margin: 0 0 18px; flex: 1 1 auto; }
.rmc-blog-card-meta {
    font-size: 0.8rem; color: var(--text-medium); padding-top: 14px; margin-top: auto;
    border-top: 1px solid rgba(1,0,8,.08); display: flex; gap: 8px; align-items: center;
}

.rmc-blog-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 48px; flex-wrap: wrap; }
.rmc-blog-page {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
    padding: 0 10px; border-radius: 999px; border: 1.5px solid rgba(1,0,8,.14); background: #fff;
    color: var(--text-dark); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem;
    text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.rmc-blog-page:hover { border-color: var(--accent); color: var(--accent); }
.rmc-blog-page.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Article hero (single.php) — stacked and centered by default (mobile/
   tablet); desktop only splits into title-left / image-right, matching the
   1_2,1_2 flex-row-with-centered-items pattern used elsewhere on the site
   (e.g. about-dr-larsen's intro row). */
.rmc-article-hero-inner {
    max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 40px;
}
.rmc-article-hero-text { max-width: 640px; }
.rmc-article-hero-inner.rmc-no-img .rmc-article-hero-text { max-width: 760px; }
.rmc-article-hero-img { width: 100%; max-width: 480px; }
.rmc-article-hero-img img {
    display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--radius-lg); box-shadow: 0 24px 50px -14px rgba(1,0,8,.45);
}
@media (min-width: 981px) {
    .rmc-article-hero-inner { flex-direction: row; align-items: center; text-align: left; gap: 60px; }
    .rmc-article-hero-text, .rmc-article-hero-img { flex: 1 1 50%; max-width: none; }
    .rmc-article-hero-inner.rmc-no-img .rmc-article-hero-text { flex: 0 1 auto; max-width: 760px; margin: 0 auto; }
}

/* Article body typography (single.php) — the actual post content comes out
   of the WP editor as plain h2/h3/p/ul/a with no rmc-* classes attached, so
   these target the raw tags within the wrapper instead of relying on
   authors to hand-add classes per post. */
.rmc-article-body h2 {
    font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--primary);
    font-size: clamp(1.4rem, 1.6vw + 1rem, 1.9rem); line-height: 1.25; margin: 44px 0 18px;
}
.rmc-article-body h3 {
    font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--primary);
    font-size: 1.2rem; line-height: 1.3; margin: 32px 0 14px;
}
.rmc-article-body > *:first-child { margin-top: 0; }
.rmc-article-body ul, .rmc-article-body ol { padding-left: 22px; line-height: 1.7; color: var(--text-medium); margin: 0 0 22px; }
.rmc-article-body li { margin-bottom: 8px; }
.rmc-article-body a:not(.rmc-btn) { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(8,32,129,.35); text-underline-offset: 2px; }
.rmc-article-body a:not(.rmc-btn):hover { text-decoration-color: var(--accent); }
.rmc-article-body blockquote {
    margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent);
    font-style: italic; color: var(--text-dark);
}

/* ==========================================================================
   Utility
   ========================================================================== */
.rmc-hidden-schema { padding: 0 !important; height: 0; overflow: hidden; }
.rmc-pill { display: inline-block; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(1,0,8,.18); font-size: 0.85rem; font-weight: 600; color: var(--primary); text-decoration: none; transition: background .25s, color .25s; }
.rmc-pill:hover { background: var(--primary); color: #fff; }

/* ==========================================================================
   Footer quick-links column
   ========================================================================== */
.rmc-footer-links { list-style: none; margin: 0 0 8px; padding: 0; }
.rmc-footer-links li { margin-bottom: 11px; }
.rmc-footer-links a { color: #fff; opacity: .82; font-size: 0.95rem; transition: opacity .2s ease; }
.rmc-footer-links a:hover { opacity: 1; }
.rmc-footer-heading { color: #fff; font-weight: 700; letter-spacing: 0.04em; margin: 0 0 14px; }
.rmc-footer-heading.is-second { margin-top: 22px; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Desktop dropdowns only — Divi switches to the mobile menu at 980px */
@media (min-width: 981px) {

  /* The dropdown panel: let it size to its content */
  .et-menu .sub-menu,
  .et_pb_menu .et-menu .sub-menu,
  #top-menu li ul.sub-menu {
    width: auto;
    min-width: 240px;   /* keeps short menus from looking cramped */
    max-width: none;
  }

  /* The list items */
  .et-menu .sub-menu li,
  #top-menu li li {
    width: auto;
  }

  /* The links — this is where Divi's fixed width actually lives */
  .et-menu .sub-menu li a,
  #top-menu li li a {
    width: auto;
    white-space: nowrap;
    padding-right: 20px;
  }

  /* Third-level flyouts: Divi hard-codes left: 240px to match the old width */
  .et-menu .sub-menu li ul,
  #top-menu li li ul {
    left: 100%;
  }
  .et-menu > li:nth-last-child(-n+3) > .sub-menu {
    left: auto;
    right: 0;
  }
  .et-menu > li:nth-last-child(-n+3) > .sub-menu li ul {
    left: auto;
    right: 100%;
  }
}