/* FontMaker.co - Header, nav, footer (design 1b "Ink": dark) */

/* ---------------- Header (dark) ---------------- */
.fmco-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--fmco-ink); color: var(--fmco-on-dark);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.fmco-header-inner {
    max-width: 1240px; margin-inline: auto;
    min-height: var(--fmco-header-h);
    padding: 16px 40px;
    display: flex; align-items: center; gap: var(--fmco-sp-lg);
}

/* Logo mark (inline SVG, recolored via color -> fill:currentColor) + wordmark */
.fmco-logo { display: inline-flex; align-items: center; gap: 10px; }
.fmco-logo-mark { width: 30px; height: 30px; flex: 0 0 auto; color: #fff; }
.fmco-logo-text { font-family: var(--fmco-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: #fff; }

/* Mono nav */
.fmco-nav { display: flex; align-items: center; gap: 28px; margin-left: var(--fmco-sp-xl);
    font-family: var(--fmco-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.fmco-nav-link { color: rgba(255,255,255,.6); transition: var(--fmco-transition); }
@media (hover: hover) { .fmco-nav-link:hover { color: #fff; } }
.fmco-nav-link.is-active { color: #fff; }

.fmco-header-actions { display: flex; align-items: center; gap: var(--fmco-sp-md); margin-left: auto; }

/* Language dropdown (scales to N languages) */
.fmco-lang { position: relative; }
.fmco-lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--fmco-mono); font-size: 12px; font-weight: 600; color: #fff;
    border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 9px; }
.fmco-lang > summary::-webkit-details-marker { display: none; }
.fmco-lang > summary::marker { content: ""; }
.fmco-lang-caret { display: inline-flex; opacity: .7; transition: transform .2s ease; }
.fmco-lang[open] .fmco-lang-caret { transform: rotate(180deg); }
.fmco-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 168px;
    background: #17171b; border: 1px solid rgba(255,255,255,.12); border-radius: var(--fmco-radius);
    padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.fmco-lang-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px;
    color: rgba(255,255,255,.72); font-size: 14px; }
.fmco-lang-menu a:hover { background: rgba(255,255,255,.07); color: #fff; }
.fmco-lang-menu a.is-active { color: var(--fmco-accent-light); }
.fmco-lang-code { flex: 0 0 auto; width: 20px; font-family: var(--fmco-mono); font-size: 11px; color: rgba(255,255,255,.4); }
.fmco-lang-menu a.is-active .fmco-lang-code { color: var(--fmco-accent-light); }
.fmco-lang-name { white-space: nowrap; }

/* Burger + mobile nav */
.fmco-burger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px;
    align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
.fmco-burger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: var(--fmco-transition); }
.fmco-mobile-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: var(--fmco-transition); z-index: 70; }
.fmco-mobile-nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 320px);
    background: var(--fmco-ink); color: #fff; border-left: 1px solid rgba(255,255,255,.1);
    padding: calc(var(--fmco-header-h) + 16px) var(--fmco-sp-lg) var(--fmco-sp-lg);
    display: flex; flex-direction: column; gap: 6px;
    transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; z-index: 80;
}
.fmco-mobile-link { padding: 12px; border-radius: var(--fmco-radius-sm); color: rgba(255,255,255,.8);
    font-family: var(--fmco-mono); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
@media (hover: hover) { .fmco-mobile-link:hover { background: rgba(255,255,255,.06); color: #fff; } }
.fmco-mobile-nav .fmco-btn { margin-top: var(--fmco-sp-md); }
body.menu-open .fmco-mobile-backdrop { opacity: 1; visibility: visible; }
body.menu-open .fmco-mobile-nav { transform: translateX(0); visibility: visible; transition: transform .25s ease, visibility 0s 0s; }

@media (max-width: 900px) {
    .fmco-nav { display: none; }
    .fmco-header-actions .fmco-btn-primary { display: none; }
    .fmco-burger { display: flex; }
    .fmco-header-inner { padding: 14px 20px; }
}

/* ---------------- Footer (dark) ---------------- */
.fmco-footer { background: var(--fmco-ink); color: #fff; padding: 56px 40px 36px; }
.fmco-footer-inner { max-width: var(--fmco-container); margin-inline: auto;
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.fmco-footer-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fmco-footer-logo .fmco-logo-mark { width: 26px; height: 26px; color: #fff; }
.fmco-footer-logo span { font-family: var(--fmco-display); font-weight: 700; font-size: 17px; }
.fmco-footer-tagline { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.55); max-width: 260px; }
.fmco-footer-col h4 { font-family: var(--fmco-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.5); margin-bottom: 14px; }
.fmco-footer-col a:not(.fmco-footer-logo) { display: block; padding: 5px 0; color: rgba(255,255,255,.75); font-size: 14px; }
@media (hover: hover) { .fmco-footer-col a:hover { color: #fff; } }
.fmco-footer-bottom { max-width: var(--fmco-container); margin: 36px auto 0; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: space-between; gap: var(--fmco-sp-md); flex-wrap: wrap;
    color: rgba(255,255,255,.5); font-size: 13px; font-family: var(--fmco-mono); }
.fmco-footer-lang { display: flex; gap: var(--fmco-sp-md); }
.fmco-footer-lang a { color: rgba(255,255,255,.5); }
.fmco-footer-lang a.is-active { color: #fff; }

@media (max-width: 760px) {
    .fmco-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--fmco-sp-xl); }
    .fmco-footer-brand { grid-column: 1 / -1; }
}