/* Site menu and footer for get-social.html only (the other pages use style.css). Copied from style.css so this page, which has its own inline styles, shows the same top menu and footer. */
@font-face{font-family:"Oswald";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/oswald-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/oswald-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/oswald-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/oswald-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/barlow-latin-400-italic.woff2") format("woff2")}
.site-header, .site-footer { --line: #2c2a30; --text: #eeeae4; --muted: #a39e98; --red: #c8202f; --red-text: #ec4b57; --display: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --body: "Barlow", "Helvetica Neue", Arial, sans-serif; --header-h: 72px; }
.site-header a, .site-footer a { color: inherit; }
.wrap { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 20px; }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  background: rgba(15, 14, 16, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transform: translateZ(0);   /* own layer, so phone browsers keep it on screen over the video cards and widgets */
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo {
  font-family: var(--display); font-weight: 700; font-size: 24px;
  letter-spacing: 0.08em; text-decoration: none; white-space: nowrap;
}
.logo span { color: var(--red); }
.nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.nav a {
  font-family: var(--display); font-size: 15px; letter-spacing: .1em; white-space: nowrap;
  text-decoration: none; color: var(--muted); padding-block: 6px;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); border-color: var(--red); }
.nav a.nav-ext { color: var(--red-text); }
.nav a.nav-ext:hover { color: #fff; border-color: var(--red); }
.menu-toggle {
  display: none; margin-left: auto; position: relative; width: 44px; height: 40px;
  background: none; border: 1px solid var(--line); cursor: pointer; padding: 0;
}
.menu-toggle span {
  position: absolute; left: 11px; right: 11px; height: 2px; background: var(--text);
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.menu-toggle span:nth-child(1) { top: 12px; }
.menu-toggle span:nth-child(2) { top: 19px; }
.menu-toggle span:nth-child(3) { top: 26px; background: var(--red); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); background: var(--text); }

/* phones and tablets: the menu drops down under the header */
@media (max-width: 1100px) {
  .menu-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(15, 14, 16, .9);   /* 10% see-through */ border-bottom: 1px solid var(--line); padding: 8px 20px 20px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding-block: 14px; border-bottom: 1px solid var(--line); font-size: 17px; letter-spacing: .14em; }
  .nav a[aria-current="page"] { color: var(--red); }
  /* check mark after the text: on the page you are on, and on the item you just tapped */
  .nav a::after {
    content: ""; display: none; width: 18px; height: 18px; margin-left: 10px; vertical-align: -3px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .nav a[aria-current="page"]::after, .nav a.picked::after, .nav a:active::after { display: inline-block; }
  .nav a.picked, .nav a:active { color: var(--red-text); }
}

.fsoc { display: flex; flex-wrap: wrap; gap: 12px; }
.fsoc a {
  --c: #fff; position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: rgba(236, 226, 229, .7);
  background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .28);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), color .2s, border-color .2s, background .2s;
}
.fsoc a::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 14px var(--c), 0 0 34px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 30%, transparent);
  opacity: 0; transition: opacity .25s;
}
.fsoc a:hover, .fsoc a:focus-visible {
  color: var(--c); border-color: var(--c); outline: none;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  transform: translateY(-5px) scale(1.12);
}
.fsoc a:hover::after, .fsoc a:focus-visible::after { opacity: 1; animation: fsoc-glow 1.8s ease-in-out infinite; }
.fsoc a:active { transform: scale(.94); }
.fsoc svg { width: 24px; height: 24px; }
@keyframes fsoc-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* small outline circles (footer) */
.fsoc.sm { gap: 8px; }
.fsoc.sm a {
  width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(236, 226, 229, .7);
}
.fsoc.sm svg { width: 16px; height: 16px; }
.fsoc.sm svg[style] { width: 19px !important; height: 14px !important; }
.fsoc.sm a:hover, .fsoc.sm a:focus-visible {
  color: var(--c); border-color: var(--c); transform: translateY(-3px) scale(1.08);
}

.site-footer { border-top: 1px solid var(--line); }
.site-footer.no-line { border-top: 0; }   /* Videos, Moto Club and Contact: no dividing line between the page and the footer */
.site-footer .wrap {
  display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  padding-block: 24px; text-align: center; font-size: 14px; color: var(--muted);
}
.site-footer a { color: var(--text); }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.site-footer .foot-nav a {
  font: 500 13px var(--display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-text); text-decoration: none; transition: color .2s, text-shadow .2s;
}
.site-footer .foot-nav a:hover { color: #ff3b4e; text-shadow: 0 0 10px rgba(255, 59, 78, .5); }
/* the page you are on shows in gray */
.site-footer .foot-nav a[aria-current="page"], .site-footer .foot-nav a[aria-current="page"]:hover { color: var(--muted); text-shadow: none; cursor: default; }
.fsoc-row { justify-content: center; }
/* bigger tap targets for footer links on phones */
@media (max-width: 560px) {
  .site-footer .foot-nav { gap: 2px 18px; }
  .site-footer .foot-nav a { display: inline-block; padding-block: 8px; }
}

/* phone menu icons */
/* ---------- Phone drop-down menu: small animated line icons (they move only while the menu is open) ---------- */
.nav .ic { display: none; }
@media (max-width: 1100px) {
  .nav { align-items: stretch; }   /* items run the full width, text starts at the left with a big indent */
  .nav a { display: flex; align-items: center; justify-content: flex-start; padding-left: 100px; }
  .nav .ic { display: block; width: 24px; height: 24px; flex: none; margin-right: 14px; overflow: visible; color: var(--red-text); }
  .nav .ic .a { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav .ic .p { fill: currentColor; }
  .nav.open .i-intro .a { transform-origin: 12px 20px; animation: mi-house 3s ease-in-out infinite; }
  .nav.open .i-about circle { transform-origin: 12px 10px; animation: mi-nod 3s ease-in-out infinite; }
  .nav.open .i-videos .p { transform-origin: 13px 12px; animation: mi-play 1.6s ease-in-out infinite; }
  .nav .i-moto .w1, .nav .i-moto .w2 { stroke-dasharray: 4 2.2; transform-box: fill-box; transform-origin: center; }
  .nav.open .i-moto .w1, .nav.open .i-moto .w2 { animation: mi-spin 1.6s linear infinite; }
  .nav.open .i-drone { animation: mi-hover 2.4s ease-in-out infinite; }
  .nav .i-drone .rot { transform-box: fill-box; transform-origin: center; }
  .nav.open .i-drone .rot { animation: mi-spin .5s linear infinite; }
  .nav .i-contact .flap { transform-box: fill-box; transform-origin: 50% 0; }
  .nav.open .i-contact .flap { animation: mi-flap 3s ease-in-out infinite; }
  .nav .i-privacy .shackle { transform-box: fill-box; transform-origin: 100% 100%; }
  .nav.open .i-privacy .shackle { animation: mi-lock 3.2s ease-in-out infinite; }
  .nav .i-social .heart { transform-box: fill-box; transform-origin: center; }
  .nav.open .i-social .heart { animation: mi-beat 1.3s ease-in-out infinite; }
}
@keyframes mi-house { 0%,70%,100% { transform: scale(1); } 80% { transform: scale(1.12); } 90% { transform: scale(.97); } }
@keyframes mi-nod { 0%,70%,100% { transform: translateY(0); } 80% { transform: translateY(-1.5px); } 90% { transform: translateY(0); } }
@keyframes mi-play { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes mi-spin { to { transform: rotate(360deg); } }
@keyframes mi-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes mi-flap { 0%,70%,100% { transform: scaleY(1); } 80% { transform: scaleY(-.4) translateY(2px); } 90% { transform: scaleY(1); } }
@keyframes mi-lock { 0%,60%,100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-3px) rotate(-18deg); } 85% { transform: translateY(0) rotate(0); } }
@keyframes mi-beat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .nav .ic, .nav .ic * { animation: none !important; } }

/* Content protection: no text selection or phone long-press save menu, except in form fields and on the Moto Club download logos */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable], .club-logo, .club-logo * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }