/*
 * CareShaper site stylesheet - GENERATED FILE, DO NOT EDIT.
 * Source: resources/css/site/tokens.css + resources/css/site/components.css
 * Rebuild via the mix entry in webpack.mix.js (see docs/frontend-redesign/CONVENTIONS.md).
 */

/*
 |------------------------------------------------------------------------------
 | CareShaper site tokens
 |------------------------------------------------------------------------------
 | A palette, and nothing else.
 |
 | These values were read off the live site with getComputedStyle, not chosen.
 | The theme owns typography, spacing, buttons, grid and every component that
 | already exists; this file exists only so the handful of genuinely new pieces
 | (the trust badge row) use the same colours instead of inventing their own.
 |
 | Deliberately NOT here, and never to be added:
 |   - font-family, font-size, line-height     -> sandbox_custom_v2.css owns these
 |   - spacing scale, button padding, radius   -> style.css owns these
 |   - any --bs-* override                     -> would repaint the whole theme
 */

:root {
    /* Brand, as the theme defines them (style.css :root). */
    --cs-blue: #3f78e0;      /* --bs-primary   */
    --cs-orange: #f78b77;    /* CTA buttons    */
    --cs-navy: #343f52;      /* headings, ink  */
    --cs-green: #45c4a0;     /* success        */
    --cs-yellow: #fab758;
    --cs-red: #e2626b;

    /* Neutrals, as measured on the live page. */
    --cs-ink: #343f52;       /* heading colour      */
    --cs-ink-soft: #60697b;  /* body copy colour    */
    --cs-ink-muted: #959ca9; /* secondary detail    */
    --cs-line: #e7edf4;      /* hairline borders    */
    --cs-surface: #ffffff;
    --cs-surface-soft: #f6f7f9;

    /* WhatsApp brand green, for the floating button only. */
    --cs-whatsapp: #25d366;
}

/*
 |------------------------------------------------------------------------------
 | CareShaper site - the little the theme does not already provide
 |------------------------------------------------------------------------------
 | Three things live here and nothing else:
 |   1. .cs-badges / .cs-badge  - the trust badge row, which has no theme
 |                                equivalent and replaces a raster image
 |   2. .cs-whatsapp            - the floating button, moved out of 12 inline
 |                                style declarations in sandbox_v2
 |   3. .cs-skip-link           - keyboard skip link, invisible until focused
 |
 | Everything else - type, buttons, cards, grid, sections - is the theme's, used
 | through the theme's own classes. If you are about to add a rule here, first
 | check whether style.css or sandbox_custom_v2.css already has that class.
 |
 | Inherits font and size from the page; sets neither.
 */

/* ----------------------------------------------------------- trust badge row */

.cs-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-badges--start { justify-content: flex-start; }

.cs-badge {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--cs-ink);
    text-decoration: none;
}

.cs-badge:hover,
.cs-badge:focus { color: var(--cs-blue); }

/* The icon itself is a theme SVG sized by .icon-svg-*; only its placement in the
   badge is set here. The FontAwesome variables are a fallback for the case where
   a badge is given a FontAwesome icon instead of a theme SVG. */
.cs-badge__icon {
    flex: none;
    line-height: 1;
    --fa-primary-color: var(--cs-navy);
    --fa-secondary-color: var(--cs-blue);
    --fa-secondary-opacity: 0.38;
}

.cs-badge__text { display: flex; flex-direction: column; }

.cs-badge__label {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.cs-badge__detail {
    color: var(--cs-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

/* A badge icon supplied as a file rather than through the theme's SVG set.
   56px is the theme's .icon-svg-sm (44px) plus a quarter, rounded to the 8px
   grid - the badges carry the trust section on their own and read small next to
   a 35px heading. contain,
   because artwork that is not square should letterbox rather than stretch: the
   certificate is portrait and would otherwise be squashed to square. */
.cs-badge__icon--file {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* The theme icon is only the fallback for a badge with no artwork file, but if
   one ever goes missing the row must not go ragged: match the 56px above. */
.cs-badge .cs-badge__icon:not(.cs-badge__icon--file),
.cs-badge .cs-badge__icon:not(.cs-badge__icon--file) svg {
    width: 56px;
    height: 56px;
}

/* On a dark band the same row has to stay legible. */
.bg-dark .cs-badge,
.text-inverse .cs-badge { color: #fff; }

.bg-dark .cs-badge__detail,
.text-inverse .cs-badge__detail { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 575.98px) {
    .cs-badges { justify-content: flex-start; gap: 1rem 1.5rem; }
}

/* ---------------------------------------------------------------- quote card */
/*
   The theme's .blockquote-details is a flex row with align-items: center and no
   sizing on the avatar, so the image was stretched to 54.3 x 48 (object-fit
   defaults to fill) and floated against the middle of a three-line name block.
   Measured on the page, not guessed. Fix: pin the avatar square, cover-crop it,
   and align the row to the top so the photo lines up with the name.
*/
.cs-quote .blockquote-details {
    align-items: flex-start;
    gap: 1rem;
}

/* Our own class rather than the theme's .w-12: that utility carries !important,
   so it overrode the width and the image came out 70 x 60.
   Sized in px on purpose - this theme sets the root font size to 20px, so rem
   values here are not the 16px most people expect. 70px matches the avatars in
   the live testimonial section.

   The selector is deliberately long. Inside the carousel the theme has
   ".swiper-container .swiper img { width: 100%; height: auto }" - two classes
   and an element, which outranks a single class, so a plain .cs-quote__avatar
   lost and the photo rendered 235 x 235. Measured, not guessed. This selector
   is one class heavier than the theme's, so it wins everywhere the card is
   used, in a carousel or not. */
.cs-quote .blockquote-details img.cs-quote__avatar {
    flex: 0 0 auto;
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin: 0;
}

.cs-quote .blockquote-details .info { padding-left: 0; }

/* In a carousel the slides are as tall as the tallest, and the quote text varies,
   so the card stretches and the avatar/name block is pushed to the bottom edge.
   The gap between quote and person therefore varies, the cards do not. */
.cs-quote-carousel .swiper-slide { height: auto; }
.cs-quote-carousel .item-inner,
.cs-quote-carousel .cs-quote { height: 100%; }

.cs-quote-carousel .cs-quote .card-body,
.cs-quote-carousel .cs-quote blockquote.icon {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.cs-quote-carousel .cs-quote blockquote.icon > p { flex: 1 1 auto; }
.cs-quote-carousel .cs-quote .blockquote-details { margin-top: auto; }

/* ------------------------------------------------------------- pricing card */
/*
   Every plan card reserves the same space under its button for the "large groups"
   note, so the three call-to-action buttons sit on one horizontal line whether or
   not a card has a note. Only the top tier has one today.
*/
.cs-plan-note {
    min-height: 3.2rem;
    font-size: 0.85rem;
    line-height: 1.35;
}

@media (max-width: 991.98px) {
    .cs-plan-note { min-height: 0; }
}

/* ----------------------------------------------------------- whatsapp float */
/* Same geometry and colour as the inline styles it replaces in sandbox_v2. */

.cs-whatsapp {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: var(--cs-whatsapp);
    color: #fff;
    font-size: 30px;
    text-align: center;
}

/* Two things pushed the glyph off centre, both measured on the page. The icon
   font inherits the page line-height, so at font-size 30px the <i> was 51px
   tall inside a 50px circle - flex cannot centre a child taller than its
   parent. And .whats_app_my-float, the class the live markup nudges the icon
   with, carries margin-top: 16px, which was how the icon was positioned before
   the circle became a flex container. line-height 1 and margin 0 leave a 30px
   box in a 50px circle, and the flex centring above then holds. */
.cs-whatsapp i,
.cs-whatsapp svg {
    display: block;
    line-height: 1;
    margin: 0;
}

.cs-whatsapp:hover,
.cs-whatsapp:focus { color: #fff; }

/* -------------------------------------------------------------- header logo */
/*
   sandbox_custom_v2.css forces the logo to 28px tall below 576px but sets no
   width. The live markup carries no width/height attributes, so the browser
   derives the width from the intrinsic ratio; ours carries width="195" for
   layout stability, and that attribute then fought the forced height and
   stretched a 195 x 35 logo to 195 x 28. Restoring width:auto at that
   breakpoint gives the live geometry, 156 x 28, with the ratio intact.
*/
@media only screen and (max-width: 576px) {
    img.logo-dark,
    img.logo-light,
    img.logo-careshaper { width: auto; }
}

/* --------------------------------------------------------------- skip link */

.cs-skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1080;
    padding: 0.5rem 1rem;
    background: var(--cs-surface);
    border-radius: 6px;
    transition: top 150ms ease;
}

.cs-skip-link:focus { top: 1rem; }

/* ----------------------------------------------- container width, lg band */
/*
   Between 992 and 1199px Bootstrap caps .container at 960px. At 1199px that
   leaves about 90px of dead margin on each side before the navbar's own
   px-md-10 (50px) is even counted, so the header items bunch up and every
   section reads narrower than it does one pixel later, at 1200, where the cap
   jumps to 1140.

   Both rules are scoped to .cs-site, which the site layout puts on <body>, so
   no live page is touched and deleting this block restores the theme exactly.

   The 100px floor is not decoration. The theme hangs shapes outside their
   container - the dotted square by the testimonials sits at right: -1.7rem -
   and the language dropdown opens hard against the right edge. Taking the
   container to the full width put both past the viewport and the page gained a
   horizontal scrollbar (measured: scrollWidth 1174 in a 1157px window). Fifty
   pixels either side is enough for both, and still 30 to 40px wider per side
   than the theme's 960.

   The navbar padding goes with it: without that, the header container would be
   held to 1042px by the nav's own padding while the sections below ran wider,
   and the logo would no longer line up with the content under it.
*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .cs-site .container { max-width: min(1140px, calc(100vw - 100px)); }

    .cs-site nav.navbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ------------------------------------------------------------ journey figure */
/*
   The three drawn frames beside the journey sections. The SVG has a 480x240
   viewBox and no width, so it fills its column and keeps its proportions; the
   cap stops it becoming enormous in a wide column, and the auto margins keep it
   centred when it does. Nothing else: the shapes take their colours from the
   tokens above, through var() in the markup.
*/
.cs-journey-art {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin-inline: auto;
}

/* The two tints the figures use. They sit here rather than in tokens.css
   because nothing else on the site needs them: --cs-blue at 25% and at 8%
   over white, resolved to hex so the SVG can use them as plain fills. */
:root {
    --cs-journey-pale: #c5d7f6;
    --cs-journey-soft: #eef3fd;
    --cs-journey-div: #c9d2e0;
}