/* Instituto Hope House · Polimento visual v1.0.1
   Complementa hopehouse-identidade-2026.css sem alterar a landing /
*/

/* ---------------------------------------------------------
   1. Cabeçalho: mais presença para a marca
--------------------------------------------------------- */
.site-header__inner{
    min-height:98px;
}
.brand--institute{
    gap:16px;
}
.brand__logo{
    width:72px;
    height:72px;
}
.brand__name small{
    font-size:11px;
}
.brand__name strong{
    margin-top:6px;
    font-size:19px;
}
.site-header .nav-link,
.site-header .nav-link--button{
    position:relative;
}
.site-header .nav-link::after,
.site-header .nav-link--button::after{
    position:absolute;
    right:10px;
    bottom:5px;
    left:10px;
    height:2px;
    background:var(--clay);
    content:"";
    opacity:0;
    transform:scaleX(.35);
    transition:opacity .18s ease,transform .18s ease;
}
.site-header .nav-link:hover::after,
.site-header .nav-link:focus-visible::after,
.site-header .nav-link--button:hover::after,
.site-header .nav-link--button:focus-visible::after{
    opacity:1;
    transform:scaleX(1);
}
.nav-action{
    transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.nav-action:hover,
.nav-action:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(88,88,90,.13);
}

/* ---------------------------------------------------------
   2. Família Acolhedora: legibilidade e formulário
--------------------------------------------------------- */
.family-form-section .form-section__intro{
    color:var(--ink-deep);
}
.family-form-section .form-section__intro h2{
    color:var(--ink-deep)!important;
}
.family-form-section .form-section__intro > p:not(.eyebrow){
    color:var(--muted)!important;
    opacity:1!important;
}
.family-form-section .form-section__intro .eyebrow{
    color:var(--olive)!important;
}
.family-form-section .site-form--dark{
    position:relative;
    padding:34px;
    border:1px solid var(--line);
    border-top:9px solid var(--sage);
    background:#fff;
    box-shadow:0 24px 50px rgba(65,65,65,.08);
}
.family-form-section .site-form--dark::before{
    position:absolute;
    top:-9px;
    right:0;
    width:34%;
    height:9px;
    background:linear-gradient(90deg,var(--sun),var(--clay),var(--lime));
    content:"";
}
.family-form-section .site-form--dark label{
    color:var(--ink-deep)!important;
}
.family-form-section .site-form--dark input,
.family-form-section .site-form--dark textarea,
.family-form-section .site-form--dark select{
    min-height:48px;
    border:1px solid #d8d8d2;
    background:#fff;
    color:var(--ink-deep);
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.family-form-section .site-form--dark textarea{
    min-height:150px;
}
.family-form-section .site-form--dark input:hover,
.family-form-section .site-form--dark textarea:hover,
.family-form-section .site-form--dark select:hover{
    border-color:#aaa9a3;
}
.family-form-section .site-form--dark input:focus,
.family-form-section .site-form--dark textarea:focus,
.family-form-section .site-form--dark select:focus{
    border-color:var(--sage);
    box-shadow:0 0 0 4px rgba(131,208,219,.18);
}
.family-form-section .checkbox-label{
    grid-template-columns:22px 1fr;
    gap:12px;
    padding:14px 15px;
    border:1px solid var(--line);
    background:#f7f7f3;
    color:#626266!important;
    font-size:13px!important;
    line-height:1.48;
}
.family-form-section .checkbox-label input{
    width:19px!important;
    height:19px;
    margin-top:1px;
    accent-color:var(--clay);
}
.family-form-section .button{
    min-height:52px;
    padding-inline:22px;
}

/* ---------------------------------------------------------
   3. Cards de programas: área inteira clicável
--------------------------------------------------------- */
.program-index-card,
.program-card{
    position:relative;
    overflow:hidden;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.program-index-card .text-link,
.program-card .text-link{
    position:relative;
    z-index:3;
}
.program-index-card .text-link::after,
.program-card .text-link::after{
    position:absolute;
    z-index:5;
    inset:auto;
    content:"";
}
.program-index-card > .text-link::before,
.program-card > .text-link::before{
    position:absolute;
    z-index:2;
    inset:-500px;
    content:"";
}
.program-index-card:hover,
.program-index-card:focus-within,
.program-card:hover,
.program-card:focus-within{
    z-index:2;
    transform:translateY(-5px);
    box-shadow:0 22px 42px rgba(72,72,72,.10);
}
.program-index-card::after,
.program-card::after{
    position:absolute;
    right:-42px;
    bottom:-42px;
    width:105px;
    height:105px;
    border:1px solid currentColor;
    border-radius:50%;
    content:"";
    opacity:.12;
    transition:transform .25s ease,opacity .25s ease;
}
.program-index-card:hover::after,
.program-index-card:focus-within::after,
.program-card:hover::after,
.program-card:focus-within::after{
    opacity:.22;
    transform:scale(1.22);
}
.program-index-card .text-link,
.program-card .text-link{
    transition:gap .18s ease;
}
.program-index-card:hover .text-link,
.program-card:hover .text-link{
    gap:16px;
}

/* ---------------------------------------------------------
   4. Doações: apoio mensal com prioridade visual
--------------------------------------------------------- */
.donation-plan-card{
    position:relative;
}
.donation-plan-card--featured{
    z-index:2;
    border:2px solid var(--ink-deep)!important;
    box-shadow:0 23px 46px rgba(65,65,65,.12);
    transform:translateY(-9px);
}
.donation-plan-card--featured::before{
    position:absolute;
    top:15px;
    right:15px;
    padding:6px 9px;
    background:var(--ink-deep);
    color:#fff;
    content:"apoio contínuo";
    font-family:var(--mono);
    font-size:9px;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.donation-plan-card--featured:hover,
.donation-plan-card--featured:focus-visible,
.donation-plan-card--featured.is-selected{
    border:2px solid var(--ink-deep)!important;
    transform:translateY(-12px);
}
.donation-plan-card:not(.donation-plan-card--featured){
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.donation-plan-card:not(.donation-plan-card--featured):hover{
    box-shadow:0 17px 34px rgba(65,65,65,.08);
}

.brand-support-business-note{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:22px;
    padding:22px 24px;
    border-left:7px solid var(--clay);
    background:#f7f7f3;
    color:var(--ink-deep);
}
.brand-support-business-note strong{
    font-family:var(--serif);
    font-size:22px;
    font-weight:600;
}
.brand-support-business-note a{
    flex:0 0 auto;
}

/* ---------------------------------------------------------
   5. Microinterações gerais
--------------------------------------------------------- */
.button,
.text-link,
.news-card,
.path-card{
    transition:transform .18s ease,box-shadow .18s ease,color .18s ease,background .18s ease;
}
.button:focus-visible,
.text-link:focus-visible,
.nav-action:focus-visible,
.nav-link:focus-visible,
.nav-link--button:focus-visible{
    outline:3px solid rgba(131,208,219,.55);
    outline-offset:4px;
}
.news-card:hover{
    transform:translateY(-4px);
}
.news-card:hover .news-card__image{
    box-shadow:0 18px 38px rgba(70,70,70,.09);
}
.path-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 38px rgba(70,70,70,.08);
}

/* ---------------------------------------------------------
   6. Responsividade
--------------------------------------------------------- */
@media(max-width:1050px){
    .site-header__inner{
        min-height:88px;
    }
    .brand__logo{
        width:64px;
        height:64px;
    }
    .brand__name strong{
        font-size:17px;
    }
}

@media(max-width:800px){
    .site-header__inner{
        min-height:78px;
    }
    .brand__logo{
        width:56px;
        height:56px;
    }
    .site-nav{
        top:78px!important;
        max-height:calc(100vh - 78px)!important;
        background:#fff!important;
        color:var(--ink-deep)!important;
        border-bottom:1px solid var(--line)!important;
        box-shadow:0 22px 45px rgba(40,40,40,.10);
    }
    .site-nav .submenu{
        background:#f7f7f3!important;
    }
    .site-nav .submenu a{
        color:var(--ink-deep)!important;
    }
    .menu-toggle span{
        background:var(--ink-deep)!important;
    }
    .menu-toggle b{
        color:var(--ink-deep)!important;
    }
    .family-form-section .site-form--dark{
        padding:26px;
    }
    .donation-plan-card--featured{
        transform:none;
    }
    .donation-plan-card--featured:hover,
    .donation-plan-card--featured:focus-visible,
    .donation-plan-card--featured.is-selected{
        transform:translateY(-3px);
    }
    .brand-support-business-note{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(max-width:520px){
    .site-header__inner{
        min-height:72px;
    }
    .brand__logo{
        width:50px;
        height:50px;
    }
    .site-nav{
        top:72px!important;
        max-height:calc(100vh - 72px)!important;
    }
    .family-form-section .site-form--dark{
        padding:20px;
    }
    .family-form-section .checkbox-label{
        padding:12px;
    }
    .program-index-card{
        min-height:290px;
        padding:24px;
    }
    .program-index-card h2{
        margin-top:46px;
        font-size:34px;
    }
    .donation-plan-card--featured::before{
        top:11px;
        right:11px;
    }
    .brand-support-business-note{
        padding:19px;
    }
    .brand-support-business-note strong{
        font-size:20px;
    }
}

/* Respeita usuários que preferem menos animação */
@media(prefers-reduced-motion:reduce){
    .program-index-card,
    .program-card,
    .donation-plan-card,
    .button,
    .text-link,
    .news-card,
    .path-card,
    .nav-action{
        transition:none!important;
    }
}