/* GoPerk: shared header, footer and fonts for every page of the website. Colours are the app's (AppColors). */

@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("../fonts/Manrope-400.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("../fonts/Manrope-500.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("../fonts/Manrope-600.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("../fonts/Manrope-700.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("../fonts/Manrope-800.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexMono-600.woff2") format("woff2"); }

.gp-skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: #0B2D4A; color: #FFFFFF; padding: 10px 16px; border-radius: 12px; font: 700 15px "Manrope", system-ui, sans-serif; }
.gp-skip:focus { top: 12px; }
.gp-wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }

.gp-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgb(247 252 249 / 90%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #D7E6DE; font-family: "Manrope", "Segoe UI", system-ui, sans-serif; }
.gp-nav .gp-wrap { display: flex; align-items: center; gap: 20px; padding-block: 10px; }
.gp-brand img { display: block; height: 40px; width: auto; }
.gp-nav nav { margin-left: auto; }
.gp-links { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-weight: 700; font-size: 15px; }
.gp-links a { color: #0B2D4A; text-decoration: none; }
.gp-links a:hover { color: #008060; }
.gp-btn { display: inline-flex; align-items: center; font: 800 16px/1 "Manrope", system-ui, sans-serif; text-decoration: none; border-radius: 999px; padding: 14px 24px; background: #FFC629; color: #0B2D4A; white-space: nowrap; transition: transform .15s ease; }
.gp-btn:hover { transform: translateY(-2px); }
.gp-meter { display: flex; align-items: center; gap: 10px; font: 600 13px "IBM Plex Mono", ui-monospace, monospace; background: #0B2D4A; color: #FFFFFF; padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gp-meter b { color: #FFC629; font-weight: 600; }
.gp-meter .dot { width: 8px; height: 8px; border-radius: 50%; background: #00B386; box-shadow: 0 0 0 4px rgb(0 179 134 / 25%); }
.gp-nav a:focus-visible, .gp-foot a:focus-visible { outline: 3px solid #FFC629; outline-offset: 3px; border-radius: 6px; }

.gp-foot { background: #071D31; color: #9FB3C4; font: 400 15px/1.6 "Manrope", "Segoe UI", system-ui, sans-serif; }
.gp-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-block: 48px 32px; }
.gp-foot img { height: 40px; width: auto; }
.gp-foot p { margin: 12px 0 0; max-width: 36ch; }
.gp-foot .gp-tagline { color: #FFC629; font-weight: 800; }
.gp-foot h3 { margin: 0 0 12px; color: #FFFFFF; font-size: 15px; font-weight: 800; }
.gp-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gp-foot a { color: #DCE6EE; text-decoration: none; }
.gp-foot a:hover { color: #FFC629; }
.gp-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px 28px; border-top: 1px solid rgb(255 255 255 / 10%); font-size: 13px; }

@media (max-width: 960px) {
  .gp-links { display: none; }
  .gp-nav nav { display: none; }
  .gp-meter, .gp-nav:not(.has-meter) .gp-btn { margin-left: auto; }
  .gp-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .gp-nav.has-meter .gp-btn { display: none; }
  .gp-meter { font-size: 12px; padding: 7px 12px; }
  .gp-meter .label { display: none; }
  .gp-btn { padding: 12px 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .gp-btn { transition: none; } }