/*!
 * shell.css — prototipo html-prototype (Etapa 1)
 * Responsivo menu: toggle + drawer off-canvas (≤991px)
 * Síntese: faixa verde .header-menu escondida no mobile; menu em gaveta a direita
 */

@media (max-width: 991.98px) {
    .site-header {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .site-header > .logo {
        flex-shrink: 1;
        min-width: 0;
    }

    /* Faixa inteira oculta no mobile/tablet conforme combinado */
    .header-menu {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .site-header__menu-toggle {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        border: 1px solid var(--capi-green, #2d9773);
        border-radius: 6px;
        background: transparent;
        color: var(--capi-green, #2d9773);
        cursor: pointer;
        transition:
            border-color 0.2s ease,
            background-color 0.2s ease,
            color 0.2s ease;
        box-sizing: border-box;
    }

    .site-header__menu-toggle:hover,
    .site-header__menu-toggle:focus-visible {
        background: rgba(45, 151, 115, 0.12);
        color: #ffffff;
        border-color: #ffffff;
        outline: none;
    }

    .site-header__menu-toggle:focus-visible {
        box-shadow: 0 0 0 2px rgba(45, 151, 115, 0.45);
    }

    /* Hamburger bars */
    .site-header__menu-toggle-box {
        position: relative;
        display: block;
        width: 22px;
        height: 16px;
    }

    .site-header__menu-toggle-bar {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background-color: currentColor;
        transition:
            transform 0.28s ease,
            opacity 0.2s ease,
            top 0.28s ease,
            bottom 0.28s ease;
        transform-origin: center;
    }

    .site-header__menu-toggle-bar:nth-child(1) {
        top: 0;
    }

    .site-header__menu-toggle-bar:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
    }

    .site-header__menu-toggle-bar:nth-child(3) {
        bottom: 0;
    }

    /* X quando aberto */
    .site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    .site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }

    /* Painel lateral */
    .capi-drawer {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1050;
        width: 320px;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--capi-dark-bar, #032025);
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
        transform: translateX(100%);
        transition: transform 300ms ease-out;
        will-change: transform;
    }

    body.capi-drawer-open .capi-drawer {
        transform: translateX(0);
    }

    .capi-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms ease-out;
    }

    body.capi-drawer-open .capi-drawer-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .capi-drawer__nav {
        padding: 1.25rem 1.25rem 2rem;
    }

    .capi-drawer__nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .capi-drawer__nav li {
        margin: 0;
    }

    .capi-drawer__nav a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        color: #ffffff;
        text-decoration: none;
        font-weight: 400;
        font-size: 1rem;
        letter-spacing: 0.02em;
        border-radius: 4px;
        transition:
            background-color 0.15s ease,
            color 0.15s ease;
    }

    .capi-drawer__nav a:hover,
    .capi-drawer__nav a:focus-visible {
        background: rgba(45, 151, 115, 0.2);
        color: #ffffff;
        outline: none;
    }

    .capi-drawer__nav a.is-active {
        font-weight: 700;
        color: var(--capi-green, #2d9773);
    }
}

@media (max-width: 576px) {
    .capi-drawer {
        width: 85vw;
    }
}

/* Desktop: sem controles do drawer */
@media (min-width: 992px) {
    .site-header__menu-toggle,
    .capi-drawer,
    .capi-drawer-overlay {
        display: none !important;
    }
}

body.capi-drawer-open {
    overflow: hidden;
}

html.capi-drawer-open {
    overflow: hidden;
}

/* Drawer submenu (Serviços): collapsed by default, expands on caret tap.
   The page-level display:none is scoped to .header-menu and doesn't reach the
   cloned copy in the drawer, so re-assert it here. */
.capi-drawer .has-submenu {
    position: relative;
}

.capi-drawer .has-submenu > .servicos-submenu,
.capi-drawer .has-submenu > .servicos-dropdown {
    display: none;
}

.capi-drawer .has-submenu.is-open > .servicos-submenu,
.capi-drawer .has-submenu.is-open > .servicos-dropdown {
    display: block;
}

.capi-drawer__submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1rem;
    background: none;
    border: 0;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.capi-drawer__submenu-toggle span {
    display: inline-block;
    transition: transform 0.15s ease;
}

.capi-drawer .has-submenu.is-open .capi-drawer__submenu-toggle span {
    transform: rotate(180deg);
}

/* PSD: current-page menu item is yellow #F4D783 on every page. The per-page CSS
   only sets font-weight on .is-active (sobre.css was the sole file with the
   colour), so declare it once here — page CSS loads later but never sets color. */
.header-menu > ul > li > a.is-active {
    color: #F4D783;
}

/* Desktop header submenu (Serviços) — hover dropdown, shared across all pages
   (ported from the prototype; the drawer clone is handled separately above). */
.header-menu li.has-submenu {
    position: relative;
}

.header-menu .servicos-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    /* Always block; visibility toggles instead of display, so a close delay
       gives the cursor time to travel into the panel (HuddleKit 61: dropdown
       fechava rápido demais, sem tempo de selecionar). */
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .35s;
    list-style: none;
    margin: 0;
    width: 16.94vw;
    padding: 1vw 1.7vw;
    background: #278465;
    border-radius: 0 0 0.5vw 0.5vw;
    font-size: 1.06vw;
    line-height: 1;
}

/* Invisible bridge over the gap between the "Serviços" item and the panel, so
   moving the mouse down doesn't cross dead space and dismiss the menu. */
.header-menu .servicos-dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.9vw;
    height: 0.9vw;
}

.header-menu li.has-submenu:hover .servicos-dropdown,
.header-menu li.has-submenu:focus-within .servicos-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.header-menu .servicos-dropdown li + li {
    margin-top: 1vw;
}

.header-menu .servicos-dropdown a {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.header-menu .servicos-dropdown a:hover,
.header-menu .servicos-dropdown a.is-active {
    color: #f5d883;
}

/* Orphan in-page services subnav (old post_content on servicos-prestados /
   tabela-custos / pagamentos): the layout has no page-level subnav — the
   header "Serviços" dropdown covers it. Hide it and let the content span. */
main .servicos-submenu {
    display: none;
}

main .servicos-content {
    width: 100%;
}

/* Footer social icons — the per-page footer CSS (duplicated across ~18 files)
   renders them ~39px, smaller than the PSD (~52px @1800) so they lose weight
   next to the address block. One shared, higher-specificity rule (nav.social-row
   beats .social-row) bumps them consistently everywhere (HuddleKit 3). */
.footer-capi nav.social-row {
    gap: clamp(12px, 1.45vw, 26px);
}
.footer-capi nav.social-row a {
    width: clamp(40px, 2.9vw, 52px);
    flex-shrink: 0;  /* the col-lg-auto nav sizes to content; don't let them squeeze */
}