/**
 * CRIEMUS — Mobile App Shell
 * Ativação exclusivamente responsiva por media query CSS.
 *
 * Cores/tipografia: tokens canônicos DARK definidos em /style.css.
 */

.criemus-mobile-topbar,
.criemus-mobile-bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    body.criemus-mobile-shell-enabled {
        --criemus-mobile-topbar-height: 60px;
        --criemus-mobile-bottom-nav-height: 72px;
        --criemus-mobile-adminbar-offset: 0px;
        --criemus-mobile-shell-max-width: 760px;
        padding-top: calc(var(--criemus-mobile-topbar-height) + env(safe-area-inset-top, 0px) + var(--criemus-mobile-adminbar-offset));
        padding-bottom: calc(var(--criemus-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    body.admin-bar.criemus-mobile-shell-enabled {
        --criemus-mobile-adminbar-offset: 46px;
    }

    /* Blocksy permanece intacto no desktop; no mobile sai apenas da apresentação. */
    body.criemus-mobile-shell-enabled #header,
    body.criemus-mobile-shell-enabled header#header,
    body.criemus-mobile-shell-enabled .ct-header,
    body.criemus-mobile-shell-enabled .site-header,
    body.criemus-mobile-shell-enabled #footer,
    body.criemus-mobile-shell-enabled footer#footer,
    body.criemus-mobile-shell-enabled .ct-footer,
    body.criemus-mobile-shell-enabled .site-footer {
        display: none !important;
    }

    .criemus-mobile-topbar,
    .criemus-mobile-bottom-nav {
        font-family: var(--criemus-font-family-base, "Carlito", Sans-Serif);
    }

    .criemus-mobile-topbar {
        position: fixed;
        z-index: 10020;
        top: var(--criemus-mobile-adminbar-offset);
        left: 0;
        right: 0;
        display: block;
        min-height: calc(var(--criemus-mobile-topbar-height) + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        background: var(--criemus-surface-dark, #151719);
        border-bottom: 1px solid rgba(228, 230, 230, 0.12);
        box-shadow: 0 8px 24px rgba(11, 13, 14, 0.20);
    }

    .criemus-mobile-topbar__inner {
        width: min(100%, var(--criemus-mobile-shell-max-width));
        height: var(--criemus-mobile-topbar-height);
        margin: 0 auto;
        padding: 0 max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .criemus-mobile-topbar__brand {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--criemus-text-primary, #F2F2EE);
        font-family: "Lexend Deca", Sans-Serif;
        font-size: 24px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.01em;
        text-decoration: none;
    }

    .criemus-mobile-topbar__brand:hover,
    .criemus-mobile-topbar__brand:focus-visible {
        color: var(--criemus-color-yellow-action, #FDFB5D);
        outline: none;
    }

    .criemus-mobile-topbar__actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        flex: 0 0 auto;
    }

    .criemus-mobile-topbar__action {
        position: relative;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        color: var(--criemus-text-primary, #F2F2EE);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .criemus-mobile-topbar__action:hover,
    .criemus-mobile-topbar__action:focus-visible {
        color: var(--criemus-color-yellow-action, #FDFB5D);
        background: var(--criemus-surface-dark-raised, #1A1D1F);
        outline: 2px solid var(--criemus-focus-color, #DFD486);
        outline-offset: 1px;
    }

    .criemus-mobile-topbar__action.is-disabled {
        color: var(--criemus-color-green-medium, #AEC3B0);
        opacity: 0.62;
        cursor: default;
    }

    .criemus-mobile-topbar__action.is-disabled:hover {
        color: var(--criemus-color-green-medium, #AEC3B0);
        background: transparent;
        outline: none;
    }

    /* LAYOUT-03.2.6 — Instagram: um pouco maior e na cor-base dos textos.
       O escopo não altera o sino nem os demais ícones da App Shell. */
    .criemus-mobile-topbar__instagram,
    .criemus-mobile-topbar__instagram.is-disabled,
    .criemus-mobile-topbar__instagram.is-disabled:hover {
        color: var(--criemus-text-primary, #F2F2EE);
    }

    .criemus-mobile-topbar__instagram.is-disabled {
        opacity: 1;
    }

    .criemus-mobile-topbar__action-icon,
    .criemus-mobile-bottom-nav__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .criemus-mobile-topbar__action-icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .criemus-mobile-topbar__instagram .criemus-mobile-topbar__action-icon svg {
        width: 25px;
        height: 25px;
    }

    .criemus-mobile-topbar__action-icon .criemus-mobile-icon-dot {
        fill: currentColor;
        stroke: none;
    }

    .criemus-mobile-topbar__badge {
        position: absolute;
        top: 4px;
        right: 2px;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--criemus-surface-dark, #151719);
        border-radius: 999px;
        background: var(--criemus-color-gold, #DFD486);
        color: var(--criemus-color-bg-darker, #0B0D0E);
        font-size: 10px;
        font-weight: var(--criemus-font-weight-bold, 700);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .criemus-mobile-topbar__action:hover .criemus-mobile-topbar__badge,
    .criemus-mobile-topbar__action:focus-visible .criemus-mobile-topbar__badge {
        border-color: var(--criemus-surface-dark-raised, #1A1D1F);
    }

    .criemus-mobile-bottom-nav {
        position: fixed;
        z-index: 10020;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        min-height: calc(var(--criemus-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--criemus-surface-dark, #151719);
        border-top: 1px solid rgba(228, 230, 230, 0.14);
        box-shadow: 0 -10px 30px rgba(11, 13, 14, 0.24);
    }

    .criemus-mobile-bottom-nav__inner {
        width: min(100%, var(--criemus-mobile-shell-max-width));
        height: var(--criemus-mobile-bottom-nav-height);
        margin: 0 auto;
        padding: 6px max(8px, env(safe-area-inset-right, 0px)) 7px max(8px, env(safe-area-inset-left, 0px));
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        gap: 2px;
    }

    .criemus-mobile-bottom-nav__item {
        position: relative;
        min-width: 0;
        min-height: 58px;
        padding: 7px 3px 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 14px;
        color: var(--criemus-text-primary, #F2F2EE);
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .criemus-mobile-bottom-nav__item:hover,
    .criemus-mobile-bottom-nav__item:focus-visible {
        color: var(--criemus-color-yellow-action, #FDFB5D);
        background: var(--criemus-surface-dark-raised, #1A1D1F);
        outline: none;
    }

    .criemus-mobile-bottom-nav__item.is-active {
        color: var(--criemus-color-yellow-action, #FDFB5D);
        background: var(--criemus-surface-dark-raised, #1A1D1F);
    }

    .criemus-mobile-bottom-nav__item.is-active::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 50%;
        width: 22px;
        height: 3px;
        border-radius: 999px;
        background: var(--criemus-color-gold, #DFD486);
        transform: translateX(-50%);
    }

    .criemus-mobile-bottom-nav__item.is-disabled {
        color: var(--criemus-color-green-medium, #AEC3B0);
        opacity: 0.72;
        cursor: default;
    }

    .criemus-mobile-bottom-nav__icon svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .criemus-mobile-bottom-nav__icon .criemus-mobile-icon-dot {
        fill: currentColor;
        stroke: none;
    }

    .criemus-mobile-bottom-nav__label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: 12px;
        font-weight: var(--criemus-font-weight-bold, 700);
        line-height: 1.15;
        letter-spacing: 0.02em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Evita que âncoras internas fiquem escondidas sob a top bar fixa. */
    body.criemus-mobile-shell-enabled :where([id]) {
        scroll-margin-top: calc(var(--criemus-mobile-topbar-height) + env(safe-area-inset-top, 0px) + 12px);
    }

    @media (prefers-reduced-motion: reduce) {
        .criemus-mobile-topbar *,
        .criemus-mobile-bottom-nav * {
            scroll-behavior: auto !important;
            transition: none !important;
        }
    }
}