/* ==========================================================================
   Site navigation — the index header, on every page.

   The index used to build this out of Tailwind utility classes, which only
   exist on the index. Moved to real classes here so the blog, the legal pages,
   support and the 404 render the identical header without loading Tailwind.
   The declarations are the Tailwind ones, one for one, so the index looks
   exactly as it did.
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (min-width: 1024px) {
    .site-header { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* Every page that is not the index puts the content in normal flow, so it
   needs to clear the fixed header: 40px logo + 2 × 1rem padding. */
.site-has-fixed-nav { padding-top: 72px; }

.site-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.site-brand img { height: 40px; width: auto; display: block; }

.site-brand-name {
    font-family: 'Noto Serif', serif;
    font-size: 1.125rem;
    line-height: 1.2;
    font-weight: 700;
    color: #d4af37;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Hidden below 1024px, exactly as on the index. */
.site-nav { display: none; align-items: center; gap: 1.5rem; }

@media (min-width: 1024px) { .site-nav { display: flex; } }
@media (min-width: 1280px) { .site-nav { gap: 2rem; } }

.site-nav-link {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a1a1aa;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.nav-accent-gold:hover   { color: #d4af37; }
.nav-accent-green:hover  { color: #22c55e; }
.nav-accent-blue:hover   { color: #009dff; }
.nav-accent-purple:hover { color: #a855f7; }

.site-nav-link.active { color: #d4af37; }

/* ------------------------------ The AI mark ------------------------------ */

/* Two characters riding the label they belong to. It started as gradient text
   and read as a smudge at 8px, so it is a filled chip now: the Gemini gradient
   runs through it and the glow breathes, because this is the one place in the
   menu that has to be noticed before anything is clicked. */
.nav-ai {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.22em 0.42em;
    border-radius: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    vertical-align: 0.3em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    /* Cut at 300% so sliding the position runs the gradient through the chip
       rather than repainting it. */
    background-image: linear-gradient(100deg, #4285F4, #9B72CB, #D96570, #9B72CB, #4285F4);
    background-size: 300% 100%;
    animation: nav-ai-run 5s linear infinite, nav-ai-glow 2.8s ease-in-out infinite;
}

.site-nav-link:hover .nav-ai,
.site-drawer-link:hover .nav-ai {
    box-shadow: 0 0 16px rgba(155, 114, 203, 0.95);
}

@keyframes nav-ai-run  { to { background-position: -300% 0; } }
@keyframes nav-ai-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(155, 114, 203, 0.45); }
    50%      { box-shadow: 0 0 13px rgba(155, 114, 203, 0.9); }
}

/* The drawer sets its entries in 12px, where the chip needs less lift. */
.site-drawer-link .nav-ai {
    font-size: 0.68em;
    margin-left: 0.55em;
    vertical-align: 0.22em;
}

/* Decoration, not information: the mark stays, the motion goes. */
@media (prefers-reduced-motion: reduce) {
    .nav-ai { animation: none; }
}

.site-header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Flags follow the index: hidden on phones, where the row has no space. */
.site-header-actions .lang-flags { display: none; }

@media (min-width: 768px) {
    .site-header-actions .lang-flags { display: flex; gap: 8px; align-items: center; }
}

.site-header .site-enter {
    /* The index got these from Tailwind utilities that only load there;
       stated here so the button is identical on every page. */
    display: inline-block;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    padding: 0.5rem 1.25rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 2px;
    white-space: nowrap;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Site footer — same markup and same look as the index's.
   ========================================================================== */

.site-footer {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    color: #71717a;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* The index does not scroll, so there the bar is pinned. */
.site-footer-fixed { position: fixed; bottom: 0; left: 0; z-index: 50; }

.site-footer-brand { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.site-footer-brand img { height: 1.25rem; width: auto; display: block; }

/* Eight entries now that the legal pages live here, so the row wraps instead
   of pushing the community links off the edge. */
.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem 1.25rem;
}

.site-footer-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer-links a:hover { color: #d4af37; }

.site-footer-sep {
    width: 1px;
    height: 10px;
    background: rgba(255, 255, 255, 0.18);
}

/* On a phone the two halves stop competing for the same line. */
@media (max-width: 720px) {
    .site-footer { flex-direction: column; gap: 0.6rem; text-align: center; }
    .site-footer-links { justify-content: center; }
    .site-footer-sep { display: none; }
}

/* ==========================================================================
   Phone layout — everything below is scoped to max-width media queries, so
   the desktop header, drawer-less, is exactly what it was.
   ========================================================================== */

/* The burger only exists where the horizontal nav is hidden. */
.site-burger { display: none; }

@media (max-width: 1023px) {
    .site-burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 38px;
        height: 34px;
        padding: 0 7px;
        background: rgba(0, 0, 0, 0.35);
        border: 1px solid rgba(212, 175, 55, 0.45);
        border-radius: 2px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .site-burger span {
        display: block;
        height: 2px;
        width: 100%;
        background: #d4af37;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .site-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .site-burger.open span:nth-child(2) { opacity: 0; }
    .site-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------------------------------- Drawer -------------------------------- */

.site-drawer { position: fixed; inset: 0; z-index: 120; }

.site-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.site-drawer.open .site-drawer-backdrop { opacity: 1; }

.site-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.9rem 1.05rem 1.4rem;
    background: linear-gradient(160deg, rgba(18, 18, 24, 0.98) 0%, rgba(6, 6, 10, 0.98) 100%);
    border-left: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.7);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-drawer.open .site-drawer-panel { transform: translateX(0); }

.site-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.site-drawer-title {
    font-family: 'Noto Serif', serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d4af37;
}

.site-drawer-close {
    background: transparent;
    border: 0;
    color: #d1d1d6;
    font-size: 1.7rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}

.site-drawer-close:hover { color: #fff; }

.site-drawer-nav { display: flex; flex-direction: column; }

.site-drawer-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #d1d1d6;
    text-decoration: none;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.75rem 0.15rem;
    cursor: pointer;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.site-drawer-link:hover,
.site-drawer-link:focus-visible { padding-left: 0.5rem; outline: none; }

.site-drawer-link.active { color: #d4af37; }

.site-drawer-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 0.2rem 0;
}

.site-drawer-flags a,
.site-drawer-flags span { font-size: 22px; }

.site-drawer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    color: #71717a;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.site-drawer-legal a { color: inherit; text-decoration: none; }
.site-drawer-legal a:hover { color: #d4af37; }

.site-drawer-enter {
    margin-top: auto;
    display: block;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 2px;
}

/* The page behind must not scroll while the drawer is over it. */
body.drawer-open { overflow: hidden; }

/* ------------------------- Header on a small phone ------------------------ */

@media (max-width: 520px) {
    .site-header { padding: 0.6rem 0.85rem; gap: 0.5rem; }
    .site-brand { gap: 0.5rem; }
    .site-brand img { height: 30px; }
    .site-brand-name { font-size: 0.9rem; letter-spacing: 0.06em; }
    .site-header-actions { gap: 0.5rem; }
    .site-header .site-enter { padding: 0.45rem 0.7rem; font-size: 9px; }
    .site-has-fixed-nav { padding-top: 56px; }
}

@media (max-width: 340px) {
    /* At this width the button and the burger cannot share the row with a
       word mark; the logo alone still identifies the site. */
    .site-brand-name { display: none; }
}

/* ------------------------------ Pinned footer ----------------------------- */

/* Only the index pins the bar, and there a wrapped two-row footer eats a third
   of a phone screen. The links stay in the DOM and live in the drawer. */
@media (max-width: 720px) {
    .site-footer-fixed {
        flex-direction: row;
        justify-content: center;
        padding: 0.5rem 0.75rem;
    }

    .site-footer-fixed .site-footer-links { display: none; }
}

/* --------------------- Header between 1024 and 1366px --------------------- */

/* The nav appears at 1024px, and there are eleven entries in it. In Greek —
   the widest label set — they plus the flags and the button need ~1240px,
   so the row ran off the side of a landscape tablet. Each tier gives back
   what that width can spare; from 1366px up the desktop spacing stands. */
@media (min-width: 1200px) and (max-width: 1365px) {
    .site-header { padding-left: 1.5rem; padding-right: 1.5rem; }
    .site-nav { gap: 0.9rem; }
    .site-header-actions { gap: 0.6rem; }
    .site-header-actions .lang-flags { gap: 5px; }
    .site-header-actions .lang-flags a { font-size: 16px; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .site-header { padding-left: 0.85rem; padding-right: 0.85rem; gap: 0.6rem; }
    .site-nav { gap: 0.6rem; }
    .site-nav-link { letter-spacing: 0.04em; }
    .site-header-actions { gap: 0.45rem; }
    .site-header-actions .lang-flags { gap: 4px; }
    .site-header-actions .lang-flags a { font-size: 14px; }
    .site-brand { gap: 0.5rem; }

    /* The wordmark is ~110px the nav needs more than the site does: the
       crest alone still identifies the page, and it is still the link home.
       The same trade is already made below 340px. */
    .site-brand-name { display: none; }
}