/* bioCulture — sidebar editorial v2 */
html, body { overflow-x:hidden; }
#sidebar * { box-sizing:border-box; }
#sidebar .bio-shell {
    --shell-ink:#20342a;
    --shell-muted:#738078;
    --shell-line:#e3e9e3;
    --shell-soft:#f1f5ef;
    --shell-deep:#143426;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    height:100%;
    padding:1.35rem 1.15rem 1rem;
    color:var(--shell-ink);
    background:linear-gradient(180deg,#fbfcf9 0%,#fff 38%,#f7f9f5 100%);
    font-family:"Source Sans Pro",sans-serif;
}
#sidebar .bio-brand {
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:.8rem;
    align-items:center;
    width:100% !important;
    max-width:none;
    padding:0 0 1.15rem !important;
    margin:0 0 1.15rem;
    border:0 !important;
    border-bottom:1px solid var(--shell-line);
    text-decoration:none !important;
    position:relative;
}
#sidebar .bio-brand::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:34px;
    height:2px;
    background:linear-gradient(90deg,#9b6a50,rgba(155,106,80,0));
}
#sidebar .bio-brand-mark {
    display:block;
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 10px 25px rgba(29,61,43,.12);
}
#sidebar .bio-brand-copy { min-width:0; line-height:1; }
#sidebar .bio-brand-copy strong {
    display:block;
    color:var(--shell-ink);
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:1.28rem;
    font-weight:400;
    letter-spacing:-.045em;
}
#sidebar .bio-brand-copy small {
    display:block;
    margin-top:.32rem;
    color:#8f624a;
    font-size:.49rem; /* parte do logótipo: mantém o desenho original */
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}
#sidebar .bio-language {
    position: relative;
    padding: 0 0 1.2rem;
    border-bottom: 1px solid var(--shell-line);
}

#sidebar .bio-language label {
    display: block;
    margin: 0 0 0.5rem;
    color: #646f68;
    font-size: max(11px, 0.52rem);
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#sidebar .bio-language select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 2.4rem;
    padding: 0 1rem;
    border: 1px solid var(--shell-line);
    border-radius: 11px;
    background-color: #fff;
    /* Seta customizada em SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238ba396' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 10px;
    color: var(--shell-ink);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

#sidebar .bio-language select:hover {
    border-color: var(--shell-muted);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

#sidebar .bio-shell-nav {
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:.7rem .18rem .7rem 0;
    scrollbar-width:thin;
    scrollbar-color:#dce4dc transparent;
}
#sidebar .bio-nav-group {
    margin:0 0 .3rem;
    padding:0;
    border:0;
}
#sidebar .bio-nav-group summary {
    display:flex;
    align-items:center;
    gap:.55rem;
    padding:.42rem .35rem;
    color:#646f68;
    cursor:pointer;
    list-style:none;
    font-size: max(11px, .52rem);
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
}
#sidebar .bio-nav-group summary::-webkit-details-marker { display:none; }
#sidebar .bio-nav-group summary::before {
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:#b6c1b8;
}
#sidebar .bio-nav-group summary::after {
    content:"+";
    margin-left:auto;
    color:#aeb8b1;
    font-size:.8rem;
    font-weight:400;
}
#sidebar .bio-nav-group[open] summary::after { content:"−"; }
#sidebar .bio-nav-group a {
    display:flex;
    align-items:baseline;
    gap:.5rem;
    min-height:1.75rem;
    margin:.05rem 0;
    padding:.36rem .55rem .36rem 1.05rem;
    border:0 !important;
    border-radius:9px !important;
    color:#66736b;
    text-decoration:none !important;
    box-shadow:none !important;
    font-size: max(11px, .74rem);
    line-height:1.25;
    transition:background-color .18s,color .18s,transform .18s;
}
#sidebar .bio-nav-group a span { min-width:0; }
#sidebar .bio-nav-group a small {
    margin-left:auto;
    color:#646f68;
    font-size: max(11px, .48rem);
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
}
#sidebar .bio-nav-group a:hover {
    color:#2e5740;
    background:var(--shell-soft);
    transform:translateX(2px);
}
#sidebar .bio-nav-group a.active {
    color:#fff;
    background:var(--shell-deep);
    font-weight:700;
}
#sidebar .bio-nav-group a.active small { color:#c8d7cc; }
#sidebar .bio-nav-standalone {
    display:flex;
    align-items:center;
    min-height:2rem;
    margin:.25rem .15rem .55rem;
    padding:.5rem .7rem .5rem 1.05rem;
    border:1px solid #e5e9e4 !important;
    border-radius:10px !important;
    background:#f8f6ef;
    color:#6d684c;
    font-size: max(11px, .72rem);
    font-weight:700;
    text-decoration:none !important;
    box-shadow:none !important;
}
#sidebar .bio-nav-standalone:hover,
#sidebar .bio-nav-standalone.active { color:#fff; background:#67603c; }

/* --- Navegação Global (Estilo Eyebrow / Títulos) --- */
#sidebar .bio-nav-hubs, 
#sidebar .bio-nav-about {
    display: grid;
    gap: .12rem;
    padding: .25rem 0 .8rem;
}

#sidebar .bio-nav-hubs { border-bottom: 1px solid var(--shell-line); }

/* Ocultar label redundante */
#sidebar .bio-nav-label { display: none; }

/* --- Navegação Global: Estilo Observatório (Source Sans Pro 900, 4px) --- */
#sidebar .bio-nav-hubs > a,
#sidebar .bio-nav-about > a {
    display: flex;
    align-items: center;
    min-height: 2.2rem;
    padding: .48rem .55rem !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all .18s ease;

    /* Estilo idêntico ao "OBSERVATÓRIO BIOCULTURA" */
    color: #5f6862 !important;
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: max(11px, 0.58rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-radius:9px !important;
}

/* Configuração base dos ícones - Forçar FontAwesome */
#sidebar .bio-nav-hubs > a::before,
#sidebar .bio-nav-about > a::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 1.1rem;
    width: 28px;
    margin-right: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6f7973 !important;
    transition: all .2s ease;
    flex: 0 0 auto;
}

/* --- Definição dos Ícones (pela ligação, para não dependerem da ordem) --- */
#sidebar a[href*="/observatorio/observatorio-terra"]::before { content: "\f14e" !important; } /* Compass: ler o território */
#sidebar a[href*="/recursos/vida-e-recursos"]::before { content: "\f06c" !important; } /* Leaf: vida e recursos */
#sidebar a[href*="/observatorio/pressoes-humanas"]::before { content: "\f275" !important; } /* Industry: vetores de pressão */
#sidebar a[href*="/energia/energia"]::before { content: "\f0e7" !important; } /* Bolt: energia consciente */
#sidebar a[href*="/calendario/conhecimento-cuidar"]::before { content: "\f4d8" !important; } /* Seedling: conhecimento para cuidar */
#sidebar a[href*="/services/services"]::before { content: "\f1bb" !important; } /* Tree: soluções naturais */
#sidebar a[href*="/manifesto"]::before { content: "\f303" !important; } /* Pen-nib: manifesto */
#sidebar a[href*="/glossario"]::before { content: "\f02d" !important; } /* Book: glossário */
#sidebar a[href*="/contactos"]::before { content: "\f0e0" !important; } /* Envelope: contactos e privacidade */

/* Estados Hover e Active (Verde profundo) */
#sidebar .bio-nav-hubs > a:hover,
#sidebar .bio-nav-about > a:hover,
#sidebar .bio-nav-hubs > a.active,
#sidebar .bio-nav-about > a.active {
    color: var(--shell-deep) !important;
    transform: translateX(2px);
    background:var(--shell-soft) !important;
}

#sidebar .bio-nav-hubs > a:hover::before,
#sidebar .bio-nav-about > a:hover::before,
#sidebar .bio-nav-hubs > a.active::before,
#sidebar .bio-nav-about > a.active::before {
    color: var(--shell-deep) !important;
}

/* --- 3. Restaurar "O teu território" --- */
#sidebar .bio-location-label {
    display: block !important;
    margin: 0 0 .5rem !important;
    color: #646f68 !important;
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: max(11px, .52rem) !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

#sidebar .bio-location {
    position: relative;
    flex-shrink: 0;
    padding: 1.2rem 0 0 !important;
    border-top: 1px solid var(--shell-line);
}

#sidebar .bio-location-control {
    display:flex;
    align-items:center;
    gap:.4rem;
    padding:.38rem .48rem;
    border:1px solid var(--shell-line);
    border-radius:10px;
    background:#fff;
}
#sidebar .bio-location-control button {
    width:21px !important;
    height:21px !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
    color:#476b53 !important;
    font-size:1rem !important;
    line-height:20px !important;
}
#sidebar .bio-location-control input {
    width:100%;
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    outline:0;
    background:none !important;
    box-shadow:none !important;
    color:#657269 !important;
    font-size: max(11px, .7rem) !important;
}
#sidebar .bio-dropdown {
    position:absolute;
    bottom:calc(100% + 6px);
    left:0;
    z-index:99999;
    display:none;
    width:100%;
    max-height:220px;
    overflow-y:auto;
    border:1px solid var(--shell-line);
    border-radius:12px;
    background:#fff;
    box-shadow:0 -15px 38px rgba(35,52,40,.12);
}
#sidebar .bio-res-item {
    display:block;
    width:100%;
    height:auto !important;
    padding:.65rem .75rem !important;
    border:0 !important;
    border-bottom:1px solid #eef1ed !important;
    background:#fff !important;
    box-shadow:none !important;
    color:#5f6962 !important;
    text-align:left;
    font-size: max(11px, .7rem) !important;
    line-height:1.3 !important;
}
#sidebar .bio-res-item:hover, #sidebar .bio-res-item:focus-visible { background:#f3f6f1 !important; }
#sidebar .bio-res-item small { display:block; color:#646f68; }
#sidebar .bio-location-status {
    min-height:.8rem;
    margin:.35rem 0 0;
    color:#646f68;
    font-size: max(11px, .58rem);
}
#sidebar .bio-shell-loader {
    position:absolute !important;
    display:block !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:.001 !important;
    pointer-events:none !important;
}
@media (max-width:1280px) {
    #sidebar .bio-shell { min-height:auto; height:auto; }
    #sidebar .bio-shell-nav { max-height:none; overflow:visible; }
    #sidebar .bio-location { margin-top:.5rem; }
}

/* Sem contorno de foco depois de um clique ou de voltar atrás; com o teclado (html.bio-kb) o foco tem contorno verde. */
#sidebar a:focus, #sidebar button:focus, #sidebar summary:focus { outline: none; box-shadow: none; }
html.bio-kb #sidebar a:focus-visible, html.bio-kb #sidebar button:focus-visible, html.bio-kb #sidebar summary:focus-visible { outline: 2px solid #2f6b4b; outline-offset: 2px; }
/* O mesmo em todo o site: sem teclado, nenhum link ou botão mostra contorno de foco (ex.: ao voltar atrás). */
html:not(.bio-kb) a:focus, html:not(.bio-kb) button:focus, html:not(.bio-kb) summary:focus { outline: none; }
html.bio-kb a:focus-visible, html.bio-kb button:focus-visible { outline: 2px solid #2f6b4b; outline-offset: 2px; }

/* Passagem entre páginas sem piscar: o navegador mantém a página anterior até a nova estar pronta e faz uma transição suave;
   a barra lateral (já escrita no HTML de cada página) fica no mesmo sítio, sem animação, e só o conteúdo faz a transição.
   Sem suporte (ou com «reduzir movimento») a navegação é a normal. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
@media (min-width: 1281px) {
    #sidebar { view-transition-name: bio-sidebar; }
}
::view-transition-old(bio-sidebar) { display: none; }
::view-transition-new(bio-sidebar) { animation: none; mix-blend-mode: normal; }
::view-transition-group(bio-sidebar) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; animation-timing-function: ease; }
