/* ============================================================
   THEME PACK 2 — "top"
   Full screen, no content card, one glass menu bar across the top.
   Loaded after css/style.css and scoped to html.theme-top, so the
   sidebar theme in style.css stays exactly as it is.

   The idea in one line: nothing on screen but the content and the
   bar you navigate with. No card, no panels, no boxes.
   ============================================================ */

html.theme-top {
    /* Bar geometry — everything below reads these, so the bar can be
       resized in one place and the content keeps clear of it. */
    --bar-h: 62px;           /* height of the glass bar itself */
    --bar-inset: 16px;       /* how far it floats off the screen edges */
    --gutter: 40px;          /* side gutter for content, full-screen but not edge-to-edge */
}

/* ===== The glass bar ===================================================== */

html.theme-top .topbar {
    position: fixed;
    top: var(--bar-inset);
    left: var(--bar-inset);
    right: var(--bar-inset);
    z-index: 1000;
    /* Arrives rather than appears. On a phone the bar is most of what is on
       screen at first paint, and cutting straight to it reads as a glitch. */
    animation: topbar-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes topbar-in {
    from { opacity: 0; transform: translateY(calc(-100% - var(--bar-inset))); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-top .topbar { animation: none; }
}

html.theme-top .topbar-glass {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--bar-h);
    padding: 0 12px 0 20px;
    border-radius: 18px;
    /* Liquid glass: the blur does the work, the 1px inner highlight along the
       top edge is what makes it read as a pane of glass rather than a tint. */
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 10px 30px rgba(0, 0, 0, 0.35);
}

html.theme-top .custom-logo-link {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 100%;
    padding: 12px 0;
}

html.theme-top .custom-logo {
    height: 100%;
    width: auto;
    display: block;
}

/* ===== The section menu, in the bar ===================================== */

html.theme-top .site-nav {
    flex: 1 1 auto;
    min-width: 0;
}

html.theme-top .site-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

html.theme-top .site-menu .menu-item > a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 11px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

html.theme-top .site-menu .menu-item > a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

html.theme-top .site-menu .menu-item.active > a {
    background: rgba(191, 215, 48, 0.16);
    color: var(--accent);
}

html.theme-top .site-menu .menu-icon svg {
    display: block;
    width: 15px;
    height: 15px;
}

/* The sidebar theme nests each section's pages inside the menu. Here they get
   their own strip under the bar, so the nested copy is not drawn at all. */
html.theme-top .site-menu .sub-menu {
    display: none;
}

/* ===== The submenu strip, under the bar ================================= */

html.theme-top .subbar {
    /* No box: the children are plain text sitting on the page, the way the
       sketch has them. Empty section, no strip, no reserved space. */
    padding: 0 22px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
}

html.theme-top .subbar.has-items {
    max-height: 200px;
    opacity: 1;
}

html.theme-top .sub-menu-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    list-style: none;
    margin: 0;
    padding: 14px 0 0;
}

html.theme-top .sub-menu-strip a {
    display: block;
    padding: 3px 0;
    text-decoration: none;
    color: var(--text-meta);
    font-size: 0.84rem;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

html.theme-top .sub-menu-strip a:hover { color: #fff; }
html.theme-top .sub-menu-strip .menu-item.active a { color: var(--accent); }

/* ===== Language switch — inside the bar, not floating over the page ====== */

html.theme-top .lang-switch {
    position: static;
    flex: 0 0 auto;
    padding-right: 8px;
}

html.theme-top .lang-switch button { color: var(--text-meta); }
html.theme-top .lang-switch button:hover { color: #fff; }

/* ===== Content: full screen, no card ==================================== */

html.theme-top .main-content {
    margin-left: 0;
    /* --header-h is the real measured height of the whole header — bar plus the
       submenu strip when a section has one — kept current by js/main.js. Never
       put a pixel number here: the bar wraps to two rows on a narrow screen and
       the strip opens and closes, so anything hard-coded goes stale. */
    padding: calc(var(--bar-inset) + var(--header-h, 62px) + 30px) var(--gutter) 40px;
}

html.theme-top .content-wrapper {
    --card-pad: 0px;          /* nothing to cancel: full-bleed is just the page */
    max-width: 100%;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* ===== Agency signature — a real footer, since there is no sidebar ======= */

html.theme-top .site-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 40px var(--gutter) 44px;
    color: var(--text-meta);
    font-size: 0.8rem;
}

html.theme-top .site-footer-logo {
    flex: 0 0 auto;
    width: 26px;
    color: rgba(255, 255, 255, 0.22);
}

html.theme-top .site-footer-logo svg { display: block; width: 100%; height: auto; }

html.theme-top .site-footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

html.theme-top .site-footer-contact a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

html.theme-top .site-footer-contact a:hover { color: #fff; }

/* ===== Narrow screens =====
   Same design, same menu, every entry reachable — the bar wraps to as many
   rows as it needs instead of hiding behind a hamburger. */

@media (max-width: 900px) {
    html.theme-top {
        --bar-h: auto;
        --bar-inset: 10px;
        --gutter: 20px;
    }

    html.theme-top .topbar-glass {
        flex-wrap: wrap;
        gap: 10px 16px;
        padding: 10px 14px;
        border-radius: 16px;
    }

    html.theme-top .custom-logo-link { height: 38px; padding: 0; }
    html.theme-top .lang-switch { margin-left: auto; }
    html.theme-top .site-nav { flex-basis: 100%; }

    html.theme-top .site-menu .menu-item > a {
        padding: 7px 11px;
        font-size: 0.74rem;
    }
}

/* css/style.css was written for the sidebar theme, whose mobile chrome is a bar
   the content is pushed below with `margin-top` and `padding: 10px !important`.
   Here the header is a measured, floating object and the content card does not
   exist, so those three have to be taken back — and only !important can take
   back !important. */
@media (max-width: 768px) {
    html.theme-top .main-content {
        margin-top: 0;
        padding: calc(var(--bar-inset) + var(--header-h, 62px) + 24px)
                 var(--gutter) 40px !important;
    }

    html.theme-top .content-wrapper {
        padding: 0 !important;
        max-width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-top .subbar { transition: none; }
}