/* =========================================================================
   typography-normalize.css
   ---------------------------------------------------------------------------
   Standardises body / paragraph copy site-wide to match the Home page hero
   and intro copy: 17px, line-height 1.7. Loaded LAST in _Layout.cshtml so it
   overrides the per-page font-size rules that had accumulated across
   site.css, features.css, responsive.css, mobile-layout.css, ipad-*.css,
   wide-desktop.css and inline component styles.

   Scope:
     - Every <p> inside <main> content areas.
     - Named body-copy classes used across page templates (hero copy, intro
       copy, feature/blog/insights body, FAQ answers, card descriptions).

   Headings, buttons, eyebrows, meta lines, breadcrumbs and card titles are
   NOT touched — only running body text is normalised.
   ========================================================================= */

/* Base — all paragraph body copy inside the main content column. */
main p,
main li,
main dd,
main blockquote {
    font-size: 17px;
    line-height: 1.7;
}

/* Explicit body-copy component overrides (needed because these classes
   already carry !important or high-specificity font-size rules elsewhere). */
.hero-copy,
.intro-copy,
.features-lead,
.feature-detail-intro,
.feature-detail-section p,
.feature-detail-how-block p,
.feature-detail-benefits-grid span,
.features-faq-answer,
.features-faq-answer p,
.blog-article,
.blog-article p,
.blog-article li,
.blog-card p,
.blog-card-body p,
.security-section .security-copy p,
.platform-showcase p:not(.eyebrow),
.workflow-list li,
.comparison .compare-list li,
.feature-grid p {
    font-size: 17px !important;
    line-height: 1.7 !important;
}

/* Small print (meta lines, card meta, tag lists, breadcrumbs, eyebrows,
   footer legal, form helpers) intentionally keeps its smaller size — those
   are UI chrome, not body text. */

/* Mobile: allow a very slight step down so long lines don't wrap awkwardly
   on small screens while staying visually consistent with the home page. */
@media (max-width: 575.98px) {
    main p,
    main li,
    main dd,
    main blockquote,
    .hero-copy,
    .intro-copy,
    .features-lead,
    .feature-detail-intro,
    .feature-detail-section p,
    .feature-detail-how-block p,
    .feature-detail-benefits-grid span,
    .features-faq-answer,
    .features-faq-answer p,
    .blog-article,
    .blog-article p,
    .blog-article li,
    .blog-card p,
    .blog-card-body p {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }
}

/* -------------------------------------------------------------------------
   Home page feature cards (Client management, Appointments & scheduling, ...)
   ---------------------------------------------------------------------------
   Older stylesheets (wide-desktop.css / responsive.css) fixed each card to a
   specific pixel HEIGHT, which was authored against the previous larger
   card font-size. Now that body copy is standardised to 17px the cards
   sometimes contain shorter text and, on desktop, longer summaries can
   overflow the fixed 470px card. Convert the fixed height to a min-height
   and let the flex column grow to fit its content on every breakpoint.
   ========================================================================= */
.feature-grid article {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.feature-grid p {
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.feature-grid-section {
    height: auto !important;
}

/* -------------------------------------------------------------------------
   Features detail page tweaks
   ---------------------------------------------------------------------------
   The Key Benefits title (`<strong>`) was authored at 1.1rem, which is
   ~13px given the site's 12px root — smaller than the standardised 17px
   body text. Bump it above the body copy so the title reads as a title.
   The left-hand sidebar nav was also at 1rem (~12px); bring it up to the
   same 17px body baseline so it's comfortably readable.
   ========================================================================= */
.feature-detail-benefits-grid strong {
    font-size: 20px !important;
    line-height: 1.3 !important;
}
.feature-detail-benefits-grid span {
    font-size: 17px !important;
    line-height: 1.6 !important;
}
.feature-detail-sidebar-nav a {
    font-size: 17px !important;
    line-height: 1.4 !important;
    padding: .7rem .95rem !important;
}
.feature-detail-sidebar-eyebrow {
    font-size: 13px !important;
    letter-spacing: .12em !important;
}
.feature-detail-sidebar-cta-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
}
.feature-detail-sidebar-cta-copy {
    font-size: 15px !important;
    line-height: 1.55 !important;
}

/* -------------------------------------------------------------------------
   Contact page tweaks
   ---------------------------------------------------------------------------
   Same story as the features page: card titles were 1.05rem (~13px on the
   12px root) so they read smaller than the standardised body text. Bump
   card headings, address/list copy and the small helper meta lines to sit
   comfortably around the 17px body baseline.
   ========================================================================= */
.cs-sidebar-card h3,
.cs-contact-cta h3 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: .75rem !important;
}
.cs-sidebar-card p,
.cs-sidebar-card address,
.cs-sidebar-card li {
    font-size: 17px !important;
    line-height: 1.65 !important;
}
.cs-sidebar-card .small,
.cs-sidebar-card small,
.cs-sidebar-card .text-muted,
.cs-contact-brand .small,
.cs-contact-brand small {
    font-size: 15px !important;
    line-height: 1.55 !important;
}
.cs-contact-cta p {
    font-size: 17px !important;
    line-height: 1.65 !important;
}

/* -------------------------------------------------------------------------
   Home page "Your data is safe" (security-section) — narrow desktop fix
   ---------------------------------------------------------------------------
   Between roughly 1200-1599px, the security-copy column (Bootstrap col-lg-4)
   is only ~360-450px wide. Older rules set the heading to 31px and the
   paragraph inherited the 12px root, which fit that column. After the body
   text was normalised to 17px, the paragraph occasionally overflows the
   band (which is otherwise pinned to a fixed height by wide-desktop.css on
   very large screens, and appears cramped on smaller desktops).

   Scale the heading down a touch and let the copy wrap fully within the
   available column width.
   ========================================================================= */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .security-section .security-copy {
        min-width: 0 !important;
    }
    .security-section h2 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: .75rem !important;
        max-width: 100% !important;
    }
    .security-section .security-copy p:not(.eyebrow) {
        font-size: 16px !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }
    .security-section {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}

/* -------------------------------------------------------------------------
   Space before the footer
   ---------------------------------------------------------------------------
   Ensure every page has generous breathing room between its last section
   and the site footer. Also gives the Home page FAQ accordion the extra
   bottom padding it needed after being expanded to 12 items.
   ========================================================================= */
main {
    padding-bottom: 4rem;
}
.faq-section {
    padding-bottom: 5rem !important;
}
@media (max-width: 767.98px) {
    main {
        padding-bottom: 2.5rem;
    }
    .faq-section {
        padding-bottom: 3rem !important;
    }
}

/* -------------------------------------------------------------------------
   Case studies index — card media
   ---------------------------------------------------------------------------
   The card media area uses a 16/9 aspect ratio (features.css). Both regular
   photos and client logos should fill that box:
     - Photos: cover (crop to fill)
     - Logos:  contain on a white background so the logo isn't cropped
   ========================================================================= */
.blog-card-media {
    aspect-ratio: 16/9 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: #f8fbfc !important;
    overflow: hidden !important;
}
.blog-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.blog-card-media.cs-card-media {
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-card-media.cs-card-media .cs-card-logo {
    width: 100% !important;
    height: 100% !important;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain !important;
    padding: 12px;
}

/* -------------------------------------------------------------------------
   Case study detail page hero image
   ---------------------------------------------------------------------------
   Match the height of the text column on the left by stretching the row
   and letting the media column cover its full height. Photos crop-fill;
   client logos are contained on a white background.
   ========================================================================= */
.cs-detail-hero .row { align-items: stretch !important; }
.cs-detail-hero .cs-hero-media {
    display: flex;
    align-items: stretch;
    max-height: 460px;
}
.features-hero .cs-hero-image {
    width: 100% !important;
    height: 100% !important;
    max-height: 460px !important;
    min-height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}
.features-hero .cs-hero-image.cs-hero-logo {
    background: #ffffff;
    object-fit: contain;
    padding: 24px;
}
@media (min-width: 1600px) {
    .cs-detail-hero .cs-hero-media { max-height: 520px; }
    .features-hero .cs-hero-image { max-height: 520px !important; }
}
@media (max-width: 991.98px) {
    .cs-detail-hero .cs-hero-media { align-items: center; max-height: none; }
    .features-hero .cs-hero-image {
        height: auto !important;
        max-height: 360px !important;
    }
}

/* -------------------------------------------------------------------------
   Insights detail page hero image
   ---------------------------------------------------------------------------
   Grow to fill the right column so it matches the height of the left-hand
   text area, rather than sitting small.
   ========================================================================= */
.features-hero .hero-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}