/* =========================================================
   Shrang Width Safety
   ========================================================= */

.sharang-generator-wrap,
.sharang-recent-clips,
.sharang-my-clips,
.shrang-home-section,
.shrang-account-page,
.shrang-info-page,
.shrang-home-hero,
.shrang-home-how,
.sharang-result-page {
    box-sizing: border-box;
}

.sharang-generator-wrap *,
.sharang-recent-clips *,
.sharang-my-clips *,
.shrang-home-section *,
.shrang-account-page *,
.shrang-info-page *,
.shrang-home-hero *,
.shrang-home-how *,
.sharang-result-page * {
    box-sizing: border-box;
}

/* =========================================================
   Shrang Base Layout
   ========================================================= */

.sharang-generator-wrap,
.sharang-recent-clips,
.sharang-my-clips,
.shrang-home-section,
.shrang-account-page {
    width: 100%;
    max-width: min(1100px, calc(100% - 32px));
    margin: 40px auto;
    padding: 0;
}

.sharang-generator-wrap {
    max-width: min(780px, calc(100% - 32px));
    padding: 32px;
    border: 1px solid #e3e3e3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(17, 17, 17, 0.04);
}

.shrang-account-page {
    max-width: min(780px, calc(100% - 32px));
}

.sharang-result-page {
    width: 100%;
    max-width: min(780px, calc(100% - 32px));
    margin: 40px auto;
    padding: 0;
}

.sharang-generator-wrap h1,
.sharang-generator-wrap h2,
.sharang-recent-clips h1,
.sharang-recent-clips h2,
.sharang-my-clips h1,
.sharang-my-clips h2,
.shrang-home-section > h1,
.shrang-home-section > h2,
.shrang-account-page h1,
.shrang-account-page h2 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #111;
    line-height: 1.2;
}

.sharang-generator-wrap h2,
.sharang-recent-clips h2,
.sharang-my-clips h2,
.shrang-home-section > h2,
.shrang-account-page h1 {
    font-size: clamp(26px, 3vw, 36px);
}

.sharang-generator-wrap > p,
.sharang-recent-clips > p,
.sharang-my-clips > p,
.shrang-home-section > p,
.shrang-account-page > p {
    margin-bottom: 24px;
    color: #444;
    line-height: 1.65;
}

.sharang-generator-wrap p,
.sharang-recent-clips p,
.sharang-my-clips p,
.shrang-account-page p {
    line-height: 1.6;
}

.sharang-meta-separator {
    margin: 0 5px;
    color: #777;
}

/* Clean spacing after toolbar */

.shrang-account-toolbar + p {
    margin-top: 0;
}

/* Prevent long text/audio/forms from pushing mobile width */

.sharang-generator-wrap input,
.sharang-generator-wrap select,
.sharang-generator-wrap textarea,
.shrang-account-page input,
.shrang-account-page select,
.shrang-account-page textarea,
.sharang-my-clips input,
.sharang-my-clips select,
.sharang-my-clips textarea,
.sharang-result-page audio,
.sharang-my-clips audio,
.sharang-recent-clips audio {
    max-width: 100%;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
    .sharang-generator-wrap,
    .sharang-recent-clips,
    .sharang-my-clips,
    .shrang-home-section,
    .shrang-account-page,
    .sharang-result-page {
        max-width: calc(100% - 24px);
        margin: 26px auto;
        padding-left: 0;
        padding-right: 0;
    }

    .sharang-generator-wrap {
        padding: 22px;
        border-radius: 16px;
    }

    .sharang-generator-wrap h2,
    .sharang-recent-clips h2,
    .sharang-my-clips h2,
    .shrang-home-section > h2,
    .shrang-account-page h1 {
        font-size: 26px;
    }
}

@media (max-width: 420px) {
    .sharang-generator-wrap,
    .sharang-recent-clips,
    .sharang-my-clips,
    .shrang-home-section,
    .shrang-account-page,
    .sharang-result-page {
        max-width: calc(100% - 16px);
    }

    .sharang-generator-wrap {
        padding: 18px;
    }
}