/* ============================================================
   Charlie Swim – shared CSS text logo component
   Usage:
     <span class="cs-logo">
       <span class="l1">C</span><span class="l2">h</span><span class="l3">a</span><span class="l1">r</span><span class="l2">l</span><span class="l3">i</span><span class="l1">e</span> <span class="l3">s</span><span class="l1">w</span><span class="l2">i</span><span class="l3">m</span>
     </span>
   Add class "cs-logo--sm"  for inline/label contexts (1em)
   Add class "cs-logo--lg"  for splash/modal hero contexts
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

.cs-logo {
    font-family: 'Fredoka One', 'Nunito ExtraBold', Helvetica Rounded, Arial Rounded MT Bold, sans-serif;
    font-size: 26px;
    font-weight: 400;
    /* Fredoka One is already heavy */
    letter-spacing: 0.5px;
    display: inline;
    white-space: nowrap;
    line-height: 1;
    /* subtle 3-D lift */
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.10);
    -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.07);
}

/* letter palettes matching the logo */
.cs-logo .l1 {
    color: #1565C0;
}

/* blue   */
.cs-logo .l2 {
    color: #F9A825;
}

/* yellow */
.cs-logo .l3 {
    color: #E53935;
}

/* red    */

/* size variants */
.cs-logo--sm {
    font-size: 1em;
    /* inherits from parent */
    text-shadow: none;
    -webkit-text-stroke: 0;
}

.cs-logo--lg {
    font-size: 38px;
}

.cs-logo--xl {
    font-size: 58px;
    line-height: 1.1;
    display: block;
    text-align: center;
    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.15),
        0 6px 18px rgba(0, 0, 0, 0.12);
}

/* header context – override the height-based sizing used for img */
.app-title .cs-logo {
    font-size: 26px;
    vertical-align: middle;
}

/* clickable header logo */
.app-title .cs-logo-link {
    display: inline-block;
    text-decoration: none;
}

.app-title .cs-logo-link .cs-logo {
    display: inline-block;
    transition: transform 0.18s ease, text-shadow 0.18s ease, filter 0.18s ease;
    will-change: transform;
}

.app-title .cs-logo-link:hover .cs-logo,
.app-title .cs-logo-link:focus-visible .cs-logo {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.20),
        0 8px 18px rgba(0, 0, 0, 0.15);
}

.app-title .cs-logo-link:active .cs-logo {
    transform: translateY(0);
    filter: none;
}

.app-title .cs-logo.cs-logo--lg {
    font-size: 32px;
}

/* inline text context ("Welcome to <logo>", description paragraphs) */
p .cs-logo,
.section-description .cs-logo,
.payment-modal-message .cs-logo,
.welcome-text .cs-logo,
.insurance-note .cs-logo,
.info-text .cs-logo {
    font-size: 1em;
    vertical-align: -0.1em;
    text-shadow: none;
    -webkit-text-stroke: 0;
}

/* modal title context */
.payment-modal-title .cs-logo,
h3 .cs-logo {
    font-size: 1.1em;
    vertical-align: middle;
}

/* login/signup header h1 */
.header h1 .cs-logo,
.header h1>.cs-logo {
    font-size: 32px;
}

/* button option label */
.option-label .cs-logo {
    font-size: 1em;
    text-shadow: none;
    -webkit-text-stroke: 0;
}