/* MU Styles for MaddenUniversity.com */

/* ---------------------------------------------------------
   MU CORE VARIABLES
--------------------------------------------------------- */

:root {
    --mu-font-family-base: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mu-font-family-heading: "PT Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --mu-font-weight-base: 400;
    --mu-font-weight-heading: 700;

    --mu-font-size-base: 1rem;
    --mu-font-size-h1: 2.25rem;
    --mu-font-size-h2: 1.875rem;
    --mu-font-size-h3: 1.5rem;
    --mu-font-size-h4: 1.25rem;
    --mu-font-size-h5: 1.125rem;
    --mu-font-size-h6: 1rem;

    --mu-line-height-base: 1.6;
    --mu-line-height-heading: 1.25;

    --mu-accent-color: #00338D;
    --mu-on-accent: #FFFFFF;

    --mu-container-width: 72rem;
    --mu-narrow-width: 48rem;
    --mu-wide-width: 90rem;

    --mu-mobile-breakpoint: 36rem;
    --mu-tablet-breakpoint: 48rem;
    --mu-desktop-breakpoint: 64rem;
}

/* ---------------------------------------------------------
   MU TYPOGRAPHY
--------------------------------------------------------- */

.mu-typography,
.mu-content {
    font-family: var(--mu-font-family-base);
    font-size: var(--mu-font-size-base);
    font-weight: var(--mu-font-weight-base);
    line-height: var(--mu-line-height-base);
}

.mu-content h1,
.mu-content h2,
.mu-content h3,
.mu-content h4,
.mu-content h5,
.mu-content h6 {
    font-family: var(--mu-font-family-heading);
    font-weight: var(--mu-font-weight-heading);
    line-height: var(--mu-line-height-heading);
    margin-block: 1.5rem 1rem;
}

.mu-content h1 { font-size: var(--mu-font-size-h1); }
.mu-content h2 { font-size: var(--mu-font-size-h2); }
.mu-content h3 { font-size: var(--mu-font-size-h3); }
.mu-content h4 { font-size: var(--mu-font-size-h4); }
.mu-content h5 { font-size: var(--mu-font-size-h5); }
.mu-content h6 { font-size: var(--mu-font-size-h6); }

.mu-content p,
.mu-content ul,
.mu-content ol,
.mu-content blockquote {
    margin-block: 0 1rem;
}

/* ---------------------------------------------------------
   MU BUTTONS
--------------------------------------------------------- */

.mu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border-radius: 0.25rem;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mu-btn-primary {
    background: var(--mu-accent-color);
    border: 1px solid var(--mu-accent-color);
    color: var(--mu-on-accent);
}

.mu-btn-primary:hover,
.mu-btn-primary:focus {
    opacity: 0.85;
}

.mu-btn-secondary {
    background: transparent;
    border: 1px solid var(--mu-accent-color);
    color: var(--mu-accent-color);
}

.mu-btn-secondary:hover,
.mu-btn-secondary:focus {
    background: var(--mu-accent-color);
    color: var(--mu-on-accent);
}

/* ---------------------------------------------------------
   MU FORMS
--------------------------------------------------------- */

.mu-form,
.mu-fieldset {
    display: grid;
    gap: 1.5rem;
}

.mu-fieldset-title {
    font-family: var(--mu-font-family-heading);
    font-weight: var(--mu-font-weight-heading);
    margin-bottom: 0.5rem;
}

.mu-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #d8dde3;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 1rem;
}

.mu-input:focus {
    outline: 2px solid var(--mu-accent-color);
    outline-offset: 0.15em;
}

.mu-signup-form,
.mu-login-form {
    max-width: 32rem;
    margin-inline: auto;
    display: grid;
    gap: 2rem;
}

/* ---------------------------------------------------------
   MU SECTIONS
--------------------------------------------------------- */

.mu-section {
    padding: 2rem 1rem;
    margin-block: 2rem;
}

.mu-section--hero {
    padding: 3rem 1rem;
    text-align: center;
}

.mu-section--footer {
    padding: 2rem 1rem;
    background: #f5f7fa;
}

/* ---------------------------------------------------------
   MU BLOCKS
--------------------------------------------------------- */

.mu-block {
    padding: 1.5rem;
    border: 1px solid #e5e8ec;
    border-radius: 0.5rem;
    background: #ffffff;
    margin-block: 1.5rem;
}

.mu-block h3 {
    margin-bottom: 0.75rem;
    font-family: var(--mu-font-family-heading);
    font-size: var(--mu-font-size-h3);
}

/* ---------------------------------------------------------
   MU TABLES
--------------------------------------------------------- */

.mu-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1.5rem;
}

.mu-content th,
.mu-content td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #d8dde3;
    text-align: left;
}

.mu-content tbody tr:nth-child(even) {
    background: #fafbfc;
}

/* ---------------------------------------------------------
   MU LINKS
--------------------------------------------------------- */

.mu-content a {
    color: var(--mu-accent-color);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.mu-content a:hover {
    text-decoration: none;
}

/* ---------------------------------------------------------
   MU RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 48rem) {
    .mu-section {
        padding: 1.5rem 1rem;
    }

    .mu-signup-form,
    .mu-login-form {
        max-width: 100%;
    }
}