/* ==========================================================
   SERGIO

   File: base.css
   Version: 1.1

   Purpose:
   Defines the global base styles used throughout
   the SERGIO digital flagship.

========================================================== */


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

html {
    scroll-behavior: smooth;
}


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

body {
    min-height: 100vh;

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

    overflow-x: hidden;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   MAIN
========================================================== */

main {
    display: block;
}


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

img,
picture {
    height: auto;
}

video {
    width: 100%;
    height: auto;
}


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

a {
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

a:hover {
    opacity: .7;
}


/* ==========================================================
   BUTTONS
========================================================== */

button {
    cursor: pointer;
    border: none;
    background: none;
}


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

input,
textarea,
select {
    border: none;
    outline: none;
    background: transparent;
}

[aria-invalid="true"] {
    box-shadow: 0 1px 0 #9f2f24;
}

.form-field-error,
.form-status {
    margin-top: .5rem;
    color: #7b241c;
    font-size: .75rem;
    line-height: 1.45;
}

.form-status:empty,
.form-field-error:empty {
    display: none;
}


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

::selection {
    background: var(--color-accent);
    color: var(--color-text-primary);
}


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

:focus-visible {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 4px;
}


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

[hidden] {
    display: none !important;
}


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

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}