/* =====================================================
   ObfuscatorJS Framework v3.0
   global.css
   Global Base Style
   Safe Production Version

   Compatible with:
   - layout.css
   - responsive.css
   - header.css
   - footer.css
   - form.css
   - home.css
   - card.css
===================================================== */


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

html {

    width: 100%;

    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    scroll-padding-top: var(--header-height);

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

}


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

body {

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;
    padding: 0;

    font-family: var(--font-family);

    font-size: var(--font-size-md);

    font-weight: var(--font-normal);

    line-height: var(--line-height);

    color: var(--text-color);

    background-color: var(--background-color);

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;

}


/* =====================================================
   IMAGES
===================================================== */

img {

    display: block;

    max-width: 100%;

    height: auto;

}


/* =====================================================
   SVG
===================================================== */

svg {

    display: inline-block;

    max-width: 100%;

}


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

a {

    color: inherit;

    text-decoration: none;

}


/*
 * Do not globally change link color on hover.
 *
 * Individual components such as:
 * header.css
 * footer.css
 * card.css
 * home.css
 *
 * control their own hover states.
 */


/* =====================================================
   HEADINGS
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin-top: 0;

    color: var(--text-color);

    font-weight: var(--font-bold);

    line-height: 1.3;

}


/* =====================================================
   HEADING SIZES
===================================================== */

h1 {

    font-size: var(--h1);

}

h2 {

    font-size: var(--h2);

}

h3 {

    font-size: var(--h3);

}

h4 {

    font-size: var(--h4);

}

h5 {

    font-size: var(--h5);

}

h6 {

    font-size: var(--h6);

}


/* =====================================================
   PARAGRAPH
===================================================== */

p {

    margin-top: 0;

    color: var(--text-light-color);

}


/* =====================================================
   LISTS
===================================================== */

ul,
ol {

    margin: 0;

    padding: 0;

    list-style: none;

}


/* =====================================================
   FORM FONT INHERIT
===================================================== */

button,
input,
textarea,
select {

    font: inherit;

}


/* =====================================================
   BUTTON BASE
===================================================== */

/*
 * Only normalize default margin here.
 *
 * Do NOT remove border/background globally because
 * button.css / component styles may depend on them.
 */

button {

    margin: 0;

}


/* =====================================================
   TABLE
===================================================== */

table {

    width: 100%;

    border-collapse: collapse;

}


/* =====================================================
   CODE
===================================================== */

code,
kbd,
samp,
pre {

    font-family: var(--font-mono, monospace);

}


/* =====================================================
   INLINE CODE
===================================================== */

code {

    padding: 2px 6px;

    border-radius: var(--radius-sm);

    background: var(--surface-secondary);

    color: var(--text-color);

    font-size: var(--font-size-sm);

}


/* =====================================================
   PRE
===================================================== */

pre {

    max-width: 100%;

    overflow-x: auto;

}


/* =====================================================
   HORIZONTAL RULE
===================================================== */

hr {

    margin: var(--space-6) 0;

    border: 0;

    border-top: 1px solid var(--border-color);

}


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

:focus-visible {

    outline: 2px solid var(--primary-color);

    outline-offset: 2px;

}


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

::selection {

    background: var(--primary-color);

    color: var(--white, #ffffff);

}


/* =====================================================
   HIDDEN
===================================================== */

.hidden {

    display: none !important;

}


/* =====================================================
   VISUALLY HIDDEN
===================================================== */

/*
 * Keeps content available to screen readers
 * while visually hiding it.
 */

.visually-hidden {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    padding: 0 !important;

    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;

}


/* =====================================================
   DARK MODE
===================================================== */

html.dark {

    color-scheme: dark;

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}


/* =====================================================
   PRINT
===================================================== */

@media print {

    html {

        scroll-behavior: auto;

    }

    body {

        min-height: auto;

        background: #ffffff;

        color: #000000;

    }

    a {

        color: #000000;

        text-decoration: none;

    }

}


/* =====================================================
   END OF GLOBAL.CSS
===================================================== */