@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800;900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');

body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Montserrat', sans-serif;
}

/* Custom Dark Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #121212; 
}
::-webkit-scrollbar-thumb {
    background: #3F3F46; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #FACC15; 
}

/* Custom Checkbox/Radio */
input[type="checkbox"], input[type="radio"] {
    accent-color: #FACC15;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* Material Switch Toggle Animation */
.toggle-checkbox:checked {
    right: 0;
    border-color: #FACC15;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #FACC15;
}

/* Material Ripple Effect Base */
.ripple, .btn {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}
.ripple:after, .btn:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}
.ripple:active:after, .btn:active:after {
    transform: scale(0, 0);
    opacity: .2;
    transition: 0s;
}

/* Blog article: restore margin and link styles inside article cards */
.blog-article p {
    margin-bottom: 1rem;
}
.blog-article p:last-child {
    margin-bottom: 0;
}
.blog-article h1, .blog-article h2, .blog-article h3, .blog-article h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.blog-article h1:first-child, .blog-article h2:first-child, .blog-article h3:first-child, .blog-article h4:first-child {
    margin-top: 0;
}
.blog-article a {
    color: #FACC15;
    text-decoration: none;
}
.blog-article a:hover {
    color: #FDE047;
    text-decoration: underline;
}
.blog-article .article-content a {
    color: #FACC15;
}
.blog-article .article-content a:hover {
    color: #FDE047;
    text-decoration: underline;
}