/* Guest header + footer (Pages/Shared/_LayoutGuest.cshtml) — Figma "SimRacingHub — шаблоны
   соцсетей": Home 1920 / 1440 / Tablet 768 / Mobile 375. Loaded only by the guest layout;
   the signed-in header (.app-topbar in theme.css) is untouched.

   The header is cream on the landing page (it sits on the cream hero) and dark everywhere
   else; the footer is black on every page. The landing page is recognised by body:has(.home-v2),
   which keeps working when the header nav swaps #mainContent without a reload. */

@font-face {
    font-family: "Radiotechnika";
    src: url("../fonts/Radiotechnika.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body.guest-shell {
    --g-cream: #efeeeb;
    --g-ink: #242424;
    --g-hairline: #3c3d43;
    --g-orange: #ff8a4c;
    --g-gradient: linear-gradient(138deg, #ff5800 26.9%, #ff0011 100%);
    --g-display: "Radiotechnika", "Arial Black", Arial, sans-serif;
    --g-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;
    --gh-height: 64px;
}

/* ---------- header ---------- */

.gh {
    position: relative;
    z-index: 50;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--gh-height);
    padding: 0 20px;
    background: var(--color-background);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--g-mono);
}

body:has(.home-v2) .gh {
    background: var(--g-cream);
    color: var(--g-ink);
    border-bottom-color: transparent;
}

.gh-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.gh-logo:hover { color: inherit; text-decoration: none; }

.gh-logo img { width: 16px; height: 16px; }

.gh-logo span {
    font-family: var(--g-display);
    font-size: 14px;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gh-tabs {
    display: flex;
    align-items: center;
    gap: 64px;
}

.gh-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.gh-tab:hover { color: #fd5e37; text-decoration: none; }

.gh-tab-name { padding-bottom: 2px; border-bottom: 1px solid transparent; }
.gh-tab.active .gh-tab-name { border-bottom-color: currentColor; }

.gh-tab-num {
    font-family: Arial, sans-serif;
    font-size: 7px;
    color: #a1a1a1;
}

.gh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-border-strong);
    color: inherit;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1px;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease;
}

body:has(.home-v2) .gh-btn { border-color: rgba(0, 0, 0, 0.2); }

.gh-btn:hover { color: #fd5e37; border-color: #fd5e37; text-decoration: none; }

.gh-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.gh-menu {
    position: fixed;
    inset: var(--gh-height) 0 auto 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    padding: 8px 20px 24px;
    background: var(--color-background);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--g-mono);
}

body:has(.home-v2) .gh-menu {
    background: var(--g-cream);
    color: var(--g-ink);
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

.gh-menu.open { display: flex; }

.gh-menu a {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

body:has(.home-v2) .gh-menu a { border-bottom-color: rgba(0, 0, 0, 0.12); }

.gh-menu a:hover { color: #fd5e37; }

.gh-menu .gh-menu-cta {
    margin-top: 16px;
    padding: 13px 0;
    border: 0;
    background: var(--g-gradient);
    color: var(--g-cream);
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.1px;
}

.gh-menu .gh-menu-cta:hover { color: var(--g-cream); filter: brightness(1.08); }

@media (max-width: 1023px) {
    body.guest-shell { --gh-height: 61px; }
    .gh { padding: 0 24px; }
    .gh-tabs, .gh-btn { display: none; }
    .gh-toggle { display: inline-flex; }
}

@media (min-width: 1024px) {
    .gh-menu { display: none !important; }
}

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

.gf {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 48px -40px -32px;
    padding: 40px 20px 24px;
    background: #000;
    color: #9d9d9d;
    font-family: var(--g-mono);
    font-size: 14px;
    line-height: 1.4;
}

/* The landing page ends flush against the footer. */
body:has(.home-v2) .gf { margin-top: 0; }

.gf a { color: inherit; text-decoration: none; }
.gf a:hover { color: #fff; text-decoration: none; }

.gf-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 42px;
    border-bottom: 1px solid var(--g-hairline);
}

.gf-brand {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.gf-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--g-cream);
}

.gf-logo:hover { color: var(--g-cream); }

.gf-logo img { width: 30px; height: 30px; }

.gf-logo span {
    font-family: var(--g-display);
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.gf-tagline { max-width: 491px; margin: 0; }

.gf-social {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 28px;
}

.gf-social p { margin: 0; text-align: right; }

.gf-social-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }

.gf-social-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 24px;
    border: 1px solid var(--g-hairline);
    color: var(--g-cream);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1px;
    transition: border-color 150ms ease, color 150ms ease;
}

.gf-social-buttons a:hover { color: #fd5e37; border-color: #fd5e37; }

.gf-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
}

.gf-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
}

.gf-dot {
    color: var(--g-orange);
    font-weight: 500;
}

@media (max-width: 900px) {
    .gf { margin: 32px -20px -20px; padding: 40px 20px 24px; }
}

@media (max-width: 767px) {
    .gf-top { flex-direction: column; gap: 40px; padding-bottom: 40px; }
    .gf-social { align-items: stretch; gap: 20px; }
    .gf-social p { text-align: left; }
    .gf-social-buttons { flex-direction: column; justify-content: flex-start; gap: 12px; }
    .gf-bottom { flex-direction: column; gap: 20px; }
    .gf-legal { flex-direction: column; align-items: flex-start; gap: 20px; }
    .gf-dot { display: none; }
    .gf-copy { order: 2; }
}

/* ---------- large screens ----------
   The frames stop at 1920px. Above that the header, the landing page and the footer scale up as
   a whole (CSS zoom) instead of stretching: the text grows to 125% from 2200px, 150% from 2560px
   (QHD, ultrawide) and 200% from 3840px (4K at 100% scaling), and the layout is computed for the
   smaller effective width, so the hero, the table and the rows keep the proportions of the
   frames. --gz is read by the elements that zoom; their own negative margins divide by it. */
body.guest-shell { --gz: 1; }

@media (min-width: 2200px) { body.guest-shell { --gz: 1.25; } }
@media (min-width: 2560px) { body.guest-shell { --gz: 1.5; } }
@media (min-width: 3840px) { body.guest-shell { --gz: 2; } }

.gh,
.gf { zoom: var(--gz); }

@media (min-width: 2200px) {
    .gf { margin: calc(48px / var(--gz)) calc(-40px / var(--gz)) calc(-32px / var(--gz)); }
    body:has(.home-v2) .gf { margin-top: 0; }
}