/* ==========================================================================
   Modern CSS Reset
   Based on the work of Josh Comeau, Andy Bell, and others.
   ========================================================================== */

/*
  1. Use a more intuitive box-sizing model.
  This is the most fundamental and important part of the reset.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin and padding on most elements.
*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
  padding: 0;
}

/*
  3. Set core root defaults.
  - Set a default font size and line height for better readability.
  - Enable smooth scrolling for anchor links.
*/
html {
  font-size: 100%; /* Sets the base font size to the user's browser default (usually 16px) */
  line-height: 1.5;
  scroll-behavior: smooth;
}

/*
  4. Set core body defaults.
  - Use a system font stack for performance and a native feel.
  - Improve text rendering.
*/
body {
  min-height: 100vh;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  text-rendering: optimizeSpeed;
  background-color: #FBFBFC;
}

/*
  5. Remove list styles on ul, ol elements.
  We can add them back on a case-by-case basis.
*/
ul,
ol {
  list-style: none;
}

/*
  6. Make images and other media easier to work with.
  - By default, they are inline elements and can cause layout issues.
  - max-width: 100% ensures they are responsive.
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
  7. Inherit fonts for form controls.
  This ensures consistency with the rest of the page.
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  8. Remove default text decorations and set a sensible default for links.
*/
a {
  text-decoration: none;
  color: inherit;
}

/*
  9. A more accessible focus outline.
  - The default focus outline is often removed, which is bad for accessibility.
  - :focus-visible only shows the outline for keyboard users, not mouse users.
*/
:focus-visible {
  outline: 2px solid #4f46e5; /* You can change this color */
  outline-offset: 2px;
}

/*
  10. Create a root stacking context.
  This is a modern best practice to avoid z-index issues with third-party scripts or complex components.
*/
#root,
#__next {
  isolation: isolate;
}