/* =========================================================
   TRADEVEST EXAMS — FINAL BASE CSS
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{

  /* =====================================================
     BRAND COLORS
  ===================================================== */

  --primary:#2563eb;
  --primary-dark:#1d4ed8;

  /* =====================================================
     BACKGROUNDS
  ===================================================== */

  --bg:#f6f8fc;
  --white:#ffffff;

  /* =====================================================
     TEXT COLORS
  ===================================================== */

  --text:#0f172a;
  --muted:#64748b;

  /* =====================================================
     BORDER
  ===================================================== */

  --border:#e5e7eb;

  /* =====================================================
     SHADOWS
  ===================================================== */

  --shadow-sm:
    0 4px 12px rgba(15,23,42,.04);

  --shadow-md:
    0 10px 30px rgba(15,23,42,.08);

  --shadow-lg:
    0 18px 50px rgba(15,23,42,.12);

  /* =====================================================
     BORDER RADIUS
  ===================================================== */

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;

  /* =====================================================
     TRANSITIONS
  ===================================================== */

  --transition:
    all .25s ease;

}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{
  margin:0;
  padding:0;

  box-sizing:border-box;
}

/* =========================================================
   HTML
========================================================= */

html{
  scroll-behavior:smooth;

  overflow-x:hidden;

  -webkit-text-size-adjust:100%;
}

/* =========================================================
   BODY
========================================================= */

body{
  font-family:'Inter',sans-serif;

  background:
    radial-gradient(
      circle at top left,
      #eef4ff,
      transparent 40%
    ),
    var(--bg);

  color:var(--text);

  line-height:1.6;

  overflow-x:hidden;

  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* =====================================================
     FIXED HEADER SPACING
  ===================================================== */

  padding-top:74px;
}

/* =========================================================
   EXAM PAGE FIX
========================================================= */

.tv-exam-page{
  padding-top:0 !important;
}

/* =========================================================
   SITE WRAPPER
========================================================= */

.site-wrapper{
  width:100%;

  overflow:hidden;
}

/* =========================================================
   MEDIA ELEMENTS
========================================================= */

img,
picture,
video,
canvas,
svg{
  display:block;

  max-width:100%;
  height:auto;
}

/* =========================================================
   LINKS
========================================================= */

a{
  color:inherit;

  text-decoration:none;

  transition:var(--transition);
}

/* =========================================================
   BUTTON RESET
========================================================= */

button{
  border:none;

  background:none;

  cursor:pointer;

  font:inherit;
}

/* =========================================================
   FORM ELEMENTS
========================================================= */

input,
select,
textarea,
button{
  font:inherit;
}

/* =========================================================
   PREVENT IOS ZOOM
========================================================= */

input,
select,
textarea{
  font-size:16px;
}

/* =========================================================
   INPUT PLACEHOLDER
========================================================= */

::placeholder{
  color:#94a3b8;
}

/* =========================================================
   LIST RESET
========================================================= */

ul,
ol{
  list-style:none;
}

/* =========================================================
   CONTAINER
========================================================= */

.container{
  width:100%;
  max-width:1200px;

  margin:0 auto;

  padding-left:20px;
  padding-right:20px;
}

/* =========================================================
   SECTION BASE
========================================================= */

.section{
  position:relative;

  padding:60px 0;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--primary);

  outline-offset:2px;
}

/* =========================================================
   TEXT SELECTION
========================================================= */

::selection{
  background:#dbeafe;

  color:#0f172a;
}

/* =========================================================
   GLOBAL OVERFLOW FIX
========================================================= */

section,
main,
header,
footer{
  max-width:100%;
}

/* =========================================================
   STICKY HEADER SUPPORT
========================================================= */

body,
.site,
.site-content,
main{
  overflow:visible !important;
}

/* =========================================================
   SMOOTH SCROLL OFFSET
========================================================= */

section{
  scroll-margin-top:90px;
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#edf2f7;
}

::-webkit-scrollbar-thumb{
  background:#cbd5e1;

  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
  background:#94a3b8;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  body{
    padding-top:70px;
  }

  .tv-exam-page{
    padding-top:0 !important;
  }

  .section{
    padding:50px 0;
  }

  .container{
    padding-left:16px;
    padding-right:16px;
  }

  section{
    scroll-margin-top:82px;
  }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .section{
    padding:46px 0;
  }

  .container{
    padding-left:14px;
    padding-right:14px;
  }

}