/*
##############
# Background #
##############
*/

body {
  background-color: black;
  height: fit-content;
  min-height: 100%;
}

.footer-links a{
 text-wrap: wrap;
}
.page-content {
  background-image: url(/img/verify/goldenbackground-mobile.jpg);
}

@media (min-width: 768px) {
  .page-content {
    background-image: url(/img/verify/goldenbackground.jpg);
  }
}

.verify-backdrop-filter {
  backdrop-filter: brightness(40%);
}

@media (min-width: 768px) {
  .verify-backdrop-filter {
    backdrop-filter: none;
  }
}


/*
###########
## Fonts ##
###########
*/

/* RecklessNeue */

@font-face {
  font-family: "RecklessNeue";
  src: url("../fonts/RecklessNeue-MediumItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* SharpGroteskVF */

@font-face {
  font-family: "SharpGroteskVF";
  src: url("../fonts/SharpGrotesk-VF.woff2") format("woff2");
  font-weight: 100 700;
  font-style: italic;             
  font-variation-settings: "slnt" -10;
  font-display: swap;
}

/* SharpGrotesk */

@font-face {
  font-family: "SharpGrotesk";
  src: url("../fonts/SharpGroteskWeb-Bold12.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SharpGrotesk";
  src: url("../fonts/SharpGroteskWeb-BoldItalic12.woff") format("woff"),
    url("../fonts/SharpGroteskWeb-BoldItalic12.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SharpGrotesk";
  src: url("../fonts/SharpGroteskWeb-Medium15.woff") format("woff"),
    url("../fonts/SharpGroteskWeb-Medium15.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SharpGrotesk";
  src: url("../fonts/SharpGroteskWeb-MediumItalic15.woff") format("woff"),
    url("../fonts/SharpGroteskWeb-MediumItalic15.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Barlow */

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-SemiBold.woff") format("woff"),
    url("../fonts//Barlow-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/* Roboto */

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Roboto-Condensed-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

/*
##############
# Typography #
##############
*/

/*
NOTE: I don't know of a way to set custom media queries or variables without adding a CSS
framework or using the flask jinja templating. Both of those seem a little overkill when
we aren't the owners of the repository, so we're just using the media queries directly.

The ONLY media query we use is: '(min-width: 768px)'
Or 'not (min-width: 768px)'
And this acts as the breakpoint for mobile/desktop design.
*/

:root {
  --n26-font-family-1: SharpGrotesk, sans-serif;
  --n26-font-family-2: RecklessNeue, serif;
}

.n26-h1 {
  font-size: 72px;
  line-height: 72px;
  font-weight: 700;
  font-family: var(--n26-font-family-1);
  font-style: italic;
}

.n26-h2 {
  font-size: 58px;
  line-height: 54px;
  font-weight: 700;
  font-family: var(--n26-font-family-1);
  font-style: italic;
}

.n26-h3 {
  font-size: 42px;
  line-height: 48px;
  font-weight: 700;
  font-family: var(--n26-font-family-1);
}

.n26-h4 {
  font-size: 34px;
  line-height: 40px;
  font-weight: 700;
  font-family: var(--n26-font-family-1);
}

.n26-h5 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  font-family: var(--n26-font-family-1);
}

.n26-h6 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
  font-family: var(--n26-font-family-2);
}

.n26-body1 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  font-family: var(--n26-font-family-1);
}

.n26-body2 {
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  font-family: var(--n26-font-family-1);
}

.n26-body3 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  font-family: var(--n26-font-family-1);
}

.n26-h1,
.n26-h2,
.n26-h3,
.n26-h4,
.n26-h5,
.n26-h6,
.n26-body1,
.n26-body2,
.n26-body3 {
  color: white;
}

@media (min-width: 768px) {
  .n26-h1 {
    font-size: 110px;
    line-height: 110px;
  }

  .n26-h2 {
    font-size: 72px;
    line-height: 72px;
  }

  .n26-h3 {
    font-size: 54px;
    line-height: 54px;
    font-style: normal;
  }

  .n26-h4 {
    font-size: 42px;
    line-height: 42px;
  }

  .n26-h5 {
    font-size: 35px;
    line-height: 35px;
  }

  .n26-body1 {
    font-size: 28px;
    line-height: 32px;
  }

  .n26-body2 {
    font-size: 38px;
    line-height: 42px;
  }
}

/*
##################
# Common Spacing #
##################

These values are from the NBA 2k26 figma, they link to the "Tokens" collection here:
https://www.figma.com/design/BgguH07kH8Ze6fC4kxcuYj/Beacon-Components?node-id=104-2&p=f&vars=1&m=dev
*/

:root {
  --n26-spacing--xxs: 4px;
  --n26-spacing--xs: 8px;
  --n26-spacing--s: 16px;
  --n26-spacing--m: 24px;
  --n26-spacing--l: 32px;
  --n26-spacing--xl: 48px;
  --n26-spacing--xxl: 80px;

  @media (min-width: 768px) {
    --n26-spacing--xxs: 5px;
    --n26-spacing--xs: 10px;
    --n26-spacing--s: 20px;
    --n26-spacing--m: 30px;
    --n26-spacing--l: 40px;
    --n26-spacing--xl: 60px;
    --n26-spacing--xxl: 120px;
  }
}

/*
#################
# Common Colors #
#################
*/

:root {
  --n26-color--white: #ffffff;
  --n26-color--off-white: #e5e5e5;
  --n26-color--black: #000000;
  --n26-color--gray: #666666;
  --n26-color--nav-top-gray: #333333;
  --n26-color--red: #fa0000;
  --n26-color--gold: #b5975b;
  --n26-color--silver: #d8d8d8;
  --n26-color--dark-gray: #111111;
}

/*
#######
# CTA #
#######
*/

.n26-btn-container {
  padding-top: 32px;
}

.n26-btn {
  display: flex;
  justify-self: center;
  padding: 10px 40px;
  border-radius: 70px;
  gap: 28px;
  font-family: var(--n26-font-family-1);
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.n26-btn-red {
  background-color: var(--n26-color--red);
  border: 2.8px solid var(--n26-color--red);
  color: var(--n26-color--white);
}
.n26-btn-red:hover {
  background-color: var(--n26-color--white);
  border: 2.8px solid var(--n26-color--white);
  color: var(--n26-color--red);
}

.n26-btn-gold {
  background-color: var(--n26-color--gold);
  border: 2.8px solid var(--n26-color--white);
  color: var(--n26-color--white);
}
.n26-btn-gold:hover {
  background-color: var(--n26-color--white);
  border: 2.8px solid var(--n26-color--gold);
  color: var(--n26-color--gold);
}

.n26-btn-red:disabled,
.n26-btn-red[aria-disabled="true"],
.n26-btn-gold:disabled,
.n26-btn-gold[aria-disabled="true"] {
  background-color: var(--n26-color--silver);
  border: 2.8px solid var(--n26-color--silver);
  color: var(--n26-color--white);
  cursor: not-allowed;
  pointer-events: none;
}

@media (min-width: 768px) {
  .n26-btn {
    font-size: 34px;
    line-height: 40px;
    padding: 14px 56px;
  }
}

/*
#####################################
# "*Why" description on verify pages #
#####################################
*/

.verify-why-description {
  max-width: 1000px;
  text-align: justify;
  color: var(--n26-color--gold);
  padding: var(--n26-spacing--m) var(--n26-spacing--s);
}