/* ================================================
   Customer story "Let's connect" widget + modal
   ================================================
   Lives in the story sidebar, under the table of contents.

   THE GLOBAL RULES THIS HAS TO SURVIVE (dist/css/style.css)
   Two of them reach anything that is a bare <button>:

     button:hover                    color: #00e65f
     button:not(.menu-group-toggle)  12px / 300 / uppercase /
                                     0.2rem tracking

   The first is why a green button loses its label on hover, and
   the second is why single-class overrides silently lose - it is
   specificity (0,1,1), so every rule here that has to beat it is
   scoped to two classes.

   `button svg path { fill: #f0ebf0 }` and its :hover partner
   recolour any bare button's icon, which is why the close button
   restates fill and stroke in both states.

   THE COMPONENT BEING MATCHED
   .reviews-highlight__cta-button - the "Read more G2 reviews"
   button on the listing page. Brand green fill, dark label, 4px
   corner, #00cc54 on hover. "Get started" and "See all stories"
   both take that 4px corner so the page reads as one family.
   ================================================ */

/* No separator here. customer-story.css draws one line above every
   sidebar section from a single rule, so declaring another border on
   this widget would double it up. */

/* Heading matches the other two in the column - same class, so they are
   identical by construction rather than by restating values that drift. */
.cs-connect--sidebar .cs-connect__heading {
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1e1e23;
    margin: 0 0 0.75rem;
}

.cs-connect__heading {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 0.5rem;
    color: #1e1e23;
}

.cs-connect__copy {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0 0 0.875rem;
    color: #4a4a52;
}

.cs-connect__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cs-connect__input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #1e1e23;
    background: #fff;
    border: 1px solid #c9c9d1;
    border-radius: 4px;
    box-sizing: border-box;
}

/* The border going black is the focus indicator. The previous 2px green
   outline was loud, and outline-offset pushed it outside the sidebar's
   padding so it was clipped on the left. */
.cs-connect__input:focus {
    outline: none;
    border-color: #1e1e23;
    box-shadow: none;
}

.cs-connect__input[aria-invalid="true"] {
    border-color: #c0392b;
}

.cs-connect__error {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #c0392b;
}

/*
 * Matches .reviews-highlight__cta-button - the "Read more G2 reviews" button
 * on the listing page, which is the current design system primary: brand green
 * fill, dark label, 4px corner, a darker green on hover.
 *
 * That button is an <a>, so it is untouched by the theme's global button rules.
 * This one is a <button>, which those rules DO reach, so every property they
 * would otherwise impose is restated here: font-size/weight (they force 12px
 * weight 300), text-transform and letter-spacing (uppercase, 3.2px tracking),
 * and above all `color` on hover - the global `button:hover { color:#00e65f }`
 * would put green text on a green button and the label would vanish.
 *
 * Scoped as `.cs-connect .cs-connect__submit` on purpose. The rule imposing the
 * uppercase 12px weight-300 treatment is
 *     button:not(.menu-group-toggle)
 * which is specificity (0,1,1) and beats a single class (0,1,0). Measured with
 * getMatchedStylesForNode: the single-class version lost and the button
 * rendered 12px/300/uppercase/0.2rem tracking. Two classes (0,2,0) wins
 * regardless of stylesheet order.
 */
.cs-connect .cs-connect__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.8125rem 1.5rem;
    background-color: #00e65f;
    color: #1e1e23;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cs-connect .cs-connect__submit:hover,
.cs-connect .cs-connect__submit:focus {
    background-color: #00cc54;
    color: #1e1e23;
}

.cs-connect .cs-connect__submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 30, 35, 0.25);
}

/* ------------------------------------------------
   "See all stories"
   ------------------------------------------------
   A quiet secondary control: no border, light grey fill that
   darkens on hover, and the same 4px corner as
   .cs-connect__submit / .reviews-highlight__cta-button so the two
   controls on this page read as the same component family. It is
   an <a>, so the global button:hover green rule does not reach
   it, but the colour is restated on hover so a future rule
   cannot quietly change it.
   ------------------------------------------------ */
.cs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: #1e1e23;
    text-decoration: none;
    background-color: rgba(30, 30, 35, 0.06);
    border: 0;
    border-radius: 4px;
    transition: background-color 0.18s ease;
}

.cs-back-link:hover,
.cs-back-link:focus {
    background-color: rgba(30, 30, 35, 0.12);
    color: #1e1e23;
    text-decoration: none;
}

.cs-back-link__icon {
    flex: 0 0 auto;
}

.cs-back-link__icon path {
    fill: none;
    stroke: currentColor;
}

/* ------------------------------------------------
   Modal
   ------------------------------------------------ */
.cs-connect-modal[hidden] { display: none; }

.cs-connect-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
}

.cs-connect-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(30, 30, 35, 0.6);
}

.cs-connect-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    margin: auto;
    padding: 2.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
}

.cs-connect-modal__title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.316;
    margin: 0 0 1.5rem;
    padding-right: 3rem;
    color: #1e1e23;
}

/* Grey wash on hover, matching the pagination buttons - NOT #f0ebf0,
   which is the lavender grey and read as a purple tint. Glyph size is
   set below. */
.cs-connect-modal__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    color: #1e1e23;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

/* 20px read small in the 40px target, 24px read oversized. 22px sits in
   between and keeps a comfortable ring of padding around the glyph. */
.cs-connect-modal__close svg {
    width: 22px;
    height: 22px;
    margin: 0;
}

/* Restated in both states: the global `button svg path` rules fill icons
   #f0ebf0 at rest and #00e65f on hover, which would turn this X green. */
.cs-connect-modal__close svg path,
.cs-connect-modal__close:hover svg path,
.cs-connect-modal__close:focus svg path {
    fill: none;
    stroke: currentColor;
}

.cs-connect-modal__close:hover,
.cs-connect-modal__close:focus {
    background-color: rgba(30, 30, 35, 0.08);
    color: #1e1e23;
}

body.cs-connect-modal-open { overflow: hidden; }

@media (max-width: 768px) {
    .cs-connect-modal { padding: 1rem 0.75rem; }
    .cs-connect-modal__panel { padding: 2rem 1.25rem; }
    .cs-connect-modal__title { font-size: 1.5rem; }
}