/* ==========================================================================
   MathB Events Theme
   Base Styles
   ========================================================================== */

/* ==========================================================================
   Box Model
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Root
   ========================================================================== */

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;

    min-width: 320px;

    font-family: var(--mathb-font-body);
    font-size: var(--mathb-text-base);
    font-weight: var(--mathb-fw-normal);
    line-height: var(--mathb-line-normal);

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

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

/* ==========================================================================
   Selection
   ========================================================================== */

::selection {
    color: var(--mathb-white);
    background: var(--mathb-primary);
}

::-moz-selection {
    color: var(--mathb-white);
    background: var(--mathb-primary);
}

/* ==========================================================================
   Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--mathb-light);
}

::-webkit-scrollbar-thumb {
    background: var(--mathb-primary);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mathb-primary-dark);
}

/* ==========================================================================
   Images
   ========================================================================== */

img {
    display: block;

    max-width: 100%;
    height: auto;

    border: 0;
}

picture {
    display: block;
}

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

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

/* ==========================================================================
   Figures
   ========================================================================== */

figure {
    margin: 0;
}

figcaption {
    margin-top: 1rem;
    color: var(--mathb-text-light);
    font-size: var(--mathb-text-sm);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: inherit;
    text-decoration: none;

    transition:
        color var(--mathb-transition),
        background var(--mathb-transition),
        border-color var(--mathb-transition),
        opacity var(--mathb-transition);
}

a:hover {
    color: var(--mathb-primary);
}

/* ==========================================================================
   Lists
   ========================================================================== */

ul,
ol {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
}

/* ==========================================================================
   Horizontal Rule
   ========================================================================== */

hr {

    margin: 3rem 0;

    border: 0;
    border-top: 1px solid var(--mathb-border);

}

/* ==========================================================================
   Tables
   ========================================================================== */

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 1rem;
    text-align: left;
}

th {
    font-weight: var(--mathb-fw-semibold);
}

/* ==========================================================================
   Forms
   ========================================================================== */

form {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

/* ==========================================================================
   Inputs
   ========================================================================== */

input,
textarea,
select,
button {

    font: inherit;

    color: inherit;

}

input,
textarea,
select {

    width: 100%;

    padding: .9rem 1rem;

    border: 1px solid var(--mathb-border);
    border-radius: var(--mathb-radius-md);

    background: var(--mathb-white);

    transition:
        border-color var(--mathb-transition),
        box-shadow var(--mathb-transition);

}

textarea {
    min-height: 180px;
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {

    outline: none;

    border-color: var(--mathb-primary);

    box-shadow:
        0 0 0 3px rgba(214, 177, 106, .15);

}

/* ==========================================================================
   Placeholder
   ========================================================================== */

::placeholder {
    color: var(--mathb-text-light);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

button {

    cursor: pointer;

    border: 0;

    background: transparent;

}

/* ==========================================================================
   Iframe
   ========================================================================== */

iframe {

    display: block;

    width: 100%;

    border: 0;

}

/* ==========================================================================
   Video
   ========================================================================== */

video {

    display: block;

    max-width: 100%;

}

/* ==========================================================================
   Hidden
   ========================================================================== */

[hidden] {
    display: none !important;
}

/* ==========================================================================
   Disabled
   ========================================================================== */

:disabled {

    cursor: not-allowed;

    opacity: .6;

}

/* ==========================================================================
   Focus Visible
   ========================================================================== */

:focus-visible {

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

    outline-offset: 3px;

}

/* ==========================================================================
   WordPress Embeds
   ========================================================================== */

.wp-block-embed,
.wp-block-image,
.wp-block-gallery {

    margin-bottom: 2rem;

}

/* ==========================================================================
   Clearfix
   ========================================================================== */

.clear::after {

    content: "";

    display: block;

    clear: both;

}

/* ==========================================================================
   End
   ========================================================================== */