/* =========================================================
CODBIO HUB — GLOBAL HEADER

Shared header, brand, primary navigation and mobile
navigation presentation extracted from site.css.
Existing CSS rules are unchanged; only comments and
indentation have been added for maintainability.
Extracted: 2026-08-16.
========================================================= */

/* =========================================================
HEADER CONTAINER
Sticky header surface, border, background and blur.
========================================================= */

.site-header {
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid rgba(16,32,50,.1);
    background:rgba(247,248,245,.88);
    backdrop-filter:blur(18px)
}

/* =========================================================
HEADER INNER LAYOUT
Shared shell alignment for brand and navigation.
========================================================= */

.header-inner {
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

/* =========================================================
BRAND IDENTITY
Shared CodBio Hub brand and brand-mark presentation.
========================================================= */

.brand {
    display:flex;
    align-items:center;
    gap:12px
}

.brand>span:last-child {
    display:flex;
    flex-direction:column;
    line-height:1.1
}

.brand strong {
    font-size:18px;
    letter-spacing:-.02em
}

.brand small {
    margin-top:5px;
    color:var(--muted);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.14em
}

.brand-mark {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    position:relative;
    border:1px solid var(--line);
    border-radius:13px;
    background:linear-gradient(145deg,#fff,#edf1ec);
    box-shadow:0 8px 20px rgba(20,42,54,.08)
}

.brand-mark i {
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--ink)
}

.brand-mark i:nth-child(1) {
    transform:translate(-8px,6px);
    background:var(--mint-deep)
}

.brand-mark i:nth-child(2) {
    transform:translate(7px,-7px);
    background:#705bd4
}

.brand-mark i:nth-child(3) {
    transform:translate(8px,9px);
    background:var(--coral)
}

.brand-mark:after,.brand-mark:before {
    content:"";
    position:absolute;
    width:18px;
    height:1px;
    background:#8c9aa4;
    transform:rotate(-37deg)
}

.brand-mark:after {
    transform:rotate(45deg)
}

/* =========================================================
PRIMARY NAVIGATION
Desktop navigation links and interaction state.
========================================================= */

.site-nav {
    display:flex;
    gap:30px;
    align-items:center
}

.site-nav a {
    font-size:13px;
    font-weight:650;
    color:#344757
}

.site-nav a:after {
    content:"";
    display:block;
    height:1px;
    width:0;
    background:var(--mint-deep);
    transition:.2s
}

.site-nav a:hover:after,.site-nav a:focus-visible:after {
    width:100%
}
/* Current standalone page */
.site-nav a.is-current:after,
.site-nav a[aria-current="page"]:after {
    width: 100%;
}
/* =========================================================
MOBILE MENU CONTROL
Hamburger control used by the shared navigation.
========================================================= */

.menu-button {
    display:none;
    border:0;
    background:none;
    width:44px;
    height:44px;
    padding:10px
}

.menu-button span {
    display:block;
    height:2px;
    background:var(--ink);
    margin:5px
}

/* =========================================================
RESPONSIVE — MOBILE HEADER
Existing max-width:700px header and navigation overrides.
========================================================= */

@media(max-width:700px) {
    .site-header {
        background:rgba(247,248,245,.96)
    }

    .menu-button {
        display:block
    }

    .site-nav {
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        padding:20px;
        background:var(--paper);
        border-bottom:1px solid var(--line);
        flex-direction:column;
        align-items:flex-start
    }

    .site-nav.is-open {
        display:flex
    }
}


/* =========================================================
   HEADER SUPPORT / DONATE
   Visual Home control overlays the official PayPal control.
========================================================= */

.header-donate {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
}

.header-donate__visual {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    padding: 0.45rem 0.65rem;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;

    pointer-events: none;
    white-space: nowrap;

    transition: color 160ms ease;
}

.header-donate__heart {
    color: #9aa5ad;
    font-size: 0.82rem;

    transition:
        color 160ms ease,
        transform 160ms ease;
}

.header-donate:hover .header-donate__visual,
.header-donate:focus-within .header-donate__visual {
    color: var(--ink);
}

.header-donate:hover .header-donate__heart,
.header-donate:focus-within .header-donate__heart {
    color: #b55461;
    transform: scale(1.08);
}

/*
RULE TO OVERRIDE PAYPAL DONATE BUTTON SIZE
The official PayPal donate button is an iframe that is not easily styled.
The following rule sets a minimum size for the iframe and hides the iframe and image elements.
*/
.header-donate #donate-button {
    min-width: 78px;
    min-height: 34px;
}

.header-donate #donate-button iframe,
.header-donate #donate-button img {
    opacity: 0;
}