/* -------------------------------------------------- */
/* Global Layout                                       */
/* -------------------------------------------------- */

/* Box (gray sections) */
.cpp-section {
    border: 3px solid black;
    border-radius: 20px;
    padding: 10px 15px;
    background-color: #fafafa;
    margin: 10px 0;
}

/* Title (h3) inside each section */
.cpp-title {
    font-size: 20px;
    margin: 0;
    padding: 0;
    font-family: var(--subtitle-font);
    color: black;
}

/* Radio rows */
.radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
    font-size: 17px;
}

.radio-item label {
    font-family: var(--author-font);
    color: black;
}

/* Header of yellow box */
.cpp-header-main {
    border: 3px solid black;
    border-radius: 20px;
    padding: 10px;
    background-color: #ffd11a;
    margin: 10px;
}

/* Logo */
.logo-img {
    max-height: 340px;
    max-width: 740px;
    width: 100%;
    height: auto;
}

.cpp-desc {
    margin-top: 0px;
    margin-bottom: 0;
    font-size:14px;
    /* font-family: var(--author-font); */
    font-weight:bold;
}

/* -------------------------------------------------- */
/* Desktop compact inline forms                       */
/* -------------------------------------------------- */

@media (min-width: 700px) {
    .cpp-section {
        padding: 8px 12px;
    }

    .cpp-inline {
        display: flex;
        align-items: center;
        gap: 20px; /* spacing between title and options */
        flex-wrap: wrap;
    }

    .cpp-inline .radio-item {
        margin: 0;
    }

    .cpp-desc {
        margin-top: 0px;
    }
}