/* ============================================================
   SITE STYLES
   Shared chrome: header, footer, mini-cta, buttons.
   Imported by pages that render Relev8's site shell.
   Depends on shared.css for color tokens.
   ============================================================ */

/* ------------------------------------------------------------
   HEADER (fixed nav pill)
   ------------------------------------------------------------ */

#header {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 0 16px;
}
@media (min-width: 768px) {
    #header { top: 8px; }
}

.header-pill {
    background-color: color-mix(in srgb, var(--midnight) 90%, transparent);
    border: 1px solid var(--dark-teal);
    border-radius: 9999px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.header-logo {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

/* Desktop-only links group inside the pill. */
.header-nav {
    display: none;
}
@media (min-width: 768px) {
    .header-nav {
        display: flex;
        align-items: center;
        gap: 24px;
    }
}

.nav-link {
    color: var(--mint-white);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    padding: 8px 16px;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}
.nav-link:hover {
    background-color: var(--dark-teal);
    color: var(--bright-cyan);
}

/* ------------------------------------------------------------
   BUTTON SYSTEM
   Base = solid teal pill. Modifiers add size, shadow, or ghost.
   Replaces the old .hero-cta / .header-cta / .meet-btn-primary
   / .meet-btn-ghost rules.
   ------------------------------------------------------------ */

.btn {
    display: inline-block;
    background-color: var(--teal);
    color: var(--midnight);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition:
        background-color 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease;
}

.btn:hover {
    background-color: var(--bright-cyan);
}

/* --- size modifiers --- */

.btn--compact {
    padding: 10px 20px;
}

.btn--large {
    padding: 12px 28px;
}
@media (min-width: 768px) {
    .btn--large {
        padding: 14px 32px;
        font-size: 18px;
    }
}

/* --- style modifiers --- */

.btn--shadow {
    box-shadow: 0 4px 14px var(--teal-30);
}
.btn--shadow:hover {
    box-shadow: 0 6px 20px var(--bright-cyan-40);
}

.btn--ghost {
    background-color: transparent;
    border: 1px solid var(--mint-white-20);
    color: var(--mint-white);
    padding: 11px 22px;   /* -1px to compensate for border */
}
.btn--ghost:hover {
    background-color: var(--mint-white-05);
    border-color: var(--light-aqua);
}

/* ------------------------------------------------------------
   MINI-CTA (inline section closer with underlined link)
   ------------------------------------------------------------ */

.mini-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    height: stretch;
    margin-top: 50px;
    margin-bottom: 50px;
}

.mini-cta-setup {
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 24px;
    color: var(--mini-cta-setup-color, var(--midnight));
    margin-bottom: 0px;
}

.mini-cta-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.mini-cta-text {
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 24px;
    color: var(--mini-cta-text-color, var(--midnight));
    transition: transform 300ms ease;
}

.mini-cta-link:hover .mini-cta-text {
    transform: scale(1.15);
    text-shadow: 5px 5px 8px rgb(var(--mini-cta-text-color), 0.3);
}

.mini-cta-underline {
    width: 180px;
    height: auto;
    margin-top: 5px;
}

.mini-cta--light {
    --mini-cta-setup-color: var(--midnight);
    --mini-cta-text-color: var(--midnight);
}

.mini-cta--dark {
    --mini-cta-setup-color: var(--light-aqua);
    --mini-cta-text-color: var(--mint-white);
}

/* Tighter top margin variant — used when the preceding block already provides space. */
.mini-cta--inset {
    margin-top: 32px;
}

@media (max-width: 767px) {
    .mini-cta {
        padding: 32px 0 40px;
    }
    .mini-cta-setup {
        font-size: 18px;
    }
    .mini-cta-text {
        font-size: 22px;
    }
    .mini-cta-underline {
        width: 140px;
    }
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.site-footer {
    background-color: var(--midnight);
    border-top: 1px solid var(--mint-white-10);
    padding: 48px 0 32px;
    position: relative;
    z-index: 6;  /* above the panel-wrapper stack (panels use z-index 2-5 via --panel-z) */
}

.footer-inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 48px;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.footer-logo {
    height: 32px;
    width: auto;
}

.footer-nav {
    display: flex;
    gap: 32px;
}

.footer-nav a {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--light-aqua);
    text-decoration: none;
    transition: color 200ms ease;
}

.footer-nav a:hover {
    color: var(--mint-white);
}

.footer-social {
    display: flex;
    gap: 16px;
    align-items: center;
}

.footer-icon-link {
    width: 40px;
    height: 40px;
    border: 1px solid var(--mint-white-10);
    border-radius: 50%;
    color: var(--light-aqua);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 200ms ease, color 200ms ease;
}

.footer-icon-link:hover {
    border-color: var(--light-aqua);
    color: var(--mint-white);
}

/* Icons as inline data-URI SVGs (background-image). One source of truth in CSS,
   no per-page HTML duplication, no mask-image fragility. Two URIs per icon —
   the second swaps in on hover so the color change still happens. Colors are
   baked into the SVG (data URIs can't reference CSS vars); brand colors rarely
   change so this is a low-cost trade-off. */
.footer-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.footer-icon--email {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394DCE0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M22 4L12 13L2 4'/></svg>");
}
.footer-icon-link:hover .footer-icon--email {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F9F9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M22 4L12 13L2 4'/></svg>");
}

.footer-icon--linkedin {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394DCE0'><path d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/></svg>");
}
.footer-icon-link:hover .footer-icon--linkedin {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F4F9F9'><path d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/></svg>");
}

.footer-legal {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--mint-white-10);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--light-aqua-70);
}

.footer-legal a {
    color: var(--light-aqua-70);
    text-decoration: none;
    transition: color 200ms ease;
}

.footer-legal a:hover {
    color: var(--mint-white);
}

@media (max-width: 767px) {
    .site-footer {
        padding: 40px 0 28px;
    }
    .footer-inner {
        padding: 0 24px;
    }
    .footer-row {
        flex-direction: column;
        align-items: center;
        gap: 28px;
        margin-bottom: 28px;
    }
    .footer-nav {
        gap: 24px;
    }
    .footer-nav a {
        font-size: 14px;
    }
}