/* Tvameva - shared header & footer component styles.
   Extracted from header.html / footer.html on 2026-09-28 when the header and
   footer markup was moved into the pages themselves, so that search engines and
   AI crawlers can see the site's navigation without executing JavaScript.
   One source of truth: edit these styles here, not per page. */

/* Page title. About and Contact previously opened with an <h2> and had no <h1>
   at all, which search engines read as a page with no subject. The heading was
   promoted to <h1> and this rule keeps it visually identical to the old <h2>,
   so the page looks exactly the same as before. */
h1.page-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

/* The Instagram handle shown as readable text beside the icon. Previously the
   only reference to @tvameva.hive on the whole site was inside a link's href,
   which search engines cannot read as a name. The icon keeps its round pill
   shape; this is a separate text link sitting next to it. */
a.social-handle {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--terracotta);
    text-decoration: none;
    font-size: 0.95rem;
}

a.social-handle:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--warm-cream);
    border-bottom: 1px solid rgba(62, 73, 49, 0.08);
    padding: 0.9rem 0;
    transition: padding 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.header-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    transition: all 0.25s ease;
}

/* Scrolled: transparent background with centered pill */
.site-header.scrolled {
    background: transparent;
    border-bottom: none;
    padding: 0.65rem 0;
}

.site-header.scrolled .header-container {
    display: flex;
    justify-content: center;
}

.site-header.scrolled .header-pill {
    width: min(1060px, calc(100% - 2.25rem));
    margin: 0 auto;
    background: rgba(229, 226, 213, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
    padding: 0.55rem 1.15rem;
}

.site-header .logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--deep-moss);
    flex-shrink: 0;
}

/* The brand lockup. This replaces what used to be an icon plus the word
   "TVAMEVA" set in the body typeface — which threw away the drawn letterforms
   (the crossbar-less A, the full-arm E). These are the designer's own SVG
   exports: logo-lockup.svg in colour for the header, logo-lockup-light.svg in
   warm cream for the dark footer. Being vectors they stay sharp at any size. */
.logo .logo-lockup {
    height: 36px;
    width: auto;
    display: block;
    transition: height 0.25s ease;
}

/* Shrinks with the header when the page is scrolled */
.site-header.scrolled .logo-lockup { height: 30px; }

@media (max-width: 480px) {
    .logo .logo-lockup { height: 30px; }
    .site-header.scrolled .logo-lockup { height: 27px; }
}

.main-nav .nav-list {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    align-items: center;
    padding-left: 0;
    margin: 0;
}

.main-nav a {
    text-decoration: none;
    color: var(--deep-moss);
    font-family: var(--font-body);
    font-weight: 700;
    transition: color 0.25s ease;
    position: relative;
}

.main-nav a:hover { color: var(--terracotta); }

.main-nav a.active-link {
    color: var(--terracotta);
    font-weight: 900;
}

.main-nav a.active-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--terracotta);
    border-radius: 99px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--deep-moss);
    cursor: pointer;
    flex-shrink: 0;
}

.nav-cta {
    padding: 0.7rem 1.4rem;
    border-radius: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-cta:hover {
    background: var(--terracotta) !important;
    color: var(--warm-cream) !important;
    border-color: var(--terracotta) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(130, 59, 25, 0.4);
}

/* Mobile menu */
@media (max-width: 968px) {
    .mobile-menu-toggle { display: block; }

    .main-nav .nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 1.5rem;
        right: 1.5rem;
        background: var(--warm-cream);
        flex-direction: column;
        padding: 1.5rem;
        gap: 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.95);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
        margin-top: 0.75rem;
    }

    .main-nav .nav-list.active { display: flex; }

    .site-header.scrolled .header-pill {
        width: calc(100% - 3rem);
        padding: 0.65rem 1rem;
    }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
    background: var(--deep-moss);
    color: var(--warm-cream);
    padding: 2rem 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* The footer previously faked a white logo with `filter: brightness(0) invert(1)`,
   which flattens the terracotta and the moss into a single white. The proper
   cream variant is used instead, so no filter is needed. */

.footer-logo {
    color: var(--warm-cream);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
}

.footer-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding-left: 0;
    margin: 0;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--warm-cream);
    text-decoration: none;
    opacity: 0.9;
    font-size: 0.95rem;
    font-weight: 700;
    transition: color 0.25s ease, opacity 0.25s ease;
    font-family: var(--font-body);
}

.footer-links a:hover {
    opacity: 1;
    color: var(--terracotta);
}

.footer-copy {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.8;
    font-family: var(--font-body);
}

@media (max-width: 968px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 0.75rem;
    }
}