/* App Store / Google Play badge pair
   Used above the fold on the homepage (large) and in the footer (small). */

.app-store-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.app-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    padding: 8px 14px;
    background-color: #000;
    border: 1px solid #303030;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}

.app-store-badge:hover,
.app-store-badge:focus {
    background-color: #1a1a1a;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.app-store-badge-icon {
    flex-shrink: 0;
    font-size: 28px;
    line-height: 1;
}

.app-store-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.app-store-badge-eyebrow {
    font-size: 11px;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .85;
}

.app-store-badge-main {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 600;
}

/* Side-by-side once there's room; mobile stays stacked (iOS on top). */
@media (min-width: 768px) {
    .app-store-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* Small variant, used in the footer */
.app-store-buttons-small {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 12px;
}

.app-store-buttons-small .app-store-badge {
    width: max-content;
    padding: 5px 10px;
    border-radius: 6px;
    gap: 6px;
}

.app-store-buttons-small .app-store-badge-icon {
    font-size: 18px;
}

.app-store-buttons-small .app-store-badge-eyebrow {
    font-size: 8px;
}

.app-store-buttons-small .app-store-badge-main {
    font-size: 13px;
}

@media (min-width: 768px) {
    .app-store-buttons-small {
        flex-direction: row;
        justify-content: flex-start;
    }
}

/* The homepage hero (.promo, in theme-6.css) has a fixed mobile height
   that predates these badges. Let it grow to fit the extra content
   instead of clipping the breathing room below "How we define
   childfree". Scoped to the homepage only so other pages using .promo
   are unaffected; the background slider behind it is 780px tall, so
   there's plenty of room before anything runs out from under it. */
@media (max-width: 767.98px) {
    body.home-page .promo {
        height: auto;
        padding-bottom: 30px;
    }
}