/*** Akoca Custom Checkbox Pill Bullet List (CSS pill + vector tick, clamp-driven type) ***/
/*
 * HEADING LEVEL NOTE
 * The shortcode outputs h2 to h6 via heading_level for correct SEO order.
 * :is(h2, h3, h4, h5, h6) keeps the look identical whatever level renders.
 */
.akoca-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.2vw, 20px);
    width: 100%;
}

.akoca-checkbox-item {
    position: relative;
    border: 2px solid #602432;          /* pill outline, replaces checkbox.png */
    border-radius: 999px;
    min-height: 80px;                   /* min- so wrapped text grows the pill, no clipping */
    padding: 12px 30px 12px 64px;       /* left padding must clear the check circle */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* Vector check circle + tick — crisp at any size and DPR */
.akoca-checkbox-item::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 2px solid #602432;
    border-radius: 50%;
    box-sizing: border-box;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23602432' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* Names — Amatic SC, sentence case, component-scale (NOT the global H3 clamp) */
.akoca-checkbox-item :is(h2, h3, h4, h5, h6) {
    font-family: "Amatic SC";
    color: #602432;
    font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.15;
    text-transform: none;
    margin: 0 0 2px 0;
    padding: 0;
    -webkit-text-stroke: 0.4px #602432;   /* thickens the hand strokes */
    paint-order: stroke fill;             /* keeps the stroke clean under the fill */
}

/* Descriptions — Body List: body clamp + uppercase + list tracking + 1.7 leading */
.akoca-checkbox-item p {
    font-family: "Sofia Sans Condensed";
    color: #602432;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    padding: 0;
}

/* Description-only variant — single centred Body List label */
.akoca-checkbox-item--description-only p {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;     /* was center */
    margin: 0;
}

/* ---- Breakpoints: clamp handles type, so these carry pill geometry only ---- */
@media (min-width: 1280px) { .akoca-checkbox-item { min-height: 70px; padding: 12px 32px 12px 60px; } }
@media (min-width: 1440px) { .akoca-checkbox-item { min-height: 70px; padding: 12px 26px 12px 66px; } }
@media (min-width: 1920px) { .akoca-checkbox-item { min-height: 70px; padding: 12px 20px 12px 76px; } }

@media (max-width: 980px) {
    .akoca-checkbox-item { min-height: 74px; padding: 12px 26px 12px 56px; }
}
@media (max-width: 767px) {
    .akoca-checkbox-item { min-height: 64px; padding: 10px 20px 10px 54px; }
    .akoca-checkbox-item::before { width: 28px; height: 28px; left: 10px; }
}
@media (max-width: 480px) {
    .akoca-checkbox-item { padding: 10px 16px 10px 48px; }
    .akoca-checkbox-item::before { width: 26px; height: 26px; left: 8px; }
}