/* Explain: Base reset and typography defaults for the website. - */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    color: var(--text-color);
    scroll-padding-top: 92px;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
a,
select {
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

::selection {
    background: var(--accent-color);
    color: #ffffff;
}

/* Overriding rounded elements to sharp edges globally for premium feel */
.btn {
    border-radius: 0 !important;
}

/* Force text color on dark buttons to prevent black-on-black issues */
.btn[class*="bg-[var(--button-color)]"] {
    color: var(--button-text) !important;
}

.input, .textarea, .select {
    border-radius: 0 !important;
    background-color: var(--field-bg) !important;
    border-color: #D1D1D1 !important;
}

.input:focus, .textarea:focus, .select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 1px var(--accent-color) !important;
    outline: none !important;
}

.richtext-content p {
    margin-bottom: 1.5em;
    line-height: 1.8;
}

.richtext-content h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 600;
    color: var(--text-color);
}

.richtext-content h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 600;
}

.richtext-content ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}

.richtext-content a {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 4px;
}